main:has(> .team-hero) {
  padding-top: 0;
}

.team-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 4vh, 48px);
  padding-top: calc(var(--nav-h) + 12px);
  padding-bottom: clamp(28px, 5vh, 56px);
  background: var(--color-bg-alt);
  overflow: hidden;
}

.team-hero .team-hero-head .section-header {
  margin-bottom: 0;
}

.team-hero .section-title {
  text-align: center;
  font-size: clamp(1.6rem, 6.5vw, 3.5rem);
}

.team-carousel {
  width: 100%;
  margin-bottom: 0;
  overflow-x: hidden;
  overflow-y: visible;
  scrollbar-width: none;              
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.team-carousel::-webkit-scrollbar {
  display: none;                      
}

.team-carousel-track {
  display: flex;
  gap: var(--s-4);
  width: max-content;
  cursor: grab;
  will-change: transform;
}

.team-carousel-track.dragging {
  cursor: grabbing;
}

.team-carousel-track img {
  display: block;
  height: clamp(340px, 58vh, 720px);
  width: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid rgba(74, 89, 38, 0.12);
  box-shadow: 0 10px 30px rgba(26, 32, 16, 0.1);
  user-select: none;
  -webkit-user-drag: none;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.team-carousel-track img:hover {
  box-shadow: 0 14px 38px rgba(26, 32, 16, 0.16);
}