.team-gradient {
  --team-primary: #1f2d3e;
  --team-secondary: #4a5f78;
  position: relative;
  overflow: hidden;
  background: linear-gradient(132deg, var(--team-primary) 0%, var(--team-secondary) 100%);
}

.team-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.34) 100%);
  pointer-events: none;
}

.team-gradient > * {
  position: relative;
  z-index: 1;
}

.grid .card.team-gradient {
  border-color: rgba(255, 255, 255, 0.36);
  color: #f4f7fc;
}

body.teams-directory-page .grid .card.team-gradient {
  background: linear-gradient(
    132deg,
    var(--team-primary) 0%,
    var(--team-primary) 87%,
    var(--team-secondary) 100%
  );
}

.grid .card.team-gradient h3,
.grid .card.team-gradient p {
  color: #f4f7fc;
}

.grid .card.team-gradient .abbr {
  color: rgba(242, 248, 255, 0.86);
}

.grid .card.team-gradient .link {
  border-color: rgba(255, 255, 255, 0.52);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.grid .card.team-gradient .link:hover {
  background: rgba(255, 255, 255, 0.18);
}

.hero.team-gradient {
  border-color: rgba(255, 255, 255, 0.35);
  color: #f4f7fc;
}

.hero.team-gradient h1,
.hero.team-gradient p {
  color: #f4f7fc;
}

.hero.team-gradient p {
  opacity: 0.92;
}