/* ============================================================
   TEAM — clean static section (no scroll animation)
   Deep-green brand world · big transparent 4-dentist photo ·
   name + specialty labels overlaid in FRONT of the photo.
   ============================================================ */
.tc {
  --tc-ivory: #F4F1E8;                 /* kept for labels over the dark scrubs */
  --tc-ivory-60: rgba(244, 241, 232, .82);
  --tc-line: rgba(16, 24, 32, .1);
  background: #fff;
  color: var(--ink);
  width: var(--shell);
  margin-inline: auto;
  margin-top: var(--card-gap, 16px);
  border-radius: clamp(22px, 2vw, 34px);
  border: 1px solid rgba(16, 24, 32, .06);
  padding-block: clamp(2.4rem, 4.5vw, 3.6rem);
  overflow: hidden;
}

/* ---- heading ---- */
.tc__head { text-align: center; max-width: 46rem; margin: 0 auto; }
.tc__head .eyebrow { justify-content: center; color: var(--ink-60); }
.tc__head .eyebrow::before { background: var(--green); }
.tc__title {
  margin: .5rem 0 0;
  font-weight: 700;
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}
.tc__intro {
  margin-top: 1rem;
  color: var(--ink-60);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  text-wrap: balance;
}

/* ---- big photo stage ---- */
.tc__stage {
  position: relative;
  max-width: 1080px;
  margin: clamp(.4rem, 1.2vw, 1rem) auto 0;   /* photo hugs the title/CTA above it */
  display: block;
}
.tc__group { display: block; vertical-align: bottom; }
/* soft radial glow grounding the group */
.tc__stage::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 4%;
  width: 86%; height: 72%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(42, 104, 78, .55) 0%, rgba(24, 66, 50, .22) 45%, transparent 72%);
  z-index: 0;
  pointer-events: none;
}
.tc__group {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 40px 66px rgba(0, 0, 0, .5));
}

/* ---- name labels IN FRONT of the photo ---- */
.tc__labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tc__label {
  position: absolute;
  bottom: 5%;
  width: clamp(150px, 15vw, 196px);
  transform: translateX(-50%);
  text-align: center;
  margin: 0;
}
.tc__label b {
  display: block;
  font-size: clamp(.95rem, 1.15vw, 1.12rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tc-ivory);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .78), 0 1px 4px rgba(0, 0, 0, .6);
}
.tc__label span {
  display: block;
  margin-top: .2rem;
  font-size: clamp(.72rem, .85vw, .82rem);
  line-height: 1.35;
  color: rgba(244, 241, 232, .82);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .82), 0 1px 4px rgba(0, 0, 0, .6);
}
/* horizontal centers tuned to each person in dentistii-nou */
.tc__label--1 { left: 19%; }
.tc__label--2 { left: 40.5%; }
.tc__label--3 { left: 59%; }
.tc__label--4 { left: 81%; }

/* ---- footer CTA ---- */
.tc__foot { text-align: center; margin-top: clamp(1.2rem, 2.5vw, 1.8rem); }
.tc__cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .55rem .5rem 1.4rem;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  border-radius: var(--r-pill);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.tc__cta .arr {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--green);
  display: grid; place-items: center;
  font-size: .8rem;
  transition: transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .tc__cta:hover { transform: translateY(-2px); background: #2E8A1E; }
  .tc__cta:hover .arr { transform: translate(2px, -2px); }
}

/* ============================================================
   Responsive — stack labels below the photo on small screens
   ============================================================ */
@media (max-width: 720px) {
  .tc__stage { max-width: 560px; }
  .tc__labels {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.4rem;
    margin-top: 1.8rem;
  }
  .tc__label {
    position: static;
    width: auto;
    transform: none;
    text-align: left;
    padding-top: .9rem;
    border-top: 1px solid var(--tc-line);
  }
  .tc__label b, .tc__label span { text-shadow: none; }
  .tc__label b { color: var(--ink); }
  .tc__label span { color: var(--ink-60); }
}
@media (max-width: 400px) {
  .tc__labels { grid-template-columns: 1fr; }
}