/* CTA: primary band under the triple stripe — centered heading and description, the dark CTA and a light contact
 * button, then the phone number set large. */
.ocf-cta {
    background: var(--ocf-primary);
    color: var(--ocf-body-alt);
}

.ocf-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: clamp(56px, 6vw, 88px) clamp(64px, 7.5vw, 110px);
    text-align: center;
}

.ocf-cta .heading-2 {
    max-width: 1000px;
    color: var(--ocf-heading-alt);
    font-size: clamp(38px, 5vw, 72px);
    line-height: 0.95;
}

.ocf-cta-description {
    max-width: 44rem;
    margin-top: calc(var(--ocf-space-unit) * 1);
    color: var(--ocf-body-alt);
    font-size: calc(var(--font-body-size) * 1.11);
}

.ocf-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--ocf-space-unit) * 1.125);
    margin-top: calc(var(--ocf-grid-gap) * 1.5);
}

.ocf-cta-phone {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--ocf-space-unit) * 0.75);
    margin-top: calc(var(--ocf-grid-gap) * 1.25);
    color: var(--ocf-heading-alt);
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: clamp(32px, 3.2vw, 46px);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}

.ocf-cta-phone svg { width: 0.8em; height: 0.8em; color: var(--cardiff-tint); }
.ocf-cta-phone:hover { color: var(--ocf-heading-alt); text-decoration: underline; text-underline-offset: 0.15em; }

@media (max-width: 560px) {
    .ocf-cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .ocf-cta-actions > * { width: 100%; }
}