/* Homepage-reel, proefpagina (30 sep 2026). Kleuren en letters komen uit ronde3.css (tokens.json).
   Basis = alles gewoon onder elkaar (zonder JavaScript of met minder beweging).
   Onder html.reel wordt elke scène een kleefpodium waar de scroll het verhaal afspeelt. */

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--charcoal);color:var(--ivory);overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;color:inherit}
p{margin:0}
a{color:inherit}

/* ---- balk ---- */
.balk{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:22px;height:68px;padding:0 clamp(16px,4vw,48px);
  background:rgba(26,26,26,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.balk img{height:38px;width:auto}
.talen{margin-left:auto;display:flex;gap:12px;font-size:var(--maat-bijtekst);font-weight:600;letter-spacing:.06em}
.talen a{text-decoration:none;color:var(--ivorydof)}
.talen a[aria-current]{color:var(--ivory)}
.knop{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;text-decoration:none;border-radius:var(--radius-knop);
  padding:15px 28px;background:var(--goud);color:var(--charcoal);transition:background .25s ease,transform .25s ease}
.knop:hover{background:var(--ivory);color:var(--charcoal)}
.knop.klein{padding:10px 18px;font-size:14px}
.tekstlink{display:inline-block;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--goud)}
.tekstlink:hover{color:var(--goud)}
@media(max-width:560px){.talen{display:none}.balk img{height:32px}}

/* ---- hero: echte video met data die binnenkomt en verwerkt wordt ---- */
.hero .podium{padding:0;display:flex;align-items:flex-end}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .podium::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,26,26,.35),rgba(26,26,26,.15) 35%,rgba(26,26,26,.85)),linear-gradient(90deg,rgba(26,26,26,.55),transparent 55%)}
.hero-in{position:relative;z-index:3;padding:0 clamp(16px,6vw,96px) clamp(48px,10vh,110px);max-width:1100px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero h1{font-size:clamp(38px,6vw,92px);line-height:1;max-width:13ch}
.scrollhint{position:absolute;z-index:3;left:50%;bottom:22px;width:1px;height:44px;background:linear-gradient(var(--goud),transparent);animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(10px);opacity:1}}
.data-laag{position:absolute;inset:0;z-index:2;pointer-events:none;display:none}
.reel .data-laag{display:block}
.datapunt{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:2px;
  padding:10px 14px;border:1px solid rgba(211,178,126,.45);border-radius:14px;background:rgba(26,26,26,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap}
.reel .datapunt{transform:translate(-50%,-30%)}
.reel .datapunt.aan{transform:translate(-50%,-50%)}
.reel .datapunt.voorbij{opacity:0;transform:translate(calc(-50% + (73vw - var(--x)) * .9),calc(-50% + (45vh - var(--y)) * .9)) scale(.4);left:var(--x);transition:opacity .6s ease,transform .8s cubic-bezier(.6,0,.4,1)}
.d-naam{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ivorydof)}
.d-waarde{font-family:var(--kop-familie);font-weight:400;font-size:clamp(20px,1.9vw,28px);line-height:1;color:var(--ivory)}
.lijnen{position:absolute;inset:0}
.lijnen svg{width:100%;height:100%}
.lijnen line{stroke:var(--goud);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--q,0));opacity:.8}
.hub{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--goud);box-shadow:0 0 0 8px rgba(211,178,126,.18),0 0 40px rgba(211,178,126,.6)}
.hub span{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--goud)}
.reel .hub.aan{animation:puls 1.6s ease-in-out infinite}
@keyframes puls{50%{box-shadow:0 0 0 14px rgba(211,178,126,.08),0 0 60px rgba(211,178,126,.8)}}
.scorepaneel{position:absolute;right:clamp(16px,6vw,96px);top:50%;width:min(380px,36vw);transform:translateY(-50%);
  padding:22px 24px;border-radius:20px;background:rgba(26,26,26,.62);border:1px solid rgba(211,178,126,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.reel .scorepaneel{transform:translateY(-44%)}
.reel .scorepaneel.aan{transform:translateY(-50%)}
.d-label{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ivorydof);margin-bottom:14px}
.scorepaneel ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.scorepaneel li{display:grid;grid-template-columns:1fr;gap:6px}
.scorepaneel li span{font-size:14px;font-weight:600;color:var(--ivory)}
.scorepaneel i{display:block;height:6px;border-radius:99px;background:rgba(242,232,218,.14);overflow:hidden}
.scorepaneel em{display:block;height:100%;border-radius:99px;background:var(--goud);
  width:calc((var(--v) + (var(--n) - var(--v)) * max(0, min(1, var(--q,0) * 2 - 1))) * 1%);transition:width .3s linear}
.uitkomst{margin-top:18px;padding-top:14px;border-top:1px solid rgba(211,178,126,.35);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.uitkomst span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ivorydof)}
.uitkomst b{font-family:var(--kop-familie);font-weight:400;font-size:26px;color:var(--goud)}

/* ---- scène, basis ---- */
.scene{position:relative}
.podium{position:relative;min-height:100svh;overflow:hidden;padding:110px clamp(16px,6vw,96px) 64px}
.doek-houder{position:absolute;inset:0;background-size:cover;background-position:center}
.doek{position:absolute;inset:0;width:100%;height:100%;display:block}
.donker .doek-houder::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 35%,rgba(26,26,26,.55) 100%),linear-gradient(180deg,rgba(26,26,26,.45),transparent 30%,transparent 62%,rgba(26,26,26,.78))}
.laag{position:relative;z-index:2}
.licht{background:var(--ivory);color:var(--charcoal)}
.licht .podium::before,.faq::before{content:"";position:absolute;inset:0;background:url(media/merk/korrel-180.png) repeat;background-size:180px 180px;opacity:.7;pointer-events:none;mix-blend-mode:multiply}
h2{font-size:clamp(34px,4.6vw,64px);line-height:1.02;max-width:16ch}
h2.groot{font-size:clamp(40px,6.2vw,92px);max-width:14ch}

/* ---- reel: kleefpodium en stappen ---- */
.reel .scene{height:var(--hoogte)}
.reel .podium{position:sticky;top:0;height:100svh;min-height:0}
.reel .stap{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reel .stap.aan{opacity:1;transform:none}
.reel .stap.voorbij[data-tot]{opacity:0;transform:translateY(-14px)}

/* 1. bewijs */
.cijfers{display:grid;gap:clamp(14px,3vh,34px);max-width:360px}
.reel .cijfers{position:absolute;left:clamp(16px,6vw,96px);top:50%;transform:translateY(-50%)}
.cijfertegel b{display:block;font-family:var(--kop-familie);font-weight:400;font-size:clamp(44px,5.4vw,80px);line-height:1;color:var(--ivory)}
.cijfertegel span{display:block;text-shadow:0 1px 12px rgba(26,26,26,.9);margin-top:6px;font-size:var(--maat-tekstklein);line-height:1.45;color:var(--ivorydof);max-width:30ch}

/* 2. stilstand */
.reel .onder{position:absolute;left:clamp(16px,6vw,96px);right:clamp(16px,6vw,96px);bottom:clamp(40px,9vh,96px)}
.reel .onder .stap{position:absolute;left:0;bottom:0}
.slotzin{font-family:var(--kop-familie);font-size:clamp(28px,3.4vw,48px);line-height:1.1;max-width:22ch;color:var(--ivory)}

/* 3. bouwmethode */
.boven{max-width:900px}
.stenen{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column-reverse;gap:clamp(18px,4.5vh,46px)}
.reel .stenen{position:absolute;right:clamp(16px,7vw,120px);top:50%;transform:translateY(-42%);margin:0}
.steen{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid rgba(211,178,126,.5);padding-bottom:8px;min-width:230px}
.steen .nr,.trede .nr{font-size:var(--maat-bijtekst);font-weight:600;color:var(--goud);letter-spacing:.08em}
.steen b{font-family:var(--kop-familie);font-weight:400;font-size:clamp(24px,2.4vw,36px)}

/* 4. transformaties en 5. wie */
.duos{display:grid;gap:40px;margin-top:36px}
.reel .duos{position:absolute;left:0;right:0;top:57%;transform:translateY(-50%);margin:0;display:block}
.reel .duos .duo-stap{position:absolute;left:0;right:0;top:0;transform:translateY(-50%)}
.reel .duos .duo-stap.aan{transform:translateY(-50%)}
.duo-reel{margin:0 auto;display:grid;grid-template-columns:auto minmax(70px,200px) auto;justify-content:center;align-items:center;gap:clamp(8px,2vw,28px);padding:0 clamp(12px,4vw,40px)}
.duo-foto{position:relative;border-radius:20px;overflow:hidden;height:min(46svh,440px);aspect-ratio:3/4;background:rgba(26,26,26,.08)}
.duo-foto img{width:100%;height:100%;object-fit:cover}
.duo-foto span{position:absolute;left:12px;top:12px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:rgba(26,26,26,.7);color:var(--ivory);padding:5px 10px;border-radius:999px}
.pijl{width:100%;height:auto;overflow:visible}
.pijl path{fill:none;stroke:var(--goud);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:calc(260 * (1 - var(--q,1)))}
.reel .duo-foto.na{clip-path:inset(0 calc((1 - min(1, var(--q,1) * 1.4)) * 100%) 0 0)}
.duo-reel figcaption{grid-column:1/-1;text-align:center;display:flex;flex-direction:column;gap:4px;margin-top:8px}
.duo-reel .cijfer{font-size:clamp(36px,4.4vw,64px);line-height:1;color:var(--goudbruin)}
.donker .duo-reel .cijfer{color:var(--goud)}
.duo-reel figcaption span{font-size:var(--maat-tekstklein);color:var(--goldengrey)}
.reel .donkerlink{position:absolute;right:clamp(16px,6vw,96px);bottom:40px}
.wie{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(20px,4vw,64px);background:var(--charcoal)}
.wie .duo-reel{padding:0}
.wie-tekst{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.woorden{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--kop-familie);font-size:clamp(20px,2vw,28px);color:var(--goud)}
.een-zin{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--ivory);max-width:34ch}

