/* ============================================================
   Explora Investor Deck — Per-slide layouts
   ============================================================ */

/* ---------- 01 · Cover (Brand-Bible spread + language chips) ---------- */
.slide-cover { background:var(--jungle); overflow:hidden; }
.cover-bg { position:absolute; inset:0; z-index:0; }
.cover-bg img { width:100%; height:100%; object-fit:cover; display:block; }
.cover-veil {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(7,34,26,.55) 75%, rgba(7,34,26,.78) 100%),
    linear-gradient(to bottom, rgba(7,34,26,.5) 0%, transparent 28%, transparent 72%, rgba(7,34,26,.65) 100%);
}
.cover-corner {
  position:absolute; z-index:5;
  font-size:11px; letter-spacing:3.4px; text-transform:uppercase;
  color:rgba(242,235,219,.55); font-weight:500; white-space:nowrap;
}
.cc-tl { top:38px; left:60px; }
.cc-tr { top:38px; right:60px; }
.cc-bl { bottom:38px; left:60px; }
.cc-br { bottom:38px; right:60px; }
.cover-inner {
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 60px; gap:6px;
}
.cover-mark { width:min(82%, 980px); margin-bottom:10px; }
.cover-mark img {
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 12px 38px rgba(0,0,0,.55));
}
.cover-promise { display:flex; flex-direction:column; align-items:center; gap:14px; max-width:760px; margin-top:18px; }
.cover-eyebrow {
  font-size:11px; letter-spacing:4.5px; text-transform:uppercase;
  color:var(--honey); font-weight:600;
}
.cover-slogan {
  font-family:var(--font-serif); font-weight:700;
  font-size:36px; line-height:1.25; color:var(--on-dark); letter-spacing:-.4px;
}
.cover-slogan em { font-style:normal; font-weight:700; color:var(--honey); }

/* ---------- 02 · Tailwinds ---------- */
.s-cards-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:15px; flex:1; min-height:0; }

/* ---------- 03 · Concept hub ---------- */
.hub {
  position:relative; flex:1; min-height:0; margin-top:6px;
}
.hub svg.hub-lines { position:absolute; inset:0; width:100%; height:100%; }
.hub-center {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:172px; height:172px; border-radius:50%;
  background:var(--jungle-md); color:var(--on-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; box-shadow:0 14px 40px rgba(19,89,85,.4); z-index:3;
}
.hub-center svg { height:30px; width:auto; margin-bottom:7px; }
.hub-center span { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--sage-lt); }
.hub-node {
  position:absolute; width:262px; transform:translate(-50%,-50%);
  background:#fff; border:var(--border); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm); z-index:3;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
  cursor:pointer;
}
.hub-node:hover,.hub-node.active {
  border-color:var(--jungle-md); box-shadow:var(--shadow);
  transform:translate(-50%,-50%) scale(1.035);
}
.hub-node .hn-title { font-size:15.5px; font-weight:600; color:var(--jungle); margin-bottom:5px; }
.hub-node .hn-act { font-size:12px; color:var(--muted); line-height:1.5; }
.hub-node.active .hn-act { color:var(--jungle-md); }

/* ---------- 04 · Activities ---------- */
.s-cards-4 { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:16px; flex:1; min-height:0; }
.act-card { padding:22px 24px; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.act-head { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.act-head h3 { font-size:16px; font-weight:600; letter-spacing:.4px; color:var(--jungle-md); }
.act-list { display:flex; flex-wrap:wrap; gap:7px 0; }
.act-card .act-img {
  position:absolute; right:-30px; bottom:-30px; width:172px; height:172px;
  border-radius:50%; object-fit:cover; opacity:.16;
}

/* ---------- 05 · Video ---------- */
.slide-video { background:var(--jungle); }
.video-stage { position:absolute; inset:0; }
.video-stage img { width:100%; height:100%; object-fit:cover; }
.video-stage::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(22,28,40,.35),rgba(22,28,40,.78));
}
.video-ui {
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  text-align:center;
}
.play-btn {
  width:104px; height:104px; border-radius:50%;
  background:rgba(242,235,219,.14); backdrop-filter:blur(4px);
  display:grid; place-items:center;
  border:1.5px solid rgba(242,235,219,.4);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.play-btn:hover { transform:scale(1.07); background:var(--sage); }
.play-btn svg { width:34px; height:34px; margin-left:5px; }
.video-ui h2 {
  font-family:var(--font-serif); font-weight:600; font-size:38px; color:var(--on-dark);
}
.video-ui p { font-size:14px; color:var(--on-dark-soft); }
.video-tag {
  position:absolute; left:50%; bottom:54px; transform:translateX(-50%);
  font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--on-dark-faint); border:1px solid rgba(242,235,219,.2);
  padding:7px 16px; border-radius:var(--radius-pill);
}

/* ---------- 06 · Catchment ---------- */
.catch-grid { display:grid; grid-template-columns:386px 1fr; gap:22px; flex:1; min-height:0; }
.reach-card { padding:22px 24px; display:flex; flex-direction:column; }
.reach-card .rc-h {
  font-size:11px; font-weight:600; letter-spacing:1.7px; text-transform:uppercase;
  color:var(--jungle-lt); margin-bottom:14px;
}
.reach-map { position:relative; height:188px; margin:2px 0 16px; }
.reach-node {
  position:absolute; transform:translate(-50%,-50%);
  font-size:12px; font-weight:600; color:var(--jungle);
  background:#fff; border:var(--border); border-radius:var(--radius-pill);
  padding:7px 14px; box-shadow:var(--shadow-sm); white-space:nowrap;
}
.reach-node.core {
  background:var(--jungle-md); color:var(--on-dark); border-color:var(--jungle-md);
  padding:14px 18px; text-align:center; z-index:2;
}
.reach-node.core b { display:block; font-size:14px; }
.reach-node.core span { font-size:9.5px; letter-spacing:1px; color:var(--sage-lt); text-transform:uppercase; }
.reach-map svg { position:absolute; inset:0; width:100%; height:100%; }
.reach-stats { display:flex; gap:14px; margin-top:auto; }
.reach-stats .rs { flex:1; }
.reach-stats .rs b { font-size:30px; font-weight:600; color:var(--jungle-md); letter-spacing:-.5px; }
.reach-stats .rs span { display:block; font-size:11px; color:var(--muted); margin-top:1px; }
.pools { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:16px; }
.pool-card { padding:18px 20px; display:flex; flex-direction:column; }
.pool-card .pc-top { display:flex; justify-content:space-between; align-items:baseline; }
.pool-card .pc-label {
  font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--jungle-lt);
}
.pool-card .pc-age { font-size:11px; font-style:italic; color:var(--muted); }
.pool-card .pc-value {
  font-size:42px; font-weight:600; color:var(--jungle); line-height:1;
  letter-spacing:-1px; margin:7px 0 8px;
}
.pool-card .pc-use {
  font-size:12px; color:var(--muted); line-height:1.5;
  margin-top:auto; padding-top:9px; border-top:var(--border);
}

/* ---------- 06 · The Address / Building ---------- */
.slide-building { background:var(--jungle); }
.build-stage { position:absolute; inset:0; }
.build-stage > img { width:100%; height:100%; object-fit:cover; }
.build-stage::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(22,28,40,.78) 0%,rgba(22,28,40,.15) 32%,transparent 60%,rgba(22,28,40,.86) 100%);
}
.build-head { position:absolute; left:76px; top:60px; z-index:4; max-width:820px; }
.build-head .eyebrow { color:var(--sage); display:block; margin-bottom:10px; }
.build-head .slide-title { color:var(--on-dark); text-shadow:0 2px 16px rgba(22,28,40,.55); }
.build-invest {
  position:absolute; right:76px; top:60px; z-index:4; text-align:right;
}
.build-invest .bi-label {
  font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--sage);
}
.build-invest .bi-value {
  font-family:var(--font-serif); font-size:52px; font-weight:600; color:var(--on-dark);
  line-height:1; text-shadow:0 2px 16px rgba(22,28,40,.55);
}
.build-legend {
  position:absolute; left:76px; bottom:54px; z-index:4;
  display:flex; gap:10px;
}
.build-legend .bl {
  font-size:11px; color:var(--on-dark-soft);
  display:flex; align-items:center; gap:7px;
}
.build-legend .bl::before {
  content:""; width:9px; height:9px; border-radius:50%; background:var(--sage);
}

/* ---------- 09 · Business Model Canvas ---------- */
.bmc { display:grid; gap:12px; flex:1; min-height:0;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:1fr 1fr auto;
}
.bmc-cell {
  border:var(--border); border-radius:var(--radius-sm); background:#fff;
  padding:13px 15px; display:flex; flex-direction:column; gap:7px;
  box-shadow:var(--shadow-sm);
}
.bmc-cell .bc-h {
  font-size:10.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--jungle-md); display:flex; align-items:center; gap:7px;
}
.bmc-cell .bc-h .n {
  width:18px; height:18px; border-radius:5px; background:var(--sage-xl);
  color:var(--jungle-md); font-size:10px; display:grid; place-items:center; flex:none;
}
.bmc-cell p { font-size:11.5px; color:var(--muted); line-height:1.5; }
.bmc-cell.pending p { font-style:italic; }
.bmc-kp { grid-row:1 / span 2; }
.bmc-vp { grid-row:1 / span 2; background:var(--sage-xl); border-color:var(--sage-lt); }
.bmc-cr { grid-row:1 / span 2; }
.bmc-cost { grid-column:1 / span 3; grid-row:3; }
.bmc-rev  { grid-column:4 / span 2; grid-row:3; background:var(--sage-xl); border-color:var(--sage-lt); }

