:root{--navy:#12324a;--blue:#1769aa;--bright:#2f8fd7;--sky:#eaf5fc;--ice:#f4f9fc;--ink:#20313d;--muted:#60717d;--line:#d9e5ec;--white:#fff;--accent:#35a3d8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--ice);font-family:"DM Sans",Arial,sans-serif;line-height:1.65}a{color:inherit}.container{width:min(1120px,calc(100% - 48px));margin:auto}.narrow{max-width:820px}
header{position:sticky;top:0;z-index:5;background:#f4f9fcf2;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{font-family:Manrope,sans-serif;font-size:21px;text-decoration:none;font-weight:600;letter-spacing:-.03em;color:var(--navy)}.brand span{color:var(--blue)}.brand b{font-weight:500;color:#78909f}.nav nav{display:flex;gap:25px;align-items:center;font-size:14px}.nav nav a{text-decoration:none}.pill{background:var(--blue);color:#fff!important;padding:10px 18px;border-radius:99px;box-shadow:0 7px 20px #1769aa22}.menu{display:none;background:none;border:0;font-size:24px;color:var(--navy)}
.hero{padding:100px 0 110px;background:linear-gradient(135deg,#eaf5fc 0%,#f8fbfd 58%,#dceefa 100%);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-150px;top:-180px;background:#2f8fd71c}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center;position:relative;z-index:1}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:700;color:#527184;margin:0 0 18px}.hero h1{font-family:Manrope,sans-serif;font-size:clamp(45px,6.3vw,76px);line-height:1.04;letter-spacing:-.055em;font-weight:600;margin:0 0 28px;color:var(--navy)}.hero h1 em{font-style:normal;color:var(--blue)}.lead{font-size:20px;color:#425a68;max-width:700px}.actions{display:flex;gap:25px;align-items:center;margin-top:35px}.button{display:inline-block;padding:14px 22px;border-radius:99px;text-decoration:none;font-weight:600;background:var(--blue);color:#fff;box-shadow:0 10px 25px #1769aa25}.link{font-weight:600;text-decoration:none;color:var(--blue)}.hero-card{background:#ffffffd9;padding:0;border:1px solid #fff;box-shadow:0 20px 60px #12324a16;border-radius:4px;overflow:hidden;min-height:310px}.hero-photo{display:block;width:100%;height:260px;object-fit:cover;object-position:center 28%}.hero-card-content{padding:30px 42px 42px}.quote{font-family:Manrope,sans-serif;font-size:28px;line-height:1.35;color:var(--navy)}.hero-card hr{width:100%;border:0;border-top:1px solid var(--line);margin:30px 0 12px}.hero-card small{color:#5d7381}
.intro,.services,.audience,.mediation,.about,.approach,.contact{padding:100px 0}.intro{background:#fff}.intro h2,.section-head h2,.dark h2,.mediation h2,.about h2,.contact h2,.two h2{font-family:Manrope,sans-serif;font-size:clamp(34px,4.4vw,53px);line-height:1.1;letter-spacing:-.045em;font-weight:600;margin:0 0 28px;color:var(--navy)}.intro p,.audience p,.mediation p,.about p,.contact p{font-size:18px;color:var(--muted)}
.section-head,.two{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:end}.section-head{margin-bottom:55px}.section-head>p{color:var(--muted)}.services{background:var(--ice)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{padding:35px;border:1px solid var(--line);background:#fff;min-height:530px;display:flex;flex-direction:column;border-radius:3px;box-shadow:0 7px 24px #12324a08}.card.featured{background:linear-gradient(150deg,#e2f2fb,#f7fbfd);border-color:#b9d9eb}.card>span{font-size:12px;color:var(--bright);font-weight:700;margin-bottom:35px}.card h3{font-family:Manrope,sans-serif;font-size:28px;line-height:1.1;margin:0 0 5px;color:var(--navy)}.card label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6a8391}.card p{color:var(--muted)}.card li{font-size:14px;color:var(--muted);margin:6px 0}.card a{margin-top:auto;text-decoration:none;font-weight:600;color:var(--blue)}
.audience{background:#fff}.dark{padding:105px 0;background:var(--navy);color:#fff}.dark p{font-size:18px;color:#d6e4ec}.dark .eyebrow{color:#79b8dc}.tag{display:inline-block;margin-top:20px;border:1px solid #ffffff42;padding:8px 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#cbe4f2}
.mediation{background:var(--ice)}.about{background:#fff}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:center}.photo{aspect-ratio:4/5;background:linear-gradient(145deg,#dceefa,#f2f8fb);overflow:hidden;border-radius:3px}.photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}.note{font-size:13px!important;border-top:1px solid var(--line);padding-top:18px}.approach{background:linear-gradient(135deg,#e9f5fc,#d8edf9)}.approach .two{align-items:start}.approach p{font-size:19px;color:#425e6d}.contact{background:var(--ice)}.contact-card{background:#fff;padding:38px;border:1px solid var(--line);box-shadow:0 12px 35px #12324a0b}.contact-card a:not(.button){text-decoration:none;color:var(--blue)}.contact-card .button{margin-top:10px}
footer{background:#0e2638;color:#dcebf3;padding:28px 0}.footer{display:flex;justify-content:space-between;align-items:center}.footer strong{font-family:Manrope,sans-serif;font-size:17px}.footer span{color:#55b3e3}
@media(max-width:800px){.nav nav{display:none}.menu{display:block}.nav.open nav{display:flex;position:absolute;top:76px;left:0;right:0;background:#f4f9fc;padding:20px 24px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}.hero{padding:70px 0}.hero-grid,.section-head,.two,.about-grid{grid-template-columns:1fr;gap:45px}.cards{grid-template-columns:1fr}.intro,.services,.audience,.mediation,.about,.approach,.contact{padding:75px 0}.footer{display:block}.footer small{display:block;margin-top:12px}}

/* Recurring visual identity */
.brand{display:flex;align-items:center;gap:10px}.brand-name{font-family:Manrope,sans-serif;font-size:21px;font-weight:600;letter-spacing:-.03em;color:var(--navy)}.brand-name>span{color:var(--blue)}.brand-name b{font-weight:500;color:#78909f}
.brand-mark{width:31px;height:31px;display:block;border:5px solid #123f70;border-right-color:#2f8fd7;border-bottom-color:#f2d76a;border-radius:50%;transform:rotate(-28deg);position:relative}.brand-mark:after{content:"";position:absolute;inset:4px;border:3px solid transparent;border-top-color:#2f8fd7;border-left-color:#7fc8ec;border-radius:50%}
main{position:relative;overflow:hidden}.side-flow{position:absolute;z-index:0;pointer-events:none;width:145px;height:500px;opacity:.62}.side-flow i{position:absolute;width:165px;height:430px;border:2px solid transparent;border-radius:50%;transform:rotate(-25deg)}.side-flow-left{left:-92px;top:620px}.side-flow-left i:nth-child(1){top:0;border-left-color:#123f70;border-bottom-color:#123f70}.side-flow-left i:nth-child(2){top:32px;border-left-color:#1769aa;border-bottom-color:#1769aa}.side-flow-left i:nth-child(3){top:64px;border-left-color:#2f8fd7;border-bottom-color:#2f8fd7}.side-flow-left i:nth-child(4){top:96px;border-left-color:#7fc8ec;border-bottom-color:#7fc8ec}.side-flow-left i:nth-child(5){top:128px;border-left-color:#f2d76a;border-bottom-color:#f2d76a}
.side-flow-right{right:-96px;top:1380px}.side-flow-right i:nth-child(1){border-right-color:#123f70;border-top-color:#123f70}.side-flow-right i:nth-child(2){top:32px;border-right-color:#2f8fd7;border-top-color:#2f8fd7}.side-flow-right i:nth-child(3){top:64px;border-right-color:#7fc8ec;border-top-color:#7fc8ec}.side-flow-right i:nth-child(4){top:96px;border-right-color:#f2d76a;border-top-color:#f2d76a}
.side-flow:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#f2d76a;box-shadow:0 0 0 7px #f2d76a22}.side-flow-left:after{left:72px;top:475px}.side-flow-right:after{right:72px;top:405px}
.hero,.intro,.services,.audience,.dark,.mediation,.about,.approach,.contact{position:relative;z-index:1}
@media(max-width:800px){.side-flow{opacity:.3;transform:scale(.75)}.side-flow-left{left:-118px}.side-flow-right{right:-118px}.brand-mark{width:28px;height:28px}}
.brand-logo{width:44px;height:44px;display:block;flex:none}
@media(max-width:800px){.brand-logo{width:38px;height:38px}}

/* Decoratieve bogen (blauw/geel) door de site heen; lopen licht over in de volgende sectie */
html{overflow-x:hidden}
.deco{position:relative;overflow-x:clip;overflow-y:visible}
.hero.deco{overflow:hidden}
.deco>.container{position:relative;z-index:2}
.deco:before{content:"";position:absolute;z-index:1;pointer-events:none;width:520px;height:676px;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20520'%3E%3Cdefs%3E%3ClinearGradient%20id='b'%20x1='1'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%231769aa'%20stop-opacity='.75'/%3E%3Cstop%20offset='1'%20stop-color='%237fc8ec'%20stop-opacity='.5'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='y'%20x1='1'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23f2c94c'%20stop-opacity='.9'/%3E%3Cstop%20offset='1'%20stop-color='%23fff1a8'%20stop-opacity='.55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20fill='url%28%23b%29'%20d='M400%2010C200%2030%2030%20170%200%20430C70%20260%20210%20130%20400%20110Z'/%3E%3Cpath%20fill='url%28%23y%29'%20d='M400%20128C215%20148%2085%20255%2012%20470C115%20315%20245%20240%20400%20232Z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask-image:linear-gradient(to right,#000 35%,rgba(0,0,0,.45) 68%,transparent 100%);mask-image:linear-gradient(to right,#000 35%,rgba(0,0,0,.45) 68%,transparent 100%)}
.deco-l:before{left:-200px;top:-90px}
.contact.deco-l:before{left:-230px;top:-210px}
.deco-r:before{right:-200px;bottom:-150px;transform:rotate(180deg)}
.deco-lb:before{left:-200px;bottom:-200px;transform:scaleY(-1)}
.deco-rt:before{width:640px;height:832px;right:-190px;top:-110px;transform:scaleX(-1)}
@media(max-width:800px){.deco:before{width:320px;height:416px}.deco-l:before{left:-170px;top:-60px}.deco-lb:before{left:-170px;bottom:-120px}.deco-r:before{right:-170px;bottom:-120px}.deco-rt:before{width:380px;height:494px;right:-200px;top:-60px}.contact.deco-l:before{left:-170px;top:-100px}}

/* Kop in donkerblauwe sectie leesbaar maken */
.dark h2{color:#fff}

/* Contactformulier (opent achter de knop "Neem contact op") */
.contact-dialog{border:0;padding:0;border-radius:4px;width:min(640px,calc(100% - 32px));max-height:calc(100% - 32px);background:#fff;color:var(--ink);box-shadow:0 30px 80px #12324a45}
.contact-dialog::backdrop{background:#12324a99;backdrop-filter:blur(3px)}
.dialog-body{position:relative;padding:44px 44px 38px;overflow:auto;max-height:calc(100vh - 32px)}
.dialog-close{position:absolute;top:12px;right:14px;width:40px;height:40px;border:0;background:none;font-size:32px;line-height:1;color:var(--muted);cursor:pointer;border-radius:50%}
.dialog-close:hover{background:var(--sky);color:var(--navy)}
.contact-dialog h2{font-family:Manrope,sans-serif;font-size:34px;line-height:1.1;letter-spacing:-.04em;font-weight:600;margin:0 0 10px;color:var(--navy)}
.contact-dialog .eyebrow{margin-bottom:12px}
.dialog-intro{margin:0 0 24px;color:var(--muted)}
.contact-dialog form{display:grid;gap:16px}
.contact-dialog .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-dialog label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--navy)}
.contact-dialog input[type=text],.contact-dialog input[type=email],.contact-dialog input[type=tel],.contact-dialog select,.contact-dialog textarea{font:inherit;font-size:16px;font-weight:400;color:var(--ink);width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:3px;background:var(--ice)}
.contact-dialog textarea{resize:vertical;min-height:120px}
.contact-dialog input:focus,.contact-dialog select:focus,.contact-dialog textarea:focus{outline:2px solid var(--bright);outline-offset:1px;background:#fff}
.contact-dialog .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--muted)}
.contact-dialog .check input{margin-top:4px;flex:none}
.contact-dialog .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contact-dialog .button{border:0;font:inherit;font-weight:600;cursor:pointer;justify-self:start}
.contact-dialog .button:disabled{opacity:.6;cursor:wait}
.form-status{margin:0;font-size:14px;color:var(--muted);min-height:0}
.form-status:empty{display:none}
.form-status.error{color:#a3341f}
.form-status a{color:inherit}
.dialog-done p{color:var(--muted);margin:0 0 24px}
@media(max-width:800px){.dialog-body{padding:36px 22px 26px}.contact-dialog .row{grid-template-columns:1fr}.contact-dialog h2{font-size:28px}}

/* Privacyverklaring */
.legal{padding:80px 0 100px;background:#fff}
.legal .back{margin:0 0 30px;font-size:15px}
.legal a{color:var(--blue)}
.legal h1{font-family:Manrope,sans-serif;font-size:clamp(34px,4.6vw,52px);line-height:1.1;letter-spacing:-.045em;font-weight:600;color:var(--navy);margin:0 0 10px}
.legal .updated{color:var(--muted);font-size:14px;margin:0 0 34px}.legal-subtitle{font-size:16px!important;color:var(--navy)!important;font-weight:600;margin:-4px 0 30px!important}.table-wrap{overflow-x:auto}
.legal h2{font-family:Manrope,sans-serif;font-size:24px;line-height:1.2;letter-spacing:-.03em;font-weight:600;color:var(--navy);margin:44px 0 12px}
.legal p,.legal li{font-size:17px;color:var(--muted)}
.legal ul{padding-left:22px}.legal li{margin:6px 0}
.legal.narrow{max-width:none}.legal .narrow{max-width:820px}
.privacy-table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:14.5px}
.privacy-table th{background:var(--sky);color:var(--navy);text-align:left;padding:11px 12px;font-weight:700;border-bottom:1px solid var(--line)}
.privacy-table td{padding:13px 12px;vertical-align:top;color:var(--muted);border-bottom:1px solid var(--line)}
.privacy-table td:first-child{color:var(--navy);font-weight:600}
.todo{background:#fff3b0;color:#5a4700;padding:0 4px;border-radius:2px}
.footer a{text-decoration:none}.footer a:hover{text-decoration:underline}
@media(max-width:800px){.privacy-table,.privacy-table tbody,.privacy-table tr,.privacy-table td{display:block;width:100%}.privacy-table thead{display:none}.privacy-table tr{border:1px solid var(--line);border-radius:3px;margin:0 0 14px;padding:6px 0;background:var(--ice)}.privacy-table td{border:0;padding:7px 14px}.privacy-table td:before{content:attr(data-label);display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bright);font-weight:700;margin-bottom:2px}.privacy-table td:first-child{font-size:16px}.legal{padding:60px 0 80px}}

/* Dienstpagina's */
.page-hero{padding:80px 0 90px}

/* Op dienstpagina's: het "In het kort"-blok is onderdeel van de hero in plaats van een los kaartje. */
.page-hero .hero-card{background:transparent;border:1px solid var(--navy);box-shadow:none;border-radius:12px;overflow:visible;min-height:0;padding:8px 0 0 34px}
.page-hero .hero-card .eyebrow{margin-bottom:18px}
.page-hero .hero-card .check li{padding:14px 0 14px 30px;border-bottom:1px solid #ffffff99;font-size:17px}
.page-hero .hero-card .check li:last-child{border-bottom:0}
.page-hero .hero-card .check li:before{left:0;top:18px;width:14px;height:14px}
.page-hero .hero-card hr{border-top:1px solid #ffffff99;margin:22px 0 12px}
.page-hero .hero-card small{display:block;color:#527184}
.page-hero h1{font-size:clamp(36px,4.8vw,58px)}
.crumbs{font-size:13px;color:#527184;margin:0 0 26px}.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.hero-card .check{list-style:none;margin:0;padding:0}
.hero-card .check li{position:relative;padding:11px 0 11px 28px;border-bottom:1px solid var(--line);font-size:17px;color:var(--navy)}
.hero-card .check li:last-child{border-bottom:0}
.hero-card .check li:before{content:"";position:absolute;left:0;top:16px;width:12px;height:12px;border-radius:50%;background:url("logo-mark.png") center/contain no-repeat}
.audience.sec-ice{background:var(--ice)}
.related{padding:80px 0;background:#fff}
.related h2{font-family:Manrope,sans-serif;font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-.04em;font-weight:600;margin:0 0 30px;color:var(--navy)}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.related-grid a{display:flex;flex-direction:column;gap:6px;padding:24px;border:1px solid var(--line);border-radius:3px;background:var(--ice);text-decoration:none;color:var(--navy);transition:border-color .2s,box-shadow .2s}
.related-grid a:hover{border-color:var(--bright);box-shadow:0 10px 26px #12324a12}
.related-grid strong{font-family:Manrope,sans-serif;font-size:19px;line-height:1.25;letter-spacing:-.02em}
.related-grid span{font-size:13px;color:var(--muted)}
.card h3 a{color:inherit;font-weight:inherit;text-decoration:none}
.card h3 a:hover{color:var(--blue)}
.dark .link{color:#9fd3f0}
.approach p a,.dark p a:not(.link){color:var(--blue)}
.nav nav a[aria-current=page]{color:var(--blue);font-weight:600}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:22px;padding-top:20px;border-top:1px solid #ffffff1f;font-size:14px}
.footer-links a{color:#b9d3e2;text-decoration:none}.footer-links a:hover{color:#fff;text-decoration:underline}
@media(max-width:1000px){.related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.page-hero{padding:56px 0 64px}.page-hero .hero-card{padding:24px 0 0;border:1px solid var(--navy)}.related{padding:60px 0}.related-grid{grid-template-columns:1fr}}
.related>.container{position:relative;z-index:2}

/* Menu: acht items passen niet naast elkaar tot ca. 1100px, daarom eerder het mobiele menu */
@media(max-width:1100px){.nav nav{display:none}.menu{display:block}.nav.open nav{display:flex;position:absolute;top:76px;left:0;right:0;background:#f4f9fc;padding:20px 24px 26px;flex-direction:column;align-items:flex-start;gap:20px;border-bottom:1px solid var(--line);max-height:calc(100vh - 76px);overflow-y:auto;font-size:16px}}