.cta-box {
  background: var(--color-light);
  padding: clamp(2rem, 4vw, 4rem) 0;
}

.cta-box-inner {
  background: var(--color-black);
  color: var(--color-white);
  padding: clamp(2rem, 3.2vw, 4rem) clamp(1.4rem, 2.8vw, 3.5rem);
}

.cta-box-subheadline {
  margin: 0 0 1.2rem;
  font-family: var(--font-headline);
  font-size: clamp(0.9rem, 1vw, 1.15rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.cta-box-headline {
  max-width: 64rem;
  margin: 0 0 clamp(1rem, 1.6vw, 1.6rem);
  font-family: var(--font-headline);
  font-size: clamp(2.6rem, 4.1vw, 5.3rem);
  font-weight: 700;
  line-height: 0.98;
  text-transform: uppercase;
}

.cta-box-text {
  max-width: 48rem;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.25vw, 1.5rem);
  line-height: 1.18;
}

.cta-box-text p {
  margin-bottom: 1.25em;
  font-size: inherit;
  line-height: inherit;
}

.cta-box-text p:last-child {
  margin-bottom: 0;
}

.cta-box-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(3.3rem, 3.9vw, 4.3rem);
  padding: 0.9rem clamp(1.6rem, 2.5vw, 3rem);
  border-radius: var(--radius-pill);
  background: rgba(105, 105, 105, 0.95);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.25vw, 1.45rem);
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background var(--transition-default),
    color var(--transition-default),
    transform var(--transition-default);
}

.cta-box-button:hover,
.cta-box-button:focus-visible {
  background: var(--color-white);
  color: var(--color-black);
  transform: translateY(-2px);
}

@media (max-width: 991.98px) {
  .cta-box-inner {
    padding: 2rem 1.25rem;
  }

  .cta-box-button {
    max-width: 22rem;
  }
}

@media (max-width: 575.98px) {
  .cta-box-headline {
    font-size: clamp(2.2rem, 10vw, 3.4rem);
  }

  .cta-box-text {
    font-size: 1rem;
    line-height: 1.25;
  }
}