/* ---------- 10 / 11 · Competitor tables ---------- */
.comp-host { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
.comp-host::-webkit-scrollbar { width:7px; }
.comp-host::-webkit-scrollbar-thumb { background:var(--sand); border-radius:4px; }
.comp-host::-webkit-scrollbar-track { background:transparent; }

/* ---------- 12 · SWOT ---------- */
.swot { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:17px; flex:1; min-height:0; }
.swot-q { padding:15px 22px; display:flex; flex-direction:column; border-radius:var(--radius); }
.swot-q .sq-h {
  display:flex; align-items:center; gap:9px; margin-bottom:10px;
  font-size:12.5px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase;
}
.swot-q .sq-h .sq-i { width:24px; height:24px; border-radius:8px; display:grid; place-items:center; flex:none; }
.swot-q ul { display:flex; flex-direction:column; gap:6px; }
.swot-q li { font-size:12px; line-height:1.4; color:var(--jungle-md); padding-left:15px; position:relative; }
.swot-q li::before { content:""; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:2px; }
.swot-s  { background:var(--sage-xl); }
.swot-s  .sq-h,.swot-s  .sq-h .sq-i { color:var(--jungle-md); }   .swot-s  .sq-h .sq-i { background:#fff; }  .swot-s  li::before { background:var(--jungle-md); }
.swot-w  { background:#F7E4DC; }
.swot-w  .sq-h,.swot-w  .sq-h .sq-i { color:var(--terra); }    .swot-w  .sq-h .sq-i { background:#fff; }  .swot-w  li::before { background:var(--terra); }
.swot-o  { background:var(--cream-dk); }
.swot-o  .sq-h,.swot-o  .sq-h .sq-i { color:var(--jungle-lt); }.swot-o  .sq-h .sq-i { background:#fff; }  .swot-o  li::before { background:var(--jungle-lt); }
.swot-t  { background:#EDE6D6; }
.swot-t  .sq-h,.swot-t  .sq-h .sq-i { color:var(--blush-dk); } .swot-t  .sq-h .sq-i { background:#fff; }  .swot-t  li::before { background:var(--blush-dk); }

/* ---------- 13 · Company & Founders ---------- */
.co-grid { display:grid; grid-template-columns:1.32fr 1fr; gap:26px; flex:1; min-height:0; }
.org { position:relative; padding:18px; display:flex; }
.org svg { width:100%; height:100%; }
.mv { display:flex; flex-direction:column; gap:16px; justify-content:center; }
.mv-card { padding:22px 24px; border-radius:var(--radius); }
.mv-card.mission { background:var(--jungle-md); color:var(--on-dark); }
.mv-card.vision  { background:var(--sage-xl); }
.mv-card .mv-h {
  font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  margin-bottom:9px;
}
.mv-card.mission .mv-h { color:var(--sage-lt); }
.mv-card.vision  .mv-h { color:var(--jungle-lt); }
.mv-card p { font-family:var(--font-serif); font-size:18px; line-height:1.5; }
.mv-card.mission p { color:var(--on-dark); }
.mv-card.vision  p { color:var(--jungle); }
.mv-card p em { font-style:normal; font-weight:700; color:var(--honey); }
.mv-card.vision p em { color:var(--honey-dk); }

/* ---------- 14 · Milestones ---------- */
.timeline { position:relative; flex:1; min-height:0; display:flex; align-items:center; }
.timeline-track {
  position:absolute; left:40px; right:40px; top:50%; height:3px;
  background:var(--sand); border-radius:2px;
}
.timeline-track .fill {
  position:absolute; left:0; top:0; bottom:0; width:34%;
  background:linear-gradient(90deg,var(--jungle-md),var(--sage)); border-radius:2px;
}
.ms-row { display:grid; grid-template-columns:repeat(6,1fr); width:100%; gap:10px; position:relative; }
.ms { display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; }
.ms .ms-dot {
  width:18px; height:18px; border-radius:50%; background:#fff;
  border:3px solid var(--sand); position:relative; z-index:2;
}
.ms.done .ms-dot { border-color:var(--jungle-md); background:var(--jungle-md); }
.ms.now .ms-dot  { border-color:var(--sage); background:var(--sage); }
.ms-card {
  background:#fff; border:var(--border); border-radius:var(--radius-sm);
  padding:12px 13px; width:100%; box-shadow:var(--shadow-sm);
  min-height:88px; box-sizing:border-box;
}
.ms.flip { flex-direction:column-reverse; }
.ms-card .mc-date { font-size:11px; font-weight:600; color:var(--jungle-lt); letter-spacing:.5px; }
.ms-card .mc-title { font-size:13px; font-weight:600; color:var(--jungle); margin:3px 0 4px; }
.ms-card .mc-note { font-size:11px; color:var(--muted); line-height:1.45; }

/* ---------- 15 · Financials ---------- */
.fin-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; flex:1; min-height:0; }
.fin-tile {
  border:var(--border); border-radius:var(--radius); background:#fff;
  padding:20px 22px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
}
.fin-tile .ft-label {
  font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--jungle-lt);
}
.fin-tile .ft-value {
  font-family:var(--font-serif); font-size:40px; font-weight:600; color:var(--jungle);
  margin:8px 0; line-height:1;
}
.fin-tile .ft-value.pending { font-size:22px; color:var(--muted); font-style:italic; }
.fin-tile .ft-note { font-size:12px; color:var(--muted); line-height:1.5; margin-top:auto; }
.fin-tile.wide { grid-column:1 / span 3; }
.fin-bars { display:flex; align-items:flex-end; gap:18px; height:118px; margin-top:14px; }
.fin-bars .fb { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; }
.fin-bars .fb .bar {
  width:100%; flex:none;
  background:repeating-linear-gradient(45deg,var(--cream-dk),var(--cream-dk) 8px,#fff 8px,#fff 16px);
  border:1.5px dashed var(--sand); border-bottom:none; border-radius:6px 6px 0 0;
}
.fin-bars .fb span { font-size:10.5px; color:var(--muted); }

/* ---------- 20 · Closing ---------- */
.slide-closing { background:var(--jungle); }
.closing-wrap {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:30px; text-align:center;
}
.closing-logo { height:74px; }
.closing-logo svg,.closing-logo img { height:100%; width:auto; }
.closing-slogan {
  font-family:var(--font-serif); font-size:44px; font-weight:600; color:var(--on-dark);
  line-height:1.25;
}
.closing-slogan em { font-style:normal; font-weight:700; color:var(--honey); }
.closing-contact {
  display:flex; gap:30px; font-size:13px; color:var(--on-dark-soft);
  letter-spacing:.5px;
}
.closing-contact span { display:flex; align-items:center; gap:8px; }
.closing-contact b { color:var(--sage); font-weight:600; }
.closing-multi {
  display:flex; gap:18px; margin-top:6px;
  font-family:var(--font-serif); font-style:italic; font-size:14px;
  color:var(--on-dark-faint);
}

/* ---------- chrome visibility on dark vs light slides ---------- */
/* Cream slides: solid dark button with cream icon for full contrast.
   Previous rule used rgba(7,34,26,.08) which was effectively invisible. */
.slide-shell-light .nav-arrow,
.slide-shell-light .ctrl-btn {
  background: rgba(7,34,26,.92);
  color: var(--cream);
  border: 1px solid rgba(7,34,26,.15);
}
.slide-shell-light .nav-arrow:hover,
.slide-shell-light .ctrl-btn:hover {
  background: var(--jungle);
  color: #fff;
  border-color: var(--jungle);
}
.slide-shell-light #hud-section { color:var(--jungle-md); }
.slide-shell-light #hud-count { color:var(--muted); }
.slide-shell-light #hud-count b { color:var(--jungle); }
.slide-shell-light #progress { background:rgba(7,34,26,.10); }
.slide-shell-light #deck-brand { filter:none; }

/* financials — pending placeholder (replaces illustrative chart) */
.fin-placeholder {
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:12px; padding:22px;
  border:1.5px dashed var(--sand); border-radius:var(--radius);
  background:repeating-linear-gradient(45deg,var(--cream-dk),var(--cream-dk) 10px,transparent 10px,transparent 20px);
}
.fin-placeholder .fp-tag {
  font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--honey-dk); background:var(--cream); border:1px solid var(--sand);
  padding:5px 12px; border-radius:var(--radius-pill);
}
.fin-placeholder p { font-size:13.5px; line-height:1.55; color:var(--muted); max-width:420px; }

/* outlook — pending placeholder (replaces invented rollout steps) */
.outlook-ph {
  margin-top:6px; max-width:680px;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:26px 28px;
  border:1.5px dashed rgba(242,235,219,.28); border-radius:var(--radius);
  background:rgba(242,235,219,.04);
}
.outlook-ph .oph-tag {
  font-size:11px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--honey); border:1px solid rgba(232,199,127,.5);
  padding:5px 13px; border-radius:var(--radius-pill);
}
.outlook-ph p { font-size:16px; line-height:1.6; color:var(--on-dark-soft); }

/* ---------- shared placeholder boxes (maps, pending diagrams) ---------- */
.ph-box {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px;
  border:1.5px dashed var(--sand); border-radius:var(--radius); padding:18px;
  background:repeating-linear-gradient(45deg,var(--cream-dk),var(--cream-dk) 9px,transparent 9px,transparent 18px);
}
.ph-tag {
  font-size:10.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--honey-dk); background:var(--cream); border:1px solid var(--sand);
  padding:4px 11px; border-radius:var(--radius-pill);
}
.ph-box p { font-size:13px; color:var(--muted); line-height:1.5; }

/* slide 7 — location map placeholder (dark) */
.map-ph {
  flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center;
  border:1.5px dashed rgba(242,235,219,.25); border-radius:var(--radius-xl);
  background:rgba(242,235,219,.03);
}
.map-ph .ph-tag { color:var(--honey); background:transparent; border-color:rgba(232,199,127,.5); }
.map-ph > p { font-size:18px; color:var(--on-dark-soft); margin:0; }
.map-ph-facts { display:flex; gap:48px; margin-top:8px; }
.map-ph-facts div { display:flex; flex-direction:column; gap:4px; }
.map-ph-facts b { font-family:var(--font-serif); font-size:36px; font-weight:800; color:var(--honey); line-height:1; }
.map-ph-facts span { font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--on-dark-faint); }

/* ============================================================
   v5 — new slides & components (client final-content deck)
   ============================================================ */

/* tighter title block for content-dense slides */
.title-block.tb-tight { margin-bottom:14px; }

/* ---------- 02 · Language chips (inline on the cover) ---------- */
.lang-row {
  display:flex; gap:10px; margin-top:34px; justify-content:center; flex-wrap:nowrap;
}
.lang-btn {
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:var(--radius-pill);
  background:rgba(242,235,219,.09); border:1px solid rgba(242,235,219,.24);
  color:var(--on-dark); cursor:pointer;
  font-size:13px; font-weight:600;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease),
             color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  backdrop-filter:blur(6px);
}
.lang-btn:hover { transform:translateY(-2px); background:var(--honey); color:var(--jungle); border-color:transparent; }
.lang-btn .lf { font-size:17px; line-height:1; }
.lang-btn .lt { font-size:13px; font-weight:600; letter-spacing:.3px; }
.lang-btn[data-stub] { opacity:.78; }
.lang-btn .lsoon {
  font-size:8.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--honey); background:rgba(232,199,127,.12);
  border:1px solid rgba(232,199,127,.4); padding:2px 6px;
  border-radius:var(--radius-pill); margin-left:4px;
}
.lang-btn:hover .lsoon { color:var(--jungle); background:rgba(7,34,26,.12); border-color:rgba(7,34,26,.35); }
.lang-note { font-size:11.5px; color:rgba(242,235,219,.55); margin-top:14px; letter-spacing:.4px; }

/* ---------- 03 · Promise ---------- */
.slide-promise { background:var(--jungle-md); }
.promise-wrap {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  gap:20px; padding:0 110px;
}
.promise-wrap .eyebrow { color:var(--sage); }
.promise-line {
  font-family:var(--font-serif); font-size:56px; font-weight:600; line-height:1.18;
  color:var(--on-dark); letter-spacing:-.5px; max-width:960px;
}
.promise-line em { font-style:normal; font-weight:700; color:var(--honey); }

/* ---------- 06 · Building (callout zones reuse .hotspot) ---------- */
.slide-building .build-legend .bl::before { background:var(--honey); }

/* ---------- 08 · Catchment map image ---------- */
.reach-card .reach-map {
  flex:1; min-height:0; height:auto; margin:2px 0 16px;
  border-radius:var(--radius-sm); overflow:hidden; border:var(--border); background:var(--map-bg);
}
.reach-card .reach-map img { width:100%; height:100%; object-fit:contain; display:block; }

/* ---------- 09 · BMC populated ---------- */
.bmc-cell ul { list-style:none; display:flex; flex-direction:column; gap:3px; }
.bmc-cell li { font-size:9.3px; line-height:1.34; color:var(--muted); padding-left:9px; position:relative; }
.bmc-cell li::before { content:""; position:absolute; left:0; top:6px; width:3px; height:3px; border-radius:50%; background:var(--sage); }
.bmc-vp li::before,.bmc-rev li::before { background:var(--jungle-lt); }
.bmc-cell ul.bmc-inline { display:block; columns:3; column-gap:20px; }
.bmc-cell ul.bmc-inline li { break-inside:avoid; margin-bottom:3px; }

/* ---------- 14 · Mission / Vision (dedicated) ---------- */
.slide-mv { background:var(--jungle-md); }
.mv-solo {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  gap:30px; padding:0 110px;
}
/* MISSION / VISION labels — promoted from tiny eyebrows to proper titles.
   Serif, bold caps, honey-on-jungle for impact. */
.mv-solo .mv-h {
  font-family:var(--font-serif);
  font-size:44px; font-weight:800; letter-spacing:-.5px;
  text-transform:uppercase; color:var(--honey);
  margin-bottom:18px; line-height:1;
}
.mv-solo .mv-block p {
  font-family:var(--font-serif); font-size:40px; font-weight:600;
  line-height:1.25; color:var(--on-dark); max-width:1020px; letter-spacing:-.3px;
}
.mv-solo .mv-block p em { font-style:normal; font-weight:700; color:var(--honey); }
.mv-rule { height:1px; background:rgba(242,235,219,.16); width:120px; }

/* ---------- 13 · Founders ---------- */
.founder-grid { display:grid; grid-template-columns:1fr 1.06fr; gap:22px; flex:1; min-height:0; }
.founders { display:flex; flex-direction:column; gap:18px; }
.founder { flex:1; padding:18px 20px; display:flex; gap:16px; align-items:flex-start; }
.fd-photo { flex:none; width:86px; height:86px; border-radius:50%; overflow:hidden; border:2px solid var(--sage-lt); }
.fd-photo img { width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.fd-name { font-size:17px; font-weight:700; color:var(--jungle); }
.fd-nick { font-weight:600; color:var(--jungle-lt); font-size:14px; }
.fd-bio { font-size:11.5px; line-height:1.5; color:var(--muted); margin:6px 0 9px; }
.fd-tags { display:flex; flex-direction:column; gap:5px; }
.fd-tags span { font-size:10.5px; line-height:1.4; padding:5px 10px; border-radius:8px; }
.ft-strength { background:var(--sage-xl); color:var(--jungle-md); }
.ft-weak { background:#F7E4DC; color:var(--terra); }
.ft-focus { background:var(--cream-dk); color:var(--jungle); font-weight:600; }
.org { flex-direction:column; }
.org-h { font-size:11px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--jungle-lt); margin-bottom:8px; }
.org svg { width:100%; flex:1; min-height:0; }

/* ---------- 15 · Vertical milestones ---------- */
.vtl { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:0; padding-left:6px; }
.vtl-item { display:grid; grid-template-columns:30px 96px 1fr; gap:14px; align-items:start; padding:7px 0; }
.vtl-rail { position:relative; display:flex; justify-content:center; height:100%; }
.vtl-rail::before { content:""; position:absolute; top:14px; bottom:-14px; width:2px; background:var(--sand); }
.vtl-item:last-child .vtl-rail::before { display:none; }
.vtl-dot { width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--sand); margin-top:4px; z-index:2; }
.vtl-item.done .vtl-dot { background:var(--jungle-md); border-color:var(--jungle-md); }
.vtl-item.done .vtl-rail::before { background:var(--jungle-md); }
.vtl-item.now  .vtl-dot { background:var(--sage); border-color:var(--sage); }
.vtl-when { font-size:13px; font-weight:700; color:var(--jungle); padding-top:2px; }
.vtl-flag { display:inline-block; font-size:9px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--jungle-lt); background:var(--sage-xl); padding:2px 7px; border-radius:var(--radius-pill); margin-left:2px; vertical-align:middle; }
.vtl-body h4 { font-size:14px; font-weight:600; color:var(--jungle-md); margin-bottom:2px; }
.vtl-body p { font-size:11.5px; line-height:1.45; color:var(--muted); }
.vtl-item.future .vtl-body h4 { color:var(--honey-dk); }

/* ---------- 16 · Funding ---------- */
.fund-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:22px; flex:1; min-height:0; }
.fund-capex,.fund-split { padding:24px 26px; display:flex; flex-direction:column; }
.fc-h { font-size:11px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--jungle-lt); margin-bottom:12px; }
.fc-total { font-family:var(--font-serif); font-size:48px; font-weight:700; color:var(--jungle); line-height:1; margin-bottom:14px; }
.capex-list { list-style:none; display:flex; flex-direction:column; gap:8px; }
.capex-list li { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); padding-bottom:8px; border-bottom:1px solid var(--cream-dk); }
.capex-list li b { color:var(--jungle); font-weight:700; }
.capex-list li.cl-sub { color:var(--jungle-md); font-weight:600; } .capex-list li.cl-sub b { color:var(--jungle-md); }
.fc-note { font-size:11.5px; line-height:1.5; color:var(--muted); margin-top:auto; padding-top:14px; }
.fc-note.ask { color:var(--jungle); } .fc-note.ask b { color:var(--honey-dk); }
.fund-chart { display:flex; align-items:center; gap:28px; flex:1; }
.pie { width:174px; height:174px; border-radius:50%; flex:none; display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.pie-hole { width:104px; height:104px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pie-hole b { font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--jungle); }
.pie-hole span { font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.fund-legend { list-style:none; display:flex; flex-direction:column; gap:14px; }
.fund-legend li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--jungle); }
.fund-legend li b { margin-left:auto; font-weight:700; }
.lg-sw { width:14px; height:14px; border-radius:4px; flex:none; }

