/* ==========================================================
   CRESTBRIDGE SERVICES
   SOLUTIONS PAGE
   Version 3.0
========================================================== */


/* ==========================================================
   PAGE HERO
========================================================== */

/* ----------------------------------------------------------
   SECTION
---------------------------------------------------------- */

.page-hero{
    position:relative;

    display:flex;
    align-items:center;
    overflow:hidden;
    padding-top:10px;
    padding-bottom:0;
    background:
        linear-gradient(
            135deg,
            rgba(8,22,45,.94) 0%,
            rgba(15,39,69,.90) 55%,
            rgba(28,65,108,.82) 100%
        );
}

.page-hero::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(200,164,93,.12),
            transparent 45%
        );

    pointer-events:none;
}

.page-hero::after{
    content:"";

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:1px;

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


/* ----------------------------------------------------------
   CONTENT
---------------------------------------------------------- */

.page-hero__inner{
    position:relative;
    z-index:2;

    width:100%;
}

.page-hero__content{
    max-width:1180px;
    
    padding:8rem 0;
}


/* ----------------------------------------------------------
   TYPOGRAPHY
---------------------------------------------------------- */

.page-hero .section-tag{
    margin-bottom:1.5rem;

    color:var(--gold-light);
}

.page-hero h1{
    margin:0;
    max-width:1050px;
    color:var(--white);
}

.page-hero p{
    max-width:1050px;

    margin:1rem 0 0;

    color:rgba(255,255,255,.82);
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width:991px){

    .page-hero{
        min-height:auto;
    }

    .page-hero__content{
        padding:7rem 0;
    }


}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width:767px){

    .page-hero__content{
        padding:6rem 0;
    }


}

@media (max-width:576px){

    .page-hero__content{
        padding:5.5rem 0;
    }


}

/* ==========================================================
   SOLUTIONS OVERVIEW
========================================================== */

/* ----------------------------------------------------------
   SECTION
---------------------------------------------------------- */

.solutions-overview{
    position:relative;

    background:var(--white);
}


/* ----------------------------------------------------------
   SECTION HEADER
---------------------------------------------------------- */

.solutions-overview .section-header{
    margin-bottom:2.5rem;
}

.solutions-overview .section-header{

    margin-bottom:2.5rem;

    text-align:left;

}

.solutions-overview .section-header h2{

    max-width:100%;

    margin:0 auto 1.25rem;

}

.solutions-overview .section-header p{

    max-width:100%;

    margin:0 auto;

}

/* ----------------------------------------------------------
   GRID
---------------------------------------------------------- */

.overview-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding-bottom:0;
    gap:1rem;
}


/* ----------------------------------------------------------
   CARD
---------------------------------------------------------- */

.overview-card{
    position:relative;

    display:flex;
    flex-direction:column;

    text-decoration:none;
    color:inherit;

    min-height:100%;

    padding:2rem;

    background:var(--white);

    border:1px solid rgba(15,23,42,.08);
    border-radius:24px;

    overflow:hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease,
        color .3s ease;
}

.overview-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:4px;

    background:var(--gold);

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .35s ease;
}

.overview-card:hover{
    transform:translateY(-8px);

    border-color:rgba(185,150,82,.35);

    box-shadow:0 18px 40px rgba(15,23,42,.12);
}

.overview-card:hover::before{
    transform:scaleX(1);
}

.overview-card:hover h3{
    color:var(--primary);
}

.overview-card:focus-visible{
    outline:3px solid var(--gold);
    outline-offset:4px;
}


/* ----------------------------------------------------------
   NUMBER
---------------------------------------------------------- */

.overview-number{
    margin-bottom:1.25rem;

    font-size:3rem;
    font-weight:700;
    line-height:1;

    color:rgba(15,23,42,.08);

    transition:color .35s ease;
}


/* ----------------------------------------------------------
   TITLE
---------------------------------------------------------- */

.overview-card h3{
    margin:0 0 1rem;

    font-size:1.25rem;
    font-weight:900;
    line-height:1.3;

    color:var(--navy);
}


/* ----------------------------------------------------------
   DESCRIPTION
---------------------------------------------------------- */

.overview-card p{
    margin:0;

    font-size:1rem;
    line-height:1.8;

    color:var(--text-light);
}


/* ----------------------------------------------------------
   HOVER
---------------------------------------------------------- */

.overview-card:hover{
    transform:translateY(-10px);

    border-color:rgba(15,39,69,.12);

    box-shadow:
        0 20px 45px rgba(15,23,42,.08),
        0 35px 70px rgba(15,23,42,.05);
}

.overview-card:hover::before{
    transform:scaleX(1);
}

.overview-card:hover .overview-number{
    color:rgba(200,164,93,.35);
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width:1200px){

    .overview-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:991px){

    .solutions-overview .section-header{
        margin-bottom:3rem;
    }

    .overview-grid{
        gap:1.5rem;
    }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width:767px){

    .overview-grid{
        grid-template-columns:1fr;
    }

    .overview-card{
        padding:2rem;
    }

    .overview-number{
        font-size:2.5rem;
    }

    .overview-card h3{
        font-size:1.25rem;
    }

    .overview-card p{
        font-size:.95rem;
        line-height:1.7;
    }

}

