/* van Eck centrum voor Mondzorg — site.css
   Tokens, componenten, animaties. Rood en amber nooit getint. Nergens zwart. */

@property --score-i { syntax: '<integer>'; inherits: false; initial-value: 9; }
@property --score-f { syntax: '<integer>'; inherits: false; initial-value: 1; }

:root{
  --red:#E30B11; --midnight:#102A43; --white:#FFFFFF; --amber:#FFBE01;
  --mist:#F3F5F8; --line:#D9DFE6; --field:#8696A7; --muted:#3E5266; --ph:#E3E8EE; --ph-d:#B9C5D2; --navy-2:#1B3A58;
  --font:'Outfit','Sofia Pro',ui-sans-serif,system-ui,sans-serif;
  --hand:'Caveat Brush','Market Pro','Segoe Print',cursive;
  --ease:cubic-bezier(.45,.05,.55,.95); /* ease-in-out: rustig starten én rustig eindigen */
  --r:8px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
main{overflow-x:clip}
body{margin:0;background:var(--white);color:var(--midnight);font-family:var(--font);font-weight:300;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (max-width:640px){body{font-size:17px}}
img,video,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-weight:600;margin:0;line-height:1.15;text-wrap:balance;letter-spacing:-.005em}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
strong,b{font-weight:600}
a{color:var(--midnight);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .3s,text-decoration-color .3s}
a:hover{color:var(--red)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--midnight);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.dark :focus-visible{outline-color:var(--white)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--midnight);color:#fff;padding:10px 16px;border-radius:4px;font-weight:600}
.skip:focus{top:12px;color:#fff}

/* ---------- type ---------- */
.h1{font-size:clamp(38px,5.2vw,64px);line-height:1.06;letter-spacing:-.015em}
.h2{font-size:clamp(28px,3.4vw,44px)}
.h3{font-size:clamp(21px,1.8vw,26px);line-height:1.25}
.h4{font-size:19px;line-height:1.3}
.lead{font-size:clamp(19px,1.6vw,22px);line-height:1.55}
.small{font-size:15px;font-weight:400}
.muted{color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--red)}
.dark .eyebrow,.on-dark .eyebrow{color:#fff}
.hand{font-family:var(--hand);font-weight:400;line-height:1.05;letter-spacing:0;color:var(--red);font-size:clamp(30px,3vw,42px)}
.dark .hand{color:#fff}
.prose{max-width:70ch;display:flex;flex-direction:column;gap:18px}
.prose h2{font-size:clamp(26px,2.6vw,34px);margin-top:28px}
.prose h3{font-size:22px;margin-top:14px}
.prose ul{display:flex;flex-direction:column;gap:10px;list-style:none}
.prose ul li{position:relative;padding-left:28px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.72em;width:10px;height:2px;background:var(--red)}
.prose ol{display:flex;flex-direction:column;gap:10px;padding-left:24px}
.prose a{font-weight:600;text-decoration-color:var(--red);text-decoration-thickness:2px}
.prose a:hover{color:var(--red)}
.callout{border-left:0;background:var(--mist);border-radius:var(--r);padding:22px 26px;display:flex;gap:16px;align-items:flex-start}
.callout svg{flex:none;margin-top:3px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 40px}
.wrap-narrow{width:100%;max-width:860px;margin:0 auto;padding:0 40px}
@media (max-width:640px){.wrap,.wrap-narrow{padding:0 20px}}
.sec{padding:120px 0;position:relative}
.sec-sm{padding:72px 0;position:relative}
@media (max-width:640px){.sec{padding:72px 0}.sec-sm{padding:48px 0}}
.mist{background:var(--mist)}
.dark{background:var(--midnight);color:#fff}
.dark a:not(.btn){color:#fff}
.dark a:not(.btn):hover{color:#fff;text-decoration-thickness:2px}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-sm{display:flex;flex-direction:column;gap:10px}
.stack-lg{display:flex;flex-direction:column;gap:48px}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:48px 72px;align-items:center}
.grid-2-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:48px 72px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:24px}
.split-aside{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:72px;align-items:start}
@media (max-width:960px){.split-aside{grid-template-columns:minmax(0,1fr)}}
.sticky-aside{position:sticky;top:120px;display:flex;flex-direction:column;gap:20px}

/* ---------- photo placeholders (tot de echte foto's er zijn) ---------- */
.ph{position:relative;overflow:hidden;background:var(--ph);color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;font-size:14px;font-weight:400;line-height:1.4;padding:16px;border-radius:inherit}
.ph svg{width:30px;height:30px}
.ph-d{background:var(--ph-d);color:var(--midnight)}
.ph-n{background:var(--navy-2);color:#fff}
.r{border-radius:var(--r);overflow:hidden}
.ar-1{aspect-ratio:1/1}.ar-43{aspect-ratio:4/3}.ar-34{aspect-ratio:3/4}.ar-32{aspect-ratio:3/2}.ar-169{aspect-ratio:16/9}.ar-45{aspect-ratio:4/5}.ar-wide{aspect-ratio:21/9}
.zoom,.parallax,.reveal-clip{overflow:hidden}
.zoom>.ph,.parallax>.ph,.reveal-clip>.ph,.r>.ph{height:100%;width:100%}
.zoom>.ph,.zoom>img{transition:transform 1.35s var(--ease);height:100%;width:100%}

/* ---------- buttons & links ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:4px;border:2px solid transparent;font-weight:600;font-size:17px;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .52s var(--ease),border-color .52s var(--ease),transform .3s}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .68s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;transition:transform .52s var(--ease)}
.btn:hover svg.arr{transform:translateX(4px)}
.btn-red{background:var(--red);color:#fff}.btn-red::before{background:var(--midnight)}.btn-red:hover{color:#fff}
.btn-navy{background:var(--midnight);color:#fff}.btn-navy::before{background:var(--red)}.btn-navy:hover{color:#fff}
.btn-line{background:#fff;color:var(--midnight);border-color:var(--midnight)}.btn-line::before{background:var(--midnight)}.btn-line:hover{color:#fff}
.btn-white{background:#fff;color:var(--midnight)}.btn-white::before{background:var(--red)}.btn-white:hover{color:#fff}
.btn-wline{background:transparent;color:#fff;border-color:#fff}.btn-wline::before{background:#fff}.btn-wline:hover{color:var(--midnight)}
.btn-block{width:100%}
.btn-sm{min-height:44px;padding:0 18px;font-size:16px}
.btn[disabled],.btn.is-disabled{background:var(--line);color:var(--muted);border-color:var(--line);cursor:not-allowed}
.btn[disabled]::before{display:none}
.btn .spin{animation:spin .8s linear infinite}
.tlink{position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--midnight);padding-bottom:4px}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform-origin:left;transition:transform .68s var(--ease)}
.tlink:hover::after{transform:scaleX(.35)}
.tlink:hover{color:var(--red)}
.tlink svg{width:18px;height:18px;transition:transform .52s var(--ease)}
.tlink:hover svg{transform:translateX(5px)}
.dark .tlink{color:#fff}.dark .tlink:hover{color:#fff}

/* ---------- brand elements ---------- */
.label{display:inline-block;background:var(--red);color:#fff;font-weight:600;font-size:clamp(19px,1.8vw,26px);line-height:1.2;padding:7px 22px;letter-spacing:.005em}
.brandmark{display:inline-flex;flex-direction:column;align-items:flex-end;gap:4px}
.brandmark .slogan{font-family:var(--hand);font-size:clamp(24px,2.2vw,32px);line-height:1.1;color:var(--midnight)}
.dark .brandmark .slogan,.brandmark.on-dark .slogan{color:#fff}
.plate{background:var(--midnight);color:#fff;padding:28px 32px}
.overlap{position:relative;padding-bottom:72px}
.overlap>.ph,.overlap>.media,.overlap>.r{width:86%}
.overlap>.plate{position:absolute;right:0;bottom:0;width:60%}
@media (max-width:640px){.overlap>.ph,.overlap>.media,.overlap>.r{width:100%}.overlap>.plate{width:88%}}
.logo{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1}
.logo .w{font-weight:300;font-size:38px;color:var(--red);letter-spacing:.01em;transition:letter-spacing .75s var(--ease)}
.logo .s{font-weight:600;font-size:12.5px;color:var(--midnight);margin-top:5px;letter-spacing:.01em}
.logo:hover .w{letter-spacing:.04em;color:var(--red)}
.logo.white .w,.logo.white .s{color:#fff}
@media (max-width:640px){.logo .w{font-size:30px}.logo .s{font-size:11px}}

/* Giessen-lijn: scheiding tussen secties */
.river{display:block;width:100%;height:56px;overflow:visible}
.river path{fill:none;stroke:var(--midnight);stroke-width:1.5;vector-effect:non-scaling-stroke}
.river .flow{stroke-width:2.5;stroke-dasharray:3 9;stroke-linecap:round;animation:flow 6s linear infinite}
.dark .river path{stroke:#fff}
.river.red path{stroke:var(--red)}

/* ---------- header ---------- */
.topbar{background:var(--midnight);color:#fff;font-size:15px;font-weight:400;position:relative;z-index:41}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{color:#fff;text-decoration:underline}
.tb-l,.tb-r{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.tb-item{display:inline-flex;align-items:center;gap:8px}
.tb-item svg{width:16px;height:16px}
.loc-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:4px;padding:0 12px;min-height:32px;font-size:15px;font-weight:400;cursor:pointer;transition:background .38s,border-color .38s}
.loc-btn:hover{background:rgba(255,255,255,.12);border-color:#fff}
.loc-btn svg{width:16px;height:16px;transition:transform .75s var(--ease)}
.loc-btn:hover svg{transform:rotate(180deg)}
.loc-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:60;background:#fff;color:var(--midnight);border-radius:var(--r);box-shadow:0 18px 50px rgba(16,42,67,.18);padding:10px;min-width:300px;display:flex;flex-direction:column;gap:4px;animation:pop .45s var(--ease)}
.loc-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:#fff;border:0;border-radius:6px;padding:12px 14px;cursor:pointer;color:var(--midnight);font-size:16px;font-weight:600;transition:background .3s}
.loc-opt span{font-weight:300;font-size:14px}
.loc-opt:hover,.loc-opt.on{background:var(--mist)}
.spoed-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(227,11,17,.6);animation:ping 2.4s var(--ease) infinite}
.hdr-wrap{position:sticky;top:-44px;z-index:40}
.mainbar{position:relative;z-index:40;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .45s}
.mainbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:88px}
.nav{display:flex;align-items:center;gap:6px}
.nav-a{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;font-weight:600;font-size:16px;color:var(--midnight);text-decoration:none;background:none;border:0;cursor:pointer}
.nav-a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .52s var(--ease)}
.nav-a:hover::after,.nav-a.cur::after,.dd:focus-within>.nav-a::after,.dd:hover>.nav-a::after{transform:scaleX(1)}
.nav-a:hover{color:var(--midnight)}
.nav-a svg{width:16px;height:16px;transition:transform .52s var(--ease)}
.dd{position:relative}
.dd:hover>.nav-a svg,.dd:focus-within>.nav-a svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:100%;left:0;z-index:50;background:#fff;border-radius:var(--r);box-shadow:0 24px 60px rgba(16,42,67,.16);border:1px solid var(--line);padding:14px;min-width:280px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .38s,transform .52s var(--ease),visibility 0s .52s}
.dd:hover>.dd-panel,.dd:focus-within>.dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .38s,transform .52s var(--ease)}
.dd-panel a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:6px;text-decoration:none;font-weight:400;font-size:16px;color:var(--midnight);transition:background .3s,padding .45s var(--ease)}
.dd-panel a svg{width:16px;height:16px;opacity:0;transform:translateX(-6px);transition:all .45s var(--ease)}
.dd-panel a:hover{background:var(--mist);color:var(--midnight);padding-left:16px}
.dd-panel a:hover svg{opacity:1;transform:none;color:var(--red)}
.mega{left:50%;transform:translate(-50%,10px);width:min(940px,92vw);display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 220px;gap:8px;padding:22px}
.dd:hover>.mega,.dd:focus-within>.mega{transform:translate(-50%,0)}
.mega h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 12px 8px}
.mega-col{display:flex;flex-direction:column}
.mega-cta{background:var(--midnight);color:#fff;border-radius:6px;padding:18px;display:flex;flex-direction:column;gap:10px;justify-content:space-between}
.mega-cta a{color:#fff;padding:0;font-weight:600}
.mega-cta a:hover{background:none;color:#fff;padding-left:0}
.burger{display:none;width:48px;height:48px;border:2px solid var(--midnight);border-radius:4px;background:#fff;color:var(--midnight);align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:22px;height:22px}
.mnav{display:none}
@media (max-width:1060px){
  .nav{display:none}.burger{display:inline-flex}
  .mainbar .wrap{min-height:72px}
  .tb-phones{display:none}
  .mnav{display:flex;flex-direction:column;position:fixed;inset:0;z-index:80;background:#fff;overflow:auto;padding:20px 20px 120px;animation:slideIn .68s var(--ease)}
  .mnav-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}
  .mnav details{border-bottom:1px solid var(--line)}
  .mnav summary,.mnav>a{display:flex;justify-content:space-between;align-items:center;min-height:60px;font-weight:600;font-size:20px;text-decoration:none;color:var(--midnight);list-style:none;cursor:pointer}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav>a{border-bottom:1px solid var(--line)}
  .mnav details a{display:block;padding:10px 0 10px 14px;text-decoration:none;font-size:17px}
}
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(16,42,67,.08)}
  .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:62px;text-decoration:none;font-weight:600;font-size:14px;color:var(--midnight)}
  .mbar a+a{border-left:1px solid var(--line)}
  .mbar a.go{background:var(--red);color:#fff;border-left:0}
  .mbar svg{width:22px;height:22px}
  .footer{padding-bottom:110px!important}
}
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--red);transform-origin:left;transform:scaleX(0);z-index:90;pointer-events:none}

/* ---------- home hero: de Giessen splitst de praktijken ---------- */
.hero{position:relative;background:var(--midnight)}
.hero-stage{position:relative;height:780px;overflow:hidden;background:var(--midnight)}
.half{position:absolute;inset:0;overflow:hidden}
.half-l{clip-path:polygon(0% 0%, 52.03% 0.0%, 54.66% 7.14%, 55.94% 14.29%, 55.54% 21.43%, 53.57% 28.57%, 50.54% 35.71%, 47.24% 42.86%, 44.53% 50.0%, 43.11% 57.14%, 43.36% 64.29%, 45.2% 71.43%, 48.17% 78.57%, 51.48% 85.71%, 54.28% 92.86%, 55.83% 100.0%, 0% 100%)}
.half-r{clip-path:polygon(100% 100%, 56.83% 100.0%, 55.28% 92.86%, 52.48% 85.71%, 49.17% 78.57%, 46.2% 71.43%, 44.36% 64.29%, 44.11% 57.14%, 45.53% 50.0%, 48.24% 42.86%, 51.54% 35.71%, 54.57% 28.57%, 56.54% 21.43%, 56.94% 14.29%, 55.66% 7.14%, 53.03% 0.0%, 100% 0%)}
.media{position:absolute;inset:0;overflow:hidden}
.half-l .media{right:38%}
.half-r .media{left:38%}
.media .ph{position:absolute;inset:0;border-radius:0;justify-content:flex-start;padding-top:330px}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kenburns{animation:kenburns 22s ease-in-out infinite alternate}
.half-r .kenburns{animation-delay:-11s}
.ripples{position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;opacity:.55}
.ripples path{fill:none;stroke:#fff;stroke-width:1.2;stroke-dasharray:40 26;animation:flow 14s linear infinite}
.ripples path:nth-child(2){animation-duration:19s;animation-direction:reverse;opacity:.7}
.ripples path:nth-child(3){animation-duration:24s;opacity:.5}
.river-hero{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.river-hero path{fill:none;stroke:#fff;vector-effect:non-scaling-stroke}
.river-hero .base{stroke-width:1.5;opacity:.45}
.river-hero .flow{stroke-width:3;stroke-dasharray:6 10;stroke-linecap:round;animation:flowLong 3.5s linear infinite}
.river-hero .draw{stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;animation:draw 3.9s var(--ease) .3s forwards}
.river-tag{position:absolute;left:57.5%;top:410px;font-family:var(--hand);color:#fff;font-size:30px;transform:rotate(-8deg);pointer-events:none;animation:bob 6s ease-in-out infinite}
.hero-card{position:absolute;top:60px;left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 48px));background:#fff;padding:40px 48px 36px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;z-index:3}
.hero-card .h1{font-size:clamp(36px,4vw,54px)}
.hero-card .sub{display:block;font-size:clamp(17px,1.5vw,21px);font-weight:400;margin-top:10px;letter-spacing:0}
.hero-plate{position:absolute;bottom:56px;z-index:3;width:min(430px,38vw);background:var(--midnight);color:#fff;padding:30px 34px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.hero-plate.l{left:56px}.hero-plate.r{right:56px}
.hero-plate .pl-k{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;color:#fff;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.scroll-cue i{display:block;width:2px;height:34px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:#fff;animation:drip 1.8s var(--ease) infinite}
@media (max-width:860px){
  .hero-stage{height:auto;min-height:0;display:flex;flex-direction:column}
  .hero-card{position:relative;top:auto;left:auto;transform:none;width:100%;padding:36px 20px 32px;text-align:left;align-items:flex-start}
  .hero-split{position:relative;height:720px}
  .half-l{clip-path:polygon(0% 0%, 100% 0%, 100.0% 51.08%, 90.0% 47.99%, 80.0% 45.51%, 70.0% 44.6%, 60.0% 45.6%, 50.0% 48.12%, 40.0% 51.21%, 30.0% 53.69%, 20.0% 54.6%, 10.0% 53.6%, 0.0% 51.08%)}
  .half-r{clip-path:polygon(0.0% 51.88%, 10.0% 54.4%, 20.0% 55.4%, 30.0% 54.49%, 40.0% 52.01%, 50.0% 48.92%, 60.0% 46.4%, 70.0% 45.4%, 80.0% 46.31%, 90.0% 48.79%, 100.0% 51.88%, 100% 100%, 0% 100%)}
  .half-l .media{right:0;bottom:40%}.half-r .media{left:0;top:40%}
  .media .ph{padding-top:24px;justify-content:center}
  .river-hero.desk{display:none}
  .hero-plate{width:auto;left:16px!important;right:16px!important;padding:20px 22px}
  .hero-plate.l{top:16px;bottom:auto}.hero-plate.r{bottom:16px}
  .hero .media .ph span{display:none}
  .river-tag{left:auto;right:18px;top:50%;font-size:24px;transform:translateY(-130%) rotate(-4deg)}
  .scroll-cue{display:none}
}
@media (min-width:861px){.river-hero.mob{display:none}.hero-split{position:absolute;inset:0}}

/* home: verhaal-paneel schuift over de hero heen */
.story{position:relative;z-index:5;background:#fff;margin-top:-1px}
.story-wave{position:absolute;left:0;right:0;top:-55px;height:56px;width:100%}
.story-wave path{fill:#fff}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:#fff;padding:22px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;gap:0;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee a{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-size:clamp(22px,2.4vw,32px);font-weight:600;text-decoration:none;color:var(--midnight);white-space:nowrap}
.marquee a::after{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--red)}
.marquee a:hover{color:var(--red)}

/* ---------- cards ---------- */
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--midnight);transition:transform .75s var(--ease),box-shadow .75s var(--ease),border-color .45s}
a.card:hover,.card.hov:hover{transform:translateY(-6px);box-shadow:0 24px 50px -18px rgba(16,42,67,.28);border-color:var(--midnight);color:var(--midnight)}
a.card:hover .zoom>.ph,a.card:hover .zoom>img{transform:scale(1.06)}
.card-b{padding:28px;display:flex;flex-direction:column;gap:12px;flex:1}
.card .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px}
.card .go svg{width:18px;height:18px;transition:transform .6s var(--ease)}
a.card:hover .go{color:var(--red)}
a.card:hover .go svg{transform:translateX(6px)}
.card-ico{width:56px;height:56px;border-radius:50%;background:var(--mist);display:flex;align-items:center;justify-content:center;transition:background .6s,color .6s,transform .9s var(--ease)}
.card-ico svg{width:28px;height:28px}
a.card:hover .card-ico,.card.hov:hover .card-ico{background:var(--midnight);color:#fff;transform:rotate(-8deg) scale(1.05)}
.card-list{display:flex;flex-direction:column;gap:2px;list-style:none}
.card-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:400;transition:padding .45s var(--ease),color .3s}
.card-list a svg{width:16px;height:16px;opacity:.4;transition:all .45s var(--ease)}
.card-list a:hover{padding-left:6px;color:var(--red)}
.card-list a:hover svg{opacity:1;transform:translateX(3px)}
.review{background:#fff;border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:14px;margin:0;transition:transform .75s var(--ease),box-shadow .75s}
.review:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 22px 44px -20px rgba(16,42,67,.3)}
.review blockquote{margin:0;display:flex;flex-direction:column;gap:8px}
.review strong{font-size:20px;line-height:1.3}
.review figcaption{margin-top:auto;font-size:15px;font-weight:400;color:var(--muted)}
.stars{display:flex;gap:2px;color:var(--midnight)}
.stars svg{width:18px;height:18px}
.score{font-size:clamp(52px,6vw,76px);font-weight:600;line-height:1;counter-reset:si var(--score-i) sf var(--score-f)}
.score::before{content:counter(si) "," counter(sf)}
.team-card{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ph);display:flex;flex-direction:column}
.team-card .zoom{aspect-ratio:4/5}
.team-card .meta{padding:18px 4px 6px;display:flex;flex-direction:column;gap:2px}
.team-card .meta strong{font-size:19px}
.team-card .more{position:absolute;left:0;right:0;bottom:0;background:var(--midnight);color:#fff;padding:18px 20px;transform:translateY(101%);transition:transform .75s var(--ease);font-size:15px}
.team-card:hover .more,.team-card:focus-within .more{transform:none}
.team-card:hover .zoom>.ph{transform:scale(1.05)}
.team-wrap{background:transparent}
.chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--midnight);border-radius:4px;padding:2px 10px;font-size:14px;font-weight:600;line-height:1.5}
.chip.h::before,.chip.g::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--midnight)}
.chip.g::before{background:transparent;border:2px solid var(--midnight)}
.filters{display:flex;flex-wrap:wrap;gap:10px}
.fbtn{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--midnight);background:#fff;color:var(--midnight);font-size:16px;font-weight:600;cursor:pointer;transition:background .38s,color .38s,transform .3s}
.fbtn:hover{transform:translateY(-2px)}
.fbtn.on{background:var(--midnight);color:#fff}
.news-card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--midnight)}
.news-card .zoom{border-radius:var(--r)}
.news-card .t{font-size:22px;font-weight:600;line-height:1.3;transition:color .38s}
.news-card:hover .t{color:var(--red)}
.news-card:hover .zoom>.ph{transform:scale(1.06)}
.news-card .d{font-size:15px;font-weight:400;color:var(--muted)}
.loc-card .pin{position:relative}
.pin-dot{position:relative;width:18px;height:18px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 2px 8px rgba(16,42,67,.3)}
.pin-dot::before,.pin-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--red);animation:ring 2.6s var(--ease) infinite}
.pin-dot::after{animation-delay:1.3s}
.map{position:relative;background:var(--ph);overflow:hidden}
.map svg.streets{position:absolute;inset:0;width:100%;height:100%}
.map svg.streets path{fill:none;stroke:#fff;stroke-width:6}
.map svg.streets path.w{stroke:#CBD5E0;stroke-width:22}
.map .pin-dot{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%)}
.map .tag{position:absolute;left:50%;top:48%;transform:translate(-50%,-150%);background:var(--midnight);color:#fff;font-size:13px;font-weight:600;padding:4px 10px;border-radius:4px;white-space:nowrap}
.hours{display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:4px;margin:0}
.hours dt{font-weight:600}.hours dd{margin:0}
.hours .today{color:var(--red)}
.info-row{display:flex;gap:14px;align-items:flex-start}
.info-row>svg{flex:none;width:22px;height:22px;margin-top:3px}
.badge-today{display:inline-block;background:var(--midnight);color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:3px;margin-left:8px;vertical-align:2px}

/* steps */
.steps{list-style:none;display:flex;flex-direction:column;counter-reset:st;position:relative}
.steps>li{position:relative;display:grid;grid-template-columns:56px 1fr;gap:24px;padding-bottom:36px}
.steps>li:last-child{padding-bottom:0}
.steps>li::before{counter-increment:st;content:counter(st);width:56px;height:56px;border-radius:50%;background:var(--midnight);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:20px;position:relative;z-index:1;transition:transform .75s var(--ease),background .45s}
.steps>li:hover::before{transform:scale(1.1);background:var(--red)}
.steps>li:not(:last-child)::after{content:"";position:absolute;left:27px;top:60px;bottom:4px;width:2px;background:var(--line)}
.steps h3{font-size:21px;margin-bottom:6px;line-height:1.3}
.steps.on-dark>li::before{background:#fff;color:var(--midnight)}
.steps.on-dark>li:not(:last-child)::after{background:rgba(255,255,255,.25)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:12px 0;font-weight:600;font-size:clamp(18px,1.5vw,20px);cursor:pointer;list-style:none;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary .pm{flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--midnight);position:relative;transition:background .45s,transform .75s var(--ease)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--midnight);transform:translate(-50%,-50%);transition:transform .6s var(--ease),background .45s}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .pm{background:var(--midnight);transform:rotate(180deg)}
.faq details[open] .pm::before,.faq details[open] .pm::after{background:#fff}
.faq details[open] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq .ans{padding:0 56px 26px 0;display:flex;flex-direction:column;gap:12px;max-width:72ch}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .68s var(--ease),content-visibility .68s allow-discrete}
.faq details[open]::details-content{block-size:auto}
:root{interpolate-size:allow-keywords}

/* forms */
.form{display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:7px}
.field label,.lbl,.field legend{font-weight:600;font-size:16px;padding:0}
.field .opt{font-weight:300;color:var(--muted)}
.inp{font-family:inherit;font-size:17px;font-weight:300;color:var(--midnight);min-height:52px;padding:0 16px;border:1.5px solid var(--field);border-radius:4px;background:#fff;width:100%;transition:border-color .3s,box-shadow .3s}
textarea.inp{padding:14px 16px;min-height:130px;resize:vertical;line-height:1.5}
select.inp{appearance:none;padding-right:44px;background:#fff}
.sel{position:relative}
.sel svg{position:absolute;right:14px;top:16px;width:20px;height:20px;pointer-events:none}
.inp:hover{border-color:var(--midnight)}
.inp:focus{outline:none;border-color:var(--midnight);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--midnight)}
.inp.err,.inp[aria-invalid="true"]{border:2px solid var(--red)}
.help{font-size:15px;font-weight:400;color:var(--muted)}
.err-msg{display:flex;gap:8px;align-items:center;color:var(--red);font-weight:400;font-size:15px;animation:shake .4s}
.err-msg svg{width:16px;height:16px;flex:none}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cols-3{display:grid;grid-template-columns:1fr 120px 1fr;gap:14px}
.cols-pc{display:grid;grid-template-columns:2fr 1fr;gap:14px}
@media (max-width:640px){.cols-2,.cols-3,.cols-pc{grid-template-columns:minmax(0,1fr)}}
.choice{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-weight:300}
.choice input{width:22px;height:22px;accent-color:var(--midnight);margin:0;flex:none}
.choices{display:flex;flex-wrap:wrap;gap:4px 28px}
.choices.col{flex-direction:column;gap:2px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.pick{grid-template-columns:minmax(0,1fr)}}
.pick-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px;border:2px solid var(--field);border-radius:var(--r);cursor:pointer;background:#fff;text-align:left;color:var(--midnight);font-size:16px;transition:border-color .38s,background .45s,color .45s,transform .45s var(--ease)}
.pick-card:hover{border-color:var(--midnight);transform:translateY(-3px)}
.pick-card .pt{font-weight:600;font-size:20px}
.pick-card .ring{position:absolute;right:18px;top:20px;width:24px;height:24px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center}
.pick-card.on{background:var(--midnight);border-color:var(--midnight);color:#fff}
.pick-card.on .ring::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff}
.person{border:1.5px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:16px;background:#fff;animation:rise .75s var(--ease)}
.person-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.linkbtn{background:none;border:0;padding:0 4px;min-height:44px;font-size:16px;font-weight:600;color:var(--midnight);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:var(--red)}
.addbtn{border-style:dashed!important}
.progress-steps{display:flex;align-items:center;gap:14px;font-weight:600;font-size:15px}
.progress-steps .bar{flex:1;height:4px;background:var(--line);border-radius:2px;overflow:hidden;max-width:220px}
.progress-steps .bar i{display:block;height:100%;background:var(--red);transition:width .9s var(--ease)}
.alert{border-radius:var(--r);padding:20px 24px;display:flex;gap:14px;align-items:flex-start;animation:rise .6s var(--ease)}
.alert svg{flex:none;width:24px;height:24px;margin-top:2px}
.alert-err{border:2px solid var(--red);background:#fff}
.alert-ok{background:var(--midnight);color:#fff}
.alert-info{background:var(--mist)}
.alert-amber{background:var(--amber);color:var(--midnight)}
.tabs{display:flex;gap:6px;border-bottom:2px solid var(--line);overflow-x:auto}
.tab{min-height:52px;padding:0 20px;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;font-size:17px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .3s,border-color .45s}
.tab:hover{color:var(--midnight)}
.tab.on{color:var(--midnight);border-bottom-color:var(--red)}
.q{display:flex;flex-direction:column;gap:10px;padding:20px 0;border-bottom:1px solid var(--line)}
.q .qt{font-weight:600}
.reveal-in{animation:rise .68s var(--ease)}

/* amber banner */
.banner{background:var(--amber);color:var(--midnight)}
.banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;flex-wrap:wrap;font-size:16px}
.banner a{font-weight:600;color:var(--midnight)}

/* page hero (subpagina's) */
.phero{position:relative;padding:72px 0 0;overflow:hidden}
.phero .crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:15px;font-weight:400;color:var(--muted);margin-bottom:22px}
.phero .crumbs a{color:var(--muted);text-decoration:none}
.phero .crumbs a:hover{color:var(--red)}
.phero .crumbs span[aria-hidden]{opacity:.6}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:end}
@media (max-width:900px){.phero-grid{grid-template-columns:minmax(0,1fr);gap:36px}}
.phero-media{position:relative;aspect-ratio:4/3.4;border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.phero-dark{background:var(--midnight);color:#fff;padding:88px 0 96px}
.phero-dark .crumbs,.phero-dark .crumbs a{color:rgba(255,255,255,.85)}
.phero-dark .crumbs a:hover{color:#fff}
.phero .lead{max-width:60ch}
.bigphone{font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1;text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:16px}
.bigphone svg{width:.8em;height:.8em;animation:ringring 3.2s ease-in-out infinite;transform-origin:50% 50%}
.bigphone:hover{color:var(--red)}
.dark .bigphone:hover{color:#fff;text-decoration:underline}
.cta-band{position:relative;overflow:hidden;background:var(--midnight);color:#fff;border-radius:var(--r);padding:clamp(36px,5vw,72px)}
.cta-band .river-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.35}
.cta-band .river-bg path{fill:none;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:4 10;animation:flow 9s linear infinite}
.cta-band>*:not(.river-bg){position:relative}
.toc{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line)}
.toc a{padding:8px 0 8px 18px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;font-weight:400;font-size:16px;transition:border-color .3s,color .3s,padding .45s var(--ease)}
.toc a:hover{border-left-color:var(--red);padding-left:24px;color:var(--midnight)}
.pricebox{border:1.5px solid var(--midnight);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:14px}
.embed{border:2px dashed var(--field);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px;color:var(--muted);font-size:15px;font-weight:400}
.embed strong{color:var(--midnight);font-size:17px}
.vid-ph{position:relative;background:var(--navy-2);color:#fff;overflow:hidden}
.vid-ph .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:#fff;color:var(--midnight);display:flex;align-items:center;justify-content:center;transition:transform .6s var(--ease)}
.vid-ph .play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:ring 2.6s var(--ease) infinite}
.vid-ph:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.article{max-width:720px;margin:0 auto}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;font-weight:400;color:var(--muted)}

/* footer */
.footer{background:var(--midnight);color:#fff;padding:96px 0 40px;font-size:16px;position:relative;overflow:hidden}
.footer a{color:#fff;text-decoration:none;transition:opacity .3s,padding .45s var(--ease)}
.footer a:hover{color:#fff;text-decoration:underline}
.footer .f-links a{display:inline-block}
.footer .f-links a:hover{padding-left:6px}
.footer h2{font-size:18px;margin-bottom:10px}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:40px}
.f-bottom{border-top:1px solid rgba(255,255,255,.22);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px}
.f-river{position:absolute;left:0;right:0;top:0;height:120px;width:100%;opacity:.3;pointer-events:none}
.f-river path{fill:none;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:4 12;animation:flow 12s linear infinite}
.socials{display:flex;gap:10px}
.socials a{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;transition:background .45s,border-color .45s,transform .6s var(--ease)}
.socials a:hover{background:#fff;color:var(--midnight);border-color:#fff;transform:translateY(-3px);text-decoration:none}
.socials svg{width:20px;height:20px}

/* ---------- keyframes ---------- */
@keyframes flow{to{stroke-dashoffset:-240}}
@keyframes flowLong{to{stroke-dashoffset:-32}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@keyframes bob{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-6px)}}
@keyframes drip{0%{top:-40%}100%{top:100%}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(227,11,17,.55)}70%,100%{box-shadow:0 0 0 10px rgba(227,11,17,0)}}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@keyframes ringring{0%,70%,100%{transform:rotate(0)}74%{transform:rotate(-14deg)}78%{transform:rotate(12deg)}82%{transform:rotate(-10deg)}86%{transform:rotate(8deg)}90%{transform:rotate(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes fadeUp{from{opacity:0;translate:0 48px}to{opacity:1;translate:none}}
@keyframes fadeL{from{opacity:0;translate:-56px 0}to{opacity:1;translate:none}}
@keyframes fadeR{from{opacity:0;translate:56px 0}to{opacity:1;translate:none}}
@keyframes scaleIn{from{opacity:0;scale:.9}to{opacity:1;scale:none}}
@keyframes clipUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes clipR{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes writeOn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -5% 0 0)}}
@keyframes paraY{from{translate:0 -3%;scale:1.07}to{translate:0 3%;scale:1.07}}
@keyframes drawPath{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes countScore{from{--score-i:0;--score-f:0}to{--score-i:9;--score-f:1}} /* Klantenvertellen 9,1 (stand 6-10-2026); bij wijziging hier en regel 4–5 aanpassen */
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hdrShrink{to{box-shadow:0 10px 30px -12px rgba(16,42,67,.25)}}
@keyframes splitL{from{clip-path:polygon(0% 0%, 52.03% 0.0%, 54.66% 7.14%, 55.94% 14.29%, 55.54% 21.43%, 53.57% 28.57%, 50.54% 35.71%, 47.24% 42.86%, 44.53% 50.0%, 43.11% 57.14%, 43.36% 64.29%, 45.2% 71.43%, 48.17% 78.57%, 51.48% 85.71%, 54.28% 92.86%, 55.83% 100.0%, 0% 100%)}to{clip-path:polygon(0% 0%, 45.53% 0.0%, 48.16% 7.14%, 49.44% 14.29%, 49.04% 21.43%, 47.07% 28.57%, 44.04% 35.71%, 40.74% 42.86%, 38.03% 50.0%, 36.61% 57.14%, 36.86% 64.29%, 38.7% 71.43%, 41.67% 78.57%, 44.98% 85.71%, 47.78% 92.86%, 49.33% 100.0%, 0% 100%);transform:translateX(-3%)}}
@keyframes splitR{from{clip-path:polygon(100% 100%, 56.83% 100.0%, 55.28% 92.86%, 52.48% 85.71%, 49.17% 78.57%, 46.2% 71.43%, 44.36% 64.29%, 44.11% 57.14%, 45.53% 50.0%, 48.24% 42.86%, 51.54% 35.71%, 54.57% 28.57%, 56.54% 21.43%, 56.94% 14.29%, 55.66% 7.14%, 53.03% 0.0%, 100% 0%)}to{clip-path:polygon(100% 100%, 63.33% 100.0%, 61.78% 92.86%, 58.98% 85.71%, 55.67% 78.57%, 52.7% 71.43%, 50.86% 64.29%, 50.61% 57.14%, 52.03% 50.0%, 54.74% 42.86%, 58.04% 35.71%, 61.07% 28.57%, 63.04% 21.43%, 63.44% 14.29%, 62.16% 7.14%, 59.53% 0.0%, 100% 0%);transform:translateX(3%)}}
@keyframes splitLm{from{clip-path:polygon(0% 0%, 100% 0%, 100.0% 51.08%, 90.0% 47.99%, 80.0% 45.51%, 70.0% 44.6%, 60.0% 45.6%, 50.0% 48.12%, 40.0% 51.21%, 30.0% 53.69%, 20.0% 54.6%, 10.0% 53.6%, 0.0% 51.08%)}to{clip-path:polygon(0% 0%, 100% 0%, 100.0% 47.48%, 90.0% 44.39%, 80.0% 41.91%, 70.0% 41.0%, 60.0% 42.0%, 50.0% 44.52%, 40.0% 47.61%, 30.0% 50.09%, 20.0% 51.0%, 10.0% 50.0%, 0.0% 47.48%);transform:translateY(-2%)}}
@keyframes splitRm{from{clip-path:polygon(0.0% 51.88%, 10.0% 54.4%, 20.0% 55.4%, 30.0% 54.49%, 40.0% 52.01%, 50.0% 48.92%, 60.0% 46.4%, 70.0% 45.4%, 80.0% 46.31%, 90.0% 48.79%, 100.0% 51.88%, 100% 100%, 0% 100%)}to{clip-path:polygon(0.0% 55.48%, 10.0% 58.0%, 20.0% 59.0%, 30.0% 58.09%, 40.0% 55.61%, 50.0% 52.52%, 60.0% 50.0%, 70.0% 49.0%, 80.0% 49.91%, 90.0% 52.39%, 100.0% 55.48%, 100% 100%, 0% 100%);transform:translateY(2%)}}
@keyframes cardUp{to{transform:translate(-50%,-56px)}}
@keyframes plateL{to{transform:translateX(-24px)}}
@keyframes plateR{to{transform:translateX(24px)}}
@keyframes riverGlow{to{stroke-width:9;opacity:.22}}

/* ---------- scroll-gedreven effecten ----------
   Alleen als de browser het kan en de bezoeker geen beperkte beweging wil.
   Zonder ondersteuning staat alles gewoon in beeld. */
@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  .progress{animation:grow linear both;animation-timeline:scroll(root)}
  .mainbar{animation:hdrShrink linear both;animation-timeline:scroll(root);animation-range:0 160px}
  .reveal{animation:fadeUp ease-in-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .reveal-l{animation:fadeL ease-in-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .reveal-r{animation:fadeR ease-in-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .reveal-s{animation:scaleIn ease-in-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .reveal-clip{animation:clipUp ease-in-out both;animation-timeline:view();animation-range:entry 5% entry 100%}
  .reveal-wipe{animation:clipR ease-in-out both;animation-timeline:view();animation-range:entry 10% entry 100%}
  .stagger>*{animation:fadeUp ease-in-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .stagger>*:nth-child(2){animation-range:entry 8% entry 78%}
  .stagger>*:nth-child(3){animation-range:entry 16% entry 86%}
  .stagger>*:nth-child(4){animation-range:entry 24% entry 94%}
  .stagger>*:nth-child(5){animation-range:entry 30% entry 100%}
  .stagger>*:nth-child(n+6){animation-range:entry 34% entry 100%}
  .hand.write{animation:writeOn ease-in-out both;animation-timeline:view();animation-range:entry 30% entry 100%}
  .parallax>.ph,.parallax>img,.parallax>video{animation:paraY ease-in-out both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .river.drawn path.d{stroke-dasharray:100;animation:drawPath ease-in-out both;animation-timeline:view();animation-range:entry 10% entry 100%}
  .score{animation:countScore ease-in-out both;animation-timeline:view();animation-range:entry 20% entry 100%}
  .label.slide{animation:clipR ease-in-out both;animation-timeline:view();animation-range:entry 20% entry 100%}

  /* home: de rivier splitst de twee praktijken tijdens het scrollen */
  .half-l{animation:splitL linear both;animation-timeline:scroll(root);animation-range:0 320px}
  .half-r{animation:splitR linear both;animation-timeline:scroll(root);animation-range:0 320px}
  .river-hero .glow{animation:riverGlow linear both;animation-timeline:scroll(root);animation-range:0 320px}
  .hero-card{animation:cardUp linear both;animation-timeline:scroll(root);animation-range:0 420px}
  .hero-plate.l{animation:plateL linear both;animation-timeline:scroll(root);animation-range:0 320px}
  .hero-plate.r{animation:plateR linear both;animation-timeline:scroll(root);animation-range:0 320px}
  .scroll-cue{animation:fadeOut linear both;animation-timeline:scroll(root);animation-range:0 120px}
  @media (min-width:861px){.hero-stage{position:sticky;top:88px}}
  @media (max-width:860px){
    .half-l{animation-name:splitLm;animation-range:80px 560px}
    .half-r{animation-name:splitRm;animation-range:80px 560px}
    .hero-card,.hero-plate.l,.hero-plate.r{animation:none}
  }
}
}
@keyframes fadeOut{to{opacity:0}}
.river-hero .glow{stroke-width:2;opacity:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none!important}
}

/* ===== extra's per pagina ===== */
/* inschrijven: postcode smal, woonplaats breed (valt onder 640px terug op .cols-pc = één kolom) */
@media (min-width:641px){.x-inschrijven-pc{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}

/* overons — extra klassen voor Over ons, Missie en Werken bij */

/* Over ons: verticale tijdlijn, de Giessen-lijn tekent zich bij het scrollen */
.x-over-tl{position:relative;display:flex;flex-direction:column;gap:112px;padding:40px 0}
.x-over-tl>svg.river{position:absolute;left:50%;top:0;width:48px;height:100%;transform:translateX(-50%)}
.x-over-tl>svg.river path.d{stroke-width:2}
.x-over-tl-item{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 128px;align-items:center}
.x-over-tl-item::before{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;background:var(--red);border:4px solid #fff;box-shadow:0 0 0 2px var(--midnight);transform:translate(-50%,-50%);z-index:1}
.x-over-tl-item.flip>.x-over-tl-media{order:2}
.x-over-tl-year{display:block;font-size:clamp(72px,9vw,136px);font-weight:600;line-height:.85;letter-spacing:-.04em;color:var(--midnight)}
@media (max-width:860px){
  .x-over-tl{gap:72px}
  .x-over-tl>svg.river{left:0;transform:none}
  .x-over-tl-item{grid-template-columns:minmax(0,1fr);gap:24px;padding-left:56px}
  .x-over-tl-item::before{left:24px;top:30px}
  .x-over-tl-item.flip>.x-over-tl-media{order:0}
}
@keyframes x-over-dot{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}

/* Missie: kernwaarden groot en typografisch */
.x-missie-vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--midnight)}
.x-missie-val{position:relative;padding:36px 32px 40px 0;display:flex;flex-direction:column;gap:16px}
.x-missie-val+.x-missie-val{padding-left:32px;border-left:1px solid var(--line)}
.x-missie-val::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.x-missie-val:hover::before{transform:scaleX(1)}
.x-missie-word{font-size:clamp(44px,4.6vw,68px);overflow-wrap:break-word;font-weight:600;line-height:.95;letter-spacing:-.035em;transition:color .45s,transform .9s var(--ease)}
.x-missie-val:hover .x-missie-word{color:var(--red);transform:translateX(6px)}
@media (max-width:960px){
  .x-missie-vals{grid-template-columns:minmax(0,1fr)}
  .x-missie-val,.x-missie-val+.x-missie-val{padding:28px 0 32px;border-left:0}
  .x-missie-val+.x-missie-val{border-top:1px solid var(--line)}
}

/* Werken bij: gestileerde bestandskeuze (cv-upload) */
.x-werken-file{position:relative;display:flex;align-items:center;gap:16px;padding:18px 20px;border:2px dashed var(--field);border-radius:var(--r);background:#fff;cursor:pointer;transition:border-color .38s,background .38s}
.x-werken-file:hover{border-color:var(--midnight);background:var(--mist)}
.x-werken-file:focus-within{outline:3px solid var(--midnight);outline-offset:3px}
.x-werken-file.has{border-style:solid;border-color:var(--midnight)}
.x-werken-file.err{border:2px solid var(--red)}
.x-werken-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.x-werken-file .ico{flex:none;width:48px;height:48px;border-radius:50%;background:var(--mist);display:flex;align-items:center;justify-content:center;transition:background .45s,color .45s,transform .75s var(--ease)}
.x-werken-file:hover .ico,.x-werken-file.has .ico{background:var(--midnight);color:#fff}
.x-werken-file:hover .ico{transform:translateY(-3px)}
.x-werken-file .ico svg{width:22px;height:22px}

@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  .x-over-tl{view-timeline-name:--xovertl}
  .x-over-tl>svg.river path.d{animation-timeline:--xovertl;animation-range:entry 20% entry 100%}
  .x-over-tl-item::before{animation:x-over-dot ease-in-out both;animation-timeline:view();animation-range:entry 40% entry 100%}
}
}

/* ===== QA-correcties ===== */
h1,h2,h3,.h1,.h2,.h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:640px){
  .h1{font-size:clamp(32px,8.6vw,40px)}
  .btn{white-space:normal;line-height:1.25;padding:12px 20px;text-align:center}
  .tabs{flex-wrap:wrap;overflow-x:visible}
}
@media (max-width:520px){
  .tb-r a[href="Spoed.dc.html"]{display:none}
  .topbar .wrap{flex-wrap:nowrap}
  .loc-btn{font-size:14px;padding:0 10px}
}

.phero .h1{font-size:clamp(34px,4.4vw,58px)}
@media (max-width:640px){.hours{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);column-gap:14px}}
.mega{width:min(1060px,94vw);grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.8fr) 230px}
.mega-col{min-width:0}
.mega-col a{overflow-wrap:anywhere}

/* =====================================================================
   v2: meer rivier, meer beweging, meer hover
   ===================================================================== */

/* ---------- de rivier als vast merkelement ---------- */
.rv{--rv-water:#E9EFF5;--rv-bank:rgba(16,42,67,.5);--rv-cur:rgba(16,42,67,.38);--rv-glint:#E30B11;display:block;width:100%;overflow:visible;pointer-events:none}
.dark .rv,.cta-band .rv,.footer .rv,.phero-dark .rv{--rv-water:rgba(255,255,255,.07);--rv-bank:rgba(255,255,255,.42);--rv-cur:rgba(255,255,255,.5);--rv-glint:#FFFFFF}
.mist .rv{--rv-water:#FFFFFF}
.rv path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.rv .rv-body{fill:var(--rv-water);stroke:none}
.rv .rv-bank{stroke:var(--rv-bank);stroke-width:1.5}
.rv .rv-cur{stroke:var(--rv-cur);stroke-width:1.5;stroke-dasharray:60 24 6 15;animation:rvflow 10s linear infinite}
.rv .rv-cur.b{stroke-dasharray:14 21;animation-duration:7s}
.rv .rv-cur.c{stroke-dasharray:22 8 3 37;animation-duration:13s}
.rv .rv-glint{stroke:var(--rv-glint);stroke-width:2.5;stroke-dasharray:2 208;animation:rvflow 4.5s linear infinite}
.rv .rv-glint.b{animation-duration:6s;animation-delay:-2s}
@keyframes rvflow{to{stroke-dashoffset:-420}}
.rv-div{height:90px;margin:8px 0}
.river-bg.rv{opacity:1;position:absolute;inset:0;width:100%;height:100%}
.cta-band .river-bg path{stroke-dasharray:none;animation:none}
.cta-band .river-bg .rv-cur{stroke-dasharray:60 24 6 15;animation:rvflow 10s linear infinite}
.cta-band .river-bg .rv-cur.b{stroke-dasharray:14 21;animation-duration:7s}
.cta-band .river-bg .rv-cur.c{stroke-dasharray:22 8 3 37;animation-duration:13s}
.cta-band .river-bg .rv-glint{stroke-dasharray:2 208;animation:rvflow 4.5s linear infinite}
.footer .f-river.rv{position:absolute;left:0;right:0;top:-6px;height:140px;opacity:1}
.footer .f-river path{stroke-dasharray:none;animation:none}
.footer .f-river .rv-cur{stroke-dasharray:60 24 6 15;animation:rvflow 12s linear infinite}
.footer .f-river .rv-cur.b{stroke-dasharray:14 21;animation-duration:8s}
.footer .f-river .rv-cur.c{stroke-dasharray:22 8 3 37;animation-duration:15s}
.footer .f-river .rv-glint{stroke-dasharray:2 208;animation:rvflow 5s linear infinite}
.footer .wrap{padding-top:36px}
/* rivier onder elke paginakop */
.phero{isolation:isolate}
.phero>.rv-deco{position:absolute;left:0;right:0;bottom:0;height:200px;z-index:-1}
.phero>.wrap,.phero>div{position:relative}
.phero>.rv-deco{position:absolute}

/* Over ons: rechte, rustige rivier met de bolletjes precies op de middenlijn */
.x-over-tl>svg.rv-vert{position:absolute;left:50%;top:0;width:120px;height:100%;transform:translateX(-50%)}
.x-over-tl-item::before{width:26px;height:26px;border:5px solid #fff;box-shadow:0 0 0 2px var(--midnight),0 0 0 10px rgba(255,255,255,.0)}
@media (max-width:860px){
  .x-over-tl>svg.rv-vert{left:-36px;transform:none}
  .x-over-tl-item::before{left:24px}
}

/* ---------- home: video-achtergrond, de Giessen splitst ---------- */
.hero-stage{height:min(800px,calc(100svh - 88px));min-height:640px}
.half-l{clip-path:polygon(0% 0%, 50.33% 0.0%, 52.69% 6.25%, 54.07% 12.5%, 54.19% 18.75%, 53.03% 25.0%, 50.82% 31.25%, 48.01% 37.5%, 45.15% 43.75%, 42.83% 50.0%, 41.5% 56.25%, 41.43% 62.5%, 42.65% 68.75%, 44.89% 75.0%, 47.72% 81.25%, 50.56% 87.5%, 52.85% 93.75%, 54.13% 100.0%, 0% 100%)}
.half-r{clip-path:polygon(100% 100%, 58.53% 100.0%, 57.25% 93.75%, 54.96% 87.5%, 52.12% 81.25%, 49.29% 75.0%, 47.05% 68.75%, 45.83% 62.5%, 45.9% 56.25%, 47.23% 50.0%, 49.55% 43.75%, 52.41% 37.5%, 55.22% 31.25%, 57.43% 25.0%, 58.59% 18.75%, 58.47% 12.5%, 57.09% 6.25%, 54.73% 0.0%, 100% 0%)}
.half-l .media{right:36%}
.half-r .media{left:36%}
.hero .media .ph{justify-content:flex-start;padding-top:96px}
.hero-water{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero-water svg{position:absolute;inset:0;width:100%;height:100%}
.hero-water path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.hero-water .cur{stroke:rgba(255,255,255,.5);stroke-width:1.5;stroke-dasharray:60 24 6 15;animation:rvflow 9s linear infinite}
.hero-water .cur.b{stroke:#fff;stroke-width:2.5;stroke-dasharray:14 21;animation-duration:5s}
.hero-water .cur.c{stroke-dasharray:22 8 3 37;animation-duration:12s}
.hero-water .glint{stroke:#fff;stroke-width:3;stroke-dasharray:2 208;animation:rvflow 3.5s linear infinite}
.hero-water .w1{transform:translateX(-1.15%)}
.hero-water .w3{transform:translateX(1.15%)}
.hero-water .w4{transform:translateX(-.5%)}
.hero-water .draw{stroke:#fff;stroke-width:2.5;stroke-dasharray:100;stroke-dashoffset:100;animation:draw 3.3s var(--ease) .45s forwards,fadeOut .9s 3.9s forwards}
.hero-water.mob{display:none}
.hero-card{top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100% - 48px));padding:44px 52px 40px;box-shadow:0 30px 60px -30px rgba(16,42,67,.45)}
.hero-card .hero-pick{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px;grid-template-columns:none}
.hero-card .pick-k{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.place-tag{position:absolute;bottom:40px;z-index:2;display:inline-flex;align-items:center;gap:12px;background:var(--midnight);color:#fff;text-decoration:none;font-weight:600;font-size:17px;padding:14px 20px;border-radius:4px;transition:background .45s,transform .6s var(--ease),padding .6s var(--ease)}
.place-tag small{display:block;font-weight:300;font-size:14px;opacity:.85}
.place-tag svg{width:18px;height:18px;transition:transform .6s var(--ease)}
.place-tag:hover{background:var(--red);color:#fff;transform:translateY(-3px);padding-right:26px}
.place-tag:hover svg{transform:translateX(5px)}
.place-tag.pt-l{left:40px}.place-tag.pt-r{right:40px}
.river-tag{left:auto;right:auto;top:auto;bottom:118px;left:calc(50% + 30px)}
@keyframes splitL{from{clip-path:polygon(0% 0%, 50.33% 0.0%, 52.69% 6.25%, 54.07% 12.5%, 54.19% 18.75%, 53.03% 25.0%, 50.82% 31.25%, 48.01% 37.5%, 45.15% 43.75%, 42.83% 50.0%, 41.5% 56.25%, 41.43% 62.5%, 42.65% 68.75%, 44.89% 75.0%, 47.72% 81.25%, 50.56% 87.5%, 52.85% 93.75%, 54.13% 100.0%, 0% 100%)}to{clip-path:polygon(0% 0%, 44.53% 0.0%, 46.89% 6.25%, 48.27% 12.5%, 48.39% 18.75%, 47.23% 25.0%, 45.02% 31.25%, 42.21% 37.5%, 39.35% 43.75%, 37.03% 50.0%, 35.7% 56.25%, 35.63% 62.5%, 36.85% 68.75%, 39.09% 75.0%, 41.92% 81.25%, 44.76% 87.5%, 47.05% 93.75%, 48.33% 100.0%, 0% 100%);transform:translateX(-2.5%)}}
@keyframes splitR{from{clip-path:polygon(100% 100%, 58.53% 100.0%, 57.25% 93.75%, 54.96% 87.5%, 52.12% 81.25%, 49.29% 75.0%, 47.05% 68.75%, 45.83% 62.5%, 45.9% 56.25%, 47.23% 50.0%, 49.55% 43.75%, 52.41% 37.5%, 55.22% 31.25%, 57.43% 25.0%, 58.59% 18.75%, 58.47% 12.5%, 57.09% 6.25%, 54.73% 0.0%, 100% 0%)}to{clip-path:polygon(100% 100%, 64.33% 100.0%, 63.05% 93.75%, 60.76% 87.5%, 57.92% 81.25%, 55.09% 75.0%, 52.85% 68.75%, 51.63% 62.5%, 51.7% 56.25%, 53.03% 50.0%, 55.35% 43.75%, 58.21% 37.5%, 61.02% 31.25%, 63.23% 25.0%, 64.39% 18.75%, 64.27% 12.5%, 62.89% 6.25%, 60.53% 0.0%, 100% 0%);transform:translateX(2.5%)}}
@keyframes spreadL{to{transform:translateX(-5.5%)}}
@keyframes spreadR{to{transform:translateX(5.5%)}}
@keyframes spreadL2{to{transform:translateX(-2.6%)}}
@keyframes cardUp{to{transform:translate(-50%,calc(-50% - 170px))}}
@keyframes heroInL{from{opacity:0;transform:translateX(-8%)}to{opacity:1;transform:none}}
@keyframes heroInR{from{opacity:0;transform:translateX(8%)}to{opacity:1;transform:none}}
@keyframes heroCard{from{opacity:0;transform:translate(-50%,calc(-50% + 40px))}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes tagIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.half-l .media{animation:heroInL 2.1s var(--ease) both}
.half-r .media{animation:heroInR 2.1s var(--ease) .15s both}
.place-tag{animation:tagIn 1.35s var(--ease) 1.65s both}
.place-tag.pt-r{animation-delay:1.25s}
@media (min-width:861px){.hero-card{animation:heroCard 1.65s var(--ease) .83s both}}
@media (max-width:860px){
  .hero-stage{height:auto;min-height:0}
  .half-l{clip-path:polygon(0% 0%, 100% 0%, 100.0% 49.88%, 91.67% 47.29%, 83.33% 45.0%, 75.0% 43.62%, 66.67% 43.52%, 58.33% 44.73%, 50.0% 46.92%, 41.67% 49.51%, 33.33% 51.8%, 25.0% 53.18%, 16.67% 53.28%, 8.33% 52.07%, 0.0% 49.88%)}
  .half-r{clip-path:polygon(0.0% 53.08%, 8.33% 55.27%, 16.67% 56.48%, 25.0% 56.38%, 33.33% 55.0%, 41.67% 52.71%, 50.0% 50.12%, 58.33% 47.93%, 66.67% 46.72%, 75.0% 46.82%, 83.33% 48.2%, 91.67% 50.49%, 100.0% 53.08%, 100% 100%, 0% 100%)}
  .half-l .media{right:0;bottom:40%}.half-r .media{left:0;top:40%}
  .hero-split{height:620px}
  .hero-water.desk{display:none}.hero-water.mob{display:block}
  .hero-water.mob .w1{transform:translateY(-1%)}
  .hero-water.mob .w3{transform:translateY(1%)}
  .hero-water.mob .w4{transform:translateY(-.4%)}
  .hero-card{transform:none;box-shadow:none;padding:36px 20px 28px;width:100%;left:auto;top:auto}
  .hero-card .hero-pick{justify-content:flex-start}
  .place-tag{font-size:16px;padding:12px 16px}
  .place-tag.pt-l{top:20px;bottom:auto;left:16px}
  .place-tag.pt-r{bottom:20px;right:16px}
  .river-tag{left:auto;right:16px;bottom:auto;top:calc(50% - 46px)}
  .half-l .media,.half-r .media{animation-name:fadeIn}
}
@keyframes splitLm{from{clip-path:polygon(0% 0%, 100% 0%, 100.0% 49.88%, 91.67% 47.29%, 83.33% 45.0%, 75.0% 43.62%, 66.67% 43.52%, 58.33% 44.73%, 50.0% 46.92%, 41.67% 49.51%, 33.33% 51.8%, 25.0% 53.18%, 16.67% 53.28%, 8.33% 52.07%, 0.0% 49.88%)}to{clip-path:polygon(0% 0%, 100% 0%, 100.0% 46.48%, 91.67% 43.89%, 83.33% 41.6%, 75.0% 40.22%, 66.67% 40.12%, 58.33% 41.33%, 50.0% 43.52%, 41.67% 46.11%, 33.33% 48.4%, 25.0% 49.78%, 16.67% 49.88%, 8.33% 48.67%, 0.0% 46.48%);transform:translateY(-1.5%)}}
@keyframes splitRm{from{clip-path:polygon(0.0% 53.08%, 8.33% 55.27%, 16.67% 56.48%, 25.0% 56.38%, 33.33% 55.0%, 41.67% 52.71%, 50.0% 50.12%, 58.33% 47.93%, 66.67% 46.72%, 75.0% 46.82%, 83.33% 48.2%, 91.67% 50.49%, 100.0% 53.08%, 100% 100%, 0% 100%)}to{clip-path:polygon(0.0% 56.48%, 8.33% 58.67%, 16.67% 59.88%, 25.0% 59.78%, 33.33% 58.4%, 41.67% 56.11%, 50.0% 53.52%, 58.33% 51.33%, 66.67% 50.12%, 75.0% 50.22%, 83.33% 51.6%, 91.67% 53.89%, 100.0% 56.48%, 100% 100%, 0% 100%);transform:translateY(1.5%)}}
@keyframes spreadTm{to{transform:translateY(-3.6%)}}
@keyframes spreadBm{to{transform:translateY(3.6%)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- binnenkomst van elke pagina (eenmalig bij inladen) ---------- */
@keyframes loadUp{from{opacity:0;translate:0 28px}to{opacity:1;translate:none}}
@keyframes loadMask{from{clip-path:inset(0 0 100% 0);translate:0 24px}to{clip-path:inset(0 0 -10% 0);translate:none}}
@keyframes loadZoom{from{scale:1.18;opacity:.3}to{scale:none;opacity:1}}
@keyframes loadLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes loadDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(10deg)}}
@keyframes starPop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-10deg)}100%{transform:scale(1)}}
@keyframes shine{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(220%) skewX(-20deg)}}
@media (prefers-reduced-motion: no-preference){
  .phero .crumbs{animation:loadUp 1.05s var(--ease) both}
  .phero .eyebrow{animation:loadUp 1.05s var(--ease) .12s both}
  .phero .eyebrow::before{transform-origin:left;animation:loadLine 1.2s var(--ease) .6s both}
  .phero .hand{animation:writeOn 1.65s var(--ease) .45s both}
  .phero h1{animation:loadMask 1.5s var(--ease) .18s both}
  .phero .lead{animation:loadUp 1.35s var(--ease) .48s both}
  .phero .row,.phero .progress-steps,.phero .meta-row{animation:loadUp 1.35s var(--ease) .69s both}
  .phero .phero-media>.ph,.phero .r>.ph{animation:loadZoom 2.4s var(--ease) .22s both}
  .phero>.rv-deco .rv-bank{stroke-dasharray:100;animation:loadDraw 3.3s var(--ease) .3s both}
  .phero>.rv-deco .rv-body{animation:fadeIn 1.6s ease .6s both}
  .topbar{animation:fadeIn .6s ease both}
  .mainbar .logo{animation:loadUp 1.2s var(--ease) both}
  .nav>*{animation:loadUp 1.05s var(--ease) both}
  .nav>*:nth-child(2){animation-delay:.05s}.nav>*:nth-child(3){animation-delay:.1s}.nav>*:nth-child(4){animation-delay:.15s}.nav>*:nth-child(5){animation-delay:.2s}.nav>*:nth-child(6){animation-delay:.28s}
  .story .eyebrow::before{transform-origin:left}
}

/* ---------- automatische scroll-effecten op alle pagina's ---------- */
@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  :where(main .sec, main .sec-sm) :where(h2.h2, .h2, .card, .review, .news-card, .team-card, .steps>li, .faq details, .pricebox, .callout, .embed, .vid-ph, .map, .alert, .cta-band, .person, .q, blockquote, figure){animation:fadeUp ease-in-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  :where(main .sec, main .sec-sm) :where(.r, .zoom){animation:clipUp ease-in-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  :where(main .sec, main .sec-sm) :where(.eyebrow)::before{transform-origin:left;animation:loadLine ease-in-out both;animation-timeline:view();animation-range:entry 20% entry 100%}
  :where(main .sec, main .sec-sm) :where(.hand){animation:writeOn ease-in-out both;animation-timeline:view();animation-range:entry 30% entry 100%}
  :where(main .sec, main .sec-sm) :where(.prose)>:where(p, ul, ol, h2, h3){animation:fadeUp ease-in-out both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .rv.drawn .rv-bank,.rv-div .rv-bank{stroke-dasharray:100;animation:drawPath ease-in-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .rv.drawn .rv-body,.rv-div .rv-body{animation:fadeIn ease-in-out both;animation-timeline:view();animation-range:entry 20% entry 100%}
  .x-over-tl{view-timeline-name:--xovertl}
  .x-over-tl>svg.rv-vert .rv-bank{stroke-dasharray:100;animation:drawPath linear both;animation-timeline:--xovertl;animation-range:entry 10% entry 100%}
  .x-over-tl>svg.rv-vert .rv-body{animation:fadeIn linear both;animation-timeline:--xovertl;animation-range:entry 10% entry 60%}
  .footer .f-grid>*{animation:fadeUp ease-in-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  .footer .f-grid>*:nth-child(2){animation-range:entry 8% entry 88%}
  .footer .f-grid>*:nth-child(3){animation-range:entry 16% entry 96%}
  .footer .f-grid>*:nth-child(4){animation-range:entry 24% entry 100%}
  .footer .label{animation:clipR ease-in-out both;animation-timeline:view();animation-range:entry 30% entry 100%}

  /* home hero */
  .hero-water.desk .w1{animation:spreadL linear both;animation-timeline:scroll(root);animation-range:0 340px}
  .hero-water.desk .w3{animation:spreadR linear both;animation-timeline:scroll(root);animation-range:0 340px}
  .hero-water.desk .w4{animation:spreadL2 linear both;animation-timeline:scroll(root);animation-range:0 340px}
  .half-l,.half-r{animation-range:0 340px}
  .hero-card{animation:heroCard 1.65s var(--ease) .83s both,cardUp linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 420px;animation-composition:replace}
  @media (max-width:860px){
    .hero-card{animation:loadUp 1.35s var(--ease) both}
    .hero-water.mob .w1{animation:spreadTm linear both;animation-timeline:scroll(root);animation-range:60px 520px}
    .hero-water.mob .w3{animation:spreadBm linear both;animation-timeline:scroll(root);animation-range:60px 520px}
    .half-l{animation-name:splitLm;animation-range:60px 520px}
    .half-r{animation-name:splitRm;animation-range:60px 520px}
  }
}
}

/* ---------- hover-effecten ---------- */
.btn{transition:color .52s var(--ease),border-color .52s var(--ease),transform .52s var(--ease),box-shadow .52s var(--ease)}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 26px -12px rgba(16,42,67,.55)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:rgba(255,255,255,.22);transform:translateX(-120%) skewX(-20deg);pointer-events:none}
.btn:hover::after{animation:shine 1.2s var(--ease)}
.btn-line::after,.btn-wline::after,.btn-white::after{background:rgba(255,255,255,.18)}
.btn:hover svg:not(.arr):not(.spin){animation:wiggle .5s ease}
.btn[disabled]:hover{transform:none;box-shadow:none}
.tlink::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--midnight);transform:scaleX(0);transform-origin:right;transition:transform .75s var(--ease) .08s}
.tlink:hover::before{transform:scaleX(1);transform-origin:left}
.dark .tlink::before{background:#fff}
/* kaarten: rode lijn veegt over de bovenkant */
a.card::before,.card.hov::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .83s var(--ease);z-index:2}
a.card:hover::before,.card.hov:hover::before{transform:scaleX(1)}
.card.hov{transition:transform .75s var(--ease),box-shadow .75s var(--ease),border-color .45s}
.card.hov:hover{transform:translateY(-6px);box-shadow:0 24px 50px -18px rgba(16,42,67,.28);border-color:var(--midnight)}
a.card h3,a.card .h3,a.card .h4{transition:color .45s}
a.card:hover h3,a.card:hover .h3,a.card:hover .h4{color:var(--red)}
/* reviews: aanhalingsteken, sterren en rode onderlijn */
.review{position:relative;overflow:hidden;border:1px solid transparent;transition:transform .75s var(--ease),box-shadow .75s var(--ease),border-color .45s}
.review::before{content:"\201C";position:absolute;right:20px;top:-14px;font-size:150px;font-weight:600;line-height:1;color:#E3E8EE;transition:color .6s,transform .9s var(--ease);pointer-events:none}
.review::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.review:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 26px 50px -22px rgba(16,42,67,.35);border-color:var(--line)}
.review:hover::before{color:var(--red);transform:translateY(8px) scale(1.08)}
.review:hover::after{transform:scaleX(1)}
.review>*{position:relative}
.review:hover .stars svg{animation:starPop .75s var(--ease) both}
.review:hover .stars svg:nth-child(2){animation-delay:.06s}.review:hover .stars svg:nth-child(3){animation-delay:.12s}.review:hover .stars svg:nth-child(4){animation-delay:.18s}.review:hover .stars svg:nth-child(5){animation-delay:.24s}
/* nieuws, team, faq, chips, kaartjes */
.news-card .t{background:linear-gradient(var(--red),var(--red)) no-repeat 0 100%/0 2px;transition:background-size .75s var(--ease),color .38s;padding-bottom:2px}
.news-card:hover .t{background-size:100% 2px}
.news-card .d{transition:transform .6s var(--ease)}
.news-card:hover .d{transform:translateX(6px)}
.team-card{transition:transform .75s var(--ease),box-shadow .75s}
.team-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -22px rgba(16,42,67,.45)}
.faq summary{position:relative;transition:color .3s,padding .52s var(--ease)}
.faq summary:hover{padding-left:12px}
.faq summary::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;background:var(--red);transform:translateY(-50%);transition:height .52s var(--ease)}
.faq summary:hover::before{height:28px}
.chip{transition:background .38s,color .38s}
.chip:hover{background:var(--midnight);color:#fff}
.chip:hover::before{background:#fff;border-color:#fff}
.card-ico svg,.info-row>svg{transition:transform .75s var(--ease)}
.info-row:hover>svg{transform:scale(1.15) rotate(-6deg);color:var(--red)}
.pricebox{transition:box-shadow .6s,transform .6s var(--ease)}
.pricebox:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(16,42,67,.4)}
.cta-band{transition:transform .9s var(--ease),box-shadow .9s}
.cta-band:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(16,42,67,.6)}
.r,.zoom{position:relative}
.r>.ph{transition:transform 1.5s var(--ease)}
.r:hover>.ph{transform:scale(1.04)}
.label{transition:transform .6s var(--ease)}
.brandmark:hover .label{transform:translateX(-6px) rotate(-1.5deg)}
.steps>li h3{transition:color .45s}
.steps>li:hover h3{color:var(--red)}
.pick-card{transition:border-color .38s,background .45s,color .45s,transform .6s var(--ease),box-shadow .6s}
.pick-card:hover{box-shadow:0 16px 30px -20px rgba(16,42,67,.45)}
.inp{transition:border-color .3s,box-shadow .38s,background .3s}
.inp:hover{background:#FBFCFD}
.fbtn{transition:background .38s,color .38s,transform .45s var(--ease),box-shadow .45s}
.fbtn:hover{box-shadow:0 10px 20px -14px rgba(16,42,67,.6)}
.tab{position:relative}
.tab::after{content:"";position:absolute;left:20px;right:20px;bottom:-2px;height:3px;background:var(--midnight);transform:scaleX(0);transition:transform .52s var(--ease)}
.tab:hover::after{transform:scaleX(1)}
.tab.on::after{background:var(--red);transform:scaleX(1)}
.hand{display:inline-block;transition:transform .75s var(--ease)}
.hand:hover{transform:rotate(-3deg) scale(1.04)}
@media (prefers-reduced-motion: reduce){
  .btn:hover,.review:hover,.card.hov:hover,a.card:hover,.team-card:hover,.cta-band:hover,.pricebox:hover{transform:none}
}
.rv-div.rv-sm{height:64px}

.phero>.rv-deco{opacity:.6;height:170px}
.cta-band .river-bg.rv{opacity:.5}
.footer .f-river.rv{opacity:.8}
.dark .btn-red::before,.cta-band .btn-red::before,.plate .btn-red::before,.mega-cta .btn-red::before{background:#fff}
.dark .btn-red:hover,.cta-band .btn-red:hover,.plate .btn-red:hover{color:var(--midnight)}
.dark .btn-navy,.cta-band .btn-navy{background:#fff;color:var(--midnight)}

/* CTA-vlak: rustige rimpeling in plaats van de rivier */
.cta-band>.ripple.ripple{position:absolute;right:-140px;top:50%;width:560px;height:560px;margin-top:-280px;pointer-events:none}
.ripple i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);opacity:0;transform:scale(.12);animation:ripple 7.5s cubic-bezier(.2,.6,.3,1) infinite}
.ripple i:nth-child(2){animation-delay:2.5s}
.ripple i:nth-child(3){animation-delay:5s}
.ripple::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(255,255,255,.08)}
@keyframes ripple{0%{opacity:0;transform:scale(.12)}12%{opacity:1}100%{opacity:0;transform:scale(1)}}
.cta-band:hover .ripple::after{animation:starPop .9s var(--ease)}
@media (max-width:760px){.cta-band>.ripple.ripple{right:-260px;top:auto;bottom:-300px;margin-top:0}}
@media (prefers-reduced-motion: reduce){.ripple i{animation:none;opacity:.35}.ripple i:nth-child(1){transform:scale(.4)}.ripple i:nth-child(2){transform:scale(.7)}.ripple i:nth-child(3){transform:scale(1)}}

/* v3: rivier alleen nog op de home. Elders rustige alternatieven. */
.x-over-tl>svg{display:none}
.x-over-tl>.x-over-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line);transform:translateX(-50%)}
.x-over-line i{position:absolute;inset:0;background:var(--red);transform-origin:top}
.x-over-tl-item::before{box-shadow:0 0 0 2px var(--midnight)}
@media (max-width:860px){.x-over-tl>.x-over-line{left:24px}}
.accent-rule{display:block;width:72px;height:3px;background:var(--red);margin:6px 0 4px;transform-origin:left}
.route{position:relative;height:2px;background:var(--line);margin:28px 0 8px}
.route::before,.route::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;border:2px solid var(--midnight)}
.route::before{left:0}.route::after{right:0}
.route i{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 1px;border-radius:50%;background:var(--red);animation:routeGo 6s cubic-bezier(.65,0,.35,1) infinite alternate}
@keyframes routeGo{from{left:0}to{left:calc(100% - 12px)}}
@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  .x-over-line i{animation:growY linear both;animation-timeline:--xovertl;animation-range:entry 0% entry 100%}
  .accent-rule{animation:loadLine ease-in-out both;animation-timeline:view();animation-range:entry 30% entry 100%}
}
}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){.route i{animation:none;left:50%}}

/* v4: uitklapmenu start precies op de onderrand van de header en rolt naar beneden uit */
@media (min-width:1061px){
  .mainbar .wrap{align-items:stretch}
  .mainbar .logo{align-self:center}
  .nav{align-self:stretch;align-items:stretch}
  .nav>.dd{display:flex;align-items:center}
  .nav>a{align-self:center}
}
.dd-panel{top:calc(100% + 1px);border-radius:0 0 var(--r) var(--r);border-top:0;box-shadow:0 28px 50px -24px rgba(16,42,67,.35);opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path .68s var(--ease),visibility 0s .68s}
.dd-panel>*{opacity:0;transform:translateY(-6px);transition:opacity .38s,transform .52s var(--ease)}
.dd:hover>.dd-panel,.dd:focus-within>.dd-panel{clip-path:inset(0 0 -40px 0);transform:none;transition:clip-path .75s var(--ease)}
.dd:hover>.dd-panel>*,.dd:focus-within>.dd-panel>*{opacity:1;transform:none;transition:opacity .52s .18s,transform .68s var(--ease) .18s}
.dd:hover>.dd-panel>*:nth-child(2),.dd:focus-within>.dd-panel>*:nth-child(2){transition-delay:.17s}
.dd:hover>.dd-panel>*:nth-child(3),.dd:focus-within>.dd-panel>*:nth-child(3){transition-delay:.22s}
.dd:hover>.dd-panel>*:nth-child(4),.dd:focus-within>.dd-panel>*:nth-child(4){transition-delay:.27s}
.dd:hover>.dd-panel>*:nth-child(n+5),.dd:focus-within>.dd-panel>*:nth-child(n+5){transition-delay:.32s}
.mega,.dd:hover>.mega,.dd:focus-within>.mega{transform:translateX(-50%)}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .75s var(--ease) .15s;opacity:1}
.dd:hover>.dd-panel::before,.dd:focus-within>.dd-panel::before{transform:scaleX(1)}
.footer .made a{font-weight:600;text-decoration:underline;text-underline-offset:3px}


/* ===== qa-basis ===== */
/* ===== QA basis: globale correcties (header, footer, componenten, home-hero) ===== */

/* .sec en .wrap(-narrow) op hetzelfde element: .sec zette de zijmarge op 0 (tekst tegen de rand op mobiel) */
.sec.wrap,.sec.wrap-narrow{padding-left:40px;padding-right:40px}
@media (max-width:640px){.sec.wrap,.sec.wrap-narrow{padding-left:20px;padding-right:20px}}

/* ---------- header: uitklapmenu's ---------- */
/* mega-menu centreert op de header in plaats van op het menu-item (liep links buiten beeld tussen 1061 en 1300px) */
.mainbar .wrap{position:relative}
.nav>.dd:has(>.mega){position:static}
.mega{width:min(1120px,94vw);grid-template-columns:minmax(0,1.9fr) minmax(0,2.1fr) minmax(0,1.05fr) minmax(0,.95fr) 200px}
.mega-col a{gap:8px;padding-left:10px;padding-right:10px;overflow-wrap:normal}
.mega h3{padding-left:10px;padding-right:10px}
/* schaduw onder de panelen niet meer hard afgesneden */
.dd:hover>.dd-panel,.dd:focus-within>.dd-panel{clip-path:inset(0 -90px -110px -90px)}

/* topbalk: klikvlakken op touch minimaal 44px hoog */
@media (max-width:1060px){
  .loc-btn{position:relative}
  .loc-btn::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
  .tb-r a.tb-item{min-height:44px}
}

/* mobiel menu: Inschrijven-knop kreeg de stijl van een menu-link (donkere tekst op rood) */
.mnav>a.btn{justify-content:center;color:#fff;border-bottom:0;min-height:56px;font-size:18px}
.mnav>a.btn:hover{color:#fff}
.mnav summary svg{transition:transform .52s var(--ease)}
.mnav details[open]>summary svg{transform:rotate(180deg)}
.mnav details[open]{padding-bottom:10px}

/* ---------- footer ---------- */
.footer .wrap{padding-top:0}
@media (max-width:640px){
  .footer{padding-top:64px}
  .footer .brandmark{align-items:flex-start}
  .footer .f-links{gap:0!important}
  .footer .f-links a{display:flex;align-items:center;min-height:44px}
  .f-bottom{flex-direction:column;gap:8px}
}

/* ---------- paginakop (.phero) ---------- */
/* foto staat op de onderrand: een lijn geeft die rand houvast als de volgende sectie ook wit is */
.phero:not(.phero-dark):has(.phero-media){border-bottom:1px solid var(--line)}
@media (max-width:900px){
  .phero-grid>.stack:has(+.phero-media){padding-bottom:0!important}
}

/* ---------- knoppen op mobiel: rij met alleen knoppen vult de breedte (geen ongelijke breedtes onder elkaar) ---------- */
@media (max-width:640px){
  main .row:not(:has(>:not(.btn)))>.btn{flex:1 1 auto}
}

/* ---------- FAQ ---------- */
@media (max-width:640px){.faq .ans{padding-right:0}}

/* ---------- inhoudsopgave: onder 960px staat de zijkolom onder de tekst, dan heeft de inhoudsopgave geen nut meer ---------- */
@media (max-width:960px){
  .sticky-aside>.stack-sm:has(>.toc),.sticky-aside>.toc{display:none}
}

/* ---------- teamkaarten: op mobiel twee naast elkaar in plaats van 32 schermvullende portretten ---------- */
@media (max-width:640px){
  :has(>.team-card){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 14px!important}
  .team-card .meta strong{font-size:17px}
  .team-card .more{padding:14px;font-size:14px;line-height:1.45;max-height:100%;overflow:auto;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}

/* ---------- home: hero ---------- */
@media (min-width:861px){
  /* praktijklabels boven de golf van het verhaal-paneel (die bedekt de onderste 56px) en op één lijn met de paginamarge */
  .place-tag{bottom:76px}
  .place-tag.pt-l{left:max(40px,calc((100% - 1240px)/2 + 40px))}
  .place-tag.pt-r{right:max(40px,calc((100% - 1240px)/2 + 40px))}
  .river-tag{bottom:166px}
  .scroll-cue{left:46%;bottom:70px}
  /* placeholder-tekst van de video's weg van de rivier */
  .hero .half-l .media .ph{padding-right:9%}
  .hero .half-r .media .ph{padding-left:9%}
}
@media (min-width:861px) and (max-height:820px){
  .hero-card{top:calc(50% - 36px);padding:36px 48px 32px}
  .river-tag{bottom:104px}
  .scroll-cue{display:none}
}
@media (max-width:860px){
  .place-tag.pt-l,.place-tag.pt-r{left:16px;right:16px;justify-content:space-between}
  .place-tag.pt-r{bottom:76px}
  .hero-card .hero-pick{flex-direction:column;align-items:stretch;width:100%}
  .hero-card .hero-pick .btn{justify-content:space-between}
}

/* home: kleine aanpassingen */
/* home, mondzorgkaarten: brede kolommen voor de lange lijsten; tussen tablet en desktop 2x2 i.p.v. 3+1 */
@media (min-width:1100px){
  .x-basis-mz{grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
  .x-basis-mz .card-b{padding:26px 24px}
  .x-basis-mz .card-list a{font-size:17px}
}
@media (min-width:641px) and (max-width:1099px){
  .x-basis-mz{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.x-basis-bm{position:absolute;right:40px;bottom:-30px}
@media (max-width:640px){.x-basis-bm{right:16px}}


/* ===== qa-hoofd ===== */
/* QA hoofd: Contact, Inschrijven, Inschrijven-bedankt, Afspraken, Spoed, Werken-bij */
@media (max-width:640px){
  .x-hoofd-mfull{flex-direction:column;align-items:stretch;align-self:stretch;width:100%}
  .x-hoofd-mfull>.btn{width:100%;justify-content:center}
  .hours.x-hoofd-hours{grid-template-columns:minmax(0,1fr);row-gap:0}
  .hours.x-hoofd-hours dd{margin-bottom:10px}
  .hours.x-hoofd-hours dd:last-child{margin-bottom:0}
}
/* Spoed: checklist op mobiel compact (icoon naast tekst) */
@media (max-width:640px){
  .x-hoofd-chk>li.hov>.card-b{flex-direction:row;align-items:center;gap:14px;padding:18px 20px}
  .x-hoofd-chk>li.hov>.card-b>svg{flex:none;width:26px!important;height:26px!important}
  .x-hoofd-chk>li.hov>.card-b>p{font-size:17px!important}
  .x-hoofd-chk{gap:12px}
}
/* Werken bij: sfeerfoto's op mobiel compact; sollicitatie-intro blijft staan naast het lange formulier */
@media (max-width:640px){
  .x-hoofd-sfeer{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .x-hoofd-sfeer>:nth-child(1),.x-hoofd-sfeer>:nth-child(2){aspect-ratio:3/4}
  .x-hoofd-sfeer>:nth-child(3){grid-column:1/-1;aspect-ratio:16/9}
}
@media (min-width:1040px){.x-hoofd-sticky{position:sticky;top:120px}}
/* Contact "Snel naar": op mobiel icoon links, tekst rechts (minder scrollen) */
@media (max-width:640px){
  .x-hoofd-snel{gap:12px!important}
  .x-hoofd-snel>a>.card-b{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:6px;padding:20px;align-items:start}
  .x-hoofd-snel>a>.card-b>.card-ico{grid-row:1 / span 3}
  .x-hoofd-snel>a>.card-b>p{padding-bottom:4px!important}
}


/* ===== qa-info ===== */
/* qa-info: Werkwijze, Facturatie, Veelgestelde vragen, Klachtenregeling, Verwijzers, Nieuws + artikelen */

/* telefoonnummers en bedragen niet midden in het nummer laten afbreken */
.x-info-nw{white-space:nowrap}

/* FAQ-filters: op mobiel één scrollbare rij chips i.p.v. vier regels */
@media (max-width:640px){
  .x-info-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px;padding:2px 20px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .x-info-chips::-webkit-scrollbar{display:none}
  .x-info-chips>.fbtn{flex:none}
}

/* Nieuws-overzicht: geen dubbele witruimte tussen intro en social-blok op mobiel */
@media (max-width:900px){
  .x-info-nhero>.stack:first-child{padding-bottom:0!important}
}

/* Artikel nieuwe medewerkers: portretten op mobiel als rij (foto + naam ernaast) */
@media (max-width:640px){
  .x-info-trio{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  .x-info-trio>div{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:16px}
}

/* Artikel glimlach: merkteken op mobiel onder de foto i.p.v. eroverheen */
@media (max-width:640px){
  .x-info-brand{position:static!important;margin-top:14px;align-items:flex-end;width:100%}
}
@media (max-width:640px){.x-info-artsec{padding-top:48px!important}}
/* CTA met twee telefoonnummers: op mobiel elk nummer op een eigen regel */
@media (max-width:640px){.x-info-sep{display:none}.x-info-line{display:block}}


/* ===== qa-locover ===== */
/* qa-locover: Over ons (tijdlijn), Locaties, Locatie-hardinxveld, Locatie-giessenburg, Team, Missie */

/* Over ons tijdlijn: jaartal bovenaan gelijk met de foto, bolletje op hoogte van het jaartal,
   lijn loopt precies van het eerste naar het laatste bolletje (segmenten per item) */
.x-over-tl>.x-over-line{display:none}
.x-over-tl>.x-over-tl-item.x-over-tl-item{align-items:start;--x-dot:calc(clamp(72px,9vw,136px) * .43)}
.x-over-tl>.x-over-tl-item.x-over-tl-item::before{top:var(--x-dot)}
.x-over-tl>.x-over-tl-item:not(:last-child)::after{content:"";position:absolute;left:50%;top:var(--x-dot);width:2px;height:calc(100% + 112px);margin-left:-1px;background:var(--red);transform-origin:top;z-index:0}
@media (max-width:860px){
  .x-over-tl>.x-over-tl-item.x-over-tl-item>.x-over-tl-media{order:2}
  .x-over-tl>.x-over-tl-item:not(:last-child)::after{left:24px;height:calc(100% + 72px)}
}
@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  .x-over-tl>.x-over-tl-item:not(:last-child)::after{animation:growY ease-in-out both;animation-timeline:view();animation-range:entry 30% entry 100%}
}
}

/* Locatiepagina's: 360-blok op mobiel hoger zodat label, play-knop en hint niet overlappen */
@media (max-width:640px){
  .x-locover-vid.x-locover-vid{aspect-ratio:4/3}
  .x-locover-route{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .x-locover-route>.x-locover-river{display:none}
  .x-locover-route>a{flex-wrap:nowrap !important;align-items:center}
  .x-locover-route .pin-dot{flex:none}
  .x-locover-route>a:last-child{justify-self:end;text-align:right}
  /* teamraster op locatiepagina's: twee kolommen i.p.v. één lange stapel */
  .x-locover-team.x-locover-team{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:24px 14px !important}
}
@media (max-width:640px){
  .x-locover-team>.card{grid-column:1/-1}
  .x-locover-team .team-card .meta strong{font-size:17px}
}
@media (max-width:640px){
  .x-locover-team .team-card .more{padding:14px 14px;font-size:14px}
  .x-locover-team .team-card .more p{line-height:1.4}
}


/* ===== qa-mondzorg ===== */
/* qa-mondzorg: behandelpagina's — inhoudsopgave heeft onder de inhoud op tablet/mobiel geen nut */
@media (max-width:960px){.x-mondzorg-toc{display:none}}


/* ===== v5: globale correcties na QA ===== */
.cta-band .eyebrow{color:#fff}
a[href^="tel:"]{white-space:nowrap}
.tab.on{border-bottom-color:transparent}
.mega-cta a{display:inline-flex;align-items:center;gap:8px}

/* v6: CTA-vlak met een klein kaartje van beide praktijken (vervangt de losse rimpeling) */
.cta-band>.cta-map.cta-map{position:absolute;right:0;top:0;bottom:0;width:min(560px,46%);pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.cta-map svg{position:absolute;inset:0;width:100%;height:100%}
.cta-map path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.cta-map .polder path{stroke:rgba(255,255,255,.07);stroke-width:1}
.cta-map .road path{stroke:rgba(255,255,255,.16);stroke-width:3}
.cta-map .route{stroke:#fff;stroke-width:2;stroke-dasharray:6 8;opacity:.75;animation:cmRoute 3s linear infinite}
@keyframes cmRoute{to{stroke-dashoffset:-56}}
.cm-pin{position:absolute;display:flex;align-items:center;gap:10px;transform:translate(-9px,-9px)}
.cm-pin b{font-size:13px;font-weight:600;color:#fff;background:rgba(16,42,67,.85);padding:3px 9px;border-radius:3px;white-space:nowrap;letter-spacing:.01em}
.cm-pin .pin-dot{flex:none}
.cm-h{left:36%;top:70%}
.cm-g{left:68%;top:30%}
.cm-g .pin-dot::before,.cm-g .pin-dot::after{animation-delay:.9s}
.cta-band:hover .cm-pin .pin-dot{animation:starPop .9s var(--ease)}
@media (max-width:860px){.cta-band>.cta-map.cta-map{display:none}}
@media (prefers-reduced-motion: reduce){.cta-map .route{animation:none}}
/* home: CTA nieuwe patiënten, tekst links en het kaartje rechts */
.x-home-cta{max-width:min(600px,54%)}
.mini-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:10px 0 6px;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.2)}
.mini-steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45}
.mini-steps li>span{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid #fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;transition:background .45s,color .45s,transform .6s var(--ease)}
.mini-steps li:hover>span{background:#fff;color:var(--midnight);transform:scale(1.1)}
.mini-steps strong{display:block;font-size:16px;margin-bottom:2px}
.cta-band:has(.x-home-cta)>.cta-map{width:min(600px,50%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
@media (max-width:860px){.x-home-cta{max-width:none}.mini-steps{grid-template-columns:minmax(0,1fr);gap:14px}}
/* home: afsluiter voor de footer */
.home-close{background:#fff;border-top:1px solid var(--line)}
.home-close-slogan{font-family:var(--hand);font-weight:400;font-size:clamp(44px,6vw,80px);line-height:1;color:var(--midnight);letter-spacing:0}
.home-close .label{font-size:clamp(18px,1.6vw,22px)}
@media (max-width:640px){.home-close-btns>.btn{flex:1 1 100%}}
/* ruimte onder de footer (canvas/overscroll) in footerkleur, nooit wit */
html,body{background:#102A43}

/* v7: compacter, zodat geen pagina langer wordt dan nodig */
@media (min-width:641px){.sec{padding:96px 0}}
@media (min-width:961px){
  .x-locover-team.x-locover-team{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:28px 20px!important}
  .x-locover-team .team-card .zoom{aspect-ratio:1/1}
  .x-locover-team .meta .row{display:none}
  .x-locover-team .team-card .meta strong{font-size:16px}
  .x-locover-team .team-card .more{font-size:14px;padding:14px}
  .x-locover-team>.card .h4{font-size:18px!important}
  .x-locover-team>.card .card-b{padding:20px}
}
@media (min-width:641px){.sec{padding:80px 0}}
.home-end{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-top:8px;padding-top:36px;border-top:1px solid var(--line)}
.home-end .home-close-slogan{font-size:clamp(38px,4vw,56px)}
.home-end .home-close-btns{gap:12px}
.hero ~ * .ar-wide,.sec .ar-wide{aspect-ratio:3/1}
.loc-card .map.ar-169{aspect-ratio:2/1}
/* home compacter */
@media (min-width:861px){.hero-stage{height:min(760px,calc(100svh - 88px))}}
.hero .story>.sec{padding-bottom:64px}
.x-home-cta{gap:16px}
.cta-band:has(.x-home-cta){padding:56px 64px}
.overlap>.r.ar-43{aspect-ratio:3/2}
.news-card .zoom.ar-32{aspect-ratio:16/9}
.sec .ar-wide{aspect-ratio:7/2}
@media (min-width:641px){.stack-lg{gap:40px}}
/* locatiepagina's: team als compacte lijst met ronde portretjes (volledige teampagina toont grote foto's) */
@media (min-width:961px){
  .x-locover-team.x-locover-team{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px 20px!important}
  .x-locover-team>.team-card{flex-direction:row;align-items:center;gap:14px;background:transparent;overflow:visible;padding:8px;border-radius:var(--r);transition:background .45s,transform .6s var(--ease)}
  .x-locover-team>.team-card:hover{background:var(--mist);transform:translateX(4px);box-shadow:none}
  .x-locover-team>.team-card .zoom{flex:none;width:64px;height:64px;aspect-ratio:1/1;border-radius:50%;overflow:hidden}
  .x-locover-team>.team-card .zoom .ph{font-size:0;padding:0}
  .x-locover-team>.team-card .meta{padding:0}
  .x-locover-team>.team-card .more{display:none}
  .x-locover-team>.card{grid-column:span 1}
  .x-locover-team>.card .card-b{padding:16px 18px;flex-direction:row;align-items:center;gap:12px}
  .x-locover-team>.card .card-ico{width:44px;height:44px;flex:none}
  .x-locover-team>.card .h4{font-size:16px!important}
  .x-locover-team>.card p{display:none}
}
.phero-media{aspect-ratio:4/3}
@media (min-width:641px){.sec{padding:72px 0}.sec-sm{padding:56px 0}}
.card-list a{padding:6px 0}
.sec .grid-2-top .card>.card-b[style*="padding: 32px"]{padding:26px!important}
@media (min-width:961px){.x-locover-vid.x-locover-vid{aspect-ratio:4/1}}
@media (min-width:641px){.sec-sm{padding:48px 0}.footer{padding-top:80px}}

/* v8: echte foto's */
img.ph{display:block;width:100%;height:100%;object-fit:cover;padding:0!important;background:var(--ph)}
.media img.ph{position:absolute;inset:0;width:100%;height:100%}
.r>img.ph,.zoom>img.ph,.parallax>img.ph,.reveal-clip>img.ph{height:100%;width:100%}
.team-card:hover .zoom>img.ph,.news-card:hover .zoom>img.ph{transform:scale(1.06)}
.hero .media img.ph{filter:saturate(.92) contrast(1.02)}
.x-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.x-gal-i{position:relative;aspect-ratio:1/1;margin:0;overflow:hidden;border-radius:var(--r);background:var(--navy-2)}
.x-gal-i img.ph{transition:transform 1.35s var(--ease)}
.x-gal-i:hover img.ph{transform:scale(1.06)}
.x-gal-i.vid-ph img.ph{opacity:.5}
.x-gal-i .play{width:64px;height:64px}
.x-gal-cap{position:absolute;left:12px;bottom:12px;background:rgba(16,42,67,.82);color:#fff;font-size:13px;font-weight:600;line-height:1.2;padding:6px 12px;border-radius:999px}
@media (max-width:640px){.x-gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.x-gal-i .play{width:52px;height:52px}}