
/* =========================================================
   KENANTA — CLEAN CORPORATE REFERENCE DESIGN
   ========================================================= */

:root{
    --navy:#062746;
    --navy-deep:#031b31;
    --blue:#1598ee;
    --blue-light:#37b6ff;
    --text:#142638;
    --muted:#647486;
    --line:#dfe8ef;
    --soft:#f7fafc;
    --white:#ffffff;
}

/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#fff !important;
    color:var(--text) !important;
    font-family:"Montserrat",Arial,sans-serif !important;
}

body,
p,
li,
input,
textarea,
select,
button{
    font-family:"Montserrat",Arial,sans-serif !important;
}

p{
    color:var(--muted) !important;
    line-height:1.72 !important;
}

h1,h2,h3,h4{
    color:var(--navy) !important;
    letter-spacing:-.035em !important;
    line-height:1.08 !important;
}

.section{
    padding-top:76px !important;
    padding-bottom:76px !important;
}

.wrap{
    width:min(1180px,calc(100% - 48px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}


/* =========================================================
   HEADER
   ========================================================= */

header,
.site-header,
.kenanta-header{
    background:var(--navy-deep) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    box-shadow:none !important;
}

header .wrap,
.site-header .wrap,
.kenanta-header .wrap{
    width:100% !important;
    max-width:none !important;
    min-height:78px !important;
    padding-left:34px !important;
    padding-right:34px !important;
}

header .logo,
header .brand,
.site-header .logo,
.kenanta-header .logo{
    margin-left:0 !important;
    padding-left:0 !important;
}

header nav a,
.site-header nav a,
.kenanta-header nav a{
    color:rgba(255,255,255,.88) !important;
    font-size:13px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
}

header nav a:hover,
.site-header nav a:hover{
    color:#fff !important;
}


/* =========================================================
   IMAGE CODE — PAGE HERO BACKGROUNDS
   ========================================================= */

/* HOME */
body.kenanta-page-home .hero::before,
body.kenanta-page-home .kenanta-unified-hero::before{
    background-image:url('/assets/banner-home.webp') !important;
}

/* ABOUT */
body.kenanta-page-about .pagehero::before,
body.kenanta-page-about .hero::before,
body.kenanta-page-about .kenanta-unified-hero::before{
    background-image:url('/assets/banner-about.webp') !important;
}

/* SERVICES */
body.kenanta-page-services .pagehero::before,
body.kenanta-page-services .hero::before,
body.kenanta-page-services .services-hero::before,
body.kenanta-page-services .kenanta-unified-hero::before{
    background-image:url('/assets/banner-services.webp') !important;
}

/* BUYER */
body.kenanta-page-buyer .pagehero::before,
body.kenanta-page-buyer .hero::before,
body.kenanta-page-buyer .kenanta-unified-hero::before{
    background-image:url('/assets/banner-buyer.webp') !important;
}

/* SUPPLIER */
body.kenanta-page-seller .pagehero::before,
body.kenanta-page-seller .hero::before,
body.kenanta-page-seller .kenanta-unified-hero::before{
    background-image:url('/assets/banner-suppliers.webp') !important;
}

/* CONTACT */
body.kenanta-page-contact .pagehero::before,
body.kenanta-page-contact .hero::before,
body.kenanta-page-contact .kenanta-unified-hero::before{
    background-image:url('/assets/banner-contact.webp') !important;
}


/* =========================================================
   HOME HERO — LIKE REFERENCE
   ========================================================= */

body.kenanta-page-home .hero,
body.kenanta-page-home .kenanta-unified-hero{
    min-height:560px !important;
    height:560px !important;
    background:var(--navy-deep) !important;
    position:relative !important;
    overflow:hidden !important;
}

body.kenanta-page-home .hero::before,
body.kenanta-page-home .kenanta-unified-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background-size:cover !important;
    background-position:center center !important;
    filter:brightness(.67) saturate(.78) contrast(1.04) !important;
    opacity:1 !important;
}

body.kenanta-page-home .hero::after,
body.kenanta-page-home .kenanta-unified-hero::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:
        linear-gradient(
            90deg,
            rgba(2,25,48,.96) 0%,
            rgba(3,31,58,.82) 33%,
            rgba(3,31,58,.38) 62%,
            rgba(3,31,58,.08) 100%
        ) !important;
}

