/* ==========================================================
   CTA — closing call-to-action band, clean enterprise style.
   Markup lives in sections/cta.html
   ========================================================== */
/* ==========================================================
   CTA SECTION
   ========================================================== */

.cta-section{
    padding:80px 0;
}

/* Widens just this section's container so the dark band nearly
   fills the screen, leaving only a small gutter on each side —
   independent of the sitewide --maxw token used everywhere else. */
.cta-section .wrap{
    max-width:none;
    padding-left:32px;
    padding-right:32px;
}

.cta-band{

    background:var(--ink);

    color:var(--white);

    border-radius:var(--radius-lg);

    padding:52px 48px;

    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:20px;

}

.cta-band h2{

    /* base.css sets color:var(--ink) directly on every h1-h4 —
       that overrides inheriting white from .cta-band above, since
       a direct rule always beats inheritance. Explicit override
       needed here so the heading is actually visible. */
    color:var(--white);

    font-size:clamp(26px,2.8vw,34px);

    max-width:650px;

    line-height:1.2;

}

.cta-band p{

    max-width:650px;

    color:rgba(255,255,255,.72);

    font-size:16px;

    line-height:1.8;

}

.cta-actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

}

/* ==========================================================
   CONTACT FORM
   ========================================================== */

.contact-form{

    width:100%;

    max-width:700px;

    margin-top:20px;

    display:flex;
    flex-direction:column;

    gap:18px;

    text-align:left;

}

.form-row{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.form-field label{

    display:block;

    margin-bottom:8px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

    color:rgba(255,255,255,.65);

}

/* Inputs */

.form-field input,
.form-field textarea,
.form-field select{

    width:100%;

    background:rgba(255,255,255,.08);

    border:1.5px solid rgba(255,255,255,.18);

    border-radius:var(--radius-md);

    padding:13px 15px;

    color:var(--white);

    font-family:'Inter',sans-serif;

    font-size:14px;

    transition:
        border-color .25s ease,
        background .25s ease;

}

.form-field textarea{

    resize:vertical;

    min-height:120px;

}

.form-field input::placeholder,
.form-field textarea::placeholder{

    color:rgba(255,255,255,.35);

}

/* Focus */

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{

    outline:none;

    border-color:var(--crimson);

    background:rgba(255,255,255,.12);

}

/* Select dropdown */

.form-field select{

    cursor:pointer;

}

.form-field select option{

    color:#222;

}

/* Button */

.contact-form .btn{

    width:fit-content;

    margin-top:8px;

}

/* Status */

.form-status{

    min-height:20px;

    font-size:13px;

    font-weight:600;

}

.form-status.success{

    color:#7CE0A0;

}

.form-status.error{

    color:#FF8A8A;

}

/* Honeypot */

.form-hp{

    position:absolute;

    left:-9999px;

    opacity:0;

}

/* Form note */

.form-note{

    margin-top:4px;

    text-align:center;

    font-size:13px;

    color:rgba(255,255,255,.55);

    line-height:1.6;

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:768px){

    .cta-band{

        padding:50px 32px;

    }

    .form-row{

        grid-template-columns:1fr;

    }

}

@media (max-width:480px){

    .cta-section{

        padding:70px 0;

    }

    .cta-section .wrap{

        padding-left:16px;

        padding-right:16px;

    }

    .cta-band{

        padding:40px 24px;

    }

    .cta-actions{

        flex-direction:column;

        width:100%;

    }

    .cta-actions .btn{

        width:100%;

        justify-content:center;

    }

    .contact-form{

        max-width:100%;

    }

    .contact-form .btn{

        width:100%;

    }

}