/* ============================================================
   UniSchilders — style.css v4  (Premium redesign met foto's)
   ============================================================ */

:root {
    /* Nieuwe kleurenpallet: diep antraciet/navy + warm oranje */
    --blue-dark:  #0D1F35;   /* diep nacht navy */
    --blue-mid:   #1A3A5C;   /* donker blauw-grijs */
    --blue-light: #2D6DA4;   /* medium blauw */
    --blue-pale:  #EEF4FB;   /* lichtblauw tint */
    --white:      #FFFFFF;
    --grey-50:    #F7F8FA;
    --grey-100:   #EFF1F5;
    --grey-200:   #DDE1E9;
    --grey-400:   #9CA3AF;
    --grey-600:   #4A5568;
    --grey-700:   #374151;
    --grey-800:   #1F2937;
    --grey-900:   #0D1117;
    --accent:     #E8751A;   /* warm oranje */
    --accent-d:   #C85F0D;   /* donker oranje */
    --accent-pale:#FEF0E6;   /* licht oranje tint */
    --whatsapp:   #25D366;
    --error:      #DC2626;

    --font: 'Inter', system-ui, sans-serif;
    --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 9999px;
    --sh-sm: 0 1px 4px rgba(0,0,0,.08);
    --sh-md: 0 4px 16px rgba(0,0,0,.10);
    --sh-lg: 0 12px 36px rgba(0,0,0,.13);
    --sh-xl: 0 24px 56px rgba(0,0,0,.16);
    --tr: 250ms ease;
    --tr-fast: 150ms ease;
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--font);font-size:1rem;color:var(--grey-600);line-height:1.7;background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-light);text-decoration:none;transition:color var(--tr-fast)}
a:hover{color:var(--blue-dark)}
ul,ol{list-style:none}  /* geen bullets of nummers */
ul{list-style:none}
button{cursor:pointer;font-family:var(--font);border:none;background:none}

