/* ─────────────────────────────────────────────────────────────
   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)}
/* Het streepje heeft zijn volle breedte en wordt met scaleX in beeld gerold.
   Met een geanimeerde `width` moest de browser bij elk beeldje de layout
   opnieuw uitrekenen; een transform tekent alleen. De translateX(-50%) hoort
   bij left:50% en moet daarom in beide toestanden meekomen. */
.p1-tab::after{content:"";position:absolute;left:50%;bottom:4px;width:44px;height:3px;border-radius:3px;background:var(--amber);transform:translateX(-50%) scaleX(0);transition:transform .2s}
.p1-tab.sel::after{transform:translateX(-50%) scaleX(1)}
/* Vaste minimumhoogte op desktop: zonder deze regel sprong het vlak bij het
   wisselen van schakel 67px, waardoor alles eronder verschoof. */
.p1-detail{margin-top:18px;background:var(--panel-blue);border-radius:22px;padding:26px 28px;min-height:253px}
@media(max-width:900px){.p1-detail{min-height:0}}
.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}}
@media(prefers-reduced-motion:reduce){.p1-panel.sel{animation:none}}
.pd-g{min-width:0}
.pd-g .btn{margin-top:14px}
.pd-t{display:block;font-size: 12px;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:var(--amber-dot)}
.pd-tags li{padding-left:0}
.pd-tags li::before{display:none}
.pd-tag abbr{text-decoration:none;cursor:help}
.pd-tag{display:inline-block;font-size: 12px;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: 12px;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}
/* Onder 900px stond de kiezer als vier losse kopjes: de knooppunten en de rail
   waren uit, dus niets verried dat het een keuze was. Nu staat de rail verticaal
   met de knooppunten van 44px links en het label ernaast. */
@media (max-width:900px){
.p1-rail{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:16px}
.p1-nodes{display:grid;grid-template-columns:1fr;gap:10px;position:relative;grid-column:1;align-content:start}
.p1-nodes::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;border-left:2px dashed var(--rail-blue)}
.p1-node{width:44px;height:44px;position:relative;z-index:1}
.p1-node svg{width:20px;height:20px}
.p1-rail::before{display:none}
.p1-grid{grid-column:2;grid-template-columns:1fr;gap:10px;margin-top:0}
.p1-tab{min-height:44px;display:flex;align-items:center;text-align:left;padding:0 10px}
.p1-tab .kv-h3{color:var(--body-c)}
.p1-tab.sel .kv-h3{color:var(--navy)}
/* Hier staat het streepje links in plaats van gecentreerd, dus de translateX
   vervalt en rolt het open vanaf de linkerkant. De sel-regel moet mee: die
   staat hierboven met twee klassen en zou anders de translateX terugzetten. */
.p1-tab::after{left:10px;transform:scaleX(0);transform-origin:left;bottom:4px}
.p1-tab.sel::after{transform:scaleX(1)}
.p1-detail{grid-column:1 / -1;margin-top:4px}
.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:var(--amber-dot);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: 12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-text);margin-bottom:3px}
/* Alleen het eerste label (Startend) is oranje; Bestaand blijft blauw, net als in de fase-sectie. */
.wie-duo.acc>div:first-child 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 var(--line-blue-mid);padding:16px 0 0;margin-top:4px}
.wie-go{justify-self:end;margin-top:-2px}
}
/* 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:640px;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:12px;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-quote .fq-l{display:block}
.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)}
/* De afsluiting van de fase-sectie is sinds 2026-09-03 de gewone gele pil (.btn.btn-amber);
   de onderstreepte tekstlink .fase-ref is vervallen. */
.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:640px}
.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}
/* Onder 400px past de vaste tagkolom plus de tekst niet meer naast elkaar
   (op 320px liep dit 59px uit beeld, zonder schuifbalk). Tag en tekst lopen
   dan als gewone tekst om. */
