/* Our Team Section — Figma node 4020:666 (1440 x 655) */

.team {
  position: relative;
  height: 655px;
  background: var(--off-white);
  overflow: hidden; /* the rule and the fifth card run past the canvas */
}

/* Line 9 — a 1871px rule starting at x=-17, centre-aligned 2px stroke */
.team::before {
  content: ""; position: absolute; top: 362px; left: -17px; width: 1871px; height: 2px;
  background: var(--obsidian);
}

.team__title {
  position: absolute; top: 100px; left: var(--gutter); width: 200px; margin: 0;
  font-size: 45px; font-weight: 500; line-height: 49.5px; color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.team__nav {
  position: absolute; top: 101px;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 100px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--obsidian);
}

.team__nav--prev { left: 1248px; }
.team__nav--next { left: 1312px; }

.team__nav { border: 0; padding: 0; cursor: pointer; }
.team__nav:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* Five cards overflow 1440 by only 250px, so an end is reached in one step. */
.team__nav[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.team__nav img { width: 24px; height: 24px; }

/* The cards sit on a track that slides; the section already clips. */
.team__track {
  position: absolute;
  top: 206px;
  left: 0;
  width: 1690px;   /* last card ends at 1610, plus the 80px gutter */
  height: 349px;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .team__track { transition: none; }
}

.team__card {
  position: absolute; top: 0; width: 282px; height: 349px;
  border-radius: 16px;
}

.team__card:nth-of-type(1) { left: 80px; }
.team__card:nth-of-type(2) { left: 392px; }
.team__card:nth-of-type(3) { left: 704px; }
.team__card:nth-of-type(4) { left: 1016px; }
.team__card:nth-of-type(5) { left: 1328px; }

.team__card img {
  position: absolute; top: 16px; left: 16px; width: 250px; height: 250px;
  border-radius: 1000px;
  box-shadow: inset 0 0 0 2px var(--obsidian);
}

.team__card h3,
.team__card p {
  position: absolute; left: 0; width: 282px; margin: 0; text-align: center;
  transform: translateY(var(--figma-baseline-shift));
}

.team__card h3 { top: 282px; font-size: 24px; font-weight: 500; line-height: 28.8px; color: var(--obsidian); }
.team__card p  { top: 315px; font-size: 13px; font-weight: 400; line-height: 18.2px; color: var(--muted); }