/* ==========================================================
   KOKO Enterprise
   Page Header
   Version: 3.0.0
   ========================================================== */

/*--------------------------------------------------------------
# Page Header
--------------------------------------------------------------*/

.page-header{
    position:relative;

    padding:180px 0 100px;

    overflow:hidden;

    color:#ffffff;
    background:#121212;
}

.page-header::before{
    position:absolute;
    inset:0;

    content:"";

    background:
        linear-gradient(
            135deg,
            rgba(0,0,0,.72),
            rgba(18,18,18,.45)
        );

    pointer-events:none;
}

.page-header .container{
    position:relative;
    z-index:2;
}

/*--------------------------------------------------------------
# Page Kicker
--------------------------------------------------------------*/

.page-header .section-kicker{
    display:inline-flex;
    align-items:center;

    margin:0 0 1.5rem;

    color:#d71920;

    font-size:.78rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.25em;
    text-transform:uppercase;
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/

.page-title{
    max-width:980px;

    margin:0 0 1.75rem;

    color:#ffffff;

    font-family:var(--font-heading);
    font-size:clamp(3rem,6vw,5rem);
    font-weight:500;
    line-height:1;
    letter-spacing:-.045em;
}

/*--------------------------------------------------------------
# Page Description
--------------------------------------------------------------*/

.page-description{
    max-width:760px;

    margin:0;

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

    font-size:1.2rem;
    line-height:1.8;
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/

.breadcrumbs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.75rem;

    width:100%;

    margin:0 0 2rem;

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

    font-size:.9rem;
    line-height:1.5;
}

.breadcrumbs a{
    color:#ffffff;

    text-decoration:none;

    transition:color .25s ease;
}

.breadcrumbs a:hover{
    color:#d71920;
}

.breadcrumbs span{
    color:rgba(255,255,255,.6);
}

/*--------------------------------------------------------------
# Careers Page Header
--------------------------------------------------------------*/

.careers-page .page-header{
    text-align:center;
}

.careers-page .page-header .container{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.careers-page .page-header .breadcrumbs{
    align-self:stretch;
    justify-content:flex-start;

    text-align:left;
}

.careers-page .page-header .section-kicker{
    justify-content:center;

    margin-right:auto;
    margin-bottom:1.5rem;
    margin-left:auto;

    text-align:center;
}

.careers-page .page-header .page-title{
    max-width:980px;

    margin-right:auto;
    margin-bottom:2rem;
    margin-left:auto;

    text-align:center;
    text-wrap:balance;
}

.careers-page .page-header .page-description{
    max-width:760px;

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

    text-align:center;
    text-wrap:balance;
}

/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/

@media (max-width:992px){

    .page-header{
        padding:155px 0 90px;
    }

    .page-title{
        font-size:clamp(3rem,7vw,4.5rem);
    }

}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media (max-width:768px){

    .page-header{
        padding:140px 0 80px;
    }

    .page-title{
        font-size:clamp(2.5rem,9vw,4rem);
        line-height:1.02;
    }

    .page-description{
        font-size:1.05rem;
        line-height:1.75;
    }

    .breadcrumbs{
        margin-bottom:1.5rem;
    }

    .careers-page .page-header .page-title{
        margin-bottom:1.5rem;
    }

}

/*--------------------------------------------------------------
# Small Mobile
--------------------------------------------------------------*/

@media (max-width:576px){

    .page-header{
        padding:120px 0 70px;
    }

    .page-header .section-kicker{
        margin-bottom:1.25rem;
    }

    .page-title{
        font-size:clamp(2.35rem,11vw,3.5rem);
    }

}