/* 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 ---- */
/* 13 okt 2026: de balk zelf staat in /css/balk.css (doorzichtig bovenaan, zwevende pil bij het scrollen, Resources-klapmenu,
   lichte of donkere bovenkant). Hier enkel wat de reel nog eigen heeft; geen achtergrond meer op de balk. */
.balk{position:fixed;z-index:50;display:flex;align-items:center;gap:22px;height:68px;padding:0 clamp(16px,4vw,48px)}
.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}}

/* ---- Nieuw op de blog (4 okt 2026): drie kaarten tussen de FAQ en de voet, in de donkere doorloop ---- */
.blogstrook{background:var(--charcoal);color:var(--ivory);padding:clamp(56px,10vh,120px) clamp(16px,6vw,96px);border-top:1px solid rgba(242,232,218,.12)}
.blogstrook-in{max-width:1180px;margin:0 auto}
.blogstrook-kop{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vh,44px)}
.blogstrook-kop h2{font-family:var(--kop-familie);font-weight:400;font-size:clamp(30px,3.6vw,52px);line-height:1.05;margin:0}
.blogstrook .tekstlink{color:var(--ivory)}
.blogkaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.blogkaart{display:block;color:inherit;text-decoration:none}
.blogkaart img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:14px;filter:saturate(.9);transition:transform .4s ease,filter .4s ease}
.blogkaart:hover img{transform:translateY(-4px);filter:saturate(1)}
.blogmeta{display:block;margin:18px 0 8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ivorydof)}
.blogkaart h3{font-family:var(--kop-familie);font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.2;margin:0 0 10px;color:var(--ivory)}
.blogkaart:hover h3{color:var(--goud)}
.blogkaart p{margin:0;font-size:15px;line-height:1.55;color:var(--ivorydof);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:767px){.blogkaarten{grid-template-columns:1fr;gap:28px}.blogkaart{display:grid;grid-template-columns:104px 1fr;grid-template-rows:auto auto 1fr;column-gap:16px;row-gap:0;align-items:start}.blogkaart img{grid-column:1;grid-row:1/4;aspect-ratio:3/4;border-radius:10px}.blogmeta,.blogkaart h3,.blogkaart p{grid-column:2}.blogmeta{margin-top:0}.blogkaart h3{font-size:19px}.blogkaart p{-webkit-line-clamp:2}}

/* Zwevende hartjes achter "Made with love by hetdesignbureau.be" (zelfde beweging als Trusted by op timondhaeze.com) */
.credit-hartjes{position:relative;display:inline-block;width:50px;height:14px;margin-left:4px;vertical-align:-2px;overflow:visible;pointer-events:none}
.credit-hartjes svg{position:absolute;bottom:0;color:var(--credit-hart-1,#e2506b);opacity:0;animation:creditzweef 3.8s ease-in-out infinite}
.credit-hartjes svg:nth-child(1){left:2px}
.credit-hartjes svg:nth-child(2){left:15px;color:var(--credit-hart-2,currentColor);animation-delay:.95s}
.credit-hartjes svg:nth-child(3){left:26px;animation-delay:1.9s}
.credit-hartjes svg:nth-child(4){left:40px;color:var(--credit-hart-2,currentColor);animation-delay:2.85s}
@keyframes creditzweef{0%{transform:translateY(4px) scale(.6);opacity:0}18%{opacity:.95}100%{transform:translateY(-26px) scale(1.15) rotate(-8deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.credit-hartjes svg{animation:none;opacity:.9}}
.voet-made{--credit-hart-1:#009bff;--credit-hart-2:#fff}

/* juridisch voornazicht 12 okt 2026: hoe reviews gecontroleerd worden, onder de score */
.klanten .herkomst{margin:8px auto 0;max-width:560px;font-size:12px;line-height:1.5;color:var(--ivorydof)}

/* Taalkeuze altijd bovenaan (12 okt 2026): op breed scherm staan de talen in het menu; onder 1024 px,
   waar het menu inklapt, staat een compacte kopie in de balk zelf. */
.talen-balk{display:none}
@media(max-width:1023px){
  .talen-balk{display:flex;gap:2px;margin:0 0 0 auto;padding:0;border:0;font-size:12px;letter-spacing:.06em}
  .talen-balk a{padding:6px 6px}
  .balk .talen-balk + .knop.klein{margin-left:8px}
}

/* wie (12 okt 2026): de nieuwe persoon-lus is staand (2:3, op gsm 4:5) zonder ondertitels. Als achtergrond
   vult hij met cover; de uitsnede houdt het bovenlichaam en het hoofd in beeld. */
.wie .scene-video{object-position:50% 15%}
@media(max-width:767px){.wie .scene-video{object-position:50% 35%}}

/* Vlagje bij elke taaloptie (Timon, 12 okt 2026): vlag() in bouw.py tekent het, dit is de maat. */
.talen a{display:inline-flex;align-items:center;gap:6px}
.talen .vlag{width:18px;height:12px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(242,232,218,.25)}
.talen a:not([aria-current]) .vlag{opacity:.75}
@media(max-width:1023px){.talen-balk a{gap:4px}.talen-balk .vlag{width:16px;height:11px}}
/* 13 okt 2026 (Timon): kop "Your health, handled." met de lange zin als subregel; in de slotscène naast de
   wachtlijstknop de tekstlink naar de health score. */
.hero-sub{font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:rgba(242,232,218,.86);max-width:46ch;margin:-6px 0 0}
.slot-knoppen{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px}
@media(max-width:560px){.hero-sub{font-size:16px}.slot-knoppen{flex-direction:column;gap:12px}}
/* 13 okt 2026: op gsm liep de ondertitel van de herovideo ("Or do you set your sails...", in het beeld gebrand,
   ongeveer op 85 tot 91 procent van de schermhoogte) door de tekstlink onder de knop, ook in rust. De tekst van de
   hero staat nu boven die band. */
@media(max-width:767px){.hero-in{padding-bottom:calc(16svh + 10px)}}