/**
 * CtaBand — ported 1:1 from components/sections/CtaBand.module.css.
 * Module root .band → .s-cta-band; tone modifiers .green/.midnight and other
 * module classes scoped under .s-cta-band. .eyebrow/.title/.body here are the
 * MODULE-scoped versions (they override globals via the extra specificity).
 */
.s-cta-band {
  padding-block: clamp(3rem, 7vw, 5rem);
}
.s-cta-band.green {
  background: var(--c-green);
  color: var(--c-text-on-dark);
}
.s-cta-band.midnight {
  background: var(--c-midnight);
  color: var(--c-text-on-dark);
}

.s-cta-band .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.s-cta-band .eyebrow {
  margin: 0 0 var(--s-3);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.s-cta-band .title {
  margin: 0;
  max-width: 20ch;
  color: #fff;
}

.s-cta-band .body {
  margin: var(--s-4) 0 0;
  max-width: 52ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.88);
  text-wrap: pretty;
}

.s-cta-band .ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

/* Solid white button for coloured bands — a green/ghost button on green reads as
   plain text (you shouldn't have to hover to discover it's a button). */
.s-cta-band .ctas .onColorBtn {
  background: #fff;
  color: var(--c-green);
  border-color: #fff;
}
.s-cta-band .ctas .onColorBtn:hover {
  background: rgba(255, 255, 255, 0.88);
  color: var(--c-green);
  border-color: rgba(255, 255, 255, 0.88);
}