/* --------------------------------------------------------------------------
   Footer CTA — "Who You Gonna Call?" (2026 design)
   --------------------------------------------------------------------------
   Home comp y 6190–6778 (#04134B): kicker with lime dot, 64px Anton heading,
   18/30 copy, phone (lime) + request (white outline) buttons, a hairline and
   four lime stats; 452×412 photo right (radius 14). The branch strip below
   (footer.php) continues the same deep navy. */

.footer-cta {
    background-color: var(--color-navy-deep);
    background-image: none;
}

.footer-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 564px) 452px;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    padding-top: 88px;
    padding-bottom: 88px;
}

.footer-cta__kicker { margin-bottom: 18px; font-size: 12px; }

.footer-cta__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--color-white);
}

/* Long headings wrap inside their column instead of running off the page (QA H2, 2026-10-14). */
.footer-cta__heading-line { display: block; white-space: normal; text-wrap: balance; }

.footer-cta__subtext {
    max-width: 480px;
    margin: 20px 0 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 30px;
    color: var(--color-lavender);
}

.footer-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--color-navy-border);
}

.footer-cta__actions .btn { min-height: 46px; }
.footer-cta__phone { min-width: 205px; border-radius: 12px; font-family: var(--font-body); }

.footer-cta__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0 0;
}

.footer-cta__stat-value {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--color-lime);
}

.footer-cta__stat-label {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-lavender);
}

.footer-cta__photo {
    display: block;
    width: 100%;
    height: 412px;
    border-radius: 14px;
    object-fit: cover;
    object-position: 50% 50%;
}

/* Default art: the van cut out of its photo, enlarged, sitting on a soft
   lime glow with a ground shadow. */
.footer-cta__media { position: relative; }
.footer-cta__media:has(.footer-cta__photo--cutout)::before {
    content: "";
    position: absolute;
    inset: 8% 4% 14%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(155, 249, 33, 0.22), rgba(155, 249, 33, 0) 100%);
    pointer-events: none;
}
.footer-cta__photo--cutout {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 0;
    object-fit: contain;
    filter: drop-shadow(0 26px 22px rgba(0, 0, 0, 0.5)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
}

@media (max-width: 1199.98px) {
    .footer-cta__inner { grid-template-columns: minmax(0, 1fr) 380px; }
    .footer-cta__heading { font-size: 54px; }
}

@media (max-width: 991.98px) {
    .footer-cta__inner { grid-template-columns: minmax(0, 1fr); padding-top: var(--section-y); padding-bottom: var(--section-y); }
    .footer-cta__photo:not(.footer-cta__photo--cutout) { height: auto; aspect-ratio: 452 / 300; }
    .footer-cta__photo--cutout { width: 100%; margin-left: 0; }
    .footer-cta__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-cta__heading { font-size: 46px; }
}

@media (max-width: 575.98px) {
    .footer-cta__heading-line { white-space: normal; } /* long headings must still wrap on phones */
}

/* The fallback van sits in a <picture> (AVIF + WebP); keep it laid out as a direct child. */
.footer-cta__media > picture { display: contents; }