/* ─────────────────────────────────────────────────────────────
   HappiMeds - Per pagina
   Blokken die maar op een pagina staan: de procesbaan (home), de doelgroeprijen
   en fase-sectie (voor wie), de verticale route (wat we doen), missie en visie
   (over ons) en de merk-iconen.
   ───────────────────────────────────────────────────────────── */
/* Keten sectie: V1 Procesbaan (klikbare schakels) */
#keten{padding:52px 0 56px}
#keten .title{margin-top:12px}
#keten .lede{font-size: 19px;margin-top:12px;max-width:640px;margin-left:auto;margin-right:auto}
.kv-h3{font-size: 17.5px;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.kv-extra{display:flex;gap:9px;align-items:flex-start;background:linear-gradient(180deg,#FFF4DC,#FCE9C0);border-radius:10px;padding:10px 12px;font-size: 13px;color:var(--cream-ink);line-height:1.5}
.kv-extra svg{flex-shrink:0;color:var(--orange-ink);margin-top:1px}
.kv-extra b{color:var(--orange-ink)}
.p1-rail{position:relative;margin-top:44px}
.p1-rail::before{content:"";position:absolute;left:40px;right:40px;top:32px;border-top:2px dashed var(--rail-blue)}
.p1-nodes,.p1-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.p1-node{position:relative;width:64px;height:64px;border-radius:50%;background:#fff;color:var(--blue-text);border:1.5px solid var(--line-blue);cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 10px 24px -16px rgba(5,63,92,.55);transition:transform .18s,box-shadow .18s,border-color .18s}
.p1-node:hover{transform:translateY(-3px);border-color:var(--blue)}
.p1-node.sel{border-color:var(--blue);box-shadow:0 0 0 6px rgba(66,158,189,.12)}
.p1-node svg{display:block}
.p1-grid{margin-top:16px;align-items:start}
.p1-tab{appearance:none;background:none;border:0;margin:0;padding:8px 6px 14px;font:inherit;cursor:pointer;text-align:center;position:relative;min-width:0}
.p1-tab .kv-h3{display:block;transition:color .15s}
.p1-tab:hover .kv-h3{color:var(--blue-text)}
.p1-tab::after{content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:0;height:3px;border-radius:3px;background:var(--amber);transition:width .2s}
.p1-tab.sel::after{width:44px}
.p1-detail{margin-top:18px;background:var(--panel-blue);border-radius:22px;padding:26px 28px}
.p1-panel{display:none}
.infogsec .center .lede.lede-mid{max-width:640px}
.exsec .fase-link.exlist-after{margin-top:34px}
.p1-panel.sel{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px 28px;align-items:start;animation:pdIn .25s ease}
@keyframes pdIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pd-g{min-width:0}
.pd-g .btn{margin-top:14px}
.pd-t{display:block;font-size: 11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-text);margin-bottom:10px}
.pd-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pd-l li{position:relative;padding-left:16px;font-size: 15px;font-weight:500;line-height:1.5;color:var(--body-c)}
.pd-l li::before{content:"";position:absolute;left:1px;top:.55em;width:5px;height:5px;border-radius:50%;background:#E3A81C}
.pd-tags li{padding-left:0}
.pd-tags li::before{display:none}
.pd-tag{display:inline-block;font-size: 11px;font-weight:800;letter-spacing:.07em;background:#fff;color:var(--navy);border:1px solid var(--line-blue);border-radius:100px;padding:2px 8px;margin-right:8px;vertical-align:1px;min-width:44px;text-align:center}
.p1-detail .kv-extra{align-items:center}
.pd-g .rtag-mini{display:inline-block;margin-bottom:8px}
.pd-note{margin:10px 2px 0;font-size: 13px;color:var(--muted);line-height:1.5}.p1-detail .rtag-mini{font-size: 11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--amber-ink);background:var(--amber-tint);border-radius:100px;padding:3px 9px;align-self:flex-start}
@media (max-width:900px){
.p1-nodes{display:none}
.p1-rail::before{display:none}
.p1-grid{grid-template-columns:1fr 1fr;margin-top:0}
.p1-panel.sel{grid-template-columns:1fr}
}

/* Voor wie: doelgroep-rijen in de hero */
.wielist{display:flex;flex-direction:column;gap:12px;margin-top:36px}

.wie-row{display:grid;grid-template-columns:54px 1.1fr .9fr;gap:8px 32px;align-items:start;padding:10px 0;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.wie-row{box-shadow:0 14px 32px -24px rgba(5,63,92,.45);transition:transform .2s,box-shadow .2s,border-color .2s}
.wie-row.link:hover{transform:translateY(-2px)}
.wie-row.link{grid-template-columns:54px 1.1fr .9fr auto}
.wie-ic{width:54px;height:54px;border-radius:50%;background:#fff;color:var(--blue-text);border:1.5px solid var(--line-blue);display:flex;align-items:center;justify-content:center;margin-top:2px;box-shadow:0 10px 24px -16px rgba(5,63,92,.55);transition:border-color .2s,box-shadow .2s}
.wie-row.link:hover .wie-ic{border-color:var(--blue);box-shadow:0 0 0 6px rgba(66,158,189,.10),0 14px 28px -16px rgba(5,63,92,.5)}
.wie-main{min-width:0}
.wie-main .wie-h{font-size: 19px;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.wie-main p{font-size: 15px;color:var(--body-c);line-height:1.6;margin-top:5px;max-width:52ch;text-wrap:pretty}
/* Let op: kleur komt van .wie-main p (0,1,1), die zwaarder weegt dan .wie-types (0,1,0).
   Een eigen color deed hier niets en is verwijderd. font-size en line-height hierin
   verliezen om dezelfde reden; die staan als bekend punt in BACKLOG.md punt 1. */
.wie-types{display:flex;flex-wrap:wrap;gap:2px 0;margin-top:14px;font-size:13px;font-weight:700;line-height:1.7}
.wie-types span{white-space:nowrap}
.wie-types span:not(:last-child)::after{content:"\00B7";margin:0 9px;color:#E3A81C;font-weight:800}
.wie-types span:last-child{color:var(--muted);font-weight:500}
.wie-duo{display:flex;flex-direction:column;gap:16px;justify-content:center;align-self:stretch;border-left:1px solid var(--line-blue);padding-left:30px}
.wie-duo>div{font-size:13px;color:var(--body-c);line-height:1.6;text-wrap:pretty}
.wie-duo b{display:block;font-family:var(--font-mono);font-size: 11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-text);margin-bottom:3px}
.wie-duo.acc b{color:var(--orange-ink)}
.wie-go{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;align-self:center;transition:background .18s,transform .18s}
.wie-row.link:hover .wie-go{background:var(--blue);transform:translateX(3px)}
.wie-pt{display:block;text-align:center;margin-top:10px;font-size: 14.5px;font-weight:500;color:var(--body-c);line-height:1.6}
.wie-pt b{color:var(--navy)}
@media (max-width:900px){
.wie-row,.wie-row.link{grid-template-columns:1fr;gap:12px}
.wie-ic{width:48px;height:48px}
.wie-duo{border-left:none;border-top:1px solid #AFCEDC;padding:16px 0 0;margin-top:4px}
.wie-go{display:none}
}
/* Wie: variant verticaal (twee kaarten naast elkaar) */
/* Voor wie: route-lijn van linksmidden naar rechtsboven, achter de boxen */
body[data-page="zbckliniek"] .hero.sub{background:
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='480' viewBox='0 0 1600 480' fill='none'%3E%3Cpath d='M-20 445 C 240 485 420 340 620 355 C 800 368 880 255 1080 262 C 1260 268 1420 215 1620 190' stroke='%23429EBD' stroke-opacity='.28' stroke-width='2' stroke-dasharray='1 11' stroke-linecap='round'/%3E%3Ccircle cx='322' cy='409' r='5' fill='%23F7AD19' fill-opacity='.6'/%3E%3Ccircle cx='620' cy='355' r='5' fill='%23429EBD' fill-opacity='.45'/%3E%3Ccircle cx='842' cy='311' r='4' fill='%23F7AD19' fill-opacity='.55'/%3E%3Ccircle cx='1342' cy='238' r='7' stroke='%23429EBD' stroke-opacity='.5' stroke-width='2'/%3E%3C/svg%3E") no-repeat,
 var(--dots),
 radial-gradient(900px 480px at 88% -12%, rgba(66,158,189,.10), transparent 62%),
 var(--paper);
background-size:1600px auto,24px 24px,auto,auto;
background-position:right 0 bottom 0,0 0,0 0,0 0}
/* Route-arc subpagina's: lokale vervaging waar de lijn tekst raakt */
.hero.sub{position:relative;z-index:0}
body[data-page="zbckliniek"] .hero.sub::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
body[data-page="zbckliniek"] .hero.sub::after{background:radial-gradient(700px 420px at 14% 88%,rgba(247,248,245,.9) 26%,rgba(247,248,245,0) 66%)}

/* Voor wie: fase-sectie (startend/bestaand) */
#startende-zorginitiatieven{scroll-margin-top:110px}
.fase-intro{margin:16px auto 0;max-width:62ch;font-size:16px;font-weight:500;line-height:1.7;color:var(--body-c);text-wrap:pretty}
.fase-duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:44px}
.fase{position:relative;padding-top:24px}
.f-start{border-top:2.5px solid var(--amber)}
.f-best{border-top:2.5px solid var(--blue)}
.f-cap{position:absolute;top:-5.5px;left:0;width:21px;height:9px;border-radius:100px}
.f-start .f-cap{background:linear-gradient(90deg,var(--amber) 50%,var(--blue) 50%)}
.f-best .f-cap{background:linear-gradient(90deg,var(--navy) 50%,var(--blue) 50%)}
.fase em{display:block;font-style:normal;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.f-start em{color:var(--orange-ink)}
.f-best em{color:var(--blue-text)}
.fase b{display:block;margin-top:7px;font-size: 19px;font-weight:800;letter-spacing:-.015em;color:var(--navy);line-height:1.3}
.fase p{margin-top:8px;font-size:15px;font-weight:500;line-height:1.62;color:var(--body-c);text-wrap:pretty}
.fase-ex{list-style:none;margin:20px 0 0;padding:14px 0 0;border-top:1px solid var(--line-blue);display:flex;flex-direction:column;gap:14px}
.fase-ex li{position:relative;padding-left:24px}
.fase-ex li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:6px;border-radius:100px}
.f-start .fase-ex li::before{background:linear-gradient(90deg,var(--amber) 50%,var(--blue) 50%)}
.f-best .fase-ex li::before{background:linear-gradient(90deg,var(--navy) 50%,var(--blue) 50%)}
.fase-ex b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--navy);line-height:1.35}
.fase-ex span{display:block;margin-top:2px;font-size: 14.5px;font-weight:500;line-height:1.55;color:var(--body-c);text-wrap:pretty}
.fase-end{margin-top:46px;text-align:center}
.fase-quote-box{margin:0 auto;max-width:600px;padding:8px 24px;text-align:center}
.fase-quote{margin:0 auto;font-size:clamp(18px,1.85vw,22px);font-weight:600;line-height:1.5;letter-spacing:-.015em;color:var(--navy);text-wrap:balance}
.fase-quote b{font-weight:800}
.fase-orb{position:relative;display:block;width:104px;height:104px;margin:0 auto 18px}
.fase-orb img{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:0;transform:translate(-50%,-50%);opacity:.92}
.fo-spin{position:absolute;inset:0;animation:foSpin 16s linear infinite}
.fo-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--yellow) 0 50%,var(--blue) 50% 100%);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));opacity:.85}
.fo-pill{position:absolute;left:50%;width:10px;height:22px;border-radius:100px;box-shadow:0 1px 3px rgba(5,63,92,.25),inset 0 0 0 1px rgba(255,255,255,.35)}
.fo-p1{top:-7px;transform:translateX(-50%);background:linear-gradient(180deg,var(--yellow) 50%,var(--blue) 50%)}
.fo-p2{bottom:-7px;transform:translateX(-50%);background:linear-gradient(180deg,var(--blue) 50%,var(--navy) 50%)}
@keyframes foSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.fo-spin{animation:none;transform:rotate(-30deg)}}

