/* ─── Aspen CTA ───
 * Photo band (cta_image under the page-banner shade) or, with no image, the charcoal band (global --aspen-band with the
 * faint primary glow), under a center roof peak; centered display heading, a muted description and the two actions. */
.ocf-cta {
    position: relative;
    padding: calc(var(--aspen-roof) + clamp(68px, 50px + 4.57vw, 96px)) 0 var(--section-pad);
    color: var(--aspen-on-dark-muted);
    text-align: center;
}

.ocf-cta-inner { position: relative; }

.ocf-cta--photo { isolation: isolate; }
.ocf-cta--photo .aspen-peak { z-index: 1; }

/* The peak's shoulders always use the page background, the same surface as the FAQ that normally sits above the CTA
 * (Bennett, 10-31). */
.ocf-cta .aspen-peak { --aspen-roof-fill: var(--ocf-bg); }

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

.ocf-cta-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, color-mix(in srgb, var(--aspen-base) 88%, var(--ocf-primary)) 72%, transparent) 0%,
            color-mix(in srgb, color-mix(in srgb, var(--aspen-base) 88%, var(--ocf-primary)) 82%, transparent) 100%);
}

.ocf-cta .heading-2 {
    max-width: 1100px;
    margin: 0 auto;
    color: var(--aspen-on-dark);
    font-size: var(--field-font-size, calc(var(--font-h2-size) * 1.25));
}

.ocf-cta-description {
    max-width: 720px;
    margin: 18px auto 36px;
    color: var(--aspen-on-dark-muted);
    font-size: calc(var(--font-body-size) * 1.111);
}

.ocf-cta-actions { justify-content: center; gap: 16px; }

@media (max-width: 1023px) { .ocf-cta .heading-2 { font-size: var(--field-font-size, calc(var(--font-h2-size) * 1.2)); } }
@media (max-width: 640px) { .ocf-cta .heading-2 { font-size: var(--field-font-size, calc(var(--font-h2-size) * 1.1)); } }