/* ==========================================================
   KOKO Enterprise
   Responsive Styles
   ========================================================== */

/*--------------------------------------------------------------
# Large Desktop
--------------------------------------------------------------*/

@media (min-width:1600px){

    .container{
        max-width:1400px;
    }

    .hero-content{
        max-width:820px;
    }

}

/*--------------------------------------------------------------
# Desktop
--------------------------------------------------------------*/

@media (max-width:1400px){

    .container{
        width:min(94%, var(--container));
    }

}

/*--------------------------------------------------------------
# Laptop
--------------------------------------------------------------*/

@media (max-width:1200px){

    .section{
        padding:6rem 0;
    }

    .hero{
        padding:160px 0 100px;
    }

    .hero-title{
        font-size:clamp(3.25rem,7vw,5.5rem);
    }

    .hero-metrics{
        gap:2rem;
    }

    .pillars-grid{
        gap:2rem;
    }

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

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

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:3rem;
    }

}

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

@media (max-width:992px){

    .container{
        width:92%;
    }

    .section{
        padding:5rem 0;
    }

    /* Header */

    .main-navigation{
        display:none;
    }

    .header-cta{
        display:none;
    }

    .nav-toggle{
        display:block;
    }

    /* Hero */

    .hero{
        padding:140px 0 90px;
    }

    .hero-content{
        max-width:100%;
    }

    .hero-actions{
        flex-wrap:wrap;
    }

    .hero-metrics{
        grid-template-columns:1fr;
        gap:2rem;
        margin-top:4rem;
    }

    /* Layout */

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

    .brands-grid{
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    }

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

    .footer-grid{
        grid-template-columns:1fr;
        gap:3rem;
    }

}

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

@media (max-width:768px){

    html{
        font-size:15px;
    }

    .container{
        width:94%;
    }

    .section{
        padding:4.5rem 0;
    }

    /* Hero */

    .hero{
        padding:120px 0 70px;
    }

    .hero-title{
        font-size:clamp(2.6rem,9vw,4rem);
    }

    .hero-subtitle{
        font-size:1.1rem;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-actions .btn{
        width:100%;
    }

    /* Introduction */

    .intro-title{
        font-size:clamp(2.25rem,8vw,3.5rem);
    }

    .intro-text{
        font-size:1.1rem;
    }

    /* Metrics */

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

    .metric-card{
        border-right:none;
        border-bottom:1px solid var(--color-border);
    }

    .metric-card:last-child{
        border-bottom:none;
    }

    /* CTA */

    .final-cta-actions{
        flex-direction:column;
    }

    .final-cta-actions .btn{
        width:100%;
    }

    /* Footer */

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .site-logo img{
        max-height:54px;
    }

}

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

@media (max-width:576px){

    html{
        font-size:14px;
    }

    h1{
        font-size:2.8rem;
    }

    h2{
        font-size:2.2rem;
    }

    h3{
        font-size:1.7rem;
    }

    .section{
        padding:4rem 0;
    }

    .hero{
        padding:110px 0 60px;
    }

    .hero-title{
        font-size:2.8rem;
    }

    .hero-subtitle{
        font-size:1rem;
    }

    .hero-metric h3{
        font-size:2.5rem;
    }

    .pillar-card,
    .brand-content,
    .metric-card{
        padding:1.5rem;
    }

    .mobile-navigation{
        width:100%;
        max-width:100%;
        padding:90px 30px 40px;
    }

    .mobile-menu a{
        font-size:1.05rem;
    }

    .btn{
        width:100%;
        justify-content:center;
    }

}

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

@media (max-width:400px){

    html{
        font-size:13px;
    }

    .container{
        width:95%;
    }

    .hero{
        padding:100px 0 50px;
    }

    .site-header .container{
        min-height:72px;
    }

    .site-logo img{
        max-height:48px;
    }

}

/*--------------------------------------------------------------
# Reduced Motion
--------------------------------------------------------------*/

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

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}
/* Temporary hero background verification */
body.home .site-main > .hero{
    background:#111111 !important;
    color:#ffffff !important;
}

body.home .site-main > .hero .hero-title,
body.home .site-main > .hero .hero-metric h2,
body.home .site-main > .hero .hero-metric h3{
    color:#ffffff !important;
}

body.home .site-main > .hero .hero-subtitle,
body.home .site-main > .hero .hero-metric p{
    color:rgba(255,255,255,.78) !important;
}