:root{
    --primary_color:#1e2a38;
    --primary_color_rgb:30,42,56;
    --primary_color_soft:#2d3b4d;
    --accent_color:#c99a3b;
    --accent_color_dark:#b58422;
    --text:#1f2937;
    --muted:#6b7280;
    --bg:#f7f8fa;
    --white:#ffffff;
    --border:#e5e7eb;
    --success:#198754;
    --shadow:0 12px 35px rgba(16,24,40,.08);
    --shadow-lg:0 20px 50px rgba(16,24,40,.16);
    --radius:18px;
    --bs-body-color:var(--text);
    --bs-link-color:var(--primary_color);
}

html {
    scroll-behavior: smooth;
}

body{
    font-family:'Inter',sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.65;
    padding-top:78px;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

.brand-name{
    font-weight:800;
    letter-spacing:-0.02em;
    color:var(--primary_color);
}

/* Logo image in navbar */
.navbar-logo{
    height:40px;
    width:auto;
    display:block;
    max-width:180px;
    object-fit:contain;
}

/* Dark navbar variant */
.bg-dark-nav{
    background:var(--primary_color) !important;
}
.bg-dark-nav .nav-link{
    color:rgba(255,255,255,.85);
}
.bg-dark-nav .nav-link:hover{
    color:#fff;
}
.bg-dark-nav .navbar-brand .brand-name{
    color:#fff;
}
.bg-dark-nav .navbar-toggler{
    border-color:rgba(255,255,255,.3);
}

/* Transparent navbar variant — pair with hero section */
.bg-transparent .nav-link{
    color:rgba(255,255,255,.9);
}
.bg-transparent .nav-link:hover{
    color:#fff;
}
.bg-transparent .navbar-brand .brand-name{
    color:#fff;
}

/* Footer simple variant */
.footer--simple{
    padding:28px 0;
}
.footer--compact{
    padding:56px 0 24px;
}

.navbar{
    padding-top:14px;
    padding-bottom:14px;
}

.nav-link{
    font-weight:500;
    color:var(--text);
}

.nav-link:hover{
    color:var(--accent_color_dark);
}

.btn{
    border-radius:12px;
    font-weight:600;
    padding:.8rem 1.2rem;
}

.btn-primary{
    background:var(--accent_color);
    border-color:var(--accent_color);
    color:#fff;
}

.btn-primary:hover{
    background:var(--accent_color_dark);
    border-color:var(--accent_color_dark);
    color:#fff;
}

.btn-outline-primary{
    color:var(--primary_color);
    border-color:var(--primary_color);
}

.btn-outline-primary:hover{
    background:var(--primary_color);
    border-color:var(--primary_color);
}

.hero-section{
    position:relative;
    background:
        linear-gradient(90deg, rgba(var(--primary_color_rgb),.88) 0%, rgba(var(--primary_color_rgb),.78) 45%, rgba(var(--primary_color_rgb),.40) 100%);
    color:#fff;
    overflow:hidden;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.18));
}

.hero-row{
    padding-top:40px;
    padding-bottom:40px;
}

.eyebrow,
.section-kicker{
    display:inline-block;
    font-size:.82rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--accent_color);
    margin-bottom:1rem;
}