@media(max-width:400px){.wie-statement .exlist.rows .xstep .xs-txt{display:flex;flex-wrap:wrap;gap:6px 10px;white-space:normal}}
/* 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 var(--line-blue-soft);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}}
/* Hier stond ook `white-space:normal`, met vier klassen tegen de vijf van de
   regel hierboven. Een mediaquery telt niet mee voor specificiteit, dus die
   declaratie heeft nooit gewerkt. Het omwikkelen gebeurt sinds 2026-08-27 in
   de 400px-query hierboven; tussen 401 en 640px past de langste regel (264px
   op 410px breed) gewoon. Dode declaratie verwijderd, weergave ongewijzigd. */
@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{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 4px,rgba(0,0,0,0) 4px 9px)}
.lev-vroute .vstation{position:relative;display:flex;gap:16px;align-items:center;text-decoration:none}
/* De hele rij is klikbaar, dus de aanwijzer hoort dat te laten zien. */
.lev-vroute .vstation[data-pop]{cursor:pointer}
.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 2px #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 2px #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}
/* De vijf stations zijn gelijkwaardig. Twee ervan hadden een kleurwassing die
   las als een blijven hangen hoverstaat; die is op 2026-09-04 vervallen. */
.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: 12px;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}}
/* Op een telefoon zweefde de popover over de twee stations eronder. Daar staat
   hij nu in de rij zelf, onder het station, en schuift de rest netjes op. */
@media(max-width:700px){
.lev-vroute .vstation[data-pop]{flex-wrap:wrap}
.lev-vroute .vk-pop{display:none;position:static;transform:none;flex-basis:100%;width:auto;margin:6px 0 4px 72px;opacity:1;visibility:visible;pointer-events:auto;transition:none}
.lev-vroute .vstation.open .vk-pop,.lev-vroute .open>.vk-pop{display:block;transform:none}
.lev-vroute .vk-pop::before{display:none}
.lev-vroute .vk-pop a{display:inline-flex;align-items:center;min-height:44px}
}
/* 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: var(--blue-on-dark); 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; }
@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:11px;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}

/* ── Contact ──────────────────────────────────────────────────
   Het enige formulier van de site. De mockup (contact-mockup.html in de
   cowork-map) gebruikt eigen tokennamen; hier zijn ze vertaald naar de
   bestaande: --radius-lg ipv --r-lg, --body-c ipv --body, --shadow-soft
   ipv --soft. De pill-radius is hier 100px net als .btn in 2-nav-hero.css. */
body[data-page="contact"] .hero.sub{min-height:0;display:block;padding:132px 0 0;background:var(--paper)}
/* De hero eindigt hier zonder onderpadding, dus kwam de 96px van section er
   bovenop de 38px van .c-cols nog eens bij: 134px tussen de lede en het
   formulier. Op deze pagina dus geen sectiepadding aan de bovenkant; de
   afstand komt voortaan volledig uit .c-cols. */
body[data-page="contact"] section{padding-top:0}
.c-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;margin:56px 0 72px;align-items:start}
/* Geen witte kaarten op deze pagina. De andere pagina's zetten .card en
   .partnerbox bewust terug op background:none, omdat een omlijnd vlak het
   geheel generiek maakt; het formulier volgt dat nu. De invoervelden zijn
   zelf wit met een rand, dus het formulier blijft ook zonder kaart leesbaar
   als formulier. De zijkolom en de bedanktekst krijgen wel een vlak, maar als
   zachte blauwe tint zonder omlijning, zoals .route.hl elders. */