/* ---------- 17 · Revenue & visitors ---------- */
.rev-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; flex:1; min-height:0; }
.chart-card { padding:22px 24px; display:flex; flex-direction:column; }
.cc-h { font-size:13px; font-weight:600; color:var(--jungle-md); }
.cc-h span { font-size:11px; font-weight:500; color:var(--muted); text-transform:none; letter-spacing:0; }
.bchart { flex:1; min-height:0; display:flex; align-items:flex-end; justify-content:space-around; gap:22px; padding-top:16px; }
.bcol { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; }
.bval { font-family:var(--font-serif); font-size:17px; font-weight:700; color:var(--jungle); }
.bbar { width:74%; border-radius:8px 8px 0 0; min-height:6px; transition:height var(--dur-lg) var(--ease-out); }
.byr { font-size:12px; font-weight:600; color:var(--muted); }
.rev-foot { font-size:12.5px; color:var(--muted); font-style:italic; margin-top:14px; text-align:center; }

/* ---------- 18 / 19 · Financial tables (scaffold) ---------- */
.fin-table-host { flex:1; min-height:0; display:flex; flex-direction:column; gap:16px; }
.fin-table { width:100%; border-collapse:collapse; background:#fff; border:var(--border); border-radius:var(--radius); overflow:hidden; }
.fin-table th,.fin-table td { padding:13px 18px; text-align:left; font-size:14px; border-bottom:1px solid var(--cream-dk); }
.fin-table thead th { background:var(--jungle-md); color:var(--on-dark); font-size:12px; letter-spacing:1px; text-transform:uppercase; }
.fin-table thead th:not(:first-child),.fin-table td:not(:first-child) { text-align:right; width:18%; }
.fin-table td:first-child { font-weight:600; color:var(--jungle); }
.fin-table td.pend { color:var(--sand); font-weight:600; }
.fin-table tr:last-child td { border-bottom:none; }
.fin-table tr.ft-total td { background:var(--sage-xl); color:var(--jungle-md); font-weight:700; }
.fin-pend-note { display:flex; align-items:center; gap:14px; }
.fin-pend-note p { font-size:13px; color:var(--muted); }

/* ---------- 20 · Closing CTA + lead form ---------- */
.cta-row { display:flex; gap:16px; margin-top:6px; }
.cta-btn { padding:15px 26px; border-radius:var(--radius-pill); font-size:14px; font-weight:600; cursor:pointer; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.cta-yes { background:var(--honey); color:var(--jungle); border:none; }
.cta-yes:hover { transform:translateY(-3px); background:var(--honey-dk); }
.cta-no { background:transparent; color:var(--on-dark-soft); border:1px solid rgba(242,235,219,.3); }
.cta-no:hover { color:var(--on-dark); border-color:var(--sage); }
.lead-form { display:flex; flex-direction:column; gap:12px; width:min(520px,80%); margin-top:4px; }
.lead-form .lf-row { display:flex; gap:12px; }
.lead-form input { flex:1; width:100%; padding:13px 16px; border-radius:var(--radius-sm); border:1px solid rgba(242,235,219,.22); background:rgba(242,235,219,.06); color:var(--on-dark); font-size:14px; font-family:var(--font-sans); }
.lead-form input::placeholder { color:var(--on-dark-faint); }
.lead-form input:focus { outline:none; border-color:var(--sage); background:rgba(242,235,219,.1); }
/* Native date-input — kill the WebKit chrome that breaks the dark form look. */
.lead-form input[type="date"] {
  color-scheme:dark;
  color:var(--on-dark-soft);
  font-family:var(--font-sans);
}
.lead-form input[type="date"]:invalid { color:var(--on-dark-faint); }
/* Chrome's native calendar indicator ignores `filter` here, so we swap its
   background-image to a light-coloured SVG of the same calendar glyph that
   reads cleanly against the dark form. */
.lead-form input[type="date"]::-webkit-calendar-picker-indicator {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EBDB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-size:18px 18px !important;
  background-position:center !important;
  filter:none !important;
  opacity:.95;
  cursor:pointer;
  width:22px !important; height:22px !important;
}
.lead-form input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity:1; }
.lead-form input[type="date"]::-webkit-datetime-edit-text,
.lead-form input[type="date"]::-webkit-datetime-edit-month-field,
.lead-form input[type="date"]::-webkit-datetime-edit-day-field,
.lead-form input[type="date"]::-webkit-datetime-edit-year-field {
  color:inherit;
}
.lf-submit { padding:14px; border-radius:var(--radius-pill); background:var(--honey); color:var(--jungle); border:none; font-size:14px; font-weight:700; cursor:pointer; }
.lf-submit:hover { background:var(--honey-dk); }
.lf-hint { font-size:11.5px; color:var(--on-dark-faint); text-align:center; }
.lead-done p { font-size:18px; font-family:var(--font-serif); color:var(--honey); }

/* hidden-state safety (flex containers ignore the bare [hidden] attribute) */
.lead-form[hidden],.lead-done[hidden],#cta-row[hidden] { display:none; }
.lang-note-warn { color:var(--honey) !important; font-weight:600; }

/* ---------- Video / Image lightbox (shared shell) ---------- */
.vlb {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(7,34,26,.96); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease);
}
.vlb.open { opacity:1; visibility:visible; }
.vlb-frame {
  position:relative;
  width:min(95vw, 1700px); max-height:92vh;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--cream);     /* was 8px — slimmer per V4 feedback */
  border-radius:14px;
  background:#000;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
  overflow:hidden;
}
.vlb-frame video,
.vlb-frame img {
  display:block; max-width:100%; max-height:90vh;
  width:auto; height:auto;
  background:#000;
  transition:opacity .25s var(--ease);
}
.vlb-frame img.is-loading { opacity:.0; }

/* ---------- Lightbox slider — prev/next arrows + dot indicators ---------- */
.vlb-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  display:none;     /* shown only when more than one image */
  align-items:center; justify-content:center;
  background:rgba(7,34,26,.62);
  border:1px solid rgba(242,235,219,.32);
  color:var(--cream); cursor:pointer; padding:0;
  transition:background .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease);
  z-index:5;
}
.vlb-nav:hover { background:var(--honey); border-color:var(--honey); color:var(--jungle); transform:translateY(-50%) scale(1.08); }
.vlb-nav[disabled] { opacity:0; pointer-events:none; }
.vlb-nav svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; }
.vlb-prev { left:16px; }
.vlb-next { right:16px; }
.vlb.has-multi .vlb-nav { display:flex; }

.vlb-dots {
  position:absolute; left:50%; bottom:14px;
  transform:translateX(-50%);
  display:none;     /* shown only when more than one image */
  gap:8px;
  padding:7px 12px; border-radius:100px;
  background:rgba(7,34,26,.55);
  backdrop-filter:blur(8px);
  z-index:5;
}
.vlb.has-multi .vlb-dots { display:flex; }
.vlb-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(242,235,219,.45);
  cursor:pointer; padding:0; border:none;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.vlb-dot:hover { background:rgba(242,235,219,.85); }
.vlb-dot.active { background:var(--honey); transform:scale(1.25); }

/* image counter (top-LEFT of the frame so it doesn't fight the close button) */
.vlb-counter {
  position:absolute; top:22px; left:24px;
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:11px; letter-spacing:.18em; font-weight:600;
  color:rgba(242,235,219,.85);
  padding:6px 12px; border-radius:100px;
  background:rgba(7,34,26,.62);
  border:1px solid rgba(242,235,219,.18);
  display:none;
  z-index:5;
}
.vlb.has-multi .vlb-counter { display:block; }
.vlb-close {
  position:absolute; top:18px; right:18px; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-size:28px; line-height:1; cursor:pointer;
  color:var(--on-dark); background:rgba(242,235,219,.1); border:1px solid rgba(242,235,219,.3);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index:10;                /* above counter/nav/dots which sit at z:5 */
}
.vlb-close:hover { background:var(--sage); color:var(--jungle); transform:scale(1.06); }

/* Video lightbox overrides — fullscreen, no frame, video fills the viewport.
   (Image lightbox keeps its framed look.) */
#video-lightbox { padding:0; background:#000; }
#video-lightbox .vlb-frame {
  width:100vw; height:100vh; max-width:none; max-height:none;
  border:none; border-radius:0; box-shadow:none; background:#000;
}
#video-lightbox .vlb-frame video {
  width:100vw; height:100vh; max-width:none; max-height:none;
  object-fit:contain;
}
#video-lightbox .vlb-close { top:24px; right:24px; }

/* ---------- 13a · Founders solo (split from ownership) ---------- */
.founders.founders-split { display:grid; grid-template-columns:1fr 1fr; gap:24px; flex:1; min-height:0; }
.founders.founders-split .founder { flex:1; padding:24px 26px; }
.founders.founders-split .fd-photo { width:108px; height:108px; }
.founders.founders-split .fd-name { font-size:20px; }
.founders.founders-split .fd-nick { font-size:15px; }
.founders.founders-split .fd-nick em { font-style:normal; color:var(--honey-dk); font-weight:600; }
.founders.founders-split .fd-bio { font-size:12.5px; }

/* ---------- 13b · Ownership structure solo ---------- */
.org-stage { display:flex; flex:1; min-height:0; align-items:center; justify-content:center; }
.card.org.org-solo { width:min(880px, 100%); padding:28px 32px; flex-direction:column; }
.org.org-solo svg { width:100%; flex:1; min-height:0; }

/* ---------- 03 · Promise (center-aligned brand-bible statement) ---------- */
.slide-promise .promise-wrap { align-items:center; text-align:center; padding:0 80px; gap:24px; }
.promise-line {
  font-family:var(--font-serif); font-weight:800; font-size:72px; line-height:1.08;
  color:var(--on-dark); letter-spacing:-1.2px; max-width:1100px;
  text-transform:none;
}
.promise-line em { font-style:normal; font-weight:800; color:var(--honey); }
.slide-promise .eyebrow { font-size:13px; letter-spacing:5px; color:var(--honey); }

/* Promise is auto-scripted (text → video → mission). Hide nav arrows
   so the audience can't skip out of the cinematic sequence. JS toggles
   `.lock-nav` on body when slide-promise is active (CSS :has() invalidation
   on class changes is flaky in Chrome, so we do it in JS). */
body.lock-nav #nav-prev,
body.lock-nav #nav-next { opacity:0 !important; pointer-events:none !important; }

/* ---------- 04 · Tailwinds — hero numbers ---------- */
.num-card .nc-hero {
  margin:14px 0 12px; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
}
.num-card .nc-hero-val {
  font-family:var(--font-serif); font-weight:800; font-size:46px; line-height:1;
  color:var(--jungle-md); letter-spacing:-1.5px;
}
.num-card .nc-hero-unit {
  font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); font-weight:600;
}
/* hide the legacy nc-fig if still present */
.num-card .nc-fig { display:none; }

/* ---------- 12 · SWOT summary banner ---------- */
.swot-summary {
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 14px;
}
.ss-line {
  padding:14px 18px; border-radius:var(--radius); display:flex; align-items:center; gap:14px;
  border:1px solid transparent;
}
.ss-line.ss-up   { background:var(--sage-xl);  border-color:var(--sage-lt); }
.ss-line.ss-down { background:#F7E4DC;          border-color:#E8B9A6; }
.ss-label {
  font-size:11px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; flex:none;
  padding:5px 10px; border-radius:var(--radius-pill); background:#fff;
}
.ss-up   .ss-label { color:var(--jungle-md); }
.ss-down .ss-label { color:var(--terra); }
.ss-text { font-size:13.5px; font-weight:600; color:var(--jungle); line-height:1.35; }
.ss-up .ss-text em, .ss-down .ss-text em { font-style:normal; }

/* slightly tighten SWOT quadrants now that the summary takes vertical room */
.swot { gap:14px; }
.swot-q { padding:13px 20px; }
.swot-q ul { gap:5px; }
.swot-q li { font-size:11.5px; line-height:1.38; }

/* ---------- 05 · Concept — hub nodes are now passive (no click) ---------- */
.slide-concept .hub-node { cursor:default; }
.slide-concept .hub-node:hover { transform:translate(-50%,-50%); border-color:var(--sand); box-shadow:var(--shadow-sm); }

/* ---------- 06 · Building — hotspot popups now carry an image ---------- */
.hotspot .hs-card { width:240px; padding:0; overflow:hidden; }
.hotspot .hs-card .hs-img {
  width:100%; height:120px; overflow:hidden; background:var(--cream-dk);
}
.hotspot .hs-card .hs-img img { width:100%; height:100%; object-fit:cover; display:block; }
.hotspot .hs-card h4 { padding:11px 14px 2px; }
.hotspot .hs-card p { padding:0 14px 12px; }

/* ---------- 07 · Video — dramatic headline + tighter UI ---------- */
.video-headline {
  font-family:var(--font-serif); font-weight:800;
  font-size:88px; line-height:1; letter-spacing:-2px;
  color:var(--on-dark);
  text-shadow:0 10px 40px rgba(0,0,0,.55);
  text-align:center;
  margin:0 0 24px;
}
.video-headline em { font-style:normal; font-weight:800; color:var(--honey); }
.video-ui { gap:16px; }
.video-ui p { max-width:480px; }

/* ---------- 08 · Catchment — EUREGIO label + flags + centered numbers + clean map ---------- */
.euregio {
  display:inline-flex; align-items:center; gap:14px; padding:7px 14px; margin-top:6px;
  background:var(--sage-xl); border:1px solid var(--sage-lt); border-radius:var(--radius-pill);
}
.eu-label {
  font-size:11px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; color:var(--jungle-md);
}
.eu-flags { font-size:18px; line-height:1; letter-spacing:6px; }

/* clean map: drop the inset background colour and let the SVG breathe on the card */
.reach-card-clean .reach-map { background:transparent; border:none; }

/* pool cards — centered alignment per the comment */
.pool-card.pool-centered { align-items:center; text-align:center; padding:20px 18px; }
.pool-card.pool-centered .pc-label-top {
  font-size:11.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--jungle-md); line-height:1.3;
}
.pool-card.pool-centered .pc-label-top small {
  font-size:10.5px; font-weight:500; letter-spacing:.5px;
  color:var(--muted); text-transform:none; font-style:italic;
}
.pool-card.pool-centered .pc-value {
  font-family:var(--font-serif); font-weight:800;
  font-size:54px; letter-spacing:-2px; color:var(--jungle-md);
  margin:6px 0 10px;
}
.pool-card.pool-centered .pc-use {
  border-top:none; padding-top:0; text-align:center; font-size:11.5px;
}

