/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --ink:#111110;
  --white:#fff;
  --soft:#F4F4F0;
  --yellow:#F7F790;
  --mute:#6B6B66;
  --line:rgba(17,17,16,.12);
  --line-l:rgba(255,255,255,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Outfit',system-ui,sans-serif;
  --gutter:clamp(20px,4vw,56px);
  --max:1360px;
  --r:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--white);color:var(--ink);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.dark :focus-visible{outline-color:var(--yellow)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-weight:500;letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(38px,5.6vw,80px)}
h1,h2,h3{isolation:isolate}
mark{position:relative;background:none;color:inherit;white-space:nowrap;padding:0 .02em}
mark::before{content:"";position:absolute;z-index:-1;left:-.14em;right:-.14em;top:.04em;bottom:-.02em;background:var(--yellow);border-radius:.14em}
.sec{padding:clamp(80px,10vw,150px) 0}
.muted{color:var(--mute)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.95em 1.6em;border-radius:999px;font-weight:500;font-size:17px;transition:background .3s,color .3s,transform .4s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-k{background:var(--ink);color:#fff}
.btn-k:hover{background:#000}
.btn-y{background:var(--yellow);color:var(--ink)}
.btn-y:hover{background:#fbfb9f}
.btn-o{border:1.5px solid currentColor}
.btn-o:hover{background:rgba(17,17,16,.06)}
.dark .btn-o:hover{background:rgba(255,255,255,.1)}
.arr{transition:transform .35s var(--ease)}
.btn:hover .arr,.tlink:hover .arr{transform:translateX(4px)}
.tlink{display:inline-flex;gap:.4em;font-weight:500;border-bottom:1.5px solid currentColor;padding-bottom:2px}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,box-shadow .4s,transform .5s var(--ease)}
.nav.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav.hide{transform:translateY(-100%)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.nav .logo img{width:42px;height:42px}
.nav>.wrap>ul{display:flex;gap:26px;list-style:none;font-size:16.5px}
.nav>.wrap>ul>li>a,.nav-t{opacity:.72;transition:opacity .25s}
.nav>.wrap>ul>li>a:hover,.nav-t:hover,.has-sub:hover>.nav-t,.has-sub.open>.nav-t{opacity:1}
.nav .btn{padding:.7em 1.3em;font-size:16px}
@media(max-width:900px){.nav>.wrap>ul{display:none}}

/* hero */
.hero{padding:150px 0 0}
.hero h1{font-size:clamp(46px,8.4vw,132px);max-width:11.5em;letter-spacing:-.04em;line-height:.98}
.hero h1 .l{display:block;position:relative;z-index:1;clip-path:inset(-.3em -.3em -.3em -.3em)}
.hero h1 .l>span{display:block;transform:translateY(125%);animation:up 1.1s var(--ease) forwards;animation-delay:calc(.1s + var(--i)*.12s)}
.hero h1 .l:last-child{z-index:0}
@keyframes up{to{transform:none}}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:clamp(32px,4vw,56px);opacity:0;animation:fade 1s .5s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
.hero-row p{font-size:clamp(19px,1.7vw,24px);line-height:1.4;max-width:26em;color:#3d3d39}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.slot{display:inline-flex;align-items:center;gap:9px;font-size:16px;color:var(--mute)}
.slot i{width:8px;height:8px;border-radius:50%;background:#2DB962;box-shadow:0 0 0 0 rgba(45,185,98,.5);animation:pulse 2.2s infinite}
@keyframes pulse{70%,100%{box-shadow:0 0 0 9px rgba(45,185,98,0)}}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px);align-items:start;margin-top:clamp(48px,6vw,90px);padding-bottom:clamp(60px,8vw,110px)}
.strip a{display:block}
.strip figure{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--soft);clip-path:inset(100% 0 0 0 round var(--r));animation:wipe 1.3s var(--ease) forwards;animation-delay:calc(.55s + var(--i)*.1s)}
.strip a:nth-child(even){margin-top:clamp(28px,5vw,72px)}
@keyframes wipe{to{clip-path:inset(0 0 0 0 round var(--r))}}
.strip img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);animation:settle 1.8s var(--ease) forwards;animation-delay:calc(.55s + var(--i)*.1s);transition:transform 1.2s var(--ease)}
@keyframes settle{to{transform:scale(1)}}
.strip a:hover img{transform:scale(1.04);animation:none}
.strip figcaption{display:none}
.strip .cap{margin-top:12px;font-size:15.5px;display:flex;justify-content:space-between;gap:10px;opacity:0;animation:fade 1s 1.3s forwards}
.strip .cap span:last-child{color:var(--mute)}
@media(max-width:820px){.strip{grid-template-columns:repeat(2,1fr)}.strip a:nth-child(even){margin-top:36px}}

/* cases */
.cases{background:var(--soft)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,70px)}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px)}
.case figure{border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;background:#ddd}
.case img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.case:hover img{transform:scale(1.045)}
.case .meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px}
.case h3{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em}
.case .cat{color:var(--mute);font-size:16px;white-space:nowrap}
.case p{color:var(--mute);margin-top:4px;font-size:17px}
.case .go{display:inline-block;margin-top:10px;font-weight:500;font-size:16px;opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .5s var(--ease)}
.case:hover .go{opacity:1;transform:none}
@media(max-width:760px){.case-grid{grid-template-columns:1fr}}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,.55fr) 1.45fr;gap:clamp(32px,7vw,120px);align-items:center}
.about-grid figure{position:relative;max-width:320px;aspect-ratio:1;border-radius:50%;background:var(--soft)}
.about-grid figure .wave{position:absolute;inset:0;overflow:hidden;border-radius:50%}
.about-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-grid img.anim{opacity:0;transition:opacity .25s}
.about-grid figure.on img.anim{opacity:1}
.about-grid .hint{position:absolute;right:-6%;bottom:6%;background:var(--yellow);border-radius:999px;padding:9px 16px;font-size:15px;font-weight:500;box-shadow:0 14px 30px -16px rgba(17,17,16,.5);transition:opacity .3s,transform .5s var(--ease);pointer-events:none}
.about-grid figure.on .hint{opacity:0;transform:translateY(6px)}
.about-grid .hint .t{display:none}
@media(hover:none){.about-grid .hint .h{display:none}.about-grid .hint .t{display:inline}}
.about-grid h2{margin-bottom:28px}
.about-grid p{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:#3d3d39;max-width:34em;margin-bottom:18px}
.about-grid .tlink{margin-top:14px}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}.about-grid figure{max-width:320px}}