/* 6. quote */
.quote{margin:0;max-width:1000px;display:flex;flex-direction:column;gap:14px}
.reel .quote{position:absolute;left:clamp(16px,6vw,96px);right:clamp(16px,46vw,640px);bottom:clamp(48px,11vh,120px)}
.quoteregel{display:block;font-family:var(--kop-familie);font-size:clamp(26px,3.2vw,46px);line-height:1.12;color:var(--ivory)}
.quote cite{display:block;margin-top:10px;font-style:normal;font-size:var(--maat-tekstklein);color:var(--ivorydof)}

/* 7. reviews */
.score{margin-top:14px;font-size:var(--maat-tekstklein);color:var(--goldengrey)}
.score b{font-family:var(--kop-familie);font-weight:400;font-size:28px;color:var(--charcoal)}
.score span{color:var(--goudbruin);letter-spacing:2px}
.reviews{display:grid;gap:40px;margin-top:40px}
.reel .reviews{position:absolute;left:clamp(16px,6vw,96px);right:clamp(16px,6vw,96px);top:52%;margin:0;display:block}
.reel .review{position:absolute;left:0;right:0;top:0}
.citaat{font-family:var(--kop-familie);font-size:clamp(30px,4vw,60px);line-height:1.08;max-width:24ch;color:var(--charcoal)}
.wie-zegt{display:block;margin-top:18px;font-size:var(--maat-tekstklein);font-weight:600;color:var(--goldengrey)}

/* 8. treden */
.treden{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,48px)}
.reel .treden{position:absolute;left:clamp(16px,6vw,96px);right:clamp(16px,6vw,96px);bottom:clamp(36px,8vh,90px);margin:0}
.trede{display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(211,178,126,.6);padding-top:16px}
.trede h3{font-family:var(--kop-familie);font-weight:400;font-size:clamp(22px,2.2vw,32px);line-height:1.1}
.prijs{color:var(--ivorydof);font-size:15px;margin-bottom:6px}

/* 9. faq */
.faq{position:relative;padding:clamp(64px,12vh,140px) clamp(16px,6vw,96px)}
.smal{position:relative;max-width:780px;margin:0 auto}
.faq details{border-bottom:1px solid var(--lijn)}
.faq summary{cursor:pointer;list-style:none;padding:24px 40px 24px 0;position:relative;font-family:var(--kop-familie);font-size:clamp(20px,1.9vw,26px);line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:22px;font-family:var(--tekst-familie);font-size:26px;color:var(--goudbruin);transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details div{padding:0 0 26px;color:var(--tekstgrijs);max-width:64ch}
.faq details a{color:var(--goudbruin)}

/* 10. slot */
.midden{display:flex;flex-direction:column;align-items:center;text-align:center;gap:34px}
.reel .midden{position:absolute;left:clamp(16px,6vw,96px);right:clamp(16px,6vw,96px);bottom:clamp(56px,13vh,140px)}
.midden h2{margin:0 auto}

footer{padding:40px 16px;text-align:center;font-size:var(--maat-bijtekst);color:var(--ivorydof);background:var(--charcoal)}

/* ---- gsm ---- */
@media(max-width:767px){
  .podium{padding:92px 16px 40px}
  .reel .cijfers{left:16px;right:16px;top:auto;bottom:40px;transform:none;grid-template-columns:1fr 1fr;max-width:none;gap:18px 16px}
  .cijfertegel span{font-size:12.5px}
  .reel .stenen{right:16px;left:auto;top:auto;bottom:40px;transform:none;gap:14px}
  .steen{min-width:170px}
  .duo-reel{grid-template-columns:1fr 64px 1fr;padding:0 12px}
  .reel .duos{top:56%}
  .wie{grid-template-columns:1fr;align-content:center;gap:24px}
  .reel .wie{padding-top:84px}
  .wie .duo-reel{max-width:360px;margin:0}
  .woorden{font-size:18px}
  .reel .quote{right:16px}
  .treden{grid-template-columns:1fr;gap:14px}
  .trede{padding-top:10px}
  .trede h3{font-size:21px}
}

/* ---- zonder beweging ---- */
.stil .scrollhint{display:none}
.stil .doek-houder,html:not(.reel) .doek-houder{position:relative;height:60svh;margin:-110px calc(-1 * clamp(16px,6vw,96px)) 40px}
.stil .doek,html:not(.reel) .doek{display:none}

/* leesbaarheid: donkere kant waar de tekst staat */
.links-donker .doek-houder::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(26,26,26,.82),rgba(26,26,26,.35) 42%,transparent 62%)}
.reel .onder.hoog{top:clamp(100px,16vh,160px);bottom:auto}
.reel .onder.hoog .stap{top:0;bottom:auto}
.wie .duo-foto{height:min(52svh,480px)}
@media(max-width:767px){
  .duo-foto{height:min(34svh,300px)}
  .wie .duo-foto{height:min(30svh,260px)}
  .links-donker .doek-houder::before{background:linear-gradient(0deg,rgba(26,26,26,.88),rgba(26,26,26,.3) 55%,transparent 75%)}
}

.transfo h2{max-width:26ch;font-size:clamp(28px,3.4vw,50px)}
.reel .transfo .duos{top:60%}
@media(max-width:767px){.transfo h2{font-size:26px}.reel .transfo .duos{top:58%}}

/* gsm: beeld in een band, tekst eronder */
@media(max-width:767px){
  .duo-reel{grid-template-columns:1fr 34px 1fr}
  .duo-foto,.wie .duo-foto{height:auto;width:100%}
  .wie .duo-reel{max-width:none}
  .reel .donker .doek-houder{background-size:auto 46%;background-position:center 30%;background-repeat:no-repeat;background-color:var(--charcoal)}
  .links-donker .doek-houder::before{background:none}
  .donker .doek-houder::after{background:linear-gradient(180deg,var(--charcoal) 18%,transparent 24%,transparent 62%,var(--charcoal) 68%)}
  .reel .cijfers{bottom:28px}
  .cijfertegel b{font-size:40px}
  .reel .stenen{left:16px;right:16px;bottom:30px;flex-direction:column-reverse;gap:10px}
  .steen b{font-size:22px}
  .reel .onder.hoog{top:auto;bottom:40px}
  .reel .onder.hoog .stap{top:auto;bottom:0}
  h2.groot{font-size:34px}
  .slotzin{font-size:26px}
  .reel .quote{bottom:28px}
  .quoteregel{font-size:22px}
  .reel .treden{bottom:24px;gap:10px}
  .trede{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-top:10px}
  .trede h3{font-size:19px}
  .trede .prijs{margin:0;font-size:13.5px}
  .trede .tekstlink{flex-basis:100%;font-size:14px}
  .reel .midden{bottom:40px;gap:24px}
}

/* echte beelden: donkerder zodat de tekst leest */
.echt .doek-houder::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(26,26,26,.5)}
.wie{background:transparent}
.klanten .citaat{color:var(--ivory)}
.klanten .score{color:var(--ivorydof)}
.klanten .score b{color:var(--ivory)}
.klanten .score span{color:var(--goud)}
.klanten .wie-zegt{color:var(--ivorydof)}

