/* CTA: the top of the footer panel. A full-width photo under a sheet that darkens to the left and fades into the
 * footer band at the bottom; heading + description, then the primary pill and the phone block in a row under them, all left-aligned. Only the top corners are
 * rounded — the footer below squares its own top corners (footer.css), so CTA and footer read as one panel. */
.ocf-cta {
    --lisbon-panel-sheet:
        linear-gradient(180deg, transparent 35%, var(--lisbon-band) 100%),
        linear-gradient(90deg, color-mix(in srgb, var(--lisbon-band) 88%, transparent) 0%, color-mix(in srgb, var(--lisbon-band) 55%, transparent) 55%, color-mix(in srgb, var(--lisbon-band) 25%, transparent) 100%);
    margin-bottom: 0;
    color: var(--ocf-heading-alt);
}

.ocf-cta.lisbon-panel--inset::before,
.ocf-cta.lisbon-panel--inset > .lisbon-panel__media,
.ocf-cta.lisbon-grain::after {
    border-radius: var(--lisbon-panel-radius) var(--lisbon-panel-radius) 0 0;
}

.ocf-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 36px;
    min-height: 480px;
    padding-block: 120px 64px;
}

.ocf-cta-copy { max-width: 640px; }

.ocf-cta .heading-2 {
    color: inherit;
    font-size: clamp(30px, 4.2vw, 60px);
    line-height: 1;
}

.ocf-cta-description {
    max-width: 520px;
    margin-top: 20px;
    color: color-mix(in srgb, var(--ocf-heading-alt) 86%, transparent);
    font-size: calc(var(--font-body-size) * 1.1);
    line-height: 1.55;
}

.ocf-cta-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 32px;
}

/* Phone: a ringed icon beside a small label and the number in the heading font; no button outline. */
.ocf-cta-call {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ocf-heading-alt);
}

.ocf-cta-call__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: 1.5px solid color-mix(in srgb, var(--ocf-heading-alt) 35%, transparent);
    border-radius: var(--radius-full);
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.ocf-cta-call__icon svg { width: 20px; height: 20px; }
.ocf-cta-call__text { display: grid; gap: 2px; line-height: 1.2; }
.ocf-cta-call__label { color: color-mix(in srgb, var(--ocf-heading-alt) 72%, transparent); font-size: 14px; }

.ocf-cta-call strong {
    font-family: var(--ocf-font-heading), system-ui, sans-serif;
    font-size: 22px;
    font-weight: var(--ocf-font-h3-weight, 700);
    letter-spacing: -0.01em;
}

.ocf-cta-call:hover .ocf-cta-call__icon { background: var(--ocf-primary); border-color: var(--ocf-primary); }

@media (max-width: 1023px) {
    .ocf-cta-inner { flex-direction: column; align-items: flex-start; min-height: 440px; padding-block: 96px 48px; }
}

@media (max-width: 639px) {
    .ocf-cta.lisbon-panel--inset::before,
    .ocf-cta.lisbon-panel--inset > .lisbon-panel__media,
    .ocf-cta.lisbon-grain::after { inset: 0; border-radius: 0; }

    .ocf-cta-inner { justify-content: center; min-height: 0; padding-block: 72px 56px; }
    .ocf-cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
}