<!doctype html>
<html lang="en">
<head>
<%- include('../partials/head', { meta }) %>
</head>
<body data-page="careers">
<%- 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">Careers</p>
        <h1 style="font-size: var(--fs-h1);">Join the team backing tomorrow's founders</h1>
        <p class="lead">We're a small, high-conviction team. Everyone here sources deals, supports founders, and shapes the firm.</p>
      </div>
    </div>
  </section>

  <section class="section section--tight">
    <div class="container">
      <div class="culture-grid" data-reveal-group>
        <div class="benefit-card card" data-reveal>
          <div class="benefit-card__icon"><i data-lucide="heart-handshake"></i></div>
          <h3 style="font-size:1.05rem; margin-bottom:0.5rem;">Founder-First Culture</h3>
          <p>Every role here ultimately exists to make founders' lives easier — that ethos shapes how we work internally too.</p>
        </div>
        <div class="benefit-card card" data-reveal>
          <div class="benefit-card__icon"><i data-lucide="graduation-cap"></i></div>
          <h3 style="font-size:1.05rem; margin-bottom:0.5rem;">Steep Learning Curve</h3>
          <p>Small deal teams mean real ownership from day one, across sourcing, diligence, and portfolio support.</p>
        </div>
        <div class="benefit-card card" data-reveal>
          <div class="benefit-card__icon"><i data-lucide="globe"></i></div>
          <h3 style="font-size:1.05rem; margin-bottom:0.5rem;">Comprehensive Benefits</h3>
          <p>Top-tier health coverage, unlimited PTO, 401(k) match, and an annual learning stipend.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section" style="background: var(--surface-2);">
    <div class="container">
      <div class="section-head" data-reveal>
        <p class="section-eyebrow">Open Positions</p>
        <h2>Current opportunities</h2>
      </div>

      <div class="job-list" data-reveal-group>
        <% if (!jobs.length) { %>
          <p class="empty-state">No open roles right now — check back soon.</p>
        <% } %>
        <% jobs.forEach(function(job, i) { %>
          <a href="/careers/<%= job.slug %>" class="job-row" data-reveal style="--reveal-index: <%= i %>" data-cursor-hover>
            <div>
              <h3 style="font-size:1.05rem;"><%= job.title %></h3>
              <div class="job-row__meta">
                <span><%= job.department %></span>
                <span><%= job.location %></span>
                <span><%= job.employment_type.replace('-', ' ') %></span>
              </div>
            </div>
            <span class="icon">→</span>
          </a>
        <% }); %>
      </div>
    </div>
  </section>
</main>

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