/* gsm: de data-hero staand */
@media(max-width:767px){
  .datapunt{left:calc((var(--x) - 50%) * 1.9);top:calc(var(--y) * .62 + 10%);padding:7px 10px;border-radius:11px}
  .d-naam{font-size:10px}
  .d-waarde{font-size:18px}
  .reel .datapunt.voorbij{transform:translate(-50%,-50%) scale(.4)}
  .lijnen svg{transform-origin:0 0;transform:translate(-95%,10%) scale(1.9,.62)}
  .hub{left:calc((var(--x) - 50%) * 1.9);top:calc(var(--y) * .62 + 10%)}
  .scorepaneel{left:16px;right:16px;width:auto;top:13%;transform:none;padding:16px 18px}
  .reel .scorepaneel,.reel .scorepaneel.aan{transform:none}
  .scorepaneel ol{gap:10px}
  .uitkomst b{font-size:22px}
  .hero h1{font-size:38px}
  .hero-in{padding-bottom:64px;gap:18px}
  .echt.donker .doek-houder::after{background:linear-gradient(180deg,var(--charcoal) 18%,transparent 26%,transparent 60%,var(--charcoal) 68%)}
  .wie-duo{order:0}
}

.scorepaneel{top:40%}
.hero h1{max-width:12ch}
.wie .duo-reel{grid-template-columns:auto 70px auto;gap:12px}
.wie .duo-foto{height:min(40svh,380px)}
@media(max-width:767px){.scorepaneel{top:13%}.wie .duo-reel{grid-template-columns:1fr 34px 1fr}.wie .duo-foto{height:auto}}

/* gsm met staande reeks: beeld over het hele scherm, tekst onderaan op een verloop */
@media(max-width:767px) and (orientation:portrait){
  .reel .donker .doek-houder[style*="--achter-staand"]{background-image:var(--achter-staand)!important;background-size:cover;background-position:center}
  .donker .doek-houder[style*="--achter-staand"]::after{background:linear-gradient(180deg,rgba(26,26,26,.55),transparent 22%,transparent 50%,rgba(26,26,26,.92) 78%)}
}

/* leesbaarheid over lichte clipbeelden */
.links-donker .doek-houder::before{background:linear-gradient(90deg,rgba(26,26,26,.9),rgba(26,26,26,.55) 38%,transparent 64%)}
.cijfertegel span{color:var(--ivory);opacity:.82}
.slotscene .doek-houder::after{background:linear-gradient(180deg,rgba(26,26,26,.35),transparent 30%,rgba(26,26,26,.55) 58%,rgba(26,26,26,.94) 82%)}
.slotscene .midden h2{text-shadow:0 2px 40px rgba(26,26,26,.95)}
.reel .slotscene .midden{bottom:clamp(40px,8vh,90px)}
@media(max-width:767px){.hero h1{font-size:31px;overflow-wrap:anywhere}}

/* ===== ronde 2 (30 sep 2026, avond) ===== */

/* balk: menu van de site, hartslaglijn die doorloopt, menuknop op gsm */
.balk{gap:18px}
.balk-logo{flex:none}
.hartslag{width:120px;height:20px;flex:none;overflow:visible;opacity:.9}
.hartslag path{fill:none;stroke:var(--goud);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60 320;animation:hartslag 2.6s linear infinite}
@keyframes hartslag{from{stroke-dashoffset:380}to{stroke-dashoffset:0}}
.menu{margin-left:auto}
.menu-in{display:flex;align-items:center;gap:22px}
.menu-in>a{font-size:14.5px;font-weight:600;text-decoration:none;color:var(--ivory);opacity:.85}
.menu-in>a:hover{opacity:1;color:var(--goud)}
.talen{display:flex;gap:10px;margin-left:10px;padding-left:16px;border-left:1px solid rgba(242,232,218,.2)}
.menu-knop{display:none;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer;flex:none}
.menu-knop span{display:block;height:2px;background:var(--ivory);margin:7px 0;transition:transform .3s ease,opacity .3s ease}
.menu-knop[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.menu-knop[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
@media(max-width:1023px){
  .hartslag{width:70px}
  .menu-knop{display:block}
  .menu{position:fixed;inset:68px 0 0 0;background:rgba(26,26,26,.96);backdrop-filter:blur(14px);padding:32px 24px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;margin:0}
  .menu.open{opacity:1;transform:none;pointer-events:auto}
  .menu-in{flex-direction:column;align-items:flex-start;gap:8px}
  .menu-in>a{font-family:var(--kop-familie);font-size:34px;opacity:1}
  .talen{display:flex;margin:24px 0 0;padding:20px 0 0;border-left:0;border-top:1px solid rgba(242,232,218,.2);font-size:14px}
  .balk .knop.klein{margin-left:auto}
}
@media(max-width:560px){.balk .knop.klein{display:none}.hartslag{display:none}}

/* hero-video als gewone video-tag */
video.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* bewijs: gecentreerd, in fasen */
.bewijs .podium{display:flex;align-items:center;justify-content:center;background:var(--charcoal)}
.bewijs .podium::before{content:"";position:absolute;inset:0;background:url(media/merk/korrel-180.png) repeat;background-size:180px 180px;opacity:.35;pointer-events:none}
.bewijs-in{width:min(1100px,100%);display:flex;flex-direction:column;align-items:center;gap:clamp(22px,4vh,40px);text-align:center}
.bewijs .cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,40px);max-width:none;width:100%}
.reel .bewijs .cijfers{position:static;transform:none}
.bewijs .cijfertegel b{font-size:clamp(40px,5vw,72px)}
.bewijs .cijfertegel b.woord{font-size:clamp(22px,2.4vw,34px);line-height:1.1;padding-top:.3em}
.bewijs .cijfertegel span{margin:8px auto 0;max-width:22ch;text-shadow:none}
.kopje{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ivorydof);margin:0 0 14px}
.bewijs .rij{width:100%}
.bewijs .rij.breed{margin-top:8px}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px}
.logo{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 6px;text-decoration:none}
.logo img{height:100%;width:auto;max-width:140px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85;transition:opacity .3s}
.logo.kleur img{filter:none}
.logo:hover img{opacity:1}
.logo-tekst{font-family:var(--kop-familie);font-size:18px;letter-spacing:.02em;color:var(--ivory);opacity:.85;white-space:nowrap}
.logo.initiaal{width:44px;border-radius:50%;border:1px solid rgba(211,178,126,.6);color:var(--goud);font-family:var(--kop-familie);font-size:16px}
.goed{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px}
.goed li{display:flex;flex-direction:column;align-items:center;gap:6px}
.goed li .logo{height:38px}
.goed li .logo img{height:100%}
.goed b{font-family:var(--kop-familie);font-weight:400;font-size:18px;color:var(--ivory)}
.goed span{font-size:13px;color:var(--ivorydof)}
.baan{overflow:hidden;width:100%;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.spoor{display:flex;align-items:center;gap:44px;width:max-content;animation:band 40s linear infinite}
.spoor .dubbel{display:flex;align-items:center;gap:44px}
.spoor .logo{height:38px}
@keyframes band{to{transform:translateX(-50%)}}
.baan:hover .spoor{animation-play-state:paused}

/* huis: labels op het huis */
.huislabels{list-style:none;margin:0;padding:0}
.reel .huislabels{position:absolute;inset:0;pointer-events:none}
.huislabel{display:flex;flex-direction:column;gap:2px;padding:10px 16px;border-left:2px solid var(--goud);background:rgba(26,26,26,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:0 12px 12px 0}
.reel .huislabel{position:absolute;left:var(--x);top:var(--y);transform:translate(0,-50%)}
.huislabel .fase{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ivorydof)}
.huislabel b{font-family:var(--kop-familie);font-weight:400;font-size:clamp(22px,2.4vw,34px);color:var(--ivory);line-height:1.05}
.huis .doek-houder::after{background:linear-gradient(180deg,rgba(26,26,26,.55),transparent 28%,transparent 70%,rgba(26,26,26,.6))}
html:not(.reel) .huislabels{display:flex;flex-direction:column-reverse;gap:14px;margin-top:24px}

/* wie: interview als achtergrond */
.video-houder{position:absolute;inset:0;overflow:hidden}
.video-houder::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,26,26,.55),rgba(26,26,26,.75) 55%,rgba(26,26,26,.9))}
.scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wie .wie-duo,.wie .wie-tekst{position:relative;z-index:2}
.wie .duo-foto{height:min(38svh,340px)}

/* huisarts: haar video als staande kaart naast de quote */
.huisarts .podium{display:grid;grid-template-columns:minmax(220px,34%) 1fr;align-items:end;gap:clamp(20px,4vw,64px);background:var(--charcoal)}
.arts-video{position:relative;align-self:center;justify-self:center;width:min(100%,360px);aspect-ratio:9/16;border-radius:24px;overflow:hidden}
.arts-video video{width:100%;height:100%;object-fit:cover;display:block}
.arts-video::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(211,178,126,.35);border-radius:24px}
.reel .huisarts .quote{position:relative;left:auto;right:auto;bottom:auto;padding-bottom:clamp(40px,10vh,110px)}

