/* =================================================================
   CTA — "Thinking about a partnership?" banner shown above the footer
   on every page. Its negative bottom margin lets it overlap the
   footer's top edge. Phones: stacked and centred; tablets up: text and
   a round image side by side.
   ================================================================= */

.cta {
  position: relative;
  z-index: 2;
  margin-bottom: -11rem;
  padding: 2.5rem 1.6rem 0;
}

.cta__container {
  max-width: none;
  padding-inline: 0;
}

.cta__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  overflow: hidden;
  padding: 3rem 2.4rem;
  border-radius: 2.4rem;
  background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-brand) 48%, var(--color-navy) 100%);
  text-align: center;
}

.cta__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(230, 98, 139, 0.22) 0%, transparent 65%);
  pointer-events: none;
}

.cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.cta__eyebrow { color: rgba(255, 255, 255, 0.75); }

.cta__title {
  font-size: clamp(2.6rem, 3.5vw, 4.2rem);
  font-weight: var(--font-weight-black);
  line-height: 1.2;
  color: var(--color-white);
}

.cta__text {
  max-width: 100%;
  font-size: 1.55rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}

/* Decorative round butterfly artwork beside the text (tablets up) */
.cta__decoration {
  position: relative;
  z-index: 1;
  display: none;
  flex-shrink: 0;
  overflow: hidden;
  border: 0.3rem solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: url('../../assets/optimized/cta-image.png') center / cover no-repeat;
  box-shadow: 0 0 4rem rgba(157, 40, 98, 0.4);
}

@media (min-width: 769px) {
  .cta { padding: 3rem 2rem 0; }

  .cta__panel {
    flex-direction: row;
    gap: 3rem;
    padding: 3rem 4rem;
    text-align: start;
  }

  .cta__content { align-items: flex-start; }

  .cta__text { max-width: 42ch; }

  .cta__decoration {
    display: block;
    width: 16rem;
    height: 16rem;
  }
}

@media (min-width: 992px) {
  .cta { padding: 4rem 4rem 0; }

  .cta__panel { padding: 3.2rem 5.5rem; }

  .cta__decoration { width: 22rem; height: 22rem; }
}