/* Meet the team: a row of panels that opens one at a time. Collapsed panels
   carry name, role and a one-line sentence; the open one gives the panel over
   to footage. Hover drives it on pointer devices, tap and keyboard everywhere. */
.team {
  /* Same frame as What we do and Our impact — see --frame-max in styles.css. */
  --frame-inset: calc(var(--frame-pad) + max(0px, (100% - var(--frame-max) - 2 * var(--frame-pad)) / 2));
  --panel-ink: #f7f2fa;
  position: relative;
  z-index: 1;
  padding: clamp(5rem, 10vw, 9rem) var(--frame-inset) clamp(5rem, 9vw, 8rem);
  background: #382748;
  color: #f7f2fa;
  font-family: var(--font-ui);
}

/* ── Head ─────────────────────────────────────────────────────────────────── */

.team-head {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.team-eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.5rem;
  color: #d5b9f0;
  font: var(--w-bold) .67rem/1.2 var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.team-eyebrow::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}
.team-head h2 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.4rem, 4.6vw, 4.4rem);
  font-weight: var(--w-medium);
  line-height: .94;
  letter-spacing: -.058em;
  text-wrap: balance;
}
.team-intro { display: grid; gap: 1.75rem; justify-items: start; }
.team-intro p {
  max-width: 42ch;
  margin: 0;
  color: #d5c9dd;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.55;
}
.team-more {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: #f7f2fa;
  font: var(--w-bold) .62rem/1 var(--font-ui);
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}
.team-more span { color: #d5b9f0; font-size: 1rem; letter-spacing: 0; transition: transform .3s ease; }
.team-more:hover span { transform: translateX(.35rem); }

/* Visible before a panel is opened: a small piece of interaction copy that
   explains the profiles contain films without turning every portrait into a
   labelled card. */
.team-film-hint {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: fit-content;
  margin: -1.35rem 0 1rem auto;
  color: #d5c9dd;
  font: var(--w-bold) .6rem/1.2 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.team-film-hint__play {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 1px solid rgba(33, 27, 41, .28);
  border-radius: 50%;
}
.team-film-hint__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: .12rem;
  border-top: .24rem solid transparent;
  border-bottom: .24rem solid transparent;
  border-left: .36rem solid currentColor;
}

/* ── The row ──────────────────────────────────────────────────────────────── */

.team-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Written by team.js so one panel can take the room. Interpolates cleanly
     because the track count never changes. */
  transition: grid-template-columns .75s cubic-bezier(.22, 1, .36, 1);
}
.team-panel { min-width: 0; }

.team-panel-trigger {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(28.8rem, 67.2vh, 48rem);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: #100d15;
  color: var(--panel-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.team-panel-trigger:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }

.team-panel-media { position: absolute; inset: 0; }
.team-panel-media img,
.team-panel-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The portraits are square and TLH already ships them as a light purple
     duotone, so a tall panel crops the sides and the head needs to sit high in
     the frame rather than dead centre. */
  object-position: 50% 22%;
  /* Collapsed panels sit back and darken so the copy over them stays legible
     on what is a light source image; the open one comes forward to its duotone. */
  filter: grayscale(1) contrast(1.04) brightness(.5);
  transition: filter .7s ease, opacity .6s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.team-panel-media video { position: absolute; inset: 0; opacity: 0; }
.team-panel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 6, 14, .88) 8%, rgba(8, 6, 14, .34) 52%, rgba(8, 6, 14, .5));
  transition: background .6s ease;
}