.c-card{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.c-card h2{font-size:19px;font-weight:800;letter-spacing:-.015em}
.c-card .c-sub{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.c-onderwerp{margin-top:14px;padding:10px 14px;background:var(--amber-tint);border-radius:12px;font-size:14px;color:var(--amber-ink)}
.c-onderwerp b{color:var(--ink)}
.c-form{margin-top:22px}
.c-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c-f{margin-top:16px}
.c-row .c-f{margin-top:16px}
.c-form fieldset{border:none;min-width:0}
.c-form label,.c-form legend{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;padding:0}
.c-form label .c-opt{font-weight:400;color:var(--muted)}
.c-form input[type=text],.c-form input[type=email],.c-form input[type=tel],.c-form textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line-blue);border-radius:12px;padding:11px 13px;min-height:44px}
.c-form textarea{min-height:104px;resize:vertical;line-height:1.5}
.c-form input:focus-visible,.c-form textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
/* Foutmelding per veld, onder het veld. Elke melding heeft aria-live="polite",
   zodat een schermlezer de tekst meekrijgt wanneer die verschijnt. */
.c-fout{display:none;font-size:12.5px;color:#B3261E;margin-top:6px;line-height:1.45;font-weight:600}
.c-f.mis .c-fout{display:block}
.c-f.mis input,.c-f.mis textarea{border-color:#B3261E}
.c-keuze{display:flex;flex-wrap:wrap;gap:9px;margin-top:2px}
.c-keuze label{display:flex;align-items:center;gap:8px;margin:0;cursor:pointer;
  border:1.5px solid var(--line-blue);border-radius:100px;padding:9px 16px;
  font-size:14px;font-weight:500;color:var(--body-c);min-height:44px;background:#fff}
.c-keuze input{accent-color:var(--blue);width:16px;height:16px}
.c-keuze input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.c-keuze label:has(input:checked){border-color:var(--blue);background:var(--tint);color:var(--ink)}
/* Dagdeel-blok: onzichtbaar tot Terugbellen of Videogesprek gekozen is. Zonder
   JavaScript (of als :has ontbreekt) blijft hij gewoon zichtbaar; dat is de
   bedoeling, want dan moet het formulier ook werken. Daarom display:block als
   basis en pas verstopt binnen @supports. */
@supports selector(:has(input)) {
  .c-form:has(input[name=contactvoorkeur][value=mail]:checked) #c-dagdeel{display:none}
  .c-form:has(input[name=contactvoorkeur][value=video]:checked) #c-meetnoot{display:block}
}
#c-dagdeel{margin-top:16px;padding:16px;background:var(--tint);border-radius:12px}
#c-dagdeel .c-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-text);display:block;margin-bottom:9px}
/* Twee groepen onder elkaar: eerst de dagen, dan het moment van de dag. */
#c-dagdeel .c-dagnoot{margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.45}
#c-dagdeel .c-dagnoot + .c-k{margin-top:16px}
/* Buiten dit paneel is aangevinkt = --tint op een witte pagina, en dat werkt.
   Binnen dit paneel valt die vulling samen met het paneel zelf (allebei --tint),
   waardoor de gekozen knop juist wegzakt terwijl de niet-gekozen wit oplichten.
   Precies verkeerd om, en met vijf dagen naast elkaar ook echt hinderlijk.
   Hier blijft de knop dus wit en doet een dubbele blauwe ring het werk. */
#c-dagdeel .c-keuze label:has(input:checked){background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--blue)}
#c-meetnoot{display:none;margin:0 0 12px;font-size:13.5px;color:var(--body-c);line-height:1.5}
/* Honeypot: visueel en voor schermlezers weg, maar wel invulbaar voor een bot
   die domweg alle velden vult. Niet display:none, want dat slaan bots over. */
.c-web{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.c-turnstile{margin-top:20px;min-height:0}
.c-form .btn{margin-top:22px;border:none;cursor:pointer;font:inherit;font-weight:800;font-size:15.5px}
.c-form .btn[disabled]{opacity:.6;cursor:default}
.c-na{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.5;max-width:66ch}
.c-robot{font-size:13px;color:var(--muted);margin-top:8px}
.c-direct{margin-top:14px;font-size:15.5px;color:var(--body-c)}
.c-direct a{font-weight:700}
.c-vervolg{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.c-vervolg .btn{font-size:14px;padding:10px 18px}
/* Na versturen verdwijnt de uitnodiging boven het bedanktblok. */
body.c-succes .hero .lede,body.c-succes .c-direct{display:none}
/* De zijkolom is net als het formulier kaal: alleen de bedanktekst krijgt een
   vlak. Zonder kaartrand moeten de twee blokken het van hun onderlinge afstand
   hebben, vandaar een ruimere gap dan de 18px van de kaartversie. */
.c-zijkant{display:grid;gap:38px}
.c-zijkant h3{font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.c-lijn{list-style:none;margin:14px 0 0;padding:0}
/* Scheidingslijn was bijna-wit; dat werkte op een witte kaart, maar niet meer
   op de blauwe tint. --line-blue houdt hem subtiel en wel zichtbaar. */
.c-lijn li{padding:9px 0;border-top:1px solid var(--line-blue);font-size:14px;line-height:1.5}
.c-lijn li:first-child{border-top:none}
.c-lijn b{color:var(--ink)}
.c-lijn a{display:inline-flex;align-items:center;min-height:44px}
/* Stond in --orange-ink en las daardoor als een foutmelding, terwijl het een
   gebruiksaanwijzing is. Dezelfde zin staat in de footer al in --muted; die
   volgen we hier. Rood en oranje blijven zo voorbehouden aan .c-fout, waar ze
   wel iets betekenen. */
.c-waarsch{margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.45}
.c-meta{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:12px}
/* Bedankt-staat: een blok dat focus kan krijgen zodat de schermlezer de
   bevestiging voorleest. outline uit want het is geen interactief element. */
/* Dezelfde marges als .c-cols. De bedanktekst neemt de plaats van het
   formulier in, en zonder deze regel plakt hij tegen de lede aan: .c-cols is
   dan verborgen en neemt zijn eigen marge mee, en de sectiepadding staat op
   deze pagina op 0. */
/* Zonder vlak. Het blauwe paneel maakte van de bevestiging een kaart terwijl de
   rest van deze pagina juist kaal is (zie de toelichting bij .c-card), en de
   tekst erin zakte weg tegen de tint. */
#c-bedankt{max-width:640px;margin:56px 0 72px;background:none;border-radius:0;padding:0}
#c-bedankt:focus{outline:none}
/* De bevestiging is de enige tekst die er op dat moment staat, dus hij mag de
   gewone bodybehandeling van deze pagina krijgen in plaats van de kleine grijze
   bijschriftmaat: --muted op 15px gaf 5,0:1, --body-c op 15,5px geeft 5,7:1 en
   leest als een mededeling in plaats van als een voetnoot. */
/* 19px is de kopmaat van de kaarten in de zijkolom. Zonder vlak eromheen staat
   deze kop alleen op de pagina en droeg die maat te weinig; 23px houdt hem ruim
   onder de h1 van 34px+ maar maakt hem wel de kop van dit blok. */
#c-bedankt h2{font-size:23px;letter-spacing:-.02em}
#c-bedankt .c-sub{font-size:15.5px;color:var(--body-c);line-height:1.65;margin-top:12px}
#c-bedankt .c-sub a{font-weight:700}
/* Het vinkje stond op wit met een hairline; dat was nodig zolang het op de
   blauwe tint lag. Zonder dat vlak zou wit op wit wegvallen, dus terug naar de
   zachte tint met dezelfde hairline eromheen. */
.c-vink{width:44px;height:44px;border-radius:100px;background:var(--tint);border:1px solid var(--line-blue);display:grid;place-items:center;color:var(--blue-text);font-size:20px;margin-bottom:16px}
@media (max-width:880px){.c-cols{grid-template-columns:1fr}}
@media (max-width:600px){.c-row{grid-template-columns:1fr}.c-row .c-f{margin-top:16px}}
@media (pointer:coarse){.c-keuze label{min-height:48px}}