/* ==========================================================
   KENANTA ABOUT PAGE V2
   ========================================================== */

:root{
    --ka2-navy:#052744;
    --ka2-dark:#031b31;
    --ka2-blue:#1598ee;
    --ka2-blue2:#40b7ff;
    --ka2-text:#14283a;
    --ka2-muted:#647587;
    --ka2-line:#dfe8ef;
    --ka2-soft:#f7fafc;
    --ka2-white:#fff;
}

.ka2-wrap{
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
}


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

.ka2-hero{
    height:430px;
    min-height:430px;

    position:relative;
    overflow:hidden;

    background:var(--ka2-dark);
}

.ka2-hero-bg{
    position:absolute;
    inset:0;

    background-image:
        url('/assets/about-banner.webp');

    background-size:cover;
    background-position:center center;

    filter:
        brightness(.67)
        saturate(.80)
        contrast(1.03);
}

.ka2-hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,24,46,.91),
            rgba(3,24,46,.64) 42%,
            rgba(3,24,46,.18)
        );
}

.ka2-hero-inner{
    height:100%;

    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:center;

    max-width:1180px;
}

.ka2-eyebrow,
.ka2-label{
    display:block;

    color:var(--ka2-blue);

    font-size:11px;
    font-weight:800;

    letter-spacing:2.5px;

    margin-bottom:10px;
}

.ka2-hero h1{
    max-width:690px;

    margin:0;

    color:#fff !important;

    font-size:58px;

    line-height:1 !important;

    letter-spacing:-.045em !important;
}

.ka2-hero h1 span{
    display:block;

    color:#30abff;
}

.ka2-hero p{
    margin:20px 0 0;

    max-width:530px;

    color:rgba(255,255,255,.90) !important;

    font-size:17px;

    line-height:1.6 !important;
}


/* ==========================================================
   COMMON
   ========================================================== */

.ka2-section{
    padding:80px 0;

    background:#fff;
}

.ka2-soft{
    background:var(--ka2-soft);
}

.ka2-heading{
    max-width:680px;

    margin-bottom:38px;
}

.ka2-center{
    text-align:center;

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

.ka2-heading h2,
.ka2-about-copy h2,
.ka2-opportunity-grid h2{
    margin:0 0 18px;

    color:var(--ka2-navy) !important;

    font-size:42px;

    line-height:1.08 !important;

    letter-spacing:-.04em !important;
}

.ka2-heading h2 span,
.ka2-about-copy h2 span,
.ka2-opportunity-grid h2 span{
    color:var(--ka2-blue);
}

.ka2-heading p,
.ka2-about-copy p,
.ka2-opportunity-grid p{
    color:var(--ka2-muted) !important;

    font-size:15px;

    line-height:1.75 !important;
}


/* ==========================================================
   ABOUT GRID
   ========================================================== */

.ka2-about-grid,
.ka2-opportunity-grid{
    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:65px;

    align-items:center;
}

.ka2-about-image,
.ka2-opportunity-image{
    overflow:hidden;

    border-radius:12px;

    box-shadow:
        0 18px 48px rgba(4,39,70,.10);
}

.ka2-about-image img,
.ka2-opportunity-image img{
    display:block;

    width:100%;
    height:390px;

    object-fit:cover;

    filter:
        brightness(.85)
        saturate(.83);
}


/* ==========================================================
   WHAT WE DO
   ========================================================== */

.ka2-three-grid{
    display:grid;

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

    gap:20px;
}

.ka2-card{
    position:relative;

    padding:32px;

    background:#fff;

    border:1px solid var(--ka2-line);

    border-radius:10px;

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

.ka2-card:hover{
    transform:translateY(-4px);

    border-color:#bad8eb;

    box-shadow:
        0 16px 38px rgba(4,39,70,.08);
}

.ka2-number{
    display:block;

    color:#a7bdcd;

    font-size:12px;

    font-weight:800;

    margin-bottom:18px;
}

.ka2-icon{
    width:48px;
    height:48px;

    display:flex;

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

    border-radius:50%;

    background:#edf7ff;

    color:#0b86de;

    font-size:25px;

    margin-bottom:20px;
}

.ka2-card h3{
    color:var(--ka2-navy) !important;

    font-size:18px;

    margin:0 0 11px;
}

.ka2-card p{
    color:var(--ka2-muted) !important;

    font-size:13px;

    line-height:1.7 !important;
}


/* ==========================================================
   PROCESS
   ========================================================== */

.ka2-process{
    display:grid;

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

    gap:30px;

    margin-top:45px;
}

.ka2-process article{
    position:relative;

    padding:0 20px;
}

.ka2-process article:not(:last-child)::after{
    content:"";

    position:absolute;

    right:-15px;
    top:22px;

    width:30px;
    height:1px;

    background:#b8ccdc;
}

.ka2-process article > span{
    width:42px;
    height:42px;

    display:flex;

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

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--ka2-blue),
            var(--ka2-blue2)
        );

    color:#fff;

    font-size:12px;

    font-weight:800;

    margin-bottom:19px;
}