.team-panel-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.4rem, 1.8vw, 2rem);
}
.team-panel-index {
  color: rgba(244, 240, 248, .5);
  font: var(--w-bold) .6rem/1 var(--font-ui);
  letter-spacing: .16em;
}
.team-panel-name {
  margin-top: auto;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: var(--w-demi);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.team-panel-role {
  margin-top: .55rem;
  color: #c8bcd8;
  font: var(--w-bold) .58rem/1.3 var(--font-ui);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.team-panel-line {
  max-width: 34ch;
  margin-top: .9rem;
  color: rgba(238, 233, 245, .82);
  font-size: .93rem;
  line-height: 1.5;
}
/* The open panel trades the sentence for the invitation to watch. */
.team-panel-watch {
  display: flex;
  align-items: center;
  gap: .7rem;
  height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  font: var(--w-bold) .6rem/1 var(--font-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: opacity .4s ease, height .5s ease, margin-top .5s ease;
}
.team-panel-watch::before {
  content: "";
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: #fff
    /* play triangle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='9,6 19,12 9,18' fill='%235f3c91'/%3E%3C/svg%3E")
    center / .85rem no-repeat;
}

/* ── Open state ───────────────────────────────────────────────────────────── */

.team-panel.is-open .team-panel-media img { filter: grayscale(0) contrast(1) brightness(.92); transform: scale(1.03); }
.team-panel.is-open .team-panel-media video { opacity: 1; filter: grayscale(0) contrast(1) brightness(.8); }
.team-panel.is-open .team-panel-media::after {
  background: linear-gradient(to top, rgba(8, 6, 14, .82) 10%, rgba(8, 6, 14, .18) 60%, rgba(8, 6, 14, .34));
}
.team-panel.is-open .team-panel-name { font-size: clamp(1.5rem, 2.3vw, 2.35rem); }
.team-panel.is-open .team-panel-line { opacity: 0; height: 0; margin-top: 0; overflow: hidden; }
.team-panel.is-open .team-panel-watch { height: 2.1rem; margin-top: 1.1rem; opacity: 1; }

.team-panel-name,
.team-panel-line { transition: font-size .55s ease, opacity .35s ease, height .5s ease, margin-top .5s ease; }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.team-footer {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.team-count {
  margin: 0;
  color: #d5c9dd;
  font: var(--w-bold) .62rem/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em;
}
.team-count strong { color: #f7f2fa; font-weight: var(--w-bold); }
.team-progress { position: relative; flex: 1; max-width: 12rem; height: 1px; background: rgba(247, 242, 250, .25); }
.team-progress span {
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
  position: absolute;
  inset: 0 auto 0 0;
  /* Was a hardcoded 25% for a four-panel row that no longer exists. Driven off
     the real count now, so the bar stays honest as people are added. */
  width: calc(100% / var(--team-count, 3));
  background: var(--violet);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
  transform-origin: left center;
}
.team-arrows { display: flex; gap: .6rem; margin-left: auto; }
.team-arrows button {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border: 1px solid rgba(247, 242, 250, .28);
  border-radius: 50%;
  background: transparent;
  color: #f7f2fa;
  font-size: 1rem;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.team-arrows button:hover { border-color: #8b62b5; background: #8b62b5; color: #fff; }
.team-arrows button:focus-visible { outline: 2px solid #d5b9f0; outline-offset: 3px; }

/* ── Wide ─────────────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  .team-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  /* Left-aligned in the right-hand column (client request, 30 Sep). */
  .team-intro { justify-items: start; text-align: left; }
  .team-intro p { text-align: left; }
}

/* ── Narrow ───────────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
  /* No room to squeeze four columns: stack them and let each open in place. */
  .team-film-hint { margin: -1.25rem 0 1rem; }
  .team-row { grid-template-columns: 1fr !important; gap: .75rem; }
  .team-panel-trigger { height: clamp(21.6rem, 62.4vw, 31.2rem); }
  .team-panel.is-open .team-panel-trigger { height: clamp(28.8rem, 91.2vw, 40.8rem); }
  .team-panel-trigger { transition: height .55s cubic-bezier(.22, 1, .36, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .team-row,
  .team-panel-trigger,
  .team-panel-media img,
  .team-panel-media video,
  .team-panel-name,
  .team-panel-line,
  .team-panel-watch,
  .team-progress span,
  .team-more span { transition: none; }
}

/* ── Film ─────────────────────────────────────────────────────────────────── */

/* The hover loop sells the person; this is where their film actually plays. */
.team-film {
  width: min(92vw, 68rem);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.team-film::backdrop { background: rgba(14, 10, 20, .82); backdrop-filter: blur(6px); }

.team-film__frame { position: relative; }

.team-film video {
  display: block;
  width: 100%;
  max-height: 82svh;
  border-radius: .25rem;
  background: #0e0a14;
}

.team-film__name {
  margin: .9rem 0 0;
  color: #fff;
  font-size: .72rem;
  font-weight: var(--w-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.team-film__close {
  position: absolute;
  top: -1rem;
  right: -1rem;
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--violet);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.team-film__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* A phone plays video full screen, letterboxed — so does this.

   The lightbox was a 94vw card floating in a blurred backdrop: at 393x852 that
   is a 369x208 picture, 23% of the screen. The aspect was never wrong (the box
   measured 1.778 against the file's own 1280x720), it was simply small. The
   dialog now fills the screen on black and the video sits across the full width
   with bands above and below, which is what a 16:9 film looks like on a phone
   held upright — and turning the phone puts it landscape at nearly full bleed,
   with the native controls' own fullscreen button there as well. */
@media (max-width: 899px) {
  .team-film {
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100svh;
    max-height: 100svh;
    margin: 0;
    display: grid;
    place-items: center;
    background: #000;
  }
  .team-film::backdrop { background: #000; backdrop-filter: none; }
  .team-film__frame { display: grid; place-items: center; width: 100%; }
  /* Sized by its own proportions against both screen edges rather than forced
     to full width: width:100% with a max-height gave an element 852x297 in
     landscape — a 2.87 box for a 1.778 film — so the picture was pillarboxed
     inside a box that was itself the wrong shape. Auto on both axes with a cap
     on each keeps the element exactly the film's ratio at any rotation, and the
     black around it is the dialog. */
  .team-film video {
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: calc(100svh - 5rem);
    border-radius: 0;
    background: #000;
  }
  .team-film__name { margin: 1rem 1.25rem 0; text-align: center; }
  /* Inside the screen now that the dialog reaches its edges. */
  .team-film__close {
    position: fixed;
    top: max(.75rem, env(safe-area-inset-top));
    right: .75rem;
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Author-level `display: grid` on the phone dialog outranks the browser's
   default `dialog:not([open]) { display: none; }`. Reinstate the closed state
   explicitly so the full-screen player and fixed close button cannot leak over
   the page (most visibly at the footer). */
dialog.team-film:not([open]) { display: none; }