:root{
    --kea-blue:#0872a9;
    --kea-blue-dark:#073f70;
    --kea-teal:#2c98b8;
    --kea-green:#70b23f;
    --kea-orange:#f39a18;
    --kea-text:#173b5a;
    --kea-muted:#617585;
    --kea-line:#d9e5eb;
    --kea-soft:#f4f8fa;
    --kea-white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--kea-text);
    background:#fff;
    line-height:1.5;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}

/* HEADER */
.site-header{
    position:relative;
    z-index:1000;
    overflow:visible;
    color:#fff;
    background:linear-gradient(135deg,#2e9bbb 0%,#116a9d 100%);
}

.topnav{
    position:relative;
    z-index:1100;
    border-bottom:1px solid rgba(255,255,255,.18);
}

.menu{
    position:relative;
    z-index:1200;
}

.submenu{
    z-index:9999;
}

.hero{
    position:relative;
    z-index:1;
}
.topnav{border-bottom:1px solid rgba(255,255,255,.18)}
.topnav .container{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.menu{
    display:flex;
    gap:46px;
    margin:0;
    padding:0;
    list-style:none;
}
.menu a{font-size:15px;font-weight:700;color:#fff}
.menu a:hover{opacity:.8}
.mobile-menu-button{display:none}

.brand-zone{
    position:relative;
    padding:8px 0 24px;
    text-align:center;
}
.brand-logo{
    width:188px;
    margin:0 auto 10px;
    background:#fff;
    border-radius:4px;
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.brand-zone h1{
    margin:0 0 7px;
    font-size:40px;
    line-height:1.05;
    letter-spacing:-.5px;
}
.brand-zone .tagline{
    margin:0;
    font:20px/1.3 Georgia,serif;
}
.header-slogan{
    position:absolute;
    right:0;
    top:58px;
    width:195px;
    transform:rotate(-2deg);
}

/* HERO */
.hero{
    display:grid;
    grid-template-columns:41% 59%;
    min-height:330px;
    background:#fff;
}
.hero-copy{
    padding:42px 38px 38px max(42px,calc((100vw - 1180px)/2));
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.hero h2{
    margin:0 0 14px;
    color:var(--kea-blue-dark);
    font-size:40px;
    line-height:1.08;
    letter-spacing:-.4px;
}
.hero p{
    margin:0 0 21px;
    color:var(--kea-blue);
    font-size:19px;
}
.hero-photo{
    min-height:330px;
    background:url("../images/hero-keurmerk.jpg") center center/cover no-repeat;
}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
    min-height:46px;
    padding:0 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:2px solid var(--kea-blue);
    border-radius:5px;
    background:var(--kea-blue);
    color:#fff;
    font-weight:700;
}
.btn:hover{background:var(--kea-blue-dark);border-color:var(--kea-blue-dark)}
.btn.alt{background:#fff;color:var(--kea-blue)}
.btn.white{background:#fff;border-color:#fff;color:var(--kea-blue)}
.btn.outline-white{background:transparent;border-color:#fff;color:#fff}

/* FIVE VALUES */
.values{
    background:#fff;
    border-top:1px solid var(--kea-line);
    border-bottom:1px solid var(--kea-line);
}
.values-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.value{
    position:relative;
    padding:18px 14px 20px;
    text-align:center;
}
.value:not(:last-child):after{
    content:"";
    position:absolute;
    top:22px;
    right:0;
    bottom:22px;
    width:1px;
    background:var(--kea-line);
}
.value img{
    width:54px;
    height:54px;
    object-fit:contain;
    margin:0 auto 7px;
}
.value strong{
    display:block;
    color:var(--kea-blue-dark);
    font-size:17px;
}
.value span{
    display:block;
    color:#24628b;
    font-size:14px;
    line-height:1.3;
}

/* MAIN */
.section{padding:34px 0}
.section.soft{background:linear-gradient(#f7fafc,#eef5f8)}
.main-grid{
    display:grid;
    grid-template-columns:46% 54%;
    gap:20px;
}
.panel{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid #dce7ec;
    border-radius:9px;
    padding:26px;
    box-shadow:0 10px 30px rgba(13,78,117,.06);
}
.panel h3{
    margin:0 0 17px;
    color:var(--kea-blue-dark);
    font-size:25px;
    line-height:1.18;
}
.checks{
    list-style:none;
    padding:0;
    margin:0 0 21px;
}
.checks li{
    position:relative;
    padding:6px 0 6px 35px;
}
.checks li:before{
    content:"✓";
    position:absolute;
    left:0;
    top:7px;
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--kea-green);
    color:#fff;
    font-weight:700;
}
.info-card{
    min-height:338px;
    padding-right:28px;
    padding-bottom:175px;
}
.info-card p{
    max-width:620px;
    margin:0 0 13px;
}
.badge-slogan{
    position:absolute;
    right:10px;
    left:10px;
    bottom:-2px;
    width:calc(100% - 20px);
    max-height:200px;
    object-fit:contain;
    object-position:center bottom;
}

/* CTA */
.big-cta{
    color:#fff;
    background:
        linear-gradient(90deg,rgba(4,73,116,.94),rgba(30,148,187,.87)),
        url("../images/cta-gebouw.jpg") left center/cover no-repeat;
}
.big-cta .container{
    min-height:170px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:28px;
    align-items:center;
}
.big-cta h2{margin:0 0 5px;font-size:28px}
.big-cta p{margin:0;font-size:17px}

/* SERVICES */
.services{background:#fff;border-bottom:1px solid var(--kea-line)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.service{
    display:grid;
    grid-template-columns:54px 1fr;
    gap:16px;
    padding:28px 32px;
}
.service:not(:last-child){border-right:1px solid var(--kea-line)}
.service img{width:50px;height:50px}
.service h3{
    margin:0 0 8px;
    color:var(--kea-blue-dark);
    font-size:18px;
    line-height:1.25;
}
.service p{margin:0 0 10px;color:var(--kea-muted);font-size:15px}
.service a{color:var(--kea-blue);font-weight:700;font-size:14px}

/* BRIEFCODE */
.extra-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}
.code-box{
    background:#eef7fb;
    border:1px solid #d7e9f2;
    border-radius:8px;
    padding:22px;
}
.code-form{display:flex;gap:8px;flex-wrap:wrap}
.code-form input[type=text]{
    height:44px;
    min-width:220px;
    padding:0 12px;
    border:1px solid #a8c8d8;
    border-radius:5px;
    background:#fff;
    font-size:16px;
}
.code-form input[type=submit]{
    height:44px;
    padding:0 22px;
    border:0;
    border-radius:5px;
    background:var(--kea-blue);
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

/* FOOTER */
.footer{
    padding:26px 0;
    background:#073d62;
    color:#dceaf1;
}
.footer .container{
    display:grid;
    grid-template-columns:1fr auto;
    gap:25px;
    align-items:end;
}
.footer a{color:#fff}

/* TABLET */
@media(max-width:900px){
    .container{width:min(100% - 28px,1180px)}
    .header-slogan{display:none}
    .menu{gap:22px;flex-wrap:wrap;justify-content:center;padding:10px 0}
    .brand-zone h1{font-size:32px}
    .brand-zone .tagline{font-size:17px}

    .hero{grid-template-columns:1fr}
    .hero-copy{padding:34px 24px}
    .hero h2{font-size:34px}
    .hero-photo{min-height:285px}

    .values-grid{grid-template-columns:repeat(2,1fr)}
    .value:after{display:none}
    .value:last-child{grid-column:1/-1}

    .main-grid,.extra-grid{grid-template-columns:1fr}
    .info-card{padding-bottom:185px}
    .badge-slogan{max-height:190px}

    .big-cta .container{
        grid-template-columns:1fr;
        padding-top:28px;
        padding-bottom:28px;
    }
    .service-grid{grid-template-columns:1fr}
    .service:not(:last-child){
        border-right:0;
        border-bottom:1px solid var(--kea-line);
    }
    .footer .container{grid-template-columns:1fr}
}

/* MOBILE */
@media(max-width:600px){
    .topnav .container{
        min-height:55px;
        justify-content:flex-end;
    }
    .mobile-menu-button{
        display:block;
        width:44px;
        height:40px;
        margin-left:auto;
        border:1px solid rgba(255,255,255,.5);
        border-radius:5px;
        background:transparent;
        color:#fff;
        font-size:0;
        cursor:pointer;
    }
    .mobile-menu-button:before{
        content:"☰";
        font-size:26px;
        line-height:1;
    }
    .menu{
        display:none;
        position:absolute;
        z-index:50;
        top:55px;
        right:0;
        left:0;
        padding:12px 18px 18px;
        background:#0b6e9f;
        box-shadow:0 12px 25px rgba(0,0,0,.15);
        flex-direction:column;
        gap:0;
    }
    .menu.open{display:flex}
    .menu li{border-bottom:1px solid rgba(255,255,255,.16)}
    .menu a{display:block;padding:12px 3px}

    .brand-zone{padding-top:8px}
    .brand-logo{width:145px}
    .brand-zone h1{font-size:27px}
    .brand-zone .tagline{font-size:14px}

    .hero-copy{padding:28px 20px}
    .hero h2{font-size:30px}
    .hero p{font-size:17px}
    .hero-photo{min-height:235px}
    .actions .btn{width:100%}

    .values-grid{grid-template-columns:1fr}
    .value:last-child{grid-column:auto}
    .value{border-bottom:1px solid var(--kea-line)}

    .panel{padding:20px}
    .panel h3{font-size:22px}
    .info-card{
        min-height:auto;
        padding-bottom:155px;
    }
    .badge-slogan{
        max-height:150px;
        bottom:0;
    }

    .big-cta .container{min-height:auto}
    .big-cta h2{font-size:24px}

    .service{
        grid-template-columns:46px 1fr;
        padding:22px 20px;
    }
    .service img{width:43px;height:43px}

    .code-form input[type=text],
    .code-form input[type=submit]{
        width:100%;
    }
}


/* VOLLEDIG DROPDOWN MENU */
.menu > li{
    position:relative;
}
.menu > li > a{
    display:block;
    padding:18px 0;
    white-space:nowrap;
}
.submenu{
    display:none;
    position:absolute;
    z-index:100;
    top:100%;
    left:-18px;
    width:285px;
    margin:0;
    padding:8px 0;
    list-style:none;
    background:#fff;
    border:1px solid rgba(7,63,112,.14);
    border-radius:0 0 6px 6px;
    box-shadow:0 14px 30px rgba(0,0,0,.16);
}
.submenu-right{
    left:auto;
    right:-18px;
}
.submenu li{
    margin:0;
    padding:0;
}
.submenu a{
    display:block;
    padding:10px 18px;
    color:#073f70;
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    white-space:normal;
}
.submenu a:hover{
    background:#eef6fa;
    color:#0872a9;
}
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu{
    display:block;
}

@media(max-width:600px){
    .menu > li > a{
        padding:12px 3px;
    }

    .submenu,
    .submenu-right{
        display:none;
        position:static;
        width:100%;
        margin:0;
        padding:0 0 8px 14px;
        background:rgba(255,255,255,.07);
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .has-submenu:hover > .submenu,
    .has-submenu:focus-within > .submenu{
        display:none;
    }

    .has-submenu.mobile-open > .submenu{
        display:block;
    }

    .submenu a{
        padding:9px 8px;
        color:#fff;
        font-size:13px;
        font-weight:500;
        border-left:2px solid rgba(255,255,255,.25);
    }

    .submenu a:hover{
        background:rgba(255,255,255,.08);
        color:#fff;
    }

    .has-submenu > a{
        position:relative;
        padding-right:30px !important;
    }

    .has-submenu > a:after{
        content:"+";
        position:absolute;
        right:4px;
        top:50%;
        transform:translateY(-50%);
        font-size:20px;
        font-weight:400;
    }

    .has-submenu.mobile-open > a:after{
        content:"-";
    }
}