:root{
  --blue:#0868d9;--blue-dark:#034b9f;--blue-light:#edf5ff;--ink:#101318;
  --text:#4c5561;--white:#fff;--light:#f6f8fb;--line:#e4e9f0;--footer:#090d12;
  --shadow:0 18px 45px rgba(0,0,0,.10);--max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.65}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}

.topbar{background:linear-gradient(90deg,var(--blue-dark),var(--blue));color:#fff;font-size:13px}
.topbar-inner{min-height:36px;display:flex;align-items:center;justify-content:space-between}
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.header-inner{min-height:102px;display:flex;align-items:center;gap:34px}
.logo img{width:126px;height:82px;object-fit:contain}
.navigation{margin-left:auto}
.menu-toggle{display:none;border:0;background:transparent;font-size:30px;cursor:pointer}
.main-menu{display:flex;align-items:center;gap:36px;list-style:none;margin:0;padding:0}
.main-menu>li{position:relative}
.main-menu>li>a,.dropdown-button{min-height:102px;display:flex;align-items:center;font-weight:800;font-size:15px}
.main-menu>li>a:hover,.dropdown-button:hover{color:var(--blue)}
.dropdown-button{border:0;background:transparent;padding:0;cursor:pointer;gap:7px}
.dropdown-menu{position:absolute;top:calc(100% - 4px);left:50%;width:340px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 55px rgba(0,0,0,.14);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(12px);transition:.2s}
.dropdown-menu:before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%)}
.dropdown-menu a{display:flex;gap:13px;align-items:center;padding:12px 13px;border-radius:9px}
.dropdown-menu a:hover,.dropdown-menu a.active{background:var(--blue-light)}
.dropdown-number{width:38px;height:38px;border-radius:9px;background:var(--blue-light);color:var(--blue);display:grid;place-items:center;font-size:11px;font-weight:900;flex-shrink:0}
.dropdown-menu strong{display:block;font-size:14px}
.dropdown-menu small{display:block;color:#717985;font-size:11px}

.btn{min-height:47px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-size:14px;font-weight:900;transition:.2s}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(8,104,217,.22)}
.btn-outline{background:#fff;border:1px solid #333b45}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-white{background:#fff;color:var(--blue)}

.hero,.page-hero{background:linear-gradient(135deg,#fff 0%,#f4f8fd 100%)}
.hero{padding:82px 0}
.page-hero{padding:72px 0}
.hero-grid,.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.eyebrow{display:inline-block;margin-bottom:14px;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:1.8px}
.hero h1,.page-hero h1{margin:0 0 22px;font-size:clamp(43px,5vw,66px);line-height:1.05;letter-spacing:-2px}
.hero p,.page-hero p{max-width:620px;color:var(--text);font-size:17px;margin:0 0 28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* Polished image card used on every main page */
.service-hero-image{width:100%;max-width:520px;height:430px;margin-left:auto;position:relative;border-radius:20px;padding:10px;background:#fff;box-shadow:var(--shadow)}
.service-hero-image:before{content:"";position:absolute;right:-14px;bottom:-14px;width:105px;height:105px;border-radius:24px;background:linear-gradient(135deg,var(--blue),var(--blue-dark));z-index:0}
.service-hero-image img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:14px;transition:transform .45s ease}
.service-hero-image:hover img{transform:scale(1.018)}
.service-photo-tag{position:absolute;z-index:2;left:26px;bottom:26px;padding:10px 14px;border-left:4px solid var(--blue);background:rgba(8,12,18,.78);backdrop-filter:blur(4px);color:#fff;border-radius:4px}
.service-photo-tag span{display:block;color:#aed3ff;font-size:10px;letter-spacing:2px}
.service-photo-tag strong{font-size:15px}

.section{padding:88px 0}
.section-soft{background:var(--light)}
.section-title{max-width:730px;margin-bottom:40px}
.section-title h2,.content-copy h2{font-size:clamp(31px,4vw,46px);line-height:1.1;margin:0 0 14px}
.section-title p,.content-copy p{color:var(--text)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{padding:28px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:.2s}
.service-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(0,0,0,.08)}
.service-card .num{color:var(--blue);font-size:12px;font-weight:900}
.service-card h3{margin:10px 0 8px;font-size:21px}
.service-card p{margin:0 0 15px;color:var(--text);font-size:14px}
.service-card a{color:var(--blue);font-weight:900;font-size:14px}

.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.info-card{padding:36px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 15px 38px rgba(0,0,0,.06)}
.info-card h3{margin-top:0;font-size:27px}
.info-list div{padding:13px 0;border-bottom:1px solid #edf0f3}
.info-list div:last-child{border-bottom:0}
.check-list{display:grid;gap:12px;margin:26px 0}
.check-item{display:flex;align-items:center;gap:11px}
.check-item span{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--blue-light);color:var(--blue);font-weight:900}

.features{padding:44px 0;background:linear-gradient(180deg,#f8faff,#f3f7fc);border-block:1px solid #edf0f4}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feature{text-align:center;padding:20px}
.feature-icon{width:56px;height:56px;margin:0 auto 17px;display:grid;place-items:center;border:2px solid var(--blue);border-radius:50%;background:#fff;color:var(--blue);font-size:13px;font-weight:900}
.feature h3{margin:0 0 9px;font-size:17px}
.feature p{margin:0;color:var(--text);font-size:14px}

.cta-section{padding:0 0 88px}
.cta-box{padding:48px;border-radius:20px;background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:35px}
.cta-box h2{margin:5px 0;font-size:37px}
.cta-box p{margin:0}
.cta-box .eyebrow{color:#d8eaff}

.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px}
.contact-card{padding:36px;background:#fff;border:1px solid var(--line);border-radius:18px}
.contact-detail{padding:14px 0;border-bottom:1px solid #edf0f3}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:grid;gap:7px}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:13px;font-weight:800}
.form-group input,.form-group select,.form-group textarea{width:100%;border:1px solid #d9e0e8;border-radius:8px;padding:13px 14px}
.form-group textarea{min-height:150px;resize:vertical}
.form-status{grid-column:1/-1;margin:0;color:var(--text);font-size:13px}

.footer{padding:64px 0 24px;background:var(--footer);color:#c9d0da}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.footer-logo{width:136px;margin-bottom:16px}
.footer h3{color:#fff;margin-top:0}
.footer p{color:#aeb7c3;font-size:14px}
.footer a{display:block;margin-bottom:8px;color:#b8c1cd;font-size:14px}
.footer a:hover{color:#fff}
.footer-bottom{margin-top:42px;padding-top:19px;border-top:1px solid #29313b;color:#7f8996;font-size:12px;text-align:center}

@media(max-width:1000px){
 .header-inner{min-height:88px}.logo img{width:104px;height:68px}.header-button{display:none}.menu-toggle{display:block}
 .main-menu{display:none;position:absolute;top:88px;left:20px;right:20px;padding:12px;flex-direction:column;align-items:stretch;gap:0;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 20px 45px rgba(0,0,0,.12)}
 .main-menu.open{display:flex}.main-menu>li>a,.dropdown-button{min-height:auto;padding:13px;width:100%}.dropdown-button{justify-content:space-between}
 .dropdown-menu{display:none;position:static;width:100%;margin-top:4px;transform:none;opacity:1;visibility:visible;pointer-events:auto;border:0;box-shadow:none;background:var(--light)}
 .dropdown.mobile-open .dropdown-menu{display:block}
 .hero-grid,.page-hero-grid,.content-grid,.contact-grid{grid-template-columns:1fr}
 .service-hero-image{max-width:650px;height:420px;margin:15px auto 0}
 .services-grid{grid-template-columns:repeat(2,1fr)}.features-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
 .container{width:calc(100% - 28px)}.topbar-right{display:none}.topbar-inner{justify-content:center;text-align:center}
 .header-inner{min-height:78px}.logo img{width:91px;height:60px}.main-menu{top:78px;left:14px;right:14px}
 .hero,.page-hero{padding:54px 0}.hero h1,.page-hero h1{font-size:40px;letter-spacing:-1px}
 .hero-actions{flex-direction:column}.hero-actions .btn{width:100%}
 .service-hero-image{height:305px;border-radius:16px;padding:8px}.service-hero-image img{border-radius:11px}
 .services-grid,.features-grid,.footer-grid{grid-template-columns:1fr}.section{padding:68px 0}
 .cta-box{padding:31px;flex-direction:column;align-items:flex-start}.cta-box h2{font-size:31px}
 .contact-form{grid-template-columns:1fr}.form-group.full{grid-column:auto}
}

/* =========================================
   3 FOTO'S PER PAGINA
========================================= */

.project-gallery{
    padding: 82px 0;
    background: #ffffff;
}

.project-gallery.gallery-soft{
    background: var(--light);
}

.gallery-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:30px;
}

.gallery-heading h2{
    margin:0;
    font-size:clamp(30px,4vw,44px);
    line-height:1.1;
}

.gallery-heading p{
    max-width:560px;
    margin:0;
    color:var(--text);
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.gallery-item{
    position:relative;
    height:300px;
    overflow:hidden;
    border-radius:18px;
    background:#111;
    box-shadow:0 14px 34px rgba(0,0,0,.10);
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .45s ease;
}

.gallery-item:hover img{
    transform:scale(1.035);
}

.gallery-badge{
    position:absolute;
    left:16px;
    bottom:16px;
    min-width:42px;
    height:34px;
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:rgba(8,12,18,.78);
    color:#fff;
    border-left:3px solid var(--blue);
    font-size:12px;
    font-weight:900;
    backdrop-filter:blur(5px);
}

@media(max-width:850px){
    .gallery-heading{
        align-items:flex-start;
        flex-direction:column;
    }

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

    .gallery-item:first-child{
        grid-column:1/-1;
        height:380px;
    }
}

@media(max-width:600px){
    .project-gallery{
        padding:64px 0;
    }

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

    .gallery-item,
    .gallery-item:first-child{
        grid-column:auto;
        height:260px;
    }
}


/* =========================================
   JURIDISCHE PAGINA'S
========================================= */
.legal-hero{
    padding:64px 0 40px;
    background:linear-gradient(135deg,#fff 0%,#f4f8fd 100%);
    border-bottom:1px solid var(--line);
}
.legal-hero h1{
    margin:0 0 14px;
    font-size:clamp(38px,5vw,58px);
    line-height:1.05;
}
.legal-hero p{
    max-width:760px;
    margin:0;
    color:var(--text);
}
.legal-section{
    padding:64px 0 88px;
}
.legal-card{
    max-width:900px;
    padding:38px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 14px 34px rgba(0,0,0,.05);
}
.legal-card h2{
    margin:30px 0 10px;
    font-size:24px;
}
.legal-card h2:first-child{margin-top:0}
.legal-card p,.legal-card li{
    color:var(--text);
}
.legal-card ul{
    padding-left:20px;
}
.legal-note{
    margin-top:28px;
    padding:16px 18px;
    border-left:4px solid var(--blue);
    background:var(--blue-light);
    border-radius:8px;
    color:#334150;
}
.footer-legal{
    margin-top:18px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}
.footer-legal a{
    font-size:12px;
    color:#8f99a6;
}
.footer-legal a:hover{color:#fff}


/* =========================================
   VERFIJNDE BOVENBALK MTT
========================================= */
.topbar{
    background:linear-gradient(100deg,#052f62 0%,#0868d9 58%,#0758b5 100%);
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.14);
}

.topbar-inner{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.topbar-brand{
    display:flex;
    flex-direction:column;
    justify-content:center;
    line-height:1.15;
}

.topbar-brand strong{
    font-size:14px;
    font-weight:900;
    letter-spacing:.15px;
}

.topbar-brand > span{
    margin-top:6px;
    color:#bcdcff;
    font-size:10px;
    font-weight:900;
    letter-spacing:2.2px;
}

.topbar-quality{
    display:flex;
    align-items:center;
    gap:12px;
    color:#eaf4ff;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.topbar-quality i{
    width:4px;
    height:4px;
    border-radius:50%;
    background:#72b5ff;
    display:block;
}

@media(max-width:700px){
    .topbar-inner{
        min-height:64px;
        justify-content:center;
        text-align:center;
    }

    .topbar-brand{
        align-items:center;
    }

    .topbar-brand strong{
        font-size:13px;
    }

    .topbar-brand > span{
        margin-top:5px;
        font-size:9px;
        letter-spacing:1.8px;
    }

    .topbar-quality{
        display:none;
    }
}


/* =========================================
   COOKIEBANNER
========================================= */
.cookie-banner{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
    padding:18px;
    background:rgba(7,13,22,.96);
    color:#fff;
    box-shadow:0 -12px 35px rgba(0,0,0,.18);
    backdrop-filter:blur(10px);
    transform:translateY(0);
    transition:transform .3s ease,opacity .3s ease;
}
.cookie-banner.cookie-hidden{
    transform:translateY(110%);
    opacity:0;
    pointer-events:none;
}
.cookie-inner{
    width:min(1180px,100%);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}
.cookie-copy{
    max-width:760px;
}
.cookie-copy strong{
    display:block;
    margin-bottom:5px;
    font-size:16px;
}
.cookie-copy p{
    margin:0;
    color:#d2d9e3;
    font-size:13px;
    line-height:1.55;
}
.cookie-copy a{
    color:#82bdff;
    text-decoration:underline;
}
.cookie-actions{
    display:flex;
    gap:10px;
    flex-shrink:0;
}
.cookie-btn{
    min-height:42px;
    padding:0 17px;
    border-radius:8px;
    border:1px solid transparent;
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:900;
}
.cookie-btn-primary{
    background:var(--blue);
    color:#fff;
}
.cookie-btn-primary:hover{
    background:var(--blue-dark);
}
.cookie-btn-secondary{
    background:transparent;
    border-color:rgba(255,255,255,.3);
    color:#fff;
}
.cookie-btn-secondary:hover{
    background:rgba(255,255,255,.08);
}
@media(max-width:700px){
    .cookie-banner{padding:16px}
    .cookie-inner{
        align-items:stretch;
        flex-direction:column;
        gap:14px;
    }
    .cookie-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .cookie-btn{
        padding:0 10px;
    }
}


/* Blauwe decoratieve afwerking rond foto's verwijderd */
.service-hero-image:before{
    display:none !important;
    content:none !important;
}


/* =========================================
   HOME DIENSTENKAARTEN - ALLEEN FOTO TOEGEVOEGD
========================================= */
.service-card{
    padding:0;
    overflow:hidden;
}
.service-card-image{
    display:block;
    width:100%;
    height:180px;
    object-fit:cover;
    object-position:center;
}
.service-card-content{
    padding:28px;
}
@media(max-width:600px){
    .service-card-image{
        height:165px;
    }
}


/* =========================================
   DEFINITIEVE MOBIELE HERWERKING
   Desktop blijft ongewijzigd.
========================================= */
.mobile-offer-item{
    display:none;
}

@media (max-width:1000px){

    html,body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

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

    /* Bovenbalk compacter op mobiel */
    .topbar-inner{
        min-height:50px;
        padding-top:7px;
        padding-bottom:7px;
    }

    .topbar-quality{
        display:none !important;
    }

    .topbar-brand{
        width:100%;
        align-items:center;
        text-align:center;
    }

    .topbar-brand strong{
        font-size:12px;
        line-height:1.2;
    }

    .topbar-brand > span{
        margin-top:4px;
        font-size:9px;
        letter-spacing:1.6px;
    }

    /* Mobiele header: enkel logo + hamburger */
    .header{
        position:sticky;
        top:0;
        z-index:5000;
        background:#fff;
    }

    .header-inner{
        min-height:72px !important;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        position:relative;
    }

    .logo{
        flex:0 0 auto;
        display:flex;
        align-items:center;
    }

    .logo img{
        display:block;
        width:86px !important;
        height:56px !important;
        object-fit:contain;
    }

    .navigation{
        margin-left:auto;
        position:static;
    }

    /* Deze desktopknop mag op gsm/tablet absoluut niet bovenaan staan */
    .header-button{
        display:none !important;
        visibility:hidden !important;
        position:absolute !important;
        width:0 !important;
        height:0 !important;
        overflow:hidden !important;
        pointer-events:none !important;
    }

    .menu-toggle{
        display:flex !important;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        margin:0;
        padding:0;
        border:1px solid #dfe4ea;
        border-radius:10px;
        background:#fff;
        color:var(--ink);
        font-size:25px;
        line-height:1;
        cursor:pointer;
    }

    /* Menu neemt op gsm de volledige beschikbare breedte */
    .main-menu{
        display:none !important;
        position:absolute !important;
        z-index:6000;
        top:calc(100% + 1px) !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        max-width:none !important;
        max-height:calc(100dvh - 122px);
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        margin:0 !important;
        padding:10px 14px 16px !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:2px !important;
        background:#fff !important;
        border:0 !important;
        border-top:1px solid var(--line) !important;
        border-radius:0 !important;
        box-shadow:0 18px 34px rgba(0,0,0,.13) !important;
    }

    .main-menu.open{
        display:flex !important;
    }

    .main-menu > li{
        width:100%;
    }

    .main-menu > li > a,
    .dropdown-button{
        width:100%;
        min-height:48px !important;
        padding:12px 8px !important;
        display:flex;
        align-items:center;
        justify-content:space-between;
        border-radius:8px;
        font-size:15px;
        line-height:1.25;
    }

    /* Offerteknop zit op mobiel netjes onderaan IN het menu */
    .mobile-offer-item{
        display:block;
        padding-top:8px;
    }

    .main-menu .mobile-offer-link{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:46px !important;
        padding:12px 16px !important;
        background:var(--blue);
        color:#fff !important;
        border-radius:9px;
        font-weight:900;
    }

    /* Diensten volledig zichtbaar binnen scherm */
    .dropdown{
        width:100%;
    }

    .dropdown-menu{
        display:none !important;
        position:static !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        margin:2px 0 6px !important;
        padding:6px !important;
        transform:none !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        background:#f5f8fc !important;
        border:0 !important;
        border-radius:10px !important;
        box-shadow:none !important;
    }

    .dropdown.mobile-open .dropdown-menu{
        display:block !important;
    }

    .dropdown-menu a{
        width:100%;
        min-width:0;
        display:grid !important;
        grid-template-columns:30px minmax(0,1fr);
        gap:9px;
        align-items:center;
        padding:9px 8px !important;
        margin:0;
        border-radius:8px;
        white-space:normal !important;
    }

    .dropdown-number{
        width:auto;
        min-width:0;
    }

    .dropdown-menu a > span:last-child{
        min-width:0;
        overflow:hidden;
    }

    .dropdown-menu strong,
    .dropdown-menu small{
        display:block;
        max-width:100%;
        white-space:normal !important;
        overflow-wrap:anywhere;
        word-break:normal;
    }

    .dropdown-menu strong{
        font-size:14px;
    }

    .dropdown-menu small{
        margin-top:1px;
        font-size:11px;
        line-height:1.3;
    }

    /* Algemene mobiele pagina-opbouw */
    .hero,
    .page-hero{
        padding:42px 0 !important;
    }

    .hero-grid,
    .page-hero-grid,
    .content-grid,
    .contact-grid{
        grid-template-columns:1fr !important;
        gap:28px !important;
    }

    .hero h1,
    .page-hero h1{
        font-size:clamp(34px,10vw,46px) !important;
        line-height:1.02 !important;
        letter-spacing:-1px !important;
    }

    .hero p,
    .page-hero p{
        font-size:16px;
    }

    .hero-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    .hero-actions .btn{
        width:100% !important;
        justify-content:center;
    }

    .service-hero-image{
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        aspect-ratio:4/3;
        margin:4px auto 0 !important;
    }

    .service-hero-image img{
        width:100%;
        height:100%;
    }

    .services-grid,
    .features-grid,
    .footer-grid,
    .gallery-grid{
        grid-template-columns:1fr !important;
    }

    .service-card-image{
        height:190px !important;
    }

    .section,
    .project-gallery,
    .legal-section{
        padding:54px 0 !important;
    }

    .gallery-item,
    .gallery-item:first-child{
        grid-column:auto !important;
        height:250px !important;
    }

    .cta-box{
        padding:26px !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:20px !important;
    }

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

    .contact-form{
        grid-template-columns:1fr !important;
    }

    .form-group.full{
        grid-column:auto !important;
    }

    .legal-card{
        padding:24px !important;
    }

    .cookie-inner{
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;
    }

    .cookie-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
    }
}

@media (max-width:480px){
    .container{
        width:calc(100% - 22px);
    }

    .main-menu{
        padding-left:11px !important;
        padding-right:11px !important;
    }

    .hero h1,
    .page-hero h1{
        font-size:36px !important;
    }

    .service-card-content{
        padding:22px !important;
    }

    .gallery-item,
    .gallery-item:first-child{
        height:225px !important;
    }
}


/* =========================================
   MOBIELE TEKST-OVERFLOW FIX
   Voorkomt dat lange namen/teksten buiten het scherm vallen.
========================================= */
@media (max-width:1000px){
    .page-hero-grid > *,
    .content-grid > *,
    .contact-grid > *,
    .services-grid > *,
    .features-grid > *,
    .footer-grid > *{
        min-width:0 !important;
        max-width:100% !important;
    }

    .content-copy,
    .info-card,
    .legal-card,
    .service-card-content,
    .page-hero-grid > div{
        min-width:0 !important;
        max-width:100% !important;
        overflow-wrap:anywhere;
        word-break:normal;
    }

    .content-copy h1,
    .content-copy h2,
    .content-copy h3,
    .info-card h1,
    .info-card h2,
    .info-card h3,
    .page-hero h1,
    .page-hero h2,
    .page-hero h3,
    .topbar-brand strong{
        max-width:100%;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
    }

    .content-copy p,
    .info-card p,
    .page-hero p,
    .check-item{
        max-width:100%;
        overflow-wrap:break-word;
    }

    .info-card{
        width:100% !important;
        box-sizing:border-box;
    }

    .check-list{
        width:100%;
        min-width:0;
    }

    .check-item{
        min-width:0;
    }
}

@media (max-width:480px){
    .info-card h3{
        font-size:22px !important;
        line-height:1.15;
    }

    .content-copy h2{
        font-size:32px !important;
        line-height:1.08;
    }

    .page-hero p,
    .content-copy p,
    .info-card p{
        font-size:15px !important;
        line-height:1.6;
    }
}


/* Offerteknop: desktop rechts, mobiel uitsluitend ONDERAAN in hamburger-menu */
.desktop-offer-button{
    display:inline-flex;
}

@media(max-width:1000px){
    .desktop-offer-button,
    .header-button{
        display:none !important;
    }

    .mobile-offer-item{
        display:block !important;
        order:9999;
        width:100%;
        margin-top:10px;
        padding-top:10px;
        border-top:1px solid var(--line);
    }

    .main-menu .mobile-offer-link{
        display:flex !important;
        width:100%;
        min-height:48px !important;
        align-items:center;
        justify-content:center;
        padding:12px 16px !important;
        background:var(--blue) !important;
        color:#fff !important;
        border-radius:9px;
        font-weight:900;
    }
}

@media(min-width:1001px){
    .mobile-offer-item{
        display:none !important;
    }
}


/* Mobiel: "Offerte aanvragen" staat ONDER de foto */
.mobile-hero-offer{
    display:none;
}

@media(max-width:1000px){
    /* verberg alleen de offerteknop die boven de foto in de hero stond */
    .page-hero .hero-actions > .btn.btn-primary[href="contact.html"]{
        display:none !important;
    }

    /* laat Meer informatie boven de foto staan */
    .page-hero .hero-actions{
        display:block !important;
    }

    .page-hero .hero-actions > .btn.btn-outline{
        width:100% !important;
        display:flex !important;
        justify-content:center;
    }

    /* nieuwe offerteknop onder de foto */
    .mobile-hero-offer{
        display:block !important;
        width:100%;
        margin-top:4px;
    }

    .mobile-hero-offer .btn{
        display:flex !important;
        width:100% !important;
        justify-content:center;
    }
}

@media(min-width:1001px){
    .mobile-hero-offer{
        display:none !important;
    }
}


/* =========================================
   MOBIEL: SLECHTS 2 OFFERTEKNOPPEN
   1 in de header + 1 helemaal onderaan
========================================= */
.mobile-cta-label{
    display:none;
}

@media(max-width:1000px){
    /* Zichtbare offerteknop in mobiele header */
    .desktop-offer-button{
        display:inline-flex !important;
        visibility:visible !important;
        position:static !important;
        width:auto !important;
        height:auto !important;
        overflow:visible !important;
        pointer-events:auto !important;
        order:2;
        flex:0 0 auto;
        min-height:42px;
        padding:0 13px !important;
        font-size:12px !important;
        white-space:nowrap;
    }

    .navigation{
        order:3;
        margin-left:0 !important;
    }

    .logo{
        order:1;
        margin-right:auto;
    }

    /* Geen extra offerteknop meer in hamburger-menu */
    .mobile-offer-item{
        display:none !important;
    }

    /* Geen offerteknop meer in hero boven of onder de foto */
    .hero .hero-actions > .btn.btn-primary[href="contact.html"],
    .page-hero .hero-actions > .btn.btn-primary[href="contact.html"],
    .mobile-hero-offer{
        display:none !important;
    }

    /* Andere nuttige hero-knoppen mogen blijven */
    .hero .hero-actions,
    .page-hero .hero-actions{
        display:block !important;
    }

    .hero .hero-actions > .btn:not(.btn-primary),
    .page-hero .hero-actions > .btn:not(.btn-primary){
        width:100% !important;
        display:flex !important;
        justify-content:center;
    }

    /* Onderaan heet de CTA op mobiel duidelijk "Offerte aanvragen" */
    .desktop-cta-label{
        display:none !important;
    }

    .mobile-cta-label{
        display:inline !important;
    }
}

@media(max-width:420px){
    .desktop-offer-button{
        padding:0 10px !important;
        font-size:11px !important;
    }

    .logo img{
        width:72px !important;
        height:50px !important;
    }

    .menu-toggle{
        width:42px;
        height:42px;
    }

    .header-inner{
        gap:8px !important;
    }
}

@media(min-width:1001px){
    .mobile-cta-label{
        display:none !important;
    }
    .desktop-cta-label{
        display:inline !important;
    }
}


/* Hero offerteknop: zichtbaar op pc/tablet, verborgen op gsm */
.hero-offer-btn{
    display:inline-flex !important;
}

@media screen and (max-width:1000px){
    .hero-offer-btn{
        display:none !important;
    }
}

/* Header offerteknop blijft op gsm zichtbaar */
@media screen and (max-width:1000px){
    .header .desktop-offer-button{
        display:inline-flex !important;
        visibility:visible !important;
    }
}

/* VCA en certificaten */
.cert-section{padding:30px 0 80px}
.cert-box{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:36px;align-items:center;padding:36px;border-radius:24px;background:rgba(15,23,42,.04);border:1px solid rgba(15,23,42,.08)}
.cert-copy h2{margin:10px 0 14px}
.cert-copy p{margin:0;line-height:1.75}
.cert-badges{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cert-card{padding:22px;border-radius:18px;background:#fff;border:1px solid rgba(15,23,42,.08);box-shadow:0 10px 30px rgba(15,23,42,.05)}
.cert-card strong{display:block;font-size:18px;margin-bottom:6px}
.cert-card span{display:block;font-size:14px;line-height:1.45;opacity:.75}
@media(max-width:1000px){
  .cert-section{padding:10px 0 54px}
  .cert-box{grid-template-columns:1fr;padding:24px;gap:24px}
  .cert-badges{grid-template-columns:1fr}
}