.team-page {
  background: #f4f7f4;
}

.team-showcase {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(560px, 70svh, 780px);
  place-items: center;
  margin: clamp(12px, 1.8vw, 26px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: clamp(24px, 3vw, 46px);
  background: #193f31;
  box-shadow: 0 28px 76px rgba(15, 52, 39, 0.18);
}

.team-showcase-background,
.team-showcase-background::after,
.team-showcase-background img {
  position: absolute;
  inset: 0;
}

.team-showcase-background {
  z-index: -2;
  overflow: hidden;
}

.team-showcase-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  filter: blur(18px) saturate(0.76) brightness(0.72);
  transform: scale(1.08);
}

.team-showcase-background::after {
  content: "";
  background:
    radial-gradient(circle at 50% 36%, rgba(244, 250, 245, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(9, 46, 32, 0.54), rgba(24, 73, 53, 0.3));
}

.team-showcase-panel {
  width: min(78vw, 1120px);
  padding: clamp(24px, 3vw, 40px) clamp(22px, 4vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: clamp(24px, 3vw, 42px);
  background: rgba(248, 249, 241, 0.9);
  box-shadow: 0 38px 90px rgba(2, 28, 18, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}

.team-showcase-topline,
.team-showcase-footline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #416c5a;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.team-showcase-topline {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(23, 56, 43, 0.13);
}

.team-showcase-footline {
  padding-top: 18px;
  border-top: 1px solid rgba(23, 56, 43, 0.13);
}

.team-showcase h1 {
  display: grid;
  width: 100%;
  margin: clamp(34px, 5vh, 54px) auto;
  color: #174532;
  font-size: clamp(6.3rem, 13vw, 12rem);
  font-weight: 950;
  line-height: 0.72;
  letter-spacing: -0.09em;
  text-align: center;
}

.team-showcase h1 span {
  display: block;
  padding-right: 0.08em;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)),
    url("../images/team/team-showcase-children.jpeg");
  background-position: center 46%;
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(18, 57, 42, 0.14);
}

.team-purpose-heading {
  margin-bottom: 18px;
  color: var(--white);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.04;
  text-shadow: 0 18px 44px rgba(3, 24, 15, 0.24);
}

.team-purpose-heading span {
  color: #ccebdc;
  text-shadow: 0 0 30px rgba(161, 226, 195, 0.22);
}

@media (max-width: 900px) {
  .team-showcase {
    min-height: 66svh;
    margin: 12px;
  }

  .team-showcase-panel {
    width: calc(100% - 44px);
  }

  .team-showcase h1 {
    font-size: clamp(5.3rem, 20vw, 9rem);
  }
}

@media (max-width: 560px) {
  .team-showcase {
    min-height: 64svh;
    margin: 8px;
    border-radius: 24px;
  }

  .team-showcase-background img {
    filter: blur(13px) saturate(0.78) brightness(0.7);
    object-position: 52% center;
  }

  .team-showcase-panel {
    width: calc(100% - 28px);
    padding: 22px 16px;
    border-radius: 24px;
  }

  .team-showcase-topline,
  .team-showcase-footline {
    gap: 12px;
    font-size: 0.54rem;
    letter-spacing: 0.1em;
  }

  .team-showcase h1 {
    margin: 40px auto;
    font-size: clamp(5.15rem, 24vw, 7.6rem);
    line-height: 0.77;
  }

  .team-purpose-heading {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-showcase-background img {
    transform: scale(1.08);
  }
}