.skip-link{position:absolute;top:-100px;left:0;z-index:999;background:var(--blue-dark);color:#fff;padding:.5rem 1rem;transition:top var(--tr)}
.skip-link:focus{top:0}

.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
@media(min-width:768px){.container{padding:0 2rem}}

/* ===== KNOPPEN ===== */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.75rem;border-radius:var(--r-full);font-weight:700;font-size:.9rem;transition:all var(--tr);white-space:nowrap;justify-content:center;border:2px solid transparent;letter-spacing:.01em}
.btn-primary{background:var(--blue-light);color:#fff;border-color:var(--blue-light)}
.btn-primary:hover{background:var(--blue-mid);border-color:var(--blue-mid);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(59,130,246,.35)}
.btn-dark{background:var(--blue-dark);color:#fff;border-color:var(--blue-dark)}
.btn-dark:hover{background:#082f6e;color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(10,61,145,.35)}
.btn-accent{background:var(--accent);color:var(--grey-900);border-color:var(--accent);font-weight:800}
.btn-accent:hover{background:var(--accent-d);border-color:var(--accent-d);color:var(--grey-900);transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,158,11,.35)}
.btn-outline{background:transparent;color:var(--blue-mid);border-color:var(--blue-mid)}
.btn-outline:hover{background:var(--blue-pale);color:var(--blue-dark)}
.btn-outline-white{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(4px)}
.btn-outline-white:hover{background:rgba(255,255,255,.18);color:#fff;border-color:#fff}
.btn-whatsapp{background:var(--whatsapp);color:#fff;border-color:var(--whatsapp)}
.btn-whatsapp:hover{background:#1ebe57;color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,211,102,.4)}
.btn-lg{padding:1rem 2.25rem;font-size:1rem}
.btn-sm{padding:.45rem 1rem;font-size:.8rem}
.btn-block{width:100%;margin-bottom:.5rem}

/* ===== HEADER ===== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(14,61,145,.08);transition:box-shadow var(--tr)}
.site-header.scrolled{box-shadow:0 2px 20px rgba(10,61,145,.12)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:72px}

.site-logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0;text-decoration:none}
.site-logo:hover{opacity:.85}
.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--blue-dark),var(--blue-light));border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;flex-shrink:0;box-shadow:0 4px 12px rgba(10,61,145,.3)}
.logo-text{font-size:1.4rem;font-weight:800;color:var(--blue-dark);letter-spacing:-.03em}
.logo-text strong{color:var(--blue-light)}

/* ============================================================
   Navigatie — desktop + mobiel
   ============================================================ */

/* Desktop nav (hidden on mobile) */
.main-nav{display:none}
@media(min-width:1060px){
    .main-nav{
        display:flex;align-items:center;justify-content:center;
        position:fixed;top:0;left:0;right:0;height:72px;
        z-index:150;pointer-events:none;background:transparent;
    }
    .main-nav .nav-list{pointer-events:auto}
}
.nav-list{display:flex;align-items:center;gap:.15rem}
.nav-list>li{position:relative}

/* Desktop nav links — iconen verbergen */
.nav-list>li>a{
    display:block;padding:.45rem .9rem;
    color:var(--grey-600);font-weight:600;font-size:.875rem;
    border-radius:var(--r-sm);transition:all var(--tr-fast);
}
.nav-list>li>a .nav-icon{display:none}
.nav-list>li>a:hover{color:var(--blue-mid);background:var(--blue-pale)}

/* Desktop dropdown */
.has-dropdown:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown{
    position:absolute;top:calc(100% + 12px);left:0;
    background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-xl);
    padding:1.5rem;display:flex;gap:2rem;min-width:560px;
    opacity:0;visibility:hidden;transform:translateY(12px);
    transition:all var(--tr);border:1px solid var(--grey-100);
}
.dropdown-col{display:flex;flex-direction:column;gap:.2rem;min-width:155px}
.dropdown-col strong{
    display:block;font-size:.7rem;font-weight:800;color:var(--grey-600);
    text-transform:uppercase;letter-spacing:.1em;
    padding:.3rem 0;border-bottom:2px solid var(--blue-pale);margin-bottom:.5rem;
}
.dropdown-col a{
    font-size:.85rem;color:var(--grey-600);
    padding:.3rem .65rem;border-radius:var(--r-sm);transition:all var(--tr-fast);
}
.dropdown-col a:hover{background:var(--blue-pale);color:var(--blue-mid);padding-left:1rem}

/* Header CTA */
.header-cta{display:none;gap:.75rem;flex-shrink:0}
@media(min-width:1060px){.header-cta{display:flex}}

/* Hamburger */
.hamburger{display:flex;flex-direction:column;gap:5px;padding:.5rem;margin-left:auto}
@media(min-width:1060px){.hamburger{display:none}}
.hamburger span{
    display:block;width:24px;height:2px;
    background:var(--blue-dark);border-radius:2px;
    transition:transform var(--tr),opacity var(--tr);
}
.hamburger.is-open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ============================================================
   Mobiel menu — slide-down overlay
   ============================================================ */
.main-nav.mobile-open{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:72px;left:0;right:0;bottom:0;
    width:100%;
    background:#fff;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:200;
    pointer-events:auto;
}

/* Nav list in mobiel menu */
.main-nav.mobile-open .nav-list{
    display:flex;flex-direction:column;align-items:stretch;
    padding:.5rem 1rem 0;
}
.main-nav.mobile-open .nav-list>li>a{
    display:flex;align-items:center;gap:.85rem;
    padding:1rem 1rem;
    font-size:1rem;font-weight:600;color:var(--grey-800);
    border-bottom:1px solid var(--grey-100);
    border-radius:0;
    transition:background var(--tr-fast),color var(--tr-fast),padding-left var(--tr-fast);
    text-decoration:none;
}
.main-nav.mobile-open .nav-list>li>a:hover,
.main-nav.mobile-open .nav-list>li>a:active{
    background:var(--blue-pale);
    color:var(--blue-mid);
    padding-left:1.35rem;
}
/* Icoon links in mobiel menu */
.main-nav.mobile-open .nav-list>li>a .nav-icon{
    display:flex;
    align-items:center;justify-content:center;
    width:34px;height:34px;
    background:linear-gradient(135deg,var(--blue-dark),var(--blue-mid));
    border-radius:var(--r-sm);
    color:#fff;font-size:.82rem;
    flex-shrink:0;
}
/* Chevron voor dropdown-items */
.main-nav.mobile-open .has-dropdown>a{justify-content:flex-start}
.main-nav.mobile-open .has-dropdown>a::after{
    content:'\f107';
    font-family:'Font Awesome 6 Free';font-weight:900;
    font-size:.75rem;flex-shrink:0;
    transition:transform var(--tr);
    color:var(--grey-400);
    margin-left:auto;
}
.main-nav.mobile-open .has-dropdown.dropdown-open>a{
    color:var(--blue-mid);
    background:var(--blue-pale);
}
.main-nav.mobile-open .has-dropdown.dropdown-open>a::after{
    transform:rotate(180deg);color:var(--blue-mid);
}
/* Dropdown panel (accordion) */
.main-nav.mobile-open .nav-dropdown{display:none}
.main-nav.mobile-open .has-dropdown.dropdown-open .nav-dropdown{
    display:flex;flex-direction:column;
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;min-width:auto;
    padding:.5rem 1rem .75rem 4rem;
    background:linear-gradient(to bottom, var(--blue-pale), #f0f6ff);
    border-radius:0;
    margin:0;gap:.15rem;
    border-bottom:1px solid var(--grey-100);
}
.main-nav.mobile-open .has-dropdown.dropdown-open .dropdown-col{
    min-width:auto;gap:.1rem;margin-bottom:.75rem;
}
.main-nav.mobile-open .has-dropdown.dropdown-open .dropdown-col:last-child{margin-bottom:0}
.main-nav.mobile-open .has-dropdown.dropdown-open .dropdown-col strong{
    font-size:.68rem;color:var(--blue-mid);margin-bottom:.35rem;
    border-bottom-color:rgba(26,102,178,.15);
}
.main-nav.mobile-open .has-dropdown.dropdown-open .dropdown-col a{
    font-size:.88rem;font-weight:500;color:var(--grey-700);
    padding:.35rem .5rem;border-radius:var(--r-sm);
}
.main-nav.mobile-open .has-dropdown.dropdown-open .dropdown-col a:hover{
    background:rgba(26,102,178,.08);color:var(--blue-mid);padding-left:.85rem;
}

/* Mobile nav footer — CTA + reviews */
.mobile-nav-footer{
    display:none;
}
.main-nav.mobile-open .mobile-nav-footer{
    display:flex;flex-direction:column;gap:.65rem;
    padding:1.25rem 1rem 1.5rem;
    width:100%;box-sizing:border-box;
    background:linear-gradient(to bottom, #f8faff, var(--blue-pale));
    border-top:1px solid var(--grey-100);
}
/* Primaire CTA — full width */
.mnf-btn-primary{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    width:100%;box-sizing:border-box;
    padding:.85rem 1rem;
    font-size:.95rem;font-weight:700;
    border-radius:var(--r-md);text-decoration:none;
    transition:all var(--tr-fast);
}
/* Telefoon + WhatsApp — kleine links naast elkaar */
.mnf-contact-rij{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
    width:100%;
}
.mnf-tel,
.mnf-wa{
    min-width:0;
    display:flex;align-items:center;justify-content:center;gap:.4rem;
    padding:.6rem .25rem;font-size:.82rem;font-weight:600;
    border-radius:var(--r-md);text-decoration:none;
    transition:all var(--tr-fast);border:1.5px solid var(--grey-200);
    color:var(--grey-700);background:#fff;
    overflow:hidden;
}
.mnf-tel:hover{border-color:var(--blue-mid);color:var(--blue-mid)}
.mnf-wa{border-color:#25D366;color:#25D366}
.mnf-wa:hover{background:#25D366;color:#fff}
.mnf-review{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.35rem 0;
}
.mnf-sterren{color:var(--accent);font-size:.95rem;letter-spacing:.05em}
.mnf-tekst{font-size:.78rem;font-weight:500;color:var(--grey-600)}

.whatsapp-float{position:fixed;bottom:1.5rem;right:1.5rem;width:58px;height:58px;background:var(--whatsapp);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.75rem;box-shadow:0 4px 20px rgba(37,211,102,.5),0 0 0 4px rgba(37,211,102,.15);z-index:50;transition:all var(--tr);text-decoration:none;color:#fff}
.whatsapp-float:hover{transform:scale(1.1) translateY(-2px);box-shadow:0 8px 30px rgba(37,211,102,.55),0 0 0 6px rgba(37,211,102,.15);color:#fff}

/* ===== BREADCRUMB ===== */
.breadcrumb-wrap{background:var(--grey-50);border-bottom:1px solid var(--grey-100);padding:.6rem 0}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}
.breadcrumb li{font-size:.82rem;color:var(--grey-600)}
.breadcrumb li a{color:var(--blue-light)}
.breadcrumb li a:hover{text-decoration:underline}
.bc-sep{padding:0 .5rem;color:var(--grey-200)}

/* ===== HERO — volledig foto als achtergrond ===== */
.hero-section{
    position:relative;
    color:#fff;
    overflow:hidden;
    min-height:92vh;
    display:flex;
    align-items:center;
}

/* achtergrond foto */
.hero-bg{
    position:absolute;
    inset:0;
    z-index:0;
}
.hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 20%;
    display:block;
}

/* gradient overlay: links donker, rechts transparant */
.hero-bg::after{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(100deg,
            rgba(13,31,53,0.96) 0%,
            rgba(13,31,53,0.88) 35%,
            rgba(13,31,53,0.55) 60%,
            rgba(13,31,53,0.15) 100%
        ),
        linear-gradient(to top,
            rgba(13,31,53,0.7) 0%,
            transparent 35%
        );
}

.hero-inner{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr;
    padding:7rem 0 5rem;
    max-width:680px;
}
@media(min-width:1024px){
    .hero-inner{
        grid-template-columns:1fr 1fr;
        max-width:100%;
        align-items:center;
        padding:9rem 0 6rem;
    }
}

.hero-content{max-width:620px}

/* oranje accent-balk boven h1 */
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    background:rgba(232,117,26,.18);
    backdrop-filter:blur(8px);
    border:1px solid rgba(232,117,26,.4);
    color:var(--accent);
    padding:.45rem 1.1rem;
    border-radius:var(--r-full);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:1.5rem;
}
.hero-badge-dot{
    width:8px;height:8px;
    background:var(--accent);
    border-radius:50%;
    animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}

.hero-content h1{
    font-size:clamp(2.5rem,5vw,4.25rem);
    font-weight:900;
    line-height:1.05;
    color:#fff;
    margin-bottom:1.25rem;
    letter-spacing:-.04em;
    text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.hero-content h1 span{
    color:var(--accent);
    display:block;
}
.hero-sub{
    font-size:1.1rem;
    color:rgba(255,255,255,.85);
    margin-bottom:2.25rem;
    max-width:520px;
    line-height:1.8;
    text-shadow:0 1px 8px rgba(0,0,0,.2);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:3rem}

/* trust badges */
/* ===== TRUST BADGES — subtiele glazen stijl ===== */
.hero-trust{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:.55rem;
}
@media(min-width:560px){.hero-trust{grid-template-columns:repeat(4,1fr)}}

.trust-badge{
    display:flex;
    align-items:center;
    gap:.65rem;
    background:rgba(13,31,53,.45);
    border:1px solid rgba(255,255,255,.1);
    border-top:1px solid rgba(255,255,255,.18);
    border-radius:var(--r-md);
    padding:.7rem .9rem;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:all var(--tr-fast);
}
.trust-badge:hover{
    background:rgba(13,31,53,.6);
    border-color:rgba(232,117,26,.4);
    transform:translateY(-1px);
}
.trust-badge-icon{
    width:34px;height:34px;
    background:linear-gradient(135deg,rgba(232,117,26,.3),rgba(232,117,26,.15));
    border:1px solid rgba(232,117,26,.35);
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    color:var(--accent);
    font-size:.85rem;
    flex-shrink:0;
}
.trust-badge-info strong{
    display:block;
    font-size:.95rem;
    font-weight:800;
    color:#fff;
    line-height:1.15;
    letter-spacing:-.02em;
}
.trust-badge-info span{
    font-size:.68rem;
    color:rgba(255,255,255,.5);
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.04em;
}

/* ===== HERO STAT CARDS — glassmorphism ===== */
.hero-stats{
    display:none;
    flex-direction:column;
    gap:.75rem;
    align-items:flex-end;
    padding-left:2rem;
}
@media(min-width:1024px){.hero-stats{display:flex}}

.hero-stat-card{
    background:rgba(13,31,53,.55);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.12);
    border-top:1px solid rgba(255,255,255,.22);
    border-radius:var(--r-lg);
    padding:1rem 1.4rem;
    display:flex;
    align-items:center;
    gap:.9rem;
    box-shadow:0 8px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
    min-width:250px;
    transition:all var(--tr);
}
.hero-stat-card:hover{
    background:rgba(13,31,53,.7);
    border-color:rgba(232,117,26,.3);
    transform:translateX(-4px);
}
.hsc-icon{
    width:44px;height:44px;
    background:linear-gradient(135deg,rgba(13,58,92,.8),rgba(45,109,164,.6));
    border-radius:var(--r-md);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.1rem;flex-shrink:0;
}
.hsc-icon--accent{background:linear-gradient(135deg,rgba(200,95,13,.8),rgba(232,117,26,.7));border:1px solid rgba(232,117,26,.4)}
.hsc-text strong{display:block;font-size:.9rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.hsc-text span{font-size:.73rem;color:rgba(255,255,255,.55);font-weight:500;text-transform:uppercase;letter-spacing:.04em}

/* ===== SECTIES HELPERS ===== */
.section-kop{text-align:center;margin-bottom:3.5rem}
.section-kop h2{font-size:clamp(1.75rem,3vw,2.6rem);font-weight:800;color:var(--grey-900);margin-bottom:.75rem;letter-spacing:-.03em}
.section-kop p{font-size:1.05rem;color:var(--grey-600);max-width:580px;margin:0 auto}
.section-label{display:inline-block;background:var(--accent-pale);color:var(--accent-d);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:.3rem .9rem;border-radius:var(--r-full);margin-bottom:.85rem;border:1px solid rgba(232,117,26,.25)}
.section-cta{text-align:center;margin-top:2.5rem}

/* diagonal divider */
.section-diagonal{clip-path:polygon(0 0,100% 3vw,100% 100%,0 100%);margin-top:-3vw;padding-top:calc(3vw + 3rem)}

/* ===== USP'S ===== */
.usps-section{
    padding:5.5rem 0;
    background:
        radial-gradient(ellipse at 10% 50%, rgba(45,109,164,.08) 0%, transparent 60%),
        radial-gradient(ellipse at 90% 20%, rgba(232,117,26,.06) 0%, transparent 50%),
        var(--blue-pale);
    position:relative;
    overflow:hidden;
}
/* Subtiele decoratieve cirkels */
.usps-section::before{
    content:'';position:absolute;bottom:-120px;right:-80px;
    width:400px;height:400px;border-radius:50%;
    border:2px solid rgba(13,31,53,.05);
    pointer-events:none;
}
.usps-section::after{
    content:'';position:absolute;top:-80px;left:-60px;
    width:280px;height:280px;border-radius:50%;
    border:2px solid rgba(13,31,53,.04);
    pointer-events:none;
}
.usps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1.25rem;position:relative;z-index:1}

.usp-card{background:#fff;border-radius:var(--r-lg);padding:1.75rem 1.5rem;box-shadow:var(--sh-sm);border:1px solid rgba(59,130,246,.08);transition:all var(--tr);position:relative;overflow:hidden}
.usp-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-dark),var(--blue-light));transform:scaleX(0);transform-origin:left;transition:transform var(--tr)}
.usp-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.usp-card:hover::after{transform:scaleX(1)}

.usp-icon{width:54px;height:54px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1.1rem;position:relative}
.usp-icon i{position:relative;z-index:1}

/* gekleurde icon achtergronden per positie */
.usp-card:nth-child(1) .usp-icon{background:linear-gradient(135deg,#0D1F35,#2D6DA4);color:#fff;box-shadow:0 6px 16px rgba(13,31,53,.3)}
.usp-card:nth-child(2) .usp-icon{background:linear-gradient(135deg,#C85F0D,#E8751A);color:#fff;box-shadow:0 6px 16px rgba(232,117,26,.35)}
.usp-card:nth-child(3) .usp-icon{background:linear-gradient(135deg,#1652B8,#3B82F6);color:#fff;box-shadow:0 6px 16px rgba(22,82,184,.3)}
.usp-card:nth-child(4) .usp-icon{background:linear-gradient(135deg,#16A34A,#22C55E);color:#fff;box-shadow:0 6px 16px rgba(22,163,74,.3)}
.usp-card:nth-child(5) .usp-icon{background:linear-gradient(135deg,#DC2626,#F87171);color:#fff;box-shadow:0 6px 16px rgba(220,38,38,.3)}
.usp-card:nth-child(6) .usp-icon{background:linear-gradient(135deg,#7C3AED,#A78BFA);color:#fff;box-shadow:0 6px 16px rgba(124,58,237,.3)}
.usp-card:nth-child(7) .usp-icon{background:linear-gradient(135deg,#0891B2,#22D3EE);color:#fff;box-shadow:0 6px 16px rgba(8,145,178,.3)}
.usp-card:nth-child(8) .usp-icon{background:linear-gradient(135deg,#0A3D91,#1652B8);color:#fff;box-shadow:0 6px 16px rgba(10,61,145,.3)}
.usp-card:nth-child(9) .usp-icon{background:linear-gradient(135deg,#D97706,#F59E0B);color:#fff;box-shadow:0 6px 16px rgba(245,158,11,.3)}
.usp-card:nth-child(10) .usp-icon{background:linear-gradient(135deg,#059669,#34D399);color:#fff;box-shadow:0 6px 16px rgba(5,150,105,.3)}

.usp-card h3{font-size:.95rem;font-weight:700;color:var(--grey-900);margin-bottom:.4rem;letter-spacing:-.01em}
.usp-card p{font-size:.85rem;color:var(--grey-600);line-height:1.6}

/* ===== DIENSTEN ===== */
.diensten-section{
    padding:5.5rem 0;
    background:
        radial-gradient(circle, rgba(13,31,53,.025) 1px, transparent 1px) center / 28px 28px,
        #fff;
    position:relative;
}
/* Wave bovenrand */
.diensten-section::before{
    content:'';
    display:block;
    position:absolute;
    top:0;left:0;right:0;
    height:5px;
    background:linear-gradient(90deg, var(--blue-dark), var(--blue-light), var(--accent), var(--blue-light), var(--blue-dark));
}
.diensten-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.25rem}

.dienst-card{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--grey-100);border-radius:var(--r-xl);padding:2rem;box-shadow:var(--sh-sm);transition:all var(--tr);text-decoration:none;color:inherit;position:relative;overflow:hidden}
.dienst-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue-dark),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform var(--tr)}
.dienst-card:hover{transform:translateY(-8px);box-shadow:var(--sh-xl);border-color:rgba(59,130,246,.2);color:inherit}
.dienst-card:hover::before{transform:scaleX(1)}

.dienst-icon{width:58px;height:58px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--blue-dark),var(--blue-light));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;margin-bottom:1.25rem;box-shadow:0 6px 18px rgba(10,61,145,.3);transition:transform var(--tr)}
.dienst-card:hover .dienst-icon{transform:scale(1.08) rotate(-4deg)}
.dienst-card h3{font-size:1.05rem;font-weight:700;color:var(--grey-900);margin-bottom:.5rem;letter-spacing:-.01em}
.dienst-card p{font-size:.875rem;color:var(--grey-600);flex:1;margin-bottom:1.25rem;line-height:1.65}
.dienst-link{font-size:.85rem;font-weight:700;color:var(--blue-light);display:flex;align-items:center;gap:.4rem}
.dienst-link i{transition:transform var(--tr-fast)}
.dienst-card:hover .dienst-link i{transform:translateX(5px)}

.diensten-overzicht{padding:4rem 0}
.dienst-categorie-blok{
    margin-bottom:4rem;
    padding:2rem;
    background:#fff;
    border-radius:var(--r-xl);
    box-shadow:var(--sh-sm);
    border:1px solid var(--grey-100);
    position:relative;
    overflow:hidden;
}
.dienst-categorie-blok::before{
    content:'';position:absolute;top:0;left:0;bottom:0;width:5px;
    background:linear-gradient(to bottom, var(--blue-dark), var(--accent));
    border-radius:var(--r-xl) 0 0 var(--r-xl);
}
.dienst-categorie-blok h2{
    font-size:1.3rem;font-weight:800;color:var(--grey-900);
    margin-bottom:1.5rem;padding-left:.75rem;
}

.diensten-mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:.75rem;margin:1rem 0}
.dienst-mini-kaart{display:flex;align-items:center;gap:.6rem;background:var(--blue-pale);border-radius:var(--r-md);padding:.75rem 1rem;text-decoration:none;color:var(--blue-dark);font-size:.85rem;font-weight:600;transition:all var(--tr-fast);border:1px solid transparent}
.dienst-mini-kaart:hover{background:var(--blue-mid);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-sm)}
.dienst-mini-kaart i{width:20px;text-align:center}

.dienst-categorie-tag{display:inline-block;background:var(--blue-pale);color:var(--blue-mid);font-size:.73rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:.3rem .9rem;border-radius:var(--r-full);margin-bottom:.75rem;border:1px solid rgba(59,130,246,.2)}

/* ===== FOTO SECTIE ===== */
.foto-sectie{padding:5.5rem 0;background:var(--grey-900);position:relative;overflow:hidden}
.foto-sectie::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue-dark),var(--blue-light),var(--accent))}

.foto-sectie .section-kop h2{color:#fff}
.foto-sectie .section-kop p{color:rgba(255,255,255,.65)}
.foto-sectie .section-label{background:rgba(59,130,246,.2);color:var(--blue-light);border-color:rgba(59,130,246,.3)}

.foto-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.foto-grid{grid-template-columns:1fr 1fr;grid-template-rows:280px 280px}}
@media(min-width:1024px){.foto-grid{grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:240px 240px}}

.foto-item{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:220px}
.foto-item img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s ease}
.foto-item:hover img{transform:scale(1.06)}
.foto-item-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,61,145,.85) 0%,rgba(10,61,145,.2) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.25rem}
.foto-item-label{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem}
.foto-item h3{font-size:1.05rem;font-weight:800;color:#fff;line-height:1.2}

/* groot item — eerste foto */
@media(min-width:640px){.foto-item--groot{grid-row:span 2}}
@media(min-width:1024px){.foto-item--groot{grid-row:span 2;grid-column:span 1}}

/* ===== VASTGOED SECTIE ===== */
.vastgoed-section{padding:5.5rem 0;background:linear-gradient(160deg,#061f4a 0%,var(--blue-dark) 60%,#0e3580 100%);position:relative;overflow:hidden}
.vastgoed-section::after{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:rgba(59,130,246,.08);pointer-events:none}

.vastgoed-inner{display:grid;grid-template-columns:1fr;gap:3rem;position:relative;z-index:1}
@media(min-width:1024px){.vastgoed-inner{grid-template-columns:1.6fr 1fr;gap:5rem;align-items:center}}

.vastgoed-label{display:inline-flex;align-items:center;gap:.5rem;background:rgba(245,158,11,.15);color:var(--accent);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:.35rem .9rem;border-radius:var(--r-full);margin-bottom:1rem;border:1px solid rgba(245,158,11,.3)}
.vastgoed-content h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:900;color:#fff;margin-bottom:1rem;letter-spacing:-.03em;line-height:1.15}
.vastgoed-content p{color:rgba(255,255,255,.75);margin-bottom:1rem;line-height:1.75}

.vastgoed-voordelen{margin:1.5rem 0 2rem}
.vastgoed-voordelen li{display:flex;align-items:flex-start;gap:.85rem;padding:.55rem 0;color:rgba(255,255,255,.85);font-size:.95rem;border-bottom:1px solid rgba(255,255,255,.06)}
.vastgoed-voordelen li::before{content:'';width:20px;height:20px;min-width:20px;background:rgba(245,158,11,.2);border:1px solid rgba(245,158,11,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:.15rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23F59E0B'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:12px}
.vastgoed-cta{display:flex;flex-wrap:wrap;gap:.75rem}

.vastgoed-doelgroep{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:2rem;backdrop-filter:blur(4px)}
.vastgoed-doelgroep h3{font-size:.78rem;font-weight:800;color:var(--accent);margin-bottom:1.25rem;text-transform:uppercase;letter-spacing:.1em}
.doelgroep-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.doelgroep-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:.7rem .9rem;font-size:.85rem;color:rgba(255,255,255,.85);font-weight:500;display:flex;align-items:center;gap:.6rem;transition:all var(--tr-fast)}
.doelgroep-item i{color:var(--accent);width:16px}
.doelgroep-item:hover{background:rgba(59,130,246,.2);border-color:rgba(59,130,246,.3)}

/* ===== STAPPENPLAN ===== */
.stappenplan-section{
    padding:5.5rem 0;
    background:linear-gradient(160deg, #0D1F35 0%, #1A3A5C 50%, #0D1F35 100%);
    position:relative;
    overflow:hidden;
}
/* Decoratieve achtergrond cirkels */
.stappenplan-section::before{
    content:'';position:absolute;
    top:-150px;left:-150px;
    width:500px;height:500px;border-radius:50%;
    background:rgba(45,109,164,.12);
    pointer-events:none;
}
.stappenplan-section::after{
    content:'';position:absolute;
    bottom:-100px;right:-100px;
    width:350px;height:350px;border-radius:50%;
    background:rgba(232,117,26,.08);
    pointer-events:none;
}
/* Tekst wit maken voor donkere achtergrond */
.stappenplan-section .section-kop h2{color:#fff}
.stappenplan-section .section-kop p{color:rgba(255,255,255,.65)}
.stappenplan-section .section-label{background:rgba(232,117,26,.2);color:var(--accent);border-color:rgba(232,117,26,.3)}
.stappen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem;position:relative}

/* verbindingslijn desktop */
.stappen-grid::after{content:'';position:absolute;top:27px;left:calc(100% / 12);right:calc(100% / 12);height:2px;background:linear-gradient(90deg,var(--blue-pale) 0%,var(--blue-light) 50%,var(--blue-pale) 100%);display:none}
@media(min-width:900px){.stappen-grid::after{display:block}}

.stap-item{text-align:center;padding:1.5rem 1rem;position:relative;z-index:1}
.stap-nr{
    width:58px;height:58px;
    background:linear-gradient(135deg,var(--accent-d),var(--accent));
    color:#fff;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;font-weight:900;
    margin:0 auto 1.1rem;
    box-shadow:0 0 0 6px rgba(232,117,26,.15),0 8px 24px rgba(232,117,26,.3);
    position:relative;z-index:1;transition:transform var(--tr)
}
.stap-item:hover .stap-nr{transform:scale(1.12)}
.stap-item h3{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:.4rem}
.stap-item p{font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.6}

/* Verbindingslijn wit */
.stappen-grid::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),rgba(232,117,26,.4),rgba(255,255,255,.2),transparent)}

.mini-stappen{display:flex;flex-direction:column;gap:.75rem;margin:1rem 0}
.mini-stap{display:flex;gap:1rem;align-items:flex-start}
.mini-stap span{width:30px;height:30px;min-width:30px;background:linear-gradient(135deg,var(--blue-dark),var(--blue-light));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;box-shadow:0 4px 10px rgba(10,61,145,.3)}
.mini-stap p{font-size:.9rem;color:var(--grey-600);padding-top:.2rem;line-height:1.55}

/* ===== STEDEN ===== */
.steden-section{
    padding:5.5rem 0;
    background-color:var(--grey-900);
    background-image:url('../images/werk-3.jpg');
    background-size:cover;
    background-position:center 30%;
    background-attachment:fixed;
    position:relative;
}
/* Donkere overlay */
.steden-section::before{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(
        to bottom,
        rgba(13,31,53,.92) 0%,
        rgba(13,31,53,.85) 50%,
        rgba(13,31,53,.94) 100%
    );
}
.steden-section .container{position:relative;z-index:1}
.steden-section .section-kop h2{color:#fff}
.steden-section .section-kop p{color:rgba(255,255,255,.65)}
.steden-section .section-label{background:rgba(232,117,26,.2);color:var(--accent);border-color:rgba(232,117,26,.3)}
.steden-section .section-cta .btn-outline{border-color:rgba(255,255,255,.4);color:#fff}
.steden-section .section-cta .btn-outline:hover{background:rgba(255,255,255,.1);color:#fff}

/* .stad-card en .steden-grid → zie nieuwe definitie verderop in steden-overzicht sectie */
.stad-icon{width:34px;height:34px;background:linear-gradient(135deg,var(--blue-dark),var(--blue-mid));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;flex-shrink:0;transition:all var(--tr)}

/* ===== STAD CARD — op donkere foto-achtergrond (homepage steden-sectie) ===== */
.steden-section .stad-card{
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.12);
    border-top:1px solid rgba(255,255,255,.2);
    box-shadow:none;
}
.steden-section .stad-card:hover{
    background:rgba(255,255,255,.14);
    border-color:rgba(232,117,26,.5);
    box-shadow:0 12px 32px rgba(0,0,0,.3);
}
.steden-section .stad-icon{
    background:linear-gradient(135deg,rgba(232,117,26,.3),rgba(232,117,26,.15));
    border:1px solid rgba(232,117,26,.35);
    color:var(--accent);
    box-shadow:none;
}
.steden-section .stad-card:hover .stad-icon{
    background:linear-gradient(135deg,var(--accent-d),var(--accent));
    color:#fff;
    border-color:transparent;
}
.steden-section .stad-card h3{color:#fff}
.steden-section .stad-card p{color:rgba(255,255,255,.5)}

/* ===== STEDEN PAGINA — HERO ===== */
.steden-hero-inner{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:900px){.steden-hero-inner{grid-template-columns:1fr auto}}
.steden-hero-stats{display:none;align-items:center;gap:1.75rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-xl);padding:1.5rem 2rem;backdrop-filter:blur(4px)}
@media(min-width:768px){.steden-hero-stats{display:flex}}

/* ===== STEDEN INTRO ===== */
.steden-intro-section{padding:4.5rem 0;background:#fff;border-bottom:1px solid var(--grey-100)}
.steden-intro-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:start}
@media(min-width:1024px){.steden-intro-grid{grid-template-columns:1.2fr 1fr}}
.steden-intro-tekst h2{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:800;color:var(--grey-900);margin-bottom:1rem;line-height:1.25}
.steden-intro-tekst p{color:var(--grey-600);line-height:1.75;margin-bottom:1rem;font-size:.975rem}
.steden-intro-tekst p strong{color:var(--blue-dark)}
.steden-intro-usps{display:flex;flex-direction:column;gap:.85rem}
.steden-usp-item{display:flex;align-items:center;gap:1rem;background:var(--grey-50);border:1px solid var(--grey-100);border-radius:var(--r-lg);padding:1rem 1.25rem;transition:all var(--tr)}
.steden-usp-item:hover{border-color:var(--accent);background:#fff;box-shadow:var(--sh-sm)}
.sui-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--blue-dark),var(--blue-mid));border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;flex-shrink:0}
.steden-usp-item strong{display:block;font-size:.875rem;font-weight:700;color:var(--grey-900)}
.steden-usp-item span{font-size:.78rem;color:var(--grey-500)}

/* ===== STEDEN OVERZICHT ===== */
.steden-overzicht{padding:4rem 0;background:var(--grey-50)}
.provincie-blok{margin-bottom:3.5rem}
.provincie-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem}
.provincie-blok h2{
    font-size:1.1rem;font-weight:800;
    display:inline-flex;align-items:center;gap:.6rem;
    background:linear-gradient(90deg,var(--blue-dark),var(--blue-mid));
    color:#fff;padding:.55rem 1.25rem;border-radius:var(--r-full);
    margin:0;
}
.provincie-teller{background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;padding:.3rem .75rem;border-radius:var(--r-full);letter-spacing:.04em}
.steden-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:.75rem}
.stad-card{display:flex;align-items:center;gap:.75rem;background:#fff;border:1.5px solid var(--grey-100);border-radius:var(--r-lg);padding:.85rem 1rem;text-decoration:none;color:var(--grey-700);transition:all var(--tr);box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.stad-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--blue-dark),var(--blue-mid));transform:scaleY(0);transition:transform var(--tr);transform-origin:bottom}
.stad-card:hover{border-color:var(--blue-light);box-shadow:var(--sh-md);transform:translateY(-2px);color:var(--blue-dark)}
.stad-card:hover::before{transform:scaleY(1)}
.stad-card:hover .stad-icon{background:linear-gradient(135deg,var(--blue-dark),var(--blue-mid));color:#fff}
.stad-card-info{flex:1;min-width:0}
.stad-card h3{font-size:.82rem;font-weight:700;color:var(--grey-900);margin-bottom:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stad-card p{font-size:.7rem;color:var(--grey-500);margin:0}
.stad-card-pijl{color:var(--grey-300);font-size:.7rem;flex-shrink:0;transition:all var(--tr)}
.stad-card:hover .stad-card-pijl{color:var(--blue-light);transform:translateX(3px)}
@media(min-width:768px){.steden-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}

/* ===== SEO TEKST BLOK ===== */
.steden-seo-section{padding:4.5rem 0;background:#fff}
.steden-seo-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:1024px){.steden-seo-grid{grid-template-columns:1.2fr 1fr}}
.steden-seo-section h2{font-size:1.3rem;font-weight:800;color:var(--grey-900);margin-bottom:1rem}
.steden-seo-section p{color:var(--grey-600);line-height:1.75;margin-bottom:.9rem;font-size:.95rem}
.steden-seo-section strong{color:var(--blue-dark)}
.steden-contact-kaart{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}
.sck-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--grey-50);border:1px solid var(--grey-100);border-radius:var(--r-lg);transition:all var(--tr)}
.sck-item:hover{border-color:var(--blue-light);background:#fff}
.sck-item>i{width:36px;height:36px;background:linear-gradient(135deg,var(--blue-dark),var(--blue-mid));border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem;flex-shrink:0}
.sck-item strong{display:block;font-size:.85rem;font-weight:700;color:var(--grey-900)}
.sck-item a{font-size:.85rem;color:var(--blue-mid);text-decoration:none;font-weight:500}
.sck-item a:hover{color:var(--accent)}

/* ===== REVIEW STRIP ===== */
.steden-review-strip{background:linear-gradient(135deg,var(--blue-dark),var(--blue-mid));padding:3rem 0}
.srs-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem}
@media(min-width:768px){.srs-inner{flex-direction:row;text-align:left;justify-content:space-between}}
.srs-score{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.srs-nr{font-size:3rem;font-weight:900;color:#fff;line-height:1}
.srs-sterren{color:var(--accent);font-size:1.1rem;letter-spacing:.1em}
.srs-label{font-size:.7rem;color:rgba(255,255,255,.6);text-transform:uppercase;font-weight:600;letter-spacing:.06em}
.srs-tekst{flex:1}
.srs-tekst strong{display:block;font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.3rem}
.srs-tekst span{font-size:.875rem;color:rgba(255,255,255,.7)}

/* ===== REVIEWS ===== */
.reviews-section{padding:5.5rem 0;background:var(--blue-pale)}
.review-stats-bar{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin-top:1rem;flex-wrap:wrap}
.review-score-big{font-size:3rem;font-weight:900;color:var(--blue-dark);line-height:1}
.review-stars-lg{color:var(--accent);font-size:1.25rem;letter-spacing:.08em}
.review-count{font-size:.875rem;color:var(--grey-600)}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem;margin-top:2.5rem}

.review-card{background:#fff;border-radius:var(--r-xl);padding:2rem;box-shadow:var(--sh-sm);border:1px solid rgba(59,130,246,.08);position:relative;overflow:hidden;transition:all var(--tr)}
.review-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.review-card::before{content:'\201C';position:absolute;top:.75rem;right:1.25rem;font-size:5rem;color:var(--blue-pale);font-family:Georgia,serif;line-height:1;pointer-events:none}
.review-sterren{color:var(--accent);font-size:1rem;margin-bottom:.85rem;letter-spacing:.1em}
.review-tekst{font-size:.95rem;color:var(--grey-600);font-style:italic;margin-bottom:1.25rem;line-height:1.75;position:relative;z-index:1}
.review-auteur{display:flex;align-items:center;gap:.75rem}
.review-avatar{width:42px;height:42px;background:linear-gradient(135deg,var(--blue-dark),var(--blue-light));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.95rem;flex-shrink:0}
.review-auteur-info strong{display:block;font-size:.9rem;font-weight:700;color:var(--grey-900)}
.review-auteur-info span{font-size:.78rem;color:var(--grey-600)}

/* ===== FAQ ===== */
.faq-section{
    padding:5.5rem 0;
    background:
        linear-gradient(135deg, transparent 25%, rgba(232,117,26,.02) 25%, rgba(232,117,26,.02) 50%, transparent 50%, transparent 75%, rgba(13,31,53,.02) 75%) 0 0 / 56px 56px,
        linear-gradient(160deg, var(--grey-50) 0%, #fff 50%, var(--grey-50) 100%);
    position:relative;
}
.faq-section::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg, transparent, var(--blue-dark), var(--blue-light), var(--accent), var(--blue-light), var(--blue-dark), transparent);
}
.faq-list{display:flex;flex-direction:column;gap:.5rem;max-width:800px;margin:0 auto}
.faq-item{background:#fff;border:1.5px solid var(--grey-100);border-radius:var(--r-md);overflow:hidden;transition:all var(--tr-fast)}
.faq-item:has(.faq-question[aria-expanded="true"]){border-color:var(--blue-light);box-shadow:0 0 0 4px rgba(59,130,246,.08)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.5rem;text-align:left;font-size:.95rem;font-weight:700;color:var(--grey-900);cursor:pointer;transition:background var(--tr-fast)}
.faq-question:hover{background:var(--blue-pale)}
.faq-question[aria-expanded="true"]{background:var(--blue-pale);color:var(--blue-dark)}
.faq-icon{width:26px;height:26px;min-width:26px;background:var(--blue-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--blue-mid);transition:all var(--tr)}
.faq-question[aria-expanded="true"] .faq-icon{transform:rotate(45deg);background:var(--blue-mid);color:#fff}
.faq-answer{display:none;padding:0 1.5rem 1.25rem}
.faq-answer.open{display:block}
.faq-answer p{color:var(--grey-600);font-size:.9rem;line-height:1.75}
.faq-pagina{padding:4rem 0}
.faq-cat-blok{
    margin-bottom:3rem;
    padding:2rem;
    background:#fff;
    border-radius:var(--r-xl);
    box-shadow:var(--sh-sm);
    border:1px solid var(--grey-100);
}
.faq-cat-blok h2{
    font-size:1.2rem;font-weight:800;color:var(--grey-900);
    margin-bottom:1.5rem;
    padding:.65rem 1.25rem;
    background:linear-gradient(90deg,var(--blue-dark),var(--blue-mid));
    color:#fff;
    border-radius:var(--r-full);
    display:inline-block;
}
.faq-categorieën{max-width:900px;margin:0 auto}

/* ===== CTA SECTIE ===== */
.cta-section{padding:5.5rem 0;background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue-mid) 100%);position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-40%;right:-5%;width:600px;height:600px;background:rgba(59,130,246,.1);border-radius:50%;pointer-events:none}
.cta-section::after{content:'';position:absolute;bottom:-30%;left:-5%;width:400px;height:400px;background:rgba(245,158,11,.06);border-radius:50%;pointer-events:none}
.cta-inner{display:flex;flex-direction:column;gap:2rem;align-items:center;text-align:center;position:relative;z-index:1}
@media(min-width:768px){.cta-inner{flex-direction:row;justify-content:space-between;text-align:left}}
.cta-text h2{font-size:clamp(1.5rem,3vw,2.35rem);font-weight:900;color:#fff;margin-bottom:.5rem;letter-spacing:-.03em;line-height:1.15}
.cta-text p{color:rgba(255,255,255,.8);font-size:1.05rem}
.cta-buttons{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;flex-shrink:0}
@media(min-width:768px){.cta-buttons{justify-content:flex-end}}

/* Knoppen in CTA-sectie (donkere achtergrond) */
.cta-section .btn-outline{
    background:rgba(255,255,255,.1);
    color:#fff;
    border-color:rgba(255,255,255,.45);
    backdrop-filter:blur(4px);
}
.cta-section .btn-outline:hover{
    background:rgba(255,255,255,.2);
    border-color:#fff;
    color:#fff;
}
.cta-section .btn-primary,
.cta-section .btn-accent {
    background:var(--accent);
    border-color:var(--accent);
    color:var(--grey-900);
    font-weight:800;
}
.cta-section .btn-primary:hover,
.cta-section .btn-accent:hover {
    background:var(--accent-d);
    border-color:var(--accent-d);
    color:var(--grey-900);
    box-shadow:0 8px 24px rgba(232,117,26,.4);
}

/* ===== PAGE HERO ===== */
.page-hero{background:linear-gradient(140deg,#061f4a 0%,var(--blue-dark) 50%,var(--blue-mid) 100%);color:#fff;padding:4rem 0;position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;bottom:-40px;right:-40px;width:300px;height:300px;background:rgba(59,130,246,.1);border-radius:50%;pointer-events:none}
.page-hero--small{padding:3rem 0}
.page-hero--small h1{font-size:clamp(1.75rem,3vw,2.6rem);font-weight:900;color:#fff;margin-bottom:.75rem;letter-spacing:-.03em}
.page-hero--small p{color:rgba(255,255,255,.8);font-size:1.05rem;max-width:640px}
.page-hero-inner{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;position:relative;z-index:1}
@media(min-width:768px){.page-hero-inner{grid-template-columns:1fr auto}}
.page-hero-content h1{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:900;color:#fff;margin-bottom:1rem;line-height:1.12;letter-spacing:-.03em}
.page-hero-sub{font-size:1rem;color:rgba(255,255,255,.85);margin-bottom:1.5rem;max-width:580px;line-height:1.75}
.page-hero-cta{display:flex;flex-wrap:wrap;gap:.75rem}

/* Knoppen in page-hero altijd wit/licht uitvoeren */
.page-hero .btn-outline,
.page-hero--small .btn-outline {
    background: rgba(255,255,255,.1);
    color: #fff;
    border-color: rgba(255,255,255,.5);
    backdrop-filter: blur(4px);
}
.page-hero .btn-outline:hover,
.page-hero--small .btn-outline:hover {
    background: rgba(255,255,255,.2);
    border-color: #fff;
    color: #fff;
}
.page-hero .btn-primary,
.page-hero--small .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--grey-900);
    font-weight: 800;
}
.page-hero .btn-primary:hover,
.page-hero--small .btn-primary:hover {
    background: var(--accent-d);
    border-color: var(--accent-d);
    color: var(--grey-900);
    box-shadow: 0 8px 24px rgba(232,117,26,.4);
}
.page-hero-icon{font-size:5rem;opacity:.15;display:none}
@media(min-width:768px){.page-hero-icon{display:block}}

/* ===== CONTENT SECTIES (inner pages) ===== */
/* Alle witte content-secties krijgen subtiel patroon */
.dienst-intro,
.over-ons-section,
.contact-section,
.offerte-section,
.steden-overzicht,
.diensten-overzicht,
.faq-pagina,
.legal-section {
    background:
        radial-gradient(circle, rgba(13,31,53,.022) 1px, transparent 1px) center / 30px 30px,
        linear-gradient(180deg, var(--grey-50) 0%, #fff 8%, #fff 92%, var(--grey-50) 100%);
    position:relative;
}
/* Kleurlijn bovenaan elke content-sectie */
.dienst-intro::before,
.over-ons-section::before,
.contact-section::before,
.offerte-section::before {
    content:'';
    position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg, var(--blue-dark), var(--blue-light), var(--accent));
}

/* ===== CONTENT GRID ===== */
.content-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:1024px){.content-grid{grid-template-columns:1fr 340px}}
.content-main{min-width:0}
.content-main h2{
    font-size:1.35rem;font-weight:800;color:var(--grey-900);
    margin:2.25rem 0 .75rem;letter-spacing:-.02em;
    display:flex;align-items:center;gap:.6rem;
}
.content-main h2::before{
    content:'';display:inline-block;width:4px;height:1.2em;
    background:linear-gradient(var(--blue-dark),var(--accent));
    border-radius:2px;flex-shrink:0;
}
.content-main h2:first-child{margin-top:0}
.content-main p{color:var(--grey-600);margin-bottom:1rem;line-height:1.8}
.dienst-intro{padding:4.5rem 0}

.check-list{margin:.75rem 0;display:flex;flex-direction:column;gap:.3rem}
.check-list li{padding:.45rem 0 .45rem 2rem;position:relative;color:var(--grey-600);font-size:.95rem;border-bottom:1px solid var(--grey-100)}
.check-list li:last-child{border-bottom:none}
.check-list li::before{content:'';position:absolute;left:0;top:.6rem;width:20px;height:20px;background:var(--blue-pale);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231652B8'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:11px}

/* ===== SIDEBAR ===== */
.content-sidebar{display:flex;flex-direction:column;gap:1rem}
.sidebar-card{background:#fff;border:1.5px solid var(--grey-100);border-radius:var(--r-xl);padding:1.5rem;box-shadow:var(--sh-sm)}
.sidebar-card h3{font-size:1rem;font-weight:800;color:var(--grey-900);margin-bottom:.75rem;letter-spacing:-.01em}
.sidebar-card p{font-size:.875rem;color:var(--grey-600);margin-bottom:1rem}
.sidebar-offerte{
    background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue-mid) 60%,#1a4a8a 100%);
    border-color:transparent;
    position:relative;overflow:hidden;
}
.sidebar-offerte::before{
    content:'';position:absolute;top:-40px;right:-40px;
    width:120px;height:120px;border-radius:50%;
    background:rgba(255,255,255,.05);pointer-events:none;
}
.sidebar-offerte h3{color:#fff;font-size:1.05rem}
.sidebar-offerte p{color:rgba(255,255,255,.75)}

/* Knoppen in donkere sidebar witte stijl */
.sidebar-offerte .btn-outline{
    background:rgba(255,255,255,.1);
    color:#fff;
    border-color:rgba(255,255,255,.4);
}
.sidebar-offerte .btn-outline:hover{
    background:rgba(255,255,255,.2);
    border-color:#fff;
    color:#fff;
}
.sidebar-offerte .btn-primary{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--grey-900);
    font-weight:800;
}
.sidebar-offerte .btn-primary:hover{
    background:var(--accent-d);
    border-color:var(--accent-d);
    color:var(--grey-900);
}
.sidebar-offerte p{color:rgba(255,255,255,.75)}
.sidebar-links{display:flex;flex-direction:column;gap:.2rem}
.sidebar-links li a{display:block;padding:.45rem .5rem;font-size:.875rem;color:var(--grey-600);border-bottom:1px solid var(--grey-100);transition:all var(--tr-fast)}
.sidebar-links li a:hover{color:var(--blue-mid);padding-left:.85rem}
.sidebar-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:center}
.stat-nr{font-size:1.5rem;font-weight:900;color:var(--blue-mid)}
.stat-label{font-size:.73rem;color:var(--grey-600)}

/* ===== OFFERTE ===== */
.offerte-section{padding:4rem 0}
.offerte-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:1024px){.offerte-grid{grid-template-columns:1fr 340px}}
.offerte-form-wrap{min-width:0}
.offerte-sidebar{display:flex;flex-direction:column;gap:1rem}

.form-section{background:#fff;border:1.5px solid var(--grey-100);border-radius:var(--r-xl);padding:2rem;margin-bottom:1.25rem;box-shadow:var(--sh-sm)}
.form-section h2{font-size:1.05rem;font-weight:800;color:var(--grey-900);margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:2px solid var(--blue-pale);display:flex;align-items:center;gap:.65rem}
.form-section h2::before{content:'';display:inline-block;width:4px;height:18px;background:linear-gradient(var(--blue-dark),var(--blue-light));border-radius:2px;flex-shrink:0}
.form-section--vastgoed{background:var(--blue-pale);border-color:rgba(59,130,246,.2)}

.form-row{display:grid;gap:1rem;margin-bottom:1rem}
.form-row--2{grid-template-columns:1fr}
@media(min-width:600px){.form-row--2{grid-template-columns:1fr 1fr}}

.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.form-group label{font-size:.82rem;font-weight:700;color:var(--grey-900);letter-spacing:.01em}
.required{color:var(--error)}
.optional{color:var(--grey-600);font-weight:400}
.form-group input:not([type="checkbox"]):not([type="radio"]),.form-group select,.form-group textarea{width:100%;padding:.75rem 1rem;border:2px solid var(--grey-200);border-radius:var(--r-md);font-size:.95rem;font-family:var(--font);color:var(--grey-900);background:#fff;transition:all var(--tr-fast);appearance:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--blue-light);box-shadow:0 0 0 4px rgba(59,130,246,.1)}
.form-group textarea{resize:vertical;min-height:110px}
.form-group input[type="file"]{padding:.65rem;background:var(--grey-50);cursor:pointer}
.form-group small{font-size:.75rem;color:var(--grey-600)}

.form-privacy{margin:1rem 0}
.checkbox-label{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;font-size:.875rem;color:var(--grey-600)}
.checkbox-label input[type="checkbox"]{width:18px;min-width:18px;height:18px;margin-top:2px;accent-color:var(--blue-mid)}
.btn-submit{width:100%;font-size:1.05rem;padding:1.1rem 2rem}
.form-disclaimer{text-align:center;font-size:.75rem;color:var(--grey-600);margin-top:.75rem}
.form-errors{background:#FEF2F2;border:1.5px solid #FECACA;border-radius:var(--r-md);padding:1rem 1.25rem;margin-bottom:1.5rem;color:var(--error);font-size:.9rem}
.form-errors ul{margin-top:.5rem;padding-left:1.25rem;list-style:disc}

/* ===== CONTACT ===== */
.contact-section{padding:4rem 0}
.contact-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-manieren h2,.contact-info h2{font-size:1.5rem;font-weight:800;color:var(--grey-900);margin-bottom:1.5rem}
.contact-kaart{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 1.5rem;background:#fff;border:1.5px solid var(--grey-100);border-radius:var(--r-xl);margin-bottom:.85rem;transition:all var(--tr)}
.contact-kaart:hover{border-color:var(--blue-light);box-shadow:var(--sh-md);transform:translateX(5px)}
.contact-icon{width:46px;height:46px;min-width:46px;background:linear-gradient(135deg,var(--blue-dark),var(--blue-light));border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem}
.contact-kaart h3{font-size:1rem;font-weight:700;color:var(--grey-900);margin-bottom:.3rem}
.contact-kaart p{font-size:.875rem;color:var(--grey-600);margin-bottom:.75rem}
.info-tabel{width:100%;border-collapse:collapse;margin-bottom:1.5rem}
.info-tabel th,.info-tabel td{padding:.75rem;border-bottom:1px solid var(--grey-100);font-size:.9rem;text-align:left}
.info-tabel th{color:var(--grey-600);font-weight:700;width:40%;background:var(--grey-50)}
.info-tabel td{color:var(--grey-900)}

/* ===== INTERNE LINKS ===== */
.interne-links-section{
    padding:3.5rem 0;
    background:linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 100%);
    position:relative;overflow:hidden;
}
.interne-links-section::after{
    content:'';position:absolute;bottom:-80px;right:-80px;
    width:300px;height:300px;border-radius:50%;
    background:rgba(255,255,255,.04);pointer-events:none;
}
.interne-links-section h2{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:1.25rem;position:relative;z-index:1}
.link-kaarten{display:flex;flex-wrap:wrap;gap:.65rem;position:relative;z-index:1}
.link-kaart{
    display:flex;align-items:center;gap:.5rem;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    border-radius:var(--r-md);padding:.6rem 1rem;
    font-size:.875rem;color:rgba(255,255,255,.85);
    text-decoration:none;transition:all var(--tr-fast);
    backdrop-filter:blur(4px);
}
.link-kaart:hover{background:rgba(255,255,255,.15);border-color:rgba(232,117,26,.5);color:#fff;transform:translateY(-2px)}
.link-kaart i{color:var(--accent)}

/* ===== NABIJGELEGEN ===== */
.naburige-steden-section{
    padding:3.5rem 0;
    background:
        radial-gradient(circle, rgba(13,31,53,.022) 1px, transparent 1px) center / 28px 28px,
        var(--grey-50);
}
.naburige-steden-section h2{
    font-size:1.35rem;font-weight:800;color:var(--grey-900);margin-bottom:1.25rem;
    display:inline-flex;align-items:center;gap:.5rem;
}
.naburige-steden-section h2::before{
    content:'';display:inline-block;width:4px;height:1.2em;
    background:linear-gradient(var(--blue-dark),var(--accent));
    border-radius:2px;
}
.naburige-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:.65rem}
.naburige-kaart{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;background:#fff;border:1.5px solid var(--grey-100);border-radius:var(--r-md);padding:1rem;text-decoration:none;color:var(--grey-600);transition:all var(--tr-fast);box-shadow:var(--sh-sm)}
.naburige-kaart:hover{border-color:var(--accent);color:var(--accent-d);transform:translateY(-3px);box-shadow:var(--sh-md)}
.naburige-kaart i{color:var(--blue-light);font-size:.9rem}
.naburige-kaart strong{font-size:.85rem;font-weight:700;color:var(--grey-900)}
.naburige-kaart small{font-size:.73rem}

/* ===== LEGAL ===== */
.legal-section{padding:4rem 0}
.legal-content{max-width:800px}
.legal-content h2{font-size:1.2rem;font-weight:800;color:var(--grey-900);margin:2rem 0 .75rem;padding-left:.85rem;border-left:3px solid var(--blue-light)}
.legal-content h2:first-child{margin-top:0}
.legal-content p{color:var(--grey-600);margin-bottom:1rem;line-height:1.75}
.over-ons-section{padding:4rem 0}

/* ===== BEDANKT ===== */
.bedankt-section{padding:6rem 0;min-height:65vh;display:flex;align-items:center;background:var(--grey-50)}
.bedankt-inner{text-align:center;max-width:580px;margin:0 auto}
.bedankt-icon{width:96px;height:96px;background:linear-gradient(135deg,var(--blue-dark),var(--blue-light));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#fff;margin:0 auto 2rem;box-shadow:0 0 0 14px rgba(59,130,246,.1),var(--sh-lg)}
.bedankt-inner h1{font-size:2.25rem;font-weight:900;color:var(--grey-900);margin-bottom:1rem;letter-spacing:-.03em}
.bedankt-inner p{font-size:1.05rem;color:var(--grey-600);margin-bottom:2rem}
.bedankt-cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* ===== 404 ===== */
.fout-section{padding:6rem 0;min-height:65vh;display:flex;align-items:center}
.fout-inner{text-align:center;max-width:580px;margin:0 auto}
.fout-nr{font-size:8rem;font-weight:900;background:linear-gradient(135deg,var(--blue-dark),var(--blue-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:1rem}
.fout-inner h1{font-size:2rem;font-weight:800;color:var(--grey-900);margin-bottom:1rem}
.fout-inner p{font-size:1.05rem;color:var(--grey-600);margin-bottom:2rem}
.fout-links{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* ===== FOOTER ===== */
.site-footer{background:var(--grey-900);color:rgba(255,255,255,.6);padding:5rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2.5rem;margin-bottom:4rem}
.footer-col--brand{grid-column:span 1}
@media(min-width:1200px){.footer-col--brand{grid-column:span 2}}
.footer-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-bottom:1.1rem}
.footer-logo .logo-text{color:#fff}
.footer-logo .logo-text strong{color:var(--accent)}
.footer-logo .logo-icon{background:linear-gradient(135deg,var(--blue-mid),var(--blue-light));box-shadow:0 4px 12px rgba(0,0,0,.4)}
.footer-col--brand p{font-size:.875rem;margin-bottom:1.25rem;line-height:1.75;color:rgba(255,255,255,.55)}
.footer-contact{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.25rem}
.footer-contact-link{font-size:.875rem;color:rgba(255,255,255,.55);text-decoration:none;transition:color var(--tr-fast);display:flex;align-items:center;gap:.5rem}
.footer-contact-link i{width:16px;color:var(--blue-light)}
.footer-contact-link:hover{color:#fff}
.footer-review{display:flex;gap:.75rem;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:.65rem .9rem;font-size:.875rem}
.footer-review span:first-child{color:var(--accent);font-weight:800}
.footer-col h3{font-size:.78rem;font-weight:800;color:rgba(255,255,255,.4);margin-bottom:1rem;text-transform:uppercase;letter-spacing:.12em}
.footer-col ul{display:flex;flex-direction:column;gap:.45rem}
.footer-col ul li a{font-size:.875rem;color:rgba(255,255,255,.5);text-decoration:none;transition:color var(--tr-fast);display:inline-flex;align-items:center;gap:.4rem}
.footer-col ul li a::before{content:'›';color:var(--blue-light);font-weight:700}
.footer-col ul li a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:2rem;display:flex;flex-direction:column;gap:.5rem;align-items:center;text-align:center;font-size:.78rem;color:rgba(255,255,255,.3)}
@media(min-width:768px){.footer-bottom{flex-direction:row;justify-content:space-between;text-align:left}}
.footer-bottom a{color:rgba(255,255,255,.35);text-decoration:none}
.footer-bottom a:hover{color:#fff}

/* ============================================================
   STAD.PHP — nieuwe elementen
   ============================================================ */

/* Hero trust stats */
.stad-hero-stats{
    display:none;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.15);
    border-radius:var(--r-lg);
    padding:1.25rem 1.75rem;
    gap:1.5rem;
    align-items:center;
    margin-top:2rem;
}
@media(min-width:768px){.stad-hero-stats{display:flex}}
.shs-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.2rem}
.shs-nr{font-size:1.75rem;font-weight:900;color:#fff;line-height:1}
.shs-sterren{color:var(--accent);font-size:.85rem;letter-spacing:.1em}
.shs-label{font-size:.7rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.shs-divider{width:1px;height:50px;background:rgba(255,255,255,.15)}

/* Dienst blokken */
.stad-dienst-blokken{display:flex;flex-direction:column;gap:1.25rem;margin:1.5rem 0}
.stad-dienst-blok{
    display:flex;gap:1.25rem;
    background:#fff;
    border:1.5px solid var(--grey-100);
    border-radius:var(--r-lg);
    padding:1.5rem;
    box-shadow:var(--sh-sm);
    transition:all var(--tr);
}
.stad-dienst-blok:hover{border-color:var(--accent);box-shadow:var(--sh-md);transform:translateX(4px)}
.sdb-icon{
    width:52px;height:52px;min-width:52px;
    background:linear-gradient(135deg,var(--blue-dark),var(--blue-mid));
    border-radius:var(--r-md);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.2rem;
    box-shadow:0 4px 12px rgba(13,31,53,.25);
    align-self:flex-start;
}
.sdb-icon--oranje{background:linear-gradient(135deg,var(--accent-d),var(--accent));box-shadow:0 4px 12px rgba(232,117,26,.3)}
.sdb-icon--groen{background:linear-gradient(135deg,#059669,#34D399);box-shadow:0 4px 12px rgba(5,150,105,.3)}
.sdb-icon--paars{background:linear-gradient(135deg,#7C3AED,#A78BFA);box-shadow:0 4px 12px rgba(124,58,237,.3)}
.sdb-content{flex:1;min-width:0}
.sdb-content h3{font-size:1rem;font-weight:700;color:var(--grey-900);margin-bottom:.5rem}
.sdb-content p{font-size:.875rem;color:var(--grey-600);margin-bottom:.75rem;line-height:1.6}
.sdb-content .check-list{margin-bottom:.85rem}
.sdb-content .check-list li{font-size:.85rem}
.stad-dienst-link{
    display:inline-flex;align-items:center;gap:.4rem;
    font-size:.82rem;font-weight:700;color:var(--blue-light);
    text-decoration:none;transition:gap var(--tr-fast);
}
.stad-dienst-link:hover{gap:.65rem;color:var(--accent)}

/* Kosten tabel */
.kosten-tabel-wrap{margin:1rem 0 1.5rem;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);border:1px solid var(--grey-100)}
.kosten-tabel{width:100%;border-collapse:collapse}
.kosten-tabel thead tr{background:linear-gradient(90deg,var(--blue-dark),var(--blue-mid))}
.kosten-tabel th{padding:.85rem 1.25rem;text-align:left;color:#fff;font-size:.85rem;font-weight:700}
.kosten-tabel tbody tr{border-bottom:1px solid var(--grey-100);transition:background var(--tr-fast)}
.kosten-tabel tbody tr:hover{background:var(--blue-pale)}
.kosten-tabel tbody tr:last-child{border-bottom:none}
.kosten-tabel td{padding:.8rem 1.25rem;font-size:.875rem;color:var(--grey-700)}
.kosten-tabel td:last-child{font-weight:700;color:var(--blue-dark)}
.kosten-disclaimer{font-size:.78rem;color:var(--grey-600);padding:.75rem 1rem;background:var(--grey-50);border-top:1px solid var(--grey-100);display:flex;align-items:center;gap:.5rem}
.kosten-disclaimer i{color:var(--blue-light);flex-shrink:0}

/* Waarom grid */
.waarom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin:1rem 0 1.5rem}
.waarom-item{background:#fff;border:1.5px solid var(--grey-100);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sh-sm);transition:all var(--tr)}
.waarom-item:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--sh-md)}
.waarom-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--blue-dark),var(--blue-mid));border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem;margin-bottom:.75rem}
.waarom-item h4{font-size:.9rem;font-weight:700;color:var(--grey-900);margin-bottom:.35rem}
.waarom-item p{font-size:.8rem;color:var(--grey-600);line-height:1.55}

/* Sidebar review kaartje */
.sidebar-review-card{
    background:linear-gradient(135deg,var(--accent-d),var(--accent));
    border:none;text-align:center;
}
.src-score{font-size:2.5rem;font-weight:900;color:#fff;line-height:1}
.src-sterren{color:rgba(255,255,255,.9);font-size:1.1rem;letter-spacing:.1em;display:block;margin:.25rem 0}
.src-tekst{font-size:.75rem;color:rgba(255,255,255,.8);font-weight:500}

/* Lokale reviews sectie */
.stad-reviews-section{
    padding:5rem 0;
    background:
        radial-gradient(ellipse at 0% 100%,rgba(232,117,26,.06) 0%,transparent 60%),
        var(--blue-pale);
}

/* Review totaal bar */
.review-totaal-bar{
    display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;
    background:#fff;border-radius:var(--r-xl);padding:1.5rem 2rem;
    margin-top:2rem;box-shadow:var(--sh-md);
    border:1px solid var(--grey-100);
}
.rtb-score{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.rtb-nr{font-size:2.5rem;font-weight:900;color:var(--blue-dark);line-height:1}
.rtb-sterren{color:var(--accent);font-size:1rem;letter-spacing:.1em}
.rtb-info{flex:1}
.rtb-info strong{display:block;font-size:.95rem;font-weight:700;color:var(--grey-900)}
.rtb-info span{font-size:.82rem;color:var(--grey-600)}

/* ============================================================
   Wijken-grid (stad.php — unieke lokale sectie per stad)
   ============================================================ */
.wijken-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:.6rem;
    margin:1rem 0 1.25rem;
}
.wijk-item{
    display:flex;align-items:center;gap:.6rem;
    background:var(--blue-pale);
    border:1.5px solid var(--grey-100);
    border-radius:var(--r-md);
    padding:.55rem .85rem;
    font-size:.84rem;font-weight:600;color:var(--blue-dark);
    transition:all var(--tr-fast);
}
.wijk-item i{color:var(--accent);font-size:.75rem;flex-shrink:0}
.wijk-item:hover{
    background:#fff;
    border-color:var(--accent);
    transform:translateY(-2px);
    box-shadow:var(--sh-sm);
}
.wijken-note{
    font-size:.82rem;color:var(--grey-600);
    background:var(--grey-50);border:1px solid var(--grey-100);
    border-radius:var(--r-md);padding:.65rem 1rem;
    margin-top:.5rem;line-height:1.55;
}
.wijken-note a{color:var(--blue-light);font-weight:600;text-decoration:none}
.wijken-note a:hover{color:var(--accent)}

@media(max-width:640px){
    .wijken-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   RESPONSIVE — Mobile & tablet
   Comprehensive fixes voor alle secties
   ============================================================ */

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

    /* --- Globaal --- */
    .container{padding-left:1rem;padding-right:1rem}

    /* --- Header --- */
    .header-inner{gap:.75rem}
    .logo-text{font-size:1.2rem}

    /* --- HERO --- */
    .hero-section{min-height:auto}
    .hero-inner{padding:4.5rem 0 3rem;max-width:100%}
    .hero-content h1{font-size:2rem;letter-spacing:-.03em}
    .hero-sub{font-size:.92rem;margin-bottom:1.5rem}
    .hero-cta{flex-direction:column;gap:.65rem}
    .hero-cta .btn{width:100%;justify-content:center}
    .hero-trust{grid-template-columns:repeat(2,1fr)}
    .trust-badge{padding:.6rem .75rem}

    /* --- Section headings --- */
    .section-kop{margin-bottom:2rem}
    .section-kop h2{font-size:1.55rem}
    .section-kop p{font-size:.93rem}

    /* --- USPs --- */
    .usps-grid{grid-template-columns:repeat(2,1fr)}
    .usp-card{padding:1.25rem 1rem}
    .usp-card h3{font-size:.88rem}

    /* --- Diensten --- */
    .diensten-grid{grid-template-columns:1fr}
    .diensten-mini-grid{grid-template-columns:repeat(2,1fr)}
    .dienst-categorie-blok{padding:1.25rem}

    /* --- Foto sectie --- */
    .foto-grid{grid-template-columns:1fr}
    .foto-item{min-height:180px}

    /* --- Vastgoed sectie --- */
    .vastgoed-section{padding:3.5rem 0}
    .vastgoed-inner{gap:2rem}
    .doelgroep-grid{grid-template-columns:1fr}
    .vastgoed-cta{flex-direction:column;gap:.65rem}
    .vastgoed-cta .btn{width:100%;justify-content:center}

    /* --- Stappenplan --- */
    .stappenplan-section{padding:3.5rem 0}
    .stappen-grid{grid-template-columns:repeat(2,1fr)}

    /* --- Steden sectie --- */
    .steden-section{
        padding:3.5rem 0;
        background-attachment:scroll; /* iOS fix: geen fixed-attachment */
    }
    .steden-grid{grid-template-columns:repeat(2,1fr)}
    .steden-hero-inner{grid-template-columns:1fr}

    /* --- Reviews --- */
    .reviews-section{padding:3.5rem 0}
    .reviews-grid{grid-template-columns:1fr}
    .review-stats-bar{gap:.75rem}
    .review-score-big{font-size:2.25rem}

    /* --- FAQ --- */
    .faq-section{padding:3.5rem 0}
    .faq-question{padding:.9rem 1rem;font-size:.9rem}
    .faq-answer{padding:0 1rem 1rem}
    .faq-cat-blok{padding:1.25rem}

    /* --- CTA sectie --- */
    .cta-section{padding:3.5rem 0}
    .cta-inner{text-align:center}
    .cta-buttons{justify-content:center;width:100%}
    .cta-buttons .btn{flex:1;min-width:0}

    /* --- Page hero --- */
    .page-hero{padding:2.5rem 0}
    .page-hero-inner{grid-template-columns:1fr}
    .page-hero-content h1{font-size:1.75rem}
    .page-hero-cta{flex-direction:column;gap:.6rem}
    .page-hero-cta .btn{width:100%;justify-content:center}

    /* --- Content grid (binnenpagina's) --- */
    .content-grid{grid-template-columns:1fr}
    .offerte-grid{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
    .steden-intro-grid{grid-template-columns:1fr;gap:2rem}
    .steden-seo-grid{grid-template-columns:1fr;gap:2rem}

    /* --- Offerte form --- */
    .form-section{padding:1.25rem}
    .form-row--2{grid-template-columns:1fr}

    /* --- Contact --- */
    .contact-kaart{flex-direction:column;gap:.75rem}
    .contact-icon{align-self:flex-start}

    /* --- Sidebar --- */
    .sidebar-stats{grid-template-columns:repeat(3,1fr)}
    .stat-nr{font-size:1.25rem}

    /* --- stad.php dienst blokken --- */
    .stad-dienst-blok{flex-direction:column;gap:.85rem}
    .sdb-icon{align-self:flex-start}

    /* --- stad.php hero stats --- */
    .stad-hero-stats{display:none !important}

    /* --- Tabellen — horizontaal scrollbaar maken --- */
    .kosten-tabel-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .info-tabel{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

    /* --- Waarom grid --- */
    .waarom-grid{grid-template-columns:repeat(2,1fr)}

    /* --- Naburige steden --- */
    .naburige-grid{grid-template-columns:repeat(2,1fr)}

    /* --- Interne links --- */
    .link-kaarten{gap:.5rem}
    .link-kaart{font-size:.82rem;padding:.5rem .75rem}

    /* --- Footer --- */
    .site-footer{padding:3rem 0 1.5rem}
    .footer-grid{grid-template-columns:1fr;gap:2rem}
    .footer-col--brand{grid-column:1}
    .footer-grid{margin-bottom:2.5rem}

    /* --- Bedankt & 404 --- */
    .bedankt-section{padding:3.5rem 0}
    .bedankt-inner h1{font-size:1.75rem}
    .bedankt-cta{flex-direction:column;gap:.65rem;align-items:center}
    .bedankt-cta .btn{width:100%;max-width:320px}
    .fout-section{padding:3.5rem 0}
    .fout-nr{font-size:5rem}
    .fout-inner h1{font-size:1.65rem}
    .fout-links{flex-direction:column;gap:.65rem;align-items:center}
    .fout-links .btn{width:100%;max-width:320px}

    /* --- Review strip --- */
    .steden-review-strip{padding:2rem 0}
    .srs-nr{font-size:2.25rem}
    .srs-tekst strong{font-size:.95rem}

    /* --- Breadcrumb --- */
    .breadcrumb li{font-size:.73rem}

    /* --- Provincie header --- */
    .provincie-header{flex-direction:column;align-items:flex-start;gap:.5rem}

    /* --- Steden overzicht (steden.php) --- */
    .steden-overzicht{padding:2.5rem 0}
    .provincie-blok{margin-bottom:2.5rem}
}

/* ===== EXTRA KLEIN ( ≤ 400px ) ===== */
@media(max-width:400px){
    .hero-content h1{font-size:1.75rem}
    .usps-grid{grid-template-columns:1fr}
    .trust-badge{gap:.45rem}
    .trust-badge-info strong{font-size:.82rem}
    .trust-badge-info span{font-size:.62rem}
    .header-inner{gap:.5rem}
    .logo-text{font-size:1.1rem}
    .steden-grid{grid-template-columns:1fr}
    .naburige-grid{grid-template-columns:repeat(2,1fr)}
    .mnf-tekst{font-size:.7rem}
}

/* ===== TABLET ( 768px – 1059px ) ===== */
@media(min-width:768px) and (max-width:1059px){

    /* --- Hero --- */
    .hero-inner{padding:6rem 0 4rem}
    .hero-content h1{font-size:2.75rem}
    .hero-trust{grid-template-columns:repeat(4,1fr)}

    /* --- Diensten --- */
    .diensten-grid{grid-template-columns:repeat(2,1fr)}
    .diensten-mini-grid{grid-template-columns:repeat(3,1fr)}

    /* --- Stappenplan --- */
    .stappen-grid{grid-template-columns:repeat(3,1fr)}

    /* --- Steden --- */
    .steden-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}

    /* --- Content grids --- */
    .content-grid{grid-template-columns:1fr 290px}
    .offerte-grid{grid-template-columns:1fr 290px}

    /* --- Vastgoed --- */
    .doelgroep-grid{grid-template-columns:repeat(2,1fr)}

    /* --- Naburige steden --- */
    .naburige-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}