/* ==========================================================
   KENANTA CLEAN PROFESSIONAL DESIGN V2
   ========================================================== */

:root {
    --kr-navy:#052744;
    --kr-dark:#021b31;
    --kr-blue:#1799ec;
    --kr-blue2:#3db6ff;
    --kr-text:#10273b;
    --kr-muted:#617487;
    --kr-line:#dce7ef;
    --kr-soft:#f7fafc;
    --kr-white:#ffffff;
}

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


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

.kr-hero {
    position:relative;
    height:560px;
    overflow:hidden;
    background:var(--kr-dark);
}

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

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

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

    filter:
        brightness(.62)
        saturate(.76)
        contrast(1.05);
}

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

    background:
        linear-gradient(
            90deg,
            rgba(2,23,44,.98) 0%,
            rgba(3,35,64,.88) 34%,
            rgba(3,35,64,.44) 62%,
            rgba(3,35,64,.08) 100%
        );
}

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

    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr .75fr;
    align-items:center;

    gap:70px;
}

.kr-hero-copy {
    max-width:590px;
}

.kr-eyebrow {
    display:block;

    color:#fff;

    font-size:13px;
    font-weight:700;
    letter-spacing:4px;

    margin-bottom:14px;
}

.kr-hero-copy h1 {
    margin:0;

    color:#fff !important;

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

    line-height:.94 !important;
    letter-spacing:-.05em !important;
}

.kr-hero-copy h1 span {
    display:block;
    color:#1fa6ff;
}

.kr-hero-copy p {
    color:rgba(255,255,255,.88) !important;

    font-size:16px;

    line-height:1.7 !important;

    max-width:500px;

    margin:24px 0 0;
}

.kr-hero-actions {
    display:flex;

    align-items:center;

    gap:15px;

    margin-top:30px;
}

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

    display:inline-flex;

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

    padding:0 27px;

    border-radius:25px;

    text-decoration:none;

    font-size:13px;
    font-weight:700;

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

.kr-btn:hover {
    transform:translateY(-2px);
}

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

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

    border:1px solid transparent;

    box-shadow:
        0 10px 25px rgba(23,153,236,.23);
}

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

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

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

.kr-hero-brand {
    text-align:center;

    color:#fff;
}

.kr-hero-brand img {
    display:block;

    width:150px;
    max-height:120px;

    object-fit:contain;

    margin:0 auto 12px;
}

.kr-hero-brand strong {
    display:block;

    font-size:34px;
    letter-spacing:4px;

    color:#fff;
}