/* ---------- 09 · BMC — ambient botanical layer behind the canvas ---------- */
.slide-bmc { position:relative; isolation:isolate; overflow:hidden; }
.slide-bmc .bmc-bg {
  position:absolute; inset:-40px -60px auto auto;
  width:38%; height:80%; z-index:0; pointer-events:none;
  background:url("../assets/img/bmc-botanical.jpg") right top / cover no-repeat;
  opacity:.18; filter:saturate(.85);
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at top right, #000 25%, transparent 75%);
}
.slide-bmc .slide-pad { position:relative; z-index:1; }

/* ---------- 10 · Local Comp — toggle label "Explora advantage" + show only advantage on open ---------- */
.dtable td .c-toggle {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:6px 12px; border-radius:var(--radius-pill);
  background:var(--sage-xl); color:var(--jungle-md); border:1px solid var(--sage-lt);
  font-size:11px; font-weight:700; letter-spacing:.8px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dtable td .c-toggle .ct-icon { font-size:14px; line-height:1; font-weight:700; }
.dtable td .c-toggle .ct-lbl  { letter-spacing:.6px; }
.comp-row.open + .comp-detail .c-toggle, .comp-row:hover .c-toggle { background:var(--jungle-md); color:var(--on-dark); border-color:transparent; }
/* when row is expanded, show only the Explora-advantage panel — hide the "why it matters" duplication */
.comp-detail .cd-inner { display:block; }
.comp-detail .cd-block:not(.adv) { display:none; }
.comp-detail .cd-block.adv { padding:18px 22px; }
.comp-detail .cd-block.adv .cd-h { color:var(--honey-dk); font-size:11px; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:8px; }
.comp-detail .cd-block.adv p { font-size:14px; line-height:1.6; color:var(--jungle-md); max-width:none; }

/* ---------- 20 · Closing — strip chrome when form is submitted ---------- */
body.form-submitted .closing-slogan,
body.form-submitted #cta-row,
body.form-submitted .lead-form,
body.form-submitted .closing-multi,
body.form-submitted #progress,
body.form-submitted .nav-arrow,
body.form-submitted #controls,
body.form-submitted #hud,
body.form-submitted #deck-brand,
body.form-submitted #hint { display:none !important; }
body.form-submitted .closing-wrap { gap:36px; }
body.form-submitted .closing-logo { height:96px; }
body.form-submitted .lead-done p { font-size:22px; color:var(--on-dark); font-family:var(--font-serif); font-weight:600; }

/* ---------- 05 · Concept — actual Explora logo in the center circle ---------- */
.hub.hub-frame { padding:0 4%; box-sizing:border-box; }
.hub-center.hub-center-logo { padding:14px 22px; }
.hub-center.hub-center-logo img { width:84%; height:auto; max-width:140px; display:block; }
.hub-center.hub-center-logo span,
.hub-center.hub-center-logo svg.hub-lines + * { display:none; }
.hub-node { max-width:260px; }
.standfirst em { font-style:normal; font-weight:700; color:var(--honey-dk); }

/* ---------- 13b · Ownership chart — fix title overlap + size ---------- */
.org-stage { padding-top:12px; align-items:flex-start; }
.card.org.org-solo { width:min(880px, 100%); padding:22px 26px; max-height:520px; box-sizing:border-box; }
.org.org-solo svg { width:100%; height:100%; flex:1; min-height:0; }
.org-solo .org-h { display:none; } /* the slide title already says "Ownership structure"; the inner duplicate label is redundant */

/* ---------- 15 · Milestones — Ongoing badge sits below the year cleanly ---------- */
.vtl-item { grid-template-columns:30px 110px 1fr; }
.vtl-when { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.vtl-flag {
  display:inline-block; margin-left:0; vertical-align:baseline;
  font-size:9px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:var(--jungle-lt); background:var(--sage-xl); padding:2px 8px; border-radius:var(--radius-pill);
}

/* Annotation rows ("administrative ping pong") — no dot, italic muted text
   sits RIGHT NEXT TO the rail (instead of in the body column far to the
   right). Dashed rail indicates the in-between waiting period. */
.vtl-item.vtl-note {
  padding:2px 0;
  grid-template-columns:30px auto 1fr;     /* shrink the date column so the
                                              annotation hugs the rail */
  gap:10px;
}
.vtl-item.vtl-note .vtl-rail { position:relative; min-height:32px; }
.vtl-item.vtl-note .vtl-rail-dashed::before {
  content:""; position:absolute; left:14px; top:0; bottom:0;
  border-left:1.5px dashed var(--sand);
  display:block !important; background:none !important; width:auto !important;
}
.vtl-item.vtl-note .vtl-when { display:none; }    /* hide the empty date slot */
.vtl-item.vtl-note .vtl-body {
  display:flex; align-items:center;
  color:var(--muted); font-size:12px; line-height:1.3;
  font-style:italic;
}
.vtl-item.vtl-note .vtl-body em { font-style:italic; }

/* ---------- 10 · Local comp toggle — proper '+' alignment + readable label in all states ---------- */
.dtable td .c-toggle {
  align-items:center; gap:9px; padding:7px 14px 7px 10px;
}
.dtable td .c-toggle .ct-icon {
  width:22px; height:22px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--jungle-md); color:var(--on-dark);
  font-size:14px; font-weight:700; line-height:1;
  transition:transform var(--dur) var(--ease);
}
.dtable td .c-toggle .ct-lbl {
  color:var(--jungle-md); font-weight:700; line-height:1.2; white-space:nowrap;
}
/* hover (closed row) + the toggle inside an open detail row both highlight */
.comp-row:hover .c-toggle .ct-icon { background:var(--honey-dk); }
.comp-row.open .c-toggle           { background:var(--jungle-md); border-color:transparent; }
.comp-row.open .c-toggle .ct-icon  { background:var(--honey); color:var(--jungle); transform:rotate(45deg); }
.comp-row.open .c-toggle .ct-lbl   { color:var(--on-dark); }

/* override: local-comp toggle — fit "Explora advantage" on one line cleanly */
.dtable td .c-toggle .ct-lbl { font-size:10.5px; letter-spacing:.4px; }
.dtable td .c-toggle { font-size:10.5px; padding:6px 12px 6px 8px; gap:7px; }
.dtable td .c-toggle .ct-icon { width:20px; height:20px; font-size:13px; }

/* ============================================================
   Final polish — concept alignment, address z-index, toggle, org chart
   ============================================================ */

/* ---------- 05 · Concept — make sure the X-pattern fits the slide ---------- */
.slide-concept .slide-pad { display:flex; flex-direction:column; }
.slide-concept .title-block.tb-tight { margin-bottom:8px; }
.slide-concept .standfirst { margin-top:8px; font-size:17px; }
.hub.hub-frame { flex:1; min-height:0; padding:0 6%; }
/* pull bottom node off the slide-edge */
.slide-concept .hub-node:nth-of-type(6) { top:88% !important; }   /* bottom Corporate */
.slide-concept .hub-node:nth-of-type(4) { top:74% !important; }   /* Wellness */
.slide-concept .hub-node:nth-of-type(5) { top:74% !important; }   /* Social groups */
.slide-concept .hub-node:nth-of-type(2) { top:24% !important; }   /* Recurring sport */
.slide-concept .hub-node:nth-of-type(3) { top:24% !important; }   /* Families */

/* ---------- 06 · Address — hotspot z-index discipline ----------
   Every closed marker sits at z:6. The OPEN one lifts the whole
   hotspot container (not just the .hs-card) to z:50 so its popup
   AND its expand button clear every other sibling marker. */
.slide-building .hotspot { z-index:6; }
.slide-building .hotspot.open { z-index:50; }
.slide-building .hs-card { z-index:20; }
.slide-building .hotspot.open .hs-card { z-index:60; }
/* the expand button has to be the highest clickable thing inside the open hotspot */
.slide-building .hotspot.open .hs-expand { z-index:70 !important; }
.slide-building .build-head { z-index:4; }
.slide-building .build-invest { z-index:4; }
/* dim non-active markers when one is open — keeps focus on the chosen popup */
.slide-building:has(.hotspot.open) .hotspot:not(.open) > button {
  opacity:.35; transition:opacity .35s var(--ease);
}
/* CRITICAL: re-enable pointer events on the open popup so the expand
   button (and any future interactive child) can actually be clicked.
   components.css base rule sets pointer-events:none on .hs-card. */
.hotspot.open .hs-card { pointer-events:auto !important; }
.hotspot.open .hs-card .hs-expand { pointer-events:auto !important; }

/* ---------- 10 · Local comp toggle — STABLE layout, no rotation, label always visible ---------- */
.dtable td .c-toggle {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px 6px 6px; border-radius:var(--radius-pill);
  background:var(--sage-xl); color:var(--jungle-md); border:1px solid var(--sage-lt);
  font-size:11px; font-weight:700; letter-spacing:.3px;
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dtable td .c-toggle .ct-icon {
  width:22px; height:22px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--jungle-md); color:var(--on-dark);
  font-size:14px; font-weight:700; line-height:1; font-family:var(--font-sans);
  transition:background var(--dur) var(--ease);
  /* lock the glyph optical baseline */
  padding-bottom:1px;
}
.dtable td .c-toggle .ct-lbl {
  color:var(--jungle-md);
  font-size:10.5px; font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  line-height:1;
}
.comp-row:hover .c-toggle           { background:#fff; border-color:var(--jungle-md); }
.comp-row:hover .c-toggle .ct-icon  { background:var(--jungle-md); }
.comp-row.open  .c-toggle           { background:#fff; border-color:var(--jungle-md); }
.comp-row.open  .c-toggle .ct-icon  { background:var(--honey-dk); }
.comp-row.open  .c-toggle .ct-lbl   { color:var(--jungle-md); }
/* swap the glyph character via CSS pseudo so the icon stays geometrically stable */
.dtable td .c-toggle .ct-icon { position:relative; }
.dtable td .c-toggle .ct-icon::before {
  content:"+"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.comp-row.open .c-toggle .ct-icon::before { content:"×"; font-size:16px; }
.dtable td .c-toggle .ct-icon { color:transparent; }    /* hide the raw "+" text node */

/* ---------- 13b · Ownership chart centered in the white card ---------- */
.org-stage { padding-top:6px; align-items:center; justify-content:center; }
.card.org.org-solo {
  width:min(900px, 100%); padding:24px 28px;
  display:flex; align-items:center; justify-content:center;
  max-height:none; height:auto; aspect-ratio: 700 / 430;
  flex-direction:column;
}
.org.org-solo svg {
  width:100%; height:100%; display:block; flex:none;
}

/* HARD reset of all previous toggle transforms — the open state must keep
   the same geometry as the closed state. Only colors change. */
.dtable td .c-toggle,
.dtable td .c-toggle .ct-icon,
.dtable td .c-toggle .ct-lbl,
.comp-row.open .c-toggle,
.comp-row.open .c-toggle .ct-icon,
.comp-row.open .c-toggle .ct-lbl,
.comp-row:hover .c-toggle,
.comp-row:hover .c-toggle .ct-icon,
.comp-row:hover .c-toggle .ct-lbl {
  transform:none !important;
}

/* ============================================================
   PROPER ROOT-CAUSE FIXES
   ============================================================ */

/* ---------- 05 · Concept hub — opacity-only fade so the centering
   transform: translate(-50%,-50%) on .hub-node / .hub-center is preserved.
   The .anim / .cine-pop classes write to `transform` directly and would
   override that translate, shifting every card by half its own width. */
.hub-frame .hub-node,
.hub-frame .hub-center { opacity:0; }
.slide.active .hub-frame .hub-node { animation:hubFade .7s cubic-bezier(.22,1,.36,1) forwards; }
.slide.active .hub-frame .hub-center { animation:hubFade .9s cubic-bezier(.22,1,.36,1) forwards; animation-delay:.5s; }
.hub-frame .hub-node:nth-of-type(2) { animation-delay:.95s; }   /* hub-lines is element #1; nodes start at #2 */
.hub-frame .hub-node:nth-of-type(3) { animation-delay:1.10s; }
.hub-frame .hub-node:nth-of-type(4) { animation-delay:1.25s; }
.hub-frame .hub-node:nth-of-type(5) { animation-delay:1.40s; }
.hub-frame .hub-node:nth-of-type(6) { animation-delay:1.55s; }
@keyframes hubFade { from { opacity:0; } to { opacity:1; } }

/* Hub-lines: opacity-only too (no translate to fight) */
.hub-frame .hub-lines { opacity:0; }
.slide.active .hub-frame .hub-lines { animation:hubFade .8s ease-out forwards; animation-delay:.35s; }

/* Drop the previous nth-of-type top-overrides — the inline top% on each
   node is correct and `transform:translate(-50%,-50%)` now actually applies. */
.slide-concept .hub-node:nth-of-type(2),
.slide-concept .hub-node:nth-of-type(3),
.slide-concept .hub-node:nth-of-type(4),
.slide-concept .hub-node:nth-of-type(5),
.slide-concept .hub-node:nth-of-type(6) { top:auto; }

/* Concept slide: tighter title + give the hub more vertical room so the
   bottom card never spills. */
.slide-concept .title-block { margin-bottom:18px; }
.slide-concept .hub-frame   { padding:0; margin-top:6px; }

/* ---------- 10 · Local Comp +/× glyph visibility ----------
   The icon span had color:transparent (to hide the inner text node) but
   ::before inherited that and became invisible. Set explicit color on ::before. */
.dtable td .c-toggle .ct-icon { color:transparent; }
.dtable td .c-toggle .ct-icon::before {
  content:"+"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--on-dark); font-size:15px; font-weight:700; line-height:1; font-family:var(--font-sans);
}
.comp-row:hover .c-toggle .ct-icon::before { color:var(--on-dark); }
.comp-row.open  .c-toggle .ct-icon::before { content:"\2212"; color:var(--jungle); font-size:18px; } /* U+2212 minus sign */

/* ---------- 13b · Ownership chart: real gap below title + true centering ---------- */
.slide:has(.org-solo) .title-block { margin-bottom:32px; }
.org-stage { padding:0; margin-top:8px; display:flex; align-items:flex-start; justify-content:center; }
.card.org.org-solo {
  width:min(880px, 100%);
  margin:0 auto;
  padding:30px 36px;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:auto;
}
.org.org-solo svg { width:100%; height:auto; display:block; max-height:480px; }

/* ---------- 05 · Concept hub — FIX: animation shorthand was clobbering
   animation-delay. Each :nth-of-type now owns its full animation string
   so the staggered reveal actually fires. */
.hub-frame .hub-node,
.hub-frame .hub-center,
.hub-frame .hub-lines { opacity:0; }

/* hub-lines first (the X-pattern grows in) */
.slide.active .hub-frame .hub-lines  { animation:hubFade .8s ease-out .35s forwards; }
/* then the centre, then the 5 nodes cascade clockwise from top-left */
.slide.active .hub-frame .hub-center                  { animation:hubFade .9s cubic-bezier(.22,1,.36,1) .60s forwards; }
.slide.active .hub-frame .hub-node:nth-of-type(2) { animation:hubFade .7s cubic-bezier(.22,1,.36,1) .95s forwards; }
.slide.active .hub-frame .hub-node:nth-of-type(3) { animation:hubFade .7s cubic-bezier(.22,1,.36,1) 1.10s forwards; }
.slide.active .hub-frame .hub-node:nth-of-type(4) { animation:hubFade .7s cubic-bezier(.22,1,.36,1) 1.25s forwards; }
.slide.active .hub-frame .hub-node:nth-of-type(5) { animation:hubFade .7s cubic-bezier(.22,1,.36,1) 1.40s forwards; }
.slide.active .hub-frame .hub-node:nth-of-type(6) { animation:hubFade .7s cubic-bezier(.22,1,.36,1) 1.55s forwards; }

/* ============================================================
   BATCH 3 — Concept v2 prelude + overview live thumbnails support
   ============================================================ */

/* ---------- 05 · Concept v2 — kinetic prelude over leaves ---------- */
.slide-concept-v2 .concept-prelude {
  position:absolute; inset:0; z-index:8; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.slide-concept-v2 .concept-prelude .cine-kinetic {
  position:relative; min-height:1.2em; width:100%; text-align:center;
}
.slide-concept-v2 .concept-prelude .cp-num   {
  font-size:clamp(150px, 22vw, 320px);
  color:var(--jungle); font-weight:900; letter-spacing:-.04em;
}
.slide-concept-v2 .concept-prelude .cp-label {
  font-size:clamp(60px, 8vw, 110px);
  color:var(--honey-dk); font-weight:800; letter-spacing:-.02em;
  text-transform:uppercase;
  line-height:.95;            /* tighten so the two-line label sits compact */
  /* Override the global cine-kinetic rules that suppress <br> and force
     single-line layout — the prelude labels MUST wrap to 2 centred lines. */
  white-space:normal;
  text-align:center;
}
.slide-concept-v2 .concept-prelude .cp-label br { display:block; }

/* push the title block / hub off-screen until after the prelude completes */
.slide-concept-v2 .concept-titleblock { /* uses --cd on each child for timing */ }
.slide-concept-v2 .hub-frame { opacity:0; }
/* Hub-frame container fade pushed from 3.0s → 5.5s so the slower prelude
   (now ending ~5.5s) clears before the hub container appears. */
.slide-concept-v2.active .hub-frame { animation:hubFade .8s ease-out 5.5s forwards; }

/* override slides.css hub delays for the v2 sequence (push everything by ~2.5s) */
.slide-concept-v2.active .hub-frame .hub-lines   { animation:hubFade .8s ease-out 3.20s forwards; }
.slide-concept-v2.active .hub-frame .hub-center  { animation:hubFade .9s cubic-bezier(.22,1,.36,1) 3.45s forwards; }
.slide-concept-v2.active .hub-frame .hub-node:nth-of-type(2) { animation:hubFade .7s cubic-bezier(.22,1,.36,1) 3.80s forwards; }
.slide-concept-v2.active .hub-frame .hub-node:nth-of-type(3) { animation:hubFade .7s cubic-bezier(.22,1,.36,1) 3.95s forwards; }
.slide-concept-v2.active .hub-frame .hub-node:nth-of-type(4) { animation:hubFade .7s cubic-bezier(.22,1,.36,1) 4.10s forwards; }
.slide-concept-v2.active .hub-frame .hub-node:nth-of-type(5) { animation:hubFade .7s cubic-bezier(.22,1,.36,1) 4.25s forwards; }
.slide-concept-v2.active .hub-frame .hub-node:nth-of-type(6) { animation:hubFade .7s cubic-bezier(.22,1,.36,1) 4.40s forwards; }

/* ============================================================
   13b · OWNERSHIP — cinematic transition from Founders slide
   ===============================================================
   The founder photos appear FIRST (carrying over from slide 11),
   their names sit beneath them, then the org chart cascades down
   tier by tier — lines, entities, operating company, ground floor,
   and finally the land-lease arc.
   ============================================================ */

/* base state — every animated group starts invisible */
.org-svg .ow-photo,
.org-svg .ow-name,
.org-svg .ow-line,
.org-svg .ow-entity,
.org-svg .ow-explora,
.org-svg .ow-ground,
.org-svg .ow-lease { opacity:0; }

/* play sequence on active slide */
.slide.active .org-svg .ow-photo                    { animation:ownerFade .8s cubic-bezier(.22,1,.36,1) .25s forwards; }
.slide.active .org-svg .ow-photo.ow-photo-2         { animation:ownerFade .8s cubic-bezier(.22,1,.36,1) .55s forwards; }
.slide.active .org-svg .ow-name                     { animation:ownerFade .6s ease-out 1.10s forwards; }
.slide.active .org-svg .ow-name.ow-name-2           { animation:ownerFade .6s ease-out 1.30s forwards; }
.slide.active .org-svg .ow-line-top                 { animation:ownerFade .5s ease-out 1.70s forwards; }
.slide.active .org-svg .ow-line-top-labels          { animation:ownerFade .5s ease-out 1.95s forwards; }
.slide.active .org-svg .ow-entity                   { animation:ownerFade .6s cubic-bezier(.22,1,.36,1) 2.05s forwards; }
.slide.active .org-svg .ow-entity.ow-entity-2       { animation:ownerFade .6s cubic-bezier(.22,1,.36,1) 2.25s forwards; }
.slide.active .org-svg .ow-entity.ow-entity-3       { animation:ownerFade .6s cubic-bezier(.22,1,.36,1) 2.45s forwards; }
.slide.active .org-svg .ow-line-mid                 { animation:ownerFade .5s ease-out 2.80s forwards; }
.slide.active .org-svg .ow-line-mid-labels          { animation:ownerFade .5s ease-out 3.05s forwards; }
.slide.active .org-svg .ow-explora                  { animation:ownerFade .7s cubic-bezier(.22,1,.36,1) 3.15s forwards; }
.slide.active .org-svg .ow-ground                   { animation:ownerFade .6s cubic-bezier(.22,1,.36,1) 3.45s forwards; }
.slide.active .org-svg .ow-lease                    { animation:ownerFade .5s ease-out 3.75s forwards; }

@keyframes ownerFade { from { opacity:0; } to { opacity:1; } }

/* ============================================================
   V3 — June 4 feedback round
   ============================================================ */

/* ============================================================
   06 · Tailwinds — V7 (design-panel synthesis)
   Three-lens audit of leading / rhythm / tracking:
   - Rhythm: tight bar→index (12), tightest index→title (6),
     dominant title→hero (22), medium hero→desc (16),
     asymmetric card padding (20 top / 24 bottom).
   - Leading: title 1.4 (de-cramps 2-line wrap on card 02),
     hero-unit 1.5 (subtitle detaches from 48px numeral),
     desc 1.62 (longest text block gets reading rhythm).
   - Tracking: title -.10 (relieve squeeze), unit +.4 (label),
     desc +.05 (positive micro-track matches looser leading).
   ============================================================ */

/* Grid: cards size to content (stops stretching to full row height) */
.s-cards-5 { align-items:start; margin-top:4px; }

/* Opportunity slide — tighter top gap so the cards have more vertical room
   at the bottom (was 42/18, but with source rows added the cards need
   more space below). */
.slide:has(.s-cards-5) .title-block { margin-bottom:18px; }
.slide:has(.s-cards-5) .title-block .standfirst { margin-top:10px; }

/* Card shell — asymmetric padding so prose stops kissing the bottom */
.num-card { padding:20px 20px 24px; display:flex; flex-direction:column; }

/* Honey rule at top — clean 12px breath under it */
.num-card .nc-bar { margin-bottom:12px; }

/* Index — display number, locked size, owns 6px to title (tightest pair) */
.num-card .nc-index {
  font-family:var(--font-serif); font-weight:800;
  font-size:34px; line-height:1; color:var(--honey-dk);
  letter-spacing:-.5px; margin:0 0 6px;
}

/* Title — opened leading + relieved tracking + min-height bump
   to keep single-line and two-line title cards baseline-aligned */
.num-card .nc-title {
  font-size:16.5px; font-weight:700; color:var(--jungle);
  line-height:1.4; letter-spacing:-.1px;
  min-height:48px; margin:0 0 22px;
}

/* Hero row — 6px micro-pause between numeral and unit, 26px to desc
   (was 16; user wanted more separation between the number block and prose) */
.num-card .nc-hero { margin:0 0 26px; gap:6px; }
/* Hero numbers — bumped from near-black --jungle to the brighter forest
   green so the growth percentages read as "green / positive". */
.num-card .nc-hero-val {
  font-size:48px; font-weight:800; letter-spacing:-1px;
  color:var(--jungle-lt); line-height:1;
}

/* Hero subtitle — committed to label tracking + own line-height */
.num-card .nc-hero-unit {
  font-size:13px; font-weight:600; text-transform:none;
  color:var(--muted);
  line-height:1.5; letter-spacing:.4px;
}
.num-card .nc-hero-unit em {
  font-style:italic; color:var(--honey-dk); font-weight:700;
}

/* Body description — biggest perceived breathing-space win:
   1.62 leading + a hair of positive tracking on 13px Inter */
.num-card .nc-desc {
  font-size:13px; color:var(--muted);
  line-height:1.62; letter-spacing:.05px;
}
.num-card .nc-desc b { color:var(--jungle-lt); font-weight:700; }

/* Source footnote at the bottom of each opportunity card. */
.num-card .nc-source {
  margin-top:auto;
  padding-top:8px;
  font-size:9.5px; line-height:1.35; letter-spacing:.05px;
  color:var(--muted); opacity:.75;
  border-top:1px solid var(--sand);
}
.num-card .nc-source i { font-style:italic; }

/* "World of AI and robotics…" context box above the 5 cards. */
.opp-context {
  background:#fff; border:1px solid var(--sand);
  border-radius:12px;
  padding:14px 22px;
  margin:6px 0 14px;
  box-shadow:0 2px 10px rgba(7,34,26,.04);
}
.opp-context p {
  margin:0;
  font-size:14.5px; line-height:1.5;
  color:var(--jungle);
  font-family:var(--font-sans);
}

/* Tighter card body so 5 cards (now with source line) fit within 720px slide,
   with EQUAL HEIGHTS — title and hero rows get consistent min-heights so
   1-line and 2-line titles don't make the cards jagged.
   `flex:none` + `align-self:start` overrides the parent flex:1 so the grid
   sizes to content (no more giant empty band between desc and source). */
.s-cards-5:has(.nc-source) {
  align-items:stretch;
  align-self:start;
  flex:none;
  gap:12px;
}
.s-cards-5:has(.nc-source) .num-card {
  padding:14px 16px 14px;
}
.s-cards-5:has(.nc-source) .num-card .nc-title {
  min-height:42px;          /* room for up to 2 lines */
  margin:0 0 12px;
}
.s-cards-5:has(.nc-source) .num-card .nc-hero {
  min-height:60px;          /* hero value + unit stays vertically aligned */
  margin:0 0 14px;
}
.s-cards-5:has(.nc-source) .num-card .nc-hero-val { font-size:38px; }
.s-cards-5:has(.nc-source) .num-card .nc-hero-unit { min-height:30px; }
.s-cards-5:has(.nc-source) .num-card .nc-desc {
  font-size:12px; line-height:1.5;
  margin:0 0 14px;
}

/* ---------- 08 · Catchment — kill the whitespace inside pool cards ---------- */
.pool-card.pool-centered {
  padding:18px 16px;
  justify-content:center;   /* center content vertically inside the card */
}
.pool-card.pool-centered .pc-value {
  font-size:54px; margin:8px 0 10px;
}
.pool-card.pool-centered .pc-label-top { font-size:11.5px; }
.pool-card.pool-centered .pc-use {
  font-size:12px; line-height:1.45;
  padding-top:8px; border-top:1px solid var(--cream-dk); width:100%; margin-top:8px;
}

/* ---------- 10 · Local Rivals — calmer row hover, no fight with Explora advantage panel ---------- */
.dtable tr.comp-row {
  background:transparent;
  transition:background-color var(--dur) var(--ease);
}
.dtable tr.comp-row:hover {
  background:rgba(143,184,171,.10);   /* faint sage tint instead of strong */
}
.dtable tr.comp-row.open {
  background:rgba(232,199,127,.14);    /* honey-tinted when open — matches the advantage card */
}

/* ---------- 10 · Local Rivals — title intro moment, big and slow before table cascades ---------- */
.slide:has(.dtable) .slide-title.cine-words {
  font-size:clamp(38px, 4.6vw, 60px); line-height:1.05; max-width:1100px;
}
/* further-push everything else (was --i:14/18 before) */

/* ---------- 05 · Concept v2 — NEW reveal order:
       LOGO first → 5 nodes → connecting lines → title block at top
   prelude duration extended for a calmer build ---------- */
.slide-concept-v2 .concept-prelude .cine-kinetic .cine-w {
  animation-duration:.85s !important;          /* was .50s — softer hold */
}
/* prelude per-word stagger — push the gap from .55s to .75s */
.slide-concept-v2 .concept-prelude .cine-w[style*="--w:0"] { --w-delay:0; }
/* override the kinetic word delay formula for this scene */
.slide.active.slide-concept-v2 .concept-prelude .cine-kinetic .cine-w {
  animation-delay: calc(var(--w,0) * .75s + var(--cd, .45s)) !important;
}
/* Beat-tuned prelude:
   "5"             0.45s start, 0.85s   end ~1.30s
   "demand segs"   1.20s start, 1.95s   end ~3.15s  (lingers)
   "1"             2.65s start, 0.85s   end ~3.50s  (overlaps with d.s. fade-out)
   "destination"   3.30s start, 1.95s   end ~5.25s  (same linger as d.s.) */
.slide.active.slide-concept-v2 .concept-prelude .cine-kinetic .cp-linger,
.slide.active.slide-concept-v2 .concept-prelude .cine-kinetic .cp-tail {
  animation-duration: 1.95s !important;
}
.slide.active.slide-concept-v2 .concept-prelude .cine-kinetic .cp-after-linger {
  animation-delay: 2.65s !important;
}
.slide.active.slide-concept-v2 .concept-prelude .cine-kinetic .cp-tail {
  animation-delay: 3.30s !important;
}

/* Concept hub — re-time so LOGO arrives first, then NODES, then LINES last.
   Pushed +1.4s vs prior pass so the hub waits for the (now slower) kinetic
   prelude ("5 → demand segments → 1 → destination") to fully clear. */
.slide-concept-v2.active .hub-frame .hub-center  { animation:hubFade .9s cubic-bezier(.22,1,.36,1) 5.60s forwards; }
.slide-concept-v2.active .hub-frame .hub-node:nth-of-type(2) { animation:hubFade .65s cubic-bezier(.22,1,.36,1) 6.40s forwards; }
.slide-concept-v2.active .hub-frame .hub-node:nth-of-type(3) { animation:hubFade .65s cubic-bezier(.22,1,.36,1) 6.70s forwards; }
.slide-concept-v2.active .hub-frame .hub-node:nth-of-type(4) { animation:hubFade .65s cubic-bezier(.22,1,.36,1) 7.00s forwards; }
.slide-concept-v2.active .hub-frame .hub-node:nth-of-type(5) { animation:hubFade .65s cubic-bezier(.22,1,.36,1) 7.30s forwards; }
.slide-concept-v2.active .hub-frame .hub-node:nth-of-type(6) { animation:hubFade .65s cubic-bezier(.22,1,.36,1) 7.60s forwards; }
.slide-concept-v2.active .hub-frame .hub-lines   { animation:hubFade .9s ease-out 8.00s forwards; }   /* LINES appear last */

/* ============================================================
   V3.1 — Hotspot button + popup + expand icon (full rebuild)
   The CHILD selector `.hotspot > button` scopes the trigger style
   so it doesn't bleed into .hs-expand (which is ALSO a button
   nested inside the popup).
   ============================================================ */

/* ---------- the round "+" marker on the aerial ---------- */
.hotspot > button {
  width:34px; height:34px; border-radius:50%;
  background:var(--honey); color:var(--jungle);
  border:none; padding:0;
  display:grid; place-items:center;
  cursor:pointer; position:relative;
  box-shadow:0 4px 14px rgba(7,34,26,.22);
  font-size:0;             /* kill any stray text glyph render */
}
.hotspot > button .ic {
  position:absolute; inset:0; display:grid; place-items:center;
  transition: opacity .25s var(--ease), transform .35s cubic-bezier(.22,1,.36,1);
}
.hotspot > button .ic svg { display:block; width:14px; height:14px; }
.hotspot > button .ic-close { opacity:0; transform:rotate(-90deg); }
.hotspot.open > button { background:var(--cream); box-shadow:0 6px 18px rgba(7,34,26,.28); }
.hotspot.open > button .ic-plus  { opacity:0; transform:rotate(90deg); }
.hotspot.open > button .ic-close { opacity:1; transform:rotate(0deg); }
/* the pulse animation should NOT fight the open state */
.hotspot.open > button { animation:none !important; }

/* ---------- popup card ---------- */
.hotspot .hs-card {
  width:280px;            /* slightly larger for legibility */
}
/* Default: popup above marker (centred horizontally on it). */
.hotspot .hs-card {
  position:absolute;
  left:50%; bottom:calc(100% + 18px);   /* sit ABOVE the marker */
  top:auto;
  transform:translateX(-50%) translateY(8px);
}
/* `.flip-down`: popup goes BELOW the marker (for hotspots near the top) */
.hotspot.flip-down .hs-card {
  bottom:auto; top:calc(100% + 18px);
  transform:translateX(-50%) translateY(-8px);
}
.hotspot.flip-down.open .hs-card { transform:translateX(-50%) translateY(0); }

/* `.shift-left` / `.shift-right`: anchor popup to one side of marker
   (for hotspots near a horizontal edge of the slide) */
.hotspot.shift-left .hs-card  { left:auto; right:-12px; transform:translateY(8px); }
.hotspot.shift-left.open .hs-card  { transform:translateY(0); }
.hotspot.shift-right .hs-card { left:-12px; transform:translateY(8px); }
.hotspot.shift-right.open .hs-card { transform:translateY(0); }

/* ---------- expand-to-lightbox icon on popup image ---------- */
.hotspot .hs-card .hs-img { position:relative; }
.hotspot .hs-card .hs-expand,
.hs-expand {
  position:absolute !important;     /* defeat the cascade from .hotspot > button is already scoped, but be defensive */
  right:10px; top:10px;
  width:32px; height:32px; border-radius:8px;
  background:rgba(7,34,26,.82) !important;
  border:1.5px solid rgba(242,235,219,.55);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; z-index:5;
  color:var(--cream);
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.hs-expand:hover {
  background:var(--honey) !important;
  border-color:var(--honey);
  color:var(--jungle);
  transform:scale(1.08);
}
.hs-expand svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; display:block; }
/* defeat the .hotspot button pulse animation from components.css on .hs-expand */
.hotspot .hs-expand { animation:none !important; }

/* ============================================================
   13 · FOUNDERS + OWNERSHIP — CINEMATIC MERGED SLIDE
   The SAME photo elements occupy phase 1 (big, with bio + tags
   beside them) and phase 2 (small, sitting at the top of the org
   chart). The morph IS the transition. The chart's own SVG photo
   badges are HIDDEN — the real photos take their place.
   ============================================================ */

/* ---------- stage ---------- */
.slide-fo .slide-pad.fo-stage {
  position:absolute; inset:0;
  padding:0;
  overflow:hidden;
}

/* ---------- title (THE hero of phase 1) ---------- */
.slide-fo .fo-titles {
  position:absolute; left:50%; top:42px;
  transform:translateX(-50%);
  text-align:center;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),
             transform .8s cubic-bezier(.22,1,.36,1);
  z-index:5;
}
.slide-fo .fo-titles .eyebrow { display:block; margin-bottom:14px; font-size:11px; letter-spacing:.42em; color:var(--honey-dk); }
.slide-fo .fo-hero-title {
  font-family:var(--font-serif);
  font-size:clamp(32px, 3.6vw, 46px);
  line-height:1.0;
  letter-spacing:-.03em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--jungle);
  margin:0;
}
.slide-fo .fo-hero-title em {
  font-style:normal; color:var(--honey-dk); font-weight:800;
}
.slide-fo.phase-2 .fo-titles {
  opacity:0; transform:translateX(-50%) translateY(-24px);
  pointer-events:none;
}

/* ---------- photos (the morph stars) ---------- */
.slide-fo .fo-photo {
  position:absolute;
  width:180px; height:180px;
  border-radius:50%; overflow:hidden;
  box-shadow:0 16px 44px rgba(7,34,26,.22);
  transition:
    left   1.25s cubic-bezier(.22,1,.36,1),
    top    1.25s cubic-bezier(.22,1,.36,1),
    width  1.25s cubic-bezier(.22,1,.36,1),
    height 1.25s cubic-bezier(.22,1,.36,1),
    box-shadow 1s ease;
  z-index:8;
}
.slide-fo .fo-photo img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.95);
}
/* honey ring overlay; visible in phase-2 only as a chart-style accent */
.slide-fo .fo-photo .fo-photo-ring {
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid transparent;
  transition:border-color .6s ease;
}
.slide-fo.phase-2 .fo-photo .fo-photo-ring { border-color:var(--honey); }