.fase-cta-box{display:inline-flex;flex-direction:column;align-items:center;gap:9px;margin-top:26px;padding:0}
.fase-oproep{margin:0;font-size:clamp(18px,1.85vw,22px);font-weight:700;letter-spacing:-.015em;color:var(--navy)}
.fase-ref{display:inline-flex;align-items:center;gap:7px;font-size: 16px;font-weight:700;color:var(--blue-text);text-decoration:underline;text-underline-offset:3px}
.fase-ref:hover{color:var(--navy)}
.fase-ref .arr{transition:transform .18s}
.fase-ref:hover .arr{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.fase-ref .arr{transition:none}}
.fase-link{margin-top:16px;font-size: 16px;font-weight:500;color:var(--body-c);text-align:center}
.fase-jump{display:inline-block;color:var(--blue-text);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;margin-left:6px}
.fase-jump svg{vertical-align:-3px;margin-left:6px;transition:transform .18s}
.fase-jump:hover{color:var(--navy)}
.fase-jump[href^="#"]:hover svg{transform:translateY(3px)}
.fase-jump:not([href^="#"]):hover svg{transform:translateX(3px)}
/* white-space:normal heft hier de nowrap van .fase-jump op. Die nowrap hield de
   pijl bij de tekst, maar op een smal scherm past de hele zin niet op een regel
   en schoof de pagina 11px opzij. Onder 560px mag hij dus afbreken.
   De pijl blijft wel aan het laatste woord hangen: die twee staan in de HTML
   samen in <span class="jump-eind">. Zonder die wikkel viel de pijl tussen 390
   en 414 pixels alleen op een regel. Een &nbsp; was daarvoor niet genoeg:
   Chrome breekt de regel toch af tussen die spatie en het svg-element. */