.kr-hero-brand span {
    display:block;

    margin-top:7px;

    font-size:9px;

    letter-spacing:1.7px;

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


/* ==========================================================
   TRUST
   ========================================================== */

.kr-trust {
    background:#fff;

    border-bottom:
        1px solid var(--kr-line);
}

.kr-trust-grid {
    display:grid;

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

.kr-trust article {
    min-height:150px;

    display:flex;

    flex-direction:column;

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

    text-align:center;

    padding:24px;

    border-right:
        1px solid var(--kr-line);
}

.kr-trust article:last-child {
    border-right:0;
}

.kr-trust-icon {
    font-size:28px;

    color:#064f92;

    margin-bottom:10px;
}

.kr-trust h3 {
    color:var(--kr-navy) !important;

    font-size:14px;

    margin:0 0 7px;
}

.kr-trust p {
    max-width:170px;

    margin:0;

    color:var(--kr-muted) !important;

    font-size:11px;

    line-height:1.55 !important;
}


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

.kr-section {
    padding:72px 0;

    background:#fff;
}

.kr-label {
    display:block;

    color:#148cdc;

    font-size:11px;

    font-weight:800;

    letter-spacing:2.5px;

    margin-bottom:7px;
}

.kr-section-head {
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:30px;

    margin-bottom:32px;
}

.kr-section-head h2,
.kr-process-heading h2 {
    margin:0;

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

    font-size:38px;

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

.kr-section-head p,
.kr-process-heading p {
    margin:7px 0 0;

    color:var(--kr-muted) !important;

    font-size:13px;
}

.kr-small-btn {
    padding:10px 18px;

    color:#087ed0 !important;

    text-decoration:none;

    border:
        1px solid #bcd8eb;

    border-radius:22px;

    font-size:11px;

    font-weight:700;
}


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

.kr-service-grid {
    display:grid;

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

    gap:17px;
}

.kr-service-card {
    min-height:185px;

    padding:27px;

    background:#fff;

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

    border-radius:8px;

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

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

    border-color:#b9d7e9;

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

.kr-service-icon {
    width:46px;
    height:46px;

    display:flex;

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

    background:#edf7ff;

    color:#087edb;

    border-radius:50%;

    font-size:25px;

    margin-bottom:18px;
}

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

    margin:0 0 9px;

    font-size:15px;
}

.kr-service-card p {
    margin:0;

    color:var(--kr-muted) !important;

    font-size:12px;

    line-height:1.6 !important;
}


/* ==========================================================
   WHY KENANTA
   ========================================================== */

.kr-why {
    min-height:330px;

    position:relative;

    overflow:hidden;

    background:#052744;
}

.kr-why-bg {
    position:absolute;

    inset:0;

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

    background-size:cover;

    background-position:center;

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

.kr-why-overlay {
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,27,51,.97) 0%,
            rgba(2,27,51,.88) 45%,
            rgba(2,27,51,.38) 100%
        );
}

.kr-why-grid {
    min-height:330px;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:center;

    gap:80px;

    position:relative;

    z-index:2;
}

.kr-label-light {
    color:#57b9ff;
}

.kr-why h2 {
    margin:0;

    color:#fff !important;

    font-size:40px;

    line-height:1.08 !important;
}

.kr-why p {
    max-width:460px;

    margin:16px 0 24px;

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

    font-size:13px;
}

.kr-check-list {
    display:grid;

    gap:13px;
}

.kr-check-list > div {
    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:13px;

    font-weight:600;
}

.kr-check-list b {
    width:25px;
    height:25px;

    display:flex;

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

    border-radius:50%;

    background:#1399ed;

    color:#fff;
}


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

.kr-process {
    background:#fff;
}

.kr-process-heading {
    text-align:center;

    margin-bottom:45px;
}

.kr-process-grid {
    display:grid;

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

    gap:32px;
}

.kr-process-grid article {
    position:relative;

    padding:0 18px;
}

.kr-step {
    width:34px;
    height:34px;

    display:flex;

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

    background:#169cec;

    color:#fff;

    border-radius:50%;

    font-size:11px;

    font-weight:700;

    margin-bottom:14px;
}

.kr-process-icon {
    color:#074f8b;

    font-size:27px;

    margin-bottom:14px;
}

.kr-process-grid h3 {
    color:var(--kr-navy) !important;

    margin:0 0 8px;

    font-size:14px;
}

.kr-process-grid p {
    margin:0;

    color:var(--kr-muted) !important;

    font-size:11px;

    line-height:1.6 !important;
}


/* ==========================================================
   LET'S CONNECT
   ========================================================== */

.kr-connect {
    margin-top:55px;

    min-height:88px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding:18px 30px;

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            #052c50,
            #07528b
        );
}

.kr-connect > div {
    display:flex;

    align-items:center;

    gap:17px;
}

.kr-connect-icon {
    color:#fff;

    font-size:35px;
}

.kr-connect strong {
    color:#fff;

    font-size:15px;
}

.kr-connect p {
    margin:3px 0 0;

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

    font-size:11px;
}


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

@media(max-width:767px) {

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


    .kr-hero {
        height:590px;
    }

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

        background-position:center;
    }

    .kr-hero-overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(2,23,44,.18),
                rgba(2,23,44,.36) 38%,
                rgba(2,23,44,.94) 100%
            );
    }

    .kr-hero-inner {
        display:flex;

        align-items:flex-end;

        padding-bottom:38px;
    }

    .kr-hero-copy {
        width:100%;
    }

    .kr-hero-copy h1 {
        font-size:46px;
    }

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

    .kr-hero-brand {
        display:none;
    }

    .kr-hero-actions {
        flex-direction:column;

        align-items:flex-start;
    }

    .kr-btn {
        min-width:220px;
    }


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

    .kr-trust article {
        border-bottom:
            1px solid var(--kr-line);

        min-height:135px;

        padding:18px 12px;
    }


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


    .kr-section-head {
        display:block;
    }

    .kr-small-btn {
        display:inline-flex;

        margin-top:18px;
    }


    .kr-service-grid {
        grid-template-columns:1fr;
    }


    .kr-why-grid {
        grid-template-columns:1fr;

        gap:35px;

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

    .kr-why h2 {
        font-size:34px;
    }


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

        gap:35px 15px;
    }


    .kr-connect {
        flex-direction:column;

        align-items:flex-start;

        padding:24px;
    }


    .kr-connect .kr-btn {
        width:100%;
    }

}