.ka2-process h3{
    margin:0 0 9px;

    color:var(--ka2-navy) !important;

    font-size:17px;
}

.ka2-process p{
    color:var(--ka2-muted) !important;

    font-size:12px;

    line-height:1.7 !important;
}


/* ==========================================================
   STORY SECTION
   ========================================================== */

.ka2-story{
    position:relative;

    min-height:400px;

    overflow:hidden;

    background:var(--ka2-dark);
}

.ka2-story-bg{
    position:absolute;

    inset:0;

    background-image:
        url('/assets/supplier-banner.webp');

    background-size:cover;
    background-position:center;

    filter:
        brightness(.47)
        saturate(.70);
}

.ka2-story-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,27,49,.97),
            rgba(3,27,49,.84) 48%,
            rgba(3,27,49,.40)
        );
}

.ka2-story-grid{
    min-height:400px;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:90px;

    position:relative;

    z-index:2;
}

.ka2-light{
    color:#62c1ff;
}

.ka2-story h2{
    margin:0 0 18px;

    color:#fff !important;

    font-size:43px;
}

.ka2-story h2 span{
    color:#30abff;
}

.ka2-story p{
    max-width:580px;

    color:rgba(255,255,255,.83) !important;

    font-size:14px;

    line-height:1.75 !important;
}

.ka2-story-points{
    display:grid;

    gap:16px;
}

.ka2-story-points > div{
    display:flex;

    align-items:center;

    gap:13px;

    color:#fff;

    font-size:14px;

    font-weight:600;
}

.ka2-story-points b{
    width:28px;
    height:28px;

    display:flex;

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

    background:#1598ee;

    border-radius:50%;

    color:#fff;
}


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

.ka2-cta{
    min-height:290px;

    position:relative;

    overflow:hidden;
}

.ka2-cta-bg{
    position:absolute;

    inset:0;

    background-image:
        url('/assets/contact-banner.webp');

    background-size:cover;
    background-position:center;

    filter:
        brightness(.46)
        saturate(.72);
}

.ka2-cta-overlay{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,26,48,.95),
            rgba(3,26,48,.67)
        );
}

.ka2-cta-inner{
    min-height:290px;

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:50px;
}

.ka2-cta h2{
    margin:0;

    max-width:600px;

    color:#fff !important;

    font-size:36px;
}

.ka2-cta p{
    max-width:570px;

    margin:13px 0 0;

    color:rgba(255,255,255,.78) !important;

    font-size:13px;
}

.ka2-actions{
    display:flex;

    gap:12px;

    flex-shrink:0;
}

.ka2-btn{
    min-height:48px;

    display:inline-flex;

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

    padding:0 24px;

    border-radius:26px;

    text-decoration:none;

    font-size:12px;

    font-weight:700;
}

.ka2-btn-primary{
    color:#fff !important;

    background:
        linear-gradient(
            135deg,
            var(--ka2-blue),
            var(--ka2-blue2)
        );
}

.ka2-btn-outline{
    color:#fff !important;

    background:transparent;

    border:
        1px solid rgba(255,255,255,.50);
}


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

@media(max-width:767px){

    .ka2-wrap{
        width:calc(100% - 30px);
    }

    .ka2-hero{
        height:430px;
        min-height:430px;
    }

    .ka2-hero-bg{
        background-image:
            url('/assets/about-mobile.webp');

        background-position:center;
    }

    .ka2-hero-overlay{
        background:
            linear-gradient(
                to bottom,
                rgba(3,24,46,.20),
                rgba(3,24,46,.44) 44%,
                rgba(3,24,46,.94) 100%
            );
    }

    .ka2-hero-inner{
        justify-content:flex-end;

        padding-bottom:34px;
    }

    .ka2-hero h1{
        font-size:40px;
    }

    .ka2-hero p{
        font-size:14px;
    }


    .ka2-section{
        padding:55px 0;
    }


    .ka2-about-grid,
    .ka2-opportunity-grid{
        grid-template-columns:1fr;

        gap:30px;
    }

    .ka2-about-image img,
    .ka2-opportunity-image img{
        height:260px;
    }


    .ka2-heading h2,
    .ka2-about-copy h2,
    .ka2-opportunity-grid h2{
        font-size:33px;
    }


    .ka2-three-grid{
        grid-template-columns:1fr;
    }


    .ka2-process{
        grid-template-columns:
            repeat(2,1fr);

        gap:35px 12px;
    }

    .ka2-process article{
        padding:0;
    }

    .ka2-process article::after{
        display:none;
    }


    .ka2-story-grid{
        grid-template-columns:1fr;

        gap:35px;

        padding-top:50px;
        padding-bottom:50px;
    }

    .ka2-story h2{
        font-size:34px;
    }


    .ka2-cta-inner{
        flex-direction:column;

        align-items:flex-start;

        justify-content:center;

        padding-top:45px;
        padding-bottom:45px;
    }

    .ka2-actions{
        width:100%;

        flex-direction:column;
    }

    .ka2-btn{
        width:100%;
    }

}


@media(max-width:390px){

    .ka2-process{
        grid-template-columns:1fr;
    }

}