.hero-section h1{
    font-size:clamp(2.5rem, 5vw, 4.6rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.03em;
    margin-bottom:1.2rem;
    max-width:820px;
}

.hero-lead{
    font-size:1.2rem;
    max-width:720px;
    color:rgba(255,255,255,.9);
    margin-bottom:1.75rem;
}

.hero-card{
    padding-left:2rem;
}

.hero-card img{
    border:1px solid rgba(255,255,255,.18);
}

.trust-box{
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(8px);
    border-radius:14px;
    padding:1rem 1.1rem;
    font-weight:600;
    text-align:center;
}

.section-padding{
    padding:96px 0;
}

.section-heading{
    max-width:760px;
    margin:0 auto 3rem;
}

.section-heading h2,
section h2{
    font-size:clamp(2rem, 4vw, 3rem);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.03em;
    margin-bottom:1rem;
    color:var(--primary_color);
}

.section-heading p{
    color:var(--muted);
    font-size:1.06rem;
}

.info-card,
.service-card,
.step-card,
.form-card,
.contact-card{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:2rem;
    box-shadow:var(--shadow);
}

.info-card h3,
.service-card h3,
.step-card h3{
    font-size:1.2rem;
    font-weight:700;
    color:var(--primary_color);
    margin-bottom:.75rem;
}

.info-card p,
.service-card p,
.step-card p,
.contact-card p{
    color:var(--muted);
    margin-bottom:0;
}

.icon-circle{
    width:58px;
    height:58px;
    border-radius:50%;
    background:#eef3f8;
    color:var(--primary_color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.35rem;
    margin-bottom:1rem;
}

.shadow-soft{
    box-shadow:var(--shadow);
}

.benefit-list{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.benefit-item{
    display:flex;
    gap:.85rem;
    align-items:flex-start;
    color:var(--text);
    font-weight:500;
}

.benefit-item i{
    color:var(--accent_color);
    font-size:1.2rem;
    margin-top:.15rem;
}

.step-number{
    width:54px;
    height:54px;
    border-radius:50%;
    background:var(--primary_color);
    color:#fff;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:1rem;
}

.bg-dark-blue{
    background:linear-gradient(135deg, var(--primary_color) 0%, var(--primary_color_soft) 100%);
}

.text-accent{
    color:var(--accent_color);
}

.text-white-75{
    color:rgba(255,255,255,.82);
}

.profile-image{
    object-fit:cover;
    width:100%;
}

.stat-box{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    padding:1rem;
    text-align:center;
}

.cta-panel{
    background:linear-gradient(135deg, #fff 0%, #f3f6fa 100%);
    border:1px solid var(--border);
    border-radius:24px;
    padding:2.5rem;
    box-shadow:var(--shadow);
}

.faq-wrap{
    max-width:900px;
}

.accordion-item{
    border:1px solid var(--border);
    border-radius:14px !important;
    overflow:hidden;
    margin-bottom:1rem;
    box-shadow:var(--shadow);
}

.accordion-button{
    font-weight:700;
    color:var(--primary_color);
    background:#fff;
}

.accordion-button:not(.collapsed){
    background:#f8fafc;
    color:var(--primary_color);
    box-shadow:none;
}

.accordion-button:focus{
    box-shadow:none;
    border-color:transparent;
}

.contact-section{
    background:#f8fafc;
}

.contact-card{
    background:var(--primary_color);
    color:#fff;
    border:none;
}

.contact-card p{
    color:#fff;
    margin-bottom:1rem;
}

.contact-card a{
    color:#fff;
    font-weight:600;
}

.form-card{
    background:#fff;
}

.form-label{
    font-weight:600;
    color:var(--primary_color);
}

.form-control{
    border-radius:12px;
    padding:.9rem 1rem;
    border:1px solid #d7dce2;
}

.form-control:focus{
    border-color:var(--accent_color);
    box-shadow:0 0 0 .15rem rgba(201,154,59,.12);
}

.site-footer{
    background:var(--primary_color);
    color:rgba(255,255,255,.82);
    padding:72px 0 28px;
}

.site-footer h5,
.site-footer h6{
    color:#fff;
    font-weight:700;
    margin-bottom:1rem;
}

.site-footer a{
    color:rgba(255,255,255,.82);
}

.site-footer a:hover{
    color:#fff;
}

.site-footer hr{
    border-color:rgba(255,255,255,.12);
    margin:2rem 0 1.25rem;
}

/* ── Hero variants ──────────────────────────────────────────────────── */

/* centered: no image split, content centred within a shorter section */
.hero--centered .hero-row{
    min-height:auto !important;
    padding-top:96px;
    padding-bottom:96px;
}
.hero--centered h1{
    margin-left:auto;
    margin-right:auto;
}
.hero--centered .hero-lead{
    margin-left:auto;
    margin-right:auto;
}

/* split: image left, text right */
.hero--split{
    background:
        linear-gradient(270deg, rgba(var(--primary_color_rgb),.88) 0%, rgba(var(--primary_color_rgb),.78) 55%, rgba(var(--primary_color_rgb),.40) 100%);
}

/* ── Section color schemes ──────────────────────────────────────────── */
/* Applied as cs-{id} on <section> elements */

/* Dark (primary) */
.cs-dark{background:var(--primary_color) !important;color:rgba(255,255,255,.85)}
.cs-dark h2,.cs-dark h3,.cs-dark section h2{color:#fff !important}
.cs-dark .section-heading h2{color:#fff !important}
.cs-dark .section-kicker,.cs-dark .eyebrow{color:var(--accent_color)}
.cs-dark .info-card,.cs-dark .service-card,.cs-dark .step-card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
.cs-dark .info-card h3,.cs-dark .service-card h3,.cs-dark .step-card h3{color:#fff}
.cs-dark .info-card p,.cs-dark .service-card p,.cs-dark .step-card p{color:rgba(255,255,255,.68)}
.cs-dark .icon-circle{background:rgba(255,255,255,.12);color:#fff}
.cs-dark .step-number{background:var(--accent_color);color:#fff}
.cs-dark .accordion-item{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.cs-dark .accordion-button{background:transparent;color:#fff}
.cs-dark .accordion-button:not(.collapsed){background:rgba(255,255,255,.06);color:#fff}
.cs-dark .accordion-body{color:rgba(255,255,255,.78)}
.cs-dark .cta-panel{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.cs-dark p{color:rgba(255,255,255,.78)}

/* Light (white) */
.cs-light{background:#fff !important}

/* Muted (soft grey) */
.cs-muted{background:#f1f5f9 !important}

/* Accent (brand) */
.cs-accent{background:var(--accent_color) !important;color:var(--primary_color)}
.cs-accent h2,.cs-accent h3,.cs-accent .section-heading h2{color:var(--primary_color) !important}
.cs-accent .section-kicker,.cs-accent .eyebrow{color:var(--primary_color);opacity:.75}
.cs-accent .info-card,.cs-accent .service-card,.cs-accent .step-card{background:rgba(255,255,255,.88);border-color:rgba(0,0,0,.1)}
.cs-accent .icon-circle{background:rgba(0,0,0,.12);color:var(--primary_color)}
.cs-accent .step-number{background:var(--primary_color);color:#fff}
.cs-accent p{color:var(--primary_color)}

/* Preview back-to-editor button */
#previewBackBtn{
    position:fixed;
    top:88px;
    left:16px;
    z-index:99998;
    background:rgba(30,42,56,.9);
    color:#fff;
    padding:8px 16px;
    border-radius:20px;
    font-size:13px;
    font-family:'Inter',sans-serif;
    font-weight:600;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:6px;
    box-shadow:0 2px 12px rgba(0,0,0,.3);
    transition:background .15s;
}
#previewBackBtn:hover{background:rgba(30,42,56,1);color:#fff}

@media (max-width: 991.98px){
    body{
        padding-top:72px;
    }

    .header-cta{
        margin-top:1rem;
        flex-wrap:wrap;
    }

    .hero-section{
        background:
            linear-gradient(180deg, rgba(var(--primary_color_rgb),.86) 0%, rgba(var(--primary_color_rgb),.78) 100%),
            url('../img/hero-mediation.jpg') center center / cover no-repeat;
    }

    .hero-row{
        min-height:auto !important;
        padding-top:70px;
        padding-bottom:70px;
    }

    .section-padding{
        padding:72px 0;
    }

    .hero-card{
        padding-left:0;
        margin-top:2rem;
    }
}

@media (max-width: 575.98px){
    .hero-section h1{
        font-size:2.3rem;
    }

    .hero-lead{
        font-size:1.05rem;
    }

    .cta-panel{
        padding:1.5rem;
    }

    .info-card,
    .service-card,
    .step-card,
    .form-card,
    .contact-card{
        padding:1.4rem;
    }
}

/* ── Logo bar ────────────────────────────────────────────────────── */
.logo-bar-section.section-padding{padding:48px 0;}
.logo-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem;}
.logo-bar img{height:52px;width:auto;max-width:160px;object-fit:contain;opacity:.7;filter:grayscale(1);transition:.2s;}
.logo-bar img:hover{opacity:1;filter:none;}
.logo-bar--scrolling{overflow:hidden;}
.logo-bar--scrolling .logo-bar-track{display:flex;gap:3rem;animation:logoScroll 20s linear infinite;align-items:center;}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cs-dark .logo-bar img{filter:grayscale(1) brightness(2);opacity:.6;}
.cs-dark .logo-bar img:hover{opacity:1;}

/* ── Hero portrait variants ──────────────────────────────────────── */
.hero-portrait{width:100%;height:480px;object-fit:cover;object-position:top center;border-radius:20px;box-shadow:var(--shadow-lg);}
.hero--portrait-right .hero-portrait,
.hero--portrait-left .hero-portrait{height:520px;}
.hero--floating .hero-portrait{width:280px;height:350px;border-radius:20px;margin:2rem auto 0;display:block;}
.hero--floating{padding-bottom:0;}
.hero-floating-img{position:relative;z-index:1;margin-bottom:-120px;text-align:center;}

/* ── Stats row ──────────────────────────────────────────────────── */
.stat-item{text-align:center;}
.stat-item .stat-value{font-size:2rem;font-weight:800;color:var(--accent_color);line-height:1;}
.stat-item .stat-label{font-size:.85rem;color:var(--muted);margin-top:.25rem;}
.stats-row{display:flex;flex-wrap:wrap;gap:2rem;margin-top:1.5rem;}
.hero-section .stat-item .stat-value{color:var(--accent_color);}
.hero-section .stat-item .stat-label{color:rgba(255,255,255,.75);}
/* stat-card: light context default */
.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;box-shadow:var(--shadow);}
.stat-card .stat-value{font-size:2rem;font-weight:800;color:var(--accent_color);line-height:1.1;}
.stat-card .stat-label{font-size:.82rem;color:var(--muted);margin-top:.35rem;line-height:1.4;}
/* stat-card: dark context (hero, cs-dark) */
.hero-section .stat-card,.cs-dark .stat-card{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);box-shadow:none;}
.hero-section .stat-card .stat-label,.cs-dark .stat-card .stat-label{color:rgba(255,255,255,.8);}

/* ── Video section ──────────────────────────────────────────────── */
.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:16px;box-shadow:var(--shadow-lg);}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.video-wrap--centered{max-width:900px;margin:0 auto;}

/* ── Problems section ───────────────────────────────────────────── */
.problem-check{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.6rem;}
.problem-check__icon{color:var(--success);font-size:1.1rem;margin-top:.1rem;flex-shrink:0;}
.problem-pill{display:inline-block;background:#fff;border:1px solid var(--border);border-radius:999px;padding:.35rem .9rem;font-size:.9rem;margin:.25rem;}
.versus-col{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;}
.versus-col--b{background:var(--primary_color);color:#fff;}

/* ── Social links (footer) ──────────────────────────────────────── */
.social-links{display:flex;gap:1rem;align-items:center;margin-top:1rem;}
.social-links a{color:rgba(255,255,255,.7);font-size:1.3rem;transition:.15s;}
.social-links a:hover{color:#fff;}

/* ── Cookie banner ──────────────────────────────────────────────── */
#cookieBanner{position:fixed;bottom:0;left:0;right:0;z-index:99990;background:#1e2a38;color:#fff;padding:14px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font-size:14px;box-shadow:0 -4px 20px rgba(0,0,0,.2);}
#cookieBannerAccept{background:var(--accent_color);color:#fff;border:none;border-radius:10px;padding:8px 20px;font-weight:600;cursor:pointer;white-space:nowrap;}

@media(max-width:991.98px){
    .hero-portrait{height:320px;}
}

/* Inline buttons in rich text content */
.ql-inlinebtn { display:inline-block }
/* Make the Quill dropdown label show "Knop" */
.ql-toolbar .ql-inlinebtn .ql-picker-label::before { content:'Knop'; }
.ql-toolbar .ql-inlinebtn .ql-picker-item[data-value="primary"]::before { content:'Primair'; }
.ql-toolbar .ql-inlinebtn .ql-picker-item[data-value="outline-primary"]::before { content:'Omlijnd'; }
.ql-toolbar .ql-inlinebtn .ql-picker-item[data-value="secondary"]::before { content:'Secundair'; }
.ql-toolbar .ql-inlinebtn .ql-picker-item[data-value="success"]::before { content:'Groen'; }
.ql-toolbar .ql-inlinebtn .ql-picker-item[data-value="warning"]::before { content:'Geel'; }
.ql-toolbar .ql-inlinebtn .ql-picker-item[data-value="danger"]::before { content:'Rood'; }
.ql-toolbar .ql-inlinebtn .ql-picker-item[data-value="link"]::before { content:'Link-stijl'; }
.ql-toolbar .ql-inlinebtn .ql-picker-item[data-value=""]::before { content:'Geen knop'; }