@media(max-width:390px) {

    .kr-hero-copy h1 {
        font-size:41px;
    }

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

}


/* ==========================================================
   HOME BANNER LOGO - 50% LARGER
   ========================================================== */

.kr-hero-brand{
    width:520px !important;
    max-width:520px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
}

.kr-hero-brand img{
    display:block !important;

    width:465px !important;
    max-width:465px !important;
    height:auto !important;

    margin:0 auto 12px !important;

    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
}

/* Keep the text beneath centered */
.kr-hero-brand strong,
.kr-hero-brand p,
.kr-hero-brand span{
    text-align:center !important;
}

/* MOBILE */
@media(max-width:767px){

    .kr-hero-brand{
        width:270px !important;
        max-width:270px !important;
    }

    .kr-hero-brand img{
        width:240px !important;
        max-width:240px !important;
    }
}


/* ==========================================================
   HEADER LOGO SMALLER + HERO LOGO CLEANER
   ========================================================== */

/* 1) HEADER LOGO DECREASE ~10% */
.site-header .brand img,
.site-header .logo img,
.site-header .site-logo img,
header .brand img,
header .logo img,
header .site-logo img,
.navbar-brand img,
.site-branding img {
    height: 52px !important;
    width: auto !important;
    max-height: 52px !important;
}

/* 2) HERO / BANNER BRAND BLOCK CLEAN */
.kr-hero-brand,
.hero-brand,
.kenanta-hero-brand,
.home-hero-logo {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: center !important;
}

/* 3) INCREASE HERO LOGO SIZE */
.kr-hero-brand img,
.hero-brand img,
.kenanta-hero-brand img,
.home-hero-logo img {
    width: 240px !important;
    max-width: 240px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

/* 4) REMOVE EXTRA BIG KENANTA TEXT */
.kr-hero-brand strong,
.kr-hero-brand h1,
.kr-hero-brand h2,
.kr-hero-brand .brand-title,
.hero-brand strong,
.hero-brand h1,
.hero-brand h2,
.hero-brand .brand-title,
.kenanta-hero-brand strong,
.kenanta-hero-brand h1,
.kenanta-hero-brand h2,
.kenanta-hero-brand .brand-title,
.home-hero-logo strong,
.home-hero-logo h1,
.home-hero-logo h2,
.home-hero-logo .brand-title {
    display: none !important;
}

/* 5) KEEP ONLY SMALL TAGLINE BELOW LOGO */
.kr-hero-brand p,
.kr-hero-brand span,
.hero-brand p,
.hero-brand span,
.kenanta-hero-brand p,
.kenanta-hero-brand span,
.home-hero-logo p,
.home-hero-logo span {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.95) !important;
}

/* 6) MOBILE */
@media (max-width: 767px) {

    .site-header .brand img,
    .site-header .logo img,
    .site-header .site-logo img,
    header .brand img,
    header .logo img,
    header .site-logo img,
    .navbar-brand img,
    .site-branding img {
        height: 46px !important;
        max-height: 46px !important;
    }

    .kr-hero-brand img,
    .hero-brand img,
    .kenanta-hero-brand img,
    .home-hero-logo img {
        width: 170px !important;
        max-width: 170px !important;
    }

    .kr-hero-brand p,
    .kr-hero-brand span,
    .hero-brand p,
    .hero-brand span,
    .kenanta-hero-brand p,
    .kenanta-hero-brand span,
    .home-hero-logo p,
    .home-hero-logo span {
        font-size: 8px !important;
        letter-spacing: .16em !important;
    }
}


/* ==========================================================
   FINAL LOGO SIZING
   Header +20%
   Home banner logo +30%
   Tagline slightly smaller
   ========================================================== */


/* ----------------------------------------------------------
   HEADER LOGO +20%
   ---------------------------------------------------------- */

