/* ============================================================
   15. CTA final — cta-background.webp with the subject biased
   left; content sits in the right half on a horizontal scrim
   that darkens toward that side (mirrors round-conecta's split).
   Below 768px it collapses back to centered, both axes, over the
   full-bleed photo. A wave divider (fill = the FAQ section's bg
   color) bridges the flat FAQ canvas into this section's photo.
   ============================================================ */

.cta-final {
  position: relative;
  min-height: 85svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.cta-final__wave {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 16;
  width: 100%;
  line-height: 0;
  color: var(--color-bg-base);
  pointer-events: none;
}

.cta-final__wave svg {
  display: block;
  width: 100%;
  height: clamp(48px, 7vw, 110px);
}

.cta-final__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-media);
  will-change: transform;
}

.cta-final__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.cta-final__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  transform: scale(1.12);
}

.cta-final__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-scrim);
  background: linear-gradient(90deg, transparent 0%, rgba(15, 41, 66, 0.2) 35%, rgba(15, 41, 66, 0.82) 65%, rgba(15, 41, 66, 0.88) 100%);
}

.cta-final__content {
  position: relative;
  z-index: var(--z-hero-content);
  margin-inline: auto 0;
  max-width: 50%;
  text-align: left;
}

.cta-final .eyebrow {
  color: var(--color-accent-secondary);
  margin-bottom: var(--space-5);
}

.cta-final h2 {
  color: var(--color-white);
  font-size: var(--text-h2);
  margin-bottom: var(--space-5);
}

.cta-final__content > p {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-lead);
  margin-bottom: var(--space-7);
  max-width: 46ch;
}

.cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
}

/* Deliberately not the shared text-roll/icon-rotate hover every other
   .btn uses — this one gets its own left-to-right fill sweep instead,
   so it doesn't read as "the same button" as the WhatsApp CTA next to it. */
.cta-final__instagram {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--duration-base) var(--ease-soft), border-color var(--duration-base) var(--ease-soft);
}

.cta-final__instagram::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-accent-secondary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-slow) var(--ease-out);
}

.cta-final__instagram:hover {
  color: var(--color-navy-900);
  border-color: transparent;
}

.cta-final__instagram:hover::before {
  transform: scaleX(1);
}

.cta-final__instagram .btn__label span {
  transition: none;
}

.cta-final__instagram:hover .btn__label span {
  transform: none;
}

.cta-final__instagram .btn__icon svg {
  transition: none;
}

.cta-final__instagram:hover .btn__icon svg {
  transform: none;
}

@media (max-width: 767px) {
  .cta-final__content {
    margin-inline: 0;
    max-width: 100%;
    text-align: center;
  }

  .cta-final__content > p {
    margin-inline: auto;
  }

  .cta-final__actions {
    justify-content: center;
  }

  .cta-final__media img {
    object-position: top center;
  }

  .cta-final__scrim {
    background: linear-gradient(180deg, rgba(15, 41, 66, 0.25) 0%, rgba(15, 41, 66, 0.72) 60%, rgba(15, 41, 66, 0.82) 100%);
  }
}

/* Purpose-shot mobile portrait (assets/images/responsive/cta-mobile.webp):
   dark headroom up top, subjects lower in frame — content pins to the
   start/top of that headroom instead of the ≥530px vertical centering.
   Horizontal centering (text-align/justify-content) stays as-is. */
@media (max-width: 639px) {
  .cta-final {
    min-height: 130svh;
    align-items: flex-start;
    padding-block: var(--space-6) var(--space-7);
  }

  .cta-final .eyebrow {
    margin-bottom: var(--space-3);
  }

  .cta-final h2 {
    margin-bottom: var(--space-3);
  }

  .cta-final__content > p {
    margin-bottom: var(--space-4);
  }

  .cta-final__media img {
    object-position: center top;
  }

  .cta-final__scrim {
    background: linear-gradient(180deg, rgba(15, 41, 66, 0.55) 0%, rgba(15, 41, 66, 0.3) 40%, rgba(15, 41, 66, 0.1) 62%);
  }
}