/* aanpak */
.how{background:var(--soft)}
.how-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,7vw,120px)}
.how-side{position:sticky;top:120px;align-self:start}
.how-side h2{margin-bottom:28px}
.how-side p{color:#3d3d39;max-width:28em;font-size:clamp(18px,1.5vw,21px)}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:padding .5s var(--ease)}
.row:hover{padding-left:12px}
.row h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em}
.row p{color:var(--mute);font-size:17px}
@media(max-width:900px){.how-grid{grid-template-columns:1fr}.how-side{position:static}.row{grid-template-columns:1fr;gap:6px}}

/* proces */
.dark{background:var(--ink);color:#fff}
.dark .muted{color:rgba(255,255,255,.6)}
.proc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,7vw,120px)}
.proc-side{position:sticky;top:120px;align-self:start}
.proc-side h2{margin-bottom:28px}
.proc-side p{color:rgba(255,255,255,.65);max-width:24em;margin-bottom:30px}
.steps{border-top:1px solid var(--line-l)}
.step{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:34px 0;border-bottom:1px solid var(--line-l)}
.step .d{color:var(--yellow);font-size:17px;padding-top:.5em;white-space:nowrap}
.step h3{font-size:clamp(28px,3.2vw,44px);margin-bottom:8px}
.step p{color:rgba(255,255,255,.62);max-width:34em}
@media(max-width:900px){.proc-grid{grid-template-columns:1fr}.proc-side{position:static}.step{grid-template-columns:1fr;gap:6px}}

/* reviews */
.rev-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(16px,2vw,28px)}
.rev{background:var(--soft);border-radius:var(--r);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.rev:first-child{background:var(--yellow)}
.rev q{quotes:none;font-size:clamp(20px,1.8vw,26px);line-height:1.3;letter-spacing:-.02em;font-weight:400}
.rev:first-child q{font-size:clamp(24px,2.5vw,36px);letter-spacing:-.03em;line-height:1.18}
.rev .who{font-size:16px}
.rev .who b{font-weight:500;display:block}
.rev .who span{color:var(--mute)}
.rev:first-child .who span{color:rgba(17,17,16,.65)}
@media(max-width:900px){.rev-grid{grid-template-columns:1fr}}

/* prijzen */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,2.6vw,38px);display:flex;flex-direction:column;gap:22px;position:relative}
.plan h3{font-size:30px}
.plan .for{color:var(--mute);font-size:17px;min-height:3.1em}
.price{font-size:clamp(46px,5vw,72px);font-weight:500;letter-spacing:-.045em;line-height:1}
.plan ul{list-style:none;display:grid;gap:11px;align-content:start;flex:1;padding-top:22px;border-top:1px solid var(--line);font-size:17px}
.plan li{display:flex;gap:11px}
.plan li::before{content:"";flex:none;width:7px;height:7px;margin-top:.62em;border-radius:50%;background:var(--ink)}
.plan.hot{background:var(--ink);color:#fff;border-color:var(--ink)}
.plan.hot .for{color:rgba(255,255,255,.62)}
.plan.hot ul{border-color:var(--line-l)}
.plan.hot li::before{background:var(--yellow)}
.plan .tag{position:absolute;top:-13px;left:30px;background:var(--yellow);color:var(--ink);padding:3px 13px;border-radius:99px;font-size:14.5px;font-weight:500}
.plan .btn{width:100%}
.ref{margin-top:28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--mute)}
@media(max-width:960px){.plans{grid-template-columns:1fr}.plan.hot{order:-1}}

