/* ==========================================================================
   CTA — Contact section
   ========================================================================== */

.cta {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
  /* Op de tekstkantlijn van het ontwerp (x=480), niet op een percentage van
     het venster. Die 480 is opgebouwd uit de inspringing (120) plus de
     labelkolom met zijn gap, en die twee samen zijn op elke breedte 360px.
     Als percentage viel de CTA alleen op exact 1440px samen met de tekst van
     de secties erboven: daarbuiten schoof hij weg (op 1920px stond hij 162px
     te ver naar rechts, op 1024px 105px te ver naar links). */
  padding-left: calc(var(--page-padding-x) + 360px);
  width: 100%;
}

.cta__text-wrapper {
  padding-right: 120px;
  max-width: 938px;
  width: 100%;
}

.cta__heading {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 3rem; /* 48px */
  line-height: 1.1;
  letter-spacing: -1.44px;
  color: var(--green-1200);
}

.cta__heading--accent {
  color: #017D66;
}

.cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: var(--base-100);
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.125rem; /* 18px */
  line-height: 1.3;
  letter-spacing: -0.18px;
  color: var(--green-1200);
  white-space: nowrap;
}