body.kenanta-page-home .hero .wrap,
body.kenanta-page-home .kenanta-unified-hero .wrap{
    min-height:560px !important;
    display:flex !important;
    align-items:center !important;
    position:relative !important;
    z-index:3 !important;
}

body.kenanta-page-home .hero-grid{
    grid-template-columns:1fr !important;
}

body.kenanta-page-home .hero-grid > div:first-child{
    max-width:610px !important;
}

body.kenanta-page-home .hero .eyebrow,
body.kenanta-page-home .kenanta-hero-eyebrow{
    color:#78c7ff !important;
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:3px !important;
}

body.kenanta-page-home .hero h1,
body.kenanta-page-home .kenanta-hero-title{
    color:#fff !important;
    font-size:clamp(48px,5vw,74px) !important;
    font-weight:800 !important;
    margin:16px 0 20px !important;
    line-height:.98 !important;
}

body.kenanta-page-home .hero h1 em,
body.kenanta-page-home .kenanta-hero-title em{
    color:#28a8ff !important;
    font-style:normal !important;
}

body.kenanta-page-home .hero p,
body.kenanta-page-home .kenanta-hero-description{
    color:rgba(255,255,255,.90) !important;
    font-size:17px !important;
    line-height:1.7 !important;
    max-width:570px !important;
}

body.kenanta-page-home .actions{
    display:flex !important;
    gap:14px !important;
    margin-top:30px !important;
}

.btn{
    min-height:48px !important;
    padding:0 26px !important;
    border-radius:24px !important;
    font-weight:700 !important;
    font-size:13px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.btn:not(.outline){
    background:linear-gradient(135deg,var(--blue),var(--blue-light)) !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 10px 24px rgba(18,157,238,.24) !important;
}

.btn.outline{
    background:transparent !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.48) !important;
}


/* =========================================================
   TRUST / 4-COLUMN STRIP
   ========================================================= */

.kenanta-trust-strip{
    background:#fff !important;
    padding:0 !important;
    border-bottom:1px solid var(--line) !important;
}

.kenanta-trust-inner{
    width:min(1180px,calc(100% - 48px)) !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:0 !important;
}

.kenanta-trust-inner > div{
    background:#fff !important;
    border:0 !important;
    border-right:1px solid var(--line) !important;
    border-radius:0 !important;
    padding:28px 26px !important;
    text-align:center !important;
    box-shadow:none !important;
}

.kenanta-trust-inner > div:last-child{
    border-right:0 !important;
}

.kenanta-trust-inner strong{
    display:block !important;
    color:var(--navy) !important;
    font-size:14px !important;
    margin-bottom:7px !important;
}

.kenanta-trust-inner span{
    color:#68798a !important;
    font-size:12px !important;
    line-height:1.55 !important;
}


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

.cards,
.services-grid{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:18px !important;
    margin-top:34px !important;
}

.cards article,
.service-card,
.services-grid article{
    background:#fff !important;
    border:1px solid var(--line) !important;
    border-radius:8px !important;
    box-shadow:none !important;
    padding:28px !important;
    min-height:190px !important;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease !important;
}

.cards article:hover,
.service-card:hover,
.services-grid article:hover{
    transform:translateY(-3px) !important;
    border-color:#bfd9eb !important;
    box-shadow:0 12px 32px rgba(4,39,70,.08) !important;
}

.cards article .symbol{
    width:46px !important;
    height:46px !important;
    border-radius:50% !important;
    background:#edf7ff !important;
    color:#087de0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:24px !important;
    margin-bottom:18px !important;
}

.cards article h3{
    font-size:17px !important;
    margin-bottom:10px !important;
}

.cards article p{
    font-size:13px !important;
    color:#68798a !important;
}


/* =========================================================
   INNER PAGE BANNERS — SHORT CLEAN BANNERS
   ========================================================= */

body:not(.kenanta-page-home) .pagehero,
body:not(.kenanta-page-home) .kenanta-unified-hero{
    min-height:220px !important;
    height:220px !important;
    position:relative !important;
    overflow:hidden !important;
    background:var(--navy-deep) !important;
}

body:not(.kenanta-page-home) .pagehero::before,
body:not(.kenanta-page-home) .kenanta-unified-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background-size:cover !important;
    background-position:center !important;
    filter:brightness(.58) saturate(.76) !important;
}

body:not(.kenanta-page-home) .pagehero::after,
body:not(.kenanta-page-home) .kenanta-unified-hero::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(90deg,rgba(2,27,51,.92),rgba(2,27,51,.42)) !important;
}