@media (max-width:576px){

    .overview-card{
        padding:1.75rem;
    }

}

/* ==========================================================
   SOLUTIONS SHOWCASE
========================================================== */

.solutions-showcase{
    background:var(--color-white);
}

.solutions-showcase .section-heading{
}


/* ==========================================================
   ROW
========================================================== */

.solution-row{

    display:grid;
    grid-template-columns:38% 62%;
    gap:3rem;

    align-items:center;

    padding:3rem 0;

    border-bottom:1px solid rgba(15,34,58,.08);

}

.solution-row:last-child{
    border-bottom:none;
}

.solution-row--reverse{

    grid-template-columns:65% 35%;

}

.solution-row--reverse .solution-image{
    order:2;
}

.solution-row--reverse .solution-content{
    order:1;
}


/* ==========================================================
   IMAGE
========================================================== */

.solution-image{

    display:flex;
    justify-content:center;
    align-items:center;

}

.solution-image img{

    width:82%;
    max-width:340px;
    height:auto;

    display:block;

    border-radius:18px;

    box-shadow:
        0 16px 40px rgba(0,0,0,.08),
        0 4px 12px rgba(0,0,0,.05);

    transition:transform .35s ease;

}

.solution-row:hover .solution-image img{

    transform:translateY(-5px);

}


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

.solution-category{

    display:inline-block;

    margin-bottom:.75rem;

    font-size:.78rem;
    font-weight:700;

    letter-spacing:.14em;
    text-transform:uppercase;

    color:var(--color-accent);

}

.solution-content h3{

    margin-bottom:1rem;

    font-size:2rem;
    line-height:1.2;

}

.solution-content p{

    margin-bottom:1.5rem;

    max-width:700px;

}


/* ==========================================================
   SERVICES
========================================================== */

.solution-services{

    display:grid;

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

    column-gap:2rem;
    row-gap:.85rem;

}

.solution-service{

    position:relative;

    padding-left:1.25rem;

    font-weight:500;

    line-height:1.45;

}

.solution-service::before{

    content:"";

    position:absolute;

    left:0;
    top:.58rem;

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--color-accent);

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:991px){

    .solution-row,
    .solution-row--reverse{

        grid-template-columns:1fr;

        gap:2rem;

        padding:2.75rem 0;

    }

    .solution-row--reverse .solution-image,
    .solution-row--reverse .solution-content{

        order:initial;

    }

    .solution-image{

        margin:0 auto;

    }

    .solution-image img{

        width:70%;
        max-width:360px;

    }

    .solution-content{

        text-align:center;

    }

    .solution-content p{

        margin-left:auto;
        margin-right:auto;

    }

    .solution-services{

        max-width:620px;

        margin:0 auto;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:767px){

    .solutions-showcase .section-heading{

        margin-bottom:3rem;

    }

    .solution-row{

        gap:1.75rem;

        padding:2.5rem 0;

    }

    .solution-image img{

        width:88%;
        max-width:320px;

    }

    .solution-content{

        text-align:left;

    }

    .solution-content h3{

        font-size:1.55rem;

    }

    .solution-content p{

        margin-bottom:1.25rem;

    }

    .solution-services{

        grid-template-columns:1fr;

        gap:.75rem;

        max-width:none;

    }

}

/* ==========================================================
   PAGE CTA
========================================================== */

/* ----------------------------------------------------------
   SECTION
---------------------------------------------------------- */

.page-cta{
    position:relative;

    background:var(--navy-dark);

    overflow:hidden;
}

.page-cta::before{
    content:"";

    position:absolute;
    top:-220px;
    right:-220px;

    width:650px;
    height:650px;

    background:
        radial-gradient(
            circle,
            rgba(200,164,93,.10),
            transparent 70%
        );

    pointer-events:none;
}


/* ----------------------------------------------------------
   CONTENT
---------------------------------------------------------- */

.cta-content{
    position:relative;
    z-index:2;

    margin:0 auto;

    text-align:center;
}

.page-cta .section-tag{
    color:var(--gold-light);
}

.page-cta h2{
    margin:1.5rem 0;

    color:var(--white);
}

.page-cta p{
    margin:0 auto;

    color:rgba(255,255,255,.82);
}


/* ----------------------------------------------------------
   ACTIONS
---------------------------------------------------------- */

.cta-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:1rem;

    margin-top:2.75rem;
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width:991px){



}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width:767px){



    .cta-buttons{
        flex-direction:column;

        gap:1rem;

        margin-top:2rem;
    }

    .cta-buttons .btn,
    .cta-buttons .btn-primary,
    .cta-buttons .btn-secondary,
    .cta-buttons .btn-light{
        width:100%;
    }

}

@media (max-width:576px){



}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .overview-card,
    .overview-card::before,
    .solution-image img,
    .page-cta *,
    .page-cta *::before,
    .page-cta *::after{
        animation:none !important;
        transition:none !important;
    }

    .overview-card:hover,
    .solution-block:hover .solution-image img{
        transform:none;
    }

}