/* ============================================================
   09-team — team cards with duotone→color portrait hover + tilt
   All selectors scoped under .sec-09-team
   ============================================================ */

.sec-09-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-gap);
}

@media (max-width: 860px) {
  .sec-09-team__grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}

.sec-09-team__card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: visible;
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.5rem 0;
  transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}

.sec-09-team__card:hover,
.sec-09-team__card:focus-within {
  box-shadow: var(--shadow-lift);
}

/* --- Arched signature frame: media wrapper stays overflow-visible so
   the offset ring never clips, even under the card's tilt transform --- */
.sec-09-team__media {
  position: relative;
  overflow: visible;
}

.sec-09-team__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  background: none;
  opacity: 0.25;
  transform: translate(10px, 10px) scale(1);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}

.sec-09-team__card:hover .sec-09-team__ring,
.sec-09-team__card:focus-within .sec-09-team__ring {
  opacity: 1;
  transform: translate(10px, 10px) scale(1.02);
}

.sec-09-team__photo-wrap {
  position: relative;
  z-index: 1;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  background: var(--bone-2);
}

.sec-09-team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.05) brightness(0.98);
  transition: filter 600ms var(--ease-out), transform 600ms var(--ease-out);
  transform: scale(1.02);
}

.sec-09-team__photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--accent-glow), transparent 65%);
  mix-blend-mode: multiply;
  opacity: 0.6;
  transition: opacity 600ms var(--ease-out);
  pointer-events: none;
}

.sec-09-team__card:hover .sec-09-team__photo,
.sec-09-team__card:focus-within .sec-09-team__photo {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.06);
}

.sec-09-team__card:hover .sec-09-team__photo-wrap::after,
.sec-09-team__card:focus-within .sec-09-team__photo-wrap::after {
  opacity: 0;
}

.sec-09-team__body {
  padding: 1.5rem 0 1.8rem;
}

.sec-09-team__name {
  font-size: var(--fs-h4);
  margin-bottom: 0.2rem;
}

.sec-09-team__role {
  font-size: var(--fs-small);
  color: var(--text-on-bone-dim);
  margin-bottom: 0.9rem;
}

.sec-09-team__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sec-09-team__chip {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.sec-09-team__quote {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-on-bone-dim);
  border-top: 1px solid var(--line-bone);
  padding-top: 0.9rem;
}

.sec-09-team__ask {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-bone);
}

.sec-09-team__ask-label {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.3rem;
}

.sec-09-team__ask-text {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-on-bone-dim);
}

.sec-09-team__book {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-09-team__book-arrow {
  transition: transform 300ms var(--ease-spring);
}

.sec-09-team__book:hover,
.sec-09-team__book:focus-visible {
  gap: 0.65rem;
  color: var(--accent);
}

.sec-09-team__book:hover .sec-09-team__book-arrow,
.sec-09-team__book:focus-visible .sec-09-team__book-arrow {
  transform: translateX(4px);
}

.sec-09-team__cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .sec-09-team__card,
  .sec-09-team__photo,
  .sec-09-team__photo-wrap::after,
  .sec-09-team__ring,
  .sec-09-team__book-arrow {
    transition: none;
  }
}

/* html.reduced-motion (site-wide JS flag) — ring stays static, no draw-in */
html.reduced-motion .sec-09-team__ring {
  opacity: 0.5;
  transform: translate(10px, 10px) scale(1);
  transition: none;
}

html.reduced-motion .sec-09-team__card:hover .sec-09-team__ring,
html.reduced-motion .sec-09-team__card:focus-within .sec-09-team__ring {
  opacity: 0.5;
  transform: translate(10px, 10px) scale(1);
}

/* Bios differ in length, so the "Book with ..." link floated at a different height in each
   card. Push it to the bottom and give the role line a consistent box. */
.sec-09-team__card { display: flex; flex-direction: column; }
.sec-09-team__body { display: flex; flex-direction: column; flex: 1; }
.sec-09-team__book { margin-top: auto; }
.sec-09-team__role { min-height: 2.6em; }

/* --- Solo-provider layout ---
   A single card in a 3-column grid needs more than centering: it needs its
   own composition, wider and weightier than the multi-card grid cell it
   would otherwise sit in. Forces one column at every width (the base grid
   only drops to 1fr under 860px), then on wider screens turns the card
   itself into a photo-left/bio-right row instead of the stacked portrait
   card, with the bio's own content centered rather than left-hung. */
.sec-09-team__grid--solo {
  grid-template-columns: 1fr;
  max-width: 32rem;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .sec-09-team__grid--solo {
    max-width: 64rem;
  }
  .sec-09-team__grid--solo .sec-09-team__card {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
    padding: 2.75rem 3.25rem 2.75rem 2.75rem;
  }
  .sec-09-team__grid--solo .sec-09-team__media {
    flex: 0 0 17rem;
    width: 17rem;
  }
  .sec-09-team__grid--solo .sec-09-team__name {
    font-size: calc(var(--fs-h4) * 1.08);
  }
  .sec-09-team__grid--solo .sec-09-team__quote {
    font-size: 1.05rem;
  }
  .sec-09-team__grid--solo .sec-09-team__ask-text {
    font-size: 0.96rem;
  }
  .sec-09-team__grid--solo .sec-09-team__photo-wrap {
    aspect-ratio: 4 / 5;
  }
  .sec-09-team__grid--solo .sec-09-team__body {
    padding: 0;
    align-items: center;
    text-align: center;
  }
  .sec-09-team__grid--solo .sec-09-team__chips {
    justify-content: center;
  }
  .sec-09-team__grid--solo .sec-09-team__role {
    min-height: 0;
  }
}