/* PHASE 1 positions: photos in the mid-upper area, info card immediately under them.
   Shrunk from 158→130px and lifted from 36%→30% so the bio + tag rows can move up
   and grow (client feedback: bottom rows too cramped at the floor). */
.slide-fo .fo-photo { width:130px; height:130px; }
.slide-fo .fo-photo-1 { left:25%; top:30%; transform:translate(-50%,-50%); }
.slide-fo .fo-photo-2 { left:75%; top:30%; transform:translate(-50%,-50%); }

/* PHASE 2 positions: photos INSIDE the white card, aligned with the SVG's
   (hidden) photo slots — math calibrated to:
   • stage 1280×720, card top:22%, card padding 24px/28px,
   • SVG max-height 400px (renders at 596×400 inside an 824-wide content area)
   • SVG photo slot at viewBox (120,42) maps to stage (444, 218) = 35% / 30%
   • slot at (580,42)            maps to                (835, 218) = 65% / 30% */
.slide-fo.phase-2 .fo-photo {
  width:74px; height:74px;
  box-shadow:0 8px 22px rgba(7,34,26,.22);
}
/* Photo slot positions — calibrated to the SVG entity column centers so the
   photos sit directly above the Stranni / El Paredon boxes and their lines. */
.slide-fo.phase-2 .fo-photo-1 { left:29.3%; top:30%; }
.slide-fo.phase-2 .fo-photo-2 { left:70.7%; top:30%; }

