/* Related traditions feeding one way of working—not cards or products. */
.therapy-approach-page #counselling-psychotherapy .depth-section__inner {
  max-width: 74rem;
}

.therapy-terms-pair {
  --terms-gap: clamp(3.5rem, 7vw, 7rem);
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--terms-gap);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.9rem;
}

.therapy-terms-pair::before {
  content: "";
  position: absolute;
  top: .72rem;
  left: .36rem;
  width: calc(50% + var(--terms-gap) / 2);
  height: 1px;
  background: linear-gradient(90deg, #9a6549 0%, #b99a73 46%, #8a9a8a 54%, #315448 100%);
  transform-origin: left center;
}

.therapy-terms-part {
  position: relative;
  min-width: 0;
}

.therapy-terms-part::before {
  content: "";
  position: absolute;
  top: -1.54rem;
  left: 0;
  width: .72rem;
  height: .72rem;
  border: 2px solid #f6f2eb;
  border-radius: 50%;
  box-shadow: 0 0 0 1px currentColor;
  background: currentColor;
}

.therapy-terms-part--counselling { color: #875b43; }
.therapy-terms-part--psychotherapy { color: #315448; }

.therapy-terms-part h3 {
  margin-top: 0;
  color: currentColor;
  font-size: clamp(2rem, 3vw, 2.75rem);
}

.therapy-terms-part p { color: #405247; }

.therapy-terms-bridge {
  position: relative;
  display: block;
  grid-column: 1 / -1;
  width: 1px;
  height: clamp(3rem, 5vw, 4.5rem);
  margin: clamp(2.6rem, 5vw, 4rem) auto 0;
  background: linear-gradient(180deg, rgba(151, 111, 74, .68), rgba(49, 84, 72, .68));
  transform-origin: top center;
}

.therapy-terms-bridge::after {
  content: "";
  position: absolute;
  bottom: -.28rem;
  left: 50%;
  width: .58rem;
  height: .58rem;
  border-radius: 50%;
  background: #4d6a5d;
  transform: translateX(-50%);
}

.therapy-terms-synthesis {
  grid-column: 1 / -1;
  max-width: 58rem;
  margin: 0 auto;
  padding-top: clamp(2.4rem, 4vw, 3.5rem);
}

.therapy-terms-synthesis > h3:first-child {
  margin-top: 0;
  color: #4b6255;
}

@media (prefers-reduced-motion: no-preference) {
  .therapy-terms-pair::before { transform: scaleX(0); }
  .therapy-terms-bridge { transform: scaleY(0); }

  .therapy-terms-part,
  .therapy-terms-synthesis {
    opacity: 1;
    transform: none;
  }

  #counselling-psychotherapy.is-terms-connected .therapy-terms-pair::before {
    transform: scaleX(1);
    transition: transform 1.15s cubic-bezier(.18, .72, .2, 1);
  }

  #counselling-psychotherapy.is-terms-connected .therapy-terms-part {
    opacity: 1;
    transform: none;
    transition: opacity .8s .35s ease, transform .9s .35s cubic-bezier(.18, .72, .2, 1);
  }

  #counselling-psychotherapy.is-terms-connected .therapy-terms-part--psychotherapy {
    transition-delay: .58s;
  }

  #counselling-psychotherapy.is-terms-connected .therapy-terms-bridge {
    transform: scaleY(1);
    transition: transform .8s 1.05s cubic-bezier(.18, .72, .2, 1);
  }

  #counselling-psychotherapy.is-terms-connected .therapy-terms-synthesis {
    opacity: 1;
    transform: none;
    transition: opacity .9s 1.45s ease, transform 1s 1.45s cubic-bezier(.18, .72, .2, 1);
  }
}

@media (max-width: 760px) {
  .therapy-approach-page #counselling-psychotherapy .depth-section__inner {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .therapy-terms-pair {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 2.5rem;
    padding: .2rem 0 0 1.75rem;
  }

  .therapy-terms-pair::before {
    top: .7rem;
    bottom: .4rem;
    left: .28rem;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, #9a6549, #b99a73 46%, #729080 58%, #315448);
    transform-origin: top center;
  }

  .therapy-terms-part::before {
    top: .72rem;
    left: -1.82rem;
  }

  .therapy-terms-part h3 {
    font-size: clamp(1.85rem, 8vw, 2.25rem);
  }

  .therapy-terms-part,
  .therapy-terms-part p {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .therapy-terms-bridge {
    height: 2.8rem;
    margin-top: 2.4rem;
  }

  .therapy-terms-synthesis { padding-top: 2.4rem; }

  @media (prefers-reduced-motion: no-preference) {
    .therapy-terms-pair::before { transform: scaleY(0); }
    #counselling-psychotherapy.is-terms-connected .therapy-terms-pair::before { transform: scaleY(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .therapy-terms-pair::before,
  .therapy-terms-bridge,
  .therapy-terms-part,
  .therapy-terms-synthesis {
    opacity: 1;
    transform: none;
    transition: none;
  }
}