/* faq */
.faq{background:var(--soft)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,7vw,120px)}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:26px 0;font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-.02em}
.pm{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);position:relative;transition:background .4s,transform .5s var(--ease)}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .5s var(--ease)}
.pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa.open .pm{background:var(--yellow);border-color:var(--yellow)}
.qa.open .pm::after{transform:translate(-50%,-50%) rotate(0)}
.ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.qa.open .ans{grid-template-rows:1fr}
.ans>div{overflow:hidden}
.ans p{padding-bottom:26px;max-width:36em;color:#3d3d39}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr}}

/* slot */
.final{padding:clamp(60px,8vw,120px) 0 clamp(40px,5vw,70px)}
.final-box{background:var(--yellow);border-radius:calc(var(--r)*1.4);padding:clamp(48px,8vw,130px) clamp(24px,5vw,80px);text-align:center}
.final h2{font-size:clamp(44px,8vw,120px);margin-bottom:22px}
.final p{font-size:clamp(18px,1.6vw,22px);max-width:30em;margin:0 auto 38px;color:#3d3d39}
.final .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
  .rv,.hero-row,.strip .cap{opacity:1;transform:none}
  .hero h1 .l>span{transform:none}
  html{scroll-behavior:auto}
}

/* casepagina */
.chero{padding:150px 0 0}
.back{display:inline-flex;gap:.45em;color:var(--mute);margin-bottom:30px;transition:color .3s}
.back:hover{color:var(--ink)}
.chero h1{font-size:clamp(46px,8vw,124px);letter-spacing:-.04em;line-height:.98;max-width:12em}
.chero .lead{font-size:clamp(20px,2vw,28px);line-height:1.35;color:#3d3d39;max-width:24em;margin-top:26px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(40px,5vw,70px);padding-top:22px;border-top:1px solid var(--line)}
.facts dt{color:var(--mute);font-size:15.5px;margin-bottom:2px}
.facts dd{font-size:19px}
@media(max-width:700px){.facts{grid-template-columns:1fr 1fr}}
.cimg{margin-top:clamp(36px,5vw,64px)}
.cimg figure{border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--soft)}
.cimg img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.cimg figure{aspect-ratio:4/5}}
.cbody{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,7vw,120px)}
.cbody h2{font-size:clamp(34px,4.4vw,60px)}
.cbody p{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:#3d3d39;max-width:34em;margin-bottom:18px}
@media(max-width:820px){.cbody{grid-template-columns:1fr}}
.cquote{background:var(--yellow);border-radius:calc(var(--r)*1.4);padding:clamp(36px,6vw,90px)}
.cquote q{display:block;quotes:none;font-size:clamp(26px,3.6vw,52px);line-height:1.15;letter-spacing:-.03em;max-width:22em}
.cquote .who{margin-top:30px;font-size:17px}
.cquote .who span{color:rgba(17,17,16,.62)}
.next{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:center;border-top:1px solid var(--line);padding-top:clamp(28px,4vw,56px)}
.next small{color:var(--mute);font-size:16px;display:block;margin-bottom:8px}
.next h3{font-size:clamp(34px,5vw,72px)}
.next figure{border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--soft)}
.next img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.next:hover img{transform:scale(1.04)}
@media(max-width:760px){.next{grid-template-columns:1fr}}

.cstory{padding-top:clamp(70px,9vw,130px)}
.cstory .cbody{padding:34px 0;border-top:1px solid var(--line)}
.cstory .cbody:last-child{border-bottom:1px solid var(--line)}
.cstory .cbody h2{font-size:clamp(26px,3vw,40px)}
.cstory .cbody p{margin-bottom:0}

.dl-list{list-style:none;display:grid;gap:0;margin:0;padding:0}
.dl-list li{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:18px}
.dl-list li:first-child{border-top:1px solid var(--line)}
.dl-list b{font-weight:500}
.dl-list span{color:#3d3d39}
@media(max-width:700px){.dl-list li{grid-template-columns:1fr;gap:2px}}
.case-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.case-grid.three{grid-template-columns:1fr}}
.row h3 a{border-bottom:1.5px solid transparent;transition:border-color .3s}
.row:hover h3 a{border-color:currentColor}

