/**
 * Section: CTA Split
 * Ported from .docs/mockup/css/contact.css (.contact-cta block, lines
 * 233-272). Tokens only — no hardcoded colours or sizes.
 *
 * The mockup spaces .cc-text's heading and paragraph with `margin-top` on
 * the paragraph. Per section-architecture.md, text in a content block is
 * grouped in one flex-column parent with `gap` rather than margin, so that
 * is converted here to `gap: var(--space-xs)` on .cc-text — the same value,
 * no visual change.
 *
 * No selector from this section appears in contact.css's responsive block
 * (that block only covers .contact-grid and .form-grid, which belong to the
 * `contact` section). .contact-cta-inner's own `flex-wrap: wrap` already
 * handles small screens, so this file has no @media queries.
 */

.contact-cta {
  padding-block: var(--section-space-m);
  padding-inline: var(--space-gutter);
  background: var(--deep-ocean);
}

.contact-cta-inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  flex-wrap: wrap;
}

.cc-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cc-text h2 {
  color: var(--off-white);
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.05;
  max-width: 20ch;
}

.cc-text h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--coastal-blue);
}

.cc-text p {
  color: var(--coastal-blue);
  line-height: 1.6;
  max-width: 54ch;
}

.contact-cta .btn-primary {
  flex-shrink: 0;
}