/* footer */
footer{padding:0;text-align:left}
.voet-trusted{padding:48px clamp(16px,6vw,96px) 32px;border-top:1px solid rgba(242,232,218,.12)}
.voet-trusted .kopje{text-align:center}
.voet-onder{padding:24px clamp(16px,6vw,96px) 48px;display:grid;grid-template-columns:1fr auto;gap:8px 40px;align-items:center;border-top:1px solid rgba(242,232,218,.12)}
.voet-plaats,.voet-made,.voet-rechten,.voet-identiteit{margin:0;font-size:var(--maat-bijtekst);color:var(--ivorydof)}
.voet-made{text-align:right}
.voet-made a{color:var(--goud);text-decoration:none;font-weight:600}
.voet-made a:hover{text-decoration:underline}
.voet-legal{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:flex-end}
.voet-legal a{font-size:var(--maat-bijtekst);color:var(--ivorydof);text-decoration:none}
.voet-legal a:hover{color:var(--goud)}
.voet-identiteit{grid-column:1/-1;font-size:11.5px;opacity:.7;padding-top:12px;border-top:1px solid rgba(242,232,218,.08)}

/* gsm */
@media(max-width:767px){
  .bewijs .podium{padding:84px 16px 32px;align-items:flex-start}
  .bewijs-in{gap:22px}
  .bewijs .cijfers{grid-template-columns:1fr 1fr;gap:16px 12px}
  .bewijs .cijfertegel b{font-size:36px}
  .bewijs .cijfertegel b.woord{font-size:19px}
  .bewijs .cijfertegel span{font-size:12px;max-width:none}
  .logos{gap:8px 16px}
  .logo{height:32px}
  .goed{gap:14px 20px}
  .goed b{font-size:15px}
  .goed span{font-size:12px}
  .spoor .logo{height:30px}
  .reel .huislabel{left:16px;right:auto;top:var(--y);transform:translateY(-50%)}
  .huislabel b{font-size:20px}
  .reel .huis .doek-houder{background-size:cover;background-position:70% center}
  .huis .doek-houder::after{background:linear-gradient(180deg,rgba(26,26,26,.7),transparent 30%,transparent 60%,rgba(26,26,26,.8))}
  .huisarts .podium{grid-template-columns:1fr;align-items:start;padding-top:84px}
  .arts-video{width:min(58%,220px);justify-self:start}
  .reel .huisarts .quote{padding-bottom:32px}
  .voet-onder{grid-template-columns:1fr;text-align:left}
  .voet-made,.voet-legal{text-align:left;justify-content:flex-start}
}

/* transformaties: drie polaroidcamera's (twee op gsm), kaartjes schuiven eruit en blijven gestapeld liggen */
.transfo .podium{perspective:1600px;background:radial-gradient(ellipse at 50% 20%,rgba(211,178,126,.3),transparent 60%),var(--ivory)}
.transfo .podium::before{opacity:.8}
.transfo{--cams:3;--kaart:min(270px,24vw);--camhoog:54px;--voet:clamp(56px,10vh,90px)}
.transfo .duo-stap,.transfo .camera{--kol:var(--k3);--stapel:var(--s3)}
.reel .transfo .duos{position:absolute;inset:0;top:auto;transform:none;margin:0;display:block}
.reel .transfo .duo-stap{position:absolute;left:calc((var(--kol) + .5) * 100% / var(--cams));bottom:calc(var(--voet) + var(--camhoog) - 6px);top:auto;right:auto;
  width:var(--kaart);transform:translateX(-50%);opacity:1;transition:none;z-index:var(--z)}
.polaroid{position:relative;width:100%;aspect-ratio:1/1.22;transform-style:preserve-3d;transform-origin:50% 100%;
  transform:translateY(calc((1 - min(1, var(--q,0) * 2.2)) * 100%))
            translateY(calc(var(--stapel) * -18px)) translateX(calc(var(--stapel) * 10px))
            rotateZ(calc(-3deg + var(--kol) * 2deg + var(--stapel) * 4deg))
            rotateY(calc(clamp(0, (var(--q,0) - .5) / .4, 1) * 180deg))}
