/* =========================================================
   ABOUT CTA
========================================================= */

.about-cta{
    position:relative;
    overflow:hidden;
    padding:8rem 0;
    background:#0A3857;
}

/* Blueprint Grid */

.about-cta::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.08;
    background-image:
        linear-gradient(#FFFFFF 1px,transparent 1px),
        linear-gradient(90deg,#FFFFFF 1px,transparent 1px);
    background-size:2rem 2rem;
}

/* Engineering Decoration */

.about-cta::after{
    content:"";
    position:absolute;
    top:-8rem;
    right:-8rem;
    width:24rem;
    height:24rem;
    border:1px solid rgba(244,180,0,.18);
    transform:rotate(45deg);
}

.about-cta .container{
    position:relative;
    z-index:2;
}


/* =========================================================
   CONTENT
========================================================= */

.about-cta__content{
    max-width:54rem;
    margin:auto;
    text-align:center;
}

.about-cta__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.75rem;
    margin-bottom:1.5rem;
    color:#F4B400;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.about-cta__eyebrow::before,
.about-cta__eyebrow::after{
    content:"";
    width:2rem;
    height:2px;
    background:#F4B400;
}

.about-cta__title{
    margin:0;
    color:#FFFFFF;
    font-size:clamp(3rem,6vw,5rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.05em;
}

.about-cta__title span{
    display:block;
    color:#F4B400;
}

.about-cta__text{
    max-width:46rem;
    margin:2rem auto 0;
    color:rgba(255,255,255,.82);
    font-size:1.05rem;
    line-height:2;
}


/* =========================================================
   BUTTONS
========================================================= */

.about-cta__actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1rem;
    margin-top:3rem;
}


/* Primary */

.about-cta .button--primary{

    background:#F4B400;
    color:#0A3857;
    border:2px solid #F4B400;

}

.about-cta .button--primary:hover{

    background:#FFD24A;
    border-color:#FFD24A;
    color:#0A3857;

}


/* Secondary */

.about-cta .button--secondary{

    background:transparent;
    color:#F4B400;
    border:2px solid #F4B400;

}

.about-cta .button--secondary:hover{

    background:#F4B400;
    color:#0A3857;
    border-color:#F4B400;

}


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

@media(max-width:768px){

    .about-cta{
        padding:6rem 0;
    }

    .about-cta__actions{
        flex-direction:column;
    }

    .about-cta__actions .button{
        width:100%;
        max-width:340px;
    }

}

@media(max-width:560px){

    .about-cta{
        padding:5rem 0;
    }

    .about-cta__title{
        font-size:clamp(2.3rem,12vw,3.5rem);
    }

    .about-cta__text{
        font-size:.96rem;
        line-height:1.9;
    }

}