.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:17px;text-align:left}
.cmp th,.cmp td{padding:16px 14px 16px 0;border-bottom:1px solid var(--line);vertical-align:top;font-weight:400}
.cmp thead th{font-weight:500;border-bottom:1.5px solid var(--ink);padding-top:0}
.cmp tbody th{font-weight:500;width:22%}
.cmp td{color:#3d3d39;width:39%}

.chk{list-style:none;margin:0;padding:0}
.chk li{border-bottom:1px solid var(--line)}
.chk li:first-child{border-top:1px solid var(--line)}
.chk label{display:flex;gap:14px;align-items:flex-start;padding:16px 0;cursor:pointer;font-size:18px}
.chk input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:var(--ink);cursor:pointer}
.chk-score{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.chk-num{font-size:clamp(34px,4vw,52px);font-weight:500;letter-spacing:-.04em;line-height:1}
.chk-num span{font-size:18px;color:var(--mute);letter-spacing:0;font-weight:400}
.chk-bar{flex:1;min-width:160px;height:8px;border-radius:9px;background:var(--line);overflow:hidden}
.chk-bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:9px;transition:width .5s var(--ease)}
.chk-msg{margin-top:18px;font-size:clamp(19px,1.6vw,22px);line-height:1.45;color:#3d3d39;max-width:34em;padding:18px 20px;background:var(--yellow);border-radius:16px}

/* [hidden] moet altijd winnen */
[hidden]{display:none!important}
/* contactformulier */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,80px);align-items:start}
.cc{border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,40px)}
.cc h2{font-size:clamp(28px,3vw,40px);margin-bottom:12px}
.cc p{color:#3d3d39;margin-bottom:22px}
.cc.dark2{background:var(--ink);color:#fff;border-color:var(--ink)}
.cc.dark2 p{color:rgba(255,255,255,.72)}
.cc .muted{font-size:16px;color:var(--mute);margin:18px 0 0}
.cf{display:grid;gap:18px}
.cf label{display:grid;gap:6px;font-weight:500;font-size:16px}
.cf input,.cf textarea,.cf select{font:inherit;font-weight:400;font-size:17px;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);width:100%}
.cf textarea{min-height:140px;resize:vertical}
.cf input:focus,.cf textarea:focus,.cf select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,16,.1)}
.cf .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-note{font-size:15px;color:var(--mute)}
.cf-status{min-height:1.4em;font-size:16px;color:#8a1f11}
.cf-ok{padding:22px;background:var(--yellow);border-radius:16px;font-size:19px;line-height:1.45}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
/* vaste knop onderin op mobiel */
.mbar{display:none}
@media(max-width:820px){
  .mbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .5s var(--ease)}
  .mbar.on{transform:none}
  .mbar .btn{flex:1;padding:.8em 1em;font-size:16px}
  body{padding-bottom:0}
  .ft{padding-bottom:calc(36px + 82px)}
}

