<!doctype html>
<html lang="en">
<head>
<%- include('../partials/head', { meta }) %>
</head>
<body data-page="team">
<%- include('../partials/header', { heroDark: false }) %>

<main id="main-content">
  <section class="section--tight" style="padding-top: calc(var(--header-h) + var(--space-xl));">
    <div class="container">
      <div class="section-head section-head--center" data-reveal>
        <p class="section-eyebrow" style="justify-content:center">Team</p>
        <h1 style="font-size: var(--fs-h1);">The people behind the partnership</h1>
        <p class="lead">Investors and operators who've built, scaled, and backed category-defining companies.</p>
      </div>
    </div>
  </section>

  <section class="section section--tight">
    <div class="container">
      <% var deptLabels = { leadership: 'Leadership', investment: 'Investment Team', platform: 'Platform', operations: 'Operations' }; %>
      <% Object.keys(deptLabels).forEach(function(dept) { %>
        <% if (grouped[dept] && grouped[dept].length) { %>
          <div class="team-dept">
            <h2 style="font-size:1.25rem; margin-bottom: var(--space-md);" data-reveal><%= deptLabels[dept] %></h2>
            <div class="team-grid" data-reveal-group>
              <% grouped[dept].forEach(function(member, i) { %>
                <a class="team-card" href="/team/<%= member.slug %>" data-reveal style="--reveal-index: <%= i % 4 %>" data-cursor-hover>
                  <div class="team-card__photo">
                    <% if (member.photo_path) { %>
                      <img src="<%= member.photo_path %>" alt="<%= member.name %>" loading="lazy" />
                    <% } else { %>
                      <%= member.name.split(' ').map(function(n){return n[0];}).join('') %>
                    <% } %>
                  </div>
                  <div class="team-card__base">
                    <div class="team-card__name"><%= member.name %></div>
                    <div class="team-card__title"><%= member.title %></div>
                  </div>
                  <div class="team-card__overlay">
                    <div class="team-card__name"><%= member.name %></div>
                    <div class="team-card__title"><%= member.title %> — <%= member.focus_areas %></div>
                    <p style="font-size:0.8125rem; color:rgba(255,255,255,0.75); margin-bottom:0.75rem; white-space: pre-line;"><%= member.bio %></p>
                    <span style="font-size:0.75rem; font-weight:600; color:#fff; text-decoration:underline;">View profile →</span>
                  </div>
                </a>
              <% }); %>
            </div>
          </div>
        <% } %>
      <% }); %>
    </div>
  </section>
</main>

<%- include('../partials/footer') %>
</body>
</html>
