@import url('fonts/fonts.css');
:root{--blue:#163ff0;--deep:#0e2fc2;--sky:#31aaff;--light:#76cdff;--mid:#087fd6;--ink:#172028;--paper:#eef1f5;--white:#fff;--muted:#57616b;--line:#c9d0da;--display:'Anton','Arial Narrow',Impact,sans-serif;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(to right,rgba(23,32,40,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(23,32,40,.05) 1px,transparent 1px);background-size:124px 124px}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible{outline:3px solid var(--light);outline-offset:4px}
.skip{position:fixed;top:-100px;left:16px;background:var(--ink);color:#fff;padding:10px 14px;z-index:9}.skip:focus{top:10px}
.pagina{max-width:1560px;margin:0 auto;padding:20px}
.disp{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.92}

/* blauwe panelen met lijnraster */
.paneel{position:relative;background:var(--blue);color:#fff;border-radius:6px;overflow:hidden;
  background-image:repeating-linear-gradient(to right,rgba(255,255,255,.16) 0 1px,transparent 1px 124px),repeating-linear-gradient(to bottom,rgba(255,255,255,.16) 0 1px,transparent 1px 124px)}
.paneel::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(to right,transparent 0 3px,var(--blue) 3px 6px);opacity:0;pointer-events:none}

/* kop */
.kopbalk{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 44px}
.merk{display:inline-flex;align-items:center;gap:12px;font-weight:750;font-size:30px;letter-spacing:-.07em;line-height:1}
.merk img{width:38px;height:38px;background:#fff;border-radius:8px;padding:4px}
.merk .punt{color:var(--light)}
.kopnav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600}
.kopnav a:not(.knop){opacity:.9}.kopnav a:not(.knop):hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.knop{display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--blue);font-family:var(--display);text-transform:uppercase;font-size:18px;letter-spacing:.02em;padding:12px 20px;border-radius:4px;transition:transform .2s,background .2s}
.knop:hover{transform:translateY(-2px);background:var(--light);color:var(--ink)}
.knop.donker{background:var(--ink);color:#fff}.knop.donker:hover{background:var(--deep);color:#fff}

/* hero */
.hero{padding:30px 44px 60px}
.hero h1{font-size:clamp(64px,11.4vw,188px);text-align:center;margin:20px 0 40px}
.hero-rij{display:grid;grid-template-columns:1fr minmax(260px,420px) 1fr;align-items:center;gap:0}
.hero-label{display:flex;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.5);padding:22px 10px;font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,1.9vw,28px);letter-spacing:.01em;line-height:1.05}
.hero-label.rechts{justify-content:flex-end;text-align:right}
.hero-label img{width:44px;height:44px;flex:0 0 44px;background:#fff;border-radius:8px;padding:5px}
.hero-foto{background:#fff;padding:14px;border-radius:4px}
.hero-foto img{aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.12);transition:filter .4s}
.hero-foto:hover img{filter:none}
.hero-foto figcaption{color:var(--ink);font-size:13px;padding-top:10px;display:flex;justify-content:space-between;gap:10px}
.hero-onder{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:40px}
.hero-onder p{max-width:640px;font-size:19px;color:#e4eaff}

/* kaders */
.kader{background:#fff;border:1px solid var(--blue);border-radius:6px}
.rij{display:grid;gap:20px;margin-top:20px}
.label{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.label::before{content:"";width:9px;height:9px;background:currentColor}
.nr{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1.5px solid currentColor;font-family:var(--display);font-size:24px;line-height:1}
.hoeknr{position:absolute;top:22px;right:22px;width:112px;height:112px;border:1.5px solid var(--blue);color:var(--blue);display:flex;align-items:flex-end;justify-content:flex-start;padding:8px;font-family:var(--display);font-size:52px;line-height:.9;
  background:linear-gradient(to top right,transparent calc(50% - 1px),var(--blue) calc(50% - 1px),var(--blue) calc(50% + 1px),transparent calc(50% + 1px))}

/* logo's */
.logos{display:flex;align-items:center;justify-content:space-between;gap:34px;padding:26px 36px;overflow-x:auto}
.logos img{height:34px;width:auto;max-width:140px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.logos a:hover img{filter:none;opacity:1}
.logos .label{color:var(--blue);white-space:nowrap}

/* belofte + opgaven */
.belofte-rij{grid-template-columns:minmax(280px,470px) 1fr}
.zij{display:flex;flex-direction:column;gap:20px}
.titelbalk{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--blue);padding:22px 28px}
.titelbalk h2{color:var(--blue);font-size:30px}
.zij-tekst{padding:26px 28px;color:var(--blue);font-size:21px;line-height:1.45}
.erkenningen li{padding:16px 28px;border-top:1px solid var(--line)}
.erkenningen li:first-child{border-top:0}
.erkenningen b{display:block;font-size:16px;color:var(--ink)}
.erkenningen span{font-size:14px;color:var(--muted)}
.erkenningen .noot{font-size:13px;color:var(--muted);padding:14px 28px 22px}
.opgaven{position:relative;padding:56px 56px 50px}
.opgaven>.label{color:var(--blue)}
.opg-lijst{margin-top:26px}
.opg{display:grid;grid-template-columns:72px 1fr;gap:10px 28px;padding:34px 0;border-bottom:1px solid var(--line);color:#c3c8cf;transition:color .25s}
.opg:last-child{border-bottom:0}
.opg h3{font-size:clamp(40px,5.6vw,92px);line-height:.95}
.opg p{grid-column:2;max-width:640px;color:var(--muted);font-size:17px;display:none}
.opg .bewijs{grid-column:2;font-size:14px;color:var(--ink);display:none}
.opg:hover,.opg.aan,.opg:focus-within{color:var(--blue)}
.opg.aan p,.opg.aan .bewijs,.opg:hover p,.opg:hover .bewijs{display:block}
.opg .nr{margin-top:8px}
.opg-ook{margin-top:26px;font-size:16px;color:var(--muted)}
.opg-ook a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}

/* rode draad */
.draad{padding:56px 44px 56px}
.draad h2{font-size:clamp(46px,7vw,112px);max-width:1200px;margin:18px 0 22px}
.draad .intro{max-width:720px;font-size:19px;color:#e4eaff}
.schema{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:34px 0 34px}
.schema span{border:1.5px solid #fff;padding:10px 16px;font-family:var(--display);text-transform:uppercase;font-size:20px;letter-spacing:.02em}
.schema .mid{background:#fff;color:var(--blue)}
.schema i{width:48px;height:1.5px;background:#fff}
.stations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.55);border-left:1px solid rgba(255,255,255,.55)}
.station{position:relative;padding:22px 22px 26px;border-right:1px solid rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.55);display:flex;flex-direction:column;gap:8px;min-height:230px}
.station .jaar{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--light);font-weight:700}
.station b{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:40px;line-height:1}
.station .via{align-self:flex-start;background:#fff;color:var(--blue);font-weight:700;font-size:14px;padding:5px 10px;line-height:1.3}
.station .wat{font-size:15px;color:#e4eaff;line-height:1.5}
.station .snr{position:absolute;top:16px;right:18px;font-family:var(--display);font-size:22px;opacity:.55}
.station.jij{background:#fff;color:var(--blue)}
.station.jij .jaar{color:var(--mid)}.station.jij .via{background:var(--blue);color:#fff}.station.jij .wat{color:var(--ink)}

/* ervaring */
.ervaring{padding:56px 56px 48px;position:relative}
.ervaring>.label{color:var(--blue)}
.ervaring h2,.motor h2,.samen h2{font-size:clamp(46px,6.4vw,104px);color:var(--blue);margin:16px 0 34px}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--blue);border-left:1px solid var(--blue)}
.case{display:flex;flex-direction:column;gap:14px;padding:28px;border-right:1px solid var(--blue);border-bottom:1px solid var(--blue);transition:background .2s}
.case:hover{background:#f2f5ff}
.case .logo{height:40px;display:flex;align-items:center}.case .logo img{max-height:34px;max-width:170px;width:auto}
.case .ctx{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.case h3{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:34px;line-height:1;color:var(--ink)}
.case p{font-size:16px;color:var(--muted)}
.case .meer{margin-top:auto;color:var(--blue);font-weight:700;font-size:14px}
.klein{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:0;border-left:1px solid var(--blue)}
.klein a{padding:20px 28px;border-right:1px solid var(--blue);border-bottom:1px solid var(--blue);display:flex;flex-direction:column;gap:4px}
.klein a:hover{background:#f2f5ff}
.klein b{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:26px;color:var(--ink)}
.klein span{font-size:15px;color:var(--muted)}
.eerder{margin-top:22px;font-size:15px;color:var(--muted)}.eerder a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* motor */
.motor{padding:56px 56px 50px}
.motor>.label{color:var(--blue)}
.motor .intro{max-width:760px;font-size:19px;color:var(--ink);margin-top:-14px}
.modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.module{border:1.5px solid var(--blue);border-radius:4px;padding:22px;display:flex;flex-direction:column;gap:12px;transition:background .2s,color .2s}
.module .nr{color:var(--blue)}
.module b{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:38px;line-height:1;color:var(--blue)}
.module span{font-size:16px;color:var(--muted)}
.module:hover{background:var(--blue)}.module:hover b,.module:hover .nr,.module:hover span{color:#fff}
.data{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;font-size:15px;color:var(--ink)}
.data li::before{content:"";display:inline-block;width:8px;height:8px;background:var(--blue);margin-right:10px;vertical-align:middle}

/* samenwerken */
.samen{padding:56px 56px 50px}
.samen>.label{color:var(--blue)}
.samen .intro{max-width:760px;font-size:18px;color:var(--ink);margin-top:-14px}
.vormen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--blue);border-left:1px solid var(--blue);margin-top:32px}
.vorm{padding:26px;border-right:1px solid var(--blue);border-bottom:1px solid var(--blue)}
.vorm h3{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:32px;line-height:1;color:var(--blue);margin-bottom:14px}
.vorm p{font-size:16px;color:var(--muted)}

/* over */
.over{display:grid;grid-template-columns:minmax(240px,400px) 1fr;gap:0}
.over .foto{padding:20px;border-right:1px solid var(--blue)}
.over .foto img{aspect-ratio:1/1;object-fit:cover;filter:grayscale(1) contrast(1.1);border-radius:3px}
.over .tekst{padding:40px 44px}
.over h2{font-size:clamp(46px,5.4vw,88px);color:var(--blue);margin:14px 0 10px}
.over .rol{font-weight:600;margin-bottom:22px}
.over .quote{font-size:24px;line-height:1.35;color:var(--ink);border-left:4px solid var(--blue);padding-left:20px;margin-bottom:22px}
.over p{color:var(--muted);max-width:820px;margin-bottom:14px}
.over .label{color:var(--blue)}

/* contact */
.contact{padding:60px 44px 50px}
.contact h2{font-size:clamp(52px,8.6vw,150px);margin:18px 0 36px}
.contact-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;align-items:flex-end}
.contact-onder p{max-width:620px;font-size:18px;color:#e4eaff}
.contact-links{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.contact-links .mail{font-family:var(--display);font-size:clamp(28px,3vw,44px);text-transform:none;border-bottom:2px solid #fff;line-height:1.1}
.contact-links .tel{font-size:22px}
.contact-links .li{font-size:15px;text-decoration:underline;text-underline-offset:4px}

.voet{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:26px 8px 10px;font-size:13px;color:var(--muted)}
.voet .merk{color:var(--ink);font-size:24px}.voet .merk img{width:30px;height:30px;background:none;padding:0}.voet .merk .punt{color:var(--blue)}

@media(max-width:1100px){.stations{grid-template-columns:repeat(2,minmax(0,1fr))}.cases,.klein,.vormen{grid-template-columns:1fr}.modules{grid-template-columns:repeat(2,minmax(0,1fr))}.belofte-rij{grid-template-columns:1fr}}
@media(max-width:760px){
  .pagina{padding:10px}
  .kopbalk{padding:18px 18px}.kopnav a:not(.knop){display:none}.knop{font-size:16px;padding:10px 14px}.merk{font-size:25px}.merk img{width:32px;height:32px}
  .hero{padding:10px 18px 36px}.hero h1{font-size:clamp(58px,17vw,96px);text-align:left;margin:10px 0 26px}
  .hero-rij{grid-template-columns:1fr;gap:14px}.hero-label,.hero-label.rechts{justify-content:flex-start;text-align:left;padding:14px 0}
  .hero-foto{order:-1}
  .opgaven,.ervaring,.motor,.samen{padding:34px 20px}.hoeknr{width:72px;height:72px;font-size:34px;top:14px;right:14px}
  .opg{grid-template-columns:52px 1fr;padding:22px 0}.opg .nr{width:40px;height:40px;font-size:20px}.opg p,.opg .bewijs{display:block;grid-column:1/-1}
  .draad{padding:34px 18px}.stations{grid-template-columns:1fr}.station{min-height:0}.schema span{font-size:16px;padding:8px 10px}.schema i{width:18px}
  .modules{grid-template-columns:1fr}
  .over{grid-template-columns:1fr}.over .foto{border-right:0;border-bottom:1px solid var(--blue);max-width:320px}.over .tekst{padding:26px 20px}
  .contact{padding:36px 18px}.contact-links{align-items:flex-start}
  .titelbalk,.zij-tekst,.erkenningen li{padding-left:20px;padding-right:20px}
  .logos{padding:18px 20px;gap:26px}
}
@media(min-width:761px){.hero-rij{grid-template-columns:1fr minmax(240px,330px) 1fr}}
.hero-foto img{aspect-ratio:1/1;object-position:50% 20%}
.kader .noot{font-size:13px;color:var(--muted);padding:14px 28px 22px;border-top:1px solid var(--line)}
@media(max-width:760px){.hero-foto{max-width:300px}.kader .noot{padding:14px 20px 20px}}
.hero-foto img,.over .foto img{width:100%;height:auto}
@media(max-width:760px){.schema{flex-direction:column;align-items:flex-start}.schema i{width:1.5px;height:14px;margin-left:20px}.hero-foto{max-width:260px}}

/* samenwerken als piramide */
.vormen.piramide{display:flex;flex-direction:column;align-items:center;gap:0;border:0;margin-top:32px}
.piramide .vorm{width:100%;border:1.5px solid var(--blue);border-top-width:0;text-align:center;padding:24px 28px}
.piramide .vorm p{max-width:640px;margin:0 auto}
.piramide .top{width:56%;border-top-width:1.5px;background:var(--blue)}
.piramide .top h3,.piramide .top p,.piramide .top .laag{color:#fff}
.piramide .midden{width:78%;background:#f2f5ff}
.piramide .basis{width:100%}
.piramide .laag{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--mid);margin-bottom:8px}
@media(max-width:760px){.piramide .top,.piramide .midden{width:100%}}

/* de rode draad, letterlijk */
.stations-wrap{position:relative}
.draadje{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.draadje path{fill:none;stroke:#ff4b3e;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.stations .station:nth-child(-n+4),.stations .station:nth-child(n+5){border-top-color:transparent}
@media(max-width:1100px){.draadje{display:none}.stations .station{border-top-color:rgba(255,255,255,.55)!important}.stations{border-left:4px solid #ff4b3e}}
@media(max-width:760px){.kopnav .lang{display:none}}
.over .foto{margin:0}
.over .foto img.kleur-rood{filter:none;aspect-ratio:3/4;object-fit:cover;object-position:50% 60%}
.over .foto figcaption{font-size:13px;color:var(--muted);padding-top:10px}

/* fotostrook bij Over Ronald */
.over{grid-template-columns:minmax(300px,520px) 1fr}
.over .fotos{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px;border-right:1px solid var(--blue);align-content:start}
.over .fotos .foto{padding:0;border:0}
.over .fotos img.kleur-rood{aspect-ratio:3/4;object-fit:cover;object-position:50% 35%;border-radius:3px}
.over .fotos figcaption{font-size:12px;line-height:1.4}
@media(max-width:760px){.over{grid-template-columns:1fr}.over .fotos{border-right:0;border-bottom:1px solid var(--blue)}}
.over .fotos.een{grid-template-columns:1fr}
.case-foto{margin:26px 0;max-width:420px}.case-foto img{width:100%;height:auto;border-radius:3px}.case-foto figcaption{font-size:13px;color:var(--muted);padding-top:8px}
@media(min-width:1101px){.stations{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stations .station{border-top-color:transparent}

/* 'rode draad' zichtbaar rood, leesbaar op blauw */
.kopnav a[href*="rode-draad"],.kopnav a[href*="#ronald"]{text-decoration:underline wavy #ff4b3e;text-decoration-thickness:2px;text-underline-offset:7px;opacity:1}
.draad>.label::before{background:#ff4b3e}
.kopnav .knop{gap:0}
.kopnav .knop .lang{margin-right:.3em}
.motor h2,.ervaring h2,.samen h2{line-height:1}
@media(max-width:760px){.opg{color:var(--blue)}}

/* menupaneel */
.paneel{overflow:visible}
.kopbalk{position:relative}
.menu-knop{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--blue);border:0;border-radius:4px;padding:10px 14px;font-family:var(--display);text-transform:uppercase;font-size:18px;letter-spacing:.02em;cursor:pointer;margin-left:12px}
.menu-lijnen{display:inline-flex;flex-direction:column;gap:4px}.menu-lijnen i{display:block;width:26px;height:2px;background:var(--blue)}
.menu-paneel{position:absolute;top:calc(100% - 6px);right:20px;z-index:20;width:min(460px,calc(100vw - 20px));background:#fff;color:var(--ink);border:1.5px solid var(--blue);border-radius:6px;padding:22px 24px 24px;box-shadow:0 18px 40px rgba(23,32,40,.18)}
.menu-kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.menu-label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:14px 0 6px}
.menu-kop .menu-label{margin:0}
.menu-sluit{background:none;border:0;color:var(--blue);font-weight:700;cursor:pointer;font-size:14px}
.menu-hoofd a{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--blue);font-family:var(--display);text-transform:uppercase;font-size:30px;line-height:1;color:var(--blue)}
.menu-hoofd a:hover{background:#f2f5ff}
.menu-hoofd .nr{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1.5px solid var(--blue);font-size:16px}
.menu-meer{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--blue)}
.menu-meer a{display:block;padding:12px 0;border-bottom:1px solid var(--blue);font-weight:700;color:var(--blue);text-transform:uppercase;font-size:14px;letter-spacing:.04em}
.menu-meer li:nth-child(odd) a{border-right:1px solid var(--blue);margin-right:12px}
.menu-cta{margin-top:20px;justify-content:center;width:100%}
@media(max-width:760px){.kopnav .knop{display:none!important}.menu-knop{margin-left:0}.menu-woord{display:none}.menu-paneel{right:10px;left:10px;width:auto}}
.menu-paneel{top:96px!important}@media(max-width:760px){.menu-paneel{top:72px!important}}
@media(max-width:760px){.kopnav .knop{display:inline-flex!important}.kopnav{gap:10px}}

/* WhatsApp: herkenbaar groen met logo */
.knop.wa{background:#25D366;color:#0b1f14;gap:10px}
.knop.wa:hover{background:#1ebe5b;color:#0b1f14}
.wa-ico{width:20px;height:20px;fill:currentColor;flex:0 0 20px}
.contact-links .tel,.contact-wa{display:inline-flex;align-items:center;gap:10px}
.contact-links .tel .wa-ico,.contact-wa .wa-ico{fill:#25D366;width:22px;height:22px}
.kopnav .knop.wa{gap:8px}
.kopnav .knop .lang{margin-right:0}
@media(max-width:760px){.kopnav .wa-woord{display:none}.kopnav .knop.wa{padding:10px 12px}}
/* menu-links: bij aanwijzen wit blijven, onderstrepen */
.kopnav a:not(.knop),.kopnav a:not(.knop):hover,.kopnav a:not(.knop):focus-visible{color:#fff!important;opacity:1}
.kopnav a:not(.knop):hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.kopnav a[href*="rode-draad"]:hover,.kopnav a[href*="#ronald"]:hover{text-decoration:underline wavy #ff4b3e;text-decoration-thickness:2px}

/* Typografie-regel (29-09): twee letters, elk één taak, zoals Patch.
   Anton (400, nooit vet) voor alles wat een kop, label, knop of navigatie is.
   DM Sans alleen voor lopende tekst: 400, en 700 voor nadruk. Geen tussengewichten. */
.kopnav a:not(.knop),.label,.station .jaar,.station .via,.case .ctx,.case .meer,.piramide .laag,
.menu-label,.menu-sluit,.menu-meer a,.over .rol,.knop,.menu-knop{
  font-family:var(--display)!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.04em!important}
.kopnav a:not(.knop){font-size:16px}
.label,.station .jaar,.case .ctx,.piramide .laag,.menu-label{font-size:15px}
.station .via,.case .meer,.menu-sluit,.menu-meer a{font-size:17px}
.over .rol{font-size:22px;color:var(--blue)}
.disp,h1,h2,h3,.knop{font-weight:400}
/* rode draad met Feyenoord: tien stations, 'Jouw merk' als brede eindhalte */
@media(min-width:1101px){.stations .station.jij{grid-column:1/-1;min-height:0}}
/* logo's in de kleine cases, zoals bij de grote */
.klein .klogo{display:flex;align-items:center;height:44px;margin-bottom:6px}
.klein .klogo img{height:40px;width:auto;max-width:170px;object-fit:contain}
/* blok AI in de praktijk: blauw paneel tussen twee witte kaders */
.ai-blok .ai-tekst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;max-width:1100px}
.ai-blok .ai-tekst p{color:#e4eaff;font-size:18px;line-height:1.6;margin:0}
@media(max-width:900px){.ai-blok .ai-tekst{grid-template-columns:1fr;gap:18px}}
.ai-blok{padding:56px 44px}
.ai-blok h2{font-size:clamp(42px,6vw,96px);max-width:1200px;margin:18px 0 28px}
@media(max-width:760px){.ai-blok{padding:34px 18px}}
.ai-blok .ai-tekst a{color:#fff;text-decoration:underline;text-underline-offset:4px}
/* het hele vak: vier onderdelen, bewijs per bedrijf */
.vak{margin:0 0 28px}
.vak-kop{font-size:19px;max-width:760px;margin:0 0 16px}
.vak-rij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--blue);border-left:1px solid var(--blue)}
.vak-rij>div{padding:18px 20px;border-right:1px solid var(--blue);border-bottom:1px solid var(--blue);display:flex;flex-direction:column;gap:6px}
.vak-rij b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:28px;color:var(--blue);line-height:1}
.vak-rij span{font-size:15px;color:var(--muted);line-height:1.5}
@media(max-width:1100px){.vak-rij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.vak-rij{grid-template-columns:1fr}}
@media(min-width:1101px){.vak-rij{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:601px) and (max-width:1100px){.vak-rij>div:last-child{grid-column:1/-1}}
/* piramide omgedraaid (29-09): breedte = omvang van de inzet; interim is de breedste en de blauwe basis */
.piramide .top{background:#fff}
.piramide .top h3{color:var(--blue)}.piramide .top p{color:var(--ink)}.piramide .top .laag{color:var(--mid)}
.piramide .basis{background:var(--blue)}
.piramide .basis h3,.piramide .basis p,.piramide .basis .laag{color:#fff}
/* verbeteringen na contra-lezing samenhang (29-09) */
.modules.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.modules.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.modules.vier{grid-template-columns:1fr}}
.opg{color:#a9b6f2}
.opg h3{font-size:clamp(30px,3.6vw,56px)}
.contact h2{font-size:clamp(44px,6.4vw,108px)}
/* menu zoals Patch: schermhoog wit paneel rechts */
.menu-paneel{position:fixed!important;top:0!important;right:0!important;bottom:0;left:auto!important;width:min(560px,100vw)!important;border:0!important;border-left:1.5px solid var(--blue)!important;border-radius:0!important;padding:36px 44px 40px!important;overflow:auto;z-index:60;box-shadow:-24px 0 60px rgba(10,20,80,.25)}
.menu-hoofd a{font-size:40px;padding:16px 0}
@media(max-width:760px){.menu-paneel{width:100vw!important;padding:24px 20px!important}.menu-hoofd a{font-size:30px}}
/* kopbalk tussen tablet en laptop: tekstlinks weg, WhatsApp en menu blijven (anders schuift de pagina opzij) */
@media(max-width:1100px){.kopnav a:not(.knop){display:none!important}.kopnav{gap:12px}}
@media(max-width:480px){.draad .schema{flex-direction:column;align-items:flex-start;max-width:100%}.draad .schema span{max-width:100%;white-space:normal}.draad .schema i{width:2px;height:14px}}
.draad,.ai-blok{grid-template-columns:minmax(0,1fr)}
@media(max-width:480px){.station b{font-size:clamp(28px,9vw,40px);overflow-wrap:anywhere}}
.ervaring,.motor,.samen,.opgaven{grid-template-columns:minmax(0,1fr)}
.over{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
@media(max-width:760px){.over{grid-template-columns:minmax(0,1fr)}}
@media(max-width:360px){.ervaring .case h3,.vak-rij b{overflow-wrap:anywhere}}
/* korter (29-09): stations zonder beschrijving, compacte lijst op mobiel */
.station{min-height:0}
@media(max-width:760px){.station{padding:12px 16px;gap:4px}.station b{font-size:26px}.station .snr{top:10px;font-size:16px}}
.samen .intro a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
/* 3. rode pennenstreek onder 'aangeraden.' */
.streep{position:relative;display:inline-block}
.streep svg{position:absolute;left:0;right:0;bottom:-.06em;width:100%;height:.16em;overflow:visible}
.streep path{fill:none;stroke:#ff4b3e;stroke-width:9;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1000;stroke-dashoffset:1000;animation:streep 1.1s .5s cubic-bezier(.6,.1,.3,1) forwards}
@keyframes streep{to{stroke-dashoffset:0}}
/* 2. rode draad tekent zichzelf tijdens het scrollen (dash via menu.js) */
@media (prefers-reduced-motion: reduce){.streep path{animation:none;stroke-dashoffset:0}}
/* getallen in de rode draad */
.cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:28px 0 34px;border-top:1px solid rgba(255,255,255,.45)}
.cijfers>div{padding:16px 18px 4px 0;display:flex;flex-direction:column;gap:6px}
.cijfers b{font-family:var(--display);font-weight:400;font-size:clamp(44px,5vw,80px);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cijfers>div>span{font-size:15px;color:#e4eaff;max-width:220px}
@media(max-width:760px){.cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* lopende band */
.band{overflow:hidden;background:#0d1330;color:#fff;border-radius:6px;margin:20px 0 0;padding:14px 0}
.band-rij{display:flex;width:max-content;animation:band 38s linear infinite}
.band-rij span{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.4vw,34px);letter-spacing:.02em;white-space:nowrap}
@keyframes band{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.band-rij{animation:none}}
/* logo's bewegen rustig (geen kermis): één lus, langzaam, stopt onder de muis, stil bij minder beweging */
.logos{justify-content:flex-start;overflow:hidden}
.logo-lus{display:flex;flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-rij{display:flex;align-items:center;gap:64px;padding-right:64px;flex-shrink:0;animation:logolus 55s linear infinite}
.logo-lus:hover .logo-rij{animation-play-state:paused}
@keyframes logolus{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion: reduce){.logo-rij{animation:none}.logo-rij.kopie{display:none}.logo-rij{flex-wrap:wrap;gap:34px}}
/* nooit zijwaarts schuiven, ook niet met een altijd-zichtbare scrollbalk of oudere browsers */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
/* opgaven: onder de muis is er maar één open (niet de gescrolde én de aangewezen tegelijk) */
.opg-lijst:hover .opg.aan:not(:hover){color:#a9b6f2}
.opg-lijst:hover .opg.aan:not(:hover) p,.opg-lijst:hover .opg.aan:not(:hover) .bewijs{display:none}
/* zichtbare focus voor toetsenbordgebruikers */
a:focus-visible,button:focus-visible{outline:3px solid #ff4b3e;outline-offset:3px}
/* Werk uit de praktijk: één raster, dezelfde opbouw per kaart (logo, context, tekst), geen dubbele naam */
.cases+.klein{margin-top:0!important;border-top:0}
.ervaring .cases{margin-bottom:0}
.klein .ctx{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:15px;color:var(--muted)}
.klein .kmerk{font-family:var(--display);font-weight:400;font-size:24px;color:#047857;margin-left:10px;text-transform:none;letter-spacing:0}
.klein .klogo{gap:0}
.case h3{color:var(--blue)}
.klein>a>span:last-child{color:var(--muted)}
#ervaring .klein{margin-top:-20px!important}

/* ===== Typeschaal (29-09): vaste maten in plaats van losse maten per blok =====
   Anton:  kop 164 (alleen hero) · H2 88 · H3 groot 44 · H3 32 · klein 16 · knop 18
   DM Sans: intro 19 · tekst 17 · klein 15 · mini 13 */
.draad h2,#ronald h2,#ai h2,.ervaring h2,.motor h2,.samen h2,.contact h2{font-size:clamp(40px,5.6vw,88px)!important;line-height:.95!important}
.opg h3{font-size:clamp(28px,3vw,44px)!important}
.case h3,.piramide h3,.module b,.station b,.vak-rij b,.zij h2{font-size:32px!important;line-height:1!important}
.label,.station .jaar,.case .ctx,.klein .ctx,.kopnav a:not(.knop),.station .via,.case .meer,.module .nr,.opg .nr,.station .snr,.piramide .laag{font-size:16px!important}
.over .rol{font-size:22px!important}
.contact .mail{font-size:clamp(28px,2.6vw,40px)!important}
.hero-onder p,.intro,.vak-kop,.draad .intro{font-size:19px!important}
.opg p,#ronald .tekst p:not(.quote):not(.rol),.case p,.module span,.piramide p,.ai-tekst p,.contact-onder p,.vak-rij span,.klein a>span:last-child,.cijfers>div>span{font-size:17px!important}
.erkenningen span,.opg .bewijs,.opg-ook,.station .wat{font-size:15px!important}
.noot,.voet,.voet a,.voet span,figcaption,.contact .li{font-size:13px!important}
@media(max-width:760px){.case h3,.piramide h3,.module b,.station b,.vak-rij b,.zij h2{font-size:26px!important}.hero-onder p,.intro,.vak-kop,.draad .intro{font-size:17px!important}}
.voet .merk span{font-size:24px!important}.voet .merk .punt{font-size:inherit!important}
/* erkenningen als smalle strook; opgaven over de volle breedte (29-09) */
.belofte-rij.enkel{grid-template-columns:minmax(0,1fr)!important}
.erk-strook{padding:22px 36px}
.erk-strook ul{list-style:none;margin:12px 0 8px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.erk-strook li{display:flex;flex-direction:column;gap:4px;border-left:3px solid var(--blue);padding-left:14px}
.erk-strook b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:20px;line-height:1.05;color:var(--blue)}
.erk-strook li span{font-size:15px;color:var(--muted)}
.erk-strook .noot{margin:6px 0 0}
@media(max-width:1000px){.erk-strook ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.erk-strook{padding:20px}.erk-strook ul{grid-template-columns:1fr}}
.hero-label.rechts span{line-height:1.15}
/* erkenningen: jaartal steeds op dezelfde plek, bovenaan */
.erk-strook li .jaar{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:16px!important;color:var(--muted)}
.erk-strook li span:last-child{font-size:15px}
/* logo's optisch even groot: vaste hoogte per logo, gecorrigeerd voor vorm */
.logo-rij img{filter:grayscale(1);opacity:.8}
.logo-rij img[alt="RegioBank"]{height:28px!important}

.logo-rij img[alt="Newton Energy Solutions"]{height:30px!important}
.logo-rij img[alt="Feyenoord"]{height:40px!important}
.logo-rij img[alt="Star-shl"]{height:28px!important}
.logo-rij img[alt="ING"]{height:28px!important}
.logo-rij img[alt="G4S"]{height:30px!important}
.logo-rij .kopie img[alt=""]{height:30px}

.logo-rij.kopie a:nth-child(1) img{height:28px!important}.logo-rij.kopie a:nth-child(2) img{height:34px!important}.logo-rij.kopie a:nth-child(3) img{height:30px!important}.logo-rij.kopie a:nth-child(4) img{height:40px!important}.logo-rij.kopie a:nth-child(5) img{height:28px!important}.logo-rij.kopie a:nth-child(6) img{height:28px!important}.logo-rij.kopie a:nth-child(7) img{height:30px!important}
.erk-strook>.label{color:var(--blue)}.erk-strook .noot{padding:10px 0 0!important;border:0!important}
/* AI-blok: vier use cases en wat AI niet doet */
.ai-kern{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,2.2vw,32px);color:#fff;margin:0 0 18px;letter-spacing:.01em}
.ai-lijst{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid rgba(255,255,255,.45)}
.ai-lijst li{padding:16px 20px 18px 0;display:flex;flex-direction:column;gap:6px}
.ai-lijst li+li{padding-left:20px;border-left:1px solid rgba(255,255,255,.45)}
.ai-lijst b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:24px;color:#fff}
.ai-lijst span{font-size:17px;line-height:1.5;color:#e4eaff}
.ai-lijst a,.ai-niet a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ai-niet{font-size:17px!important;line-height:1.55;color:#e4eaff;max-width:900px;margin:0}
.over .kernzin{font-size:19px!important;line-height:1.45;color:var(--ink);font-weight:700;margin:-8px 0 18px;max-width:760px}
@media(max-width:1000px){.ai-lijst{grid-template-columns:1fr 1fr}.ai-lijst li:nth-child(3){padding-left:0;border-left:0}}
@media(max-width:600px){.ai-lijst{grid-template-columns:1fr}.ai-lijst li,.ai-lijst li+li{padding:14px 0;border-left:0;border-top:1px solid rgba(255,255,255,.3)}}
/* AI of mensenwerk per stap */
.module em{font-style:normal;font-size:15px!important;line-height:1.45;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.module em.rol-ai{color:var(--blue)}
.module em.rol-mens{color:var(--ink)}
.module:hover em{color:#fff;border-top-color:rgba(255,255,255,.4)}
.ai-uitleg{font-size:18px!important;line-height:1.55;color:#e4eaff;max-width:900px;margin:0 0 14px}
.ai-uitleg a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* AI-blok leest als slot van Hoe ik werk: kop een maat kleiner */
#ai h2{font-size:clamp(32px,3.6vw,56px)!important}
#ai{padding-block:40px!important}
/* Werk uit de praktijk (30-09): vijf onderdelen als rustige rij woorden, zes gelijke kaarten */
.vak-chips{list-style:none;margin:6px 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.vak-chips li{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:20px;color:var(--blue);border:1.5px solid var(--blue);border-radius:4px;padding:6px 14px}
.cases.zes .case .logo{height:40px}
.cases.zes .case .logo img{max-height:32px;width:auto;max-width:170px}
.cases.zes .case .logo img.logo-rond{max-height:40px}
.cases.zes .case .logo img[alt="Star-shl"]{max-height:28px}
.cases.zes .kmerk{font-family:var(--display);font-weight:400;font-size:26px;color:#047857;margin-left:10px}
.cases.zes .case h3{font-size:28px!important}
.cases.zes .case p{font-size:16px!important}
/* woorden, geen knoppen */
.vak-chips{gap:8px 28px}
.vak-chips li{border:0;padding:0 0 0 18px;position:relative;font-size:24px}
.vak-chips li::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-5px;background:var(--blue)}
/* statement: marketing is meer dan communicatie */
.vak-statement{font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,4.4vw,68px);line-height:.95;color:var(--ink);margin:4px 0 14px;max-width:1100px}
/* waarom je mij inhuurt */
.waarom{margin:6px 0 30px;max-width:1100px}
.waarom-kop{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:16px;color:var(--blue);margin:0 0 10px}
.waarom-lijst{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.waarom-lijst li{border-left:3px solid var(--blue);padding-left:14px;font-size:17px;line-height:1.5;color:var(--ink)}
.waarom-lijst b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:22px;color:var(--blue);margin-bottom:4px}
.waarom-slot{font-size:17px;font-weight:700;color:var(--ink);margin:0}
@media(max-width:900px){.waarom-lijst{grid-template-columns:1fr}}
.sub main.cs>.waarom-strook{padding:24px 32px!important}
.waarom-strook .waarom{margin:0}
/* rode draad op mobiel: een golvend draadje in plaats van een rechte streep */
@media(max-width:1100px){
  .stations{border-left:0!important;position:relative}
  .stations::before{content:"";position:absolute;left:-7px;top:0;bottom:0;width:12px;z-index:2;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='28'%3E%3Cpath d='M6 0 Q13 7 6 14 T6 28' fill='none' stroke='%23ff4b3e' stroke-width='2.5'/%3E%3C/svg%3E") repeat-y}
}

/* Bewijsstrook: cijfers, logo's en erkenningen in één blok */
.bewijs{padding:26px 36px}
.cijfers.licht{margin:0 0 6px;border-top:0;border-bottom:1px solid var(--line,#d6dcf0)}
.cijfers.licht>div{padding:4px 18px 14px 0}
.cijfers.licht b{color:var(--blue);font-size:clamp(40px,4.4vw,68px)}
.cijfers.licht>div>span{color:var(--muted)}
.logos.binnen{padding:14px 0;border-bottom:1px solid var(--line,#d6dcf0);overflow:hidden}
.erk-regel{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.erk-regel b{color:var(--blue);font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.03em}
@media(max-width:760px){.bewijs{padding:20px}}

/* Afwerking oktober 2026: uitlijning en mobiel */

.station .via{margin-top:auto}
@media(min-width:761px){.cs-drie .cs-groot{min-height:2.1em}}
.contact-links .tel{white-space:nowrap}
.opg .bewijs{margin-left:0;padding-left:0}
@media(max-width:760px){.opg,.opg-lijst:hover .opg.aan:not(:hover){color:var(--blue)}}
@media(max-width:640px){.verschil-tabel{display:none}}