/* ===== v3: footer, animaties, templates ===== */
/* nav */
.nav .logo{position:relative;display:inline-block;border-radius:50%}
.nav .logo::after,.ft-logo::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ink);opacity:0;pointer-events:none}
.ft-logo::after{border-color:var(--yellow)}
.nav .logo:hover::after,.ft-logo:hover::after{animation:ring 1.1s var(--ease)}
.nav .logo:hover img,.ft-logo:hover img{animation:boing .8s var(--ease)}
@keyframes ring{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.85)}}
@keyframes boing{0%{transform:scale(1)}28%{transform:scale(.86,1.1)}52%{transform:scale(1.09,.93)}76%{transform:scale(.98,1.02)}100%{transform:scale(1)}}
.nav>.wrap>ul>li>a,.nav-t{position:relative;display:inline-block;padding:8px 14px;margin:0 -14px}
.nav>.wrap>ul>li>a::after,.nav-t::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav>.wrap>ul>li>a:hover::after,.has-sub:hover>.nav-t::after,.has-sub.open>.nav-t::after{transform:scaleX(1)}
.sp{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;pointer-events:none}
.sp i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.btt{position:fixed;right:24px;bottom:24px;width:52px;height:52px;border-radius:50%;z-index:55;background:#fff;box-shadow:0 10px 30px -10px rgba(17,17,16,.35);opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .4s,transform .5s var(--ease),background .3s}
.btt.on{opacity:1;transform:none;pointer-events:auto}
.btt svg{width:100%;height:100%}
.btt .bg{fill:none;stroke:var(--line);stroke-width:2}
.btt .fg{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;stroke-dasharray:132;stroke-dashoffset:132}
.btt path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btt:hover{background:var(--yellow)}
@media(max-width:820px){.btt{display:none}}
/* knoppen: meebewegende spotlight */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;left:var(--bx,50%);top:var(--by,50%);width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:var(--spot,rgba(255,255,255,.1));opacity:0;transform:scale(.4);transition:opacity .35s,transform .55s var(--ease),left .16s ease-out,top .16s ease-out;z-index:-1;pointer-events:none}
.btn:hover::before{opacity:1;transform:scale(1)}
.btn-y{--spot:rgba(17,17,16,.07)}
.btn-k{--spot:rgba(255,255,255,.13)}
.btn-o{--spot:rgba(17,17,16,.06)}
.dark .btn-o,.ft .btn-o{--spot:rgba(255,255,255,.1)}
/* kaarten: zachte spotlight */
[data-spot]{position:relative}
[data-spot]::before{content:"";position:absolute;left:var(--mx,50%);top:var(--my,0%);width:280px;height:280px;margin:-140px 0 0 -140px;border-radius:50%;background:rgba(17,17,16,.04);opacity:0;transform:scale(.5);transition:opacity .4s,transform .6s var(--ease);pointer-events:none}
[data-spot]:hover::before{opacity:1;transform:scale(1)}
[data-spot]{overflow:hidden}
[data-spot]>*{position:relative}
img[data-parallax]{transform:scale(1.12);will-change:transform}
/* footer */
.ft{background:var(--ink);color:rgba(255,255,255,.7);padding:clamp(56px,7vw,100px) 0 36px;font-size:16px}
.ft-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:clamp(28px,4vw,64px)}
.ft-logo{position:relative;display:inline-block;border-radius:50%}
.ft-logo img{width:56px;height:56px}
.ft-brand p{margin:18px 0 22px;max-width:21em;font-size:18px;line-height:1.45;color:rgba(255,255,255,.72)}
.ft-brand .ft-mail{margin:20px 0 0;font-size:16px}
.ft-mail a{border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .3s,color .3s}
.ft-mail a:hover{color:var(--yellow);border-color:var(--yellow)}
.ft-col h3{font-size:15px;font-weight:500;color:rgba(255,255,255,.5);margin-bottom:16px;line-height:1.2;letter-spacing:0}
.ft-col ul{list-style:none;display:grid;gap:11px}
.ft-col a{color:rgba(255,255,255,.9);position:relative;display:inline-block;transition:color .3s}
.ft-col a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.ft-col a:hover{color:var(--yellow)}
.ft-col a:hover::after{transform:scaleX(1)}
.ft-bottom{margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px}
.ft-links{display:flex;gap:22px;flex-wrap:wrap}
.ft-bottom a{color:rgba(255,255,255,.7);transition:color .3s}
.ft-bottom a:hover{color:var(--yellow)}
@media(max-width:1000px){.ft-top{grid-template-columns:repeat(2,1fr)}.ft-brand{grid-column:1/-1}}
/* hero-animatie op subpagina's */
.lh-copy>*,.ah>.wrap>*{opacity:0;transform:translateY(18px);animation:lin .9s var(--ease) forwards;animation-delay:calc(.05s + var(--i,0)*.09s)}
@keyframes lin{to{opacity:1;transform:none}}

