/* Our Team page — page-scoped layout on top of scroll.css (TeamV2; editorial portraits per design-system-v2 §10). */


/* ── Hero ── */
.team-hero { padding-block: clamp(96px, 12.2vw, 176px); }
.team-hero__content { gap: 24px; max-width: 820px; }
.team-hero__title { font-size: clamp(56px, 6.67vw, 96px); line-height: 1; }
.team-hero__lead { max-width: 520px; }
@media (max-width: 620px) {
  .team-hero { padding-block: 72px 80px; }
  .team-hero__content { gap: 18px; }
  .team-hero__title { font-size: clamp(40px, 12.4vw, 50px); line-height: 1.02; }
  .team-hero__title br { display: none; }
}

/* ── All People, No Agency ── */
.team-core__head { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 64px; margin-bottom: 56px; }
.team-core__head > p { max-width: none; justify-self: stretch; color: var(--slate); }
@media (max-width: 900px) { .team-core__head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .team-core__head { margin-bottom: 28px; gap: 14px; } .team-core__head br { display: none; } }

/* ── Our Team: coral editorial panel ── */
.team-people .container--wide { padding-inline: clamp(var(--gutter), 3.34vw, 48px); }
/* Centred with its eyebrow, per Dan. This is a flex COLUMN, so align-items is
   what centres the boxes; text-align alone would only centre the text inside
   a heading box still sitting hard left. Same trap as .flow in rule 148. */
.team-people__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.team-people__eyebrow { color: rgba(26,26,26,0.7); }
/* Was clamp(40px, 5.84vw, 84px), which ran bigger than .fs-xl (54px) and ate
   most of the viewport before the portraits appeared. Brought down to sit with
   the rest of the display scale. The <br>s still set the three lines. */
.team-statement { max-width: 1060px; margin-inline: auto; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.01em; color: var(--ink); text-wrap: initial; }

.team-grid { display: grid; }
.team-grid--lead { grid-template-columns: repeat(2, minmax(0, 270px)); justify-content: center; column-gap: clamp(40px, 7vw, 120px); margin-top: 96px; }
.team-grid--rest { grid-template-columns: repeat(4, minmax(0, 260px)); justify-content: space-between; gap: 56px 40px; margin-top: 88px; }
/* the founders' source images are only ~300px wide (the live site has no larger version), so they stay small to stay sharp */
.team-grid--founders { grid-template-columns: repeat(2, minmax(0, 270px)); justify-content: center; column-gap: clamp(40px, 7vw, 120px); }

.team-person { container-type: inline-size; min-width: 0; }
.team-person__img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: center 16%; border-radius: 6px; background: rgba(26,26,26,0.08); }
/* The role sits UNDER the name, left-aligned, for everyone (Oct 7, per Dan).
   This used to be a wrapping row: the role was flex: none beside the name, so
   it sat hard against the card's right edge, and only dropped to its own line
   when name + role would not fit. That split the grid 12 one way and 4 the
   other on identical-width cards, which read as a bug rather than a rule. A
   column makes all sixteen the same and gives the long roles the full card
   width, so most of them stop wrapping at all. */
.team-person__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 18px; }
.team-person__name { min-width: 0; font: 600 clamp(22px, 7.6cqi, 28px)/1.1 var(--font-display); letter-spacing: .3px; text-transform: uppercase; color: var(--ink); }
/* no nowrap and inline spans: the markup splits long roles across two spans to
   control the break when they were squeezed right. With the full width they can
   flow, and break on their own only if they genuinely need to. */
.team-person__role { font: 500 13px/1.35 var(--font-body); letter-spacing: .2px; color: rgba(26,26,26,0.85); }
.team-person__role > span { display: inline; }

.team-grid--rest .team-person__name { font-size: clamp(17px, 8cqi, 20px); }
.team-grid--rest .team-person__role { font-size: 12px; }

@container (max-width: 200px) {
  .team-grid--rest .team-person__meta { gap: 6px; margin-top: 14px; }
}

.team-people__body { max-width: 60ch; margin-top: 88px; font: 400 22px/1.6 var(--font-body); color: var(--ink); }

/* ── Founders (charcoal) ── */
.team-grid--founders .team-person__img { object-position: center 12%; background: var(--placeholder); }
.team-grid--founders .team-person__meta { margin-top: 20px; }
.team-grid--founders .team-person__name { color: var(--cream); }
.team-grid--founders .team-person__role { color: var(--slate); }

@media (max-width: 1024px) {
  .team-grid--lead { column-gap: 32px; margin-top: 72px; }
  .team-grid--rest { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 24px; margin-top: 64px; }
  .team-grid--founders { column-gap: 48px; }
  .team-people__body { margin-top: 72px; font-size: 20px; }
}
@media (max-width: 900px) {
  .team-grid--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; margin-top: 56px; }
  .team-grid--rest { margin-top: 48px; }
}
/* 16 people: 4 across, then 2 across, never a lone last row */
@media (max-width: 760px) {
  .team-grid--rest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .team-grid--founders { column-gap: 32px; }
}
@media (max-width: 620px) {
  .team-people__head { gap: 14px; }
  .team-statement { font-size: clamp(26px, 7.6vw, 32px); line-height: 1.05; }
  .team-grid--lead { grid-template-columns: minmax(0, 1fr); row-gap: 36px; margin-top: 40px; }
  .team-grid--rest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; margin-top: 40px; }
  .team-grid--founders { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .team-person__meta { margin-top: 14px; }
  .team-people__body { margin-top: 48px; font-size: 17px; line-height: 1.6; }
}

/* ── Grow With Us (cream) ── */
.team-join__split { gap: 72px; }
.team-join__copy { gap: 22px; }
.team-join__lead { max-width: 520px; }
.team-join__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 8px; }
.team-join__roles { padding: 18px 38px; font-size: 15px; }
.team-join__photo { height: 600px; border-radius: var(--radius-card); overflow: hidden; }
.team-join__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .team-join__split { gap: 44px; }
  .team-join__photo { height: clamp(300px, 60vw, 480px); }
}
@media (max-width: 620px) {
  .team-join__copy { gap: 18px; }
  .team-join__ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 20px; }
  .team-join__roles { width: 100%; padding: 20px 24px; }
  .team-join__ctas .link-underline { align-self: center; }
  .team-join__photo { height: 300px; }
}

/* core values: fuller cards with a short proof list pinned to the bottom */
.team-core__card { gap: 14px; }
.team-core__card .icon-tile { margin-bottom: 6px; }
.team-core__card .list-arrow { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hair-2); }