/* CTA: rounded photo panel under a dark sheet, half on the page background and half on the forest band that becomes
 * the footer (the footer shares --dakota-band, so the two read as one surface). */
.ocf-cta {
    padding-top: var(--section-pad);
    background: linear-gradient(180deg, var(--ocf-bg) 0 50%, var(--dakota-band) 50% 100%);
}

.ocf-cta-panel {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 460px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--dakota-band);
    color: var(--ocf-heading-alt);
    isolation: isolate;
}

.ocf-cta-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ocf-cta-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--dakota-overlay);
}

.ocf-cta-copy {
    max-width: 760px;
    padding: calc(var(--ocf-grid-gap) * 3) calc(var(--ocf-grid-gap) * 4.333);
}

.ocf-cta .heading-1 { color: inherit; }

.ocf-cta-description {
    margin: calc(var(--ocf-grid-gap) * 0.833) 0 calc(var(--ocf-grid-gap) * 1.333);
    color: color-mix(in srgb, var(--ocf-heading-alt) 90%, transparent);
    font-size: calc(var(--font-body-size) * 1.06);
}

.ocf-cta-actions { gap: calc(var(--ocf-grid-gap) * 1.167); }

@media (max-width: 900px) {
    .ocf-cta-panel { min-height: 0; }
    .ocf-cta-copy { padding: calc(var(--ocf-grid-gap) * 2.333) calc(var(--ocf-grid-gap) * 2); }
}

@media (max-width: 640px) {
    .ocf-cta-copy { padding: 32px 26px; }
    .ocf-cta-actions { flex-direction: column; align-items: stretch; }
    .ocf-cta-actions .dakota-call { align-self: flex-start; }
}