.cta {
  padding-block: clamp(60px, 9vh, 140px);
  text-align: center;
  position: relative;
  /* visible so clouds can bleed into adjacent sections; main's overflow:hidden
     prevents any horizontal scroll at the page level. */
  overflow: visible;
  isolation: isolate;
}

@media (max-width: 720px) {
  .cta { padding-block: clamp(40px, 7vh, 100px); }
}

/* Decorative clouds — same pattern as the why section. Sit behind the copy. */
.cta__cloud {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: -1;
  height: auto;
}

.cta__cloud--tl { top:  8%;  left: -4%;  width: 22%; max-width: 380px; opacity: 0.4;  }
.cta__cloud--tr { top: 14%;  right: -3%; width: 20%; max-width: 360px; opacity: 0.35; }
.cta__cloud--ml { top: 58%;  left:  3%;  width: 18%; max-width: 320px; opacity: 0.3;  }
.cta__cloud--br { bottom: 4%; right: 1%; width: 24%; max-width: 420px; opacity: 0.45; }

@media (max-width: 860px) {
  .cta__cloud { display: none; }
}

.cta__heading {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-text);
  /* No max-width — container's width handles overall wrap, and the inline
     <br> in the markup decides where the line breaks. */
  margin-inline: auto;
}

.cta__period { color: var(--c-sage); }

.cta__sub {
  margin-top: clamp(24px, 4vh, 36px);
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.65;
  color: var(--c-text);
  max-width: 640px;
  margin-inline: auto;
}

.cta__sub-break { display: none; }
@media (min-width: 720px) {
  .cta__sub-break { display: inline; }
}

.cta__link-wrap {
  margin-top: clamp(18px, 2.5vh, 28px);
}

.cta__link {
  color: var(--c-orange);
  font-weight: 700;
  border-bottom: 2px solid var(--c-orange);
  transition: opacity 200ms var(--ease-out);
}
.cta__link:hover { opacity: 0.75; }

/* Mobile: the pill behavior matches the hero rule (drop pill shape, bold text).
   Inherited automatically from base.css, but ensure it doesn't squish. */
@media (max-width: 720px) {
  .cta__heading { font-size: clamp(28px, 7vw, 40px); }
  /* Drop the forced line break on mobile so "Make your workplace better,"
     wraps naturally with the rest instead of leaving "better," orphaned. */
  .cta__heading-break { display: none; }
}