.site-header .brand img,
.site-header .logo img,
.site-header .site-logo img,
header .brand img,
header .logo img,
header .site-logo img,
.navbar-brand img,
.site-branding img {
    height: 63px !important;
    max-height: 63px !important;
    width: auto !important;
    object-fit: contain !important;
}


/* ----------------------------------------------------------
   HOME HERO BRAND AREA
   ---------------------------------------------------------- */

.kr-hero-brand {
    width: 340px !important;
    max-width: 340px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    text-align: center !important;
}


/* BANNER LOGO IMAGE +30% */

.kr-hero-brand img {
    display: block !important;

    width: 312px !important;
    max-width: 312px !important;

    height: auto !important;

    margin: 0 auto 7px !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    object-fit: contain !important;

    filter: none !important;
}


/* ----------------------------------------------------------
   REMOVE DUPLICATE LARGE KENANTA WORD
   ---------------------------------------------------------- */

.kr-hero-brand > strong,
.kr-hero-brand > h1,
.kr-hero-brand > h2,
.kr-hero-brand > h3,
.kr-hero-brand .brand-title {
    display: none !important;
}


/* ----------------------------------------------------------
   SMALL TAGLINE BELOW BANNER LOGO
   ---------------------------------------------------------- */

.kr-hero-brand > p,
.kr-hero-brand > span:not(.brand-title) {
    display: block !important;

    margin: 1px auto 0 !important;

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

    font-size: 8px !important;
    font-weight: 500 !important;

    line-height: 1.4 !important;

    letter-spacing: .18em !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

    text-align: center !important;
}


/* ----------------------------------------------------------
   POSITION BRAND NICELY ON RIGHT SIDE
   ---------------------------------------------------------- */

.kr-hero-brand {
    position: relative !important;
    z-index: 5 !important;

    transform: translateY(-4px) !important;
}


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

@media (max-width: 991px) {

    .site-header .brand img,
    .site-header .logo img,
    .site-header .site-logo img,
    header .brand img,
    header .logo img,
    header .site-logo img,
    .navbar-brand img,
    .site-branding img {
        height: 56px !important;
        max-height: 56px !important;
    }

    .kr-hero-brand {
        width: 260px !important;
        max-width: 260px !important;
    }

    .kr-hero-brand img {
        width: 230px !important;
        max-width: 230px !important;
    }

    .kr-hero-brand > p,
    .kr-hero-brand > span:not(.brand-title) {
        font-size: 7px !important;
        letter-spacing: .14em !important;
    }
}


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

@media (max-width: 767px) {

    .site-header .brand img,
    .site-header .logo img,
    .site-header .site-logo img,
    header .brand img,
    header .logo img,
    header .site-logo img,
    .navbar-brand img,
    .site-branding img {
        height: 52px !important;
        max-height: 52px !important;
    }

    .kr-hero-brand {
        width: 205px !important;
        max-width: 205px !important;
    }

    .kr-hero-brand img {
        width: 188px !important;
        max-width: 188px !important;
        margin-bottom: 5px !important;
    }

    .kr-hero-brand > p,
    .kr-hero-brand > span:not(.brand-title) {
        font-size: 6px !important;
        letter-spacing: .12em !important;
        white-space: normal !important;
    }
}


/* ==========================================================
   HEADER LOGO ONLY - INCREASE SIZE
   ========================================================== */

.site-header .brand img,
.site-header .logo img,
.site-header .site-logo img,
header .brand img,
header .logo img,
header .site-logo img,
.navbar-brand img,
.site-branding img {
    height: 78px !important;
    max-height: 78px !important;
    width: auto !important;
}

/* mobile */
@media (max-width: 767px) {
    .site-header .brand img,
    .site-header .logo img,
    .site-header .site-logo img,
    header .brand img,
    header .logo img,
    header .site-logo img,
    .navbar-brand img,
    .site-branding img {
        height: 62px !important;
        max-height: 62px !important;
    }
}


/* ==========================================================
   TRUCK ANIMATION - 20% SLOWER
   ========================================================== */

.loader-truck,
.intro-truck,
.kenanta-loader-truck,
.loader-truck-wrap,
.intro-truck-wrap {
    animation-duration: 6s !important;
    animation-timing-function: linear !important;
}