/* ---------- info blocks (phase 1 only) ---------- */
.slide-fo .fo-info {
  position:absolute; width:420px;
  text-align:left;
  transform:translateX(-50%);
  transition:opacity .5s ease;
  z-index:6;
}
/* Lifted further from 52%→44% (photos shrunk + raised) so the SKILLS / WEAKNESSES /
   PERSONAL / FOCUS rows can grow and pull up from the floor. */
.slide-fo .fo-info-1 { left:25%; top:44%; width:440px; }
.slide-fo .fo-info-2 { left:75%; top:44%; width:440px; }
/* (Legacy rule kept harmless — .fo-info no longer contains .fo-name, but
   if any usage remains, this still styles it sensibly.) */
.slide-fo .fo-info .fo-name {
  font-size:21px; font-weight:700; color:var(--jungle);
  text-align:center; margin-bottom:2px;
}
.slide-fo .fo-info .fo-nick {
  text-align:center; font-size:14px; color:var(--honey-dk);
  font-style:italic; font-weight:600; margin-bottom:14px;
}
.slide-fo .fo-info .fo-nick em { font-style:italic; }
.slide-fo .fo-info .fo-bio {
  font-size:13px; line-height:1.55; color:var(--muted);
  margin:0 0 14px;
}
.slide-fo .fo-info .fo-tags { display:flex; flex-direction:column; gap:6px; }
.slide-fo .fo-info .ft-row { padding:8px 14px; font-size:13px; line-height:1.45; }
.slide-fo .fo-info .ft-row b { font-size:11.5px; }
.slide-fo.phase-2 .fo-info { opacity:0; pointer-events:none; }

/* ---------- name TRAVELS between phases (same DOM element) ----------
   Phase 1: under the big photo, 19px. Phase 2: under the shrunken photo
   inside the chart, 13px. left/top/font-size are transitioned to morph. */