.zijde{position:absolute;inset:0;background:#fbf8f2;border-radius:6px;padding:12px 12px 60px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(26,26,26,.06),0 30px 50px rgba(26,26,26,.28)}
.zijde img{width:100%;height:100%;object-fit:cover;display:block;background:#2a2a2a;border-radius:2px}
.zijde.achter{transform:rotateY(180deg)}
.ontwikkel{position:absolute;inset:12px 12px 60px;background:#e9e2d6;border-radius:2px;opacity:calc(1 - clamp(0, (var(--q,0) - .22) / .2, 1));pointer-events:none}
.zijde .rand{position:absolute;left:12px;right:12px;bottom:8px;height:46px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px}
.zijde .rand span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--goldengrey)}
.zijde .rand .cijfer{font-size:clamp(20px,2.2vw,30px);line-height:1;color:var(--goudbruin);text-align:right}
.zijde .rand small{grid-column:1/-1;font-size:11px;color:var(--goldengrey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cameras{position:absolute;left:0;right:0;bottom:var(--voet);height:var(--camhoog);z-index:9;pointer-events:none}
.camera{position:absolute;left:calc((var(--kol) + .5) * 100% / var(--cams));bottom:0;width:calc(var(--kaart) + 40px);height:100%;transform:translateX(-50%);
  background:var(--charcoal);border-radius:14px;box-shadow:0 18px 40px rgba(26,26,26,.25)}
.camera::before{content:"";position:absolute;left:10%;right:10%;top:9px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--goud),transparent)}
.camera i{position:absolute;right:16px;bottom:12px;width:12px;height:12px;border-radius:50%;border:2px solid var(--goud);opacity:.8}
.camera:nth-child(3) i{border-style:dashed}
.transfo .podium{overflow:hidden}
.reel .transfo .donkerlink{bottom:16px}
html:not(.reel) .cameras{display:none}
html:not(.reel) .duo-stap{margin-bottom:28px}
html:not(.reel) .polaroid{transform:none;width:min(320px,80vw);margin:0 auto}
html:not(.reel) .ontwikkel{display:none}
@media(max-width:767px){
  .transfo{--cams:2;--kaart:min(170px,42vw);--camhoog:40px;--voet:64px}
  .transfo .duo-stap,.transfo .camera{--kol:var(--k2);--stapel:var(--s2)}
  .transfo .camera:nth-child(3){display:none}
  .zijde{padding:8px 8px 50px}
  .ontwikkel{inset:8px 8px 50px}
  .zijde .rand{left:8px;right:8px;bottom:6px;height:40px}
  .zijde .rand .cijfer{font-size:18px}
  .zijde .rand span,.zijde .rand small{font-size:10px}
  .camera::before{top:7px}
  .camera i{width:9px;height:9px;right:12px;bottom:9px}
}

/* ===== ronde 3 ===== */
/* balk: Plateman loopt, naam ernaast, stijgende lijngrafiek */
.balk-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ivory)}
.plateman-lus{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;background:var(--charcoal)}
.balk-naam{font-family:var(--kop-familie);font-size:15px;line-height:1.02;letter-spacing:-.01em}
.hartslag{display:none}
.grafiek{width:120px;height:26px;flex:none;overflow:visible;opacity:.95}
.grafiek-lijn{fill:none;stroke:var(--goud);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:grafiek 6s cubic-bezier(.4,0,.2,1) infinite}
.grafiek-punt{fill:var(--goud);offset-path:path("M0 34 C 30 33, 50 30, 70 27 S 110 24, 130 18 S 170 14, 200 8 S 225 4, 240 3");animation:grafiekpunt 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes grafiek{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}60%{stroke-dashoffset:0;opacity:1}88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes grafiekpunt{0%{offset-distance:0%;opacity:0}8%{opacity:1}60%{offset-distance:100%;opacity:1}88%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
@media(max-width:1023px){.grafiek{width:70px}}
@media(max-width:560px){.grafiek{display:none}.balk-naam{display:none}}

/* bewijs: levende datagrafiek als achtergrond */
.data-achtergrond{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.9}
.bewijs .podium::before{z-index:1}
.bewijs .bewijs-in{z-index:2}

/* huisarts: geluidsknop, goedkeuring zonder namen, medische animatie achter */
.arts-video{z-index:2}
.geluid{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:0;border-radius:999px;background:rgba(26,26,26,.72);color:var(--ivory);font:600 13px var(--tekst-familie);cursor:pointer;backdrop-filter:blur(8px)}
.geluid svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.geluid svg path:first-child{fill:currentColor}
.geluid[aria-pressed="true"]{background:var(--goud);color:var(--charcoal)}
.geluid[aria-pressed="false"] .golf{opacity:.35}
.goedgekeurd-regel{margin-top:22px;padding-top:16px;border-top:1px solid rgba(211,178,126,.4);font-size:15px;color:var(--ivorydof);max-width:38ch}
.goedgekeurd-regel::first-letter{text-transform:uppercase}
.met-medisch .podium{background:transparent}
.met-medisch .doek-houder::after{background:linear-gradient(90deg,rgba(26,26,26,.2),rgba(26,26,26,.75) 55%,rgba(26,26,26,.92))}

/* camera's met de echte clip */
.camera.echt{background:transparent;box-shadow:none;border-radius:0;height:calc(var(--camhoog) * 2.6);overflow:hidden}
.camera.echt::before,.camera.echt i{display:none}
.camera-doek{width:100%;height:100%;display:block}

/* FAQ: donker, vraagtekens die drijven en oplichten (loopt door) */
.faq.donker{background:var(--charcoal);color:var(--ivory);overflow:hidden}
.faq.donker::before{opacity:.35;mix-blend-mode:normal}
.faq.donker .smal{position:relative;z-index:2}
.faq.donker details{border-bottom-color:rgba(242,232,218,.14)}
.faq.donker summary{color:var(--ivory)}
.faq.donker summary::after{color:var(--goud)}
.faq.donker details div{color:var(--ivorydof)}
.faq.donker details a{color:var(--goud)}
.vraagtekens{position:absolute;inset:0;pointer-events:none;z-index:1}
.vraagtekens span{position:absolute;left:var(--x);bottom:-10%;font-family:var(--kop-familie);font-size:calc(80px * var(--s));line-height:1;color:var(--goud);opacity:0;
  animation:drijf var(--t) linear infinite;animation-delay:calc(-1 * var(--d))}
@keyframes drijf{0%{transform:translateY(0) rotate(-6deg);opacity:0}12%{opacity:.14}45%{opacity:.34;text-shadow:0 0 30px rgba(211,178,126,.6)}70%{opacity:.12;text-shadow:none}100%{transform:translateY(-130vh) rotate(8deg);opacity:0}}
@media(max-width:767px){.vraagtekens span{font-size:calc(52px * var(--s))}}
@media(prefers-reduced-motion:reduce){.vraagtekens,.grafiek,.spoor{animation:none}.vraagtekens span{opacity:.12;bottom:auto;top:calc(var(--d) * 8%)}}

/* balk: niets mag afbreken */
.menu-in>a,.balk .knop.klein,.balk-naam{white-space:nowrap}
.balk{gap:14px}
.menu-in{gap:16px}
@media(min-width:1024px) and (max-width:1180px){.grafiek{width:80px}.menu-in>a{font-size:13.5px}.balk .knop.klein{padding:9px 14px;font-size:13px}}
/* logo's met eigen vlak: wit kaartje */
.logo.kleur img{filter:none;background:#fff;padding:5px 8px;border-radius:8px;height:100%;box-sizing:border-box}

.plateman-lus{width:44px;height:44px;border-radius:50%;display:block}

/* gsm, ronde 3: data boven de kop, menu als laag onder de balk, huislabels lager */
@media(max-width:767px){
  .datapunt,.hub{top:calc(var(--y) * .48 + 7%)}
  .lijnen svg{transform:translate(-95%,7%) scale(1.9,.48)}
  .hero h1{font-size:30px;overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto}
  .hero-in{padding-bottom:56px}
  .reel .huislabel{top:calc(var(--y) * .68 + 28%)}
}
@media(max-width:1023px){
  .menu{position:absolute;top:100%;left:0;right:0;height:calc(100svh - 68px);inset:auto 0 auto 0;top:100%;z-index:60}
  .menu-open .balk{background:var(--charcoal)}
}

/* voorbeeldprofiel bij de oproep onderaan (uit de hero verhuisd, 30 sep 2026) */
.slot-data{z-index:3}
.slotscene .scorepaneel{top:22%;right:clamp(16px,6vw,96px);width:min(360px,34vw)}
.reel .slotscene .scorepaneel{transform:translateY(8px)}
.reel .slotscene .scorepaneel.aan{transform:none}
.reel .slotscene .midden{left:clamp(16px,6vw,96px);right:auto;width:min(560px,55vw);align-items:flex-start;text-align:left}
.reel .slotscene .midden h2{margin:0}
.reel .hub.aan{animation:puls 1.6s ease-in-out infinite}
@media(max-width:767px){
  .slotscene .scorepaneel{left:16px;right:16px;width:auto;top:11%;transform:none}
  .reel .slotscene .midden{left:16px;right:16px;width:auto}
  .slotscene h2.groot{font-size:30px}
}

/* Trusted by met de vier hartjes, zoals op de site */
.kopje .hartjes{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.kopje .hartjes svg{width:12px;height:12px;fill:var(--goud)}

/* wie ben ik: woorden met een link */
.woord a{color:inherit;text-decoration:underline;text-decoration-color:rgba(211,178,126,.5);text-underline-offset:5px}
.woord a:hover{color:var(--ivory);text-decoration-color:var(--ivory)}
/* huisarts: de goedkeuring als kop, dan de quote */
.quote-blok{display:flex;flex-direction:column;gap:22px;max-width:1000px;padding-bottom:clamp(40px,10vh,110px)}
.goedgekeurd-kop{font-size:clamp(30px,3.8vw,56px);line-height:1.02;max-width:20ch;color:var(--ivory)}
.goedgekeurd-kop::first-letter{text-transform:uppercase}
.reel .kopstap{transform:translateY(24px) scale(.96)}
.reel .kopstap.aan{transform:none}
.huisarts .quote{margin:0;padding-left:18px;border-left:2px solid var(--goud)}
.quoteregel{font-size:clamp(20px,2.2vw,32px);color:var(--ivorydof)}
.huisarts .quote cite{margin-top:12px}
.geluid{left:auto;right:12px;bottom:12px;padding:12px 18px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.35);border:1px solid rgba(211,178,126,.5)}
.geluid svg{width:20px;height:20px}
@media(max-width:767px){
  .goedgekeurd-kop{font-size:26px}
  .quoteregel{font-size:17px}
  .quote-blok{gap:14px;padding-bottom:28px}
  .geluid{padding:10px 14px;font-size:13px}
}

/* overgang slot naar FAQ: het huis vervaagt onderaan naar charcoal en de vraagtekens stijgen erin door */
.slotscene .doek-houder::after{background:linear-gradient(180deg,rgba(26,26,26,.35),transparent 30%,rgba(26,26,26,.55) 55%,rgba(26,26,26,.94) 78%,var(--charcoal) 100%)}
.faq.donker{overflow:visible;position:relative;z-index:4;padding-top:clamp(24px,5vh,60px)}
.faq.donker::before{display:none}
.vraagtekens{inset:-70vh 0 0 0;overflow:visible}
.vraagtekens span{bottom:0}
@keyframes drijf{0%{transform:translateY(0) rotate(-6deg);opacity:0}10%{opacity:.16}40%{opacity:.36;text-shadow:0 0 34px rgba(211,178,126,.65)}75%{opacity:.1;text-shadow:none}100%{transform:translateY(-170vh) rotate(8deg);opacity:0}}

/* voorbeeldprofiel met echte scores, zoals het rapport van de healthcheck */
.hc-score{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid rgba(211,178,126,.35)}
.hc-score span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ivorydof)}
.hc-score b{font-family:var(--kop-familie);font-weight:400;font-size:15px;color:var(--ivorydof);grid-row:2}
.hc-score b strong{font-weight:400;font-size:clamp(34px,3.2vw,44px);line-height:1;color:var(--ivory)}
.hc-score small{grid-column:2;grid-row:1/3;align-self:center;font-size:13px;font-weight:600;color:var(--goud);text-align:right}
.scorepaneel li{grid-template-columns:1fr auto}
.scorepaneel li b{font-family:var(--kop-familie);font-weight:400;font-size:15px;color:var(--ivory)}
.scorepaneel li i{grid-column:1/-1}
.scorepaneel .uitkomst+.uitkomst{margin-top:10px;padding-top:10px}
@media(max-width:767px){.hc-score b strong{font-size:30px}}

/* camera's bovenaan met de echte clip: de foto komt eronder uit en zakt naar zijn plaats */
.transfo.met-camera{--camtop:clamp(84px,14vh,140px);--camhoog:min(230px,22vh)}
.met-camera .cameras{top:var(--camtop);bottom:auto;height:var(--camhoog);z-index:9}
.met-camera .camera.echt{width:calc(var(--kaart) + 60px);height:100%;border-radius:0;background:transparent;box-shadow:none;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 60% 70% at 50% 45%,#000 55%,transparent 100%)}
.reel .met-camera .duo-stap{bottom:auto;top:calc(var(--camtop) + var(--camhoog) * .78)}
.met-camera .polaroid{transform-origin:50% 0;
  transform:translateY(calc((1 - clamp(0, (var(--q,0) - .22) / .33, 1)) * -78%))
            translateY(calc(var(--stapel) * 16px)) translateX(calc(var(--stapel) * 10px))
            rotateZ(calc(-3deg + var(--kol) * 2deg + var(--stapel) * 4deg))
            rotateY(calc(clamp(0, (var(--q,0) - .68) / .3, 1) * 180deg))}
.met-camera .ontwikkel{opacity:calc(1 - clamp(0, (var(--q,0) - .45) / .2, 1))}
.reel .met-camera .duos{top:0}
@media(max-width:767px){.transfo.met-camera{--camtop:88px;--camhoog:min(170px,20vh)}}

/* camera's: lager en kleiner, zodat de kop vrij blijft en de foto volledig uit de camera komt */
.transfo.met-camera{--camtop:clamp(150px,20vh,190px);--camhoog:min(210px,27vh)}
.met-camera .camera.echt{-webkit-mask-image:radial-gradient(ellipse 55% 62% at 50% 46%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 55% 62% at 50% 46%,#000 50%,transparent 100%)}
.transfo h2{font-size:clamp(26px,3vw,44px)}
@media(max-width:767px){.transfo.met-camera{--camtop:96px;--camhoog:min(180px,22vh)}.transfo h2{font-size:24px}}
/* Trusted by: hartjes die omhoog zweven, zoals in de voettekst van de site */
.kopje .hartjes{position:relative;display:inline-block;width:70px;height:22px;vertical-align:middle;margin-left:4px}
.kopje .hartjes svg{position:absolute;bottom:0;width:13px;height:13px;fill:var(--goud);opacity:0;animation:hartzweef 3.8s ease-in-out infinite}
.kopje .hartjes svg:nth-child(1){left:4px}
.kopje .hartjes svg:nth-child(2){left:22px;width:9px;height:9px;fill:var(--ivory);animation-delay:.95s}
.kopje .hartjes svg:nth-child(3){left:38px;animation-delay:1.9s}
.kopje .hartjes svg:nth-child(4){left:56px;width:10px;height:10px;fill:var(--ivory);animation-delay:2.85s}
@keyframes hartzweef{0%{transform:translateY(8px) scale(.6);opacity:0}18%{opacity:.95}100%{transform:translateY(-30px) scale(1.15) rotate(-8deg);opacity:0}}
.kopje{overflow:visible}

/* het kaartje komt pas tevoorschijn onder de sleuf van de camera: alles erboven is afgesneden */
.transfo.met-camera{--camtop:clamp(180px,24vh,220px);--camhoog:min(200px,26vh);--kaart:min(240px,22vw)}
.reel .met-camera .duo-stap{top:calc(var(--camtop) + var(--camhoog) * .58);clip-path:inset(0 -80px -800px -80px)}
.met-camera .cameras{z-index:5}
@media(max-width:767px){.transfo.met-camera{--camtop:150px;--camhoog:min(170px,21vh);--kaart:min(160px,40vw)}}
.transfo.met-camera{--camtop:clamp(200px,26vh,240px);--kaart:min(220px,20vw)}
@media(max-width:767px){.transfo.met-camera{--kaart:min(150px,38vw)}}

/* reviews: echte clip die loopt, lange citaten kleiner, nooit afgesneden */
.klanten-video::after{background:linear-gradient(180deg,rgba(26,26,26,.55),rgba(26,26,26,.7) 40%,rgba(26,26,26,.85))}
.klanten .citaat{max-width:30ch}
.klanten .citaat.lang{font-size:clamp(22px,2.6vw,38px);max-width:44ch}
.reel .klanten .reviews{top:auto;bottom:clamp(56px,12vh,120px)}
.reel .klanten .review{top:auto;bottom:0}
@media(max-width:767px){.klanten .citaat{font-size:26px}.klanten .citaat.lang{font-size:19px;max-width:none}.reel .klanten .reviews{bottom:40px}}

/* camera's: groter en zonder strakke ovaal, zodat de echte camera leesbaar is */
.transfo.met-camera{--camhoog:min(230px,30vh)}
.met-camera .camera.echt{width:calc(var(--kaart) + 140px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 100%);mask-composite:intersect}
@media(max-width:767px){.met-camera .camera.echt{width:calc(var(--kaart) + 60px)}}

/* ===== hero: de datalus (loopt door, los van het scrollen) ===== */
.hero .podium{position:relative;height:100svh;min-height:600px}
.reel .hero .podium{position:relative;height:100svh}
.data-laag{--hx:74%;--hy:44%;--s:1}
.wolk{position:absolute;inset:0;transform-origin:var(--hx) var(--hy);animation:wolklus 16s cubic-bezier(.4,0,.2,1) infinite}
.netwerk{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.netwerk line{stroke:var(--goud);stroke-width:1;opacity:.55;stroke-dasharray:6 10;animation:stroom 1.6s linear infinite}
.netwerk line.hub{opacity:.3;stroke-dasharray:none;animation:none}
@keyframes stroom{to{stroke-dashoffset:-16}}
.datapunt{left:calc(var(--hx) + var(--dx) * var(--s) * 1%);top:calc(var(--hy) + var(--dy) * var(--s) * 1%);transform:translate(-50%,-50%);
  animation:blokzweef 6s ease-in-out infinite alternate,blokbinnen 16s ease-out infinite;animation-delay:calc(var(--i) * -.7s),calc(var(--i) * .12s)}
.reel .datapunt{transform:translate(-50%,-50%)}
@keyframes blokzweef{from{margin-top:-4px}to{margin-top:5px}}
@keyframes blokbinnen{0%{opacity:0;scale:.7}6%{opacity:1;scale:1}100%{opacity:1;scale:1}}
@keyframes wolklus{0%{transform:scale(.7);opacity:0}9%{transform:scale(1) rotate(0deg);opacity:1}66%{transform:scale(1) rotate(0deg);opacity:1}
  80%{transform:scale(.01) rotate(30deg);opacity:1}81%{opacity:0}100%{transform:scale(.01) rotate(30deg);opacity:0}}
.hub{left:var(--hx);top:var(--hy);animation:hubpuls 16s ease-in-out infinite}
.hub span{opacity:0;animation:hublabel 16s ease-in-out infinite}
@keyframes hubpuls{0%,76%{box-shadow:0 0 0 8px rgba(211,178,126,.18),0 0 40px rgba(211,178,126,.6);transform:translate(-50%,-50%) scale(1)}
  80%{transform:translate(-50%,-50%) scale(2.4);box-shadow:0 0 0 22px rgba(211,178,126,.12),0 0 120px rgba(211,178,126,.95)}
  86%{transform:translate(-50%,-50%) scale(1.4)}94%{transform:translate(-50%,-50%) scale(1.4);box-shadow:0 0 0 12px rgba(211,178,126,.14),0 0 60px rgba(211,178,126,.7)}
  100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 8px rgba(211,178,126,.18),0 0 40px rgba(211,178,126,.6)}}
@keyframes hublabel{0%,80%{opacity:0;transform:translate(-50%,6px)}85%,94%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.lijnen{display:none}
@media(max-width:767px){
  .data-laag{--hx:50%;--hy:26%;--s:.62}
  .datapunt,.hub{top:calc(var(--hy) + var(--dy) * var(--s) * 1%)}
  .hub{top:var(--hy)}
  .hero .podium{min-height:560px}
}
@media(prefers-reduced-motion:reduce){.wolk,.datapunt,.hub,.hub span,.netwerk line{animation:none}.wolk{opacity:1}.hub span{opacity:1}}

/* gsm: de datawolk breder uitgezet, camera's kleiner */
@media(max-width:767px){
  .data-laag{--hx:50%;--hy:31%;--sx:1.75;--sy:.72}
  .datapunt{left:calc(var(--hx) + var(--dx) * var(--sx) * 1%);top:calc(var(--hy) + var(--dy) * var(--sy) * 1%);padding:6px 9px}
  .d-naam{font-size:9.5px}.d-waarde{font-size:16px}
  .hub span{font-size:11px}
}
/* gsm: twee camera's, kolomvariabelen na alle andere regels zodat ze zeker winnen */
@media(max-width:767px){.transfo .duo-stap,.transfo .camera{--kol:var(--k2);--stapel:var(--s2)}}
/* de kaartjes staan gecentreerd onder hun camera, in elke toestand */
.reel .transfo .duos .duo-stap,.reel .transfo .duos .duo-stap.aan,.reel .transfo .duos .duo-stap.voorbij{transform:translateX(-50%);opacity:1}

/* bewijs met de goudstofclip als achtergrond; de getekende grafiek blijft er zacht bovenop */
.bewijs.met-data .podium{background:transparent}
.bewijs.met-data .podium::before{display:none}
.bewijs.met-data .doek-houder::after{background:linear-gradient(180deg,rgba(26,26,26,.55),rgba(26,26,26,.35) 40%,rgba(26,26,26,.7))}
.bewijs.met-data .data-achtergrond{opacity:.35;z-index:1}
.bewijs.met-data .doek-houder::after{background:linear-gradient(180deg,rgba(26,26,26,.6),rgba(26,26,26,.5) 40%,rgba(26,26,26,.75))}

/* hero blijft kleven terwijl de lus draait; de tekst glijdt op het einde weg naar de volgende scène */
.reel .hero .podium{position:sticky;top:0;height:100svh}
.reel .hero .hero-in{transition:none;opacity:calc(1 - clamp(0, (var(--p,0) - .7) / .3, 1));transform:translateY(calc(clamp(0, (var(--p,0) - .7) / .3, 1) * -40px))}
.reel .hero .scrollhint{opacity:calc(1 - clamp(0, var(--p,0) / .15, 1))}
/* de datawolk rechts van de kop, nooit erachter en nooit buiten beeld */
.hero h1{font-size:clamp(38px,5.2vw,92px);max-width:11ch}
.data-laag{--hx:76%;--hy:44%;--sx:.78;--sy:.9}
.datapunt{left:calc(var(--hx) + var(--dx) * var(--sx) * 1%);top:calc(var(--hy) + var(--dy) * var(--sy) * 1%)}
@media(min-width:768px) and (max-width:1180px){.data-laag{--hx:77%;--sx:.68;--sy:.82}.d-waarde{font-size:18px}.datapunt{padding:7px 10px}}
@media(min-width:1600px){.data-laag{--sx:.62}}

/* het kaartje hangt uit de sleuf: bovenkant op de onderrand van de camerabody */
.reel .met-camera .duo-stap{top:calc(var(--camtop) + var(--camhoog) * .53)}
.met-camera .polaroid{transform:translateY(calc((1 - clamp(0, (var(--q,0) - .3) / .3, 1)) * -92%))
            translateY(calc(var(--stapel) * 16px)) translateX(calc(var(--stapel) * 10px))
            rotateZ(calc(-3deg + var(--kol) * 2deg + var(--stapel) * 4deg))
            rotateY(calc(clamp(0, (var(--q,0) - .68) / .3, 1) * 180deg))}
.met-camera .ontwikkel{opacity:calc(1 - clamp(0, (var(--q,0) - .5) / .18, 1))}

/* reviews klikbaar naar de bron; score met aantal beoordelingen */
.review-link{display:block;text-decoration:none;color:inherit}
.review-link:hover .citaat{color:var(--goud)}
.wie-zegt em{font-style:normal;font-weight:400;color:var(--goud);margin-left:8px;opacity:0;transition:opacity .3s}
.review-link:hover .wie-zegt em{opacity:1}
.score a{text-decoration:none;color:inherit}
.score a:hover b{color:var(--goud)}

.score .aantal{color:var(--ivory);font-weight:600;letter-spacing:0;margin-left:6px}
.score em{font-style:normal;color:var(--goud);margin-left:10px;font-weight:600}

/* hero: de scroll verwerkt de data (de wolk trekt samen naar het punt), de lus houdt ze intussen levend */
.hero-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.hero-plaats{font-size:var(--maat-tekstklein);color:var(--ivorydof);letter-spacing:.04em;margin-top:-6px}
.reel .hero .hero-in{opacity:calc(1 - clamp(0, (var(--p,0) - .8) / .2, 1));transform:translateY(calc(clamp(0, (var(--p,0) - .8) / .2, 1) * -40px))}
.reel .wolk{animation:none;transform:scale(calc(1 - min(1, var(--p,0) / .85) * .985)) rotate(calc(min(1, var(--p,0) / .85) * 28deg));
  opacity:calc(1 - clamp(0, (var(--p,0) - .78) / .08, 1))}
.reel .datapunt{animation:blokzweef 6s ease-in-out infinite alternate,blokbinnen 2.4s ease-out 1 both}
.reel .hub{animation:none;transform:translate(-50%,-50%) scale(calc(1 + min(1, var(--p,0) / .85) * 1.6));
  box-shadow:0 0 0 calc(8px + var(--p,0) * 16px) rgba(211,178,126,.16),0 0 calc(40px + var(--p,0) * 90px) rgba(211,178,126,.75)}
.reel .hub span{animation:none;opacity:clamp(0, (var(--p,0) - .72) / .12, 1);transform:translate(-50%,calc((1 - clamp(0, (var(--p,0) - .72) / .12, 1)) * 8px))}
.reel .hero video.hero-video{transform:scale(calc(1 + var(--p,0) * .08));transform-origin:50% 40%}
@media(max-width:560px){.hero-knoppen{gap:12px 18px}}
/* het punt groeit, het label niet mee */
.reel .hub{transform:translate(-50%,-50%) scale(calc(1 + min(1, var(--p,0) / .85) * 1.2))}
.reel .hub span{transform:translate(-50%,calc((1 - clamp(0, (var(--p,0) - .72) / .12, 1)) * 8px + 4px)) scale(calc(1 / (1 + min(1, var(--p,0) / .85) * 1.2)));transform-origin:50% 0}

/* ===== transformaties als galerijmuur ===== */
.galerij .podium{overflow:hidden;background:#0d0d0d}
.wand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100vw,calc(100svh * 16 / 9));aspect-ratio:16/9}
.wand .doek-houder{position:absolute;inset:0;background-size:cover;background-position:center}
.wand .doek-houder::after{display:none}
.lijsten{position:absolute;inset:0}
.lijsten.staand{display:none}
.lijst{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);overflow:visible}
.reel .lijst{transform:none;opacity:1}
.lijst img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lijst .voor{opacity:calc(clamp(0, var(--q,0) / .4, 1) * (1 - clamp(0, (var(--q,0) - .55) / .3, 1)) + clamp(0, (var(--q,0) - .55) / .3, 1) * 0);
  filter:brightness(calc(.4 + clamp(0, var(--q,0) / .4, 1) * .6))}
.lijst .na{opacity:clamp(0, (var(--q,0) - .55) / .3, 1)}
.reel .lijst:not(.aan) img{opacity:0}
.lijst::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 40px rgba(0,0,0,.55);opacity:calc(1 - clamp(0, var(--q,0) / .4, 1) * .6)}
.plaatje{position:absolute;left:50%;top:calc(100% + 4.5%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 14px;border-radius:4px;
  background:linear-gradient(180deg,#e2c48e,#b8935a);color:#2a2418;box-shadow:0 6px 18px rgba(0,0,0,.5);white-space:nowrap;
  opacity:clamp(0, (var(--q,0) - .6) / .25, 1)}
.plaatje b{font-family:var(--kop-familie);font-weight:400;font-size:clamp(14px,1.5vw,22px);line-height:1}
.plaatje small{font-size:clamp(9px,.75vw,11px);letter-spacing:.06em;text-transform:uppercase;max-width:22ch;overflow:hidden;text-overflow:ellipsis}
.galerij h2{color:var(--ivory);font-size:clamp(26px,3vw,44px)}
.reel .galerij .donkerlink{bottom:24px}
html:not(.reel) .wand{position:relative;left:auto;top:auto;transform:none;width:100%;margin:80px 0 0}
html:not(.reel) .lijst img{opacity:1}
@media(max-width:767px) and (orientation:portrait){
  .wand{width:max(100vw,calc(100svh * 9 / 16));aspect-ratio:9/16}
  .lijsten.breed{display:none}.lijsten.staand{display:block}
  .plaatje{padding:4px 9px;top:calc(100% + 2.5%)}
  .plaatje b{font-size:14px}.plaatje small{font-size:8.5px;max-width:16ch}
  .galerij h2{font-size:24px}
}
/* de muur past volledig in beeld; de rand erboven en eronder is even donker als de zaal */
.wand{width:min(100vw,calc(100svh * 16 / 9))}
.galerij .podium{background:#0b0b0b}
.galerij h2{max-width:22ch;font-size:clamp(22px,2.4vw,34px)}
.reel .galerij .boven{position:absolute;left:clamp(16px,6vw,96px);top:clamp(80px,11vh,110px)}
@media(max-width:767px) and (orientation:portrait){.wand{width:min(100vw,calc(100svh * 9 / 16))}.reel .galerij .boven{top:80px}}

/* galerij: de vloer met weerspiegeling vervaagt, de muur staat iets hoger */
.wand{top:47%}
.wand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,#0b0b0b 70%);pointer-events:none}
.plaatje{z-index:2}

/* op de echte homepage: de skiplink van de site onzichtbaar tot hij focus krijgt */
.skiplink{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--goud);color:var(--charcoal);padding:10px 16px;border-radius:999px;text-decoration:none}
.skiplink:focus{left:16px}

/* ===== ronde 5 (2 okt 2026, Timons gsm-feedback) ===== */
/* Trusted by: sneller, boven en in de voet ("moet sneller doorgaan") */
.spoor{animation-duration:18s}

/* hero: de kop breekt nooit meer af met een streepje */
.hero h1{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal}
/* hero: elk blokje vloeit op zijn beurt in het gouden punt (--t per blokje uit --p en --i); de wolk zelf krimpt en draait niet meer */
.datapunt{--ux:var(--dx);--uy:var(--dy)}
.reel .hero .datapunt{--t:clamp(0, (var(--p,0) - .1 - var(--i) * .03) / .45, 1);
  left:calc(var(--hx) + var(--ux) * var(--sx) * (1 - var(--t)) * 1%);top:calc(var(--hy) + var(--uy) * var(--sy) * (1 - var(--t)) * 1%);
  opacity:calc(1 - clamp(0, (var(--t) - .55) / .45, 1));scale:calc(1 - var(--t) * .55);
  animation:blokzweef 6s ease-in-out infinite alternate,blokbinnen2 1.6s cubic-bezier(.2,.7,.2,1) 1 both;animation-delay:calc(var(--i) * -.7s),calc(.2s + var(--i) * .09s)}
@keyframes blokbinnen2{from{translate:0 16px;filter:opacity(0) blur(6px)}to{translate:0 0;filter:opacity(1) blur(0)}}
.reel .wolk{animation:none;transform:none;opacity:calc(1 - clamp(0, (var(--p,0) - .9) / .1, 1))}
.netwerk line{transition:none}
@media(max-width:767px){
  .data-laag{--hx:50%;--hy:30%;--sx:1.1;--sy:.5}
  .datapunt{--ux:var(--mx);--uy:var(--my);padding:5px 8px;border-radius:9px;gap:1px}
  .reel .hero .datapunt{left:calc(var(--hx) + var(--ux) * var(--sx) * (1 - var(--t)) * 1%);top:calc(var(--hy) + var(--uy) * var(--sy) * (1 - var(--t)) * 1%)}
  .hub,.reel .hub{left:var(--hx);top:var(--hy)}
  .d-naam{font-size:9px;letter-spacing:.05em}
  .d-waarde{font-size:15px}
  .hub span{font-size:10.5px}
  .hero h1{font-size:min(30px,8vw);max-width:none}
  :lang(fr) .hero h1{font-size:min(26px,7vw)}
  .hero-in{padding-bottom:48px;gap:16px}
}

/* galerij: echter. Spotlicht van boven op elke foto, een zweem glas, korrel over de hele zaal, een messing bordje met reliëf */
.lijst::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:clamp(0, var(--q,0) / .4, 1);
  background:linear-gradient(180deg,rgba(255,236,200,.16),rgba(255,236,200,.04) 32%,rgba(0,0,0,.08) 70%,rgba(0,0,0,.3) 100%),
             linear-gradient(112deg,transparent 42%,rgba(255,255,255,.05) 49%,transparent 56%)}
.lijst::after{box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 8px 18px rgba(0,0,0,.5),inset 0 0 40px rgba(0,0,0,.35)}
.lijst img{filter:saturate(.9) contrast(1.03)}
.wand::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:url(media/merk/korrel-180.png) repeat;background-size:140px 140px;opacity:.16;mix-blend-mode:overlay}
.plaatje{border-radius:2px;background:linear-gradient(180deg,#dcc08a 0%,#bf9d62 50%,#a9874c 100%);color:#3a2e19;text-shadow:0 1px 0 rgba(255,255,255,.28);
  box-shadow:0 2px 3px rgba(0,0,0,.65),0 8px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.3)}
/* de zesde lijst op gsm draagt de link naar alle transformaties, als een bordje in de lijst */
.lijst.zesde{pointer-events:auto}
.lijst-link{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;text-decoration:none;color:var(--goud);
  background:radial-gradient(ellipse at 50% 20%,rgba(211,178,126,.12),transparent 70%);opacity:clamp(0, var(--q,0) / .4, 1)}
.lijst-link span{font-family:var(--kop-familie);font-size:clamp(14px,4vw,17px);line-height:1.15;text-align:center}
.lijst-link b{font-size:22px;line-height:1}
.reel .lijst.zesde::before,.reel .lijst.zesde::after{display:none}
html:not(.reel) .lijst.zesde{display:none}
@media(max-width:767px) and (orientation:portrait){
  /* de muur past volledig onder de kop: bovenste lijsten niet meer achter de kop, onderste niet meer onder de rand */
  .reel .wand{top:170px;bottom:auto;height:min(calc(100svh - 170px),calc(100vw * 16 / 9));width:auto;aspect-ratio:9/16;transform:translateX(-50%)}
  .reel .galerij .donkerlink{display:none}
  .galerij h2{font-size:22px;max-width:none}
}

/* huisarts: zonder video naast de quote; de link onder de quote opent het interview in een laag */
.huisarts .podium{grid-template-columns:1fr}
.quote-blok{max-width:900px}
.interview-knop{background:none;border:0;padding:0;margin-top:4px;cursor:pointer;display:inline-flex;align-items:center;gap:12px;color:var(--ivory);
  font:600 15px var(--tekst-familie);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--goud)}
.interview-knop svg{width:38px;height:38px;padding:10px;border-radius:50%;background:var(--goud);fill:var(--charcoal);flex:none;transition:transform .25s ease}
.interview-knop:hover{color:var(--goud)}
.interview-knop:hover svg{transform:scale(1.08)}
.videolaag{border:0;padding:0;margin:auto;background:transparent;max-width:none;max-height:none;overflow:visible}
.videolaag::backdrop{background:rgba(8,8,8,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.videolaag video{display:block;height:min(88svh,1280px);aspect-ratio:9/16;width:auto;max-width:94vw;border-radius:18px;background:#000;object-fit:cover;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.videolaag-sluit{position:fixed;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,232,218,.3);background:rgba(26,26,26,.75);color:var(--ivory);font:300 28px/1 var(--tekst-familie);cursor:pointer}
.videolaag-sluit:hover{background:var(--goud);color:var(--charcoal)}
@media(max-width:767px){.interview-knop{font-size:14px}.interview-knop svg{width:34px;height:34px;padding:9px}}

/* reviews op FR en EN: vertaald uit het Nederlands, en dat staat erbij */
.wie-zegt .vertaald{font-weight:400;opacity:.7;margin-left:4px}

/* slotscène: trager, profiel pas halfweg; op gsm kop boven, huis in het midden, profiel eronder en compact */
.reel .slotscene .scorepaneel{transform:translateY(24px)}
.reel .slotscene .scorepaneel.aan{transform:none}
@media(max-width:767px){
  .reel .slotscene .midden{top:84px;bottom:auto;left:16px;right:16px;width:auto;gap:14px}
  .slotscene h2.groot{font-size:28px}
  .slotscene .scorepaneel{top:auto;bottom:14px;left:16px;right:16px;width:auto;padding:12px 14px;border-radius:16px}
  .reel .slotscene .scorepaneel{transform:translateY(30px)}
  .reel .slotscene .scorepaneel.aan{transform:none}
  .slotscene .d-label{margin-bottom:6px;font-size:10px}
  .slotscene .hc-score{margin-bottom:8px;padding-bottom:8px;gap:2px 10px}
  .slotscene .hc-score b strong{font-size:24px}
  .slotscene .hc-score b{font-size:13px}
  .slotscene .hc-score small{font-size:12px}
  .slotscene .scorepaneel ol{gap:5px}
  .slotscene .scorepaneel li{gap:2px}
  .slotscene .scorepaneel li span,.slotscene .scorepaneel li b{font-size:12.5px}
  .slotscene .scorepaneel i{height:4px}
  .slotscene .uitkomst{margin-top:8px;padding-top:7px}
  .slotscene .scorepaneel .uitkomst+.uitkomst{margin-top:5px;padding-top:5px}
  .slotscene .uitkomst span{font-size:10.5px}
  .slotscene .uitkomst b{font-size:17px}
  .slotscene .doek-houder::after{background:linear-gradient(180deg,var(--charcoal) 26%,transparent 34%,transparent 62%,rgba(26,26,26,.9) 72%,var(--charcoal) 100%)}
}
/* huisarts op gsm: de kop en de quote staan bovenaan, dus daar moet de medische figuur donker genoeg zijn om te lezen */
@media(max-width:767px){
  .met-medisch .doek-houder::after{background:linear-gradient(180deg,rgba(26,26,26,.9) 0%,rgba(26,26,26,.82) 40%,rgba(26,26,26,.35) 62%,rgba(26,26,26,.15) 80%,rgba(26,26,26,.6) 100%)}
  .met-medisch .doek-houder[style*="--achter-staand"]::after{background:linear-gradient(180deg,rgba(26,26,26,.9) 0%,rgba(26,26,26,.82) 40%,rgba(26,26,26,.35) 62%,rgba(26,26,26,.15) 80%,rgba(26,26,26,.6) 100%)}
}
/* breed: de wolk iets verder van de kop, zodat geen blokje de laatste letters raakt */
@media(min-width:1181px){.data-laag{--hx:78%;--sx:.7}}