/* ============================================================ */
/*  INVESTORS PAGE - site-aligned styles                          */
/*                                                                */
/*  Honors DESIGN-LANGUAGE.md:                                    */
/*    - inherits body's #000 + Body.svg canvas                    */
/*    - text: #eee default, #eeeeee80 paragraphs                  */
/*    - accent: var(--_primitives---colors--brand-orange) only    */
/*    - cards: 0.75rem radius; buttons/pills: 0.5rem              */
/*    - active states use L-bracket frame, not shadows            */
/* ============================================================ */


/* ----------------------------------------------------------------
   HERO STAT STRIP
   Pattern: 3 dark cards with permanent orange L-brackets (stats
   are emphasis content). Sits in its own section below the hero.
----------------------------------------------------------------- */
.inv-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: -1.5rem;
  /* Reveal after the hero finishes - the hero h1 (load-heading-reveal)
     + p + button (load-reveal) take ~1.4s to complete their stagger,
     so the stats hold at opacity 0 until 1.6s before fading up. */
  opacity: 0;
  transform: translateY(20px);
  animation: invStatsReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}
@keyframes invStatsReveal {
  to { opacity: 1; transform: translateY(0); }
}
.inv-stat {
  position: relative;
  padding: 2rem 1.75rem;
  border-radius: 0.75rem;
  background: var(--_primitives---opacity--white-5, #ffffff0d);
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
}
.inv-stat-n {
  color: #fff;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
.inv-stat-l {
  margin-top: 1rem;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 1rem;
  line-height: 1.45;
}
/* L-bracket frame - visible by default on these emphasis cards.
   Vector-3X SVGs sit ~10px outside the card corners. */
.inv-stat .focused-bg {
  position: absolute;
  inset: -10px;
  pointer-events: none;
}
.inv-stat .focused-icon { position: absolute; width: 18px; height: 18px; }
.inv-stat .focused-icon.top { top: 0; left: 0; }
.inv-stat .focused-icon._2  { top: 0; right: 0; }
.inv-stat .focused-icon._3  { bottom: 0; right: 0; }
.inv-stat .focused-icon._4  { bottom: 0; left: 0; }
/* Keep orange brackets only on the outermost corners of the strip
   (top-left + bottom-left on the first card, top-right + bottom-right
   on the last card). Middle card and inner edges have no brackets,
   so the strip reads as one big frame instead of three small ones. */
.inv-stats .inv-stat:not(:first-child) .focused-icon.top,
.inv-stats .inv-stat:not(:first-child) .focused-icon._4,
.inv-stats .inv-stat:not(:last-child)  .focused-icon._2,
.inv-stats .inv-stat:not(:last-child)  .focused-icon._3 {
  display: none;
}


/* ----------------------------------------------------------------
   PORTRAIT TILES (§01)
   Reuses .about_team_item + image-wrapper + team-name/designation
   from the site. Adds 5-col grid + hover state with L-brackets.
----------------------------------------------------------------- */
.inv-portraits {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
.inv-portrait {
  position: relative;
  text-decoration: none;
  cursor: default;
}
.inv-portrait .about_team_image {
  transition: transform 0.3s ease;
}
/* Brackets now wrap only the photo (inside .about_team_image-wrapper)
   with explicit -8px offsets, so each corner is placed symmetrically
   regardless of the SVG glyphs' tiny internal padding differences. */
.inv-portrait .about_team_image-wrapper {
  position: relative;
  overflow: visible;
}
.inv-portrait .focused-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
  display: block;
}
.inv-portrait:hover .focused-bg { opacity: 1; }
.inv-portrait .focused-icon {
  position: absolute;
  width: 12px;
  height: 12px;
}
.inv-portrait .focused-icon.top { top: -6px; left:  -6px; right: auto; bottom: auto; }
.inv-portrait .focused-icon._2  { top: -6px; right: -6px; bottom: auto; left: auto; }
.inv-portrait .focused-icon._3  { bottom: -6px; right: -6px; top: auto; left: auto; }
.inv-portrait .focused-icon._4  { bottom: -6px; left:  -6px; top: auto; right: auto; }


/* ----------------------------------------------------------------
   GEO / EXPERTISE TOGGLE (§01)
   Style mirrors home_about_tab-link: thin bottom-border, white-25
   inactive, brighter on active. Horizontal not vertical.
----------------------------------------------------------------- */
.inv-toggle-tabs {
  display: flex;
  gap: 2.5rem;
  border-bottom: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  padding-bottom: 0;
  margin-bottom: 0;
}
.inv-toggle-tab {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0.875rem 0;
  margin-bottom: -1px;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.inv-toggle-tab:hover { color: #fff; }
.inv-toggle-tab[aria-pressed="true"] {
  color: #fff;
  border-bottom-color: var(--_primitives---colors--brand-orange, #f56e38);
}
.inv-toggle-panel { display: none; padding-top: 1rem; }
.inv-toggle-panel.active { display: block; }


/* ============================================================ */
/*  §01 BY GEOGRAPHY - clean SVG world + orange count bubbles +  */
/*  20%-width slide-in side panel. Driven by inline JS at the    */
/*  bottom of investors.html.                                    */
/* ============================================================ */

/* ── Top toolbar - one inline row, all caps, same font size on
   both sides. Counts on the left, role tabs on the right; both
   sit on the same baseline so the active tab's orange underline
   visually replaces the divider line beneath it. ──────────────── */
.inv-geo-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 0;
  border-bottom: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.inv-geo-stats {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-bottom: 0.75rem;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.inv-geo-stat {
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.inv-geo-stat > span:first-child {
  margin-right: 0.25rem;
}
.inv-geo-divider {
  color: var(--_primitives---opacity--white-25, #ffffff40);
  font-weight: 400;
}

.inv-geo-filter {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.inv-geo-filter-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  padding: 0.375rem 0.875rem 0.75rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: color 0.18s ease;
}
.inv-geo-filter-btn::after {
  content: "";
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: -1px;
  height: 2px;
  background: var(--_primitives---colors--brand-orange, #f56e38);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}
.inv-geo-filter-btn:hover { color: #fff; }
.inv-geo-filter-btn.is-active { color: #fff; }
.inv-geo-filter-btn.is-active::after { transform: scaleX(1); }

/* ── Main split: map + side panel (panel hidden by default) ────── */
.inv-geo {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  height: 580px;
}
.inv-geo-map-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  background: #0a0a0a;
  overflow: hidden;
}
.inv-geo.has-panel .inv-geo-map-wrap {
  border-right: none;
}
.inv-geo-map {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.inv-geo-map.is-grabbing { cursor: grabbing; }

.inv-geo-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* World map outlines (paths use currentColor). Brighter + a touch
   thicker so continents read clearly on the dark canvas. */
.inv-geo-svg [data-geo-land] {
  color: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
.inv-geo-svg [data-geo-land] path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
}

/* ── Bubbles (city + count) ───────────────────────────────────── */
.inv-geo-bubble {
  cursor: pointer;
}
.inv-geo-bubble-c {
  fill: rgba(245, 110, 56, 0.78);
  stroke: var(--_primitives---colors--brand-orange, #f56e38);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: fill 0.2s ease, stroke-width 0.2s ease;
}
.inv-geo-bubble:hover .inv-geo-bubble-c {
  fill: var(--_primitives---colors--brand-orange, #f56e38);
}
.inv-geo-bubble.is-active .inv-geo-bubble-c {
  fill: var(--_primitives---colors--brand-orange, #f56e38);
  stroke-width: 2.4;
}
.inv-geo-bubble-t {
  fill: #fff;
  font-weight: 600;
  font-family: inherit;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Faint leader line from the visually-displaced bubble back to its
   true geographic point (only drawn when repulsion has moved it). */
.inv-geo-bubble-tether {
  stroke: rgba(245, 110, 56, 0.55);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}

/* Individual investor markers (decluster mode) - circular photo
   avatars with a subtle halo + orange ring. */
.inv-geo-marker { cursor: pointer; }
.inv-geo-marker-halo {
  fill: rgba(0, 0, 0, 0.55);
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.inv-geo-marker-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.15s ease, stroke-width 0.15s ease;
}
/* Small white badge backdrop for the company logo, bottom-right of avatar */
.inv-geo-marker-logo-bg {
  fill: #ffffff;
  stroke: rgba(0, 0, 0, 0.15);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.inv-geo-marker:hover .inv-geo-marker-ring,
.inv-geo-marker.is-active .inv-geo-marker-ring {
  stroke: var(--_primitives---colors--brand-orange, #f56e38);
  stroke-width: 2;
}
.inv-geo-marker image { pointer-events: none; }

/* ── Zoom controls (top-right) ────────────────────────────────── */
.inv-geo-zoom {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.inv-geo-zoom-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 2.25rem;
  height: 2.25rem;
  background: #2a2a2a;
  border: none;
  color: #fff;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.inv-geo-zoom-btn:hover {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  background: #3a3a3a;
}

/* ── Tooltip - brand "card" treatment: dark card-grey background,
   white-15 hairline, off-white text, tabular nums for counts, no
   border-radius (matches the rest of the page's hard surfaces). ── */
.inv-geo-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--_primitives---colors--black-tertiary, #131313);
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  color: var(--_primitives---colors--neutral-lightest, #eee);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  padding: 0.5rem 0.75rem;
  /* JS sets {left, top} to the bubble's top-centre in map coords.
     CSS translates the tooltip up + horizontally centred. */
  transform: translate(-50%, calc(-100% - 14px));
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 4;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.inv-geo-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 10px));
}
.inv-geo-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--_primitives---colors--black-tertiary, #131313);
  border-right: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  border-bottom: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  transform: rotate(45deg);
}

/* Bottom hint - sits in a subtle dark card so the country outlines /
   grid behind it don't bleed through the text. */
.inv-geo-hint {
  position: absolute;
  left: 0.875rem;
  bottom: 0.875rem;
  padding: 0.4375rem 0.625rem;
  background: rgba(10, 10, 10, 0.75);
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease;
}
.inv-geo-hint.is-hidden { opacity: 0; }

/* ── Side panel (~20% width, hidden by default, slides in) ────── */
.inv-geo-panel {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--_primitives---opacity--white-5, #ffffff0d);
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  border-left: none;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: flex-basis 0.36s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.36s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease 0.06s;
}
.inv-geo-panel.is-open {
  flex: 0 0 22%;
  width: 22%;
  min-width: 280px;
  opacity: 1;
  border-left: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
}

.inv-geo-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 0.875rem;
  border-bottom: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  position: relative;
}
/* City title is now a <button> so it can open a dropdown. The caret
   sits IMMEDIATELY after the city name (before the count) so the
   affordance reads "tap the city to switch", not "tap the count". */
.inv-geo-panel-title {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.inv-geo-panel-city-caret {
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  transition: transform 0.15s ease, color 0.15s ease;
  align-self: center;
  margin-top: 1px;
  flex-shrink: 0;
}
.inv-geo-panel-title[aria-expanded="true"] .inv-geo-panel-city-caret {
  transform: rotate(180deg);
  color: #fff;
}
.inv-geo-panel-city-menu {
  list-style: none;
  margin: 0;
  padding: 0.375rem 0;
  position: absolute;
  top: 100%;
  left: 0.625rem;
  right: 0.625rem;
  z-index: 10;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.inv-geo-panel-city-menu[hidden] { display: none; }
.inv-geo-panel-city-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
  transition: background 0.12s ease, color 0.12s ease;
}
.inv-geo-panel-city-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.inv-geo-panel-city-menu-item.is-active {
  background: rgba(245, 110, 56, 0.08);
  color: #fff;
}
.inv-geo-panel-city-menu-name { flex: 1 1 auto; }
.inv-geo-panel-city-menu-count {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* Backdrop element only renders on mobile via the media-query
   block. Hide it everywhere else. */
.inv-geo-panel-backdrop { display: none; }

/* Mobile-only header (INVESTORS / By geography + X). Hidden by
   default; revealed inside the mobile media-query block. */
.inv-geo-panel-header { display: none; }

/* City picker (caret + dropdown menu) is a mobile-only affordance -
   on desktop the city is changed by clicking the map directly, so
   show the city as a static heading with no dropdown chrome. */
@media (min-width: 768px) {
  .inv-geo-panel-city-caret { display: none; }
  .inv-geo-panel-city-menu  { display: none !important; }
  .inv-geo-panel-title      { cursor: default; }
}
.inv-geo-panel-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
.inv-geo-panel-city {
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-geo-panel-meta {
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
}
.inv-geo-panel-meta::before {
  content: "·";
  color: var(--_primitives---opacity--white-25, #ffffff40);
  margin-right: 0.4375rem;
}
.inv-geo-panel-close {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  width: 1.75rem;
  height: 1.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.inv-geo-panel-close:hover {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  border-color: var(--_primitives---colors--brand-orange, #f56e38);
}

/* Investor rows - flex-1 so the list owns the remaining height, with
   its own scrollbar. The whole map+panel section is locked to 580px so
   the panel can't push past the map's bottom edge. */
.inv-geo-panel-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--_primitives---opacity--white-15, #ffffff26) transparent;
}
.inv-geo-panel-list::-webkit-scrollbar { width: 6px; }
.inv-geo-panel-list::-webkit-scrollbar-track { background: transparent; }
.inv-geo-panel-list::-webkit-scrollbar-thumb {
  background: var(--_primitives---opacity--white-15, #ffffff26);
}
.inv-geo-row {
  position: relative;
  width: 100%;
  /* Mirror the expertise modal variant B layout: photo on the left,
     name/role/type-eyebrow stacked on the right, bio spanning the full
     row width below. The LinkedIn chip floats absolute top-right. */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "photo meta"
    "bio   bio";
  align-items: start;
  column-gap: 0.875rem;
  row-gap: 0.5rem;
  padding: 0.875rem 2.25rem 0.875rem calc(0.625rem + 2px);
  background: transparent;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  color: #eee;
  transition: background 0.18s ease;
}
.inv-geo-row:last-child { border-bottom: none; }
.inv-geo-row:hover { background: var(--_primitives---opacity--white-5, #ffffff0d); }
/* Focused row: when an avatar is clicked on the map, the matching
   row gets a subtle brand-orange left bar + faint orange wash so the
   user can locate it at a glance. Re-uses the existing transparent
   2px left border slot - no layout shift. */
.inv-geo-row.is-focused {
  border-left-color: var(--_primitives---colors--brand-orange, #f56e38);
  background: rgba(245, 110, 56, 0.05);
}
.inv-geo-row.is-focused:hover {
  background: rgba(245, 110, 56, 0.08);
}
.inv-geo-row-photo-wrap {
  grid-area: photo;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
}
.inv-geo-row-photo {
  width: 100%;
  height: 100%;
  background: #f6f3ec;
  display: block;
  object-fit: cover;
}
.inv-geo-row-flag {
  position: absolute;
  bottom: -0.1875rem;
  right: -0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 1px;
  border: 2px solid #0a0a0a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  z-index: 2;
}
/* Type eyebrow - brand-orange tag below the role. Same size and
   weight as the expertise modal mcard location (12px, 500), so geo
   and expertise share visual rhythm; differentiated by color to
   emphasise the type categorisation. */
.inv-geo-row-tag-eyebrow {
  order: 3;
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  margin-top: 0.125rem;
}
.inv-geo-row-bio {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin-top: 0;
}
/* Bio renders at the bottom of the row, spanning under photo+meta -
   matches the expertise modal variant B's two-row grid. The inline
   bio (which used to live inside the meta column) is hidden. */
.inv-geo-row-bio-inline { display: none; }
.inv-geo-row-bio-bottom {
  display: block;
  grid-area: bio;
}
.inv-geo-row-meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  overflow: hidden;
}
/* Explicit flex order: name → role → eyebrow. The eyebrow's
   `order: 3` is set on the rule above. */
.inv-geo-row-name { order: 1; }
.inv-geo-row-role { order: 2; }
.inv-geo-row-name {
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  word-break: break-word;
}
/* Three-line meta: name (already styled above), designation, company.
   Never merged on one line. Long roles get conservative abbreviations
   (Machine Learning → ML, Vice President → VP) in the JS template. */
.inv-geo-row-role {
  /* Brighter than the type eyebrow below it (78% vs 50%) - same
     hierarchy as expertise modal variant B (role vs location). The
     weight stays at 400; the eyebrow at 500 sits underneath and reads
     as a separate categorization tag, not a continuation of the role. */
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inv-geo-row-co {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  min-width: 0;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.8125rem;
  line-height: 1.3;
}
.inv-geo-row-co > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-geo-row-co-logo {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  object-fit: contain;
  display: block;
}
/* LinkedIn icon - bordered chip, hidden by default, revealed on row
   hover/focus. Absolute top-right so it never displaces the text. */
.inv-geo-row-li {
  position: absolute;
  top: 0.625rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.inv-geo-row:hover .inv-geo-row-li,
.inv-geo-row:focus-within .inv-geo-row-li {
  opacity: 1;
  pointer-events: auto;
}
.inv-geo-row-li:hover {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  border-color: rgba(245, 110, 56, 0.6);
  background: rgba(245, 110, 56, 0.08);
}
.inv-geo-row-li svg { display: block; }

@media (max-width: 767px) {
  .inv-geo { flex-direction: column; }
  .inv-geo-panel.is-open { flex: 0 0 auto; width: 100%; min-width: 0; }
  .inv-geo-toolbar { gap: 0.875rem; }
  .inv-geo-filter { width: 100%; justify-content: flex-start; overflow-x: auto; }
}


/* ----------------------------------------------------------------
   EXPERTISE WALL (§01 Expertise panel)
   Clean dark grid. 3 groups (Founders/Investors/Operators) ×
   their lanes. Headings in white, names in white-75/50.
----------------------------------------------------------------- */
/* ----------------------------------------------------------------
   By Expertise wall - tiny-card mosaic.
   34 investors in one viewport (max height 580px). Grouped first by
   tag (Founders · Investors · Operators); inside each group, lanes
   stack cards with the lane name set sideways at the bottom of each
   visual column. Lanes with > 6 cards split into multiple visual
   columns sharing the same lane label.
   Cards are intentionally small - the GROUPING is what reads.
----------------------------------------------------------------- */
.inv-wall {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 580px;
  gap: 0;
}

.inv-wall2-group {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  padding: 0.625rem 0.75rem;
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.inv-wall2-group-cols {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 0;
}
.inv-wall2-group-label {
  margin-top: 0.875rem;
  padding-top: 1rem;
  border-top: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
}

.inv-wall2-lane {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.5rem;
  cursor: pointer;
  position: relative;
  transition: background 0.18s ease;
}
.inv-wall2-lane.is-empty { cursor: default; }
/* Lane hover - visible enough that the column reads as its own
   click target. The label brightens to brand orange so users
   know the affordance is "click to open this lane". */
.inv-wall2-lane:not(.is-empty):hover {
  background: rgba(245, 110, 56, 0.05);
}
.inv-wall2-lane:not(.is-empty):hover .inv-wall2-lane-label span {
  color: var(--_primitives---colors--brand-orange, #f56e38);
}
.inv-wall2-lane:not(.is-empty):focus-visible {
  outline: 1px solid var(--_primitives---colors--brand-orange, #f56e38);
  outline-offset: -1px;
}
.inv-wall2-lane + .inv-wall2-lane {
  border-left: 1px dashed var(--_primitives---opacity--white-15, #ffffff26);
}
.inv-wall2-lane-cards {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  align-items: stretch;
}
.inv-wall2-lane-label {
  margin-top: auto;
  min-height: 6.25rem;
  padding-top: 0.75rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.inv-wall2-lane-label span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Horizontal investor card - tiny, "pasted on the board" feel.
   Names and companies don't truncate with ellipsis; they wrap or
   simply get clipped by the card's hidden overflow if they're too
   long. Legibility is intentionally secondary to density. */
/* Wall card - airy, low-chrome over the dark canvas. Photo on left,
   name top-aligned with the photo, company logo bottom-right.
   Cards are intentionally low-contrast so the grouping reads, not
   any single name. */
.inv-wall2-card {
  width: 4.75rem;
  height: 2.75rem;
  padding: 3px;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow: hidden;
  cursor: default;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.inv-wall2-card:hover {
  transform: translateY(-1px);
  background: var(--_primitives---opacity--white-5, #ffffff0d);
  border-color: var(--_primitives---opacity--white-25, #ffffff40);
  z-index: 1;
}
.inv-wall2-card-photo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  align-self: center;
  background: var(--_primitives---opacity--white-5, #ffffff0d);
  object-fit: cover;
  display: block;
}
.inv-wall2-card-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  overflow: hidden;
}
.inv-wall2-card-name {
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--_primitives---colors--neutral-lightest, #eee);
  word-break: break-word;
}
.inv-wall2-card-logo {
  align-self: flex-end;
  width: 12px;
  height: 12px;
  object-fit: contain;
  display: block;
  margin-top: 2px;
  /* favicons with hard white backgrounds get a quiet rounded mask so
     they don't punch a bright square out of the dark card. */
  background: rgba(255, 255, 255, 0.9);
  padding: 1px;
}

/* ─────────────────────────────────────────────────────────────────
   By Expertise - interactive affordance + expanded modal.
   Clicking any group box (FOUNDERS/INVESTORS/OPERATORS) or any
   individual card opens a centered modal with a tab nav for the
   three groups; each tab shows lanes (Product, Engineering, etc.)
   with full detailed cards (photo, name, role, company+logo,
   location, LinkedIn).
   ───────────────────────────────────────────────────────────── */
.inv-wall2-group { cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.inv-wall2-group:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.7);
}
.inv-wall2-card { cursor: pointer; }
.inv-wall2-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.22);
  background: #1e1e1e;
  z-index: 2;
}

.inv-wall-modal[hidden] { display: none; }
.inv-wall-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  animation: invWallModalFade 0.2s ease-out;
}
@keyframes invWallModalFade { from { opacity: 0; } to { opacity: 1; } }
.inv-wall-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.inv-wall-modal-card {
  position: relative;
  width: 100%;
  max-width: 1120px;
  height: 100%;
  max-height: 88vh;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: invWallModalRise 0.25s cubic-bezier(.2,.7,.2,1);
}
@keyframes invWallModalRise {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.inv-wall-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.inv-wall-modal-eyebrow {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.375rem;
}
.inv-wall-modal-title {
  font-family: 'Geist', var(--_typography---font-styles--heading);
  color: #fff;
  font-size: 1.625rem; font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.inv-wall-modal-close {
  appearance: none; background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.inv-wall-modal-close:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
}
.inv-wall-modal-tabs {
  display: flex;
  padding: 0 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.inv-wall-modal-tab {
  appearance: none; background: transparent; border: none;
  padding: 0.9rem 0;
  margin-right: 1.75rem;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font: inherit;
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  display: flex; align-items: center; gap: 0.5rem;
  transition: color 0.15s ease;
}
.inv-wall-modal-tab:hover { color: #eee; }
.inv-wall-modal-tab[aria-selected="true"] { color: #fff; }
.inv-wall-modal-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--_primitives---colors--brand-orange, #f56e38);
}
.inv-wall-modal-tab-count {
  font-size: 0.625rem;
  padding: 0.125rem 0.4375rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  letter-spacing: 0.04em;
  font-weight: 600;
}
.inv-wall-modal-tab[aria-selected="true"] .inv-wall-modal-tab-count {
  background: rgba(245, 110, 56, 0.15);
  color: var(--_primitives---colors--brand-orange, #f56e38);
}
.inv-wall-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* No top padding so position:sticky on the lane label pins flush
     against the body's border-top instead of its padding-top edge.
     The first lane carries the visual top spacing via padding-top. */
  padding: 0 1.75rem 2rem;
}
.inv-wall-modal-body::-webkit-scrollbar { width: 6px; }
.inv-wall-modal-body::-webkit-scrollbar-track { background: transparent; }
.inv-wall-modal-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); }
.inv-wall-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }
.inv-wall-modal-lane { margin-bottom: 1.75rem; }
.inv-wall-modal-lane:last-child { margin-bottom: 0; }
.inv-wall-modal-lane:first-child { padding-top: 1.5rem; }
/* Lane label sticks to the top of the modal body while its lane is in
   view. Negative horizontal margins + matching padding stretch the
   background across the body's horizontal padding so the pinned label
   reads as a full-width bar. */
.inv-wall-modal-lane-label {
  position: sticky;
  top: 0;
  z-index: 3; /* above the card flag badge (z-index: 2) */
  background: #0d0d0d;
  margin-left: -1.75rem;
  margin-right: -1.75rem;
  padding: 0.625rem 1.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  display: flex; align-items: center; gap: 0.75rem;
}
.inv-wall-modal-lane-label::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.inv-wall-modal-lane-count {
  font-size: 0.625rem;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  letter-spacing: 0.04em;
}
.inv-wall-modal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 0.75rem;
}
.inv-wall-modal-mcard {
  position: relative;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.125rem;
  display: flex;
  gap: 1.125rem;
  align-items: stretch;
  transition: border-color 0.4s ease, background 0.4s ease, transform 0.15s ease, box-shadow 0.4s ease;
}
.inv-wall-modal-mcard:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: #1c1c1c;
  transform: translateY(-1px);
}
.inv-wall-modal-mcard.is-focused {
  border-color: var(--_primitives---colors--brand-orange, #f56e38);
  background: rgba(245, 110, 56, 0.06);
  box-shadow: 0 0 0 1px var(--_primitives---colors--brand-orange, #f56e38) inset;
}
.inv-wall-modal-mcard-left {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 1.125rem; /* match card padding-bottom so text sits equidistant */
}
.inv-wall-modal-mcard-photo-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.inv-wall-modal-mcard-photo {
  width: 80px; height: 80px;
  flex-shrink: 0;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
  display: block;
}
.inv-wall-modal-mcard-flag {
  position: absolute;
  bottom: -0.3125rem;
  right: -0.3125rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 2px;
  border: 2px solid #161616;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  z-index: 2;
}
.inv-wall-modal-mcard-bio {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin-top: 0.1875rem;
}
.inv-wall-modal-mcard-loc {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--_primitives---colors--brand-orange, #f56e38);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
}
.inv-wall-modal-mcard-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 0.25rem;
  padding-right: 2rem; /* reserve room for the hover-revealed LinkedIn icon */
}
.inv-wall-modal-mcard-name {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  word-break: break-word;
}
.inv-wall-modal-mcard-role {
  font-size: 0.75rem;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  line-height: 1.35;
}
.inv-wall-modal-mcard-co {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  font-size: 0.8125rem;
  color: #eee;
  line-height: 1;
  margin-top: 0.4375rem;
}
.inv-wall-modal-mcard-co img {
  width: 14px; height: 14px; object-fit: contain;
  background: rgba(255, 255, 255, 0.92);
  padding: 1px;
  flex-shrink: 0;
}
.inv-wall-modal-mcard-co-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-wall-modal-mcard-li {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  display: inline-flex;
  width: 1.75rem; height: 1.75rem;
  align-items: center; justify-content: center;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.inv-wall-modal-mcard:hover .inv-wall-modal-mcard-li,
.inv-wall-modal-mcard:focus-within .inv-wall-modal-mcard-li {
  opacity: 1;
  pointer-events: auto;
}
.inv-wall-modal-mcard-li:hover {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  border-color: rgba(245, 110, 56, 0.6);
  background: rgba(245, 110, 56, 0.08);
}

body.inv-wall-modal-open { overflow: hidden; position: fixed; width: 100%; }
/* Mobile: keep the sticky navbar visible at the top of the viewport
   when a bottom-sheet modal is open. The modal anchors at
   `top: var(--inv-nav-h)` (just below the navbar) so there's no
   visible gap between navbar and modal. Desktop modals are anchored
   differently and don't need this. */
/* Navbar sits at y≈32px (body offset) and is 72px tall, so its
   bottom edge in the viewport is ≈104px = 6.5rem. JS adjusts this
   variable at runtime in case the navbar height changes. */
:root { --inv-nav-h: 6.5rem; }

@media (max-width: 760px) {
  .inv-wall-modal { padding: 0.75rem; }
  .inv-wall-modal-card { max-height: 100vh; }
  .inv-wall-modal-head { padding: 1.25rem 1rem 0.875rem; }
  .inv-wall-modal-tabs { padding: 0 1rem; }
  .inv-wall-modal-body { padding: 1.25rem 1rem 1.5rem; }
  .inv-wall-modal-tab { margin-right: 1.25rem; font-size: 0.75rem; }
  .inv-wall-modal-cards { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------
   TIME / MONEY TABS (§02)
   Two large tab cards (number + label + sub). Inactive border
   white-15; active border brand orange + faint bg tint.
----------------------------------------------------------------- */
.inv-ask-tabs {
  display: flex;
  align-items: stretch;
  gap: 3.5rem;
  border-bottom: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
}
.inv-ask-tab {
  position: relative;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 1.125rem;
  margin-bottom: -1px; /* overlap the container's hairline so the active bar
                          sits ON the hairline, not below it */
  display: flex; align-items: flex-start; gap: 1rem;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  transition: color 0.25s ease;
}
.inv-ask-tab:hover { color: #eee; }
/* Selected: a 2px brand-orange bar runs under the entire tab, sitting on
   the row's hairline. No card chrome - just typography + underline. */
.inv-ask-tab[aria-pressed="true"] { color: #fff; }
.inv-ask-tab[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--_primitives---colors--brand-orange, #f56e38);
}
.inv-ask-tab[aria-pressed="true"] .inv-ask-tab-sub { color: rgba(255, 255, 255, 0.7); }
.inv-ask-tab-num {
  flex: 0 0 auto;
  font-size: 2rem;
  font-weight: 500;
  color: var(--_primitives---colors--brand-orange, #f56e38);
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  /* tighten the line box and pull the glyph up so its cap-top aligns
     with the label's cap-top (same trick as the Venture OS rows). */
  margin-top: -2px;
}
.inv-ask-tab-label {
  font-size: 1.25rem;
  font-weight: 500;
  color: inherit;
  line-height: 1;
}
.inv-ask-tab-sub {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
}

.inv-ask-panel { display: none; padding-top: 2rem; }
.inv-ask-panel.active { display: block; }


/* ----------------------------------------------------------------
   TIME CAROUSEL (§02 Time panel)
   Two columns: photo (16:10, 0.75rem radius) + headline & sub.
   Reuses existing Swiper. Nav buttons match site button pill.
----------------------------------------------------------------- */
.inv-time-case {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
}
/* Right column: heading + paragraph pinned to top, investor box pinned
   to the bottom edge of the photo. */
.inv-time-case > div:last-child {
  display: flex;
  flex-direction: column;
}
.inv-time-case .inv-time-investor {
  margin-top: auto;
}
.inv-time-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #1a1a1a;
}
.inv-time-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.inv-time-kicker {
  position: absolute; top: 1rem; left: 1rem;
  padding: 0.4rem 0.8rem;
  background: rgba(10,10,10,0.7);
  border: 1px solid var(--_primitives---colors--brand-orange, #f56e38);
  border-radius: 0.25rem;
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.75rem;
  font-weight: 500;
}
.inv-time-h {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 1rem;
}
.inv-time-p {
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 1rem;
  line-height: 1.6;
}
.inv-time-by {
  margin-top: 1.5rem;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.875rem;
}
.inv-time-by strong { color: #fff; font-weight: 500; }

.inv-time-nav {
  position: relative;
  margin-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.inv-time-pos {
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.875rem;
}
/* No highlight on the current case number - it sits at the same
   colour / weight as the "/ 04" so the counter reads as one quiet
   "01 / 04" string instead of an emphasised pair. */
.inv-time-pos strong { color: inherit; font-weight: inherit; }
.inv-time-btn {
  appearance: none;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--_primitives---opacity--white-25, #ffffff40);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
/* Chevron SVGs share the same stroke style + size as the journey
   nav arrows so the prev/next pair reads consistently across the
   site (journey rail, about journey carousel, this case-study
   cycle). */
.inv-time-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.inv-time-btn + .inv-time-btn { margin-left: 0.5rem; }
.inv-time-btn:hover {
  background: var(--_primitives---colors--brand-orange, #f56e38);
  border-color: var(--_primitives---colors--brand-orange, #f56e38);
}


/* ----------------------------------------------------------------
   MONEY LADDER (§02 Money panel)
   4 rows: multiplier × bar × when. Bars fill on tab activation.
----------------------------------------------------------------- */
.inv-money-intro {
  max-width: 720px;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.inv-money-intro strong { color: #fff; font-weight: 500; }
.inv-ladder {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.inv-ladder-row {
  display: grid;
  grid-template-columns: 3rem 1fr 5rem;
  column-gap: 0.5rem;
  align-items: center;
}
.inv-ladder-x {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
}
.inv-ladder-bar {
  position: relative;
  height: 1.25rem;
  /* No track styling - the fill IS the visible bar, and its width
     reflects the tier multiple (3× longest, 1× shortest). */
}
.inv-ladder-fill {
  height: 100%;
  width: 0;
  background: rgba(245,110,56,0.4);
  display: flex; align-items: center;
  padding-left: 1rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.inv-ladder-when {
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.95rem;
  display: flex; align-items: center; gap: 0.5rem;
  justify-content: flex-end;
}
.inv-ladder-when .dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--_primitives---opacity--white-25, #ffffff40);
}


/* ----------------------------------------------------------------
   VENTURE OS (§03) - base grid + screenshot badge
   (Layout, rows, and border overridden in §03 block lower down.)
----------------------------------------------------------------- */
.inv-vos {
  display: grid;
}
.inv-vos-screen {
  position: relative;
  background: #131313;
}
.inv-vos-screen img {
  width: 100%; height: auto; display: block;
  image-rendering: auto;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.inv-vos-screen-badge {
  position: absolute; top: 1rem; right: 1rem;
  padding: 0.4rem 0.7rem;
  background: rgba(10,10,10,0.7);
  border: 1px solid var(--_primitives---colors--brand-orange, #f56e38);
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
}


/* ----------------------------------------------------------------
   MONTHLY VIDEO CARDS (§04)
   3 cards: featured 16:9 + two 4:3. Brackets on hover.
----------------------------------------------------------------- */
.inv-loop {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
.inv-video {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--_primitives---opacity--white-5, #ffffff0d);
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  border-radius: 0.75rem;
  overflow: hidden;
}
.inv-video-player {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #0a0a0a;
  border-bottom: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  overflow: hidden;
}
.inv-video-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
  /* Scale aggressively so the YouTube play overlay (centered) and any
     control band (bottom) sit well outside the visible window - even
     during the brief frame after tab-visibility changes when YT shows
     its pause UI. */
  transform: scale(1.6);
  transform-origin: center center;
  pointer-events: none;
}
/* Transparent click-shield - captures all pointer events so taps on
   the preview can never reach the YouTube iframe (no nav to YouTube,
   no play/pause/scrub on the actual player). */
.inv-video-shield {
  position: absolute; inset: 0;
  z-index: 2;
  background: transparent;
  cursor: default;
}
.inv-video-tag {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  z-index: 3;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inv-video-meta {
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.inv-video-mo {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.inv-video-points {
  list-style: none;
  padding: 0;
  margin: 0.625rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.inv-video-points li {
  position: relative;
  padding-left: 0.875rem;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.inv-video-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--_primitives---opacity--white-25, #ffffff40);
}
.inv-video-topic {
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Mobile carousel + nav buttons */
.inv-loop-nav {
  display: none;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 1rem;
}
.inv-loop-btn {
  appearance: none; background: transparent;
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.inv-loop-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 760px) {
  .inv-loop {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    padding-bottom: 0.5rem;
  }
  .inv-loop::-webkit-scrollbar { display: none; }
  .inv-loop > .inv-video {
    flex: 0 0 88vw;
    scroll-snap-align: center;
  }
  .inv-loop-nav { display: flex; }
}


/* ----------------------------------------------------------------
   LONG-GAME FIT (§05)
   3 columns: intro + ✓ card (orange brackets) + ✕ card (no
   brackets, muted).
----------------------------------------------------------------- */
/* §05 wrapper: text left, cards right */
.inv-long-game {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 4rem;
  align-items: start;
}
.inv-long-game-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 420px;
}
.inv-long-game-sub {
  margin: 0;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 1.125rem;
  line-height: 1.6;
}

.inv-fit-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.inv-fit-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--_primitives---opacity--white-5, #ffffff0d);
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
}
.inv-fit-card-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}
.inv-fit-icon {
  width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  font-weight: 500;
  border: 1.5px solid var(--_primitives---opacity--white-25, #ffffff40);
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  flex-shrink: 0;
}
.inv-fit-card.yes .inv-fit-icon {
  border-color: var(--_primitives---colors--brand-orange, #f56e38);
  color: var(--_primitives---colors--brand-orange, #f56e38);
  background: rgba(245,110,56,0.10);
}
.inv-fit-title {
  margin: 0;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
}
.inv-fit-card.no .inv-fit-title { color: var(--_primitives---opacity--white-50, #eeeeee80); }
.inv-fit-list { list-style: none; padding: 0; margin: 0; }
.inv-fit-list li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.4375rem;
  align-items: start; /* bullet hugs the first text line, not the row's vertical center */
  padding: 0.3125rem 0;
  color: #eee;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.inv-fit-card.yes .inv-fit-list li::before,
.inv-fit-card.no  .inv-fit-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  /* Vertically center the dot with the first text line. Text line-box
     is font-size 15px × line-height 1.45 ≈ 21.75px tall; the cap-height
     middle sits ~10.5px down. Margin-top here pushes the 7px dot's
     center to that visual middle. */
  margin-top: 0.4375rem;
}
.inv-fit-card.yes .inv-fit-list li::before { color: var(--_primitives---colors--brand-orange, #f56e38); }
.inv-fit-card.no  .inv-fit-list li::before { color: var(--_primitives---opacity--white-25, #ffffff40); }
.inv-fit-card.no .inv-fit-list li { color: var(--_primitives---opacity--white-50, #eeeeee80); }

/* Properly aligned corner brackets on BOTH cards.
   Brackets are 17×17 SVGs whose corner sits at card-edge − 8px,
   so the L points outward in a consistent stamp. */
.inv-fit-card .focused-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.inv-fit-card .focused-icon {
  position: absolute;
  width: 17px;
  height: 17px;
}
.inv-fit-card .focused-icon.top { top: -8px; left:  -8px; right: auto; bottom: auto; }
.inv-fit-card .focused-icon._2  { top: -8px; right: -8px; bottom: auto; left: auto; }
.inv-fit-card .focused-icon._3  { bottom: -8px; right: -8px; top: auto; left: auto; }
.inv-fit-card .focused-icon._4  { bottom: -8px; left:  -8px; top: auto; right: auto; }
/* No brackets on the NO card */
.inv-fit-card.no .focused-bg { display: none; }


/* ----------------------------------------------------------------
   PROCESS TIMELINE (§06)
   4 nodes in a row, connected by a dashed line. Each: circle
   with day-range, step title, description.
----------------------------------------------------------------- */
/* Horizontal animated timeline.
   4 steps in a row, connected by a 2px track running through the
   numbers. The track is gray; an orange fill animates left→right
   as the section scrolls into view, and each step lights up in
   sequence (01 → 02 → 03 → 04). */
.inv-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
}
.inv-process-track {
  position: absolute;
  top: 1.4375rem;
  left: calc(12.5% + 1.5rem);
  right: calc(12.5% + 1.5rem);
  height: 2px;
  background: var(--_primitives---opacity--white-15, #ffffff26);
  z-index: 0;
}
.inv-process-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  /* JS sets the inline width on desktop and inline height on mobile
     (picks the right axis at runtime via matchMedia). top + bottom: 0
     stretches the unset dimension to fill the track's full thickness. */
  width: 0;
  background: var(--_primitives---colors--brand-orange, #f56e38);
  transform-origin: left center;
}
.inv-process-step {
  position: relative;
  z-index: 1;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(8px);
}
.inv-process-step .inv-process-when { margin-top: 0.5rem; }
.inv-process-step .inv-process-d { margin-top: -0.125rem; }
.inv-process-step.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.inv-process-num {
  position: relative;
  z-index: 2;
  width: 3rem; height: 3rem;
  border: 2px solid var(--_primitives---opacity--white-25, #ffffff40);
  /* Solid fill that fully masks the orange track running behind these
     boxes (the page bg pattern bled through #0a0a0a). */
  background: #181818;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition:
    border-color 0.45s ease,
    color 0.45s ease,
    background 0.45s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.45s ease;
}
.inv-process-step.is-active .inv-process-num {
  border-color: var(--_primitives---colors--brand-orange, #f56e38);
  color: var(--_primitives---colors--brand-orange, #f56e38);
  /* Solid base + translucent orange overlay so the line behind never
     bleeds through, regardless of state. */
  background-color: #181818;
  background-image: linear-gradient(rgba(245, 110, 56, 0.12), rgba(245, 110, 56, 0.12));
}
/* Idle loop - the currently focused step pulses brighter and scales
   up subtly. The focus cycles 01 → 02 → 03 → 04 → 01 forever. */
.inv-process-step.is-focused .inv-process-num {
  background-color: #181818;
  background-image: linear-gradient(rgba(245, 110, 56, 0.32), rgba(245, 110, 56, 0.32));
  color: #fff;
  transform: scale(1.12);
  box-shadow:
    0 0 0 3px rgba(245,110,56,0.25),
    0 0 22px rgba(245,110,56,0.55);
}
.inv-process-when {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  margin-top: 0.25rem;
}
.inv-process-t {
  margin: 0;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.inv-process-d {
  margin: 0;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 180px;
  min-height: 2.625rem; /* reserve exactly 2 lines so all steps have parity */
  text-wrap: balance;
}


/* ----------------------------------------------------------------
   FAQ SECTION
   Reuses .home_faq_* markup verbatim - gets all site styling +
   the global [data-click="faq"] jQuery handler automatically.
   No custom CSS needed.
----------------------------------------------------------------- */


/* ----------------------------------------------------------------
   RESPONSIVE
----------------------------------------------------------------- */
@media (max-width: 991px) {
  .inv-stats           { grid-template-columns: 1fr; gap: 1rem; }
  .inv-portraits       { grid-template-columns: repeat(3, 1fr); }
  .inv-wall            { grid-template-columns: 1fr; gap: 2rem; }
  .inv-wall-group-lanes { overflow-x: auto; padding-bottom: 0.5rem; }
  .inv-wall-lane       { padding: 0 0.625rem; }
  .inv-wall-card       { width: 7.5rem; }
  .inv-ask-tabs        { grid-template-columns: 1fr; }
  .inv-time-case       { grid-template-columns: 1fr; gap: 1.5rem; }
  .inv-vos             { grid-template-columns: 1fr; gap: 2rem; }
  .inv-loop            { grid-template-columns: 1fr; }
  .inv-long-game       { grid-template-columns: 1fr; gap: 2rem; }
  .inv-long-game-text  { max-width: 100%; }
  /* Drop the forced line break between "$10M ARR" and "- and is doing
     it again…" on mobile so the second clause flows continuously with
     the first instead of stranding on its own line. Desktop keeps the
     <br> for the intended 3-line rhythm. */
  .long-game-break-mobile-hide { display: none; }
  .inv-fit-cards       { grid-template-columns: 1fr; gap: 1rem; }
  .inv-process         { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; }
  .inv-process-track   { display: none; }
}
@media (max-width: 600px) {
  .inv-portraits       { grid-template-columns: repeat(2, 1fr); }
  .inv-wall-card       { width: 6.875rem; padding: 0.5rem; }
  .inv-wall-card-photo { width: 1.625rem; height: 1.625rem; }
  .inv-wall-modal-card { padding: 1.5rem; }
  .inv-wall-modal-row  { grid-template-columns: 1fr; gap: 0.25rem; }
  .inv-ladder-row      { grid-template-columns: 3rem 1fr; }
  .inv-ladder-when     { grid-column: 1 / -1; padding-left: 4rem; }
  .inv-process         { grid-template-columns: 1fr; row-gap: 1.75rem; }
}




/* ============================================================ */
/*  HERO - 2-col grid (text left, founder video tile right)       */
/*  Structural pattern only; UI is the site's dark + Neue Montreal*/
/*  + brand orange, with L-brackets framing the video tile.       */
/* ============================================================ */
.inv-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.inv-hero-text { max-width: 620px; }
.inv-hero-text h1 [fd-svg-underline-text] { white-space: nowrap; }

.inv-hero-vid {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  background: #131313;
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* button reset */
  appearance: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.inv-hero-vid-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease, filter 0.25s ease;
}
.inv-hero-vid:hover .inv-hero-vid-thumb {
  transform: scale(1.02);
  filter: brightness(1.05);
}
/* Dim overlay so the play button + caption read; darker at the
   bottom where the caption sits. Sits above the thumb but below
   the play button / badge / caption (those have z-index: 1+). */
.inv-hero-vid::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.18) 35%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
  z-index: 0;
}
.inv-hero-vid-yt {
  position: absolute;
  top: 0.875rem; right: 0.875rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.3125rem 0.625rem;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}
.inv-hero-vid-yt svg { display: block; flex-shrink: 0; }
.inv-hero-vid-cap {
  position: absolute;
  left: 1.25rem;
  bottom: 1.125rem;
  z-index: 2;
  margin: 0;
  text-align: left;
  color: rgba(238, 238, 238, 0.65);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.005em;
  max-width: 46ch;
}
.inv-hero-vid-play { z-index: 2; }
.inv-hero-vid.is-thumb-2 .inv-hero-vid-cap { display: none; }

/* Thumbnail switcher chevrons (stakeholder preview only). Subtle dark
   circles overlaid on the thumb; clicks are intercepted before they
   reach the parent <button> so the video lightbox doesn't fire. */
.inv-hero-vid-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.inv-hero-vid-arrow:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.inv-hero-vid-arrow:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}
.inv-hero-vid-arrow-prev { left: 0.875rem; }
.inv-hero-vid-arrow-next { right: 0.875rem; }
.inv-hero-vid-play {
  width: 3.75rem; height: 3.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.inv-hero-vid:hover .inv-hero-vid-play {
  transform: scale(1.05);
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.95);
}
.inv-hero-vid-play svg { margin-left: 2px; } /* optical centering */

/* ── Founder-intro video modal (YouTube lightbox) ───────────── */
.inv-hero-modal[hidden] { display: none; }
.inv-hero-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  animation: invHeroModalFade 0.18s ease-out;
}
@keyframes invHeroModalFade { from { opacity: 0; } to { opacity: 1; } }
.inv-hero-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.inv-hero-modal-card {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  animation: invHeroModalRise 0.25s cubic-bezier(.2,.7,.2,1);
}
@keyframes invHeroModalRise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.inv-hero-modal-frame {
  position: absolute; inset: 0;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.inv-hero-modal-frame iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.inv-hero-modal-close {
  position: absolute;
  top: -3rem; right: 0;
  width: 2.25rem; height: 2.25rem;
  appearance: none; background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.inv-hero-modal-close:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
body.inv-hero-modal-open { overflow: hidden; }
@media (max-width: 760px) {
  .inv-hero-modal { padding: 1rem; }
  .inv-hero-modal-close { top: -2.5rem; }
}
/* L-bracket frame around the video tile (emphasis) */
.inv-hero-vid-frame {
  position: absolute;
  inset: -10px;
  pointer-events: none;
}
.inv-hero-vid-frame .focused-icon { position: absolute; width: 18px; height: 18px; }
.inv-hero-vid-frame .focused-icon.top { top: 0; left: 0; }
.inv-hero-vid-frame .focused-icon._2  { top: 0; right: 0; }
.inv-hero-vid-frame .focused-icon._3  { bottom: 0; right: 0; }
.inv-hero-vid-frame .focused-icon._4  { bottom: 0; left: 0; }

@media (max-width: 991px) {
  .inv-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .inv-hero-text { max-width: 100%; }
  .inv-hero-vid { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .inv-hero-vid-caption { font-size: 0.9rem; }
  .inv-hero-vid-play { width: 4.5rem; height: 4.5rem; }
}


/* ============================================================ */
/*  HERO SPACING TIGHTENING - investor page only.                 */
/*  The site default .padding-section-custom.about-hero has a     */
/*  74px bottom padding designed for the about hero's full-video  */
/*  treatment. Investor hero is shorter, so trim the bottom +     */
/*  align the video tile + text columns at the top.               */
/* ============================================================ */
.section_header30 .padding-section-custom.about-hero {
  padding-bottom: 2rem;
}
.inv-hero-grid {
  align-items: start;  /* was center - text + video align to top, gives a tighter, more deliberate shape */
}
.inv-hero-text > .button-group.mt-44 {
  margin-top: 1.75rem;  /* was 2.75rem - tighter description→button gap */
}


/* ============================================================ */
/*  Hero / stats refinements (override the earlier rules above). */
/* ============================================================ */

/* Hero: more vertical breathing room so the content reads as
   "middle-of-viewport" rather than pinned to the nav. */
.section_header30 .padding-section-custom.about-hero {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Re-centre the two columns vertically - the long heading is
   taller than the video tile, so center alignment keeps them
   visually balanced. */
.inv-hero-grid {
  align-items: center;
}

/* Stat cards: tighter internal padding so the numbers + labels
   don't swim in empty space. */
.inv-stat {
  padding: 1.5rem 1.5rem;
}

/* L-brackets: push them further outside the card border so they
   clearly frame the corners (and don't get visually mixed with
   the card's 1px border on the right). Add explicit z-index so
   they always paint above the card chrome. */
.inv-stat .focused-bg {
  inset: -14px;
  z-index: 2;
}


/* ============================================================ */
/*  Stat card refinement (overrides earlier rules):              */
/*    - compact padding, equal on all 4 sides                    */
/*    - content centered both axes                               */
/*    - smaller number size for a tighter card                   */
/*    - brackets explicitly placed -8px outside each corner so   */
/*      placement is symmetric across all 4 corners despite the  */
/*      SVG path asymmetry (V-31 has 1.5px corner-inset, V-32    */
/*      has 2px corner-inset). Site CSS makes .focused-bg a flex */
/*      container; override to block so absolute children behave.*/
/* ============================================================ */
.inv-stat {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.inv-stat-n {
  font-size: 2.5rem;
}
.inv-stat-l {
  margin-top: 0.5rem;
  font-size: 0.95rem;
}
.inv-stat .focused-bg {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 2;
}
.inv-stat .focused-icon {
  position: absolute;
  width: 17px;
  height: 17px;
}
.inv-stat .focused-icon.top { top: -8px; left:  -8px; right: auto; bottom: auto; }
.inv-stat .focused-icon._2  { top: -8px; right: -8px; bottom: auto; left: auto; }
.inv-stat .focused-icon._3  { bottom: -8px; right: -8px; top: auto; left: auto; }
.inv-stat .focused-icon._4  { bottom: -8px; left:  -8px; top: auto; right: auto; }


/* ============================================================ */
/*  User directive: no border-radius on any rectangular element  */
/*  on the investor page. Circles (play icons, pin markers, the  */
/*  process-step number badges) keep their 50% radius.           */
/* ============================================================ */
.inv-stat,
.inv-hero-vid,
.inv-hero-vid-tag,
.inv-hero-vid-meta,
.inv-toggle-wrap,
.inv-toggle-cta-btn,
.inv-wall-group,
.inv-ask-tab,
.inv-time-photo,
.inv-time-kicker,
.inv-ladder-bar,
.inv-vos-screen,
.inv-vos-screen-badge,
.inv-video,
.inv-video-player,
.inv-fit-card,
.inv-process,
.inv-faqs,
#inv-map,
.inv-portrait .about_team_image-wrapper {
  border-radius: 0;
}

/* Leaflet rules originally used !important, so override likewise. */
.leaflet-container,
.leaflet-popup-content-wrapper {
  border-radius: 0 !important;
}


/* ============================================================ */
/*  §01 portrait card body - clean vertical stack:               */
/*     TAG → name → role+company → location                      */
/* ============================================================ */
.inv-portrait-meta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
}
/* LinkedIn icon - bordered chip pinned to the bottom-right corner
   INSIDE the photo wrapper (diagonally opposite the company logo
   at top-right; baseline-aligned with the designation overlay at
   bottom-left). JS re-parents this element from .inv-portrait-meta
   into .about_team_image-wrapper on page load so absolute position
   resolves to the photo. Hover/focus-only - invisible otherwise. */
.inv-portrait-li {
  position: absolute;
  bottom: 1rem; right: 1rem;
  z-index: 3;        /* above the gradient ::after (z=1) and overlay (z=2) */
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.inv-portrait:hover .inv-portrait-li,
.inv-portrait:focus-within .inv-portrait-li {
  opacity: 1;
  pointer-events: auto;
}
.inv-portrait-li:hover {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  border-color: rgba(245, 110, 56, 0.6);
  background: rgba(245, 110, 56, 0.08);
}
.inv-portrait-li svg { display: block; }
.inv-portrait-tag {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--_primitives---colors--brand-orange, #f56e38);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
/* City suffix on the type eyebrow - same caps + tracking, muted
   white so the type (Investor / Operator) stays the primary label. */
.inv-portrait-tag-city {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  margin-left: 0.25rem;
}
/* Credibility one-liner - the line that does the heavy lifting on
   FOMO. Sits between name and role, slightly emphasized but not
   competing with the name itself. */
.inv-portrait-bio {
  margin: 0 0 0.5rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9375rem;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
/* Circular country-flag badge on the portrait photo (bottom-right).
   Replaces the explicit city text line. */
.about_team_image-wrapper { position: relative; }
.inv-portrait-flag {
  position: absolute;
  bottom: 0.625rem;
  right: 0.625rem;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 2px solid #fff;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  z-index: 2;
}
.inv-portrait-meta .team-name {
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin-bottom: 0.3125rem;
}
/* Last-name abbreviation toggle. Default (desktop): full name visible,
   initial hidden. The mobile override flips them in the patch block. */
.team-name-rest { display: inline; }
.team-name-initial { display: none; }
.inv-portrait-meta .team-designation {
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}
/* Company logo + name - logo sits on a small white chip so light-on-
   transparent logos still read against the dark canvas. */
.inv-portrait-co {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  color: #eee;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.inv-portrait-co-logo {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.inv-portrait-loc {
  padding-top: 0.625rem;
  border-top: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}


/* ============================================================ */
/*  §01 Nudge bar - premium frame-and-focus.                     */
/*  Sits after the geo + expertise splits. Uses the brand's      */
/*  signature L-bracket corners + hand-drawn underline so the    */
/*  CTA reads as a deliberate "the call is here" moment.         */
/* ============================================================ */
.inv-nudge {
  position: relative;
  margin-top: 2.5rem;
  padding: 2rem 2.5rem;
  background: var(--_primitives---opacity--white-5, #ffffff0d);
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}
.inv-nudge-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
.inv-nudge-title {
  margin: 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.inv-nudge-sub {
  margin: 0;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 38rem;
}
.inv-nudge-sub em {
  color: #fff;
  font-style: italic;
}
.inv-nudge-btn {
  flex-shrink: 0;
}

/* Orange L-bracket corners - the brand's "frame-and-focus" mark.
   Brackets sit -8px outside each corner so the SVG glyph's tiny
   inner-padding asymmetry doesn't show. */
.inv-nudge .focused-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.inv-nudge .focused-icon {
  position: absolute;
  width: 17px;
  height: 17px;
}
.inv-nudge .focused-icon.top { top: -8px; left:  -8px; right: auto; bottom: auto; }
.inv-nudge .focused-icon._2  { top: -8px; right: -8px; bottom: auto; left: auto; }
.inv-nudge .focused-icon._3  { bottom: -8px; right: -8px; top: auto; left: auto; }
.inv-nudge .focused-icon._4  { bottom: -8px; left:  -8px; top: auto; right: auto; }

@media (max-width: 767px) {
  .inv-nudge {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.75rem;
  }
  .inv-nudge-title { font-size: 1.25rem; }
}


/* ============================================================ */
/*  §02 Time carousel - nav buttons side-by-side                  */
/* ============================================================ */
.inv-time-nav-btns {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

/* ============================================================ */
/*  §02 Time slide - "Investor Involved" strip card               */
/* ============================================================ */
.inv-time-investor {
  margin-top: 1.5rem;
  padding: 0.85rem 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.inv-time-investor-kicker {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.inv-time-investor-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding-right: 2rem; /* reserve room for the hover-revealed LinkedIn icon */
}
/* LinkedIn icon - bordered chip, top-right of the row, hover-only. */
.inv-time-investor-li {
  position: absolute;
  top: 0; right: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 1.625rem; height: 1.625rem;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.inv-time-investor-row:hover .inv-time-investor-li,
.inv-time-investor-row:focus-within .inv-time-investor-li {
  opacity: 1;
  pointer-events: auto;
}
.inv-time-investor-li:hover {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  border-color: rgba(245, 110, 56, 0.6);
  background: rgba(245, 110, 56, 0.08);
}
.inv-time-investor-li svg { display: block; }
.inv-time-investor-img {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
  /* overflow stays VISIBLE - the company-flag badge below is
     intentionally positioned with negative bottom/right offsets so it
     hugs the chip's bottom-right corner. Clipping here would chop the
     badge in half. The portrait IMG inside has its own width/height
     100% + object-fit:cover so it never overflows the chip on its own. */
  overflow: visible;
  /* Dark-grey fill behind the now-transparent portraits so they read
     as a solid chip (not a floating cut-out) against the case-study
     card. Matches the bento card's photo-wrap dark surface. */
  background: #2a2a2a;
  flex: 0 0 auto;
}
.inv-time-investor-img img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Circular flag badge on the time-card photo (bottom-right). Small
   but legible against the 52px portrait. */
.inv-time-investor-flag {
  position: absolute;
  bottom: -0.25rem;
  right: -0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 1px;
  border: 2px solid #131313;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.inv-time-investor-tag {
  display: none; /* not needed on the time-card; "Investor Involved"
                    kicker above already labels the section */
}
.inv-time-investor-name {
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
}
.inv-time-investor-bio {
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.inv-time-investor-role {
  margin-top: 0.1875rem;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.75rem;
  line-height: 1.3;
}
/* Group/stacked avatars (for office-hours slide) */
.inv-time-investor-stack {
  display: flex;
  flex: 0 0 auto;
}
/* (Removed .inv-time-investor-list multi-row styling - the 2-investor
   case study now uses an auto-cycling carousel via .has-cycle, so
   each investor renders at full single-row width.) */
.inv-time-investor-stack img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: cover;
  display: block;
  background: #2a2a2a;
  border: 2px solid #0a0a0a;
}
.inv-time-investor-stack img + img { margin-left: -1rem; }

/* ============================================================ */
/*  §02 Money panel - hierarchy: focus block, live tranche card, */
/*  ladder header, ladder, footnote.                              */
/* ============================================================ */
.inv-money-focus { margin-bottom: 2rem; }
.inv-money-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: start;
}
.inv-money-kicker {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inv-money-x {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 0.25rem;
}
.inv-money-x-suffix {
  font-size: 0.65em;
  font-weight: 500;
  margin-left: 0.02em;
  vertical-align: 0.1em;
}
.inv-money-italic {
  color: #fff;
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.25;
  margin-bottom: 1rem;
}
.inv-money-body {
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 1rem;
  line-height: 1.6;
  max-width: none;
  margin: 0;
  text-wrap: balance;
}
.inv-money-body strong { color: #fff; font-weight: 500; }

/* New focused headline + tagline (replaces verbose paragraph + L-bracket card) */
.inv-money-headline {
  margin: 0 0 0.75rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.inv-money-tagline {
  margin: 0;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 48ch;
}
.inv-money-pip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 0.625rem;
  vertical-align: 1px;
  flex-shrink: 0;
}

/* Live tranche - three-line stacked structure:
   kicker (pulse + LIVE · CURRENT TRANCHE), display headline with
   italic accent, supporting body. Left accent bar carries the
   "active" stamp. */
.inv-money-tranche-strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0 1.75rem;
  background: rgba(245, 110, 56, 0.06);
  border: 1px solid rgba(245, 110, 56, 0.3);
}
.inv-money-strip-content {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1 1 auto;
  min-width: 0;
}
.inv-money-strip-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.5rem 0.9375rem;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.inv-money-strip-cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32);
}
.inv-money-strip-cta svg {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.inv-money-strip-cta:hover svg { transform: translate(2px, -2px); }
@media (max-width: 720px) {
  .inv-money-tranche-strip { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
.inv-money-strip-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.inv-money-strip-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--_primitives---colors--brand-orange, #f56e38);
  box-shadow: 0 0 0 0 rgba(245, 110, 56, 0.45);
  animation: invDotPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.inv-money-strip-h {
  margin: 0;
  font-family: 'Geist', var(--_typography---font-styles--heading);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}
.inv-money-strip-h em {
  font-style: italic;
  color: var(--_primitives---colors--brand-orange, #f56e38);
}
.inv-money-strip-body {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.inv-money-strip-body strong {
  color: #fff;
  font-weight: 600;
}
@media (max-width: 760px) {
  .inv-money-tranche-strip { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
}
.inv-money-pip .dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--_primitives---colors--brand-orange, #f56e38);
  box-shadow: 0 0 0 0 rgba(245, 110, 56, 0.45);
  animation: invDotPulse 1.6s ease-in-out infinite;
}

.inv-money-live {
  position: relative;
  margin-bottom: 2.5rem;
  padding: 1.75rem 2rem 1.85rem;
  background: rgba(15, 15, 15, 0.85);
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
}
.inv-money-live-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inv-money-live-kicker .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--_primitives---colors--brand-orange, #f56e38);
  box-shadow: 0 0 0 4px rgba(245, 110, 56, 0.18);
  animation: invDotPulse 1.6s ease-in-out infinite;
}
@keyframes invDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 110, 56, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(245, 110, 56, 0); }
}
.inv-money-live-h {
  margin: 0.6rem 0 0.65rem;
  color: #fff;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.2;
}
.inv-money-live-h em {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-style: italic;
}
.inv-money-live-sub {
  margin: 0;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 1rem;
  line-height: 1.5;
}
.inv-money-live-sub strong { color: #fff; font-weight: 500; }
/* L-bracket framing on the live card */
.inv-money-live .focused-bg {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 2;
}
.inv-money-live .focused-icon {
  position: absolute;
  width: 17px;
  height: 17px;
}
.inv-money-live .focused-icon.top { top: -8px; left:  -8px; right: auto; bottom: auto; }
.inv-money-live .focused-icon._2  { top: -8px; right: -8px; bottom: auto; left: auto; }
.inv-money-live .focused-icon._3  { bottom: -8px; right: -8px; top: auto; left: auto; }
.inv-money-live .focused-icon._4  { bottom: -8px; left:  -8px; top: auto; right: auto; }

.inv-ladder-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.65rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inv-money-foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--_primitives---opacity--white-15, #ffffff26);
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.55;
  max-width: 760px;
}

@media (max-width: 991px) {
  .inv-money-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .inv-money-x { font-size: 4rem; }
  .inv-money-live-h { font-size: 1.5rem; }
  .inv-money-live { padding: 1.25rem 1.5rem; }
}


/* ============================================================ */
/*  Money panel - orange discipline.                              */
/*  Goal: orange only on what's actually the focus (big 3×,       */
/*  live tranche card, active ladder row). Everything else        */
/*  mutes to white-50 / subtle grey so orange feels earned.       */
/* ============================================================ */

/* "Priority Return" kicker above big 3× - muted, not orange.
   The big 3× itself is the orange anchor; the kicker is just a
   label and doesn't need to compete for attention. */
.inv-money-kicker {
  color: var(--_primitives---opacity--white-50, #eeeeee80);
}

/* Ladder rows - fully subordinate to the live-tranche strip above.
   All four tiers read the same (muted grey on labels, months, and
   fills); the strip carries the entire FOMO signal. */
.inv-ladder-row .inv-ladder-x { color: rgba(255, 255, 255, 0.5); }

.inv-ladder-fill {
  background: rgba(255, 255, 255, 0.1);
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-weight: 400;
}


/* ============================================================ */
/*  §03 Venture OS - 2-col: numbered heading+sub rows · clean     */
/*  screenshot · subtle gray border · underlined-text CTA         */
/* ============================================================ */
.inv-vos {
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: 4rem;
}
.inv-vos-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 460px;
}

.inv-vos-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.5rem;
  align-items: start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
}
.inv-vos-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.inv-vos-row-n {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  /* Cap-aligned with heading: tight line-height + a small negative
     top margin to absorb the bigger font's internal leading at the
     top of its line box. */
  line-height: 1;
  margin-top: -2px;
}
.inv-vos-row-body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.inv-vos-row-h {
  margin: 0;
  color: #fff;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
}
.inv-vos-row-d {
  margin: 0;
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Right column: screenshot + text-link CTA stacked */
.inv-vos-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

/* Screenshot card - subtle gray border, no badge, no corners */
.inv-vos-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #131313;
  overflow: hidden;
  border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
}
.inv-vos-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Simple text+arrow link, underlined */
.inv-vos-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--_primitives---opacity--white-50, #eeeeee80);
  text-underline-offset: 0.3em;
  cursor: pointer;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.inv-vos-link:hover {
  color: var(--_primitives---colors--brand-orange, #f56e38);
  text-decoration-color: var(--_primitives---colors--brand-orange, #f56e38);
}
.inv-vos-link-icon {
  display: block;
  flex: 0 0 auto;
}

@media (max-width: 991px) {
  .inv-vos { grid-template-columns: 1fr; gap: 2.5rem; }
  .inv-vos-left { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────
   Roster CTA - avatar stack + "+33 more" chip that catches the eye
   right after the 5 featured portrait cards and points down to the
   geo + expertise toggle. Reads as a clear call to keep exploring.
   ───────────────────────────────────────────────────────────── */
.inv-roster-stack {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 1.125rem 0.625rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.inv-roster-stack:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.inv-roster-stack-avatars {
  display: inline-flex;
  align-items: center;
}
.inv-roster-stack-avatars img {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: #1a1a1a;
  border: 2px solid #0a0a0a;
  display: block;
}
.inv-roster-stack-avatars img + img { margin-left: -0.875rem; }
.inv-roster-stack-text {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.inv-roster-stack-arrow {
  color: var(--_primitives---opacity--white-50, #eeeeee80);
  flex-shrink: 0;
  animation: invRosterArrowBob 1.8s ease-in-out infinite;
}
.inv-roster-stack:hover .inv-roster-stack-arrow { color: #fff; }
@keyframes invRosterArrowBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE PATCH BLOCK
   Consolidated overrides for ≤ 767px viewports. Desktop is locked -
   nothing here should leak to desktop layout. Grouped by pass.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Pass 1 fixes
     ─────────── */

  /* Bug: .text-size-medium has a hardcoded width:506px in the shared
     stylesheet. Forces a horizontal overflow on every mobile section
     that uses it (intro paragraph in Strategic Investors block).
     Cap to the parent's width so it wraps cleanly. */
  .text-size-medium { width: auto; max-width: 100%; }

  /* Geo map was 580px tall with a 2:1 SVG inside - half of that was
     empty black space on a 343-wide phone. Switch to height:auto and
     give the map its own compact height; the panel stacks below. */
  .inv-geo { height: auto; }
  .inv-geo-map-wrap { height: 380px; flex: none; }
  .inv-geo-panel { transition: none; }
  .inv-geo-panel.is-open {
    flex: none;
    height: auto;
    max-height: 60vh;
    border-left: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
    border-top: none;
  }
  /* Panel's inner list scrolls within the panel - prevents the page
     from getting pushed when 17 investors are listed. */
  .inv-geo-panel-list {
    max-height: calc(60vh - 4rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Asks tabs were flex-row with a 56px gap - at 375px that left each
     tab at ~147px and the labels cramped. Stack vertically with a
     tight gap; active orange underline still reads. */
  .inv-ask-tabs {
    flex-direction: column;
    gap: 0;
  }
  .inv-ask-tab {
    padding: 1rem 0;
    border-bottom: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
    margin-bottom: 0;
  }
  .inv-ask-tab:last-child { border-bottom: none; }
  /* Active-tab underline was sized to bottom of a row of tabs; on a
     stacked layout it should be a left-edge brand bar instead. */
  .inv-ask-tab[aria-pressed="true"]::after {
    inset: 0 auto 0 -16px;
    width: 3px;
    height: auto;
  }

  /* Roster CTA padding tightened so the "+33 more" chip doesn't run
     to the very edge of the viewport. */
  .inv-roster-stack { padding: 0.75rem 0.875rem; }

  /* Money panel: the headline used white-space:nowrap which forced
     the grid column to expand to ~413px and overflow on a 343-wide
     phone. Allow wrap; clamp body width to the parent. */
  .inv-money-headline {
    white-space: normal;
    font-size: 1.3rem;
  }
  .inv-money-body { max-width: 100%; }
  .inv-money-grid > * { min-width: 0; }

  /* Tranche strip - tighten side padding so it doesn't run hard
     against the viewport edge on small screens, and let the CTA
     drop below the headline (already does because flex-column kicks
     in at 720px). */
  .inv-money-tranche-strip { padding: 1.25rem 1.125rem; }

  /* Money kicker / big 3× - center-align the focus block so the
     stacked layout reads as a single anchor, not a top-left tag. */
  .inv-money-big { text-align: left; }

  /* Navbar background: the sticky navbar is transparent and lets
     content scroll behind it, which on mobile makes the logo + menu
     unreadable. Add a translucent dark fill with a blur so the bar
     stays legible without changing the desktop chrome. Also tighten
     the top gap so the navbar sits closer to the screen edge. */
  .navbar {
    background-color: rgba(10, 10, 10, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.375rem;
    padding: 0 5%;
  }

  /* Pass 2 fixes
     ─────────── */

  /* Expertise wall - 3 groups (Founders/Investors/Operators) sat
     side-by-side at 211+211+676=1098px wide, blowing past the 343
     viewport with no scroll affordance. Stack the groups vertically
     instead; lanes inside the Operators group horizontal-scroll. */
  .inv-wall {
    flex-direction: column;
    height: auto;
    gap: 1.25rem;
  }
  .inv-wall2-group {
    width: 100%;
    flex: 0 0 auto;
  }
  .inv-wall2-group-cols {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 0.5rem;
    /* Hide the scrollbar visually but keep the scroll. */
    scrollbar-width: thin;
  }
  .inv-wall2-group-cols::-webkit-scrollbar { height: 4px; }
  .inv-wall2-group-cols::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
  }
  .inv-wall2-lane {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Expertise modal tabs (Founders / Investors / Operators) - the
     three pills don't fit on 375px, the OPERATORS chip got cut off.
     Horizontal scroll keeps everything reachable on a tap-flick. */
  .inv-wall-modal-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .inv-wall-modal-tabs::-webkit-scrollbar { display: none; }
  .inv-wall-modal-tab {
    flex-shrink: 0;
    margin-right: 1rem;
    font-size: 0.7rem;
  }
  .inv-wall-modal-tab:last-child { margin-right: 0; }

  /* Expertise modal cards (mcard) - the horizontal photo+text layout
     gets cramped on 375. Tighten side padding so the bio gets more
     room to breathe. */
  .inv-wall-modal-mcard { padding: 0.875rem; gap: 0.875rem; }
  .inv-wall-modal-mcard-photo,
  .inv-wall-modal-mcard-photo-wrap { width: 64px; height: 64px; }
  .inv-wall-modal-mcard-flag { width: 1.125rem; height: 1.125rem; }

  /* Geo filter pills - at mobile the ALL/FOUNDERS/INVESTORS/OPERATORS
     row wraps to 2 lines because flex-wrap is on. Single-line with
     horizontal scroll reads tighter and stays predictable. */
  .inv-geo-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .inv-geo-filter::-webkit-scrollbar { display: none; }
  .inv-geo-filter > * { flex-shrink: 0; }

  /* Toggle tabs ("By Geography / By Expertise") - give them a clearer
     touch target on small screens. */
  .inv-toggle-tab { padding: 0.875rem 0 0.625rem; font-size: 0.875rem; }

  /* Pass 3 fixes
     ─────────── */

  /* Section padding is 4rem top/bottom even at mobile, which left
     long awkward gaps between blocks. 2.5rem reads tighter without
     sticking sections to each other. */
  .padding-section-large { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .padding-section-large.hero { padding-top: 3.5rem; }
  .padding-section-small { padding-top: 1.25rem; padding-bottom: 1.25rem; }

  /* spacer-56 between section header and content was 56px even on
     mobile - drop to 32px so headings sit closer to their content. */
  .spacer-56 { padding-top: 2rem; }

  /* Stats cards: tighter internal padding on phones so the labels
     don't float in extra space. */
  .inv-stat { padding: 1.125rem 1rem; }
  .inv-stat-n { font-size: 2.25rem; }
  .inv-stat-l { font-size: 0.875rem; line-height: 1.4; }

  /* Long-game-fit cards: tighter padding on mobile for the same
     reason - saves vertical space without losing the boxed feel. */
  .inv-fit-card { padding: 1.25rem; }
  .inv-fit-list li { font-size: 0.9375rem; }

  /* FAQ questions: slightly tighter padding for mobile so the list
     reads as a compact stack, not a tall page of accordions. */
  .home_faq_question { padding: 0.875rem 1rem; font-size: 1.0625rem; }

  /* Process timeline - vertical timeline that mirrors the desktop's
     horizontal flow. Number box on the left, content (DAY range,
     title, description) on the right. A vertical orange track threads
     through the four number boxes; the same JS-driven loop animation
     re-aims --inv-fill from width (horizontal) to height (vertical),
     no JS changes needed beyond writing to the CSS variable. */
  .inv-process {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
    position: relative;
  }
  /* Override the @media (max-width: 991px) rule that hid the track. */
  .inv-process-track {
    display: block;
    top: 1.5rem;           /* vertical center of the first 3rem num box */
    bottom: 1.5rem;        /* vertical center of the last 3rem num box */
    left: 1.4375rem;       /* x-center of the leftmost 3rem num box (1.5rem - 1px to center the 2px line) */
    right: auto;
    width: 2px;
    height: auto;
  }
  .inv-process-track-fill {
    /* Reset desktop's horizontal animation: pin to top and let the
       JS-set inline height drive the vertical fill. 100% width fills
       the 2px-wide vertical track; !important blocks the inline width
       JS would set on desktop (it sets either width OR height based
       on viewport, but a stale value could linger after a resize). */
    width: 100% !important;
    height: 0;
    top: 0;
    bottom: auto;
  }

  /* Each step becomes a 2-col grid: num on the left, content on the
     right. The num box spans all three text rows; DAY eyebrow's
     cap-line is top-aligned with the num box top - `align-self: start`
     on the eyebrow plus line-height: 1 keeps the cap on the edge. */
  .inv-process-step {
    display: grid;
    grid-template-columns: 3rem 1fr;
    grid-template-areas:
      "num when"
      "num title"
      "num desc";
    /* gap is `<row> <column>` - must come after the desktop's flex
       `gap: 0.5rem` to win. Generous column gap creates breathing
       room between the number column and the meta column. */
    gap: 0.25rem 1.75rem;
    align-items: start;
    text-align: left;
    padding: 0;
  }
  .inv-process-step .inv-process-num  { grid-area: num; align-self: start; }
  .inv-process-step .inv-process-when {
    grid-area: when;
    margin-top: 0;       /* eyebrow cap-line sits at the top of the num box */
    line-height: 1;      /* zero the leading so the cap is flush with grid row top */
    align-self: start;
  }
  .inv-process-step .inv-process-t    { grid-area: title; margin-top: 0.25rem; }
  .inv-process-step .inv-process-d    {
    grid-area: desc;
    margin-top: 0.25rem;
    max-width: none;
    min-height: 0; /* drop the 2-line reserve from desktop - not needed on mobile stack */
  }

  /* Pass 4 fixes
     ─────────── */

  /* Scroll-padding so scroll-into-view (used by the map's auto-pan,
     the modal's focus card, etc.) doesn't push content under the
     sticky navbar. */
  html { scroll-padding-top: 80px; }
}

/* Touch devices have no real :hover - make the LinkedIn icons on
   investor cards permanently visible there, since otherwise a user
   on a phone literally can't reach them. Mirror the hover state for
   each variant of the chip. */
@media (hover: none) {
  .inv-portrait-li,
  .inv-geo-row-li,
  .inv-wall-modal-mcard-li,
  .inv-time-investor-li {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE PATCH BLOCK - Pass 6 (designer feedback)
   - Star cards: tighten gap so each card is wider; pull the LinkedIn
     chip to the top of the photo so it never overlaps the eyebrow.
   - "+33 more" CTA: stack avatars + text so they don't collide.
   - Geo panel: slide up as a 65vh bottom sheet with a backdrop.
   - Expertise modal: anchor to bottom as a 75vh bottom sheet.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* -- Star portrait cards ------------------------------- */
  /* Tighten the column gap (was 1.25rem from the base rule) so each
     card gets a bit more width, and pull the LinkedIn chip up over
     the photo's top-right (anchored to the .inv-portrait outer
     container) so it never collides with the FOUNDER · INVESTOR
     eyebrow line. */
  .inv-portraits { gap: 0.625rem; }
  .inv-portrait-meta {
    position: static; /* let .inv-portrait-li anchor to the outer card */
    padding-top: 0.875rem;
  }

  /* Abbreviate the last name on mobile so the card stays on one line:
     "Karthik Ramamoorthy" → "Karthik R." Last name remains in the DOM
     for screen readers; the initial is purely visual. */
  .team-name-rest { display: none; }
  .team-name-initial { display: inline; }
  .inv-portrait-li {
    position: absolute;
    /* Bottom-right corner of the photo wrapper, baseline-aligned with
       the designation overlay at bottom-left. JS re-parents this chip
       into .about_team_image-wrapper, so absolute resolves to the photo
       on mobile too. */
    top: auto;
    bottom: 1rem;
    right: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    z-index: 3; /* above gradient ::after (z=1) and name/role overlay (z=2) */
    opacity: 1;
    pointer-events: auto;
  }
  /* Same for the other LinkedIn chip variants on mobile width. */
  .inv-geo-row-li,
  .inv-wall-modal-mcard-li,
  .inv-time-investor-li {
    opacity: 1;
    pointer-events: auto;
  }

  /* -- "+33 more on the cap table" CTA ----------------- */
  /* Stack: avatars on top, text below, arrow on the right.
     Avoids the avatar/text overlap on narrow screens. */
  .inv-roster-stack {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "avatars arrow"
      "text    arrow";
    column-gap: 0.875rem;
    row-gap: 0.5rem;
    align-items: center;
    padding: 0.875rem 1rem;
  }
  .inv-roster-stack-avatars { grid-area: avatars; }
  .inv-roster-stack-text    { grid-area: text; }
  .inv-roster-stack-arrow   { grid-area: arrow; align-self: center; }

  /* -- Geo panel as full-width bottom sheet ------------ */
  /* True modal: full width, 60vh height, slides up from below.
     Sits above the backdrop which dims the entire page so the user
     focuses on the sheet only. Edges flush to the viewport - no
     gap from left/right/bottom. */
  .inv-geo-panel {
    position: fixed;
    left: 0; right: 0;
    /* Anchor right at the navbar's bottom edge - no visible gap
       between the sticky navbar and the sheet's header. Bottom: 0
       extends to the viewport edge. */
    top: var(--inv-nav-h) !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-width: 0;
    z-index: 1100;
    background: #0d0d0d;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px 14px 0 0;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    opacity: 1; /* override base 0 */
    overflow: hidden; /* keep dropdown menu inside the sheet */
    display: flex;
    flex-direction: column;
  }
  .inv-geo-panel.is-open { transform: translateY(0); }
  /* Backdrop should cover only the area BELOW the navbar so the
     navbar stays readable (not dimmed) while the sheet is open. */
  .inv-geo-panel-backdrop { top: var(--inv-nav-h); }
  /* Heading row: INVESTORS eyebrow + "By geography" title + X.
     Mirrors the expertise modal so both bottom sheets read the same. */
  .inv-geo-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.5rem 1.25rem 0.75rem;
    flex: 0 0 auto;
    background: #0d0d0d;
  }
  .inv-geo-panel-eyebrow {
    color: var(--_primitives---colors--brand-orange, #f56e38);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.375rem;
  }
  .inv-geo-panel-title-main {
    margin: 0;
    color: #fff;
    font-family: 'Geist', var(--_typography---font-styles--heading);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .inv-geo-panel-close-header {
    flex-shrink: 0;
  }
  .inv-geo-panel-head {
    flex: 0 0 auto;
    background: #0d0d0d;
    padding: 0.5rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* The X in the original head row is replaced by the one in the
     new header above; hide it on mobile. */
  .inv-geo-panel-head .inv-geo-panel-close:not(.inv-geo-panel-close-header) {
    display: none;
  }
  .inv-geo-panel-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .inv-geo-panel-list[hidden] { display: none; }

  /* Dropdown menu fills the sheet body (replaces the list while
     picking). NOT a popover - that approach bleeds through. */
  .inv-geo-panel-city-menu {
    position: static;
    flex: 1 1 auto;
    margin: 0;
    padding: 0.5rem 0;
    background: #0d0d0d;
    border: none;
    border-radius: 0;
    max-height: none;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .inv-geo-panel-city-menu-item {
    padding: 1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1rem;
  }
  .inv-geo-panel-city-menu-item:last-child { border-bottom: none; }
  /* A small drag-handle sticker at the top of the sheet, like a
     native iOS/Android sheet. */
  .inv-geo-panel::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.5rem; left: 50%;
    transform: translateX(-50%);
    width: 2.25rem;
    height: 0.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    pointer-events: none;
  }
  .inv-geo-panel-head { padding-top: 1.25rem; }

  /* Backdrop overlay - appears when panel is open; tap to dismiss.
     Stronger dim so the page behind reads as inactive. */
  .inv-geo-panel-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .inv-geo-panel-backdrop.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  /* Lock the body so the page can't scroll under the sheet - mobile
     only (desktop's geo panel is an inline sidebar, not an overlay,
     so the page must remain scrollable while it's open). */
  body.inv-geo-panel-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  /* City dropdown anchored under the sheet's title button - fits
     the full sheet width with comfortable touch rows. */
  .inv-geo-panel-city-menu {
    left: 0.625rem;
    right: 0.625rem;
    max-height: 50vh;
  }
  .inv-geo-panel-city-menu-item { padding: 0.875rem 1rem; }
  /* Keep the map fully visible; the panel floats above it. */
  .inv-geo.has-panel .inv-geo-map-wrap { border-right: 1px solid var(--_primitives---opacity--white-15, #ffffff26); }

  /* -- Expertise modal as bottom sheet ---------------- */
  /* Same modal pattern as the geo bottom sheet: full-bleed at the
     viewport's bottom edge, opaque backdrop dimming the page, drag
     handle on top, X at the top right. Cards reach the sheet's
     edges (no side gutter inside the body). The tabs row stays
     sticky under the head so it never scrolls away. */
  .inv-wall-modal {
    padding: 0;
    /* Anchor the modal directly below the navbar so there's no gap.
       The wrapper covers from navbar-bottom to viewport-bottom; the
       card fills it. */
    top: var(--inv-nav-h);
    bottom: 0;
    inset: var(--inv-nav-h) 0 0 0;
    align-items: stretch;
    justify-content: stretch;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .inv-wall-modal-backdrop {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .inv-wall-modal-card {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    align-self: stretch;
    border-radius: 14px 14px 0 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0;
  }
  .inv-wall-modal-card::before {
    content: "";
    display: block;
    position: absolute;
    top: 0.5rem; left: 50%;
    transform: translateX(-50%);
    width: 2.25rem;
    height: 0.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    pointer-events: none;
    z-index: 5;
  }
  .inv-wall-modal-head {
    padding: 1.5rem 1.25rem 0.75rem;
  }
  .inv-wall-modal-tabs {
    padding: 0 1.25rem;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 4;
    background: #0d0d0d;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .inv-wall-modal-body { padding: 1rem 1.25rem 1.5rem; }
  .inv-wall-modal-cards { grid-template-columns: 1fr; gap: 0.625rem; }

  /* Sticky lane label inside the modal: bump z-index so cards
     scrolling past don't peek through the band's translucent gap. */
  .inv-wall-modal-lane-label {
    background: #0d0d0d;
    z-index: 3;
  }

  /* -- Asks as accordion ------------------------------- */
  /* JS moves each panel right after its tab; the inactive panel
     collapses (display: none from the base CSS). Container border
     removed so each tab+panel pair reads cleanly. */
  .inv-ask-tabs { border-bottom: none; }
  .inv-ask-tabs .inv-ask-panel {
    width: 100%;
    padding: 0.875rem 0 1.5rem;
    border-bottom: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
  }
  .inv-ask-tabs .inv-ask-panel:last-child { border-bottom: none; }

  /* Chevron affordance - a small caret on the right edge of each tab
     that rotates 180° when the panel is open. Inactive tabs point
     down (expand); active tabs point up (collapse). Pure CSS so the
     existing tab markup stays untouched. */
  .inv-ask-tab {
    padding-right: 2.5rem;
  }
  .inv-ask-tab::before {
    content: "";
    position: absolute;
    right: 0.25rem;
    top: 1.625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
    opacity: 0.7;
  }
  .inv-ask-tab[aria-pressed="true"]::before {
    transform: rotate(-135deg);
    border-color: var(--_primitives---colors--brand-orange, #f56e38);
    opacity: 1;
  }

  /* -- Time slide: investor card pinned to bottom ------ */
  /* Swiper uses uniform slide heights (tallest slide sets the
     height). Make .inv-time-case fill the slide height, then push
     the investor-involved block to the bottom of the text column
     so short slides get visible breathing room above the card. */
  #inv-time-swiper .swiper-slide { height: auto; }
  .inv-time-case {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .inv-time-case > *:not(.inv-time-photo) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .inv-time-case .inv-time-investor {
    margin-top: auto;
    padding-top: 1.5rem;
  }

  /* -- Priority ladder: 3-col layout on mobile -------- */
  /* Earlier rule dropped the deadline ("May" etc.) to a 2nd row
     with a 4rem indent - that left the bar floating with empty
     space and the months stranded below. Keep the 3-col layout
     so [X · bar · month] reads on one row, with a tighter row gap. */
  .inv-ladder { gap: 0.5rem; }
  .inv-ladder-row {
    grid-template-columns: 2.25rem 1fr auto;
    column-gap: 0.625rem;
  }
  .inv-ladder-when {
    grid-column: auto;
    padding-left: 0;
    font-size: 0.875rem;
  }

  /* -- Live tranche strip: more breathing room above CTA --- */
  .inv-money-tranche-strip {
    gap: 1.5rem;
    padding: 1.5rem 1.25rem;
  }
  .inv-money-strip-cta { margin-top: 0.25rem; }

  /* Make the modal backdrop opaque enough on mobile that the page
     behind doesn't bleed through when scrolling the sheet. */
  .inv-wall-modal-backdrop {
    background: rgba(0, 0, 0, 0.92);
  }

  /* ─── Mobile card layout (geo rows + expertise mcards) ─────────
     Both modals share the same card shape on mobile:
       ┌────────────────────────────────────────┐
       │ [photo]  Name           [LinkedIn]    │
       │          Role, Company                 │
       │          TYPE / LOCATION (caps)        │
       │ ────────────────────────────────────── │
       │ One-liner bio (spans full width)       │
       └────────────────────────────────────────┘
     (Variant toggle was removed in Phase 2 cleanup - only B remains.) */

  /* ── Expertise mcard: force variant-B grid layout ───────────── */
  .inv-wall-modal-card .inv-wall-modal-mcard {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "photo body"
      "bio   bio";
    align-items: start;
    column-gap: 0.875rem;
    row-gap: 0.625rem;
    padding: 1rem;
  }
  .inv-wall-modal-card .inv-wall-modal-mcard-left { grid-area: photo; }
  .inv-wall-modal-card .inv-wall-modal-mcard-body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding-right: 2.25rem;
    min-width: 0;
  }
  .inv-wall-modal-card .inv-wall-modal-mcard-bio-inline { display: none; }
  .inv-wall-modal-card .inv-wall-modal-mcard-bio-bottom {
    display: block;
    grid-area: bio;
    margin: 0;
  }
  .inv-wall-modal-card .inv-wall-modal-mcard-loc {
    display: block;
    text-align: left;
  }
  /* Role: render naturally as "Title at Company" on one continuous
     line (wraps only when the text doesn't fit). Both pieces share
     the same color and weight - no distinction. */
  .inv-wall-modal-card .inv-wall-modal-mcard-role,
  .inv-wall-modal-card .inv-wall-modal-mcard-role-title,
  .inv-wall-modal-card .inv-wall-modal-mcard-role-sep,
  .inv-wall-modal-card .inv-wall-modal-mcard-role-co {
    display: inline;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 400;
    text-align: left;
  }
  .inv-wall-modal-card .inv-wall-modal-mcard-name {
    text-align: left;
  }
  .inv-wall-modal-card .inv-wall-modal-mcard-photo-wrap,
  .inv-wall-modal-card .inv-wall-modal-mcard-photo {
    width: 64px; height: 64px;
  }

  /* ── Geo bottom-sheet row ─────────────────────────────────────
     Base CSS already gives the variant-B-style layout (name → role →
     type eyebrow, bio spanning below). Mobile only tightens padding
     and pins LinkedIn into the grid (it's absolute on desktop). */
  .inv-geo-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "photo meta li"
      "bio   bio  bio";
    padding: 0.875rem 1rem;
  }
  .inv-geo-row-li {
    position: static;
    grid-area: li;
    top: auto;
    right: auto;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   STAR PORTRAITS - variant B is the only variant in use. Photo is
   the hero; name + role sit as a gradient-veiled overlay at the
   bottom of the photo. Logo chip pinned to the top-right. Below
   the photo: type eyebrow + bio. The A/B toggle UI was removed
   along with all variant-A styles in Phase 2 cleanup.
   ═══════════════════════════════════════════════════════════════════ */

/* Overlay element is injected by JS into every portrait card. */
.inv-portraits[data-portrait-variant="b"] .inv-portrait {
  padding: 0;
}
.inv-portraits[data-portrait-variant="b"] .inv-portrait .about_team_image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5; /* a touch taller than square */
}
.inv-portraits[data-portrait-variant="b"] .inv-portrait .about_team_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inv-portraits[data-portrait-variant="b"] .inv-portrait-flag {
  bottom: auto;
  top: 0.625rem;
  right: 0.625rem;
}
/* Variant B: meta only holds the type eyebrow + bio; the LinkedIn
   chip is moved into the photo wrapper by JS, so no bottom padding
   is needed here. */
.inv-portraits[data-portrait-variant="b"] .inv-portrait-meta {
  padding: 0;
}
.inv-portraits[data-portrait-variant="b"] .inv-portrait-tag {
  margin-top: 0.875rem;
  margin-bottom: 0.5rem;
}
.inv-portraits[data-portrait-variant="b"] .inv-portrait-meta .team-name {
  display: none;
}
.inv-portraits[data-portrait-variant="b"] .inv-portrait-meta .team-designation {
  display: none;
}
/* Inject the name + role as an absolutely-positioned block on top
   of the photo via the existing markup - we reuse the .team-name
   and .team-designation values by cloning them with CSS-only
   ::before/::after isn't possible, so we use the actual elements
   shown via an alternate selector. */
.inv-portraits[data-portrait-variant="b"] .inv-portrait .about_team_image-wrapper::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 55%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
  z-index: 1;
}
.inv-portraits[data-portrait-variant="b"] .inv-portrait-overlay {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 2;
  pointer-events: none;
}
.inv-portraits[data-portrait-variant="b"] .inv-portrait-overlay-name {
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-bottom: 0.25rem;
}
.inv-portraits[data-portrait-variant="b"] .inv-portrait-overlay-role {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8125rem;
  line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════════
   EXPERTISE MODAL - variant B is the only variant in use. The A/B
   toggle UI and variant-A styles were removed in Phase 2 cleanup.
   ═══════════════════════════════════════════════════════════════════ */

/* Role spans render inline as "Title at Company". */
.inv-wall-modal-mcard-role-title,
.inv-wall-modal-mcard-role-sep,
.inv-wall-modal-mcard-role-co {
  display: inline;
}

/* Location element - variant A doesn't show it. Brand-orange to
   mirror the type eyebrow on the geo card (same visual role: a
   small uppercase tag below the role, in the brand colour). */
.inv-wall-modal-mcard-loc {
  display: none;
  color: var(--_primitives---colors--brand-orange, #f56e38);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.3125rem;
}

/* Two bios are rendered per card. Variant A shows the inline one
   (between name and role inside body); variant B shows the bottom
   one (spanning the full card width below the photo). */
.inv-wall-modal-mcard-bio-bottom { display: none; }

/* ─── Variant B ────────────────────────────────────────────────────
   Top row: photo (compact) on the left, name + "Company, Designation"
   + LOCATION on the right. Bottom row: one-liner bio spans the full
   card width (under both the photo and the meta column).
   No type label - the lane heading already categorizes it. */
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "photo body"
    "bio   bio";
  align-items: start;
  column-gap: 1rem;
  row-gap: 0.75rem;
}
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard-left {
  grid-area: photo;
}
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  padding-right: 2.25rem; /* keep clear of the LinkedIn chip */
}
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard-bio-inline {
  display: none;
}
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard-bio-bottom {
  display: block;
  grid-area: bio;
  margin: 0;
}
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard-loc {
  display: block;
}

/* Role line in variant B renders the same as variant A - natural
   inline "Title at Company". Same color and weight for both parts. */
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard-role,
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard-role-title,
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard-role-sep,
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard-role-co {
  display: inline;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
}

/* Slightly smaller photo on variant B since we want the row to fit
   the meta + breathing room. */
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard-photo-wrap,
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard-photo {
  width: 72px;
  height: 72px;
}
.inv-wall-modal-card[data-mcard-variant="b"] .inv-wall-modal-mcard-flag {
  width: 1.5rem;
  height: 1.5rem;
}


/* Mobile (max-width: 767px) overrides for monthly investor carousel
   buttons and Venture OS column order.

   Carousel buttons - the 2.5rem (40px) target was just below the
   recommended 44px tap target; bump to 3.25rem (52px) so the arrows
   are comfortably tappable.

   Venture OS - on desktop the 4 numbered rows sit left of the GIF;
   on mobile we want the order: heading → GIF → rows, so the GIF
   provides immediate visual context before the bullets. Re-grid
   into a single column with explicit areas. */
@media (max-width: 767px) {
  .inv-loop-btn {
    width: 3.25rem;
    height: 3.25rem;
  }
  .inv-loop-btn svg {
    width: 20px;
    height: 20px;
  }
  .inv-loop-nav { gap: 1rem; margin-top: 1.25rem; }

  .inv-vos {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "right"
      "left";
    gap: 1.5rem;
  }
  .inv-vos-left  { grid-area: left; }
  .inv-vos-right { grid-area: right; }
}


/* ─────────────────────────────────────────────────────────────────
   Loop section (Monthly investor updates) - staggered reveal so the
   heading lands before the carousel + nav buttons. Webflow IX3's
   fd-fade-reveal triggers all siblings together; this custom path
   uses our own IntersectionObserver-driven class swap with explicit
   delays per element. Initial state mirrors fd-fade-reveal (opacity
   0 + translateY 40px) so the visual entrance is consistent.
   ───────────────────────────────────────────────────────────── */
[data-loop-stagger] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-loop-stagger].is-revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ─────────────────────────────────────────────────────────────────
   §02 Time-slide auto-cycling investor carousel.
   Used by the 2-investor case study (Daruru + Reddy). Instead of
   stacking two cramped half-width rows side-by-side, both rows live
   inside .inv-time-investor.has-cycle and we show one at a time
   with an auto-cycle (2s) + dot pagination. Single-investor cards
   keep their normal layout - no .has-cycle, no dots. Applies at
   ALL viewports (was previously mobile-only).
   ───────────────────────────────────────────────────────────── */
.inv-time-investor.has-cycle .inv-time-investor-row { display: none; }
.inv-time-investor.has-cycle .inv-time-investor-row.is-active {
  display: flex;
  animation: invTimeInvFade 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes invTimeInvFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.inv-time-investor-dots {
  display: flex;
  gap: 0.4375rem;
  margin-top: 0.875rem;
  justify-content: flex-start;
  align-items: center;
}
.inv-time-investor-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.inv-time-investor-dot.is-active {
  background: var(--_primitives---colors--brand-orange, #f56e38);
  width: 14px;
  border-radius: 999px;
}


/* ════════════════════════════════════════════════════════════════════
   §01 - FOUNDERS / OPERATORS BENTO  (v3, A/B/C mosaic per sketch)
   ────────────────────────────────────────────────────────────────────
   12-col × 3-row mosaic. 8 cards per panel: 2 A + 2 B + 4 C.
       Row 1 (200px) : A (span 8) │ B (span 4)
       Row 2 (200px) : B (span 4) │ A (span 8)
       Row 3 (180px) : C C C C (span 3 each)

   Card shapes:
     A - horizontal: photo left full-height · meta right (stamp top-right
         absolute · name+designation middle · logo bottom-right).
     B - split: top section has photo top-left + stamp top-right + logo
         bottom-right; bottom strip is name + designation full-width.
     C - compact horizontal: photo left (narrow) · meta right · same
         vertical sequence as A but smaller type.

   Every card: border-radius 0 (hard tech surface, matches 100-grid).
   LinkedIn icon: square 30×30, photo bottom-right.
   Stamp: brand-orange solid block, UPPERCASE, 0 radius, top:12 right:0
   absolute on the card - meta has clear-zone padding-top so name never
   overlaps the stamp regardless of stamp text length.
   ════════════════════════════════════════════════════════════════════ */

/* ── Founders / Operators tabs - same folder-tab treatment as the
      ask section. Active tab has a dark fill that visually merges
      with the bento grid below; inactive tab is a plain text label
      with no fill or border. */
/* Founders / Operators toggle - small centred segmented control with
   square corners. Subtle white-alpha wash on the active segment
   (instead of the previous bright orange) so the toggle reads as a
   quiet utility control, not a brand statement. */
.inv-bento-tabs {
  display: inline-flex;
  align-items: stretch;
  padding: 0.25rem;
  gap: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0;
}
.inv-bento-tabs.is-fullwidth {
  width: auto;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.inv-bento-tab {
  padding: 0.5rem 1.25rem;
  min-width: 7rem;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
  text-align: center;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.inv-bento-tab:hover {
  color: rgba(255, 255, 255, 0.85);
}
.inv-bento-tab.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-weight: 600;
}
.inv-bento-tab.is-active:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* Section header row - h2 + subhead on the left, Founders/Operators
   toggle on the right. Saves the vertical space the toggle previously
   occupied below the subhead. Collapses to stacked on mobile. */
.inv-bento-section-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.inv-bento-section-row .section-tabs-header { flex: 1 1 auto; }
.inv-bento-section-row .inv-bento-tabs       { flex: 0 0 auto; }

/* Subtitle paragraphs were removed from the markup; rule retained
   as a no-op in case future variants bring them back. */
.inv-bento-sub.is-hidden { display: none; }

/* ── Mosaic grid: 12-col × 3-row.
   Rows 1+2 carry A + B pairings → 210px tall.
   Row 3 carries the 4 C cards → 170px tall. C has less content
   (shorter role, smaller logo) so a shorter row tightens the gap
   between the stamp and the credentials block. Sizes tuned so the
   toggle + full mosaic fit a standard ~1080px viewport without
   overflow. */
.inv-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 210px 210px 170px;
  gap: 14px;
}
.inv-bento-grid.is-hidden { display: none; }

/* Slightly closer A/B widths - A goes 8 → 7 cols and B goes 4 → 5
   cols so the 12-col row reads as a balanced pair rather than a
   wide-and-narrow split. */
.inv-bento-card.is-a { grid-column: span 7; }
.inv-bento-card.is-b { grid-column: span 5; }
.inv-bento-card.is-c { grid-column: span 3; }

/* ── Card base: 0 radius, page-bg fill, white-12 border (bumped from
      0.06 - at the lower alpha the line was blending into the
      surrounding grey panel and the cards looked borderless). */
.inv-bento-card {
  position: relative;
  display: grid;
  /* Dark grey (#1a1a1a) - lifts off the section's #161616 wash just
     enough to define each card without going full pitch-black. */
  background: #1a1a1a;
  /* Border softened from white-12 → white-6 so the hairline reads as
     a quiet separator rather than a chunky outline. Width stays at
     1px (sub-pixel rendering is unreliable across browsers); the
     visual "thinning" comes from the opacity drop. */
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
/* No hover state on the card surface itself - only the LinkedIn
   icon reveal (see `.inv-bento-card:hover .inv-bento-li` below)
   uses hover. Card bg + border stay static. */

/* ── Photo column / wrapper - transparent so card surface flows
      seamlessly under the cut-out portrait. Photo is rendered with
      object-fit: contain so the full subject is always visible (no
      heads cropped) - bottom-aligned so shoulders meet the card
      bottom edge across all card sizes.
      Note: NOT position:relative. The LinkedIn icon is absolutely
      positioned and needs to anchor to the card itself (bottom-right
      of the card, not bottom-right of the photo column), so we let
      .inv-bento-card's relative positioning be the LI icon's
      reference frame. The photo's overflow clipping works fine without
      `position: relative` since the wrap has explicit dimensions. */
.inv-bento-photo-wrap {
  height: 100%;
  background: transparent;
  overflow: hidden;
  align-self: stretch;
}
.inv-bento-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* ── LinkedIn icon - square 32×32 chip at the card's bottom-right
      with a 14px inset from the corner so it doesn't feel jammed
      into the edge. Translucent white background + 1px stroke; reads
      as a subtle "ghost" chip on the dark card. Brand-orange on
      hover. Hidden by default, fades in on card hover. */
.inv-bento-li {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.22s ease, visibility 0.22s, transform 0.22s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  z-index: 3;
  backdrop-filter: blur(2px);
}
.inv-bento-card:hover .inv-bento-li,
.inv-bento-li:focus-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.inv-bento-li:hover {
  background: rgba(245, 110, 56, 0.18);
  border-color: rgba(245, 110, 56, 0.65);
  color: #f56e38;
}

/* ── Credibility strip - top-right (absolute), 0 radius, darker
      panel + full-opacity brand-orange uppercase text. Reads as a
      press-stamp / "credential tape" rather than a pill. A subtle
      diagonal "shine" sweeps across the panel every ~3s via the
      ::before pseudo-element - passive, hands-off, infinite loop.
      Scope: ONLY the bento card stamp. No other element on the page
      shares this effect. */
.inv-bento-stamp {
  position: absolute;
  /* Stamp now hugs the top edge a bit closer - was 18px, dropped to
     8px so the credibility line reads as a true header strip on the
     card instead of floating mid-card. */
  top: 8px;
  right: 0;
  padding: 11px 18px;
  background: #141414;
  /* Vibrant brand orange (matches the SVG underline arc colour and
     reads as clear orange, not amber, at this small uppercase weight
     against the dark stamp background). Was #f56e38 which renders
     slightly yellow-shifted at this size + weight. */
  color: #FF5B1A;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.05;
  white-space: nowrap;
  opacity: 1;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  z-index: 2;
  overflow: hidden; /* clip the shine sweep inside the stamp's box */
}

/* Swoosh/shine animation removed - the stamp now sits as a static
   credibility chip. Earlier the ::before pseudo painted a diagonal
   linear-gradient sweep over the stamp every 2s; pulling it cleans
   up the visual noise across the bento grid. */

/* ── Name + designation block (shared by A, B, C).
      Per-variant `gap` overrides come below: A/B want a tighter pair
      (4px), C wants a slightly looser one (5px) so the smaller type
      doesn't feel cramped. */
.inv-bento-name-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.inv-bento-card.is-c .inv-bento-name-block { gap: 5px; }
.inv-bento-name {
  margin: 0;
  font-weight: 500;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.01em;
  /* Up to 2 lines, ellipsis on overflow. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inv-bento-role {
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Company logo (shared; per-variant size below).
      `height` is set as a hard value (not max-height) so EVERY logo
      renders at the same vertical size for a given card type - this
      is what creates the visual "harmony" across cards regardless of
      the source logo's natural dimensions. max-width caps very wide
      wordmarks so they don't dominate compared to squarer marks.
      `flex-shrink: 0` prevents the flex column from shrinking the
      logo's height when other meta children claim vertical space. */
.inv-bento-logo {
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity 0.2s ease;
  width: auto;
  flex-shrink: 0;
}
/* Logo opacity hover effect removed - only the LinkedIn icon reveal
   uses hover now. */

/* ═══════════════════════════════════════════════════════════════
   CARD A - horizontal: photo left, meta right.
   Layout intent (matches the design reference):
   • Stamp pinned to top-right (absolute, outside flex flow)
   • Name + role + logo GROUPED at the BOTTOM of the card with a
     small gap between them - they read as one "credentials block"
     with the company logo confirming the role, not a separate item.
   ═══════════════════════════════════════════════════════════════ */
.inv-bento-card.is-a {
  /* ── RCA-DRIVEN COLUMN SIZING ───────────────────────────────────
     The portrait PNGs ship with ~40px of bg padding LEFT + RIGHT of
     the actual face/body inside the image. With `object-fit: contain`
     and the row height ~200px, the displayed image is height-
     constrained: ~160px wide, regardless of how wide the column is.
     Any extra column width past that just becomes empty bg between
     the subject's right edge and the meta column - the exact gap
     the user kept seeing.

     Fix: shrink the column from 300 → 210px. 210 is just enough to
     accommodate the 160px-wide displayed image + a small breathing
     band, so the subject's right edge sits ~20px from the column
     edge instead of ~80px. Combined with `padding-left: 4px` on
     meta below, the name now lands ~25px to the right of the
     subject - the same "just after the photo" feel as the B cards.

     Tablet (≤991) still uses its own `190px 1fr` override, so this
     is desktop-only. */
  grid-template-columns: 210px 1fr;
}
.inv-bento-card.is-a .inv-bento-photo-wrap { width: 210px; }
/* ────────────────────────────────────────────────────────────────
   A-card photo sizing (revised after the user said `cover` made
   the photos look overwhelming AND the name was still far away).

   Why the previous cover attempt failed: the source PNGs have bg
   padding around the subject. Cover stretched the IMAGE to fill
   the column, but the SUBJECT inside still occupied only ~60% of
   the image width, so a ~40% empty band on the subject's right
   stayed visible. Cover also makes the rendered subject ~50%
   bigger, which the user explicitly called "way too big".

   New approach: revert to `object-fit: contain` (no crop, natural
   fit) and use a modest `scale(1.08)` to give Raveen / Karthik /
   Daruru / Sridhar a ~8% larger subject than the B-card subjects
   (which use the base rule with no scale). The shrunken column
   above is what actually closes the subject-to-name gap.

   The `translateY(20px)` is the legacy bottom-anchor (carried over
   from the original A-card rule) so the subject's shoulders bleed
   just past the bottom edge for the "cut-out portrait" look. */
.inv-bento-card.is-a .inv-bento-photo-img {
  object-fit: contain;
  transform: scale(1.08) translateY(20px);
  transform-origin: center bottom;
}
/* Operators panel's A-card subjects (Daruru, Sridhar) carry the
   same scale + Y-shift; the operator-specific block below tweaks
   only Sridhar's translateY since his source PNG frames the
   subject slightly higher than Daruru's. */
[data-bento-panel="operators"] .inv-bento-card.is-a .inv-bento-photo-img {
  transform: scale(1.08) translateY(20px);
  transform-origin: center bottom;
}
[data-bento-panel="operators"] .inv-bento-card.is-a .inv-bento-photo-img[alt="Sridhar Anumandla"] {
  transform: scale(1.08) translateY(28px);
  transform-origin: center bottom;
}
.inv-bento-card.is-a .inv-bento-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  /* Left padding trimmed further (26 → 12 → now 4px) on desktop so
     the name / role / logo block sits flush with the portrait edge -
     the "credentials block" now reads as anchored to the photo,
     not floating in its own column. Top / right / bottom unchanged.
     Tablet's own `padding: 22px 22px 20px` override still applies
     at ≤991, so this only tightens the gap on desktop. */
  padding: 24px 26px 22px 4px;
  min-width: 0;
}
.inv-bento-card.is-a .inv-bento-name  { font-size: 26px; }
.inv-bento-card.is-a .inv-bento-role  { font-size: 15px; }
.inv-bento-card.is-a .inv-bento-stamp { font-size: 13px; padding: 11px 20px; }
.inv-bento-card.is-a .inv-bento-logo {
  align-self: flex-start;
  height: 26px;
  max-width: 140px;
}

/* ═══════════════════════════════════════════════════════════════
   CARD B - same horizontal structure as A, just narrower (4 cols).
   Photo column bumped to 190px so the profile portrait reads at a
   confident size rather than feeling thumbnail-sized inside a wide
   row. The meta column shifts right accordingly. */
.inv-bento-card.is-b {
  grid-template-columns: 190px 1fr;
}
.inv-bento-card.is-b .inv-bento-photo-wrap { width: 190px; }
.inv-bento-card.is-b .inv-bento-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 22px 22px 20px;
  min-width: 0;
}
.inv-bento-card.is-b .inv-bento-name  { font-size: 22px; }
.inv-bento-card.is-b .inv-bento-role  { font-size: 14px; }
.inv-bento-card.is-b .inv-bento-stamp { font-size: 12px; padding: 10px 16px; }
.inv-bento-card.is-b .inv-bento-logo {
  align-self: flex-start;
  height: 24px;
  max-width: 120px;
}

/* ═══════════════════════════════════════════════════════════════
   CARD C - compact horizontal: same layout as A/B, just narrower.
   Photo column bumped to 140 so the portrait fills the column rather
   than feeling postage-stamp-sized inside the row.
   ═══════════════════════════════════════════════════════════════ */
.inv-bento-card.is-c {
  grid-template-columns: 140px 1fr;
}
.inv-bento-card.is-c .inv-bento-photo-wrap { width: 140px; }
.inv-bento-card.is-c .inv-bento-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 18px 18px;
  min-width: 0;
}
.inv-bento-card.is-c .inv-bento-name  { font-size: 18px; }
.inv-bento-card.is-c .inv-bento-role  { font-size: 13px; }
.inv-bento-card.is-c .inv-bento-stamp { font-size: 11px; padding: 9px 14px; letter-spacing: 0.08em; top: 8px; }
.inv-bento-card.is-c .inv-bento-logo {
  align-self: flex-start;
  height: 22px;
  max-width: 100px;
}

/* Per-logo size nudges - some marks (Multiply, Open Legal) are
   geometric / small-content and read TOO small at the card-type
   default height; some (Appknox) are wide wordmarks and read TOO
   big. Tweak heights individually to balance perceived weight.

   Multiply + Open Legal SVGs ship with internal transparent padding
   on the left; we use Cloudinary's `e_trim` transform in the IMG src
   to auto-crop that padding at the asset edge, so the visible logo
   content starts flush with the name/designation block - no CSS
   margin-shifts needed.

   min-height matches height so flex/aspect-ratio quirks can't quietly
   round the rendered height down (Open Legal kept resolving to 24px
   from a 26px height because the SVG's intrinsic aspect was tugging
   the box smaller). */
.inv-bento-card .inv-bento-logo[alt="Multiply Ventures"] {
  height: 34px;
  min-height: 34px;
}
.inv-bento-card .inv-bento-logo[alt="Open Legal Inc"] {
  height: 28px;
  min-height: 28px;
}
.inv-bento-card .inv-bento-logo[alt="Appknox"] {
  height: 17px;
  min-height: 17px;
}

/* Operator-panel logo nudges. The Aerospike + Otter wordmarks are
   geometrically very wide (aspect ~5.8 / ~4.9) so they need a slightly
   smaller height to keep visible width in the same band as the founder
   B logos. Aerospike + Meta now sit at the same 24px so the two
   operator A cards (Sunil at Aerospike, Sridhar at Meta) read with
   matched visual weight. */
.inv-bento-card .inv-bento-logo[alt="Aerospike"] {
  height: 24px;
  min-height: 24px;
}
.inv-bento-card .inv-bento-logo[alt="Otter.ai"] {
  height: 18px;
  min-height: 18px;
}
.inv-bento-card .inv-bento-logo[alt="Meta"] {
  height: 24px;
  min-height: 24px;
}

/* ── LinkedIn icon: sized smaller on C cards (compact) ─────────── */
.inv-bento-card.is-c .inv-bento-li { width: 26px; height: 26px; }
.inv-bento-card.is-c .inv-bento-li svg { width: 11px; height: 11px; }

/* ════════════════════════════════════════════════════════════════
   CARD .is-more - "+ many more" summary tile. Sits as the final
   card in the bento grid (founders + operators panels) to signal
   that the named investors above are a curated subset.

   Layout: stacked vertically - 6-avatar pile on TOP, "+ many more"
   label centred BELOW. Overrides the regular C-card's 140px-photo /
   1fr-meta horizontal grid so the tile reads as a single centred
   summary block, not an investor card-shaped slot. No logo, no
   LinkedIn icon, no credibility stamp - those signals belong to
   individual investors, not the summary tile.
   ═══════════════════════════════════════════════════════════════ */
.inv-bento-card.is-more {
  /* Replace the C-card's `140px 1fr` 2-col grid with a single-col
     flex column so the pile + label stack top→bottom and centre. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  padding: 1.25rem 1rem;
  /* Non-interactive summary tile - no cursor, no hover lift. The
     previous click-to-switch-panel behaviour was removed per user
     direction; the tile is now purely a visual indicator that
     more investors exist beyond the named cards. */
  cursor: default;
}
.inv-bento-card.is-more .inv-bento-pile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* `min-width: 0` lets flex children shrink if the card width
     squeezes; without it the row of circles would overflow at
     narrow viewports. */
  min-width: 0;
}
.inv-bento-card.is-more .inv-bento-pile-item {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #1a1a1a;
  overflow: hidden;
  flex-shrink: 0;
  /* Subtle dark stand-in colour so the circles read as portrait-
     chips even on slow networks before the IMG resolves. */
  background: #2a2a2a;
  /* Pile of 6 circles overlapping by 14px each:
     6 × 38 - 5 × 14 = 228 - 70 = 158px intrinsic width, sits
     comfortably within the ~260px card width with breathing room. */
  margin-left: -14px;
}
.inv-bento-card.is-more .inv-bento-pile-item:first-child {
  margin-left: 0;
}
.inv-bento-card.is-more .inv-bento-pile-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* "+ many more" headline - muted grey (not brand-orange) so the tile
   reads as a quiet summary marker, not a competing eye-catcher next
   to the named investor cards. Centered under the avatar pile. */
.inv-bento-card.is-more .inv-bento-name {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  letter-spacing: -0.005em;
  font-size: 1rem;
  text-align: center;
}
/* Hide all the per-investor signals the summary tile doesn't carry. */
.inv-bento-card.is-more .inv-bento-li,
.inv-bento-card.is-more .inv-bento-logo,
.inv-bento-card.is-more .inv-bento-stamp,
.inv-bento-card.is-more .inv-bento-role,
.inv-bento-card.is-more .inv-bento-meta { display: none; }

/* ════════════════════════════════════════════════════════════════
   MOBILE EXCEPTION (≤991px): every Strategic-Investor card uses the
   B-card layout - same grid-column span (6), same photo-wrap width
   (190px), same typography, same logo size band. The user-facing
   reason: the A and C variants only make sense in the desktop mosaic
   composition; on mobile/tablet they should all read uniformly so
   the grid feels like a clean two-up list, not a stair-stepped
   layout pretending to be a mosaic.
   ════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 991px) {
  .inv-bento-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: auto;
  }
  /* Mobile-only reorder of the bento cards. Desktop reads as a mosaic
     (A + B / B + A / 4× C); mobile is a single "star investors" list,
     so each panel gets its own priority order. The DOM stays in the
     desktop-friendly order - we just shuffle visual order via `order`.

     Founders (DOM: Raveen-A, Harshit-B, Kesavan-B, Karthik-A …):
        visual list = Raveen, Karthik, Kesavan, Harshit, then C-cards.
     Operators (DOM: Daruru-A, Sunil-B, Hitesh-B, Sridhar-A …):
        visual list = Daruru, Sridhar, Sunil, Hitesh, then C-cards.

     The two panels share an A + A + B + B prefix but the B-cards swap
     differently, so we scope the order rules per panel. */
  [data-bento-panel="founders"] > .inv-bento-card:nth-child(1) { order: 1; }
  [data-bento-panel="founders"] > .inv-bento-card:nth-child(2) { order: 4; }
  [data-bento-panel="founders"] > .inv-bento-card:nth-child(3) { order: 3; }
  [data-bento-panel="founders"] > .inv-bento-card:nth-child(4) { order: 2; }
  [data-bento-panel="founders"] > .inv-bento-card:nth-child(5) { order: 5; }
  [data-bento-panel="founders"] > .inv-bento-card:nth-child(6) { order: 6; }
  [data-bento-panel="founders"] > .inv-bento-card:nth-child(7) { order: 7; }
  [data-bento-panel="founders"] > .inv-bento-card:nth-child(8) { order: 8; }

  [data-bento-panel="operators"] > .inv-bento-card:nth-child(1) { order: 1; }
  [data-bento-panel="operators"] > .inv-bento-card:nth-child(2) { order: 3; }
  [data-bento-panel="operators"] > .inv-bento-card:nth-child(3) { order: 4; }
  [data-bento-panel="operators"] > .inv-bento-card:nth-child(4) { order: 2; }
  [data-bento-panel="operators"] > .inv-bento-card:nth-child(5) { order: 5; }
  [data-bento-panel="operators"] > .inv-bento-card:nth-child(6) { order: 6; }
  [data-bento-panel="operators"] > .inv-bento-card:nth-child(7) { order: 7; }
  [data-bento-panel="operators"] > .inv-bento-card:nth-child(8) { order: 8; }
  .inv-bento-card.is-a,
  .inv-bento-card.is-b,
  .inv-bento-card.is-c {
    grid-column: span 6;
    grid-template-columns: 190px 1fr;
  }
  .inv-bento-card.is-a .inv-bento-photo-wrap,
  .inv-bento-card.is-c .inv-bento-photo-wrap {
    width: 190px;
  }
  .inv-bento-card.is-a .inv-bento-meta,
  .inv-bento-card.is-c .inv-bento-meta {
    padding: 22px 22px 20px;
    gap: 12px;
  }
  .inv-bento-card.is-a .inv-bento-name,
  .inv-bento-card.is-c .inv-bento-name { font-size: 22px; }
  .inv-bento-card.is-a .inv-bento-role,
  .inv-bento-card.is-c .inv-bento-role { font-size: 14px; }
  .inv-bento-card.is-a .inv-bento-stamp,
  .inv-bento-card.is-c .inv-bento-stamp {
    font-size: 12px;
    padding: 10px 16px;
  }
  .inv-bento-card.is-a .inv-bento-logo,
  .inv-bento-card.is-c .inv-bento-logo {
    height: 24px;
    max-width: 120px;
  }
  .inv-bento-card.is-a .inv-bento-name-block,
  .inv-bento-card.is-c .inv-bento-name-block { gap: 4px; }
  /* A-card photo transforms (translateY for founders, X+Y for the
     operator A subjects) only make sense in the desktop A-card
     framing. With A cards now sized like B on mobile, reset the
     transform so photos are bottom-aligned naturally. */
  .inv-bento-card.is-a .inv-bento-photo-img,
  [data-bento-panel="operators"] .inv-bento-card.is-a .inv-bento-photo-img,
  [data-bento-panel="operators"] .inv-bento-card.is-a .inv-bento-photo-img[alt="Sridhar Anumandla"] {
    transform: none;
  }
  /* C cards use the LI hover icon size from the base B-card rule,
     undo the C-specific shrink. */
  .inv-bento-card.is-c .inv-bento-li { width: 32px; height: 32px; }
  .inv-bento-card.is-c .inv-bento-li svg { width: 13px; height: 13px; }
  /* "+ many more" summary tile uses a stacked layout (pile on top,
     label below) - the tablet C-card override (190px photo column)
     doesn't apply since the .is-more card sets its own flex-column
     display. Leave the desktop avatar sizing intact. */
}

/* ── Phones ≤767px: single-column stack, all cards still B-styled. */
@media screen and (max-width: 767px) {
  .inv-bento-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .inv-bento-card.is-a,
  .inv-bento-card.is-b,
  .inv-bento-card.is-c {
    grid-column: span 1;
  }
}

/* ── Small phones ≤479: tighten the B-styled photo column so the
      meta side has room for the name + role to breathe. ───────── */
@media screen and (max-width: 479px) {
  .inv-bento-tab {
    padding: 0.5rem 1.125rem;
    font-size: 0.9375rem;
  }
  .inv-bento-card.is-a,
  .inv-bento-card.is-b,
  .inv-bento-card.is-c {
    grid-template-columns: 130px 1fr;
  }
  .inv-bento-card.is-a .inv-bento-photo-wrap,
  .inv-bento-card.is-b .inv-bento-photo-wrap,
  .inv-bento-card.is-c .inv-bento-photo-wrap {
    width: 130px;
  }
  .inv-bento-card.is-a .inv-bento-meta,
  .inv-bento-card.is-b .inv-bento-meta,
  .inv-bento-card.is-c .inv-bento-meta {
    padding: 16px 16px 16px;
  }
  .inv-bento-card.is-a .inv-bento-name,
  .inv-bento-card.is-b .inv-bento-name,
  .inv-bento-card.is-c .inv-bento-name { font-size: 18px; }
  .inv-bento-card.is-a .inv-bento-stamp,
  .inv-bento-card.is-b .inv-bento-stamp,
  .inv-bento-card.is-c .inv-bento-stamp { font-size: 10px; padding: 7px 12px; letter-spacing: 0.06em; }
}

/* ════════════════════════════════════════════════════════════════════
   §02 - TWO-BOX HEADER ("What we're looking for from a Strategic Investor")
   Side-by-side ask boxes with a "+" between them. Replaces the prior
   Time / Money tab navigation. The case-study carousel below is the
   same Swiper as before, just no longer wrapped in a tab panel.
   ════════════════════════════════════════════════════════════════════ */
.inv-ask-boxes {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1.25rem;
}
/* Folder-tab pattern, neutral fills:
   - Inactive tab is the BRIGHTER, raised surface (lighter white wash).
   - Active tab + content panel share the SAME darker, quieter surface
     so they read as one merged shape. The active tab's bottom border
     swaps to the panel's fill colour and a 1px negative margin makes
     it overlap the panel's top border - the seam disappears.
   Orange is reserved for accents (the 01/02 number, focus ring).  */
.inv-ask-box {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.5rem 1.75rem 1.5rem;
  /* Inactive default - clearly brighter "raised" card. The active
     state drops back down to the panel's darker surface so the two
     are unmistakably distinct. */
  background: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0;
  position: relative;
  z-index: 2;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.inv-ask-box:hover {
  background: #303030;
  border-color: rgba(255, 255, 255, 0.18);
}
.inv-ask-box:focus-visible {
  outline: 2px solid var(--_primitives---colors--brand-orange);
  outline-offset: 2px;
}
/* Inactive tabs render as plain text labels - no fill, top/side
   borders transparent. The single bottom border draws the seam
   line between the tab strip and the panel below, but ONLY in the
   inactive tab's column. Bumped alpha to 0.16 so the line over
   the page-bg matches the active tab's border-over-#121212
   visually (the active tab's white-10 border looks brighter
   because it sits on a brighter surface). */
.inv-ask-box:not(.is-active) {
  background: transparent;
  border-color: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
/* Inactive heading reads as a faded white (still legible, just
   secondary to the selected tab's orange heading). Sub stays at the
   same dim white as before. Number is grey by default (see
   .inv-ask-box-num below) so no override needed here. */
.inv-ask-box:not(.is-active) .inv-ask-box-label { color: rgba(255, 255, 255, 0.62); }
.inv-ask-box:not(.is-active) .inv-ask-box-sub   { color: rgba(255, 255, 255, 0.40); }

/* Active heading swaps to brand orange - primary visual anchor for
   the selected tab. */
.inv-ask-box.is-active .inv-ask-box-label {
  color: var(--_primitives---colors--brand-orange);
}

/* Active tab - the QUIETER surface (matches panel below). 1px
   negative bottom margin + matching bottom-border colour seamlessly
   merge it into the panel. z-index keeps it above the panel's own
   top border in the overlap zone. */
.inv-ask-box.is-active {
  background: #121212;
  border-color: rgba(255, 255, 255, 0.10);
  /* Bottom border collapsed via width only - using the `border-bottom: 0`
     shorthand was resetting the bottom-color to `currentcolor` (white),
     which caused a brief solid-white flash on the formerly-active tab
     during the 0.2s border-color transition. Keeping the color but
     dropping the width to 0 leaves the merge invisible AND eliminates
     the flash. */
  border-bottom-width: 0;
  z-index: 3;
}
/* No hover affordance on the active tab - it's already selected, the
   colour shift was reading as a flicker. */
.inv-ask-box.is-active:hover {
  background: #121212;
}
.inv-ask-box-num {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Grey for both active and inactive - the number is just a marker,
     the heading carries the colour signal (orange = selected). */
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 0.375rem;
}
/* Label + sub group stacked under the 01/02 badge, left-aligned. */
.inv-ask-box-text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.inv-ask-box-label {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -0.01em;
}
.inv-ask-box-sub {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--paragraph-grey);
}

/* "+" glyph hidden - the new merged-tab visual reads cleaner without
   the join symbol between the two tabs. */
.inv-ask-plus { display: none; }

/* Collapse the spacer between the tab strip and the panel below so
   the active tab can sit flush against the panel and merge into it
   via its 1px negative margin. */
.inv-ask-boxes + .spacer-large { display: none; }
.inv-ask-boxes {
  grid-template-columns: 1fr 1fr;
  /* No gap - tabs sit flush against each other; inactive has no fill
     so the seam isn't visible anyway. */
  gap: 0;
}
/* Desktop: shrink the tab strip from full-width to a content-sized
   pair pinned left, with the empty trailing column eating the spare
   space on the right. Each tab is just wide enough to keep its
   longest label ("Minimum Cheque of $25K") on a single line - 26rem
   inner-content + 24/28px padding clears that with breathing room.
   The empty trailing column carries a single 1px bottom border that
   continues the panel's top edge across to the section's right edge,
   so the tab strip + panel read as one composed shape instead of
   floating tabs above a separate container. */
@media screen and (min-width: 992px) {
  .inv-ask-boxes {
    /* Tab 1 ("~1 Hour a Month" - short label) sized down to 18rem;
       tab 2 ("Minimum Cheque of $25K" - longer label) keeps 26rem;
       the trailing 1fr stays as the flexible phantom column that
       absorbs all remaining horizontal space so the bottom hairline
       runs unbroken to the section's right edge. */
    grid-template-columns: minmax(0, 18rem) minmax(0, 26rem) 1fr;
    justify-content: start;
  }
  .inv-ask-boxes .inv-ask-box-label {
    white-space: nowrap;
  }
  /* Phantom trailing tab - takes the leftover trailing column and
     paints ONLY the missing hairline between the tab strip and the
     panel below. Implemented as a real 1px-tall element with a solid
     bg (not a border on a 0-height element + negative margin, which
     drew the line 1px BELOW where the panel started and got hidden
     under the panel). align-self: end parks it at the bottom edge of
     the tab row, exactly where the inactive tab's own bottom border
     sits, so the line runs unbroken across columns. */
  .inv-ask-box-rule {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    width: 100%;
    height: 1px;
    /* Matches the inactive tab's bottom-border colour exactly
       (rgba(255,255,255,0.16)) so the line reads as one continuous
       hairline across all three columns. */
    background-color: rgba(255, 255, 255, 0.16);
    pointer-events: none;
  }
}
/* Hidden by default (only the desktop rule above re-displays it) so
   the phantom div never affects the mobile / tablet 2-col grid. */
.inv-ask-box-rule {
  display: none;
}
@media screen and (min-width: 992px) {
  .inv-ask-box-rule {
    display: block;
  }
}

/* Mobile - keep the two ask boxes SIDE BY SIDE (was previously
   stacked top-to-bottom) with the "+" between them, like desktop.
   Padding + type scale dropped just enough that the labels read
   cleanly at ~155px column width without feeling cramped. */
@media screen and (max-width: 767px) {
  .inv-ask-boxes {
    /* 2-column on mobile (the "+" glyph is hidden, no middle column
       needed). Active tab still bottom-merges with the panel below.
       Zero gap so the two tabs sit flush against each other - the
       prior 0.4rem gap exposed a thin strip of page bg between
       them which read as a seam in the tab strip. */
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
  }
  /* Overlap adjacent tab borders by 1px (negative margin) so the
     seam between them is a SINGLE 1px line, not a doubled 2px
     band - keeps the visible divider the user wants while still
     reading as "zero gap" between the two tabs. */
  .inv-ask-boxes .inv-ask-box ~ .inv-ask-box {
    margin-left: -1px;
  }
  /* Every child of the tab button gets pointer-events:none so taps
     land directly on the parent <button>. Without this, taps on
     the number / label / sub text divs were being captured and
     not bubbling to the click handler reliably on mobile - the
     user had to tap 2-3 times for the tab to switch. With
     pointer-events disabled on children the whole visible box
     (including the text) is one tap target. */
  .inv-ask-box > * {
    pointer-events: none;
  }
  /* Also turn off iOS's 300ms tap delay + the highlight flash. */
  .inv-ask-box {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .inv-ask-box {
    padding: 1rem 0.875rem 0.875rem;
    gap: 0.4rem;
  }
  .inv-ask-box-num {
    font-size: 0.6875rem;
    margin-bottom: 0.25rem;
  }
  .inv-ask-box-label {
    font-size: 1.0625rem;
    line-height: 1.2;
  }
  .inv-ask-box-sub {
    font-size: 0.75rem;
    line-height: 1.35;
  }
}
@media screen and (max-width: 479px) {
  .inv-ask-box {
    padding: 0.875rem 0.75rem;
  }
  .inv-ask-box-label {
    font-size: 1rem;
  }
  .inv-ask-box-sub {
    font-size: 0.6875rem;
  }
}

/* Wrapper for the case carousel (was previously the active tab panel). */
.inv-ask-cases { width: 100%; }

/* ════════════════════════════════════════════════════════════════════
   §03 - INVOLVE SECTION ("Three ways we involve you in the studio")
   ────────────────────────────────────────────────────────────────────
   Two-column layout: left rail (3 tabs with label + 1-line description)
   + right media pane (VOSS GIF · monthly video · WhatsApp placeholder).
   Active rail item gets the brand "frame and focus" L-bracket overlay
   (Vector-31/32/33/34 SVGs in orange) - matches the about page's "core
   values" tab pattern. Inactive items have no brackets.
   ════════════════════════════════════════════════════════════════════ */
.inv-involve {
  display: grid;
  grid-template-columns: 5fr 7fr;
  /* No gap so the active rail tab can merge directly into the media
     panel on its right (see .inv-involve-item.is-active below). */
  gap: 0;
  align-items: stretch;
}

/* ── Left rail ─────────────────────────────────────────────────── */
.inv-involve-rail {
  display: flex;
  flex-direction: column;
  /* No gap - rail items sit flush against each other, no visible
     dividers between inactive tabs. Active card carries its own
     bordered "card" treatment. */
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Folder-tab pattern (neutral fills): inactive rail items are the
   brighter, raised cards; the active item shares the media panel's
   quieter darker surface so the two read as one merged shape. The
   active item's right border swaps to the panel's fill colour and a
   1px negative right margin makes it overlap the panel's left border
   - seam disappears. */
.inv-involve-item {
  position: relative;
  /* Reset <li> default top margin so the first item top-aligns with
     the media panel beside it. */
  margin: 0;
  /* Padding moved to .inv-involve-btn below so the button (the actual
     click target) fills the entire visual card area - hovering /
     clicking anywhere inside the card now triggers the tab, not just
     the text inside it. */
  padding: 0;
  /* Inactive default - plain text labels, no fill, no border. Only
     the active item carries a card surface (the merged "tab" shape).
     Same pattern as the .inv-ask-box treatment above. */
  background: transparent;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.inv-involve-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.inv-involve-item.is-active {
  /* Two shades LIGHTER than the section's #161616 wash so the
     active tab + merged media panel read as a clearly raised
     selection. Pitch-black on grey was hard to see; this lifted
     wash gives the active state the highlight contrast it needs. */
  background: #222222;
  border-color: rgba(255, 255, 255, 0.10);
  border-right-color: #222222; /* matches panel surface for seamless merge */
  margin-right: -1px;
  z-index: 3;
}
/* No hover affordance on the active rail item - already selected. */
.inv-involve-item.is-active:hover {
  background: #222222;
}
/* Inactive desc is dimmer than the base; the inactive label rule
   lives below in .inv-involve-label (default state). */
.inv-involve-item:not(.is-active) .inv-involve-desc { color: rgba(255, 255, 255, 0.38); }
.inv-involve-btn {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  background: transparent;
  border: 0;
  /* Padding lifted off the parent <li>.inv-involve-item and placed
     here so the button itself reaches every edge of the visible card
     surface. Result: clicking ANYWHERE inside the card (including
     the previously dead-zone padding band around the text) triggers
     the tab switch, not just clicking on the text directly. */
  padding: 1.25rem 1.375rem;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  /* Drop the 300ms iOS tap delay + suppress the dark tap-highlight
     flash so tab switches feel instant. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Every child inside the accordion button (number, label, sub copy,
   chevron pseudo) gets `pointer-events: none` so taps land directly
   on the parent <button>. Without this, taps on the inner text spans
   were being captured by the child elements and not always bubbling
   to the click handler - the user had to tap the chevron specifically
   for the accordion to expand. With pointer-events off on children
   the entire visible row is one consistent tap target. */
.inv-involve-btn > * {
  pointer-events: none;
}
.inv-involve-num {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Grey for both active and inactive - matches the .inv-ask-box-num
     pattern. Active state signal moves to the label colour below. */
  color: rgba(255, 255, 255, 0.42);
  padding-top: 0.25rem;
  min-width: 1.5rem;
}
.inv-involve-text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.inv-involve-label {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  /* Inactive heading reads as faded white (same as inv-ask-box). */
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.25s ease;
}
.inv-involve-item:hover .inv-involve-label { color: rgba(255, 255, 255, 0.85); }
/* Active heading swaps to brand orange + a heavier weight - primary
   "selected" signal in both colour and weight. */
.inv-involve-item.is-active .inv-involve-label {
  color: var(--_primitives---colors--brand-orange);
  font-weight: 700;
}
.inv-involve-desc {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--paragraph-grey, #eeeeee80);
}

/* L-bracket corners removed - design switched to a thin orange
   border + low-opacity orange wash on the active item (defined in
   `.inv-involve-item.is-active` above) for a cleaner read on both
   desktop and mobile. The corner SVGs remain in markup but are
   hidden so the inactive→active transition is just the border +
   background color shift. */
.inv-involve-item .focused-bg,
.inv-involve-item .focused-icon {
  display: none;
}

/* ── Right media pane. Matches the active rail tab so they read as
      one connected shape (the active tab overlaps this panel's left
      border by 1px). */
.inv-involve-media {
  position: relative;
  z-index: 1;
  /* Same LIGHTER grey as the active rail tab so the two share one
     raised surface, lifted two shades above the section's #161616
     wash for clear visual contrast. */
  background: #222222;
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
  min-height: 360px;
  aspect-ratio: 16 / 10;
}
.inv-involve-pane {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  background: var(--_primitives---opacity--white-5);
}
.inv-involve-pane.is-active {
  opacity: 1;
  visibility: visible;
}
.inv-involve-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Monthly video container - 16:9 frame inside the pane, with the
   YouTube iframe filling it. The pane is wider than 16:9, so the
   video gets letterboxed centered. */
.inv-involve-video {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
.inv-involve-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;     /* preview-only autoplay, no user interaction */
}

/* Monthly tab - 3 vertical-format YouTube clips playing in parallel.
   Each cell is a portrait slot; the YouTube player letterboxes the
   video inside it. Small gap between cells separates the three. */
.inv-involve-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  width: 100%;
  height: 100%;
}
.inv-involve-trio-cell {
  position: relative;
  background: #000;
  overflow: hidden;
}
.inv-involve-trio-cell .inv-involve-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
/* FAQ - split layout: heading + sub on the LEFT (sticky during scroll
   through the section), question list on the RIGHT. The left column
   stays anchored ~5rem below the top of the viewport while the user
   scrolls through the questions. Same rules mirrored from homepage-v2.css
   so investors.html doesn't need that stylesheet. */
.home_faq_component.is-split {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
.home_faq_component.is-split .section-header {
  position: sticky;
  top: 5rem;
  align-self: start;
  text-align: left;
}
.home_faq_component.is-split .section-header .max-width-large,
.home_faq_component.is-split .section-header .max-width-small {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}
/* Webflow's .text-size-medium has a hardcoded width: 506px - unset
   so the paragraph honors the narrower left column. */
.home_faq_component.is-split .section-header .text-size-medium {
  width: auto;
  max-width: 100%;
}

@media (max-width: 991px) {
  .home_faq_component.is-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .home_faq_component.is-split .section-header {
    position: static;
  }
}

/* Subtle month label at the bottom of each reel so the three clips
   read as "Feb / Mar / Apr updates" at a glance. Soft dark-blur
   backdrop keeps the chip legible over any frame the YouTube clip
   happens to be on at any moment. */
.inv-involve-trio-month {
  position: absolute;
  left: 50%;
  bottom: 0.625rem;
  transform: translateX(-50%);
  padding: 0.3125rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* WhatsApp placeholder - dark card with brand-orange chat icon. */
.inv-involve-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  color: var(--brand-white-50);
}
.inv-involve-placeholder svg { color: var(--_primitives---colors--brand-orange); opacity: 0.7; }
.inv-involve-placeholder-h {
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.005em;
}
.inv-involve-placeholder-d {
  font-size: 0.875rem;
  color: var(--brand-white-50);
}

/* ── Tablet ≤991: stack rail above media, rail goes horizontal-ish ─ */
@media screen and (max-width: 991px) {
  .inv-involve {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .inv-involve-media { aspect-ratio: 16 / 9; min-height: 280px; }
  /* Disable the desktop right-merge - on tablet/mobile the rail
     stacks above the media, so the active tab can't merge sideways
     into the panel anymore. Reset to a normal bordered row. */
  .inv-involve-item.is-active {
    margin-right: 0;
    border-right-color: rgba(255, 255, 255, 0.10);
  }
}

/* ── Mobile ≤767: full accordion. The IIFE in investors.html flips
      `.inv-involve` to `.is-mobile-accordion` and MOVES each
      `[data-involve-pane]` out of `.inv-involve-media` into its
      matching `.inv-involve-item`. CSS here turns each item into a
      proper expand/collapse panel: heading + sub + chevron always
      visible, media collapsed by default, expands inside the box
      when the item is `.is-active`. The existing activate() JS in
      the script block already keeps ONE active at a time, which is
      the accordion contract. */
@media screen and (max-width: 767px) {
  /* Keep `.inv-involve-item` padding at 0 so the inner button (the
     actual click target) fills the entire visible card - my earlier
     "tap-anywhere" fix. The button below carries the visible
     padding. */
  .inv-involve-item    { padding: 0; }
  .inv-involve-label   { font-size: 1.0625rem; }
  .inv-involve-desc    { font-size: 0.875rem; }
  /* Description is always visible (it's the subheading the user
     wants in the expanded + collapsed state). Reset the previous
     collapse rule that was hiding it on inactive items. */
  .inv-involve-desc {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }

  /* ── Chevron on each accordion button ──
     Pure-CSS arrow built from two borders rotated 45° = chevron-down
     by default; rotates to chevron-up when the item is active. The
     `padding-right` on the button makes room for it on the right
     edge so it doesn't overlap with the label text. */
  .inv-involve-btn {
    align-items: flex-start;
    position: relative;
    padding-right: 3rem;
  }
  .inv-involve-btn::after {
    content: '';
    position: absolute;
    right: 1.25rem;
    top: 1.5rem;
    width: 0.625rem;
    height: 0.625rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    color: rgba(255, 255, 255, 0.45);
    transition: transform 0.3s ease, color 0.3s ease;
  }
  .inv-involve-item.is-active .inv-involve-btn::after {
    /* Rotate 180° to a chevron-up. -135deg gives the upward arrow
       with the same border-right/-bottom anchors. */
    transform: rotate(-135deg);
    color: rgba(255, 255, 255, 0.85);
  }

  /* ── Accordion media expand / collapse ──
     The media pane (moved inside the item by the IIFE) is collapsed
     by default - max-height 0, opacity 0, no inner space. Active
     item expands it inside the same card. Transition gives the
     accordion the "drop" feel. */
  .inv-involve.is-mobile-accordion .inv-involve-media {
    /* Hide the now-empty wrapper - panes were moved out. */
    display: none;
  }
  /* Pane = a properly contained accordion drop-down. Reset the
     desktop's absolute-stacking positioning, then constrain to the
     card's box: relative positioning anchors the absolutely-
     positioned iframes inside the pane (not against an ancestor
     somewhere up the tree), width:auto + overflow:hidden + the side
     margins below clip everything to the card edges, and
     box-sizing: border-box keeps padding from blowing the width. */
  .inv-involve.is-mobile-accordion .inv-involve-item .inv-involve-pane {
    /* `!important` guards against the base
       `.inv-involve-pane { position: absolute; inset: 0; display: flex }`
       rules - without these flags, the pane was still being absolute-
       positioned over the item (and stretching the iframe past the
       card edges). */
    position: relative !important;
    inset: auto !important;
    display: block !important;
    z-index: auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0 1.125rem;
    transition: max-height 0.45s ease, opacity 0.3s ease, margin 0.45s ease;
  }
  /* Each pane variant gets a specific aspect-ratio when expanded
     so the inner img / video / iframe sits in a known box and
     can't overflow. Voss + whatsapp are 16:9; monthly-update is
     3 stacked 16:9 cells with 8px gaps = ~16 / 27.5 ratio. */
  .inv-involve.is-mobile-accordion .inv-involve-item.is-active .inv-involve-pane {
    max-height: 30rem;
    opacity: 1;
    margin: 0.75rem 1rem 1rem;
  }
  /* Single-pane media (VOSS dashboard img, WhatsApp video) - fixed
     16:9 box so they fit inside the card cleanly. */
  .inv-involve.is-mobile-accordion .inv-involve-item.is-active .inv-involve-pane[data-involve-pane="voss"],
  .inv-involve.is-mobile-accordion .inv-involve-item.is-active .inv-involve-pane[data-involve-pane="whatsapp"] {
    aspect-ratio: 16 / 9;
    max-height: none;
    height: auto;
  }
  /* Monthly trio - 3 cells side by side, but with a FIXED cell
     height (was `aspect-ratio: 9/16`, which scaled the height with
     viewport width and made tall iPads / tablets blow past the
     pane's max-height). Fixed 8rem height = the trio stays inside
     the card no matter the viewport. The videos just render
     vertically-cropped, which is fine for the preview. */
  .inv-involve.is-mobile-accordion .inv-involve-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 8rem;
    gap: 0.375rem;
    width: 100%;
    height: 8rem;
  }
  .inv-involve.is-mobile-accordion .inv-involve-trio-cell {
    position: relative;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  /* Monthly pane = trio height (8rem) + small breathing room. */
  .inv-involve.is-mobile-accordion .inv-involve-item.is-active .inv-involve-pane[data-involve-pane="monthly"] {
    max-height: 9rem;
    padding:0.625rem 1rem 1rem;
  }
  /* All media children fit their pane's box, never overflow. */
  .inv-involve.is-mobile-accordion .inv-involve-pane > .inv-involve-img,
  .inv-involve.is-mobile-accordion .inv-involve-pane > video,
  .inv-involve.is-mobile-accordion .inv-involve-trio-cell > .inv-involve-iframe,
  .inv-involve.is-mobile-accordion .inv-involve-trio-cell > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
}

/* ── Small phones ≤479: even tighter ──────────────────────────── */
@media screen and (max-width: 479px) {
  /* Padding stays on .inv-involve-btn (the click target); the item
     itself stays at padding 0 so the entire visible card surface
     remains clickable - preserves the "tap-anywhere" fix while
     trimming the inner button padding for small screens. */
  .inv-involve-btn     { padding: 1rem 1.125rem; }
  .inv-involve-label   { font-size: 1rem; }
  .inv-involve-desc    { font-size: 0.8125rem; }
  .inv-involve-num     { font-size: 0.6875rem; letter-spacing: 0.12em; }
  /* Tighten the chevron's right padding-reserve to match the
     trimmed button padding above. */
  .inv-involve-btn::after { right: 1rem; top: 1.25rem; }
  /* Tighter side margins on the expanded media inside small-screen
     accordion items so the pane edges sit closer to the card edges. */
  .inv-involve.is-mobile-accordion .inv-involve-item .inv-involve-pane {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .inv-involve.is-mobile-accordion .inv-involve-item.is-active .inv-involve-pane {
    margin: 0.625rem 1rem 1rem;
  }
}

/* ════════════════════════════════════════════════════════════════════
   REFINEMENTS - phase 1 & 2 second-pass
   ────────────────────────────────────────────────────────────────────
   - Plus glyph in §02 boxes: no box / fill / border, just a grey plus.
   - Case-study carousel: wrapped in a labelled box for clear context.
   - §03 Involve: bigger 01/02/03 number, L-brackets sit OUTSIDE the
     active card (no overlap into right-side content), media pane gets
     a darker chrome frame around the GIF.
   - Centered heading variants for §02, §03, §05, §07.
   ════════════════════════════════════════════════════════════════════ */

/* ── Plus glyph: plain grey, larger, no chrome ─────────────────── */
.inv-ask-plus {
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  color: var(--brand-white-50, #eeeeee80);
}

/* ── Case-study carousel: boxed with a kicker label. Matches the
      active .inv-ask-box (orange-tinted surface + orange border) so
      the tab above merges into this panel as one shape. Explicit
      inset: auto undoes a `inset: 0` declaration somewhere upstream
      that was pulling the panel 40px up into the tab strip. */
.inv-ask-cases.is-boxed {
  /* Matches the active .inv-ask-box surface so the tab above and this
     panel read as one connected shape. */
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 1.75rem 1.75rem 1.5rem;
}

/* Grid-stack the two panels so they occupy the same cell - container
   height = max(time, capital). Switching tabs doesn't reflow the
   surrounding page. Panel drops its top border entirely - the line
   between tab strip and panel is now drawn by the INACTIVE tab's
   own bottom border, which only paints in its own column. The active
   tab has no bottom border at all so it merges with the panel below. */
.inv-ask-panel-stack {
  display: grid;
  grid-template-areas: "stack";
  /* minmax(0, 1fr) lets the column shrink below its intrinsic
     content size - without it the swiper inside (.swiper-wrapper is
     `width: max-content`) blows the column out to ~4500px. */
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}
.inv-ask-panel-stack > .inv-ask-cases {
  grid-area: stack;
  min-width: 0;
  border-top: 0;
  /* Instant switch - no fade or slide between tabs. The visible
     panel pops in immediately, the inactive one drops out. Grid-
     stacking keeps the container height stable so there's still no
     layout shift on toggle. */
  transition: none;
}
.inv-ask-panel-stack > .inv-ask-cases[hidden] {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.inv-ask-panel-stack > .inv-ask-cases:not([hidden]) {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
/* Panel-toggle: the two .inv-ask-cases panels share the same surface
   styling; only one is visible at a time, driven by the tabs above. */
.inv-ask-cases[hidden] { display: none !important; }

/* ── Capital-flow diagram panel (shown when "$25K minimum" is selected).
      Three nodes (You → Shifu → 100 PortCos) connected by arrows; the
      grid of 100 cells makes the abstract "indirect exposure to every
      PortCo" claim visually concrete. Uses the site's standard surface
      tokens (no rounded corners, brand-orange for the active accent). */
.inv-ask-flow .inv-flow-head {
  margin-bottom: 1.5rem;
  max-width: 720px;
}
.inv-flow-title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.005em;
}
.inv-flow-sub {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--paragraph-grey, #eeeeee80);
}
/* ── Pie-metaphor capital-flow ────────────────────────────────────
   Three-node diagram: Your Investment → Shifu Ventures (pie) → 100
   PortCo pies. The orange wedge on every pie is the visual metaphor:
   directly in Shifu, indirectly in every PortCo. The wedges are
   visually exaggerated (~30°) so they read at small grid scale; this
   is a metaphor diagram, not a data-viz ownership chart.            */
.inv-flow-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  /* Generous horizontal padding so the diagram doesn't stretch
     edge-to-edge inside the boxed panel - the previous 0.5rem made
     the row feel crammed against the panel border. */
  padding: 2.25rem 3rem 1.5rem;
  flex-wrap: nowrap;
}
/* Center-aligned so all three visual centres sit on one horizontal
   line (the arrows draw straight through them). Labels end up at
   different vertical positions because the visuals are different
   sizes (72px cards << 132px pie << ~190px frame); each label sits
   directly under its own visual, which matches the sketch.        */
.inv-flow-node {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.inv-flow-node-label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* Node 1 - "Your Investment" cards stack. Three offset rectangles
   suggesting a bundle of cash; the front card carries a $ glyph on
   top + "Your Investment" label inside (no label below). Card box
   is now 100×72 so the text fits comfortably under the $.            */
.inv-flow-cards {
  position: relative;
  width: 88px;
  height: 64px;
}
.inv-flow-card {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-flow-card.is-back {
  transform: translate(8px, -8px);
  background: rgba(20, 20, 20, 0.7);
  border-color: rgba(255, 255, 255, 0.10);
}
.inv-flow-card.is-mid {
  transform: translate(4px, -4px);
  background: rgba(22, 22, 22, 1);
  border-color: rgba(255, 255, 255, 0.14);
}
/* Front card - stacks $ on top + label below. Vertical flex with
   space between so the $ sits near top and the label near bottom. */
.inv-flow-card.is-front {
  transform: translate(0, 0);
  border-color: rgba(245, 110, 56, 0.55);
  background: linear-gradient(135deg, rgba(28,20,16,1) 0%, rgba(20,20,20,1) 100%);
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  padding: 0.5rem 0.5rem;
}
.inv-flow-card-dollar {
  font-family: var(--_typography---font-styles--heading, 'Figtree', sans-serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--_primitives---colors--brand-orange);
  line-height: 1;
}
.inv-flow-card-text {
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* Arrows - label sits above the line with generous breathing room
   (label, then 12px gap, then arrow line). The whole arrow group is
   centred vertically so the arrow line aligns with the visual
   centres of cards + Shifu pie + PortCos frame. */
.inv-flow-arrow {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 104px;
  color: rgba(255, 255, 255, 0.55);
}
/* Stage-3 arrow carries a longer label ("Indirect Exposure / to 100
   PortCos") that needs two lines plus a wider track so it stops
   colliding with the Shifu pie on the left and the PortCos frame on
   the right. */
.inv-flow-arrow.inv-flow-arrow--wide {
  width: 144px;
}
.inv-flow-arrow-label {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}
/* Wide-arrow labels are allowed to wrap (two-line layout) and the
   line-height opens up to compensate. */
.inv-flow-arrow--wide .inv-flow-arrow-label {
  white-space: normal;
  line-height: 1.25;
}
.inv-flow-arrow-svg {
  width: 100%;
  height: 12px;
}
/* Bidirectional arrow group (Your Investment ↔ Shifu Ventures) -
   SVG is double height to fit two stacked lines. Both lines + heads
   inside use the same animation rules; CSS selectors target every
   .inv-flow-arrow-line / .inv-flow-arrow-head inside the stage-2
   arrow, so the two paths animate in parallel automatically. */
.inv-flow-arrow.inv-flow-arrow--duo .inv-flow-arrow-svg {
  height: 24px;
}
.inv-flow-arrow-line {
  stroke-dasharray: 128;
  /* default-state dashoffset is 0 (line fully drawn). The .is-animating
     keyframe animation runs from 128→0 to draw it; here we keep 0 so
     static (no-JS) state shows a complete arrow. */
  stroke-dashoffset: 0;
}
.inv-flow-arrow-head {
  /* Default-state - head visible. .is-animating keyframe animates 0→1
     for the cascade reveal. */
  opacity: 1;
}

/* Pie wrapper - sized container that holds the SVG pie + optional
   centred logo. Two scales: .is-big for Shifu (centre node) and the
   default smaller scale for the 100 PortCo pies. */
.inv-flow-pie-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  display: block;
}
.inv-flow-pie-wrap.is-big {
  width: 116px;
  height: 116px;
}
.inv-flow-pie {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.inv-flow-pie-bg {
  fill: rgba(18, 18, 18, 1);
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.inv-flow-pie-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
}
/* Orange highlight - two renderings depending on tile shape.
   - Shifu centre pie (circle): the slice is a 30° wedge <path>
     drawn from the centre (0,0); transform-origin: 0 0 = centre.
   - PortCo tiles (rect): the slice is a 14%-height top strip;
     transform-origin: 50% 0 makes the wedge-pop animation grow
     from the top edge centre - reads as a strip materialising. */
.inv-flow-pie-slice {
  fill: rgba(245, 110, 56, 0.38);
  stroke: var(--_primitives---colors--brand-orange);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-origin: 0 0;
}
.inv-flow-fractional-cell .inv-flow-pie-slice,
.inv-flow-portcos-grid .inv-flow-pie-slice {
  transform-origin: 50% 0;
}
.inv-flow-pie-wrap.is-big .inv-flow-pie-slice {
  fill: rgba(245, 110, 56, 0.32);
  stroke-width: 1.5;
}
.inv-flow-pie-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Logo file is 100×36 - landscape aspect. We size by width so the
     logotype is legible inside the 132px circle (≈92px wide → ~33px
     tall, taking up the centre while leaving room for the orange
     wedge to read at top-right). */
  width: 70%;
  height: auto;
  display: block;
  pointer-events: none;
  /* Soft dark glow around the logo so it doesn't get lost against the
     translucent orange wedge behind it. Two layered drop-shadows: a
     tight inner halo for crisp letterform contrast + a softer outer
     halo that fades into the dark pie background. Result reads as
     "logo lifted off the surface" without visible borders or boxes. */
  filter:
    drop-shadow(0 0 5px rgba(8, 8, 8, 0.95))
    drop-shadow(0 0 14px rgba(8, 8, 8, 0.6));
}

/* Bordered frame around the 5 labelled fractional pies + 95 PortCo
   pies. Reads as "this whole group = 100 PortCos". The label below
   anchors the count. */
.inv-flow-portcos-frame {
  padding: 0.875rem 0.875rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Breathing room between the bordered frame and the "100 PortCos"
   label below - anchors the count visually without crowding the box.
   Neutral grey (not orange) so it reads as a label / caption rather
   than a brand accent, matching the rest of the node labels. */
.inv-flow-portcos-label {
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.875rem;
}

/* Top row - 7 BIG circles. Cells 0-4 are fractional roles (CMO /
   CRO / CPO / CHRO / CFO) with the acronym inside each circle at
   the bottom. Cells 5-6 are the two active PortCos (Photon Legal +
   CMF) with their logos clipped to the circle, wedge on top. All
   seven circles share the same 52px size. */
.inv-flow-fractional-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  justify-items: center;
}
.inv-flow-fractional-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.inv-flow-fractional-cell .inv-flow-pie-wrap {
  width: 44px;
  height: 44px;
}
/* Acronym label - absolutely positioned at the vertical+horizontal
   center of the circle. The wedge lives at top-right (≈12 o'clock
   to 1 o'clock), so the centre region is the cleanest spot for the
   text. (Previously sat at `bottom: 18%`, which felt low against
   the wedge above.) */
.inv-flow-fractional-cell-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Figtree', sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.92);
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
}

/* 95 anonymous PortCo pies - 19 cols × 5 rows. Pies at 22px so the
   orange wedge (30° of a 22px circle ≈ 6-7px base) is clearly visible
   and the overall PortCos frame breathes inside the panel. */
.inv-flow-portcos-grid {
  display: grid;
  grid-template-columns: repeat(19, 1fr);
  gap: 5px;
}
.inv-flow-portcos-grid .inv-flow-pie-wrap {
  width: 19px;
  height: 19px;
}

/* ── Animation ────────────────────────────────────────────────────
   Default state: ALL elements are visible (opacity 1, no transform).
   This means without JS or if the user has prefers-reduced-motion,
   the diagram simply renders in its final state.

   When .is-animating is added to the diagram, each element gets a
   keyframe animation with `fill: both` and an explicit delay. The
   `both` fill applies the FROM state (opacity 0) during the delay
   and the TO state (opacity 1) after. This is more deterministic
   than CSS transitions, which depend on cascade ordering and
   intermediate computed states.

   Timeline (each row builds on the previous):
     0ms     - Your Investment cards
     420ms   - Arrow 1 line draws (600ms)
     900ms   - Shifu pie fades in
     1150ms  - Shifu wedge sweeps in
     1500ms  - Arrow 2 line draws (600ms)
     2000ms  - PortCo frame
     2200ms  - 5 fractional pies cascade (80ms stagger), wedges 160ms after
     2700ms  - 95 anonymous pies cascade (18ms stagger), wedges 120ms after
                                                                       */

/* Pie wedge in default state - fully visible (no JS = static graph).
   Override happens only when .is-animating is active. */
.inv-flow-pie-slice {
  opacity: 1;
  transform: scale(1);
  transform-origin: 0 0;
}
.inv-flow-arrow-line {
  stroke-dashoffset: 0;
}
.inv-flow-arrow-head {
  opacity: 1;
}

/* ON-state - each element gets its own keyframe animation when the
   .is-animating class lands on the diagram. */
.inv-flow-diagram.is-animating .inv-flow-you {
  animation: invFlowFadeUp 450ms ease-out 0ms both;
}
.inv-flow-diagram.is-animating .inv-flow-arrow[data-flow-stage="2"] {
  animation: invFlowFadeIn 240ms ease-out 380ms both;
}
.inv-flow-diagram.is-animating .inv-flow-arrow[data-flow-stage="2"] .inv-flow-arrow-line {
  animation: invFlowArrowDraw 600ms cubic-bezier(0.4, 0, 0.2, 1) 420ms both;
}
.inv-flow-diagram.is-animating .inv-flow-arrow[data-flow-stage="2"] .inv-flow-arrow-head {
  animation: invFlowFadeIn 240ms ease-out 920ms both;
}
.inv-flow-diagram.is-animating .inv-flow-shifu {
  animation: invFlowFadeUp 450ms ease-out 900ms both;
}
.inv-flow-diagram.is-animating .inv-flow-shifu .inv-flow-pie-slice {
  animation: invFlowWedgePop 450ms cubic-bezier(0.34, 1.56, 0.64, 1) 1150ms both;
}
.inv-flow-diagram.is-animating .inv-flow-arrow[data-flow-stage="3"] {
  animation: invFlowFadeIn 240ms ease-out 1480ms both;
}
.inv-flow-diagram.is-animating .inv-flow-arrow[data-flow-stage="3"] .inv-flow-arrow-line {
  animation: invFlowArrowDraw 600ms cubic-bezier(0.4, 0, 0.2, 1) 1520ms both;
}
.inv-flow-diagram.is-animating .inv-flow-arrow[data-flow-stage="3"] .inv-flow-arrow-head {
  animation: invFlowFadeIn 240ms ease-out 2020ms both;
}
.inv-flow-diagram.is-animating .inv-flow-portcos {
  animation: invFlowFadeUp 450ms ease-out 1980ms both;
}
.inv-flow-diagram.is-animating .inv-flow-portcos-frame > * {
  animation: invFlowFadeIn 360ms ease-out 2120ms both;
}

/* 7 top-row pies (5 fractional + 2 PortCos) - pie + label/logo fade
   in at 2200ms + i·80ms; wedge sweeps in 160ms after the pie body
   lands. Last cell at 2200 + 6·80 = 2680ms, wedge by ~3060ms. */
.inv-flow-diagram.is-animating .inv-flow-fractional-cell {
  animation: invFlowFadeUp 360ms ease-out both;
  animation-delay: calc(2200ms + (var(--i, 0) * 80ms));
}
.inv-flow-diagram.is-animating .inv-flow-fractional-cell .inv-flow-pie-slice {
  animation: invFlowWedgePop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(2360ms + (var(--i, 0) * 80ms));
}

/* 93 anonymous PortCo pies - start at 3000ms (after the top row's
   wedge cascade finishes) with a tight 10ms stagger so the entire
   93-cell field resolves in under 1s. Last pie's wedge settles at
   ~3000 + 92·10 + 110 + 320 ≈ 4350ms. */
.inv-flow-diagram.is-animating .inv-flow-portcos-grid > .inv-flow-pie-wrap {
  animation: invFlowFadeIn 240ms ease-out both;
  animation-delay: calc(3000ms + (var(--i, 0) * 10ms));
}
.inv-flow-diagram.is-animating .inv-flow-portcos-grid > .inv-flow-pie-wrap .inv-flow-pie-slice {
  animation: invFlowWedgePop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(3110ms + (var(--i, 0) * 10ms));
}

@keyframes invFlowFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes invFlowFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes invFlowArrowDraw {
  from { stroke-dashoffset: 128; }
  to   { stroke-dashoffset: 0; }
}
@keyframes invFlowWedgePop {
  from { opacity: 0; transform: scale(0.55); }
  to   { opacity: 1; transform: scale(1); }
}

/* Reduced-motion: drop all animations, render the final state */
@media (prefers-reduced-motion: reduce) {
  .inv-flow-diagram.is-animating *,
  .inv-flow-diagram.is-animating *::before,
  .inv-flow-diagram.is-animating *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Responsive ──────────────────────────────────────────────────  */
@media screen and (max-width: 991px) {
  .inv-flow-diagram { gap: 0.25rem; padding: 1.5rem 0.25rem 1rem; }
  .inv-flow-pie-wrap.is-big { width: 108px; height: 108px; }
  .inv-flow-portcos-grid .inv-flow-pie-wrap { width: 14px; height: 14px; }
  .inv-flow-fractional-cell .inv-flow-pie-wrap { width: 32px; height: 32px; }
  .inv-flow-portcos-grid { gap: 3px; }
  .inv-flow-arrow { width: 56px; }
}

/* Mobile - stack vertically; arrows rotate 90°. Grid shrinks to 10
   cols × ~10 rows so the 100-cell field still reads.

   ARROW LAYOUT (re-designed for mobile):
   The desktop layout puts labels ABOVE the horizontal arrow line.
   When the SVG is rotated 90° for the vertical mobile flow, the
   rotated *visual* (24 wide × 56 tall) extends well beyond its 56×24
   layout box, so labels stacked above/below in a flex column ended
   up overlapping the rendered arrow line.

   Fix: drop the flex column and switch to a 3-column grid where the
   arrow sits in a centered narrow lane and the labels live in the
   side gutters - `[Capital | arrow | Equity]` for the duo, and
   `[arrow | Indirect Exposure to 100 PortCos]` for the wide arrow.
   The arrow's own column is sized to the rotated visual (24px wide),
   so its layout box no longer competes with the labels. */
@media screen and (max-width: 767px) {
  .inv-flow-diagram {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 0;
  }

  /* DUO arrow - labels now SWAPPED per design feedback:
        Equity ← (on left)  |  arrow lane  |  → Capital (on right)
     The center column is 24px (visual width of the rotated SVG).
     Arrow shortened from 56→40px so the overall diagram feels less
     stretched on mobile. The 8px top/bottom margin on the SVG
     reserves vertical space for the rotated visual that overflows
     its layout box, so adjacent elements aren't crowded by the
     visual bleed. */
  .inv-flow-arrow.inv-flow-arrow--duo {
    display: grid;
    grid-template-columns: 1fr 24px 1fr;
    align-items: center;
    column-gap: 0.625rem;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
  }
  /* Force all three duo children onto the SAME row - without
     grid-row: 1 the sparse auto-flow placement bumps the label
     ordered AFTER the SVG (declared earlier in markup, placed in
     col 3) onto an implicit second row when CSS evaluates col 2
     placement next. Explicit row: 1 keeps them inline. */
  .inv-flow-arrow--duo .inv-flow-arrow-label:nth-of-type(1) {
    grid-column: 3;            /* Capital → right (was left) */
    grid-row: 1;
    text-align: left;
  }
  .inv-flow-arrow--duo .inv-flow-arrow-svg {
    grid-column: 2;
    grid-row: 1;
    width: 40px;
    height: 24px;
    transform: rotate(90deg);
    transform-origin: center;
    justify-self: center;
    margin: 8px 0;             /* reserve vertical space for rotated visual */
  }
  .inv-flow-arrow--duo .inv-flow-arrow-label:nth-of-type(2) {
    grid-column: 1;            /* Equity → left (was right) */
    grid-row: 1;
    text-align: right;
  }

  /* WIDE arrow - restructured as a centered vertical stack so the
     down-arrow sits directly under the Shifu Ventures circle's
     center axis (instead of off-center to the left as before). The
     label is centered below the arrow. Arrow shortened from 56→40.
     The 14px vertical margin on the SVG reserves space for the
     rotated visual that visually extends past the layout box. */
  .inv-flow-arrow.inv-flow-arrow--wide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    gap: 0.4rem;
    margin: 0 auto;
  }
  .inv-flow-arrow--wide .inv-flow-arrow-svg {
    width: 40px;
    height: 12px;
    transform: rotate(90deg);
    transform-origin: center;
    margin: 14px 0;
  }
  .inv-flow-arrow--wide .inv-flow-arrow-label {
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    max-width: 220px;
  }

  /* Shifu Ventures pie smaller (was 110px → 80px). At 110px the
     circle dominated the diagram and the arrow below it felt
     disconnected at the new smaller arrow length. */
  .inv-flow-pie-wrap.is-big { width: 80px; height: 80px; }
  .inv-flow-portcos-grid { grid-template-columns: repeat(10, 1fr); gap: 4px; }
  .inv-flow-portcos-grid .inv-flow-pie-wrap { width: 22px; height: 22px; }
  .inv-flow-fractional-cell .inv-flow-pie-wrap { width: 40px; height: 40px; }
  .inv-flow-fractional-row { gap: 6px; }
  /* Tighten the overall diagram gap now that elements are smaller. */
  .inv-flow-diagram { gap: 0.4rem; padding: 0.75rem 0; }
}
.inv-ask-cases-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--_primitives---colors--brand-orange);
}
.inv-ask-cases-dot {
  width: 6px;
  height: 6px;
  background: var(--_primitives---colors--brand-orange);
  border-radius: 50%;
  display: inline-block;
}

/* ── Centered header modifier - applies to all section-header
      wrappers used on the page (3 different markup patterns). ──── */
.section-tabs-header.is-center {
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  text-align: center;
}
.section-tabs-header.is-center > * { width: 100%; }
.inv-long-game-text.is-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 43.4375rem;
}
.section-header.is-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-header.is-center > * {
  margin-left: auto;
  margin-right: auto;
}

/* ── §03 Involve: bigger 01/02/03 numbers ──────────────────────── */
.inv-involve-num {
  font-size: 1.625rem;        /* ~26px (was 12) */
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  /* Grey for both active and inactive - matches the inv-ask-box-num
     pattern. Label colour carries the active signal (orange). */
  color: rgba(255, 255, 255, 0.42);
  line-height: 1;
  min-width: 2.25rem;
  padding-top: 0.125rem;
}

/* ── §03 Involve: L-bracket frame hugs the active card corners.
      bg extends -8px beyond the item; brackets are 12×12, so they sit
      just outside the corner with arms reaching slightly inward into
      the card's padding gutter. */
.inv-involve-item .focused-bg {
  inset: -8px;
  width: auto;       /* override `width:100%` from the generic .focused-bg rule */
  height: auto;
}
.inv-involve-item .focused-icon {
  width: 12px;
  height: 12px;
}

/* ── §03 Involve: media pane chrome - "viewer" treatment.
      Outer surface is dark grey (deeper than the card surface so the
      pane visually recedes); subtle inner hairline separates the
      chrome from the actual content. Generous padding gives the
      content room to breathe so it doesn't look pasted on. */
.inv-involve-media {
  /* Background is set on the canonical rule above (.inv-involve-media,
     §03) - let it through here so the panel matches the active rail
     tab and the merge seam stays invisible. */
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 12px;
  display: grid;
  grid-template-areas: "stack";
}
.inv-involve-pane {
  position: relative;
  inset: auto;
  grid-area: stack;
  width: 100%;
  height: 100%;
  background: #0d0d0d;
  border: 1px solid var(--_primitives---opacity--white-10);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-involve-pane.is-active { z-index: 1; }
.inv-involve-img,
.inv-involve-video,
.inv-involve-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}
.inv-involve-img { object-position: center top; }
@media screen and (max-width: 767px) {
  .inv-involve-media { padding: 9px; }
}

/* ── Mobile tweaks for refinements ─────────────────────────────── */
@media screen and (max-width: 767px) {
  .inv-ask-plus svg { width: 18px; height: 18px; }
  .inv-ask-cases.is-boxed { padding: 1.25rem 1.25rem 1rem; }
  .inv-ask-cases-kicker { font-size: 0.6875rem; letter-spacing: 0.12em; margin-bottom: 1rem; }
  .inv-involve-num { font-size: 1.375rem; min-width: 1.875rem; }
  .inv-involve-media { padding: 6px; }
}
@media screen and (max-width: 479px) {
  .inv-ask-plus svg { width: 16px; height: 16px; }
  .inv-involve-num { font-size: 1.25rem; }
}

/* ════════════════════════════════════════════════════════════════════
   §01 BENTO - full-width toggle (sits above the mosaic with 8px gap,
   matches the mosaic's grid gap so it reads as part of the grid). The
   header h2 + p is now centered (.section-tabs-header.is-center). The
   row-style header layout (.inv-bento-section-row) is no longer used.
   ════════════════════════════════════════════════════════════════════ */
/* Subtle square-cornered segmented toggle. The .is-fullwidth modifier
   is preserved for selector compatibility but no longer behaves as
   full-width - the inline control sits centred in .inv-bento-tabs-
   wrap. Active segment uses a quiet white-alpha wash (not brand
   orange) so the toggle reads as a utility control rather than a
   brand statement. */
.inv-bento-tabs.is-fullwidth {
  display: inline-flex;
  align-items: stretch;
  width: auto;
  max-width: none;
  margin: 0 auto;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0;
  gap: 0;
}
.inv-bento-tabs.is-fullwidth .inv-bento-tab {
  position: relative;
  border: 0;
  border-radius: 0;
  padding: 0.5rem 1.5rem;
  min-width: 7rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  min-height: 0;
  z-index: 2;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.inv-bento-tabs.is-fullwidth .inv-bento-tab:hover {
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
}
/* Active tab - fill matches the bento panel below (#121212) so the
   two read as one merged shape; bottom border = same #121212 to
   cover the bento's top border in the overlap zone (no visible
   seam between tab and panel). */
/* Subtle active state - white-alpha wash, no brand colour. Pairs
   with the segmented control's white-alpha container so the active
   segment reads as a quiet step-up in surface brightness. */
.inv-bento-tabs.is-fullwidth .inv-bento-tab.is-active {
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: #ffffff;
  font-weight: 600;
  box-shadow: none;
  margin-bottom: 0;
}
.inv-bento-tabs.is-fullwidth .inv-bento-tab.is-active:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Bento container - the surrounding section's #161616 wash carries
   the panel feel now, and the new toggle replaces the folder-tab
   pattern, so the bento drops its border AND padding. The cards sit
   directly on the section background. Compact top margin keeps the
   whole tribe section inside one 900px viewport for screenshots. */
.inv-bento {
  background: transparent;
  border: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  margin-top: 1.5rem;
}

/* Centring wrapper for the pill toggle. Spans the full row so the
   inline-flex toggle inside is reliably centred regardless of inner
   width / button labels. */
.inv-bento-tabs-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media screen and (max-width: 479px) {
  .inv-bento-tabs.is-fullwidth .inv-bento-tab {
    font-size: 0.9375rem;
    padding: 0.875rem 1rem;
    min-height: 48px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   HERO (investors page) - sized to content + generous padding rather
   than forced to 100vh. Bottom padding is intentionally large so the
   hero reads as its own complete section and §01 has clear visual
   separation; without this gap the hero content and §01 headline pile
   into the same viewport and feel overwhelming.
   ════════════════════════════════════════════════════════════════════ */
.section_header30 .padding-section-large.hero {
  /* Hero hugs its content. Cap is set just above content + padding
     (~686px) so on every viewport the section ends right where the
     content ends - no dead empty band below the video, and §01's
     heading sits just past the fold on a standard 900px viewport
     (ready to appear on first scroll). The 92vh floor only matters
     on viewports shorter than ~760px. */
  min-height: min(92vh, 700px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 12rem;
  padding-bottom: 4rem;
}

.section_header30 + section .padding-section-large {
  padding-top: 5rem;
}

/* ════════════════════════════════════════════════════════════════════
   §01 BENTO - logo refresh: drop the white-silhouette filter so brand
   colors show through. Wrap the colored logo in a light, on-brand plate
   so it reads clearly against the dark card. (Padding on the <img>
   itself with background - no extra wrapper needed.)
   ════════════════════════════════════════════════════════════════════ */
.inv-bento-logo {
  filter: none;
  opacity: 1;
  background: transparent;
  box-sizing: border-box;
  padding: 0;
  border-radius: 0;
  display: block;
}
/* Logo opacity hover effect removed - only the LinkedIn icon reveal
   uses hover now. */

/* Per-size logo plate sizes (slightly bigger so the actual brand mark
   has room inside the plate). */
.inv-bento-card.is-a .inv-bento-logo { max-height: 32px; max-width: 140px; }
.inv-bento-card.is-b .inv-bento-logo { max-height: 28px; max-width: 120px; }
.inv-bento-card.is-c .inv-bento-logo { max-height: 24px; max-width: 100px; }
@media screen and (max-width: 479px) {
  .inv-bento-card.is-a .inv-bento-logo,
  .inv-bento-card.is-b .inv-bento-logo,
  .inv-bento-card.is-c .inv-bento-logo { max-height: 22px; max-width: 90px; }
}

/* ════════════════════════════════════════════════════════════════════
   §05 LONG-GAME FIT - settings-table treatment
   ────────────────────────────────────────────────────────────────────
   3-column comparison: row label | "fit" column | "not fit" column.
   Reads like a settings / preferences table. No bullets - the rows
   themselves do the categorical work. The fit column gets a subtle
   orange accent on the header to signal the positive side.
   ════════════════════════════════════════════════════════════════════ */

/* Subhead - keep tight (2 lines on desktop) by capping width. */
.inv-long-game-text.is-center .inv-long-game-sub {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

/* Table grid. display:contents on row wrappers lets the cells flow
   into the outer 3-col grid so we get a real table rhythm.

   Redesign intent (this table is one of the page's hero blocks):
   • Left column is just a thin TEXT GUTTER for row labels - no
     background, no border, no column-block feeling. The labels sit
     flush in the leftmost grid cell like a sidebar caption.
   • The Built-for column is the HERO: orange-wrapped, biggest type,
     full white. Brand-orange edges + tinted bg make it pop.
   • The Not-fit column is in clear visual demotion: smaller type,
     ghost-grey colour, no accent.
   • The contrast between the two opinion columns is what makes the
     row skimmable in one beat: "Think in years…" vs "Need short-
     term liquidity" - instantly readable as fit / not-fit. */
.inv-fit-table {
  display: grid;
  /* Built-for and Not-fit are now EQUAL-WIDTH (1fr each) so the
     comparison reads on a balanced left/right axis. The table is
     capped at ~1040px and centred within the section container so it
     doesn't span the full content width - row separators stop where
     the Not-fit column ends instead of running to the page edge. */
  grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1040px;
  margin: 0 auto;
  border: 0;
  background: transparent;
}
.inv-fit-table-head,
.inv-fit-table-row { display: contents; }

/* Base cell rhythm; per-column variants below override. */
.inv-fit-cell-head,
.inv-fit-cell-label,
.inv-fit-cell {
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  min-height: 88px;
  line-height: 1.4;
}

/* Header row - empty label cell, small kicker on Built-for and Not-
   fit. The Built-for header is brand-orange and carries the TOP +
   L/R of the column-wrap border. */
.inv-fit-cell-head {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-white-50, #eeeeee80);
  background: transparent;
  padding-top: 1rem;
  padding-bottom: 1rem;
  min-height: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.inv-fit-cell-head.label {
  background: transparent;
  /* No left padding - the row label below sits flush at the table's
     left edge, treated as caption text not a column block. */
  padding-left: 0;
}
.inv-fit-cell-head.fit {
  position: relative;
  color: var(--_primitives---colors--brand-orange);
  /* Same kicker scale + weight as the .no header so the two columns
     read at the same hierarchy - the fit column's distinction comes
     from the orange colour + the subtle tinted column wash below,
     not from being typographically larger. */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  /* Subtle orange-tinted wash (vs the previous flat #121212) so the
     fit column reads as gently highlighted, not stamped. */
  background: rgba(245, 110, 56, 0.06);
}
.inv-fit-cell-head.no {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Row label - naked text in the left gutter. No background, no
   border, no padding-left. Reads as a caption attached to the row
   on its right, not a separate "cell". */
.inv-fit-cell-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  background: transparent;
  border-right: 0;
  padding-left: 0;
  padding-right: 1.5rem;
}

/* Both content cells (.fit + .no) at the SAME type scale + same row
   divider treatment per user direction. The hierarchy now comes
   ONLY from colour - .fit reads bright white on a subtle orange-
   tinted column wash, .no reads dimmer on transparent. */
.inv-fit-cell {
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 400;
}
.inv-fit-cell.fit {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  /* Subtle orange-tinted column wash - the "subtle highlight" the
     user asked for. Matches the header chip above so the whole
     column reads as a quiet block. */
  background: rgba(245, 110, 56, 0.06);
  /* Row dividers ON the fit column too, scoped to the wash so the
     line reads as part of the column's grid not the table's. */
  border-bottom: 1px solid rgba(245, 110, 56, 0.14);
}
.inv-fit-cell.no {
  color: rgba(255, 255, 255, 0.55);
}

/* No bottom border on the last data row. */
.inv-fit-table-row:last-child .inv-fit-cell-label,
.inv-fit-table-row:last-child .inv-fit-cell {
  border-bottom: 0;
}

/* Last row of the Built-for column anchors the bottom L-bracket corners
   - gets position:relative so the corner pseudo-elements below can
   absolutely position themselves against it. */
.inv-fit-table-row:last-child .inv-fit-cell.fit {
  position: relative;
}

/* L-bracket corner accents at the four outer corners of the Built-for
   column - removed per design feedback (extra visual noise, not adding
   information). The .fit column already has its own orange tinted bg
   + bordered stamp to mark itself as the favoured option. */

/* Tablet ≤991: keep table layout but trim widths. */
@media screen and (max-width: 991px) {
  .inv-fit-table {
    grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.8fr) minmax(0, 1.1fr);
  }
  .inv-fit-cell-head,
  .inv-fit-cell-label,
  .inv-fit-cell {
    padding: 1rem 1.125rem;
    min-height: 68px;
  }
  /* Preserve the desktop fit > no size hierarchy at tablet. */
  .inv-fit-cell.fit { font-size: 1.2rem; min-height: 76px; }
  .inv-fit-cell.no  { font-size: 0.9375rem; }
}

/* Mobile ≤767: stack rows. Each row becomes label / fit / not-fit
   stacked vertically inside its own card. Header row hidden - the
   per-cell sub-labels ("Built for…" / "Not the right fit…") carry
   the column meaning in stacked form. */
@media screen and (max-width: 767px) {
  .inv-fit-table {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
  }
  .inv-fit-table-head { display: none; }
  .inv-fit-table-row {
    display: flex;
    flex-direction: column;
    background: var(--_primitives---opacity--white-5);
    border: 1px solid var(--_primitives---opacity--white-15);
    margin-bottom: 0.75rem;
  }
  .inv-fit-cell-label,
  .inv-fit-cell {
    border-right: 0;
    border-bottom: 1px solid var(--_primitives---opacity--white-10);
    /* Explicit longhands + !important - defensive override for the
       desktop `.inv-fit-cell-label { padding-left: 0 }` rule and the
       tablet `.inv-fit-cell-label { padding: 1rem 1.125rem }`
       shorthand. Belt-and-braces: every padding edge is set as a
       longhand with !important, so no single-property override
       from desktop/tablet rules can leak through into mobile. */
    padding-top: 0.875rem !important;
    padding-right: 1.125rem !important;
    padding-bottom: 0.875rem !important;
    padding-left: 1.125rem !important;
    min-height: 0;
    background: transparent;
  }
  /* Mobile-only override for the desktop label rule (the source of
     truth for "no left padding on the label cell"). Repeat the
     padding-left here with even higher specificity so even if some
     stale Safari iOS cache replays the desktop rule, it can't beat
     this one. */
  .inv-fit-table .inv-fit-table-row .inv-fit-cell-label {
    padding-left: 1.125rem !important;
  }
  .inv-fit-cell:last-child { border-bottom: 0; }
  /* Add column kicker prefix on mobile so meaning is preserved. */
  .inv-fit-cell.fit::before,
  .inv-fit-cell.no::before {
    content: attr(data-prefix);
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
  }
  .inv-fit-cell.fit::before { color: var(--brand-white-50, #eeeeee80); content: "Built for you if you"; }
  .inv-fit-cell.no::before  { color: var(--brand-white-50); content: "Not the right fit if you"; }
  .inv-fit-cell.fit,
  .inv-fit-cell.no {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Highlighted "Built for you if you" strip - thin orange border
     (1px) around just this cell so it reads as the favoured option
     against its row siblings. `box-shadow: inset` is used instead
     of `border` so the row card's outer border isn't double-stacked
     and the cell content's existing padding stays unchanged. Color
     bumped to brand-orange at near-full opacity (0.55 → ~1.0) so
     the border reads with the same vibrance as the active-state
     borders used elsewhere on the page (involve cards, etc.)
     against the darker card background. */
  .inv-fit-cell.fit {
    box-shadow: inset 0 0 0 1px var(--_primitives---colors--brand-orange, #f56e38);
  }

  /* ──────────────────────────────────────────────────────────────────
     Mobile-only stacked layout for "Built for the long game". On
     mobile the per-row table format makes the comparison hard to
     scan because each row mixes a fit + not-fit pair. Group the
     three fit items into one card and the three not-fit items into
     another so the comparison reads as two side-by-side stacks.
     The desktop table is hidden here; the duplicate mobile markup
     just below it is revealed. */
  .inv-fit-table { display: none; }
  .inv-fit-mobile {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .inv-fit-mobile-card {
    background: var(--_primitives---opacity--white-5, #ffffff0d);
    border: 1px solid var(--_primitives---opacity--white-15, #ffffff26);
    padding: 1.125rem;
  }
  .inv-fit-mobile-card.is-fit {
    border-color: var(--_primitives---colors--brand-orange, #f56e38);
    background: rgba(245, 110, 56, 0.07);
  }
  .inv-fit-mobile-head {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-white-50, #eeeeee80);
    margin-bottom: 1.125rem;
  }
  .inv-fit-mobile-card.is-fit .inv-fit-mobile-head {
    color: var(--_primitives---colors--brand-orange, #f56e38);
  }
  .inv-fit-mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }
  .inv-fit-mobile-list li {
    position: relative;
    padding-left: 1rem;
    font-size: 1rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
  }
  .inv-fit-mobile-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--_primitives---colors--brand-orange, #f56e38);
  }
  .inv-fit-mobile-card.is-no .inv-fit-mobile-list li {
    color: rgba(255, 255, 255, 0.5);
  }
  .inv-fit-mobile-card.is-no .inv-fit-mobile-list li::before {
    background: rgba(255, 255, 255, 0.3);
  }
}

/* Desktop (≥768): keep the mobile stacked variant hidden - the
   3-column table above renders instead. */
@media screen and (min-width: 768px) {
  .inv-fit-mobile { display: none; }
}

/* Override the prior 2-col .inv-long-game grid (was: text-left + cards-right
   for the side-by-side fit cards). The new structure is a vertical stack:
   centered header → spacer → 3-column comparison table. */
.inv-long-game {
  display: block;
  grid-template-columns: none;
  gap: 0;
}

/* ============================================================
   §02 SRI'S JOURNEY
   Scroll-pinned timeline. The whole .sri-journey-stage gets
   pinned via ScrollTrigger; JS writes --sri-progress (0..1) onto
   the stage as the user scrolls. Line / fill / avatar / dots
   ALL share one coordinate system: top: calc(PAD + (100% - 2*PAD)
   * f), where f ∈ {progress, 0, 0.25, 0.5, 0.75, 1}. This is
   how the avatar lands exactly on the active dot.
   ============================================================ */
[data-sri-journey] {
  position: relative;
}

/* Desktop only - shared dark-grey section treatment. Used by Sri's
   Journey and the "hear from us every week" section so both read as
   distinct contained blocks against the pure-black sections above
   and below them.
   --sri-section-bg is published as a custom property so child
   elements (notably the avatar's box-shadow ring on the journey
   rail) can match the section's bg instead of hard-coding a
   contrasting near-black halo. The inset hairlines top + bottom
   give each section a subtle frame without a heavy border. */
@media screen and (min-width: 992px) {
  .section-bg-dark {
    --sri-section-bg: #161616;
    background: #161616;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  }
  /* Consistent breathable top + bottom padding so every dark-grey
     section has the same amount of space between its hairline frame
     and the heading inside. 7rem ≈ 112px - enough to clear the
     sticky navbar on Sri's Journey when it pins, and matches the
     spacing on the "hear from us every week" section so the two
     read as a coordinated set. */
  /* Selector bumped to section.section-bg-dark for higher specificity
     so it beats the .section_header30 + section rule (defined above)
     that was clamping the tribe section's padding-top to 5rem. */
  section.section-bg-dark .padding-section-large,
  section.section-bg-dark.section-bg-dark .padding-section-large {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  /* Journey-only: the redundant subhead is hidden because the
     heading + slide bodies below carry all the context. */
  [data-sri-journey] .section-header.is-center .max-width-large {
    display: none;
  }
}

/* Webflow's .text-size-medium ships with a hard-coded width: 506px which
   pins the subheading paragraph to that width - so even with the wrapper
   centered and text-align-center applied, the paragraph itself doesn't
   stretch to its parent and reads as left-aligned. Override that width
   inside this section so the subheading actually centers under the h2. */
[data-sri-journey] .section-header.is-center .text-size-medium {
  width: 100%;
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}

.sri-journey-stage {
  --sri-progress: 0;
  --sri-avatar: 0;
  /* Rail-pad now matches the avatar's half-height (32 = 64/2) so the
     avatar's TOP edge lands at the rail container's top edge -
     critical for top-aligning the avatar with the slide heading on
     the right. The extra padding also gives the first/last stops
     breathing room from the rail's vertical edges. */
  --sri-rail-pad: 32px;
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 64px;
  align-items: stretch;
  min-height: 44vh;
}

/* Standalone prev/counter/next bar is no longer rendered - the rail
   stops themselves are now clickable, so the redundant bar below the
   slides is hidden. Markup stays in the DOM so JS handlers (key nav,
   updateNavUi) still work as a no-op safety net. */
.sri-nav {
  display: none !important;
}
.sri-nav-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.78);
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Single transition declaration covers every state change below
     (hover / focus / disabled) so the button reads as one motion. */
  transition: background-color 0.22s ease, border-color 0.22s ease,
              color 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
}
.sri-nav-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.sri-nav-btn:hover:not(:disabled) {
  background: var(--_primitives---colors--brand-orange);
  border-color: var(--_primitives---colors--brand-orange);
  color: #fff;
  transform: translateY(-1px);
}
.sri-nav-btn:focus-visible {
  outline: 2px solid var(--_primitives---colors--brand-orange);
  outline-offset: 3px;
}
.sri-nav-btn:active:not(:disabled) {
  transform: translateY(0);
}
.sri-nav-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.sri-nav-counter {
  font-family: 'Figtree', sans-serif;
  font-feature-settings: 'tnum' 1;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 4.5rem;
  justify-content: center;
  user-select: none;
}
.sri-nav-counter-current {
  color: #fff;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sri-nav-counter-sep {
  color: rgba(255, 255, 255, 0.28);
}
.sri-nav-counter-total {
  color: rgba(255, 255, 255, 0.48);
}

/* Left rail - unified coordinate system. Min/max height bumped a
   notch so the 5 stops sit with extra vertical breathing room
   (~135px gap between adjacent stops at max-height). Avoids forcing
   the rail to stretch to the slides column. */
.sri-rail {
  position: relative;
  min-height: 540px;
  max-height: 620px;
  align-self: start;
}

.sri-rail-line {
  position: absolute;
  left: 28px;
  top: var(--sri-rail-pad);
  bottom: var(--sri-rail-pad);
  width: 2px;
  /* Slightly softer line - reads as a "future track" rather than a wire */
  background: rgba(255, 255, 255, 0.07);
  border-radius: 1px;
  z-index: 1;
}

.sri-rail-fill {
  position: absolute;
  left: 28px;
  top: var(--sri-rail-pad);
  height: calc((100% - var(--sri-rail-pad) * 2) * var(--sri-progress));
  /* Match the avatar's slide-to-next-milestone curve so the fill grows
     and the avatar both arrive at the same dot at the same time. */
  transition: height 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  width: 2px;
  /* Subtle vertical sheen on the fill - top is nearly the brand orange,
     bottom fades to a deeper variant. Reads as light running down a wire. */
  background: linear-gradient(
    to bottom,
    rgba(245, 110, 56, 0.7) 0%,
    var(--_primitives---colors--brand-orange) 40%,
    var(--_primitives---colors--brand-orange) 100%
  );
  border-radius: 1px;
  /* Faint orange halo around the lit part of the line */
  box-shadow: 0 0 10px rgba(245, 110, 56, 0.25);
  z-index: 2;
}

.sri-rail-avatar {
  position: absolute;
  left: 29px;
  top: var(--sri-rail-pad);
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  z-index: 4;
  /* Slower, ease-out-expo curve for a more luxurious arrival on each
     stop - the avatar coasts to its target instead of snapping. */
  transition: top 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: top;
}

/* Single mode: one link covers the full container; its <img> child
   provides the circular clip + outer ring (so the link itself can let
   the hover tooltip overflow). */
.sri-rail-avatar-link {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  color: inherit;
}
.sri-rail-avatar-link img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #0a0a0a;
  /* Ring colour matches the section's backdrop so the avatar visually
     "sits on" the section instead of having a contrasting black halo.
     --sri-section-bg is set on [data-sri-journey] further up - falls
     back to #050505 (near-black) for non-desktop contexts. */
  box-shadow: 0 0 0 6px var(--sri-section-bg, #050505);
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.2s ease;
}
.sri-rail-avatar-link.is-secondary { display: none; }
.sri-rail-avatar-link:hover img { transform: scale(1.05); }

/* Duo state - from milestone 3 (BSY) onward Prateek joins Sri on the
   rail. Two smaller circles (36px) sit side-by-side with a slight
   overlap so the duo reads as one unit but with both faces visible. */
.sri-rail-avatar.has-duo { width: 64px; height: 36px; }
.sri-rail-avatar.has-duo .sri-rail-avatar-link {
  width: 36px;
  height: 36px;
  inset: auto;
  top: 0;
}
.sri-rail-avatar.has-duo .sri-rail-avatar-link img {
  /* Duo ring also tracks the section bg so the two smaller circles
     don't pick up a hard black halo against the #161616 wash. */
  box-shadow: 0 0 0 3px var(--sri-section-bg, #050505);
}
.sri-rail-avatar.has-duo .sri-rail-avatar-link.is-primary { left: 0; z-index: 1; }
.sri-rail-avatar.has-duo .sri-rail-avatar-link.is-secondary {
  display: block;
  right: 0;
  z-index: 2;
}

/* Hover tooltip - sits above the avatar with a small connecting arrow
   pointing down at the photo. Site design language: dark surface, hair-
   line border, brand-orange CTA divider. Hidden until the parent link
   is hovered or focused. */
.sri-rail-tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 4px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  min-width: 180px;
  background: rgba(15, 15, 15, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
  font-family: 'Figtree', sans-serif;
}
.sri-rail-tooltip::after {
  /* Down-pointing arrow connecting tooltip to the avatar. */
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(15, 15, 15, 0.97);
}
/* Invisible bridge across the 14px gap between the tooltip and the
   avatar - keeps the link's :hover state alive when the cursor
   travels from one to the other (otherwise the tooltip vanishes
   mid-traversal). Only captures events when the tooltip itself is
   interactive (pointer-events: auto on hover). */
.sri-rail-tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}
.sri-rail-tooltip-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.2;
}
.sri-rail-tooltip-role {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
.sri-rail-tooltip-cta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--_primitives---colors--brand-orange);
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sri-rail-avatar-link:hover .sri-rail-tooltip,
.sri-rail-avatar-link:focus-visible .sri-rail-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.sri-rail-stop {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 64px;
  z-index: 3;
  /* Each stop is now the navigation - the standalone prev/next bar is
     gone. Cursor + a touch of hover lift signal the click affordance
     without competing with the active stop's brand-orange treatment. */
  cursor: pointer;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
@media (hover: hover) {
  .sri-rail-stop:not(.is-active):hover {
    transform: translateY(-50%) translateX(2px);
  }
  .sri-rail-stop.is-future:hover .sri-rail-stop-title,
  .sri-rail-stop.is-future:hover .sri-rail-stop-year {
    color: rgba(255, 255, 255, 0.7);
  }
}
.sri-rail-stop:focus-visible {
  outline: none;
}
.sri-rail-stop:focus-visible .sri-rail-stop-text {
  outline: 2px solid var(--_primitives---colors--brand-orange);
  outline-offset: 6px;
  border-radius: 2px;
}

.sri-rail-stop[data-sri-stop="0"] { top: calc(var(--sri-rail-pad) + (100% - var(--sri-rail-pad) * 2) * 0); }
.sri-rail-stop[data-sri-stop="1"] { top: calc(var(--sri-rail-pad) + (100% - var(--sri-rail-pad) * 2) * 0.25); }
.sri-rail-stop[data-sri-stop="2"] { top: calc(var(--sri-rail-pad) + (100% - var(--sri-rail-pad) * 2) * 0.5); }
.sri-rail-stop[data-sri-stop="3"] { top: calc(var(--sri-rail-pad) + (100% - var(--sri-rail-pad) * 2) * 0.75); }
.sri-rail-stop[data-sri-stop="4"] { top: calc(var(--sri-rail-pad) + (100% - var(--sri-rail-pad) * 2) * 1); }

/* Dot base - sized at 14px so its centre always sits on the rail line
   at x=29. State variants below use transform:scale() to change visual
   size without shifting the centre off the line. */
.sri-rail-dot {
  position: absolute;
  left: 22px;
  top: 50%;
  /* No CSS transition on the dot - ScrollTrigger's scrub flips classes
     several times during a single scroll, and chained class transitions
     get stuck in a queued state on Chrome (Web Animation API reports
     currentTime: 0 forever and the final value never applies). Snapping
     state changes IS correct visually here; the avatar's slow glide
     between stops carries all the premium motion in the section. */
  transform: translate(0, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-sizing: border-box;
}

/* ── Future stops (ahead of the avatar) ────────────────────────────
   Small, filled grey dots. They read as "track waiting to be lit"
   without the hollow ring look that pulled focus from the active /
   passed states. width/height stay at 10px and `left` shifts in to
   keep the dot centred on the rail line (always at x=29). */
.sri-rail-stop.is-future .sri-rail-dot {
  background: rgba(255, 255, 255, 0.32);
  border-color: transparent;
  width: 10px;
  height: 10px;
  left: 24px;
}

/* ── Passed stops (avatar has already gone through) ────────────────
   Filled orange with a soft outer halo - visually "checked off".
   12px so the active stop still feels biggest. */
.sri-rail-stop.is-passed .sri-rail-dot {
  background: var(--_primitives---colors--brand-orange);
  border-color: var(--_primitives---colors--brand-orange);
  width: 12px;
  height: 12px;
  left: 23px;
  box-shadow: 0 0 0 4px rgba(245, 110, 56, 0.08);
}

/* ── Active stop (currently under the avatar) ──────────────────────
   Full size, filled orange. Mostly hidden by the avatar but the
   strong fill prevents any "empty dot" flash during the transition. */
.sri-rail-stop.is-active .sri-rail-dot {
  background: var(--_primitives---colors--brand-orange);
  border-color: var(--_primitives---colors--brand-orange);
  width: 14px;
  height: 14px;
  left: 22px;
}

/* The text wrapper carries the state's fill - soft grey on passed
   (visited but not current), orange on active (currently here).
   No border-radius: the squared edges echo the section-tabs / bento
   pattern across the rest of the page. */
.sri-rail-stop-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 0;
  background: transparent;
}

/* Card fills - solid dark greys instead of white-alpha overlays so the
   stops match the rest of the page's card surfaces (#1a1a1a on the
   bento mosaic, #0a0a0a on the involve panel) instead of reading as
   a brighter white-tinted wash. */
.sri-rail-stop.is-passed .sri-rail-stop-text {
  background: #1a1a1a;
}

.sri-rail-stop.is-active .sri-rail-stop-text {
  background: #1a1a1a;
}

.sri-rail-stop-year {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.32);
  /* No transition - same scrub-induced "stuck transition" issue as the
     dot. Colour snaps when state class changes. */
}

.sri-rail-stop-title {
  font-size: 1.18rem;
  line-height: 1.2;
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

/* Selected stops (active + passed) read slightly larger so the rail's
   visited section feels weightier than the future one. Capped well
   below the slide title size so the rail never competes with the
   right-hand pane. */
.sri-rail-stop.is-active .sri-rail-stop-year   { font-size: 0.9rem; }
.sri-rail-stop.is-active .sri-rail-stop-title  { font-size: 1.28rem; }
.sri-rail-stop.is-passed .sri-rail-stop-title  { font-size: 1.22rem; }

/* Future text - dimmest tier (waiting). */
.sri-rail-stop.is-future .sri-rail-stop-year   { color: rgba(255, 255, 255, 0.3); }
.sri-rail-stop.is-future .sri-rail-stop-title  { color: rgba(255, 255, 255, 0.38); }

/* Passed text - middle tier (visited). Year picks up an orange tint
   to echo the filled dot, title brightens but isn't pure white. */
.sri-rail-stop.is-passed .sri-rail-stop-year   { color: rgba(245, 110, 56, 0.65); }
.sri-rail-stop.is-passed .sri-rail-stop-title  { color: rgba(255, 255, 255, 0.78); }

/* Active text - brightest tier. */
.sri-rail-stop.is-active .sri-rail-stop-year { color: var(--_primitives---colors--brand-orange); }
.sri-rail-stop.is-active .sri-rail-stop-title { color: #ffffff; }

/* Right stage - overlaid slides. Top-aligned so the active slide's
   header sits level with the rail's avatar TOP (which itself now sits
   flush with rail.top thanks to --sri-rail-pad: 32px matching the
   avatar's half-height). No padding-top here - slide title's top edge
   lines up directly with the rail container's top. */
.sri-slides {
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  align-items: start;
  justify-items: stretch;
  align-self: start;
  min-height: 540px;
}

.sri-slide {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
  pointer-events: none;
}

.sri-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0s;
}

.sri-slide-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sri-slide-title {
  margin: 0;
  color: #ffffff;
  font-family: 'Figtree', sans-serif;
  /* Reduced from clamp(1.6rem, 2.4vw, 2.15rem) - title was running
     ~34px at desktop, dropping 6-8px gives it a slimmer feel that
     fits the section into a single viewport without crowding. */
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: none;
}

.sri-slide-body {
  color: var(--paragraph-grey, rgba(255, 255, 255, 0.68));
  font-family: 'Figtree', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  /* Body can run wider too - long-form reads better at ~70ch than the
     previous ~54ch, and lines up with the wider title above. */
  max-width: 72ch;
  margin: 0;
}

/* Long-form slides (Almabase, Bharat SaaS Yatra) clamp to 3 lines by
   default; the .sri-slide-readmore button toggles .is-clamped to
   expand. The button sits absolutely at the bottom-right of the
   clamped paragraph so it reads as inline-with-truncation, not as a
   separate row underneath. When expanded, the wrap drops the absolute
   positioning so the button shows below the (now full) text.

   -webkit-line-clamp works across modern browsers; the keyword
   fallback below is for spec-compliant builds. */
.sri-slide-body-wrap {
  position: relative;
}
.sri-slide-body--clampable.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.sri-slide-readmore {
  margin-top: 4px;
  padding: 0 0 0 8px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Figtree', sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
}
.sri-slide-readmore:hover {
  color: rgba(255, 255, 255, 0.85);
  text-decoration-color: rgba(255, 255, 255, 0.55);
}
/* Inline-after-truncation: button parks bottom-right of the clamped
   paragraph; a soft fade behind it hides any text it overlaps so the
   transition between body copy and "Read more" reads clean. The fade
   uses the section's actual background colour (not pure black) so the
   button reads as a continuation of the panel instead of a black slab. */
.sri-slide-body-wrap:has(.sri-slide-body--clampable.is-clamped) .sri-slide-readmore {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-top: 0;
  padding-left: 28px;
  background: linear-gradient(to right, rgba(22, 22, 22, 0) 0, rgba(22, 22, 22, 0.92) 18px, #161616 100%);
}

.sri-slide-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
}

/* BSY slide uses a single full-width video tile instead of the
   default two-photo grid. */
.sri-slide-media.is-video {
  grid-template-columns: 1fr;
}

/* Shifu Ventures slide embeds the homepage tier-01 + tier-02 portfolio
   block instead of two photos. Drop the 2-col grid and stack the two
   tiers; tighten the inner card paddings so the 5-card fractional row
   doesn't crowd inside the narrower journey-slide width. */
.sri-slide-media.is-portfolio {
  grid-template-columns: 1fr;
  gap: 22px;
}
.sri-portfolio-embed {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
/* `.is-compact` variant: tier headings are removed and the tier gap
   tightens so the 8 cards present as ONE connected, compact stack
   inside the Shifu Ventures journey slide. */
.sri-portfolio-embed.is-compact {
  gap: 10px;
}
.sri-portfolio-embed.is-compact .sv-mission2-pc-row,
.sri-portfolio-embed.is-compact .sv-mission2-frac-row {
  gap: 8px;
}
.sri-portfolio-embed.is-compact .sv-mission2-pc-card {
  min-height: 7rem;
  padding: 0.75rem 0.875rem;
}
.sri-portfolio-embed.is-compact .sv-mission2-frac-card {
  padding: 0.75rem 0.75rem 0.875rem;
}
.sri-portfolio-embed .sv-mission2-frac-row {
  gap: 0.625rem;
}
/* Compact frac-card: the homepage min-height assumes an avatar/person
   block below the role; in this embed we only show status-bar +
   eyebrow + title, so drop the floor height + cancel the auto-margin
   that vertically centers .sv-mission2-frac-role into empty space. */
.sri-portfolio-embed .sv-mission2-frac-card {
  padding: 0.875rem 0.875rem 1rem;
  min-height: 0;
  gap: 0.5rem;
}
.sri-portfolio-embed .sv-mission2-frac-role {
  margin: 0;
}
.sri-portfolio-embed .sv-mission2-frac-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}
.sri-portfolio-embed .sv-mission2-pc-row {
  gap: 0.75rem;
}
/* PC card: same situation - homepage shipped with a metric block below
   the tagline. We removed it, so the card's 11rem floor + space-between
   distribution leaves a big gap under the tagline. Hold a fixed height
   that matches the adjacent "+95" tile and centre the logo + id block
   vertically inside it so the card reads as balanced rather than
   top-loaded with empty space below. */
.sri-portfolio-embed .sv-mission2-pc-card {
  padding: 1rem 1rem 1rem;
  min-height: 8.5rem;
  gap: 0.625rem;
  justify-content: center;
}
.sri-portfolio-embed .sv-mission2-pc-card-name {
  font-size: 1.125rem;
}
.sri-portfolio-embed .sv-mission2-pc-card-tagline {
  font-size: 0.8125rem;
}
.sri-portfolio-embed .sv-mission2-pc-card-logo {
  height: 1.75rem;
}
/* The "+93" tile is a sibling of the PL/CMF cards; preserve a clean
   square-ish aspect now that the cards next to it are short. */
.sri-portfolio-embed .sv-mission2-pc-card.is-plus {
  min-height: 0;
}

/* Mobile: collapse to a single column for both tiers so cards stay
   readable instead of squishing five abreast. */
@media screen and (max-width: 767px) {
  .sri-portfolio-embed .sv-mission2-frac-row {
    grid-template-columns: 1fr 1fr;
  }
  .sri-portfolio-embed .sv-mission2-pc-row {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 479px) {
  .sri-portfolio-embed .sv-mission2-frac-row {
    grid-template-columns: 1fr;
  }
}

.sri-video-frame {
  /* Taller ratio (2.6:1 vs prior 2:1) keeps the video tile wide-cinema
     so it doesn't dominate the slide vertically - the body copy + the
     metric row below need room without the slide overflowing the rail. */
  aspect-ratio: 2.6 / 1;
  background: #000;
  border: 0;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

/* Two stacked <video> elements crossfade for seamless transitions
   between clips. While one plays the other is preloaded with the
   next source so playback never has to wait on network. */
.sri-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  background: #000;
}
.sri-video.is-active { opacity: 1; }

/* Same viewfinder L-bracket corners as the photo placeholders so
   the video tile shares the section's visual language. */
.sri-video-frame::before {
  --c: rgba(255, 255, 255, 0.2);
  --len: 18px;
  --thick: 1px;
  content: "";
  position: absolute;
  inset: 16px;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) top    left  / var(--len) var(--thick) no-repeat,
    linear-gradient(var(--c), var(--c)) top    left  / var(--thick) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) top    right / var(--len) var(--thick) no-repeat,
    linear-gradient(var(--c), var(--c)) top    right / var(--thick) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left  / var(--len) var(--thick) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left  / var(--thick) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--len) var(--thick) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--thick) var(--len) no-repeat;
}

/* Centered orange-ringed play affordance. */
.sri-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(245, 110, 56, 0.14);
  border: 1px solid rgba(245, 110, 56, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--_primitives---colors--brand-orange);
  pointer-events: none;
}
.sri-video-play svg { margin-left: 3px; }

.sri-video-frame .sri-photo-label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  color: rgba(255, 255, 255, 0.42);
  font-family: 'Figtree', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  z-index: 1;
}

.sri-photo {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(255, 255, 255, 0.025) 0%,
      transparent 60%
    ),
    #141414;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

/* Viewfinder L-brackets in all 4 corners - echoes the brand's L-bracket
   "focus" pattern at a much subtler weight, so the placeholder reads as
   "frame waiting for a photo" rather than an empty box. */
.sri-photo::before {
  --c: rgba(255, 255, 255, 0.2);
  --len: 18px;
  --thick: 1px;
  content: "";
  position: absolute;
  inset: 16px;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) top    left  / var(--len) var(--thick) no-repeat,
    linear-gradient(var(--c), var(--c)) top    left  / var(--thick) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) top    right / var(--len) var(--thick) no-repeat,
    linear-gradient(var(--c), var(--c)) top    right / var(--thick) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left  / var(--len) var(--thick) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left  / var(--thick) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--len) var(--thick) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--thick) var(--len) no-repeat;
}

/* Centered "image" icon - replaces the plain plus sign with a refined
   image-frame glyph so the placeholder reads as "photo coming". */
.sri-photo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='M21 15l-5-5L5 21'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.sri-photo-label {
  position: absolute;
  left: 18px;
  bottom: 18px;
  color: rgba(255, 255, 255, 0.42);
  font-family: 'Figtree', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  z-index: 1;
}

/* When a real photo is dropped into the placeholder, the image fills
   the frame and we hide all the empty-state affordances (corner
   L-brackets, image-icon, the "Photo · …" caption). The 1px white-7
   border is also dropped here - it was meant to define the empty
   placeholder; once a real photo is in, the photo IS the frame and
   the extra hairline only reads as a visible inset border. */
.sri-photo:has(img) {
  background: #0a0a0a;
  border: 0;
}
.sri-photo:has(img)::before,
.sri-photo:has(img)::after { display: none; }
.sri-photo:has(img) .sri-photo-label { display: none; }
.sri-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  /* Slight zoom so any thin dark border baked into the source image
     (a common artefact when photos are exported with a frame) falls
     outside the visible 4:3 crop. With object-fit: cover the extra
     ~3% scale crops a tiny strip from each edge - the focal subject
     stays centred and there's no longer a visible inset frame. */
  transform: scale(1.035);
  transform-origin: center center;
}

.sri-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 10px;
}
.sri-metrics.is-two {
  grid-template-columns: repeat(2, 1fr);
}

/* Metric card: thin orange accent stripe across the top, then a big
   number and an UPPERCASE tracked label below. The stripe ties the
   metric block to the brand-orange column treatment used on the fit
   table without flooding the card itself with orange. */
.sri-metric {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

/* (Removed the previous ::before orange top-stripe - the metric cards
   read cleaner without it.) */

.sri-metric-num {
  color: var(--_primitives---colors--brand-orange);
  font-family: 'Figtree', sans-serif;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.sri-metric-label {
  color: rgba(255, 255, 255, 0.58);
  font-family: 'Figtree', sans-serif;
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE-ONLY badge that sits above each slide on phones. Hidden on
   desktop - desktop carries the year/title in the left rail instead.
   ════════════════════════════════════════════════════════════════ */
.sri-slide-badge { display: none; }

/* ════════════════════════════════════════════════════════════════
   MOBILE-ONLY sticky horizontal timeline. Hidden on desktop.
   The dot row + the connecting line live inside a relative-positioned
   inner wrapper; the OUTER wrapper sticks to the top of the viewport
   while the user scrolls the slide column.
   ════════════════════════════════════════════════════════════════ */
.sri-mobile-track { display: none; }

/* ════════════════════════════════════════════════════════════════
   ≤991px - Phones & tablets in portrait.
   Layout strategy:
   • Desktop's left rail is hidden.
   • A sticky horizontal timeline rides the top of the section (the
     small year dots stay onscreen as the user scrolls through the
     stacked slides).
   • Each slide carries a year/title badge so the milestone is
     anchored even if the sticky strip ever scrolls off (older WebKit).
   • IntersectionObserver in JS lights the dot that matches whichever
     slide is currently most visible; tapping a dot smooth-scrolls to
     the matching slide.
   ════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 991px) {
  .sri-journey-stage {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
  }
  .sri-rail {
    display: none;
  }

  /* Sticky timeline strip - visible only here. Solid background so
     content scrolling underneath doesn't bleed through; a soft scrim
     fades to transparent BELOW the strip via a ::after pseudo so the
     boundary between strip and content feels gradual instead of harsh.
     Sticky `top` is pinned to the navbar height (`--nav-h` published
     by inline JS on <html>, defaults to 82px) so the strip parks
     just BELOW the fixed navbar instead of behind it - previously
     `top: 0` was placing the strip directly under the navbar's
     stacking context, where it was invisible as the user scrolled. */
  .sri-mobile-track {
    display: block;
    position: sticky;
    top: var(--nav-h, 82px);
    z-index: 20;
    background: #0a0a0a;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 14px 20px 16px;
    margin-bottom: 28px;
  }

  /* Soft fade below the sticky strip - gives a subtle gradient hand-off
     between the strip and the slide content underneath as the user
     scrolls. */
  .sri-mobile-track::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0));
    pointer-events: none;
  }

  .sri-mobile-track-inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 0 8px;
  }

  /* The horizontal track line. Sits behind the dots; pinned to dot 0
     and dot 4 centres at runtime by JS so it never visibly overshoots
     either end. */
  .sri-mobile-track-line {
    position: absolute;
    top: 7px;
    left: 0;
    width: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
    z-index: 0;
  }

  /* Orange fill grows left → right as the user progresses through the
     milestones. JS pegs left/width directly in pixels so the orange
     line begins precisely under dot 0 and ends precisely under the
     current active dot. NO CSS transition: the same scrub-restart
     issue that affected the dot states applies here - width/left
     transitions get stuck at the queued state. Snap is fine; the
     orange flag updates as you scroll, no animation needed. */
  .sri-mobile-track-fill {
    position: absolute;
    top: 7px;
    height: 2px;
    width: 0;
    left: 0;
    background: var(--_primitives---colors--brand-orange);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(245, 110, 56, 0.35);
    z-index: 1;
  }

  /* Each dot button. Year label sits underneath. */
  .sri-mobile-dot {
    position: relative;
    z-index: 2;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: inherit;
    font: inherit;
    /* Bigger hit area than the visible mark for thumbable tapping. */
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  .sri-mobile-dot-mark {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0a0a0a;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    box-sizing: border-box;
  }

  .sri-mobile-dot.is-passed .sri-mobile-dot-mark {
    background: var(--_primitives---colors--brand-orange);
    border-color: var(--_primitives---colors--brand-orange);
  }

  .sri-mobile-dot.is-active .sri-mobile-dot-mark {
    background: var(--_primitives---colors--brand-orange);
    border-color: var(--_primitives---colors--brand-orange);
    box-shadow: 0 0 0 4px rgba(245, 110, 56, 0.18);
  }

  .sri-mobile-dot-year {
    font-family: 'Figtree', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1;
  }

  .sri-mobile-dot.is-passed .sri-mobile-dot-year {
    color: rgba(245, 110, 56, 0.72);
  }

  .sri-mobile-dot.is-active .sri-mobile-dot-year {
    color: var(--_primitives---colors--brand-orange);
  }

  /* Slides: all visible, stacked, scroll-into-view targets. */
  .sri-slides {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-height: 0;
    padding-top: 0;
    /* Provide scroll offset so smooth-scroll to a slide lands just
       below the sticky timeline strip instead of hidden behind it. */
    scroll-padding-top: 80px;
  }

  .sri-slide {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
    padding: 0;
    border: 0;
    background: transparent;
    /* Each slide is a scroll target; offset compensates for sticky. */
    scroll-margin-top: 80px;
  }

  /* In-slide badge - small kicker that visually anchors the slide to
     its milestone even when the sticky strip is scrolled past. */
  .sri-slide-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 2px solid var(--_primitives---colors--brand-orange);
    margin-bottom: 14px;
    align-self: flex-start;
  }
  .sri-slide-badge-year {
    color: var(--_primitives---colors--brand-orange);
    font-family: 'Figtree', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
  }
  .sri-slide-badge-title {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Figtree', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
  }

  /* Title and body - single-column phone friendly sizes. */
  .sri-slide-title {
    font-size: 1.45rem;
    line-height: 1.22;
    letter-spacing: -0.01em;
    max-width: none;
  }
  .sri-slide-body {
    font-size: 1rem;
    line-height: 1.6;
    max-width: none;
  }

  /* Photo + metric grids collapse a step earlier on this breakpoint. */
  .sri-slide-media {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
  }

  .sri-metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
  }
  .sri-metric {
    padding: 16px 14px 14px;
  }
  .sri-metric-num {
    font-size: 1.65rem;
  }
  .sri-metric-label {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
  }
}

/* ≤767px - phones. Single-column photos + metrics. */
@media screen and (max-width: 767px) {
  .sri-mobile-track {
    padding: 12px 14px 14px;
    margin-bottom: 22px;
  }
  .sri-mobile-track-inner {
    padding: 0 4px;
  }
  .sri-mobile-dot-year {
    font-size: 0.65rem;
  }
  .sri-slide-media {
    grid-template-columns: 1fr 1fr;
  }
  /* Metrics: 3 metrics in ONE row on mobile (was: stacked 3 rows).
     Card padding + font sizes tightened so the 3-up fits in 375px
     without overflow. The .is-two case (AlphaBase 2-metric layout)
     is overridden further down so it stays 2-up. */
  .sri-metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .sri-metric {
    padding: 12px 8px 10px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    text-align: center;
    gap: 4px;
    align-items: center;
    justify-items: center;
  }
  .sri-metric-num {
    font-size: 1.25rem;
  }
  .sri-metric-label {
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    line-height: 1.25;
  }
  .sri-slide-title {
    font-size: 1.35rem;
  }
  /* Larger inter-slide gap so each slide's badge feels visually
     anchored to its OWN heading below, not equidistant between
     the previous slide's content above and its own heading below.
     Pair this with a smaller badge-to-heading gap (margin-bottom
     on the badge) so the badge clearly belongs to the slide below. */
  .sri-slides {
    gap: 64px;
  }
  .sri-slide-badge {
    margin-bottom: 8px;
  }
}

/* ≤479px - small phones. Tighten further. */
@media screen and (max-width: 479px) {
  .sri-mobile-track {
    padding: 10px 10px 12px;
  }
  .sri-mobile-dot-year {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
  }
  .sri-mobile-dot-mark {
    width: 12px;
    height: 12px;
  }
  .sri-mobile-track-line,
  .sri-mobile-track-fill {
    top: 6px;
  }
  .sri-slide-title {
    font-size: 1.25rem;
  }
  .sri-slide-body {
    font-size: 0.94rem;
  }
  .sri-slide-media {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Footer CTA heading - aligned to the global heading-style-h3-2 size
   (1.5rem) so this footer matches the "Want to build a profitable $10M
   ARR company?" footer on about.html and the other site footers. The
   prior override (1.75rem, tight line-height) forced an awkward three-
   line wrap inside the .max-width-small footer column; matching the
   default size lets "Back the next 100 AI-first B2B" sit on one line
   above the "Companies" tail. */
h2.inv-footer-cta-h {
  font-size: 1.5rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE PASS - comprehensive fixes for investors page on phones.
   Addresses: hero centring, mosaic toggle stickiness + taller cards,
   "looking-for" heading wrap, headings left-align, involve video
   overflow, body grid-pattern dim-down. (L-corner removal handled
   globally above.)
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* #1 - Hero sizes to its natural content on mobile. The desktop
     rule above this block (`.section_header30 .padding-section-large.hero`)
     sets `min-height: min(92vh, 700px)` so the hero feels "anchored"
     on desktop; on mobile that forces ~700px of section height when
     the actual content (H1 + intro + video tile) only needs ~480px,
     leaving a 200px empty band below the video tile that pushes the
     next section out of reach. Drop the min-height entirely on
     mobile so the hero ends right after the video tile and the next
     section starts immediately below. */
  .section_header30 .padding-section-large.hero,
  .section_header30 .padding-section-custom.about-hero,
  .section_header30 .padding-section-large {
    min-height: 0;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  /* #2a - Strategic Investors mosaic: the Founders / Operators
     toggle lives permanently in `position: fixed` at the bottom of
     the viewport on mobile. The `.is-floating` class (added by the
     IntersectionObserver below while the bento section is on-screen)
     fades it in via opacity + a small translateY slide. Toggling
     opacity instead of position is what makes the enter/exit smooth
     - position changes can't be CSS-transitioned, so doing it this
     way avoids the visual snap when the section comes into / leaves
     view.

     Design language: this site uses **zero radius** on every UI
     element. The floating bar inherits that - straight 90° corners,
     same 5% horizontal inset as `.padding-global` (cards' edges), so
     it aligns flush with the cards above it.

     `display: flex` (was inline-flex) + flex children below = the
     two tabs split the 90%-wide bar 50/50 instead of sitting on the
     left at their natural content width and leaving the right half
     of the bar empty (the user reported "I don't know why it is on
     the side"). Now reads as a proper segmented control spanning
     the full bar width. */
  .inv-bento-tabs.is-fullwidth {
    position: fixed !important;
    left: 5% !important;
    right: 5% !important;
    top: auto !important;
    /* Lifted WELL UP off the bottom edge so the toggle sits clearly
       above the band where bento-card stamps render during scroll,
       AND well above the iOS home-indicator strip. Combined with an
       opaque solid background below, there's no way for cards
       below it in the scroll to visually clip into the toggle. */
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0.3125rem !important;
    z-index: 2147483600 !important; /* below copy-editor overlay only */
    isolation: isolate;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    /* SOLID opaque background — no rgba transparency, no
       backdrop-filter. iOS Safari sometimes mis-composites
       backdrop-filter layers on top of GPU-accelerated reveal
       animations, which was letting card content "show through"
       even with 94% opacity. Solid #0b0b0b kills that entirely. */
    background: #0b0b0b !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition: opacity 0.32s ease, transform 0.32s ease;
    will-change: opacity, transform;
  }
  .inv-bento-tabs.is-fullwidth.is-floating {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  /* Tabs split the floating bar equally + 52px touch target so each
     tap is fat-finger-safe. min-width override neutralises the
     desktop 7rem floor that was pinning each tab to a content-sized
     box on the left of the fixed container. */
  .inv-bento-tabs.is-fullwidth .inv-bento-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    justify-content: center;
  }
  .inv-bento-tabs.is-fullwidth .inv-bento-tab.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-weight: 600;
  }

  /* #2b - Card heights - let the cards size to their natural content
     so there's no empty space above the photo. Top padding only needs
     to clear the credibility strip (which is `position: absolute;
     top: 0` and ~30px tall) + a tight breathing-room margin. */
  .inv-bento-card.is-a,
  .inv-bento-card.is-b,
  .inv-bento-card.is-c {
    min-height: 0;
    padding-top: 2.5rem;
  }
  /* Tighter inter-card spacing on mobile - 12px felt loose stacked
     with the stamp eating top space inside each card. */
  .inv-bento-grid {
    gap: 8px;
  }

  /* #2c - Credibility stamp on mobile: same chip treatment as
     desktop - small panel anchored top-right of the card, sitting
     just above the name so it doesn't overlap. Flush to the right
     edge of the card (no margin) so the panel reads as part of the
     card frame rather than a floating chip. Shrink the padding +
     font slightly on the smaller cards so the chip stays in
     proportion to the now-shorter card body. */
  .inv-bento-stamp {
    top: 12px;
    right: 0;
    left: auto;
    text-align: left;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .inv-bento-card.is-a .inv-bento-stamp,
  .inv-bento-card.is-b .inv-bento-stamp,
  .inv-bento-card.is-c .inv-bento-stamp {
    font-size: 10px;
    padding: 6px 10px;
    letter-spacing: 0.08em;
  }

  /* #2d - Underline spans stay `inline-block` on mobile so the
     orange arc SVG (sized at 100% of the span) only spans the
     actual text width - not the heading's full row. The explicit
     `<br>` and `<br class="mob-only-br">` tags in the heading HTML
     handle any required line breaks; we don't force display:block
     on the span anymore. */
  .section-tabs-header h2 [fd-svg-underline-text],
  .inv-long-game-text h2 [fd-svg-underline-text],
  .section-header h2 [fd-svg-underline-text],
  .heading-style-h2 [fd-svg-underline-text],
  .heading-style-h3-2 [fd-svg-underline-text] {
    display: inline-block;
    max-width: 100%;
  }

  /* #3 - "What we're looking for from Strategic Investors." heading
     was clipping. Allow it to wrap to 2 lines naturally - the parent
     had inherited a fixed width / overflow rule we override here. */
  .section-tabs-header h2,
  .inv-long-game-text h2,
  .section-header h2,
  .heading-style-h2 {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  /* Ditto the body paragraph next to the heading. */
  .section-tabs-header p,
  .section-header p,
  .inv-long-game-sub {
    max-width: 100%;
  }

  /* #4 - Left-align all centred headings + subheads on mobile only.
     Desktop's "section-stage" centred treatment doesn't translate at
     narrow widths - left-alignment scans cleaner on a phone. */
  .section-header.is-center,
  .section-tabs-header.is-center,
  .inv-long-game-text.is-center,
  .section-header.is-center .max-width-large,
  .section-header.is-center .max-width-small,
  .section-tabs-header.is-center .max-width-large,
  .section-tabs-header.is-center .max-width-small {
    text-align: left !important;
    align-items: flex-start !important;
  }
  .section-header.is-center .max-width-large,
  .section-tabs-header.is-center .max-width-large {
    margin-left: 0;
    margin-right: 0;
  }

  /* #5 - Monthly-update video trio. `aspect-ratio: 16/9` combined
     with `min-height: 220px` forces the element's WIDTH to be ≥ 391px
     to satisfy the ratio, which blows past a 375px viewport. Drop the
     min-height so the parent's actual width drives the size. */
  .inv-involve-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-width: 100%;
  }
  .inv-involve-pane,
  .inv-involve-trio {
    max-width: 100%;
    width: 100%;
  }

  /* Body grid pattern is now hidden globally (see base body rule). */
}

/* Small phones - extra trim on top of the 767px block. */
@media (max-width: 479px) {
  .inv-bento-card.is-a,
  .inv-bento-card.is-b,
  .inv-bento-card.is-c {
    min-height: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════
   DESKTOP ONE-VIEWPORT FIT - Strategic Investors bento section
   The section currently overflows a typical 1280×900 laptop viewport
   (~1058px tall vs 900px available). Trim padding + row heights +
   intra-section spacer so heading + subheading + Founders/Operators
   toggle + all 9 mosaic cards fit in a single screen at 100% zoom.
   Mobile (≤767) is untouched - those rules above keep the mobile
   floating-toggle + stacked-card layout intact.
   ──────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 768px) {
  /* Padding intentionally left to the shared .section-bg-dark rule
     (7rem top/bottom) so the tribe section's vertical rhythm matches
     Sri's Journey and the "hear from us every week" section. The
     mosaic row heights are still tightened below so the cards remain
     compact even with the larger outer padding. */
  /* Tighter row heights for the 3-row mosaic - keeps the card grid
     from running tall now that section padding is back to 7rem. */
  .inv-bento-grid {
    grid-template-rows: 160px 160px 130px;
    gap: 8px;
  }
  /* Reduce the spacer between the section header and the toggle so
     the header doesn't push the mosaic down further than needed. */
  section:has(.inv-bento-grid) .spacer-56 {
    height: 16px;
  }

  /* Card-border on TOP of the photo. The card's inset box-shadow
     paints UNDER child content, so cut-out portraits that touch
     the card edge cover the right-side border. A pointer-events:none
     pseudo above all children re-paints the 1px frame on top. */
  .inv-bento-card {
    box-shadow: none;
  }
  .inv-bento-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    z-index: 3;
  }
  /* Border stays static on hover - the only hover affordance on
     these cards is the LinkedIn icon reveal. */
  /* Stamp + LinkedIn icon already use z-index 2/3; bump them so they
     stay above the new border-on-top pseudo (which is z-index 3). */
  .inv-bento-stamp { z-index: 4; }
  .inv-bento-li    { z-index: 5; }

  /* Card B (Kesavan, Harshit, Sunil, Hitesh) - smaller photo column
     so the cut-out portrait sits more contained inside the card,
     not bleeding to the right edge. Name + role typographic step
     trimmed 2-3px so "Harshit Agarwal" fits on a single line at
     the smaller meta column. */
  .inv-bento-card.is-b {
    grid-template-columns: 135px 1fr;
  }
  .inv-bento-card.is-b .inv-bento-photo-wrap { width: 135px; }
  .inv-bento-card.is-b .inv-bento-name { font-size: 19px; }
  .inv-bento-card.is-b .inv-bento-role { font-size: 13px; }

  /* Card A - same trim on the typography so "Raveen Sastry" and
     "Karthik Ramamoorthy" stay on a single line and visually pair
     with the new card B size. Photo column stays at 240 since
     A-cards have room for it. */
  .inv-bento-card.is-a .inv-bento-name { font-size: 23px; }
  .inv-bento-card.is-a .inv-bento-role { font-size: 14px; }

  /* Card C (smaller mosaic cells) - photo column trimmed so the
     portrait doesn't run into the credibility strip in the top-
     right, and name dropped from 18 → 15 so it never wraps under
     the strip's right edge. Role + logo nudged smaller in step
     so the credentials block stays tight. */
  .inv-bento-card.is-c {
    grid-template-columns: 115px 1fr;
  }
  .inv-bento-card.is-c .inv-bento-photo-wrap { width: 115px; }
  .inv-bento-card.is-c .inv-bento-name { font-size: 15px; }
  .inv-bento-card.is-c .inv-bento-role { font-size: 12px; }
  .inv-bento-card.is-c .inv-bento-stamp { font-size: 10px; padding: 7px 10px; }
}

/* Mobile-only-break helpers - paired with `<br class="..-break">` tags
   inserted into copy that should wrap on mobile but stay on one line
   on desktop. Default: hidden everywhere. The mobile rule inside the
   767 block re-enables them with `display: inline`. */
.sv-mob-break,
.mob-only-br { display: none; }
@media (max-width: 767px) {
  .sv-mob-break,
  .mob-only-br { display: inline; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE PATCHES (2026-05-23) - desktop untouched.
   These overrides land AFTER every earlier .inv-* rule in this file
   so they win the cascade without needing !important on most props.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* (1) Bento - strip the outer "card around cards" treatment so the
         individual cards sit directly on the page background. */
  .inv-bento {
    background: transparent;
    border: 0;
    padding: 0;
  }

  /* (2) Ask panels - let the visible panel size to its content.
         Desktop grid-stacks the two panels to keep height stable on
         toggle; on mobile that stable height was the MAX of both,
         leaving a big dead band under the shorter capital panel. */
  .inv-ask-panel-stack {
    display: block;
  }
  .inv-ask-panel-stack > .inv-ask-cases {
    grid-area: auto;
  }
  .inv-ask-panel-stack > .inv-ask-cases[hidden] {
    display: none !important;
  }

  /* (3) "Most investors get a quarterly PDF.<br>You hear from us…" -
         drop the forced line break on mobile so the sentence flows
         naturally into the next clause instead of stranding on its
         own line. Desktop keeps the <br> for the intended 2-line
         rhythm. */
  .involve-head-break-desktop { display: none; }

  /* (4) Standalone media panel is hidden on mobile - the rail items
         carry their own collapse/expand state. !important guards
         against the desktop `.inv-involve-media { display: grid }`
         rule that's lower in the cascade. */
  .inv-involve-media { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE PASS - Sri's Journey + Involve + Footer (2026-05-20j)
   Strictly mobile-only overrides (max-width: 767px). Desktop is
   untouched. Pairs with JS additions for:
     - Sri photo carousel (auto-cycle every 2s)
     - Navbar hide via IntersectionObserver while Sri's section is on screen
   ──────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* ───────── Sri's Journey ───────── */

  /* (1) Heading + subheading left-aligned. The base "center the
     section header on mobile" override above flips the wrapper to
     left, but the inner copy block uses `.text-align-center` +
     `.align-center` which apply text-align: center / margin: 0 auto
     directly to the paragraph - override both inside this section.
     Also override the desktop-only Sri rule at line ~6452 that pins
     the subhead paragraph to text-align: center + margin-inline: auto. */
  [data-sri-journey] .section-tabs-header.is-center,
  [data-sri-journey] .section-header.is-center,
  [data-sri-journey] .section-tabs-header.is-center .max-width-large,
  [data-sri-journey] .section-header.is-center .max-width-large {
    text-align: left;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
  }
  [data-sri-journey] .text-align-center {
    text-align: left;
  }
  [data-sri-journey] .align-center {
    margin-left: 0;
    margin-right: 0;
  }
  [data-sri-journey] .section-header.is-center .text-size-medium {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  /* (2) Mobile timeline dots + line vertically centered in the strip.
     The base style sits the line at top:7px and stacks the year
     label below the dot, which puts the line near the top of the
     strip. Add top padding equal to (gap + year-height + bottom
     padding) so the dot's vertical center lands on the strip's
     mid-line. */
  .sri-mobile-track {
    padding-top: 30px;
  }

  /* (3+4) Hide the page navbar while Sri's journey section is on
     screen - the section ships its own sticky timeline strip, and
     the navbar overlapping that strip was hampering readability of
     the dots/labels. JS adds `.sri-nav-hidden` to .navbar-wrap when
     the section intersects the viewport. Smooth fade + slide-up
     transition so the navbar feels intentional, not glitchy.

     `!important` is required because the navbar-wrap has a
     `[load-nav-reveal]` keyframe animation with `fill-mode: both`,
     which holds its end-state values (opacity: 1, translateY(0))
     after the page-load animation completes. Without !important the
     animation-end values out-rank these regular declarations and
     the hide never takes effect. */
  .navbar-wrap {
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .navbar-wrap.sri-nav-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-100%) !important;
  }

  /* (5) Body copy clamped to 3 lines across every slide. The two
     slides that ship with `.sri-slide-body--clampable` already have a
     "Read more" button wired to drop the .is-clamped class; for the
     other slides the user wanted the same compact treatment, so we
     apply the 3-line clamp universally. When a clampable body has
     its .is-clamped removed (user tapped Read more), restore the
     full text. */
  .sri-slide-body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  .sri-slide-body.sri-slide-body--clampable:not(.is-clamped) {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  /* Slides that don't have a Read-more button still have hidden tail
     copy. Show a tap-to-expand affordance via a small Read more
     button inserted by JS for them too. Visually matches the
     existing `.sri-slide-readmore` style (white-grey underlined
     text) for a consistent look across all 5 slides. */
  .sri-slide-readmore-auto {
    display: inline-block;
    align-self: flex-start;
    margin-top: 2px;
    padding: 0;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Figtree', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255, 255, 255, 0.3);
  }
  /* Match the existing `.sri-slide-readmore` (Almabase/Bharat Yatra)
     to the same compact spacing + body-matching font size so all
     five Read more buttons read as one component. */
  .sri-slide-readmore {
    margin-top: 2px !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  .sri-slide-readmore-auto:hover {
    color: rgba(255, 255, 255, 0.85);
    text-decoration-color: rgba(255, 255, 255, 0.55);
  }

  /* (6) Replace the 2-up stacked photo grid with an auto-rotating
     crossfade carousel. All photos stack on top of each other via
     absolute positioning; JS toggles `.is-cycle-active` every 2s to
     drive the crossfade. Aspect ratio fixed at 4:3 so the slide
     height is stable while photos swap. */
  .sri-slide-media:not(.is-video):not(.is-portfolio) {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    grid-template-columns: 1fr;
    background: #0a0a0a;
  }
  .sri-slide-media:not(.is-video):not(.is-portfolio) .sri-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 0.55s ease;
    z-index: 1;
  }
  .sri-slide-media:not(.is-video):not(.is-portfolio) .sri-photo.is-cycle-active {
    opacity: 1;
    z-index: 2;
  }
  .sri-slide-media:not(.is-video):not(.is-portfolio) .sri-photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Unify Read more behavior across all 5 Sri slides - the
     existing Almabase / Bharat Yatra slides ship with the
     `.sri-slide-body-wrap:has(.sri-slide-body--clampable.is-clamped)
     .sri-slide-readmore` rule that absolutely-positions the button
     inline with the truncated body. On mobile we want EVERY slide
     to show its Read more as a plain block below the body - matches
     the auto-injected button on slides 0/1/4. Reset the absolute
     positioning + fade gradient here. */
  .sri-slide-body-wrap:has(.sri-slide-body--clampable.is-clamped) .sri-slide-readmore,
  .sri-slide-body-wrap .sri-slide-readmore {
    position: static;
    right: auto;
    bottom: auto;
    margin-top: 6px;
    padding: 0;
    background: none;
  }

  /* Photon Legal name - force a line-break between the two words
     on mobile so it wraps to two lines like "Curious Men Films"
     does naturally. The <br class="sv-mob-break"> in the markup is
     `display: none` on desktop (rule below) and visible here. */
  .sv-mob-break {
    display: inline;
  }

  /* Status bar (CLOSED / CLOSING 2026 chip strip) vertically
     centered. The bar's `margin: -1.25rem -1.125rem 0` was sized
     for the desktop card padding (1.25rem / 1.125rem). On mobile
     the card padding is smaller (0.625rem), so the desktop negative
     margin bleeds the bar's top way past the card edge, the card's
     overflow:hidden clips that bleed, and the centered text inside
     the bar ends up visually in the TOP of the visible strip
     instead of the middle. Match the negative margin to the
     mobile card padding so no excess bleed/clip happens. */
  .sri-portfolio-embed .sv-mission2-frac-status-bar {
    margin: -0.625rem -0.625rem 0;
    /* More top padding compensates for the negative-margin bleed so the
       uppercase pill reads as centred inside the visible strip. */
    padding: 0.75rem 0.625rem 0.4375rem;
  }

  /* Bottom gap after Sri's journey section before FAQ - the
     adjacent sections both use .padding-section-large but the
     transition still felt tight on mobile. Wider gap so the
     section break reads as a clear breath. */
  [data-sri-journey] .padding-section-large {
    padding-bottom: 5rem;
  }

  /* "Investor Involved" card inside each time-slide - trim the
     stock padding so the card hugs its content more tightly on
     mobile (was 0.85rem 1.1rem + 1.5rem top padding-via-`.inv-time-
     case .inv-time-investor` rule → too much dead space around a
     short kicker + single-row content). The double class selector
     beats the desktop `.inv-time-case .inv-time-investor` rule. */
  .inv-time-case .inv-time-investor,
  .inv-time-investor {
    margin-top: 0.875rem;
    padding: 0.625rem 0.875rem;
  }
  .inv-time-investor-kicker {
    margin-bottom: 0.375rem;
  }

  /* (7) Fractional cards inside the Shifu Ventures slide:
        Row 1: CMO · CPO · CFO         (3 cards span 2 cols each)
        Row 2: CRO · CHRO              (2 cards span 3 cols each)
     6-column grid hosts the asymmetric layout. */
  .sri-portfolio-embed .sv-mission2-frac-row {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
  }
  .sri-portfolio-embed .sv-mission2-frac-card {
    grid-column: span 2;
  }
  .sri-portfolio-embed .sv-mission2-frac-card:nth-child(4),
  .sri-portfolio-embed .sv-mission2-frac-card:nth-child(5) {
    grid-column: span 3;
  }
  /* Shrink the eyebrow + title slightly so 3 cards fit in row 1 at
     375px without text overflow. Center-align eyebrow + title so
     each card reads as a balanced label (was left-aligned, which
     felt off-center against the centered green/orange status pill
     above). */
  .sri-portfolio-embed .sv-mission2-frac-eyebrow {
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    text-align: center;
  }
  .sri-portfolio-embed .sv-mission2-frac-title {
    font-size: 1.1rem;
    text-align: center;
  }
  .sri-portfolio-embed .sv-mission2-frac-role {
    align-items: center;
  }
  .sri-portfolio-embed .sv-mission2-frac-card {
    padding: 0.625rem 0.625rem 0.75rem;
  }
  .sri-portfolio-embed .sv-mission2-status,
  .sri-portfolio-embed .sv-mission2-soon-status {
    font-size: 0.55rem;
    letter-spacing: 0.06em;
  }

  /* (8) Portfolio cards: PL + CMF side by side in row 1, +93 card
     spans both columns in row 2. */
  .sri-portfolio-embed .sv-mission2-pc-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .sri-portfolio-embed .sv-mission2-pc-card.is-plus {
    grid-column: span 2;
  }

  /* (9) AlphaBase / Bharat SaaS Yatra metrics - stack number on top,
     label below (was: number left / label right). Center both so the
     pair of metric cards reads as twin stats. */
  .sri-metric {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    text-align: center;
    gap: 4px;
    justify-items: center;
  }
  .sri-metric-num {
    display: block;
  }
  .sri-metric-label {
    display: block;
  }
  /* Keep the two-card AlphaBase row side by side at the wider phone
     widths (the base mobile rule collapses metrics to a single
     column; for the .is-two case AlphaBase looks better as 2 cards
     in a row). */
  .sri-metrics.is-two {
    grid-template-columns: 1fr 1fr;
  }

  /* ───────── Involve active state ───────── */
  /* Drop the 4-corner L-brackets, use a thin orange border + faint
     orange wash on the active item - matches the "What we're looking
     from Strategic Investors" treatment elsewhere on the page. */
  .inv-involve-item .focused-bg,
  .inv-involve-item .focused-icon {
    display: none;
  }
  .inv-involve-item.is-active {
    border-color: rgba(255, 255, 255, 0.10);
    background: #121212;
  }

  /* ───────── Footer ───────── */
  /* Last three lines of the footer (copyright + Privacy + Terms) were
     right-aligned because .footer11_credit-text inherits a global
     text-align: right. On mobile that fights the rest of the footer
     which is left-aligned; flip these three back to left. */
  .footer11_bottom-wrapper .footer11_credit-text,
  .footer11_credit-text {
    text-align: left;
  }
}

/* Small-phone (≤479) tweaks: keep frac cards readable in 3-wide row */
@media screen and (max-width: 479px) {
  .sri-portfolio-embed .sv-mission2-frac-title {
    font-size: 1rem;
  }
  .sri-portfolio-embed .sv-mission2-frac-card {
    padding: 0.5rem 0.5rem 0.625rem;
  }
}

/* Quad state - at the Shifu Ventures milestone all 4 partners appear:
   Sri + Prateek Sethi on top, Panda + Nahata below (2x2 cluster). Added
   14 Jul 2026 (CoS 2) per Prateek. */
.sri-rail-avatar-link.is-tertiary,
.sri-rail-avatar-link.is-quaternary { display: none; }
.sri-rail-avatar.has-quad { width: 64px; height: 64px; }
.sri-rail-avatar.has-quad .sri-rail-avatar-link { width: 32px; height: 32px; inset: auto; }
.sri-rail-avatar.has-quad .sri-rail-avatar-link img { box-shadow: 0 0 0 3px var(--sri-section-bg, #050505); }
.sri-rail-avatar.has-quad .sri-rail-avatar-link.is-primary { left: 0; top: 0; z-index: 1; }
.sri-rail-avatar.has-quad .sri-rail-avatar-link.is-secondary { display: block; right: 0; top: 0; z-index: 2; }
.sri-rail-avatar.has-quad .sri-rail-avatar-link.is-tertiary { display: block; left: 0; bottom: 0; top: auto; z-index: 3; }
.sri-rail-avatar.has-quad .sri-rail-avatar-link.is-quaternary { display: block; right: 0; bottom: 0; top: auto; z-index: 4; }

/* Case-study bento photos (added by CoS 1, 14 Jul): greyscale by default,
   restore full colour on hover — calms the "in the trenches" section.
   Scoped to the bento so no other imagery is affected. */
.inv-csb-mini-photo img {
  filter: grayscale(1) brightness(1.15) contrast(1.03);
  transition: filter .4s ease;
}
.inv-csb-mini:hover .inv-csb-mini-photo img {
  filter: grayscale(0) brightness(1) contrast(1);
}

/* ============================================================
   HERO v2 (CoS 3, 14 Jul, per Prateek): clean centered hero to
   match the home page + grid texture + a compact "watch the
   founder video" chip (replaces the big two-column video).
   The chip keeps data-hero-video-open, so it opens the same
   lightbox (js/investors.js).
   ============================================================ */
.section_header30 { position: relative; }
/* Grid backdrop on a masked layer, matching the home hero: the grid fades out
   in the centre (behind the headline, so the text reads) and shows at the edges. */
.section_header30::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 0%, transparent 25%, #000 80%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 0%, transparent 25%, #000 80%);
  pointer-events: none;
  z-index: 0;
}
.section_header30 > * { position: relative; z-index: 1; }
/* Fill the first viewport and vertically centre the content, like the home
   hero (the section's default padding is top-heavy: 192px top / 64px bottom,
   which left an empty band below). */
.section_header30 .padding-section-large.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.inv-hero-grid.is-centered {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 0;
}
.inv-hero-grid.is-centered .inv-hero-text {
  max-width: 820px;
  margin: 0 auto;
}
.inv-hero-grid.is-centered .inv-hero-text h1 { text-wrap: balance; }
.inv-hero-nowrap { white-space: nowrap; }

.inv-hero-vidchip {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2.25rem;
  padding: 0.5rem 1.15rem 0.5rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  color: #c9c9c9;
  font-family: inherit;
  text-align: left;
  transition: border-color .18s, background .18s;
}
.inv-hero-vidchip:hover { border-color: #f56e38; background: rgba(245, 110, 56, .08); }
.inv-hero-vidchip:focus-visible { outline: 2px solid #f56e38; outline-offset: 3px; }
.inv-hero-vidchip-thumb {
  position: relative;
  width: 58px;
  height: 37px;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.inv-hero-vidchip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-hero-vidchip-thumb::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.inv-hero-vidchip-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
}
.inv-hero-vidchip-play svg { margin-left: 1px; }
.inv-hero-vidchip-txt { font-size: 0.875rem; font-weight: 600; line-height: 1.2; color: #fff; }
.inv-hero-vidchip-txt small { display: block; font-weight: 400; font-size: 0.72rem; color: #8f8f8f; margin-top: 3px; }

/* "in the trenches" subparagraph: fit 2 lines, not 3 (was capped 660px).
   !important to override the inline .is-wide-head rule in investors.html. Added by CoS 1. */
.section-tabs-header.is-wide-head p { max-width: 820px !important; }

/* Sri-journey headline: it has a <br> between two sentences but the 695px
   header cap made each sentence wrap (4 lines). Widen just this section so
   each sentence fits one line -> clean 2 lines. Scoped via [data-sri-journey]. Added by CoS 1. */
[data-sri-journey] .section-tabs-header { max-width: 820px; }

/* Hero (centered variant): Webflow's .text-size-medium has a
   hard-coded width: 506px which pins the sub-heading to the left
   of the 820px centered column (text centers inside its own box,
   so it reads ~150px left of the h1's axis). Stretch + re-center
   it, with a comfortable reading measure. */
.inv-hero-grid.is-centered .inv-hero-text .text-size-medium {
  width: 100%;
  max-width: 46rem; /* 3-line measure at desktop */
  margin-inline: auto;
}
.inv-hero-grid.is-centered .inv-hero-text .text-size-medium em { white-space: nowrap; }

/* The spine: the one canonical mechanic sentence, said in the hero,
   the process, and the footer CTA. Slightly brighter than the sub
   so it reads as the claim, not the caption. */
.inv-hero-spine {
  margin-top: 1.1rem;
  font-size: 1.05rem;
  color: #eee;
  font-weight: 500;
}
/* Hero proof strip: two verifiable facts under the CTAs. */
.inv-hero-proof {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  margin-top: 1.75rem;
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: #eeeeee80;
}
.inv-hero-proof-dot { width: .3rem; height: .3rem; border-radius: 50%; background: #f56e38; flex: none; }
/* Fit table tie-back: the wall as evidence for the fit criteria. */
.inv-fit-tieback {
  margin-top: 2.25rem; text-align: center;
  font-size: .95rem; color: #eeeeee80;
}
/* Footer CTA sub-line */
.inv-footer-cta-sub { margin-top: .9rem; font-size: 1rem; color: #eeeeee80; }
.inv-footer-cta-mail { color: #f56e38; text-decoration: none; }
.inv-footer-cta-mail:hover { text-decoration: underline; }

/* Drop the decorative faded background numbers/symbols on the investor page:
   the ghost $/%/count on the metric tiles and the ghosted 1-7 on the PortCo +
   fractional cards. Not required (Prateek, 15 Jul). Investors-only sheet, so
   the home-page mission numbers are unaffected. */
.sva-metric-ghost,
.sv-mission2-card-num { display: none !important; }

/* Fix overflow on leader names */
.sva-leader-name {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.4;
}