/* Layout: Apple-style. One hero "stage" that plays as a short film: werkplek video -> docks into the white L-tile -> compliance video -> docks into the light-blue C-tile -> rests on both tiles side by side. Below: PDCA band that ties both lines together, governance, 2x2 support tiles, statement, slot. Single committed look. */
:root{
  color-scheme:light;
  --black:#000000;
  --ink:#f5f7fa;
  --ink-muted:#a7b3c4;
  --white:#ffffff;
  --paper:#f5f6f8;
  --sky:#eaf4fb;
  --sky-2:#dcebf7;
  --text:#0b1526;
  --text-muted:#5c6b80;
  --accent:#5bb3e0;
  --brand:#1e4d8f;
  --line-dark:rgba(255,255,255,.12);
  --line-light:rgba(11,21,38,.1);
  --display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;text-wrap:balance;font-family:var(--display);letter-spacing:-.03em}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}

/* buttons */
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;width:184px;max-width:100%;white-space:nowrap;border-radius:999px;padding:11px 14px;font-weight:700;font-size:15px;border:1px solid transparent;transition:transform .2s,background .2s,color .2s;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,.chap:focus-visible,.ctl:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.fill{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.line{background:transparent;color:var(--brand);border-color:var(--brand)}
.dark .btn.fill{background:var(--accent);color:#06101c;border-color:var(--accent)}
.dark .btn.line{color:var(--accent);border-color:var(--accent)}
.btn.sm{}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-light)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.logo img{height:40px;width:auto;display:block}
.links{display:flex;gap:28px;color:#3d4b60;font-weight:600;font-size:14px}
.links a:hover{color:var(--text)}
.nav .cta{font-size:14px;font-weight:700;color:var(--brand)}
@media (max-width:820px){.links{display:none}}

/* crown = brand mark above a heading */
.crown{display:flex;margin-bottom:16px}
.crown img{height:var(--ch,64px);width:auto;display:block}
.crown svg{height:var(--ch,64px);width:var(--ch,64px);display:block}
.kicker{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brand);margin-bottom:12px}
.dark .kicker{color:var(--accent)}

/* ===== HERO STAGE ===== */
.hero{background:var(--black);color:var(--ink);padding-block:clamp(24px,3.5vw,44px) clamp(24px,3vw,40px)}
.hero-head{text-align:center}
.hero-head h1{font-size:clamp(30px,4.4vw,58px);line-height:1.02;font-weight:700}
.hero-head .sub{font-size:clamp(17px,1.5vw,22px);margin-top:10px;color:var(--ink-muted);font-weight:500}
.stage{position:relative;container-type:inline-size;width:min(calc(100% - 2*clamp(12px,3vw,32px)), 1400px, calc((100vh - 280px) * 16 / 9));width:min(calc(100% - 2*clamp(12px,3vw,32px)), 1400px, calc((100svh - 280px) * 16 / 9));min-width:min(560px, calc(100% - 24px));margin:clamp(20px,2.6vw,32px) auto 0;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0b0f16;
  --dl:55%;--dt:30%;--dw:40%;--dh:40%}
.layer{position:absolute;inset:0;transition:opacity 1s ease}
.tile{z-index:1;opacity:0;pointer-events:none}
.tile.w{background:radial-gradient(70% 80% at 75% 50%,#e8f0f8 0%,rgba(232,240,248,0) 70%),linear-gradient(180deg,#ffffff,#f2f6fa);color:var(--text)}
.tile.c{background:radial-gradient(70% 80% at 75% 50%,#cfe3f3 0%,rgba(207,227,243,0) 70%),linear-gradient(180deg,#f2f8fd,var(--sky-2));color:var(--text)}
.tile .txt{position:absolute;left:6.5%;width:44%;top:50%;transform:translateY(calc(-50% + 14px));opacity:0;transition:opacity .9s ease .55s,transform 1s cubic-bezier(.2,.7,.2,1) .55s}
.tile .txt .btns{justify-content:flex-start}
.tile h2{font-size:clamp(24px,4.7cqw,68px);line-height:1.02;font-weight:700}
.tile .sub{font-size:clamp(15px,1.8cqw,25px);margin-top:14px;line-height:1.4;color:var(--text-muted);font-weight:500}
.tile .crown{--ch:clamp(44px,6.2cqw,88px);margin-bottom:clamp(12px,1.6cqw,22px)}
.tile .kicker{font-size:clamp(12px,1.2cqw,16px);margin-bottom:clamp(8px,1cqw,14px)}
.tile .txt .btns{margin-top:clamp(18px,2.4cqw,32px)}
.vw{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;overflow:hidden;opacity:0;border-radius:0;
  transition:left 1.25s cubic-bezier(.65,0,.25,1),top 1.25s cubic-bezier(.65,0,.25,1),width 1.25s cubic-bezier(.65,0,.25,1),height 1.25s cubic-bezier(.65,0,.25,1),border-radius 1.25s ease,box-shadow 1.25s ease,opacity .9s ease}
.vw.snap{transition:opacity .9s ease}
.vw video,.vw img{width:100%;height:100%;object-fit:cover;display:block}
.duo{z-index:3;opacity:0;pointer-events:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;background:#0b0f16}
.half{border-radius:14px;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:5% 6%;min-width:0;min-height:0}
.half.w{background:linear-gradient(180deg,#ffffff,#f2f6fa);color:var(--text)}
.half.c{background:linear-gradient(180deg,#f2f8fd,var(--sky-2));color:var(--text)}
.half .crown{justify-content:center;--ch:52px;margin-bottom:12px}
.half h3{font-size:clamp(17px,2.4cqw,34px);line-height:1.06;font-weight:700}
.half .sub{font-size:16px;margin-top:8px;color:var(--text-muted)}
.half .btns{margin-top:16px}
.half .pic{flex:1 1 auto;min-height:0;width:100%;margin-top:clamp(16px,2.4vw,28px);border-radius:12px;overflow:hidden;box-shadow:0 20px 40px -24px rgba(11,21,38,.5)}
.half .pic img{width:100%;height:100%;object-fit:cover;display:block}

/* states */
.stage[data-state="v1"] #vw1{opacity:1}
.stage[data-state="t1"] #t1,.stage[data-state="t2"] #t2,.stage[data-state="duo"] #duo{opacity:1;pointer-events:auto}
.stage[data-state="t1"] #t1 .txt,.stage[data-state="t2"] #t2 .txt{opacity:1;transform:translateY(-50%)}
.stage[data-state="t1"] #vw1,.stage[data-state="t2"] #vw2{opacity:1}
.stage:is([data-state="t1"],[data-state="v2"],[data-state="t2"],[data-state="duo"]) #vw1,
.stage:is([data-state="t2"],[data-state="duo"]) #vw2{left:var(--dl);top:var(--dt);width:var(--dw);height:var(--dh);border-radius:16px;box-shadow:0 30px 60px -30px rgba(11,21,38,.5)}
.stage[data-state="v2"] #vw2{opacity:1}

/* discreet pause / replay control in the stage corner (needed for accessibility, keeps the film out of the way) */
.ctl{position:absolute;z-index:5;right:14px;bottom:14px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.28);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;opacity:.55;transition:opacity .2s}
.ctl:hover,.ctl:focus-visible{opacity:1}
.ctl svg{width:12px;height:12px;fill:#fff}
.stage[data-state="duo"] .ctl{background:rgba(11,21,38,.35)}

@media (max-width:760px){
  .stage{width:calc(100% - 24px);min-width:0;aspect-ratio:3/4;--dl:6%;--dw:88%;--dh:39.6%;--dt:56%}
  .tile .txt{left:6%;width:88%;top:7%;transform:translateY(14px);text-align:center}
  .stage[data-state="t1"] #t1 .txt,.stage[data-state="t2"] #t2 .txt{transform:none}
  .tile .txt .btns{justify-content:center}
  .tile .crown{justify-content:center}
  .crown{--ch:48px}
  .duo{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .half{padding:5% 6%;justify-content:center}
  .half .pic,.half .sub{display:none}
  .half .crown{--ch:36px;margin-bottom:8px}
}
@container (max-width:1150px){ .half .sub{display:none} .half .crown{--ch:40px} }
@container (max-width:860px){ .half .crown{--ch:32px;margin-bottom:6px} .half .kicker{font-size:11px;margin-bottom:6px} .half .btns{margin-top:10px} .tile .txt .sub{display:none} }

/* ===== SECTIONS BELOW ===== */
.block{padding-block:clamp(64px,9vw,112px);text-align:center;overflow:hidden}
.block.dark{background:var(--black);color:var(--ink)}
.block.white{background:linear-gradient(180deg,#ffffff 0%,#f4f7fb 100%)}
.block h2{font-size:clamp(32px,4.6vw,58px);line-height:1.03;font-weight:700}
.block .sub{font-size:clamp(18px,1.7vw,22px);margin:12px auto 0;color:var(--text-muted);font-weight:500;max-width:52ch}
.dark .sub{color:var(--ink-muted)}

/* PDCA band */
.pdca{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(40px,6vw,72px);text-align:left}
.ring{width:100%;max-width:400px;margin-inline:auto;display:block}
.ring .arc{fill:none;stroke-width:14;stroke-linecap:round}
.ring .lbl{font-family:var(--display);font-weight:700;font-size:17px;fill:#fff;text-anchor:middle;dominant-baseline:middle}
.ring .mid{font-family:var(--body);font-weight:600;font-size:13px;fill:var(--ink-muted);text-anchor:middle;letter-spacing:.12em}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,36px) clamp(20px,3vw,40px)}
.step{border-top:1px solid var(--line-dark);padding-top:16px;min-width:0}
.step .hd{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.step .hd .m{height:22px;width:auto;flex:none}
.step p{color:var(--ink-muted);font-size:15.5px;margin-top:8px}
.step .who{display:inline-block;margin-top:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent)}
@media (max-width:860px){.pdca{grid-template-columns:1fr}.ring{max-width:300px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* product lines */
.prod{padding-block:clamp(64px,9vw,112px) 0;text-align:center;overflow:hidden}
.prod.white{background:linear-gradient(180deg,#ffffff 0%,#f4f7fb 100%)}
.prod.sky{background:radial-gradient(70% 50% at 50% 0%,#f4f9fd 0%,rgba(244,249,253,0) 70%),linear-gradient(180deg,var(--sky),var(--sky-2))}
.prod h2{font-size:clamp(32px,4.6vw,58px);line-height:1.03;font-weight:700}
.prod .sub{font-size:clamp(18px,1.7vw,22px);margin:12px auto 0;color:var(--text-muted);font-weight:500;max-width:56ch}
.c-center{justify-content:center}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(40px,5vw,56px);text-align:left}
.feat div{border-top:2px solid var(--brand);padding-top:16px;min-width:0}
.feat h3{font-size:21px;letter-spacing:-.015em}
.feat p{color:var(--text-muted);margin-top:8px;font-size:16px}
.incl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(32px,4vw,44px)}
.incl span{font-size:14px;font-weight:600;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--line-light);color:#2b3a50}
.incl span.soon{background:transparent;border-style:dashed;color:var(--brand)}
.prod .btns{margin-top:26px}
.prodpic{max-width:1180px;margin:clamp(40px,6vw,64px) auto 0;padding-inline:clamp(16px,4vw,40px)}
.prodpic img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:20px 20px 0 0}
@media (max-width:820px){.feat{grid-template-columns:1fr}}

/* governance */
.gov{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(40px,6vw,64px);text-align:left}
.gov div{border-top:2px solid var(--brand);padding-top:16px;min-width:0}
.gov h3{font-size:22px;letter-spacing:-.015em}
.gov p{color:var(--text-muted);margin-top:8px;font-size:16px}
@media (max-width:820px){.gov{grid-template-columns:1fr}}

/* 2x2 tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;background:var(--paper)}
.tl{min-height:500px;padding:56px 24px 0;text-align:center;display:flex;flex-direction:column;align-items:center;border-radius:4px;overflow:hidden;min-width:0}
.tl.dark{background:var(--black);color:var(--ink)}
.tl.white{background:radial-gradient(90% 70% at 50% 100%,#e9f0f8 0%,rgba(233,240,248,0) 70%),linear-gradient(180deg,#ffffff 0%,#f5f8fb 100%)}
.tl.sky{background:radial-gradient(90% 70% at 50% 100%,#cfe3f3 0%,rgba(207,227,243,0) 70%),linear-gradient(180deg,#f2f8fd 0%,var(--sky-2) 100%)}
.tl h3{font-size:clamp(28px,3vw,40px);font-weight:700;line-height:1.05}
.tl .sub{font-size:18px;margin-top:10px;color:var(--text-muted)}
.tl.dark .sub{color:var(--ink-muted)}
.tl .btns{margin-top:18px}
.tl .art{margin-top:auto;padding-top:40px;width:100%;display:flex;justify-content:center}
@media (max-width:820px){.tiles{grid-template-columns:1fr}.tl{min-height:420px}}
.shield{width:200px;height:220px}
.m365{display:grid;grid-template-columns:repeat(2,96px);gap:12px;padding-bottom:48px}
.m365 span{height:96px;border-radius:22px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:15px;color:#fff;background:linear-gradient(160deg,var(--accent),var(--brand))}
.m365 span:nth-child(2){background:linear-gradient(160deg,#2d6fb8,#1e4d8f)}
.m365 span:nth-child(3){background:linear-gradient(160deg,#1e4d8f,#163a6b)}
.m365 span:nth-child(4){background:linear-gradient(160deg,#7cc4ea,#2d6fb8)}
.norms{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding-bottom:56px;max-width:560px}
.norms span{font-family:var(--display);font-weight:700;font-size:19px;border:2px solid var(--brand);color:var(--brand);border-radius:999px;padding:12px 22px;background:rgba(255,255,255,.6)}
.books{display:flex;gap:18px;align-items:flex-end}
.book{width:120px;height:160px;border-radius:8px 14px 14px 8px;background:linear-gradient(160deg,#2b3a52,#0b1526);border-left:10px solid var(--accent);display:flex;align-items:flex-end;padding:14px;font-family:var(--display);font-weight:700;font-size:14px;color:#fff;text-align:left;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.book:nth-child(2){height:180px;border-left-color:var(--brand)}
.book:nth-child(3){height:150px;border-left-color:#7cc4ea}

.statement h2{max-width:18ch;margin-inline:auto}

/* reviews */
.score{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;font-size:15px;color:var(--ink-muted)}
.score b{font-family:var(--display);font-size:22px;color:#fff}
.stars{color:#f4b63f;letter-spacing:2px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(36px,5vw,56px);text-align:left}
.q{margin:0;padding:28px;border-radius:18px;background:#111722;border:1px solid var(--line-dark);display:flex;flex-direction:column;gap:20px;min-width:0}
.q blockquote{margin:0;font-size:17px;line-height:1.55;color:#e6ecf4}
.q figcaption{margin-top:auto;font-size:14px;color:var(--ink-muted);display:flex;flex-direction:column;gap:6px}
#reviews .btns{margin-top:32px}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}

footer{background:var(--paper);color:var(--text-muted);font-size:13px;padding-block:28px 40px;border-top:1px solid var(--line-light)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:18px;flex-wrap:wrap}

.rv{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.pre{transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){.rv,.rv.pre{transition:none;transform:none}.vw,.layer,.tile .txt{transition:none!important}}
/* tiles A: own imagery */
.tl .shot{margin-top:auto;padding-top:34px;width:100%;display:flex;justify-content:center}
.tl .shot img{display:block;width:min(88%,520px);aspect-ratio:4/3;object-fit:cover;border-radius:16px 16px 0 0;box-shadow:0 30px 60px -30px rgba(11,21,38,.55)}
.covers{margin-top:auto;padding-top:34px;display:flex;justify-content:center;align-items:flex-end}
.covers img{width:min(30%,170px);aspect-ratio:420/594;object-fit:cover;border-radius:6px 6px 0 0;box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.covers img:nth-child(1){transform:translateX(18%) rotate(-6deg) translateY(10px)}
.covers img:nth-child(2){position:relative;z-index:2;width:min(34%,190px)}
.covers img:nth-child(3){transform:translateX(-18%) rotate(6deg) translateY(10px)}
/* statement B */
.st{padding-block:clamp(72px,9vw,112px);text-align:center}
.st.white{background:linear-gradient(180deg,#fff,#f4f7fb)}
.st h2{font-size:clamp(32px,4.6vw,60px);line-height:1.03;font-weight:700;max-width:19ch;margin-inline:auto}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:44px;text-align:left}
.three div{border-top:2px solid var(--brand);padding-top:14px;min-width:0}
.three b{font-family:var(--display);font-size:22px;letter-spacing:-.015em;display:block}
.three p{color:var(--text-muted);margin-top:6px;font-size:16px}
.st .btns{margin-top:40px}
@media (max-width:820px){.three{grid-template-columns:1fr}}
/* closing A: people */
.cl{padding-block:clamp(64px,8vw,104px)}
.cl.sky{background:linear-gradient(180deg,var(--sky),var(--sky-2))}
.people{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.faces{display:flex;gap:clamp(14px,2vw,24px)}
.faces figure{margin:0;text-align:center}
.faces figure{min-width:0;max-width:200px}
.faces img{width:clamp(120px,14vw,170px);aspect-ratio:1;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 20px 40px -20px rgba(11,21,38,.5);display:block}
.faces figcaption{margin-top:10px;font-size:14px;font-weight:700}
.faces figcaption span{display:block;font-weight:500;color:var(--text-muted);font-size:13px}
.people h2{font-size:clamp(32px,4.2vw,56px);line-height:1.03}
.people .sub{font-size:clamp(17px,1.6vw,21px);color:var(--text-muted);margin-top:12px;max-width:44ch}
.people .btns{justify-content:flex-start}
.contactline{margin-top:18px;font-size:15px;color:var(--text-muted)}
.contactline b{color:var(--text);user-select:all}
@media (max-width:760px){.people{grid-template-columns:1fr;text-align:center}.faces{justify-content:center}.people .btns{justify-content:center}.people .sub{margin-inline:auto}}

/* grotere kroon + kopregel bij werkplek en compliance (4 okt) */
.tile .crown{--ch:clamp(56px,8.4cqw,118px);margin-bottom:clamp(14px,1.8cqw,26px)}
.tile .kicker{font-size:clamp(14px,1.75cqw,24px);letter-spacing:.14em;margin-bottom:clamp(10px,1.2cqw,16px)}
.half .crown{--ch:68px;margin-bottom:14px}
.half .kicker{font-size:16px}
.crown.c-center{--ch:88px;margin-bottom:20px}
.crown.c-center+.kicker{font-size:16px}
@container (max-width:1150px){ .half .crown{--ch:54px} .half .kicker{font-size:14px} }
@container (max-width:860px){ .half .crown{--ch:40px;margin-bottom:6px} .half .kicker{font-size:12px} }
@media (max-width:760px){
  .tile .crown{--ch:52px;margin-bottom:10px}
  .tile .kicker{font-size:13px}
  .half .crown{--ch:44px}
  .crown.c-center{--ch:68px}
  .crown.c-center+.kicker{font-size:14px}
}

/* telefoonmenu (4 okt) */
.menu-btn{display:none}
@media (max-width:820px){
  .nav .cta{margin-left:auto}
  .menu-btn{display:inline-grid;place-content:center;gap:5px;width:44px;height:44px;margin:0 -10px 0 0;border:0;background:transparent;cursor:pointer;border-radius:12px}
  .menu-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  .menu-btn span{display:block;width:22px;height:2px;border-radius:2px;background:var(--text);transition:transform .25s ease}
  .nav.open .menu-btn span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav.open .menu-btn span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .mnav{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-light);padding:6px 20px 22px;box-shadow:0 30px 40px -30px rgba(11,21,38,.35);max-height:calc(100svh - 70px);overflow:auto}
  .mnav[hidden]{display:none}
  .mnav a{padding:14px 2px;font-family:var(--display);font-weight:700;font-size:20px;color:var(--text);border-bottom:1px solid var(--line-light)}
  .mnav a.on{color:var(--brand)}
  .mnav a.btn{align-self:center;margin-top:18px;border:1px solid var(--brand);font-family:var(--body);font-size:16px;color:#fff;width:auto;padding:13px 28px}
}

/* tegeltekst gecentreerd onder het beeldmerk (5 okt) */
.tile .txt{text-align:center}
.tile .crown{justify-content:center}
.tile .txt .btns{justify-content:center}

/* ===== versie 3 (okt 2026): menu met Compliance-uitklapmenu, knop Gratis check, nieuwe blokken ===== */
:root{--check:#1A7F67;--check-hover:#14684f}
.links{align-items:center}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.dd-btn svg{width:12px;height:12px;transition:transform .2s}
.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd.on .dd-btn{color:var(--text)}
.dd-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.dd::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:14px}
.dd-menu{display:none;position:absolute;top:calc(100% + 12px);left:-16px;min-width:260px;flex-direction:column;background:#fff;border:1px solid var(--line-light);border-radius:14px;box-shadow:0 24px 50px -20px rgba(11,21,38,.35);padding:8px;z-index:60}
@media (hover:hover) and (min-width:821px){.dd:hover .dd-menu{display:flex}}
.dd.open .dd-menu{display:flex}
.dd-menu a{padding:9px 12px;border-radius:9px;color:var(--text);font-weight:600;white-space:nowrap}
.dd-menu a:hover,.dd-menu a:focus-visible{background:#eef4fb;outline:none}
.dd-menu .dd-all{color:var(--brand);border-bottom:1px solid var(--line-light);border-radius:9px 9px 0 0;margin-bottom:4px}
.nav .cta-check{background:var(--check);color:#fff;border-radius:999px;padding:9px 18px;font-weight:700;font-size:14px;white-space:nowrap;transition:background .2s}
.nav .cta-check:hover{background:var(--check-hover)}
.nav .cta-check:focus-visible{outline:2px solid var(--check);outline-offset:3px}
.mnav .mnav-group{padding:16px 2px 4px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brand)}
.mnav a.sub{font-size:17px;padding:10px 2px 10px 14px}
.mnav a.btn.cta-check{align-self:center;margin-top:18px;font-family:var(--body);font-size:16px;color:#fff;background:var(--check);width:auto;padding:13px 28px;border:0;border-radius:999px}

/* homepage: twee deuren in de header */
.hero-head .kicker{color:var(--accent);margin-bottom:10px}
.hero-head h1{max-width:20ch;margin-inline:auto}
.hero-head .sub{max-width:64ch;margin-inline:auto;line-height:1.45}
.hero-doors{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.hero-doors .btn{width:300px;background:var(--accent);color:#06101c;border-color:var(--accent)}
@media (max-width:640px){.hero-doors .btn{width:100%}}

/* twee diensten naast elkaar + brug */
.svc2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(32px,4vw,48px)}
.svc{background:#fff;border:1px solid var(--line-light);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;text-align:left;min-width:0}
.svc>img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover}
.svc .in{padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;flex:1}
.svc .crown{--ch:46px;margin-bottom:12px}
.svc h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em}
.svc p{color:var(--text-muted);margin-top:8px;font-size:16px}
.svc .btns{justify-content:flex-start;margin-top:auto;padding-top:22px}
@media (max-width:820px){.svc2{grid-template-columns:1fr}}
.bridge{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,36px);align-items:center;margin-top:16px;background:#0b1526;color:var(--ink);border-radius:22px;padding:clamp(24px,3vw,36px);text-align:left}
.bridge h2,.bridge h3{font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-.02em;color:#fff}
.bridge p{color:var(--ink-muted);margin-top:8px;font-size:16px;max-width:70ch}
.bridge-mark{display:flex;gap:10px;align-items:center}
.bridge-mark img,.bridge-mark svg{height:52px;width:auto}
.bridge-mark svg{width:52px}
.bridge .btns{margin-top:0}
.bridge .btn.fill{background:var(--accent);color:#06101c;border-color:var(--accent)}
.bridge-sec{padding-block:clamp(40px,6vw,72px)}
/* homepage "Samen het sterkst": L links (werkplek), tekst in het midden, C rechts (compliance), even groot */
.bridge-2{grid-template-columns:auto 1fr auto;text-align:center;padding-inline:clamp(28px,4vw,56px);gap:clamp(20px,3vw,44px)}
.bridge-2 .bridge-txt p{margin-inline:auto}
.bridge-2 .bm{display:flex;align-items:center;justify-content:center}
.bridge-2 .bm img{height:71px;width:auto;display:block}
.bridge-2 .bm svg{height:68px;width:auto;display:block}
@media (max-width:820px){
  .bridge-2{grid-template-columns:auto auto;justify-content:center;column-gap:28px;row-gap:18px}
  .bridge-2 .bridge-txt{grid-column:1/-1;grid-row:2}
  .bridge-2 .bm-l{grid-row:1;justify-self:end}
  .bridge-2 .bm-c{grid-row:1;justify-self:start}
  .bridge-2 .bm img{height:55px}
  .bridge-2 .bm svg{height:53px}
}
@media (max-width:820px){.bridge{grid-template-columns:1fr;text-align:center}.bridge-mark{justify-content:center}.bridge .btns{justify-content:center}.bridge p{margin-inline:auto}}

/* vast maandbedrag */
.mb{max-width:780px;text-align:center}
.mb h2{font-size:clamp(30px,4.2vw,54px);line-height:1.04;font-weight:700}
.mb .sub{font-size:clamp(17px,1.6vw,21px);margin:12px auto 0;color:var(--text-muted)}
.pricechip{display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px;padding:14px 24px;border-radius:999px;background:#f4f8fc;border:1px solid var(--line-light)}
.pricechip b{font-family:var(--display);font-size:clamp(26px,2.6vw,32px);letter-spacing:-.03em;color:var(--brand)}
.pricechip span{color:var(--text-muted)}
.mb .btns .btn{width:auto;padding-inline:22px}

/* wie zijn wij */
.who2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(32px,4vw,48px)}
.who{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--line-light);border-radius:20px;padding:clamp(20px,2.6vw,28px);text-align:left;min-width:0}
.who img{width:104px;height:104px;border-radius:50%;object-fit:cover;flex:none;border:4px solid #fff;box-shadow:0 14px 30px -16px rgba(11,21,38,.5)}
.who h3{font-size:21px;letter-spacing:-.015em}
.who .role{font-size:12px;color:var(--brand);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.who p{color:var(--text-muted);margin-top:8px;font-size:15.5px}
.kees-note{max-width:640px;margin:26px auto 0;text-align:center;color:var(--text-muted)}
.kees-note b{color:var(--text)}
@media (max-width:760px){.who2{grid-template-columns:1fr}.who{flex-direction:column;align-items:center;text-align:center}}

/* afsluiter met één foto */
.close .faces img{width:clamp(130px,15vw,176px)}

/* drie vragen over het maandbedrag */
.qa3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(32px,4vw,48px);text-align:left}
.qa{background:#fff;border:1px solid var(--line-light);border-radius:20px;padding:clamp(22px,3vw,30px);min-width:0}
.qa h3{font-size:20px;letter-spacing:-.015em}
.qa p{color:var(--text-muted);margin-top:10px;font-size:15.5px}
.qa p a{color:var(--brand);font-weight:700}
@media (max-width:900px){.qa3{grid-template-columns:1fr}}

/* rekenvoorbeeld (uitklapblok) */
.calc{max-width:780px;margin:24px auto 0;background:#fff;border:1px solid var(--line-light);border-radius:18px;padding:0 clamp(18px,3vw,28px);text-align:left}
.calc summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--display);font-weight:700;font-size:19px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.calc summary::-webkit-details-marker{display:none}
.calc summary::after{content:"+";font-family:var(--body);color:var(--brand);font-size:26px;line-height:1;transition:transform .2s}
.calc[open] summary::after{transform:rotate(45deg)}
.calc summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.calc table{width:100%;border-collapse:collapse;font-size:15.5px}
.calc td{padding:9px 0;border-top:1px solid var(--line-light)}
.calc td:last-child{text-align:right;white-space:nowrap;padding-left:16px}
.calc tr.tot td{font-weight:800;border-top:2px solid var(--text)}
.calc p{color:var(--text-muted);margin:14px 0}
.calc p b{color:var(--text)}

/* normtegels */
.normtiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:clamp(32px,4vw,48px)}
.nt{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-light);border-radius:18px;padding:20px;text-align:left;transition:transform .2s,box-shadow .2s;min-width:0}
.nt:hover{transform:translateY(-2px);box-shadow:0 20px 40px -24px rgba(11,21,38,.35)}
.nt:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nt b{font-family:var(--display);font-size:19px;letter-spacing:-.015em}
.nt span{color:var(--text-muted);font-size:14.5px;margin-top:6px}
.nt i{margin-top:auto;padding-top:14px;font-style:normal;color:var(--brand);font-weight:700;font-size:14px}
@media (max-width:1100px){.normtiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.normtiles{grid-template-columns:1fr}}
.flow.f4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.flow.f4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.flow.f4{grid-template-columns:1fr}}
.hmedia .sound{z-index:2}
.fineprint{font-size:13px;line-height:1.5;color:var(--text-muted);text-align:center;padding-block:20px 30px;max-width:860px}
.kees{max-width:780px;margin:0 auto;text-align:center}
.kees h2{font-size:clamp(30px,4.2vw,54px);line-height:1.04;font-weight:700}
.kees p{font-size:clamp(17px,1.6vw,21px);margin:12px auto 0;color:var(--text-muted)}

/* ===== product pages ===== */
.links a.on{color:var(--text)}
.links a.on::after{content:"";display:block;height:2px;background:var(--brand);border-radius:2px;margin-top:4px}

/* page hero: crown + heading + buttons, then the film in a rounded frame */
.phero{background:var(--black);color:var(--ink);text-align:center;padding-block:clamp(28px,4vw,52px) clamp(28px,3vw,44px)}
.phero .crown{justify-content:center;--ch:56px}
.phero h1{font-size:clamp(34px,5vw,64px);line-height:1.02;font-weight:700}
.phero .sub{font-size:clamp(17px,1.6vw,22px);margin:12px auto 0;color:var(--ink-muted);max-width:52ch}
.hmedia{position:relative;width:min(calc(100% - 2*clamp(12px,3vw,32px)), 1400px, calc((100vh - 440px) * 16 / 9));width:min(calc(100% - 2*clamp(12px,3vw,32px)), 1400px, calc((100svh - 440px) * 16 / 9));min-width:min(520px, calc(100% - 24px));margin:clamp(24px,3vw,36px) auto 0;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0b0f16}
.hmedia video,.hmedia img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.hmedia{width:calc(100% - 24px);min-width:0}}

/* generic section heads */
.sec{padding-block:clamp(64px,9vw,112px)}
.sec.white{background:linear-gradient(180deg,#ffffff 0%,#f4f7fb 100%)}
.sec.sky{background:linear-gradient(180deg,var(--sky),var(--sky-2))}
.sec.dark{background:var(--black);color:var(--ink)}
.sec .head{text-align:center;max-width:820px;margin:0 auto}
.sec .head h2{font-size:clamp(30px,4.2vw,54px);line-height:1.04;font-weight:700}
.sec .head .sub{font-size:clamp(17px,1.6vw,21px);margin:12px auto 0;color:var(--text-muted);max-width:56ch}
.sec.dark .head .sub{color:var(--ink-muted)}

/* spec list: image left, items right */
.spec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(40px,5vw,64px)}
.spec .pic{position:sticky;top:96px;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(11,21,38,.45)}
.spec .pic img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.items{display:grid;gap:0}
.item{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding-block:18px;border-top:1px solid var(--line-light)}
.item:last-child{border-bottom:1px solid var(--line-light)}
.item b{font-family:var(--display);font-size:19px;letter-spacing:-.01em}
.item span{color:var(--text-muted);font-size:16px}
.price{margin-top:28px;padding:22px 24px;border-radius:16px;background:#fff;border:1px solid var(--line-light);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price b{font-family:var(--display);font-size:clamp(28px,3vw,38px);letter-spacing:-.03em;color:var(--brand)}
.price span{color:var(--text-muted);font-size:15px}
@media (max-width:860px){.spec{grid-template-columns:1fr}.spec .pic{position:static}.spec .pic img{aspect-ratio:16/10}}

/* three steps (a real sequence) */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,36px);margin-top:clamp(36px,5vw,56px)}
.flow div{min-width:0}
.flow .n{font-family:var(--display);font-weight:800;font-size:15px;color:#fff;background:var(--brand);width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.flow h3{font-size:22px;margin-top:16px;letter-spacing:-.015em}
.flow p{color:var(--text-muted);margin-top:8px;font-size:16px}
@media (max-width:820px){.flow{grid-template-columns:1fr}}

/* numbers band */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(36px,5vw,56px);text-align:center}
.nums div{min-width:0}
.nums .big{font-family:var(--display);font-weight:800;letter-spacing:-.05em;line-height:.9;font-size:clamp(60px,7vw,108px);background:linear-gradient(180deg,#bfe3f7,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.nums .big small{font-size:.34em;letter-spacing:-.02em;margin-left:.06em}
.nums b{display:block;margin-top:14px;font-family:var(--display);font-size:18px}
.nums p{color:var(--ink-muted);font-size:14.5px;margin-top:6px}
@media (max-width:820px){.nums{grid-template-columns:1fr 1fr;row-gap:40px}}

/* two cards */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(36px,5vw,56px)}
.card2{background:#fff;border:1px solid var(--line-light);border-radius:20px;padding:clamp(24px,3vw,36px);min-width:0}
.card2 .kicker{margin-bottom:8px}
.card2 h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em}
.card2 p{color:var(--text-muted);margin-top:10px}
.card2 ul{margin:14px 0 0;padding-left:18px;color:var(--text-muted);display:grid;gap:4px}
@media (max-width:820px){.cards2{grid-template-columns:1fr}}

/* audience row */
.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:clamp(36px,5vw,56px);text-align:left}
.aud div{border-top:2px solid var(--brand);padding-top:14px;min-width:0}
.aud b{font-family:var(--display);font-size:21px;letter-spacing:-.015em;display:block}
.aud p{color:var(--text-muted);margin-top:6px;font-size:16px}
@media (max-width:820px){.aud{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px;margin:clamp(32px,4vw,48px) auto 0}
.faq details{border-top:1px solid var(--line-light);padding-block:4px}
.faq details:last-child{border-bottom:1px solid var(--line-light)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-weight:500;font-size:26px;line-height:1;color:var(--brand);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.faq p{color:var(--text-muted);padding:0 0 20px;max-width:68ch}

/* platform: modules */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px) clamp(18px,3vw,40px);margin-top:clamp(40px,5vw,64px)}
.mods div{border-top:2px solid var(--brand);padding-top:14px;min-width:0}
.mods b{font-family:var(--display);font-size:20px;letter-spacing:-.015em;display:block}
.mods p{color:var(--text-muted);margin-top:6px;font-size:15.5px}
.mods .tag{display:inline-block;margin-top:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--brand)}
@media (max-width:900px){.mods{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mods{grid-template-columns:1fr}}

/* platform: norms row, typographic */
.normrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:clamp(28px,4vw,40px);font-family:var(--display);font-weight:700;font-size:clamp(24px,3.2vw,44px);letter-spacing:-.03em;color:var(--brand)}
.normrow span+span::before{content:"·";margin-right:28px;color:var(--accent)}
.normpic{max-width:1180px;margin:clamp(40px,5vw,56px) auto 0;padding-inline:clamp(16px,4vw,40px)}
.normpic img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:20px}

/* packages */
.pk3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(36px,5vw,56px)}
.pk{background:#fff;border:1px solid var(--line-light);border-radius:20px;padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;min-width:0}
.pk.hl{border:2px solid var(--brand);box-shadow:0 30px 60px -36px rgba(30,77,143,.5)}
.pk .kicker{margin-bottom:6px}
.pk h3{font-size:30px;letter-spacing:-.025em}
.pk .for{color:var(--text-muted);margin-top:8px;font-size:15.5px;min-height:3em}
.pk ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;font-size:15.5px}
.pk li{padding-left:22px;position:relative}
.pk li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:6px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.pk .plus{color:var(--text-muted);font-size:14px;margin-top:14px}
.pk .btns{margin-top:auto;padding-top:24px}
.extra{text-align:center;color:var(--text-muted);margin-top:28px;font-size:15.5px}
.extra b{color:var(--text)}
@media (max-width:900px){.pk3{grid-template-columns:1fr}}

/* single big quote */
.bigq{max-width:900px;margin:0 auto;text-align:center}
.bigq blockquote{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(22px,2.6vw,34px);line-height:1.3;letter-spacing:-.02em;color:#fff}
.bigq figcaption{margin-top:20px;color:var(--ink-muted);font-size:15px}
.bigq .stars{display:block;margin-bottom:16px}

/* soon band */
.soon{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;padding:22px clamp(16px,4vw,40px);background:#0b1220;color:var(--ink);font-size:16px}
.soon b{font-family:var(--display);color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:12px}

/* compliance: demo video in browser frame + four themes */
.demo{position:relative;max-width:1180px;margin:clamp(36px,5vw,56px) auto 0;width:calc(100% - 2*clamp(16px,4vw,40px));border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line-light);box-shadow:0 50px 100px -50px rgba(11,21,38,.5)}
.demobar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f1f4f8;border-bottom:1px solid var(--line-light)}
.demobar i{width:10px;height:10px;border-radius:50%;background:#d4dbe5;display:inline-block}
.demobar span{margin-left:10px;font-size:12.5px;color:var(--text-muted);background:#fff;border:1px solid var(--line-light);border-radius:999px;padding:3px 12px}
.demo video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#eef3f8}
.sound{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:8px 14px 8px 10px;background:rgba(11,21,38,.78);color:#fff;font:700 13px var(--body);cursor:pointer}
.sound svg{width:18px;height:18px;fill:#fff;stroke:#fff;stroke-width:0}
.sound svg .w{fill:none;stroke-width:2;stroke-linecap:round;opacity:.35}
.sound.on svg .w{opacity:1}
.sound:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,36px);margin-top:clamp(36px,5vw,56px)}
.themes div{border-top:2px solid var(--brand);padding-top:14px;min-width:0}
.themes b{font-family:var(--display);font-size:22px;letter-spacing:-.015em;display:block}
.themes p{color:var(--text-muted);margin-top:6px;font-size:16px}
.themes small{display:block;margin-top:10px;font-size:13px;color:var(--brand);font-weight:600}
@media (max-width:900px){.themes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.themes{grid-template-columns:1fr}}
.kicker.grp{margin:4px 0 4px}
.items+.kicker.grp{margin-top:28px}

/* hero eerste beeld: tekst compact, film past altijd volledig in beeld (4 okt) */
.phero{padding-block:clamp(18px,2.4vw,30px) clamp(22px,2.6vw,36px)}
.phero .crown{--ch:clamp(50px,7svh,68px);margin-bottom:12px}
.phero .crown+.kicker{font-size:16px;margin-bottom:8px}
.phero h1{font-size:clamp(32px,min(4.4vw,6.2svh),58px)}
.phero .sub{max-width:70ch;margin-top:10px}
.phero .btns{margin-top:18px}
.hmedia{margin-top:clamp(16px,2.2vw,26px);width:min(calc(100% - 2*clamp(12px,3vw,32px)), 1400px, calc((100vh - var(--hero-reserve,410px)) * 16 / 9));width:min(calc(100% - 2*clamp(12px,3vw,32px)), 1400px, calc((100svh - var(--hero-reserve,410px)) * 16 / 9));min-width:min(480px, calc(100% - 24px))}
@media (max-width:760px){.phero .crown{--ch:56px}.hmedia{width:calc(100% - 24px);min-width:0}}

/* trainingen (5 okt) */
.pk2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin:clamp(36px,5vw,56px) auto 0;max-width:980px;text-align:left}
.pk2 .pk h3{font-size:clamp(24px,2.4vw,30px)}
@media (max-width:760px){.pk2{grid-template-columns:minmax(0,1fr)}}

/* ===== landing pages ===== */
.lnav .wrap{justify-content:space-between}
.lnav .cta{display:inline-flex}

/* hero: text left, form card right */
.lhero{background:radial-gradient(70% 70% at 85% 30%,#e3eef9 0%,rgba(227,238,249,0) 70%),linear-gradient(180deg,#ffffff,#f3f7fb);padding-block:clamp(40px,6vw,80px)}
.lgrid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.lhero .kicker{margin-bottom:14px}
.lhero h1{font-size:clamp(34px,4.8vw,62px);line-height:1.02;font-weight:700}
.lhero .lead{font-size:clamp(17px,1.5vw,20px);color:var(--text-muted);margin-top:16px;max-width:52ch}
.checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.checks li{padding-left:30px;position:relative;font-weight:600}
.checks li::before{content:"";position:absolute;left:4px;top:.35em;width:12px;height:7px;border-left:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(-45deg)}
.alt{margin-top:26px;font-size:15px;color:var(--text-muted)}
.alt a{color:var(--brand);font-weight:700;border-bottom:1px solid currentColor}
@media (max-width:900px){.lgrid{grid-template-columns:1fr}}

/* form card with the real cover on top */
.fcard{position:relative;background:#fff;border-radius:24px;padding:clamp(22px,3vw,32px);box-shadow:0 50px 100px -50px rgba(11,21,38,.45);border:1px solid var(--line-light)}
.fcard .cov{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.fcard .cov img{width:92px;aspect-ratio:700/990;object-fit:cover;border-radius:4px 8px 8px 4px;box-shadow:0 16px 30px -12px rgba(0,0,0,.45);transform:rotate(-4deg)}
.fcard .cov b{font-family:var(--display);font-size:20px;letter-spacing:-.015em;display:block}
.fcard .cov span{color:var(--text-muted);font-size:14px}
.form{display:grid;gap:12px}
.form label{display:grid;gap:6px;font-size:14px;font-weight:700;color:#2b3a50}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select{font:500 16px var(--body);color:var(--text);padding:12px 14px;border:1px solid #cfd8e3;border-radius:12px;background:#fbfcfe;width:100%;min-width:0}
.form input:focus,.form select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);background:#fff}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .opt{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:14px;color:var(--text-muted)}
.form .opt input{margin-top:3px;width:18px;height:18px;accent-color:var(--brand);flex:none}
.form .btn{width:100%;margin-top:4px;padding:14px}
.form .fine{font-size:12.5px;color:var(--text-muted);text-align:center}
.form .fine a{color:var(--brand)}
@media (max-width:520px){.form .row2{grid-template-columns:1fr}}

/* inside */
.inside{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(36px,5vw,56px)}
.book3d{display:flex;justify-content:center}
.book3d img{width:min(100%,340px);aspect-ratio:700/990;object-fit:cover;border-radius:6px 12px 12px 6px;box-shadow:-18px 30px 60px -20px rgba(11,21,38,.55);transform:perspective(1200px) rotateY(-16deg) rotate(-1deg)}
@media (max-width:860px){.inside{grid-template-columns:1fr}.book3d img{width:min(70%,280px)}}

/* scan block on dark */
.scan{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:start}
.scan h2{font-size:clamp(30px,4vw,50px);line-height:1.04}
.scan .sub{color:var(--ink-muted);margin-top:12px;font-size:clamp(17px,1.5vw,20px);max-width:46ch}
.scan .checks li{color:var(--ink)}
.scan .checks li::before{border-color:var(--accent)}
.scan .fcard{background:#111722;border-color:var(--line-dark);box-shadow:none}
.scan .form label{color:#dbe4f0}
.scan .form input[type=text],.scan .form input[type=email],.scan .form input[type=tel],.scan .form select{background:#0b1220;border-color:#2a3650;color:#eef3fa}
.scan .form .opt{color:var(--ink-muted)}
.scan .form .fine{color:var(--ink-muted)}
.scan .form .fine a{color:var(--accent)}
@media (max-width:900px){.scan{grid-template-columns:1fr}}

/* quote small */
.qline{max-width:760px;margin:clamp(40px,5vw,56px) auto 0;text-align:center}
.qline blockquote{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,28px);line-height:1.35;letter-spacing:-.015em}
.qline figcaption{margin-top:14px;color:var(--text-muted);font-size:15px}

/* thank-you view */
.thanks{background:radial-gradient(70% 70% at 50% 0%,#e3eef9 0%,rgba(227,238,249,0) 70%),linear-gradient(180deg,#ffffff,#f3f7fb);padding-block:clamp(56px,8vw,104px);text-align:center}
.thanks .book3d img{width:min(60%,240px);transform:perspective(1200px) rotateY(-12deg)}
.thanks h1{font-size:clamp(34px,4.6vw,58px);line-height:1.03;margin-top:28px}
.thanks .lead{color:var(--text-muted);font-size:clamp(17px,1.5vw,20px);margin:14px auto 0;max-width:50ch}
.next{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin:clamp(40px,5vw,56px) auto 0;text-align:left}
.next .card2 .btns{justify-content:flex-start}
@media (max-width:760px){.next{grid-template-columns:1fr}}
.demo-note{background:#fff8e6;border-bottom:1px solid #f1dfae;color:#6b5312;font-size:13.5px;text-align:center;padding:8px 16px}
.demo-note button{font:700 13.5px var(--body);color:#6b5312;background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;margin-left:6px}

/* ===== flipbook: preview first pages, then gate to the download form ===== */
.fb-open{cursor:pointer;border:0;background:none;padding:0;display:inline-block;position:relative}
.fb-open:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:8px}
.fb-hint{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:700 14px var(--body);color:var(--brand);background:none;border:0;cursor:pointer;padding:6px 2px;border-bottom:1px solid currentColor}
.fb-hint svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fb-modal{position:fixed;inset:0;z-index:100;background:rgba(6,12,22,.86);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
.fb-modal[hidden]{display:none!important}
.fb-top{width:min(100%,1240px);display:flex;justify-content:space-between;align-items:center;color:#eef3fa;margin-bottom:14px;gap:12px}
.fb-top b{font-family:var(--display);font-size:18px;letter-spacing:-.01em}
.fb-top span{color:#a7b3c4;font-size:14px;margin-left:10px}
.fb-x{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.fb-x:focus-visible,.fb-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fb-stage{perspective:2600px;width:min(100%,calc(80vh * 1400 / 990), 1240px);width:min(100%,calc(80svh * 1400 / 990), 1240px)}
.fb-book{position:relative;width:100%;aspect-ratio:1400/990;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,.1,.2,1)}
.fb-book[data-state="0"]{transform:translateX(-25%)}
.fb-leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.45,.05,.2,1)}
.fb-leaf.turned{transform:rotateY(-180deg)}
.fb-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#fff}
.fb-face img{width:100%;height:100%;object-fit:cover;display:block}
.fb-face.front{border-radius:2px 8px 8px 2px;box-shadow:inset 14px 0 18px -14px rgba(0,0,0,.35)}
.fb-face.back{transform:rotateY(180deg);border-radius:8px 2px 2px 8px;box-shadow:inset -14px 0 18px -14px rgba(0,0,0,.35)}
.fb-leaf .front::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,0) 12%);pointer-events:none}
.fb-under{position:absolute;top:0;left:50%;width:50%;height:100%;background:linear-gradient(180deg,#f4f8fc,#e6eff8);border-radius:2px 8px 8px 2px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:8%;color:var(--text);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.fb-under .kicker{margin-bottom:10px}
.fb-under h3{font-family:var(--display);font-size:clamp(20px,2.4vw,32px);line-height:1.08;letter-spacing:-.02em}
.fb-under p{color:var(--text-muted);margin-top:10px;font-size:clamp(14px,1.3vw,17px)}
.fb-under .btn{margin-top:22px}
.fb-blur img{filter:blur(5px) saturate(.8);transform:scale(1.04)}
.fb-blur::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.85));z-index:1}
.fb-lock{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);background:#0b1526;color:#fff;border-radius:999px;padding:10px 16px;font:700 13px var(--body);white-space:nowrap}
.fb-shadow{position:absolute;inset:auto 4% -6% 4%;height:8%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,0));filter:blur(8px);z-index:-1}
.fb-nav{display:flex;align-items:center;gap:14px;margin-top:18px;color:#a7b3c4;font-size:14px}
.fb-nav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:20px;cursor:pointer}
.fb-nav button:disabled{opacity:.3;cursor:default}
@media (prefers-reduced-motion:reduce){.fb-book,.fb-leaf{transition:none}}

/* phone: one page at a time */
.fb-book.fb-single{aspect-ratio:700/990;transform:none!important}
.fb-sp{position:absolute;inset:0;overflow:hidden;background:#fff;border-radius:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);opacity:0;transform:translateX(28px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.fb-sp.past{transform:translateX(-28px)}
.fb-sp.on{opacity:1;transform:none;pointer-events:auto}
.fb-sp img{width:100%;height:100%;object-fit:cover;display:block}
.fb-gate{position:absolute;z-index:3;left:6%;right:6%;bottom:6%;background:#fff;border-radius:16px;padding:20px 18px;text-align:center;box-shadow:0 20px 40px -16px rgba(11,21,38,.45)}
.fb-gate .kicker{margin-bottom:6px}
.fb-gate h3{font-family:var(--display);font-size:22px;line-height:1.1;letter-spacing:-.02em}
.fb-gate .btn{margin-top:14px}
@media (max-width:700px){
  .fb-stage{width:min(100%,calc(70vh * 700 / 990));width:min(100%,calc(70svh * 700 / 990))}
  .fb-top span{display:none}
}
@media (prefers-reduced-motion:reduce){.fb-sp{transition:none}}

/* leesstand (5 okt): groot lezen en scrollen */
.fb-tools{display:flex;align-items:center;gap:10px}
.fb-zoom{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:700 14px var(--body);cursor:pointer;white-space:nowrap}
.fb-zoom svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fb-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fb-zoom[aria-pressed="true"]{background:#fff;color:#0b1526;border-color:#fff}
.fb-modal.fb-zoomed{justify-content:flex-start}
.fb-modal.fb-zoomed .fb-top{width:min(100%,980px)}
.fb-modal.fb-zoomed .fb-stage,.fb-modal.fb-zoomed .fb-nav{display:none}
.fb-read{position:relative;width:min(100%,980px);flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:20px;padding-bottom:24px;outline:none}
.fb-read[hidden]{display:none}
.fb-read img{display:block;width:100%;height:auto;flex:none;border-radius:6px;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.fb-rgate{flex:none;background:#fff;border-radius:16px;padding:clamp(24px,4vw,40px);text-align:center;color:var(--text)}
.fb-rgate .kicker{margin-bottom:8px}
.fb-rgate h3{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);line-height:1.1;letter-spacing:-.02em}
.fb-rgate .btn{margin-top:16px}
@media (max-width:700px){.fb-zoom{padding:0 12px}.fb-top b{font-size:16px}}

.book3d{flex-direction:column;align-items:center}
.fcard h2{font-family:var(--display);font-size:24px;letter-spacing:-.02em}
.fcard .intro{color:var(--text-muted);font-size:15px;margin:6px 0 16px}
.lhero h3.ck{font-family:var(--display);font-size:18px;margin-top:24px;letter-spacing:-.01em}
.lhero h3.ck+.checks{margin-top:12px}
.sent{display:none;padding:16px;border-radius:12px;background:#eaf6ef;color:#1d6b45;font-weight:600}
.form.done .sent{display:block}
.form.done label,.form.done .row2,.form.done button,.form.done .fine{display:none}
.ebook-inside{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(28px,4vw,40px)}
.ebook-inside .items .item b{color:#fff}
.ebook-inside .items .item span{color:var(--ink-muted)}
.ebook-inside .item{border-color:var(--line-dark)}
.scan .fcard .cov span{color:var(--ink-muted)}
.thanks .thx-h{font-size:clamp(34px,4.6vw,58px);line-height:1.03;margin-top:28px;font-weight:700}
@media (max-width:860px){.ebook-inside{grid-template-columns:1fr}}