.fase-jump .jump-eind{white-space:nowrap}
@media(max-width:560px){.fase-jump{display:block;margin:6px auto 0;white-space:normal}}
@media(max-width:900px){.fase-duo{grid-template-columns:1fr;gap:32px}}

/* Voor wie: statement-hero, route-waarom, voorbeeldrijen met eindconclusie */
.wie-statement .hero.sub{min-height:0}
.wie-statement .hero.sub h1{font-size:clamp(34px,4vw,51px)}
.wie-statement .hero.sub .lede{max-width:62ch}
.wie-statement .wielist{display:flex;flex-direction:column;gap:0;margin-top:44px;background:var(--paper)}
.wie-statement .wie-row,.wie-statement .wie-row.link{grid-template-columns:54px 1.12fr .88fr;background:none;border:none;border-radius:0;padding:38px 0;gap:10px 40px}
.wie-statement .wie-row.link{grid-template-columns:54px 1.12fr .88fr 52px}
.wie-statement .wie-row:hover{box-shadow:none}
.wie-statement .wie-row,.wie-statement .wie-row.link{box-shadow:none}
.wie-statement .wie-row.link:hover{transform:none}
.wie-statement .wie-row+.wie-row{border-top:1px solid var(--line-blue)}
.wie-statement .wie-row.link{transition:background .2s;border-radius:14px}
.wie-statement .wie-row.link:hover{background:linear-gradient(90deg,rgba(66,158,189,.06),rgba(66,158,189,0) 70%)}
.wie-statement .wie-ic{margin-top:8px}
.wie-statement .wie-h{font-size:clamp(26px,2.7vw,37px);letter-spacing:-.024em;line-height:1.1}
.wie-statement .wie-row.link:hover .wie-h{color:var(--blue-text)}
.wie-statement .wie-types{margin-top:18px;font-size: 14.5px}
.wie-statement .wie-duo{border-left:1px solid var(--line-blue);padding-left:40px}
.wie-statement .wie-pt{border-top:1px solid var(--line-blue);border-bottom:none;background:none;border-radius:0;padding:30px 0 6px;margin:10px auto 0;max-width:62ch;font-size:16px;line-height:1.65}
.wie-statement .wp{position:relative;padding-top:36px}
.wie-statement .wp b{display:block;font-size: 17.5px;font-weight:800;letter-spacing:-.01em;color:var(--navy);margin-bottom:7px}
.wie-statement .wp p{font-size:15px;font-weight:500;line-height:1.62;color:var(--body-c)}
.wie-statement .exlist.rows{max-width:880px;margin-left:auto;margin-right:auto}
.wie-statement .exlist.rows .exline{display:grid;grid-template-columns:40px 180px 280px minmax(0,1fr);justify-content:start;align-items:start;gap:24px;padding:24px 28px;}
.wie-statement .exlist.rows .exline-head{display:contents}
.wie-statement .exlist.rows .xsteps{display:grid;grid-template-columns:1fr;gap:9px}
.wie-statement .exlist.rows .xstep{display:flex;align-items:center;padding:0}
.wie-statement .exlist.rows .xstep .xs-ic{display:none}
.wie-statement .exlist.rows .xstep .xs-txt{display:grid;grid-template-columns:80px 1fr;gap:12px;align-items:center;white-space:nowrap}
/* Punt Ron (2026-08-17): deze tags hadden dezelfde pilvorm als de knoppen, dus
   leken ze klikbaar. Nu platte tekst. Achtergrond en rand staan op transparant
   in plaats van dat ze weg zijn: de doos houdt zo exact dezelfde maat, waardoor
   de regelafstand en de hoogte van de hele sectie onveranderd blijven. */