.slide-fo .fo-name {
  position:absolute;
  text-align:center;
  font-family:var(--font-sans);
  font-weight:700; color:var(--jungle);
  letter-spacing:-.1px;
  white-space:nowrap;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:7;
  transition:
    left      1.25s cubic-bezier(.22,1,.36,1),
    top       1.25s cubic-bezier(.22,1,.36,1),
    font-size 1.25s cubic-bezier(.22,1,.36,1);
}
/* PHASE 1 positions — below the (now smaller) big photo. */
.slide-fo .fo-name-1 { left:25%; top:40%; font-size:20px; }
.slide-fo .fo-name-2 { left:75%; top:40%; font-size:20px; }
/* PHASE 2 positions — below the shrunken photo, inside the chart card.
   Aligned to the entity column centers (29.3% / 70.7%). */
.slide-fo.phase-2 .fo-name-1 { left:29.3%; top:37%; font-size:13px; }
.slide-fo.phase-2 .fo-name-2 { left:70.7%; top:37%; font-size:13px; }

/* ---------- role (phase 2 only) — "Founder · Individual" line ---------- */
.slide-fo .fo-role {
  position:absolute;
  text-align:center;
  font-family:var(--font-sans);
  font-size:10.5px; color:var(--muted);
  white-space:nowrap;
  transform:translateX(-50%);
  pointer-events:none;
  opacity:0;
  z-index:7;
  transition:opacity .5s ease 1.2s, left 1.25s cubic-bezier(.22,1,.36,1), top 1.25s cubic-bezier(.22,1,.36,1);
}
/* phase-2 anchor (always positioned at chart-row location; phase-1 doesn't show it) */
.slide-fo .fo-role-1 { left:29.3%; top:40%; }
.slide-fo .fo-role-2 { left:70.7%; top:40%; }
.slide-fo.phase-2 .fo-role { opacity:1; }

/* ---------- hint (phase 1 only) ---------- */
.slide-fo .fo-hint {
  position:absolute; left:50%; bottom:32px; transform:translateX(-50%);
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); opacity:0;
  animation:foHint 1s cubic-bezier(.22,1,.36,1) 2.6s forwards;
  pointer-events:none;
}
.slide-fo .fo-hint kbd {
  display:inline-block; padding:2px 7px; margin:0 2px;
  background:var(--cream-dk); border:1px solid var(--sand);
  border-radius:5px; font-family:var(--font-mono, monospace); font-size:11px;
  color:var(--jungle);
}
@keyframes foHint { to { opacity:.85; } }
.slide-fo.phase-2 .fo-hint { display:none; }

/* ============================================================
   CHART STRUCTURE (phase 2)
   The container fades + slides in. Internal animations cascade.
   ============================================================ */
/* Ownership chart — sized up so it fills the slide (was using ~30% of
   the available space per client feedback). */
.slide-fo .fo-chart {
  position:absolute; left:50%; top:18%;
  width:min(1100px, 92%); transform:translateX(-50%);
  opacity:0; pointer-events:none;
  transition:opacity .7s ease .5s, transform .9s cubic-bezier(.22,1,.36,1) .5s;
}
.slide-fo .fo-chart .card.org.org-solo {
  width:100%; padding:36px 40px 30px;
  background:#fff; border-radius:14px;
  box-shadow:0 24px 60px rgba(7,34,26,.10);
  border:1px solid var(--sand);
}
.slide-fo .fo-chart .org-svg { width:100%; height:auto; display:block; max-height:540px; }
.slide-fo.phase-2 .fo-chart {
  opacity:1; pointer-events:auto;
}

/* Phase 2 title (was missing) — replaces the fading "Two Minds, One Vision"
   so the ownership structure has its own banner. */
.slide-fo .fo-phase2-title {
  position:absolute; left:50%; top:42px;
  transform:translateX(-50%);
  text-align:center; z-index:9;
  opacity:0;
  transition:opacity .55s ease .35s;
  pointer-events:none;
}
.slide-fo .fo-phase2-title .eyebrow {
  display:block; margin-bottom:10px;
  font-size:11px; letter-spacing:.42em; color:var(--honey-dk);
  font-weight:700; text-transform:uppercase;
}
.slide-fo .fo-phase2-title h2 {
  margin:0; font-family:var(--font-serif); font-weight:800;
  font-size:clamp(28px, 3vw, 38px); letter-spacing:-.01em;
  color:var(--jungle); text-transform:uppercase; line-height:1;
}
.slide-fo.phase-2 .fo-phase2-title { opacity:1; }

/* The SVG's own photo + name groups are hidden — the real photos take their place */
.slide-fo .org-svg .ow-photo,
.slide-fo .org-svg .ow-name { display:none; }

/* The SVG's chart elements all start invisible; cascade in during phase 2 */
.slide-fo .org-svg .ow-line,
.slide-fo .org-svg .ow-entity,
.slide-fo .org-svg .ow-explora,
.slide-fo .org-svg .ow-ground,
.slide-fo .org-svg .ow-lease { opacity:0; }

/* Lines DRAW in via stroke-dashoffset — much more cinematic than a fade */
.slide-fo .org-svg .ow-line path {
  stroke-dasharray:600; stroke-dashoffset:600;
}
.slide-fo.phase-2 .org-svg .ow-line path {
  animation:foLineDraw 1.0s cubic-bezier(.5,0,.5,1) forwards;
}
@keyframes foLineDraw { to { stroke-dashoffset:0; } }

/* Phase-2 cascade (timing tuned so the photos arrive at the chart positions
   just as the chart container opens; then lines draw from the photos down;
   boxes land tier by tier; Explora SRL is the hero with a soft bounce. */
.slide-fo.phase-2 .org-svg .ow-line                 { opacity:1; }            /* let the dashoffset animation handle the fade */
.slide-fo.phase-2 .org-svg .ow-line-top path         { animation-delay:1.55s; }
.slide-fo.phase-2 .org-svg .ow-line-top-labels       { animation:foAppear .5s ease 2.20s forwards; }
.slide-fo.phase-2 .org-svg .ow-entity                { animation:foEntity .7s cubic-bezier(.22,1,.36,1) 2.35s forwards; }
.slide-fo.phase-2 .org-svg .ow-entity.ow-entity-2    { animation:foEntity .7s cubic-bezier(.22,1,.36,1) 2.55s forwards; }
.slide-fo.phase-2 .org-svg .ow-entity.ow-entity-3    { animation:foEntity .7s cubic-bezier(.22,1,.36,1) 2.75s forwards; }
.slide-fo.phase-2 .org-svg .ow-line-mid path         { animation-delay:3.05s; }
.slide-fo.phase-2 .org-svg .ow-line-mid-labels       { animation:foAppear .5s ease 3.55s forwards; }
.slide-fo.phase-2 .org-svg .ow-explora               { animation:foExploraLand .85s cubic-bezier(.34,1.4,.5,1) 3.65s forwards; transform-box:fill-box; transform-origin:center; }
.slide-fo.phase-2 .org-svg .ow-ground                { animation:foEntity .7s cubic-bezier(.22,1,.36,1) 3.95s forwards; }
.slide-fo.phase-2 .org-svg .ow-lease                 { animation:foLease .6s ease 4.25s forwards; }

@keyframes foAppear     { to { opacity:1; } }
@keyframes foEntity     { 0% { opacity:0; transform:translateY(8px); } 100% { opacity:1; transform:translateY(0); } }
@keyframes foLease      { 0% { opacity:0; transform:translateY(-4px); } 100% { opacity:1; transform:translateY(0); } }
@keyframes foExploraLand{ 0% { opacity:0; transform:scale(.7) translateY(20px); } 80% { opacity:1; transform:scale(1.04) translateY(0); } 100% { opacity:1; transform:scale(1) translateY(0); } }

/* ============================================================
   PHASE 1 — CINEMATIC CASCADE
   Title lands first (hero moment), then faces, names, nicknames,
   bios, then the four labelled boxes slide in tier by tier.
   ============================================================ */

/* All phase-1 elements start invisible (their parent .fo-titles handles its own visibility) */
.slide-fo .fo-photo,
.slide-fo .fo-name,
.slide-fo .fo-info .fo-nick,
.slide-fo .fo-info .fo-bio,
.slide-fo .fo-info .ft-row { opacity:0; }

/* PHOTOS — scale up + fade in (the moment after the title lands) */
.slide.active.slide-fo .fo-photo-1 {
  animation: foPhotoIn 1.15s cubic-bezier(.22,1,.36,1) 2.0s forwards;
}
.slide.active.slide-fo .fo-photo-2 {
  animation: foPhotoIn 1.15s cubic-bezier(.22,1,.36,1) 2.2s forwards;
}
@keyframes foPhotoIn {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.62); filter:blur(6px); }
  55%  { opacity:1; filter:blur(0); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); }
}

/* NAMES — fade up under the photos. Custom keyframe preserves the
   translateX(-50%) used to centre the absolutely-positioned element. */
