/* ==========================================================================
   Team page components only. Everything shared lives in site.css.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------
   Editorial, generous measure. The right column carries no photograph, only
   the brand spark watermark and a plate corner behind it, so the hero never
   reads as a void even though the copy stands alone. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 3.5vw, 3rem);
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}
.team-hero .lede {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  max-width: 44ch;
}
.hero__art { display: none; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .hero__art {
    display: block;
    position: relative;
    min-height: 260px;
  }
  .hero__art .spark--wm {
    top: 50%;
    right: 6%;
    translate: 0 -50%;
  }
}

/* --- Co-founders: plain typographic grid, no cards, no avatars --------
   One 16:9 photograph spans the shell above the section heading, so the
   heading sits between the photo and the names and the frame never reads as
   a literal team portrait. The hairline sits above every person, including
   the first, so the grid reads as one continuous sheet rather than four
   boxes. */
.founders__media { margin-bottom: var(--space-head); }
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3rem);
  row-gap: 2.5rem;
}
.person {
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.person__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.person__role {
  margin-top: 0.375rem;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--teal-ink);
}
.person__note {
  margin-top: 0.625rem;
  color: var(--ink-2);
  max-width: 34ch;
}
@media (max-width: 600px) {
  .people { grid-template-columns: minmax(0, 1fr); }
}

/* --- Clinical advisors: rows on mist -----------------------------------
   Rows on the left, a 3/4 photograph in the right column at desktop. Name
   and role left, one line right within each row, hairline between rows. */
.advisors-split {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
.advisors__media { order: -1; }
@media (min-width: 1024px) {
  .advisors-split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: center;
  }
  .advisors__media { order: 0; }
}
.advisors__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.5rem clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  padding-block: 1.5rem;
}
.advisors__row + .advisors__row { border-top: 1px solid var(--rule); }
.advisors__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.advisors__role {
  margin-top: 0.25rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--teal-ink);
}
.advisors__note { color: var(--ink-2); max-width: 46ch; }
@media (max-width: 800px) {
  .advisors__row { grid-template-columns: minmax(0, 1fr); }
}

/* --- Closing CTA ---------------------------------------------------------
   Mist callout, vertical stack, one button, plate corner behind and a spark
   watermark clipped inside, matching the shared closing CTA treatment. */
.cta { --flow: 1rem; }
.cta p { max-width: 46ch; color: var(--ink-2); }
.cta .btn { margin-top: 0.5rem; }
/* The callout keeps its own stacking order above the spark watermark. */
.cta > :not(.spark) { position: relative; z-index: 1; }