.wie-statement .exlist.rows .xs-tag{margin-right:0;background:none;border:1px solid transparent;border-radius:0;color:var(--blue-text);font-weight:800}
.wie-statement .exlist.rows .xresult{grid-column:4;grid-row:1;margin:0;justify-self:start;white-space:normal}
.wie-statement .exlist.rows .exline{transition:background .18s,box-shadow .18s}
.wie-statement .exlist.rows .exline:hover{background:linear-gradient(90deg,rgba(66,158,189,.07),rgba(66,158,189,0) 78%)}
.wie-statement .exlist.rows .exline .cicon{transition:background .18s,color .18s}
.wie-statement .exlist.rows .exline:hover .cicon{background:var(--blue);color:#fff}
.wie-statement .exlist.rows .xs-tag{transition:color .18s}
.wie-statement .exlist.rows .exline:hover .xs-tag{color:var(--navy)}
.wie-statement .exlist.rows .xresult{transition:border-color .18s,box-shadow .18s,background .18s}
.wie-statement .exlist.rows .exline:hover .xresult{border-color:var(--orange);border-width:1.5px;padding:7.5px 13.5px;box-shadow:0 2px 10px -2px rgba(242,127,12,.28)}
@media(max-width:900px){.wie-statement .wie-row,.wie-statement .wie-row.link{grid-template-columns:1fr}.wie-statement .wie-duo{border-left:none;border-top:1px solid #B7D8E5;padding:16px 0 0}.wie-statement .exlist.rows .exline{grid-template-columns:40px minmax(0,1fr)}.wie-statement .exlist.rows .xsteps{grid-column:2}.wie-statement .exlist.rows .xresult{grid-column:2;grid-row:auto;white-space:normal}}
@media(max-width:640px){.wie-statement .exlist.rows .exline{padding:22px 20px;gap:16px}.wie-statement .exlist.rows .xsteps,.wie-statement .exlist.rows .xstep,.wie-statement .exlist.rows .xresult{min-width:0}.wie-statement .exlist.rows .xs-txt{white-space:normal;overflow-wrap:anywhere}}

/* Wat we doen: statement-hero met route-stappen */
.lev-statement .hero.sub{min-height:0;display:block;padding:128px 0 56px}
.lev-statement .hero.sub h1{letter-spacing:-.03em}
.lev-statement .hero.sub .lede{max-width:56ch}
.lev-vroute .hero.sub .lede{font-size: 19px;line-height:1.7;margin-top:20px}
/* Wat we doen: verticale aanpak-route in de hero (orbit-stijl) */
.lev-vroute .hero.sub{overflow:hidden}
.lev-vroute .lev-vgrid{display:block}
.lev-vroute .lev-vrow{display:grid;grid-template-columns:minmax(0,600px) auto;gap:64px;align-items:center;margin-top:56px}
.lev-vroute .lev-vcol{position:relative;width:100%;max-width:660px}
.lev-vroute .vtitle{display:flex;align-items:center;gap:13px;font-size:24px;font-weight:800;letter-spacing:-.018em;color:var(--navy);margin:0 0 28px}
.lev-vroute .vtitle::before{content:"";width:26px;height:11px;border-radius:100px;flex-shrink:0;background:linear-gradient(90deg,var(--navy) 50%,var(--blue) 50%)}
.lev-vroute .lev-orbit{justify-self:end}
.lev-vroute .vrail{position:relative;display:flex;flex-direction:column;gap:20px;z-index:1}
.lev-vroute .spine{position:absolute;left:26px;top:50px;bottom:56px;width:5px;border-radius:100px;background:repeating-linear-gradient(180deg,var(--rail-blue) 0 4.5px,var(--rail-blue-2) 4.5px 9px,rgba(0,0,0,0) 9px 20px)}
.lev-vroute .vstation{position:relative;display:flex;gap:16px;align-items:center;text-decoration:none}
.lev-vroute .vstation[data-pop]{cursor:default}
.lev-vroute .vstation[data-pop] .vnode{cursor:pointer;transition:border-color .2s,box-shadow .2s,color .2s}
.lev-vroute .vstation[data-pop]:hover .vnode,.lev-vroute .vstation[data-pop].open .vnode{border-color:var(--blue);color:var(--navy);box-shadow:0 0 0 5px #F2F8FA,0 4px 12px rgba(5,63,92,.14)}
.lev-vroute .vnode{width:56px;height:56px;border-radius:50%;background:white;border:1.5px solid var(--line-blue);color:var(--blue-text);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -16px rgba(5,63,92,.55);flex-shrink:0;position:relative;z-index:1;box-shadow:0 0 0 5px #F2F8FA,0 2px 8px rgba(5,63,92,.08);transition:border-color .2s,color .2s}
.lev-vroute .vnode svg{width:24px;height:24px}
.lev-vroute a.vstation .vnode{transition:border-color .2s,box-shadow .2s}
.lev-vroute a.vstation:hover .vnode{border-color:var(--blue);box-shadow:0 0 0 6px rgba(66,158,189,.10),0 14px 28px -16px rgba(5,63,92,.5)}
.lev-vroute a.vstation:hover strong{color:var(--blue-text)}
.lev-vroute .vbox{flex:1;position:relative;padding:8px 0 8px 14px;border-radius:16px}
.lev-vroute .vbox strong{display:block;font-size:19px;font-weight:800;letter-spacing:-.012em;color:var(--navy);transition:color .2s}
.lev-vroute .vbox small{display:block;font-size:15px;font-weight:500;color:var(--body-c);margin-top:3px}
.lev-vroute .vbook{background:radial-gradient(ellipse 85% 120% at 26% 50%,rgba(66,158,189,.13),transparent 72%)}
.lev-vroute .vbook.kof{background:radial-gradient(ellipse 85% 120% at 26% 50%,rgba(247,173,25,.15),transparent 72%)}
.lev-vroute .vloop{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin-top:9px;position:relative;z-index:1;white-space:nowrap}
.lev-vroute .vloop .pill{font-size: 13px;font-weight:700;color:var(--navy);white-space:nowrap;background:linear-gradient(180deg,#fff,var(--tint));border:1px solid var(--line-blue);border-radius:100px;padding:5px 11px;box-shadow:0 1px 2px rgba(5,63,92,.06)}
.lev-vroute .vloop svg{color:var(--blue-text);flex-shrink:0}
@media (max-width: 700px){.lev-vroute .vloop{flex-wrap:wrap;white-space:normal}}
.lev-vroute .vloop .again{display:inline-flex;gap:5px;align-items:center;color:var(--orange-ink);font-weight:800;font-size: 11px;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}
.lev-vroute .vk-pop{position:absolute;right:-24px;top:50%;transform:translateY(-50%) translateX(8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;background:linear-gradient(180deg,#FFF9EC,#FDF1D6);border:1px solid #F0D9A6;border-radius:16px;box-shadow:var(--shadow-hover);padding:18px 19px;width:224px;z-index:6;cursor:default;text-align:left}
.lev-vroute .open>.vk-pop{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%)}
.lev-vroute .vk-pop::before{content:"";position:absolute;left:-6px;top:50%;width:10px;height:10px;background:#FEF6E2;border-left:1px solid #F0D9A6;border-bottom:1px solid #F0D9A6;transform:translateY(-50%) rotate(45deg)}
.lev-vroute .pop-ic{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--orange-ink);display:flex;align-items:center;justify-content:center;margin-bottom:11px;box-shadow:0 2px 8px -2px rgba(168,84,5,.35)}
.lev-vroute .vk-pop b{display:block;font-size: 14.5px;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.lev-vroute .vk-pop p{font-size: 13px;line-height:1.55;color:var(--cream-ink);margin:5px 0 11px;max-width:none}
.lev-vroute .vk-pop a{display:inline-block;font-size: 13px;font-weight:800;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.lev-vroute .vk-pop a:hover{color:var(--blue-text)}
@media(prefers-reduced-motion:reduce){.lev-vroute .vk-pop{transition:none}}
/* Hier stond tussen 1021 en 1200px een tweekolomsindeling met de orbit op
   scale(.72) en margin-left/-bottom: -157px. Die indeling paste niet. In dat
   bereik krijgt de tekstkolom een min-content van 630px; met 64px tussenruimte
   en 403px orbit is dat 1097px, terwijl de rij op een venster van 1030px maar
   945px breed is. Het verschil viel rechts buiten beeld en header.hero knipt
   met overflow-x: hidden af, dus zonder schuifbalk: op 1030px verdween 107px
   van het diagram, op 1100px 37px. Precies het patroon dat scale onzichtbaar
   maakt -- de transform verandert het vak niet, dus de layout merkt niets.

   De eenkolomsindeling die hieronder al bestond begint nu bij 1200 in plaats
   van 1020. Daarmee vervalt de tussenvorm die nooit paste, en met haar de twee
   handmatig afgestelde marges. Boven 1200px is er niets veranderd: daar staat
   de orbit ongeschaald en sluit hij precies aan op de rechterrand van de rij. */
@media(max-width:1200px){
.lev-vroute .lev-vrow{grid-template-columns:1fr}
.lev-vroute .lev-orbit{display:none}
.lev-vroute .lev-vgrid{grid-template-columns:1fr;gap:44px}
.lev-vroute .lev-vcol{justify-self:start}
.lev-vroute .vk-pop{right:8px}
}
/* Subpagina's: eerste sectie vult exact de viewport, inhoud verticaal gecentreerd */
body[data-page] .hero.sub{min-height:100vh;min-height:100svh;display:flex;align-items:center}
body[data-page] .hero.sub .wrap{width:100%}

/* Uitzondering voor juridische pagina's. Daar is de hero een kop met een datum,
   geen statement dat een heel scherm verdient: met de regel hierboven moet de
   lezer een venster scrollen voordat de tekst begint. De selector is een graad
   specifieker dan body[data-page], dus de volgorde maakt niet uit. */
body[data-page="privacy"] .hero.sub{min-height:0;display:block;padding:128px 0 44px}
body[data-page="privacy"] .hero.sub .lede{max-width:60ch}

/* Missie & visie: donker paneel (waarom HappiMeds bestaat) */
section.dark.ovm { position: relative; overflow: hidden; }
section.dark.ovm::before, section.dark.ovm::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
section.dark.ovm::before { width: 360px; height: 360px; border: 46px solid rgba(255,255,255,.045); right: -110px; top: -140px; }
section.dark.ovm::after { width: 200px; height: 200px; border: 32px solid rgba(247,173,25,.09); left: -70px; bottom: -90px; }
.ovm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0; max-width: 1000px; margin: 52px auto 0; position: relative; }
.ovm-block { position: relative; padding: 6px 56px 6px 0; }
.ovm-block + .ovm-block { padding: 6px 0 6px 56px; border-left: 1px dashed rgba(255,255,255,.22); }
.ovm-label { font-size: 13px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: #93CBDE; display: inline-flex; align-items: center; gap: 10px; }
.ovm-block p { margin-top: 16px; font-size: 21px; line-height: 1.5; font-weight: 600; color: #fff; letter-spacing: -.01em; text-wrap: pretty; }
.ovm-block p strong { color: #F7C863; font-weight: 700; }
.ovm-slogans { display: flex; justify-content: center; margin: 56px auto 0; max-width: 820px; position: relative; }
.ovm-slogans span { font-size: clamp(19px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.015em; line-height: 1.35; color: #F7C863; text-align: center; text-wrap: balance; }
.ovm-slogans span i { font-style: normal; }
.ovm-slogans::before { content: ""; position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 21px; height: 9px; border-radius: 100px; background: linear-gradient(90deg, rgba(255,255,255,.95) 50%, var(--amber)); }
@media (max-width: 860px) {
  .ovm-grid { grid-template-columns: 1fr; gap: 34px; }
  .ovm-block { padding: 0; }
  .ovm-block + .ovm-block { padding: 34px 0 0; border-left: none; border-top: 1px dashed rgba(255,255,255,.22); }
}

/* Merk-iconen: WhatsApp & LinkedIn */
.btn .btn-icn{width:18px;height:18px;margin-right:8px;flex-shrink:0}
.f-icn{width:18px;height:18px;vertical-align:-4px;margin-right:8px;border-radius:4px}

.advisor{flex-direction:row;gap:10px}
.adv-li-icn{width:18px;height:18px;border-radius:4px;flex-shrink:0}
.team-li{display:inline-flex;margin-top:8px;padding:10px;opacity:.85;transition:opacity .18s,transform .18s}
.team-li:hover{opacity:1;transform:translateY(-1px)}
.team-li img{width:22px;height:22px;border-radius:4px}