/* ===== landingspagina-template ===== */
.ft-bottom{padding-right:76px}
.crumbs{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--mute);margin-bottom:26px}
.crumbs a{transition:color .3s}.crumbs a:hover{color:var(--ink)}
.lh{padding:130px 0 clamp(50px,6vw,90px)}
.lh-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,84px);align-items:center}
.lh h1{font-size:clamp(42px,5.8vw,88px);letter-spacing:-.04em;line-height:.98;margin-bottom:24px}
.lh .lead{font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:#3d3d39;max-width:30em;margin-top:0}
.lh-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.lh-copy .facts{margin-top:38px}
.lh-vis{position:relative;opacity:0;animation:lin 1.1s .25s var(--ease) forwards}
.lh-main{border-radius:28px;overflow:hidden;aspect-ratio:4/5;background:var(--soft);box-shadow:0 40px 80px -40px rgba(17,17,16,.4)}
.lh-main img{width:100%;height:100%;object-fit:cover}
.lh-sub{position:absolute;left:-9%;bottom:-6%;width:38%;aspect-ratio:1;border-radius:22px;overflow:hidden;border:6px solid #fff;box-shadow:0 30px 60px -25px rgba(17,17,16,.45);background:var(--soft)}
.lh-sub img{width:100%;height:100%;object-fit:cover}
.lh-chip{position:absolute;right:-4%;top:9%;background:var(--yellow);border-radius:999px;padding:11px 20px 11px 16px;display:flex;align-items:center;gap:10px;font-size:17px;box-shadow:0 20px 40px -20px rgba(17,17,16,.45);animation:float 6s ease-in-out infinite}
.lh-chip i{width:9px;height:9px;border-radius:50%;background:var(--ink)}
.lh-chip b{font-weight:500}
@keyframes float{50%{transform:translateY(-9px)}}
@media(max-width:900px){.lh{padding-top:110px}.lh-grid{grid-template-columns:1fr}.lh-vis{max-width:440px;margin:10px 0 0 4%}.lh-sub{left:-6%}.lh-chip{right:-2%}}
/* secties */
.ls{padding:clamp(64px,8.5vw,124px) 0;position:relative}
.ls.soft{background:var(--soft)}
.ls.dark{background:var(--ink);color:#fff}
.ls-head{max-width:880px;margin-bottom:clamp(30px,4vw,54px)}
.ls-head h2{font-size:clamp(32px,4.6vw,62px)}
.ls-head p{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:#3d3d39;margin-top:18px;max-width:36em}
.ls.dark .ls-head p{color:rgba(255,255,255,.7)}
.ls-foot{margin-top:28px;font-size:18px;color:#3d3d39;max-width:44em}
.ls.dark .ls-foot{color:rgba(255,255,255,.7)}
.ls-statement h2{font-size:clamp(28px,3.4vw,46px);margin-bottom:22px;max-width:18em}
.ls-lead p{font-size:clamp(22px,2.4vw,34px);line-height:1.28;letter-spacing:-.02em;max-width:27em}
.ls-lead p+p{font-size:clamp(18px,1.6vw,22px);line-height:1.5;letter-spacing:0;color:#3d3d39;margin-top:20px}
.ls-note{background:var(--soft);border-radius:calc(var(--r)*1.4);padding:clamp(28px,5vw,72px)}
.ls-note.yellow{background:var(--yellow)}
.ls-note h2{font-size:clamp(28px,3.4vw,46px);margin-bottom:18px;max-width:16em}
.ls-note p{font-size:clamp(19px,1.8vw,25px);line-height:1.45;max-width:34em}
.ls-note p+p{margin-top:16px}
.ls-note a,.ls-lead a,.ls-head a,.ls-foot a{border-bottom:1.5px solid currentColor}
/* kaarten */
.fgrid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:16px}
.fc{border-radius:var(--r);padding:clamp(24px,2.6vw,36px);background:var(--soft);overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.ls.soft .fc{background:#fff}
.fc:hover{transform:translateY(-5px);box-shadow:0 30px 50px -30px rgba(17,17,16,.3)}
.fc h3{font-size:clamp(21px,1.9vw,27px);letter-spacing:-.025em;line-height:1.1;margin-bottom:10px}
.fc h3 a{border-bottom:1.5px solid currentColor}
.fc p{color:#55554f;font-size:17px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fgrid{grid-template-columns:1fr}}
/* tijdlijn */
.steps2{list-style:none;position:relative;display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:clamp(16px,2vw,30px);padding-top:38px;margin:0}
.steps2::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:rgba(255,255,255,.18)}
.steps2::after{content:"";position:absolute;left:0;top:9px;height:2px;width:var(--p,0%);background:var(--yellow);max-width:100%}
.step2{position:relative}
.step2::before{content:"";position:absolute;left:0;top:-37px;width:20px;height:20px;border-radius:50%;background:var(--ink);border:2px solid rgba(255,255,255,.3);z-index:1;transition:background .4s,border-color .4s,transform .6s var(--ease)}
.step2.on::before{background:var(--yellow);border-color:var(--yellow);transform:scale(1.15)}
.step2 .day{display:inline-block;color:var(--yellow);font-size:16px;margin-bottom:10px}
.step2 h3{font-size:clamp(20px,1.7vw,25px);letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
.step2 p{color:rgba(255,255,255,.62);font-size:16px}
.step2 a{border-bottom:1.5px solid currentColor}
@media(max-width:900px){.steps2{grid-template-columns:1fr;padding:0 0 0 44px;gap:34px}.steps2::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}.steps2::after{left:9px;top:0;width:2px;height:var(--p,0%);max-height:100%}.step2::before{left:-44px;top:4px}}
/* prijskaarten */
.pgrid{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:16px;align-items:stretch}
.pc{border-radius:var(--r);padding:clamp(26px,2.8vw,40px);background:#fff;display:flex;flex-direction:column;gap:14px;transition:transform .6s var(--ease),box-shadow .6s var(--ease);box-shadow:0 0 0 1px var(--line)}
.pc:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--line),0 36px 60px -34px rgba(17,17,16,.35)}
.pc h3{font-size:26px;letter-spacing:-.03em}
.pc-price{font-size:clamp(42px,4.4vw,64px);font-weight:500;letter-spacing:-.05em;line-height:1}
.pc-price small{font-size:17px;letter-spacing:0;font-weight:400;color:var(--mute);margin-left:8px}
.pc p{color:#55554f;font-size:17px}
.pc-list{list-style:none;display:grid;gap:10px;flex:1;margin:4px 0 12px;padding-top:18px;border-top:1px solid var(--line);font-size:16px;color:#3d3d39}
.pc-list li{padding-left:18px;position:relative}
.pc-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.pc-list b{font-weight:500;color:var(--ink)}
.pc .btn{justify-content:center;margin-top:auto}
.pc.hot{background:var(--ink);color:#fff;box-shadow:none}
.pc.hot p,.pc.hot .pc-list{color:rgba(255,255,255,.72)}
.pc.hot .pc-list{border-color:var(--line-l)}
.pc.hot .pc-list b{color:#fff}
.pc.hot .pc-list li::before{background:var(--yellow)}
.pc.hot .pc-price small{color:rgba(255,255,255,.6)}
@media(max-width:900px){.pgrid{grid-template-columns:1fr}.pc.hot{order:-1}}
.faq.white{background:#fff}

.pc-list b{display:block}
/* artikel-template */
.ah{padding:130px 0 clamp(36px,5vw,64px)}
.ah h1{font-size:clamp(40px,5.4vw,80px);letter-spacing:-.04em;line-height:.98;max-width:14em;margin-bottom:22px}
.ah .lead{font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:#3d3d39;max-width:34em;margin:0}
.ah .facts{margin-top:34px;max-width:760px}
.ab{padding:clamp(16px,3vw,40px) 0 clamp(70px,9vw,130px)}
.art-wrap{display:grid;grid-template-columns:250px minmax(0,740px);gap:clamp(32px,6vw,100px);justify-content:center}
.toc{position:sticky;top:104px;align-self:start;font-size:16px}
.toc>p{color:var(--mute);margin-bottom:14px}
.toc ol{list-style:none;display:grid;gap:2px;border-left:1.5px solid var(--line)}
.toc ol a{display:block;padding:7px 0 7px 16px;margin-left:-1.5px;border-left:1.5px solid transparent;color:#55554f;transition:color .3s,border-color .3s;line-height:1.35}
.toc ol a:hover{color:var(--ink)}
.toc ol a.on{color:var(--ink);border-left-color:var(--ink);font-weight:500}
.toc-cta{margin-top:28px;padding:20px;background:var(--soft);border-radius:18px}
.toc-cta p{font-size:17px;margin-bottom:14px}
.toc-cta .btn{padding:.7em 1.2em;font-size:15.5px}
.art{min-width:0}
.asec{padding-bottom:clamp(36px,4.5vw,60px);scroll-margin-top:100px}
.asec h2{font-size:clamp(28px,3.2vw,42px);margin-bottom:18px}
.asec p{font-size:clamp(18px,1.5vw,20px);line-height:1.65;color:#2f2f2b;max-width:40em;margin-bottom:16px}
.asec .dl-list li{grid-template-columns:170px 1fr}
.asec .tlink{border-bottom-width:1.5px}
@media(max-width:1000px){.art-wrap{grid-template-columns:minmax(0,740px)}.toc{display:none}}
@media(max-width:700px){.asec .dl-list li{grid-template-columns:1fr}}

/* mobiel menu */
.burger{display:none;width:46px;height:46px;border-radius:50%;background:var(--ink);position:relative;flex:none}
.burger i{position:absolute;left:15px;right:15px;height:1.5px;background:#fff;border-radius:2px;transition:transform .5s var(--ease),top .5s var(--ease),opacity .3s}
.burger i:nth-child(1){top:19px}.burger i:nth-child(2){top:26px}
.burger[aria-expanded="true"] i:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){top:22px;transform:rotate(-45deg)}
.nav-actions{display:flex;gap:10px;align-items:center}
.mmenu{position:fixed;inset:0;z-index:70;background:#fff;padding:108px var(--gutter) 40px;display:flex;flex-direction:column;justify-content:space-between;visibility:hidden;clip-path:circle(0 at calc(100% - 46px) 46px);transition:clip-path .7s var(--ease),visibility 0s .7s}
.mmenu.open{visibility:visible;clip-path:circle(150% at calc(100% - 46px) 46px);transition:clip-path .8s var(--ease),visibility 0s}
.mmenu ul{list-style:none;display:grid;gap:4px}
.mmenu li{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .7s var(--ease)}
.mmenu.open li{opacity:1;transform:none;transition-delay:calc(.15s + var(--k)*.06s)}
.mmenu li a{display:block;font-size:clamp(34px,10vw,48px);font-weight:500;letter-spacing:-.035em;line-height:1.15;padding:6px 0;border-bottom:1px solid var(--line)}
.mmenu-foot{display:grid;gap:14px;opacity:0;transition:opacity .5s .5s}
.mmenu.open .mmenu-foot{opacity:1}
.mmenu-foot .btn{justify-content:center}
.mmenu-foot a.m{text-align:center;color:var(--mute)}
body.menu-open{overflow:hidden}
@media(max-width:900px){.burger{display:block}.nav .btn{padding:.7em 1.1em;font-size:15px}}
@media(min-width:901px){.mmenu{display:none}}

/* menu: uitklappers */
.nav-t{font:inherit;color:inherit;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.nav-t i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .4s var(--ease)}
.has-sub:hover>.nav-t i,.has-sub.open>.nav-t i{transform:translateY(1px) rotate(225deg)}
.has-sub{position:relative}
.sub{position:absolute;top:100%;left:-22px;padding-top:14px;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .5s var(--ease),visibility 0s .5s}
.has-sub:hover>.sub,.has-sub:focus-within>.sub,.has-sub.open>.sub{visibility:visible;opacity:1;transform:none;transition:opacity .25s,transform .5s var(--ease),visibility 0s}
.sub-in{display:grid;grid-auto-flow:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:0 30px 60px -28px rgba(17,17,16,.28);width:max-content;max-width:calc(100vw - 48px)}
.sub-col{display:grid;align-content:start;gap:2px;min-width:250px}
.sub-col h4{font-size:14px;font-weight:500;color:var(--mute);padding:8px 14px 6px;letter-spacing:-.01em}
.sub-col a{display:block;padding:10px 14px;border-radius:14px;opacity:1;transition:background .25s}
.sub-col a:hover{background:var(--soft)}
.sub-col a b{display:block;font-weight:500;font-size:16.5px;letter-spacing:-.02em;line-height:1.25}
.sub-col a small{display:block;color:var(--mute);font-size:14.5px;line-height:1.35;margin-top:2px}
.sub-col a.all{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 14px 14px;padding-top:14px;font-weight:500}
.sub-col a.brandlink{background:var(--soft)}
.sub-col a.brandlink:hover{background:var(--yellow)}
/* mobiel: groepen */
.mmenu li.grp>button{display:flex;width:100%;justify-content:space-between;align-items:center;font:inherit;font-size:clamp(34px,10vw,48px);font-weight:500;letter-spacing:-.035em;line-height:1.15;padding:6px 0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;background:none;color:inherit}
.mmenu li.grp>button i{width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-3px,-3px);transition:transform .5s var(--ease);margin-right:6px}
.mmenu li.grp.on>button i{transform:rotate(225deg) translate(-3px,-3px)}
.mmenu li.grp ul{display:grid;gap:0;max-height:0;overflow:hidden;transition:max-height .7s var(--ease)}
.mmenu li.grp.on ul{max-height:640px}
.mmenu li.grp ul a{font-size:21px;letter-spacing:-.02em;font-weight:400;color:#3d3d39;padding:11px 0 11px 4px;border-bottom:1px solid var(--line)}
.mmenu li.grp ul li{opacity:1;transform:none}
.ft-col h3.ft-sub{margin-top:26px}

/* eigen merk: CliniChat */
.brandx-tag{display:inline-block;font-size:15px;font-weight:500;background:var(--yellow);color:var(--ink);padding:.4em .9em;border-radius:99px;letter-spacing:-.01em}

/* case-galerij */
.cgal{padding-top:clamp(20px,3vw,40px)}
.cgal .wrap{display:grid;gap:clamp(12px,1.6vw,20px)}
.cgal figure{border-radius:var(--r);overflow:hidden;background:var(--soft)}
.cgal img{width:100%;height:auto;display:block}
.cgal-two{display:grid;grid-template-columns:1fr 1fr;gap:inherit}
@media(max-width:700px){.cgal-two{grid-template-columns:1fr}}

/* toestemmingsbalk */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:560px;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;border-radius:20px;padding:18px 20px;box-shadow:0 24px 60px -20px rgba(17,17,16,.6)}
.consent p{font-size:16px;line-height:1.4;flex:1 1 260px}
.consent a{text-decoration:underline;text-underline-offset:3px}
.consent div{display:flex;gap:8px;flex-wrap:wrap}
.consent .btn{padding:11px 18px;font-size:15px}
.consent .btn-k{background:var(--yellow);color:var(--ink)}
.consent .btn-o{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
@media(max-width:900px){.consent{bottom:84px}}