/* ==========================================================================
   CTA — shared call-to-action block (Sprint 2)
   Replaces .cta-section, .cta-card, .cta-content, .cta-buttons that lived
   independently in about.css, agencies.css, buy-vs-rent.css, homepage-seo.css,
   neighborhoods.css. Canonical home is HERE.

   Two variants:
   - .cta-section (default): full-width ink slab band with cream type and a
     centered terracotta caps button.
   - .cta-section--paper: lighter alternative — paper surface with hairline
     border, ink type, terracotta button. For use mid-page when an ink slab
     would feel heavy.
   ========================================================================== */

.cta-section {
    background: var(--navy);
    color: var(--cream);
    padding: clamp(56px, 7vw, 96px) 0;
    text-align: center;
}

.cta-section--paper {
    background: var(--paper);
    color: var(--ink);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.cta-section__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px;
}

.cta-section__eyebrow {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream);
    opacity: 0.7;
}

.cta-section--paper .cta-section__eyebrow {
    color: var(--taupe);
    opacity: 1;
}

.cta-section__title,
.cta-section h2 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.85rem, 4vw, 3rem);
    line-height: 1.1;
    color: inherit;
}

.cta-section__deck,
.cta-section p {
    margin: 0 auto 28px;
    max-width: 65ch;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.55;
    color: inherit;
    opacity: 0.85;
}

.cta-section--paper .cta-section__deck,
.cta-section--paper p {
    opacity: 1;
}

/* Button / action row */
.cta-section__actions {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 560px) {
    .cta-section__actions {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .cta-section__actions .cta-section__btn,
    .cta-section__actions .btn {
        width: 100%;
    }
}

.cta-section .btn,
.cta-section__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--terracotta);
    color: var(--warm-white);
    border: none;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cta-section .btn:hover,
.cta-section__btn:hover {
    background: var(--terracotta-d);
    filter: none;
}

/* Outline secondary on dark slab */
.cta-section__btn--outline {
    background: transparent;
    color: var(--cream);
    border: 1px solid var(--cream);
}

.cta-section__btn--outline:hover {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cream);
}

.cta-section--paper .cta-section__btn--outline {
    color: var(--ink);
    border-color: var(--ink);
}

.cta-section--paper .cta-section__btn--outline:hover {
    background: var(--ink);
    color: var(--cream);
}