body:not(.kenanta-page-home) .pagehero .wrap,
body:not(.kenanta-page-home) .kenanta-unified-hero .wrap{
    min-height:220px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    position:relative !important;
    z-index:2 !important;
}

body:not(.kenanta-page-home) .pagehero h1,
body:not(.kenanta-page-home) .kenanta-hero-title{
    color:#fff !important;
    font-size:42px !important;
    margin:6px 0 !important;
}

body:not(.kenanta-page-home) .pagehero .eyebrow,
body:not(.kenanta-page-home) .kenanta-hero-eyebrow{
    color:#69bfff !important;
}


/* =========================================================
   FORMS
   ========================================================= */

input,
textarea,
select{
    background:#fff !important;
    border:1px solid #dbe4ec !important;
    border-radius:8px !important;
    min-height:48px !important;
    color:#21364a !important;
}

textarea{
    min-height:140px !important;
}

input:focus,
textarea:focus,
select:focus{
    border-color:#1598ee !important;
    box-shadow:0 0 0 3px rgba(21,152,238,.10) !important;
}


/* =========================================================
   DARK CTA / WHY KENANTA LOOK
   ========================================================= */

.cta-section,
.connect-section,
.why-kenanta,
.dark-section{
    background:var(--navy) !important;
}

.cta-section h2,
.connect-section h2,
.why-kenanta h2,
.dark-section h2{
    color:#fff !important;
}

.cta-section p,
.connect-section p,
.why-kenanta p,
.dark-section p{
    color:rgba(255,255,255,.76) !important;
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp-float,
.whatsapp-button,
.kenanta-whatsapp,
a[href*="wa.me"]{
    transform:scale(.86) !important;
    transform-origin:bottom right !important;
}


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

@media(max-width:767px){

    header .wrap,
    .site-header .wrap,
    .kenanta-header .wrap{
        min-height:72px !important;
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .wrap{
        width:min(100% - 28px,1180px) !important;
    }

    body.kenanta-page-home .hero,
    body.kenanta-page-home .kenanta-unified-hero{
        height:520px !important;
        min-height:520px !important;
    }

    body.kenanta-page-home .hero .wrap,
    body.kenanta-page-home .kenanta-unified-hero .wrap{
        min-height:520px !important;
        align-items:flex-end !important;
        padding-bottom:38px !important;
    }

    body.kenanta-page-home .hero h1,
    body.kenanta-page-home .kenanta-hero-title{
        font-size:42px !important;
        line-height:1 !important;
    }

    body.kenanta-page-home .hero p,
    body.kenanta-page-home .kenanta-hero-description{
        font-size:14px !important;
        line-height:1.6 !important;
    }

    body.kenanta-page-home .actions{
        flex-direction:column !important;
        align-items:flex-start !important;
    }

    body.kenanta-page-home .actions .btn{
        width:100% !important;
        max-width:270px !important;
    }

    .kenanta-trust-inner{
        width:100% !important;
        grid-template-columns:repeat(2,1fr) !important;
    }

    .kenanta-trust-inner > div{
        border-bottom:1px solid var(--line) !important;
        padding:20px 14px !important;
    }

    .cards,
    .services-grid{
        grid-template-columns:1fr !important;
    }

    .cards article,
    .service-card,
    .services-grid article{
        min-height:auto !important;
        padding:22px !important;
    }

    body:not(.kenanta-page-home) .pagehero,
    body:not(.kenanta-page-home) .kenanta-unified-hero{
        min-height:300px !important;
        height:300px !important;
    }

    body:not(.kenanta-page-home) .pagehero .wrap,
    body:not(.kenanta-page-home) .kenanta-unified-hero .wrap{
        min-height:300px !important;
        justify-content:flex-end !important;
        padding-bottom:32px !important;
    }

    body:not(.kenanta-page-home) .pagehero h1,
    body:not(.kenanta-page-home) .kenanta-hero-title{
        font-size:38px !important;
    }

    body:not(.kenanta-page-home) .kenanta-hero-description{
        color:#fff !important;
        font-size:14px !important;
        line-height:1.55 !important;
        max-width:92% !important;
        text-shadow:0 2px 10px rgba(0,0,0,.5) !important;
    }

    .section{
        padding-top:54px !important;
        padding-bottom:54px !important;
    }

}