.slide.active.slide-fo .fo-name-1 { animation:foNameIn .7s cubic-bezier(.22,1,.36,1) 2.85s forwards; }
.slide.active.slide-fo .fo-name-2 { animation:foNameIn .7s cubic-bezier(.22,1,.36,1) 2.95s forwards; }
@keyframes foNameIn {
  from { opacity:0; transform:translateX(-50%) translateY(10px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* NICKNAMES — "The Thinker" / "The Doer" beat */
.slide.active.slide-fo .fo-info-1 .fo-nick { animation:foRiseIn .65s cubic-bezier(.22,1,.36,1) 3.20s forwards; }
.slide.active.slide-fo .fo-info-2 .fo-nick { animation:foRiseIn .65s cubic-bezier(.22,1,.36,1) 3.30s forwards; }

/* BIOS — the paragraph below */
.slide.active.slide-fo .fo-info-1 .fo-bio { animation:foRiseIn .65s cubic-bezier(.22,1,.36,1) 3.65s forwards; }
.slide.active.slide-fo .fo-info-2 .fo-bio { animation:foRiseIn .65s cubic-bezier(.22,1,.36,1) 3.75s forwards; }

/* FOUR BOXES — Skills, Weaknesses, Personal, Focus (slide in from left, paired across both founders) */
.slide.active.slide-fo .fo-info-1 .ft-row:nth-of-type(1),
.slide.active.slide-fo .fo-info-2 .ft-row:nth-of-type(1) { animation:foBoxIn .6s cubic-bezier(.22,1,.36,1) 4.20s forwards; }
.slide.active.slide-fo .fo-info-1 .ft-row:nth-of-type(2),
.slide.active.slide-fo .fo-info-2 .ft-row:nth-of-type(2) { animation:foBoxIn .6s cubic-bezier(.22,1,.36,1) 4.40s forwards; }
.slide.active.slide-fo .fo-info-1 .ft-row:nth-of-type(3),
.slide.active.slide-fo .fo-info-2 .ft-row:nth-of-type(3) { animation:foBoxIn .6s cubic-bezier(.22,1,.36,1) 4.60s forwards; }
.slide.active.slide-fo .fo-info-1 .ft-row:nth-of-type(4),
.slide.active.slide-fo .fo-info-2 .ft-row:nth-of-type(4) { animation:foBoxIn .6s cubic-bezier(.22,1,.36,1) 4.80s forwards; }

@keyframes foRiseIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes foBoxIn  { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }

/* HINT — appears at the end, after all the content is in */
.slide-fo .fo-hint { animation-delay: 5.6s; }

/* ============================================================
   PHASE 2 — simplified chart reveal (user moved the cinema to phase 1)
   The photos still morph; the chart just appears cleanly with
   tier-by-tier fade. No elaborate line drawing.
   ============================================================ */

/* Phase 2 chart — NO cascade. Everything appears immediately with the card.
   The cinema lives in phase 1; the chart is just the static structure. */
.slide-fo.phase-2 .org-svg .ow-line,
.slide-fo.phase-2 .org-svg .ow-line-top-labels,
.slide-fo.phase-2 .org-svg .ow-entity,
.slide-fo.phase-2 .org-svg .ow-entity.ow-entity-2,
.slide-fo.phase-2 .org-svg .ow-entity.ow-entity-3,
.slide-fo.phase-2 .org-svg .ow-line-mid,
.slide-fo.phase-2 .org-svg .ow-line-mid-labels,
.slide-fo.phase-2 .org-svg .ow-explora,
.slide-fo.phase-2 .org-svg .ow-ground,
.slide-fo.phase-2 .org-svg .ow-lease {
  opacity:1 !important;
  animation:none !important;
  transform:none !important;
}
.slide-fo.phase-2 .org-svg .ow-line path {
  stroke-dashoffset:0 !important;
  animation:none !important;
}

@media (prefers-reduced-motion:reduce) {
  .slide-fo *,
  .slide-fo .org-svg * { animation:none !important; transition:none !important; }
  .slide-fo .fo-photo,
  .slide-fo .fo-info .fo-name,
  .slide-fo .fo-info .fo-nick,
  .slide-fo .fo-info .fo-bio,
  .slide-fo .fo-info .ft-row,
  .slide-fo .org-svg .ow-line,
  .slide-fo .org-svg .ow-entity,
  .slide-fo .org-svg .ow-explora,
  .slide-fo .org-svg .ow-ground,
  .slide-fo .org-svg .ow-lease,
  .slide-fo .org-svg .ow-line-top-labels,
  .slide-fo .org-svg .ow-line-mid-labels { opacity:1 !important; transform:none !important; }
  .slide-fo .org-svg .ow-line path { stroke-dashoffset:0 !important; }
}

/* Concept title block at top — show up after the whole hub is in */
.slide-concept-v2 .concept-titleblock .eyebrow,
.slide-concept-v2 .concept-titleblock .slide-title,
.slide-concept-v2 .concept-titleblock .standfirst { /* timing controlled by inline --cd / --i */ }

/* ============================================================
   BATCH 1 — Brand-bible feedback round (V2)
   ============================================================ */

/* ---------- 01 · Cover — wordmark down ~20%, drop the eyebrow gap ---------- */
.cover-mark { width:min(64%, 760px); margin-bottom:8px; position:relative; }
.cover-promise { gap:10px; margin-top:6px; }

/* leaf accents removed per V3 feedback — they overlapped the wordmark in
   awkward places (the "e" and "a" letters). The leaves in the background
   photo are enough botanical presence. */

/* ---------- 11 · Founders — labelled four-row tag layout ---------- */
.fd-tags.fd-tags-labeled { gap:7px; }
.fd-tags-labeled .ft-row {
  display:grid; grid-template-columns:104px 1fr; gap:10px; align-items:start;
  font-size:10.5px; line-height:1.45; padding:6px 12px; border-radius:8px;
}
.fd-tags-labeled .ft-row b {
  font-size:9.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--jungle-md); opacity:.85; padding-top:1px;
}
.fd-tags-labeled .ft-strength { background:var(--sage-xl); }
.fd-tags-labeled .ft-strength b { color:var(--jungle-md); }
.fd-tags-labeled .ft-weak { background:#F7E4DC; }
.fd-tags-labeled .ft-weak b { color:var(--terra); }
.fd-tags-labeled .ft-personal { background:var(--cream-dk); }
.fd-tags-labeled .ft-personal b { color:var(--jungle-lt); }
.fd-tags-labeled .ft-focus { background:var(--honey-lt); color:var(--jungle); font-weight:600; }
.fd-tags-labeled .ft-focus b { color:var(--honey-dk); }

/* ---------- 07 · Catchment — bigger map, smaller pool cards ---------- */
.catch-grid { grid-template-columns:1.15fr 1fr; }
.pool-card.pool-centered { padding:14px 14px; }
.pool-card.pool-centered .pc-value { font-size:42px; margin:4px 0 6px; }
.pool-card.pool-centered .pc-label-top { font-size:10.5px; letter-spacing:1.5px; }
.pool-card.pool-centered .pc-label-top small { font-size:9.5px; }
.pool-card.pool-centered .pc-use { font-size:10.5px; line-height:1.4; }
.reach-card .reach-map { min-height:300px; }

/* Catchment v2 — stats moved to top-left header row, map fills below.
   Cleaner header, bigger map area, no bottom-cutoff. */
.reach-card.reach-card-stacked {
  position:relative;
  padding:24px 24px 22px; gap:14px;
  overflow:hidden;          /* clip the top bar to the card's rounded corners */
}
/* Honey top bar — matches the .pp-bar on the pool cards for consistency. */
.reach-card.reach-card-stacked::before {
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--honey-dk), var(--honey));
  z-index:1;
}
.reach-card.reach-card-stacked .reach-head {
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
}
.reach-card.reach-card-stacked .rc-h {
  margin:0; font-size:11px; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.reach-card.reach-card-stacked .reach-stats {
  display:flex; gap:22px; margin:0; align-items:baseline;
}
.reach-card.reach-card-stacked .reach-stats .rs {
  flex:none; display:flex; flex-direction:column; align-items:flex-start;
}
.reach-card.reach-card-stacked .reach-stats .rs b {
  font-size:30px; font-weight:700; color:var(--jungle); letter-spacing:-.6px;
  line-height:1;
}
.reach-card.reach-card-stacked .reach-stats .rs span {
  margin-top:4px; font-size:10.5px; letter-spacing:.4px; color:var(--muted);
  text-transform:uppercase;
}
.reach-card.reach-card-stacked .reach-map {
  flex:1; min-height:0; height:auto; margin:0;
  position:relative;
}
.reach-card.reach-card-stacked .reach-map img {
  width:100%; height:100%; object-fit:contain; display:block;
  image-rendering:-webkit-optimize-contrast;
}
/* Expand-to-full-screen button — uses the existing image lightbox.
   Anchored to the bottom-right of the .reach-card (NOT the map area) so
   it sits in clean cream space and never overlaps map labels. !important
   defeats the .hs-expand defaults (dark jungle bg, honey hover). */
.reach-card { position:relative; }
.reach-card .reach-expand,
.reach-card .reach-expand:hover {
  position:absolute !important;
  bottom:14px !important; right:14px !important;
  top:auto !important; left:auto !important;
  width:34px !important; height:34px !important;
  border-radius:9px !important;
  display:grid !important; place-items:center !important;
  background:var(--jungle) !important;
  border:1px solid var(--jungle) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(7,34,26,.18) !important;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease, color .18s ease !important;
  z-index:5 !important;
  padding:0;
}
.reach-card .reach-expand:hover {
  background:var(--honey) !important;
  border-color:var(--honey) !important;
  color:var(--jungle) !important;
  transform:scale(1.06);
}
.reach-card .reach-expand svg {
  width:16px !important; height:16px !important;
  stroke:currentColor !important; fill:none !important;
  /* Defeat the legacy .reach-map svg { position:absolute; inset:0 }
     rule (left over from when the map itself was an SVG) which was
     pinning the expand icon to the top-left corner of the button. */
  position:static !important;
  inset:auto !important;
  display:block !important;
}

/* Image lightbox — give the image a cream backing so transparent PNGs
   (like catchment-map.png) don't render against the dark veil. */
#image-lightbox .vlb-frame { background:var(--cream) !important; }
#image-lightbox .vlb-frame img { background:var(--cream); }

/* Slightly tighten the slide title block on catchment to give the catch-grid
   more vertical room (was bleeding the last pool-card row off the slide). */
.slide:has(.catch-grid) .title-block { margin-bottom:18px; }
.slide:has(.catch-grid) .euregio { margin-top:8px; }

/* ---------- 10 · Local rivals — toggle sits UNDER the competitor name ---------- */
/* Override the legacy components.css rule that locked .c-toggle to a 24×24
   circle (it was originally a bare "+" button). Now that the toggle wraps an
   icon + "Explora advantage" label, the fixed size left a sage crescent
   peeking out behind the dark icon (classic "moon" artifact). Free the size. */
.dtable td .c-toggle {
  display:inline-flex !important;
  align-items:center !important;
  margin-top:10px;
  width:auto !important;
  height:auto !important;
  border-radius:100px !important;
  place-items:initial !important;
  gap:8px;
}

/* CANONICAL TOGGLE STYLES — consolidates the multiple conflicting rules
   above that were producing a +/− stack and a vertical mis-alignment. */
.dtable td .c-toggle .ct-icon {
  width:22px !important; height:22px !important; flex:none;
  border-radius:50% !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:var(--jungle-md);
  color:transparent !important;       /* hide raw "+" text node */
  position:relative;
  transition:background var(--dur) var(--ease);
}
.dtable td .c-toggle .ct-icon::before {
  content:"+" !important;
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--on-dark) !important;
  font-size:15px !important;
  font-weight:700;
  line-height:1;
  font-family:var(--font-sans);
  padding-bottom:1px;                 /* optical center for "+" glyph */
}
.comp-row.open .c-toggle .ct-icon { background:var(--honey-dk) !important; }
.comp-row.open .c-toggle .ct-icon::before {
  content:"\2715" !important;          /* U+2715 multiplication X */
  color:var(--jungle) !important;
  font-size:13px !important;
  padding-bottom:0 !important;
}
.dtable td .c-toggle .ct-lbl {
  align-self:center;
  line-height:1.1;
  padding-bottom:1px;                 /* match icon's optical baseline */
}
.dtable .comp-row td:first-child { padding-bottom:14px; }
.dtable .c-name { font-weight:700; font-style:normal; font-family:var(--font-sans); }
.dtable .c-loc { color:var(--muted); font-size:11px; margin-top:1px; font-style:normal; font-family:var(--font-sans); }

/* ============================================================
   10b · Local rivals — phased reveal (big caps title → table)
   Phase 1: huge centered caps title, table hidden.
   Phase 2: title shrinks + slides to the top, table cascades in.
   Mirrors the .slide-fo (Founders → Ownership) phasing pattern.
   ============================================================ */
.slide-lr .slide-pad.lr-stage {
  position:absolute; inset:0;
  padding:62px 76px;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.slide-lr .lr-titles {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  text-align:center; width:min(1100px, 92%);
  transition:
    top .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1),
    font-size .9s cubic-bezier(.22,1,.36,1);
  z-index:5;
}
.slide-lr .lr-titles .lr-eyebrow {
  display:block; margin-bottom:16px;
  font-size:12px; letter-spacing:.42em; color:var(--honey-dk);
  font-weight:700; text-transform:uppercase;
}
.slide-lr .lr-hero-title {
  font-family:var(--font-serif); font-weight:800;
  font-size:clamp(46px, 5.4vw, 70px);
  line-height:1.02; letter-spacing:-.025em;
  text-transform:uppercase;
  color:var(--jungle);
  margin:0;
  transition:font-size .9s cubic-bezier(.22,1,.36,1);
}
.slide-lr .lr-hero-title em {
  font-style:normal; color:var(--honey-dk); font-weight:800;
}
/* Beat between the two sentences — the em-wrapped "A real destination doesn't."
   waits an extra 1s after the first sentence settles, so the line reads as
   "Local competitors exist."  …pause…  "A real destination doesn't." */
.slide.active .slide-lr .lr-hero-title .cine-w.cine-em,
.slide.active.slide-lr .lr-hero-title .cine-w.cine-em {
  animation-delay: calc(var(--w,0) * var(--cine-stagger, .22s) + var(--cd, .55s) + 1s) !important;
}
.slide-lr .lr-standfirst {
  max-width:780px; margin:22px auto 0;
  transition:opacity .5s ease;
}

/* Phase 1: table hidden, hint visible. !important defeats any .anim
   keyframe that would force opacity:1. */
.slide-lr .lr-table {
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden;
  transform:translateY(20px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1),
             visibility 0s linear .55s;
}
.slide-lr.phase-2 .lr-table {
  opacity:1 !important;
  pointer-events:auto !important;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .55s ease .15s, transform .55s cubic-bezier(.22,1,.36,1) .15s,
             visibility 0s linear 0s;
}
.slide-lr .lr-hint {
  position:absolute; left:50%; bottom:40px;
  transform:translateX(-50%);
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  opacity:0; animation:lrHintIn .5s ease 1.8s forwards;
  z-index:5;
}
.slide-lr .lr-hint kbd {
  background:var(--cream-dk); padding:3px 8px; border-radius:4px;
  font-family:var(--font-sans); font-size:11px; margin:0 2px;
  border:1px solid var(--sand);
}
@keyframes lrHintIn { to { opacity:1; } }

/* Phase 2: title moves up & shrinks; standfirst fades out;
   table cascades in. */
.slide-lr.phase-2 .lr-titles {
  top:62px !important; transform:translate(-50%, 0) !important;
}
/* Bumped specificity + !important — defeats .slide:has(.dtable) .slide-title.cine-words
   (4-class selector) which was winning the cascade and keeping the title at 60px. */
.slide-lr.phase-2 .lr-titles .lr-hero-title.slide-title {
  font-size:clamp(26px, 2.7vw, 34px) !important;
}
/* !important defeats the `rise` keyframe animation on .anim (standfirst) and
   the `lrHintIn` keyframe on .lr-hint — both force opacity:1 via fill-forwards. */
.slide-lr.phase-2 .lr-standfirst {
  opacity:0 !important;
  animation:none !important;
}
.slide-lr.phase-2 .lr-hint {
  opacity:0 !important;
  animation:none !important;
}
.slide-lr.phase-2 .lr-stage { padding-top:200px; }
.slide-lr .lr-table { margin-top:auto; }

/* ============================================================
   07b · Catchment — redesigned pool cards (.pp variant)
   Honey top bar, icon, label + age, big jungle-lt number, tag chips.
   Replaces the empty white boxes the v1 cards used.
   ============================================================ */
.pools.pools-v2 {
  display:grid; grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;     /* equal-height rows but only as tall as the tallest card */
  gap:14px;
  align-content:start;
}
.pool-card.pp {
  position:relative;
  padding:18px 20px 16px;
  display:flex; flex-direction:column;
  align-items:flex-start; text-align:left;
  background:#fff; border-radius:12px;
  border:1px solid var(--sand);
  overflow:hidden;
  box-shadow:0 4px 14px rgba(7,34,26,.04);
  min-height:0;
}
.pool-card.pp .pp-bar {
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--honey-dk), var(--honey));
}
.pool-card.pp .pp-icon {
  position:absolute; top:14px; right:16px;
  width:32px; height:32px; color:var(--honey-dk); opacity:.85;
}
.pool-card.pp .pp-icon svg { width:100%; height:100%; display:block; }
.pool-card.pp .pp-head {
  display:flex; flex-direction:column; gap:2px;
  margin-top:6px;
}
.pool-card.pp .pp-eyebrow {
  font-size:11px; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--jungle); font-weight:700;
}
.pool-card.pp .pp-age {
  font-size:11px; color:var(--muted); font-style:italic;
  letter-spacing:.2px;
}
.pool-card.pp .pp-value {
  font-family:var(--font-serif); font-weight:800;
  font-size:54px; line-height:1; letter-spacing:-1.2px;
  color:var(--jungle-lt);
  margin:12px 0 14px;
}
.pool-card.pp .pp-tags {
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.pool-card.pp .pp-tags li {
  font-size:10.5px; font-weight:600;
  color:var(--jungle-md);
  background:var(--cream); border:1px solid var(--cream-dk);
  padding:5px 9px; border-radius:100px;
  letter-spacing:.15px; line-height:1;
}