/* ==========================================================================
   Wervora - een samenhangend stylesheet (vervangt alle losse stijllagen)
   Volgorde: lettertypen, tokens, basis, opmaak, header, onderdelen,
   pagina-specifiek, footer, hulpmiddelen. Geen inline stijlen; !important alleen voor toegankelijkheid (verborgen tekst, minder beweging).
   ========================================================================== */

@font-face{font-family:"Wervora Display";src:url(fonts/bricolage-grotesque.woff2) format("woff2-variations");font-weight:200 800;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#F6F5EF;      /* gebroken wit */
  --paper-2:#EEEDE5;    /* iets dieper vlak */
  --ink:#111418;        /* antraciet */
  --ink-2:#2A2E34;
  --muted:#5E6269;      /* gedempte tekst, 5.9:1 op paper */
  --line:#DCDAD1;
  --line-strong:#B9B7AE;
  --coral:#FF6B5B;      /* Wervora-koraal: actie, merk, betekenis */
  --coral-ink:#B23A2E;  /* koraal als tekst op paper (4.9:1) */

  --font-display:"Wervora Display",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --step--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.0625rem);
  --step-1:clamp(1.2rem,1.12rem + .4vw,1.4rem);
  --step-2:clamp(1.5rem,1.3rem + .9vw,2rem);
  --step-3:clamp(2rem,1.6rem + 1.9vw,3.1rem);
  --step-4:clamp(2.6rem,1.8rem + 3.8vw,5.2rem);

  --wrap:1240px;
  --gutter:clamp(20px,4vw,48px);
  --space-section:clamp(64px,7.5vw,120px);
  --radius:6px;
  --header-h:76px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.6 var(--font-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
p{margin:0 0 1em;max-width:66ch}
h1+p,h2+p,h2+.lead,h1+.lead,h4+p{margin-top:20px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.02;letter-spacing:-.025em;margin:0;font-variation-settings:"opsz" 96;text-wrap:balance}
h1{font-size:var(--step-4);letter-spacing:-.035em}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);line-height:1.15;letter-spacing:-.01em;font-variation-settings:"opsz" 24}
ul,ol{padding-left:1.2em}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--paper)}
::selection{background:var(--coral);color:var(--ink)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--radius)}
.skip-link:focus{top:12px}

/* ---------- opmaak ---------- */
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.section{padding-block:var(--space-section)}
.section--tight{padding-block:calc(var(--space-section)*.6)}
.section-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.section-head p{color:var(--muted);margin:0}
.lead{font-size:var(--step-1);line-height:1.45;color:var(--ink-2);max-width:40ch}
.muted{color:var(--muted)}
.small{font-size:var(--step--1)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- knoppen en links ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;min-height:48px;padding:.75em 1.25em;border-radius:var(--radius);border:1.5px solid var(--ink);font:700 var(--step--1)/1.2 var(--font-body);text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn--primary{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.btn--primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--quiet{background:transparent;color:var(--ink)}
.btn--quiet:hover{background:var(--ink);color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ext::after{content:"";display:inline-block;width:.8em;height:.8em;margin-left:.3em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3h8v8M13 3 3 13' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3h8v8M13 3 3 13' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.text-link{font-weight:700;text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.text-link:hover{text-decoration-color:var(--ink)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.header-bar{display:flex;align-items:center;gap:28px;min-height:var(--header-h)}
.brand{flex:none;display:block;line-height:0}
.brand img{width:148px;height:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nav-list>li{display:flex;align-items:center}
.nav-link{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;padding:0 12px;font-weight:700;font-size:15px;text-decoration:none;border-radius:var(--radius)}
.nav-link:hover{background:var(--paper-2)}
.nav-link[aria-current=page]{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:.45em}
.nav-more{display:none;align-items:center;justify-content:center;width:32px;height:44px;margin-left:-8px;border:0;background:none;color:inherit;cursor:pointer;border-radius:var(--radius)}
.js .nav-more{display:inline-flex}
.nav-more:hover{background:var(--paper-2)}
.chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.nav-more[aria-expanded=true] .chev{transform:translateY(2px) rotate(225deg)}
.nav-search{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;text-decoration:none}
.nav-search:hover{background:var(--paper-2)}
.nav-search svg{width:20px;height:20px}
.nav-cta{margin-left:10px}
.nav-shop{margin-left:6px;border:1.5px solid var(--ink);min-height:40px}
.nav-shop:hover{background:var(--ink);color:var(--paper)}
.menu-toggle{display:none}

/* dienstenpaneel: zit in de header, geen herplaatsing via JavaScript */
.services-panel{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(17,20,24,.35)}
.services-panel[hidden]{display:none}
.services-grid{display:block;padding-block:28px 36px}
.services-group ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.services-group h2{font:700 var(--step--1)/1.3 var(--font-body);letter-spacing:0;color:var(--muted);margin:0 0 10px}
.services-group ul{list-style:none;margin:0;padding:0}
.services-group a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 0;border-top:1px solid var(--line);text-decoration:none}
.services-group a:hover .svc-name{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.svc-name{font-weight:700}
.svc-price{font-size:var(--step--1);color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.svc-line{grid-column:1/-1;font-size:var(--step--1);color:var(--muted)}
.services-all{grid-column:1/-1;margin-top:22px}

@media (max-width:1240px){
  .header-bar{gap:12px}
  .menu-toggle{display:inline-flex;margin-left:auto;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1.5px solid var(--ink);border-radius:var(--radius);background:transparent;color:var(--ink);font:700 15px/1 var(--font-body);cursor:pointer}
  .menu-lines{position:relative;width:16px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
  .menu-toggle[aria-expanded=true] .menu-lines{border-color:transparent}
  .menu-toggle[aria-expanded=true] .menu-lines::before,.menu-toggle[aria-expanded=true] .menu-lines::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid currentColor;transform:rotate(45deg)}
  .menu-toggle[aria-expanded=true] .menu-lines::after{transform:rotate(-45deg)}
  .js .nav{display:none}
  .nav{position:fixed;inset:var(--header-h) 0 0 0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px var(--gutter) 32px;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}
  .js .nav.is-open{display:flex}
  .no-js .nav{position:static;padding:0 0 16px;border:0}
  .no-js .header-bar{flex-wrap:wrap}
  .nav-list{flex-direction:column;align-items:stretch}
  .nav-list>li{flex-wrap:wrap;border-bottom:1px solid var(--line)}
  .nav-link{flex:1;min-height:56px;padding:0;font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.015em}
  .nav-link:hover{background:none}
  .nav-more{width:56px;height:56px;margin:0;border-left:1px solid var(--line);border-radius:0}
  .nav-link[href="/diensten"]{margin-right:4px}
  .services-panel{position:static;width:100%;box-shadow:none;border:0;background:transparent}
  .services-panel .wrap{width:100%}
  .services-grid{padding:4px 0 20px}
  .services-group ul{grid-template-columns:1fr}
  .nav-search{width:auto;height:56px;border-radius:0;justify-content:flex-start;gap:12px;font-weight:700;border-bottom:1px solid var(--line)}
  .nav-search .visually-hidden{position:static!important;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
  .nav-cta{margin:24px 0 0;justify-content:center}
  .nav-shop{border:0;margin-left:0;min-height:56px}
  html.menu-open{overflow:hidden}
}

/* ---------- hero met werkbank ---------- */
.hero{padding-block:clamp(40px,6vw,88px) clamp(24px,3vw,48px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,80px);align-items:center}
.hero h1{font-size:clamp(2.7rem,1.6rem + 4.2vw,5.4rem);font-variation-settings:"opsz" 96}
.hero h1 .line{display:block}
.hero .lead{margin-top:28px}

.bench-stages{display:none;gap:4px;margin-bottom:14px;padding:4px;border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%;overflow-x:auto}
.js .bench-stages{display:flex}
.bench-stages button{min-height:40px;padding:0 clamp(10px,2.4vw,16px);border:0;border-radius:999px;background:transparent;color:var(--muted);font:700 14px/1 var(--font-body);cursor:pointer;white-space:nowrap}
.bench-stages button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.bench-stages button:hover:not([aria-pressed=true]){color:var(--ink)}
.bench-caption{min-height:3.2em;margin:16px 0 0;color:var(--muted);font-size:var(--step--1);max-width:52ch}
.screen-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1.5px solid var(--ink);background:var(--paper)}
.screen-bar i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink)}
.screen-url{margin-left:10px;font-size:11px;color:var(--muted)}

/* ---------- werkbank: van idee naar werkende pagina ---------- */
.wb{position:relative;margin:0}
.wb-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:14px}
.wb-top .bench-stages{margin:0}
.wb-play{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-2);font:700 13px/1 var(--font-body);cursor:pointer}
.wb-play::before{content:"";width:10px;height:12px;background:currentColor;clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.wb-play.is-paused::before{clip-path:polygon(0 0,100% 50%,0 100%)}
.wb-play:hover{border-color:var(--ink)}
.wb-play[hidden]{display:none}
.wb-screen{position:relative;border:1.5px solid var(--ink);border-radius:10px;background:#fff;overflow:hidden}
.wb-badge{margin-left:auto;padding:3px 9px;border-radius:999px;background:var(--paper-2);font:700 10px/1.2 var(--font-body);color:var(--ink-2);transition:background-color .3s,color .3s}
.wb-badge.is-live{background:var(--ink);color:var(--paper)}
.wb-body{position:relative;aspect-ratio:16/10.4;overflow:hidden;container-type:inline-size;background:#fff}
.wb-body>*{position:absolute;inset:0}
.wb-site{display:grid;grid-template-rows:auto 1fr auto;gap:5cqw;padding:5.5cqw 7cqw 6cqw;transform-origin:100% 50%;transition:transform .7s var(--ease),opacity .5s var(--ease)}
.wb-nav{display:flex;justify-content:space-between;align-items:center}
.wb-logo{display:flex;align-items:center;gap:1.4cqw;font:700 2.6cqw/1 var(--font-display);letter-spacing:-.02em}
.wb-logo i{width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--coral)}
.wb-links{display:flex;gap:3.6cqw;font:700 1.9cqw/1 var(--font-body);color:var(--ink-2)}
.wb-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:6cqw;align-items:center;min-height:0}
.wb-text{display:grid;gap:2.4cqw;justify-items:start}
.wb-title{margin:0;font:700 5.4cqw/1.02 var(--font-display);letter-spacing:-.035em;max-width:none;min-height:1.02em}
.wb-copy{margin:0;font-size:2cqw;line-height:1.5;color:var(--muted);max-width:34ch}
.wb-btn{padding:1.5cqw 2.4cqw;border:1.5px solid var(--coral);border-radius:4px;background:var(--coral);color:var(--ink);font:700 1.9cqw/1 var(--font-body);transition:background-color .4s,border-color .4s}
.wb-btn.is-plain{background:transparent;border-color:var(--ink)}
.wb-art{position:relative;height:100%;min-height:22cqw;border-radius:6px;background:var(--paper-2);overflow:hidden}
.wb-art span{position:absolute}
.wb-art .s1{left:14%;top:14%;width:46%;aspect-ratio:1;border-radius:50%;background:var(--coral)}
.wb-art .s2{right:10%;bottom:12%;width:44%;height:52%;border-radius:3px;background:var(--ink)}
.wb-art .s3{left:10%;bottom:14%;width:30%;height:6%;border-radius:3px;background:var(--line-strong)}
.wb-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4cqw}
.wb-cards span{display:grid;gap:1cqw;padding:1.8cqw 2cqw;border-radius:5px;background:var(--paper)}
.wb-cards b{font:700 1.8cqw/1.1 var(--font-display)}
.wb-cards i{height:.9cqw;border-radius:2px;background:var(--line)}
.wb-cards i+i{width:62%}
[data-el].is-off{opacity:0;transform:translateY(1cqw)}
[data-el]{transition:opacity .35s var(--ease),transform .35s var(--ease),outline-color .3s}

/* lagen die alleen in een fase verschijnen */
.wb-intake,.wb-code,.wb-cms,.wb-cursor,.wb-toast,.wb-wire,.wb-notes{opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s,transform .5s var(--ease)}
.wb-intake{inset:auto auto auto 8%;top:50%;width:min(76%,440px);height:max-content;transform:translateY(-46%) rotate(-1.5deg);padding:4cqw 4.4cqw;background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;box-shadow:0 18px 40px -26px rgba(17,20,24,.55)}
.wb-intake small{display:block;margin-bottom:1.6cqw;color:var(--muted);font:700 1.8cqw/1 var(--font-body)}
.wb-intake p{margin:0;min-height:2.5em;font:600 3.3cqw/1.25 var(--font-display);letter-spacing:-.015em;max-width:none}
.wb-chips{display:flex;flex-wrap:wrap;gap:1.2cqw;margin:2.6cqw 0 0;padding:0;list-style:none}
.wb-chips li{padding:1cqw 1.8cqw;border-radius:999px;background:var(--ink);color:var(--paper);font:700 1.7cqw/1.2 var(--font-body);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.wb-chips li.is-off{opacity:0;transform:translateY(1cqw) scale(.96)}
.wb-wire{width:100%;height:100%;overflow:visible}
.wb-wire .w-box{fill:none;stroke:var(--ink-2);stroke-width:1.2}
.wb-wire .w-fill{fill:var(--paper-2);stroke:none}
.wb-wire .w-line{fill:var(--line);stroke:none}
.wb-wire .w-route{fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round}
.wb-wire .w-dot{fill:var(--coral)}
.wb-notes{pointer-events:none}
.wb-note{position:absolute;padding:.6cqw 1.2cqw;border-radius:3px;background:var(--ink);color:var(--paper);font:700 1.5cqw/1.2 var(--font-body);white-space:nowrap;transform:translate(-50%,-130%);transition:opacity .3s var(--ease)}
.wb-note.is-off{opacity:0}
.wb-code{right:auto;width:44%;padding:0;background:#15181C;color:#E6E4DC;transform:translateX(-102%);display:flex;flex-direction:column}
.wb-code-bar{display:flex;gap:2px;padding:1.4cqw 1.6cqw 0;border-bottom:1px solid #2A2E34}
.wb-code-bar span{padding:.9cqw 1.4cqw;border-radius:4px 4px 0 0;font:700 1.45cqw/1 var(--font-body);color:#8A8E94}
.wb-code-bar span.is-on{background:#24282E;color:#E6E4DC}
.wb-code ol{flex:1;margin:0;padding:1.8cqw 1.6cqw 1.8cqw 5.2cqw;font:400 1.6cqw/1.75 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;color:#E6E4DC;list-style:none;counter-reset:ln}
.wb-code li{position:relative;counter-increment:ln;white-space:pre;overflow:hidden;text-overflow:clip}
.wb-code li::before{content:counter(ln);position:absolute;left:-3.8cqw;width:2.6cqw;text-align:right;color:#5E6269}
.wb-code li.is-typing::after{content:"";display:inline-block;width:.55em;height:1.1em;margin-left:1px;vertical-align:-.2em;background:var(--coral);animation:wb-caret 1s steps(1) infinite}
.wb-code li.is-done{opacity:.85}
.c-tag{color:#FF8A7D}.c-attr{color:#9DC0DA}.c-str{color:#A9C2B0}.c-pun{color:#8A8E94}.c-prop{color:#9DC0DA}.c-val{color:#E6E4DC}
@keyframes wb-caret{50%{opacity:0}}
.wb-cms{inset:0 0 auto 0;height:7.6cqw;display:flex;align-items:center;gap:1.4cqw;padding:0 2.4cqw;background:var(--paper);border-bottom:1.5px solid var(--ink);transform:translateY(-100%);font:700 1.6cqw/1 var(--font-body)}
.wb-cms-label{margin-right:auto;display:flex;align-items:center;gap:1cqw}
.wb-cms-label::before{content:"";width:1.4cqw;height:1.4cqw;border-radius:50%;background:var(--coral)}
.wb-cms-save,.wb-cms-pub{padding:1.1cqw 1.8cqw;border:1.5px solid var(--ink);border-radius:4px;transition:transform .15s,background-color .2s,color .2s}
.wb-cms-pub{background:var(--ink);color:var(--paper)}
.wb-cms .is-pressed{transform:scale(.94)}
.wb-cms-save.is-done{background:var(--paper-2)}
.wb-cursor{inset:auto;left:0;top:0;width:22px;height:22px;background:var(--ink);-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;z-index:5;--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l17 9.5-7.4 1.6 4.2 7.4-3 1.6-4.2-7.4L4 19z' fill='black'/%3E%3C/svg%3E");filter:drop-shadow(0 0 1px #fff)}
.wb-toast{inset:auto 3cqw 3cqw auto;padding:1.4cqw 2.2cqw;border-radius:6px;background:var(--ink);color:var(--paper);font:700 1.7cqw/1 var(--font-body);transform:translateY(30%)}
.wb-toast::before{content:"";display:inline-block;width:1.2cqw;height:1.2cqw;margin-right:1cqw;border-radius:50%;background:#7E9A86}

/* fasen */
.wb[data-stage=idee] .wb-site{opacity:0}
.wb[data-stage=idee] .wb-intake{opacity:1;visibility:visible;transition-delay:0s;transform:translateY(-50%) rotate(-1.5deg)}
.wb[data-stage=schets] .wb-site{opacity:0}
.wb[data-stage=schets] .wb-wire,.wb[data-stage=schets] .wb-notes{opacity:1;visibility:visible;transition-delay:0s}
.wb.is-building .wb-code{opacity:1;visibility:visible;transition-delay:0s;transform:none}
.wb.is-building .wb-site{transform:scale(.56)}
.wb[data-stage=beheer] .wb-cms{opacity:1;visibility:visible;transition-delay:0s;transform:none}
.wb[data-stage=beheer] .wb-site{transform:translateY(5cqw) scale(.94);transform-origin:50% 0}
.wb[data-stage=beheer] [data-el=title],.wb[data-stage=beheer] [data-el=copy],.wb[data-stage=beheer] [data-el=btn],.wb[data-stage=beheer] [data-el=art]{outline:1.5px dashed rgba(255,107,91,.7);outline-offset:.8cqw}
.wb[data-stage=beheer] .wb-title.is-editing{outline:2px solid var(--coral)}
.wb-title.is-editing::after{content:"";display:inline-block;width:2px;height:.9em;margin-left:2px;vertical-align:-.08em;background:var(--ink);animation:wb-caret 1s steps(1) infinite}
.wb.has-cursor .wb-cursor{opacity:1;visibility:visible;transition-delay:0s}
.wb.has-toast .wb-toast{opacity:1;visibility:visible;transition-delay:0s;transform:none}

/* smalle werkbank (telefoon): alles onder elkaar */
@container (max-width:520px){
  .wb-site{grid-template-rows:auto auto auto;gap:5cqw;padding:7cqw 7cqw}
  .wb-logo{font-size:4.4cqw}.wb-logo i{width:5cqw;height:5cqw}
  .wb-links{display:none}
  .wb-hero{grid-template-columns:minmax(0,1fr);gap:5cqw}
  .wb-title{font-size:9.4cqw}.wb-copy{font-size:3.6cqw}.wb-btn{font-size:3.4cqw;padding:2.6cqw 4cqw}
  .wb-art{min-height:34cqw}
  .wb-cards{gap:3cqw}.wb-cards b{font-size:3cqw}.wb-cards span{padding:2.6cqw}
  .wb-intake{left:6%;width:88%;padding:6cqw}.wb-intake small{font-size:3.2cqw}.wb-intake p{font-size:5.6cqw}.wb-chips li{font-size:3cqw;padding:1.8cqw 3cqw}
  .wb-code{width:100%;inset:auto 0 0 0;height:50%;transform:translateY(102%)}
  .wb-code ol{font-size:2.9cqw;padding-left:8cqw}.wb-code li::before{left:-6cqw;width:4cqw}.wb-code-bar span{font-size:2.8cqw}
  .wb.is-building .wb-site{transform:none}
  .wb-cms{height:12cqw;font-size:3cqw}.wb-cms-label::before{width:2.4cqw;height:2.4cqw}
  .wb[data-stage=beheer] .wb-site{transform:translateY(10cqw) scale(.92)}
  .wb-note{font-size:2.8cqw}.wb-toast{font-size:3.2cqw}
}
@media (max-width:640px){.wb-body{aspect-ratio:4/5.2}.js .wb-top .bench-stages{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.wb-code li.is-typing::after,.wb-title.is-editing::after{animation:none}}

/* ---------- werkregister (projecten) ---------- */
.work-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.work-item{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:20px 40px;padding:32px 0;border-bottom:1px solid var(--line);align-items:start}
.work-media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:var(--paper-2)}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.work-media--contain img{object-fit:contain;padding:12%}
.work-item:hover .work-media img,.work-item:focus-within .work-media img{transform:scale(1.03)}
.work-kind{display:inline-block;margin-bottom:12px;font-size:var(--step--1);font-weight:700}
.work-kind--own{color:var(--coral-ink)}
.work-item h3{font-size:var(--step-2);margin-bottom:12px}
.work-item h3 a{text-decoration:none}
.work-item h3 a::after{content:"";position:absolute;inset:0}
.work-item{position:relative}
.work-item h3 a:hover{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px}
.work-built{margin:0;padding:0;list-style:none;font-size:var(--step--1)}
.work-built dt{color:var(--muted);margin-bottom:6px}
.work-built dd{margin:0;padding:6px 0;border-top:1px solid var(--line)}
.section-foot{margin-top:28px}

/* ---------- diensten-index ---------- */
.svc-index{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.svc-index a{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,2fr);gap:8px 40px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none}
.svc-index h3{font-size:var(--step-2)}
.svc-index p{margin:0;color:var(--muted)}
.svc-index .price{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.svc-index .price small{display:block;font-weight:400;color:var(--muted);white-space:normal}
.svc-index a:hover h3{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px;text-underline-offset:.12em}

/* ---------- zelf bouwen of laten bouwen ---------- */
.choose{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);border-radius:10px;overflow:hidden}
.choose>div{padding:clamp(28px,4vw,56px)}
.choose>div+div{border-left:1.5px solid var(--ink);background:var(--ink);color:var(--paper)}
.choose h3{font-size:var(--step-2);margin-bottom:14px}
.choose .amount{font:700 var(--step-3)/1 var(--font-display);letter-spacing:-.03em;margin:24px 0 6px}
.choose .amount-note{font-size:var(--step--1);opacity:.75;margin-bottom:24px}
.choose ul{margin:0 0 8px;padding-left:1.1em}
.choose li{margin-bottom:6px}
.choose .on-dark .btn--quiet,.choose>div+div .btn--quiet{border-color:var(--paper);color:var(--paper)}
.choose>div+div .btn--quiet:hover{background:var(--paper);color:var(--ink)}

/* ---------- over ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.about figure{margin:0}
.about img{border-radius:var(--radius);width:100%}
.about figcaption{margin-top:10px;font-size:var(--step--1);color:var(--muted)}

/* ---------- initiatief-teaser en rondekaart ---------- */
.round-card{border:1.5px solid var(--ink);border-radius:10px;background:var(--paper)}
.round-card dl{margin:0}
.round-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;padding:18px 24px;border-bottom:1px solid var(--line)}
.round-row:last-child{border-bottom:0}
.round-row dt{color:var(--muted);font-size:var(--step--1)}
.round-row dd{margin:0;grid-column:1/-1;font:700 var(--step-1)/1.2 var(--font-display);letter-spacing:-.01em}
.status{display:inline-flex;align-items:center;gap:8px;font:700 var(--step--1)/1 var(--font-body)}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,107,91,.22)}
.status--muted::before{background:var(--line-strong);box-shadow:none}
.round-note{margin:0;padding:14px 24px;border-top:1px solid var(--line);font-size:var(--step--1)}
.round-actions{display:flex;flex-wrap:wrap;gap:10px;padding:18px 24px;border-top:1.5px solid var(--ink);background:var(--paper-2);border-radius:0 0 9px 9px}

.initiative-band{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}

/* ---------- kennis en nieuws ---------- */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;list-style:none;margin:0;padding:0}
.posts li{border-top:1.5px solid var(--ink);padding-top:18px}
.posts time,.posts .topic{font-size:var(--step--1);color:var(--muted)}
.posts h3{margin:10px 0 0;font-size:var(--step-1)}
.posts a{text-decoration:none}
.posts a:hover h3{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}

/* ---------- contactstrook ---------- */
.contact-band{background:var(--coral);color:var(--ink)}
.contact-band .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;padding-block:clamp(56px,7vw,104px)}
.contact-band h2{font-size:var(--step-4);max-width:11ch}
.contact-band .btn--primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.contact-band .btn--primary:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.contact-band .btn--quiet:hover{background:var(--ink);color:var(--coral)}
.contact-lines{list-style:none;margin:20px 0 0;padding:0}
.contact-lines li{padding:8px 0;border-top:1px solid rgba(17,20,24,.25)}

/* ---------- dienstpagina ---------- */
.crumbs{font-size:var(--step--1);color:var(--muted);padding-top:24px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line-strong)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.page-hero{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,104px)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,80px);align-items:end}
.page-hero h1 .line{display:block}
.page-hero-grid--top{align-items:start}
.summary{border:1.5px solid var(--ink);border-radius:10px;padding:24px}
.summary .amount,.choose .amount{margin-bottom:0}
.summary .amount--text{font-size:var(--step-2)}
.summary .amount{font:700 var(--step-3)/1 var(--font-display);letter-spacing:-.03em}
.summary .amount-note{color:var(--muted);font-size:var(--step--1);margin:6px 0 16px}
.summary ul{list-style:none;padding:0;margin:0 0 18px}
.summary li{padding:9px 0 9px 26px;border-top:1px solid var(--line);position:relative}
.summary li::before{content:"";position:absolute;left:2px;top:.95em;width:12px;height:6px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}

.subnav{position:sticky;top:var(--header-h);z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
.subnav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.subnav a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;font-weight:700;font-size:var(--step--1);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.subnav a[aria-current=true]{border-bottom-color:var(--coral)}

.pkg{border-bottom:1px solid var(--line)}
.pkg-head,.pkg summary{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1.6fr) 28px;gap:16px;align-items:center}
.facts-1.pkg-head,.facts-1 summary{grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,1.6fr) 28px}
.facts-2.pkg-head,.facts-2 summary{grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,2fr) minmax(0,1.6fr) 28px}
.facts-3.pkg-head,.facts-3 summary{grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,2.4fr) minmax(0,1.1fr) minmax(0,1.6fr) 28px}
.facts-4.pkg-head,.facts-4 summary{grid-template-columns:minmax(0,2.6fr) repeat(4,minmax(0,1.6fr)) minmax(0,1.6fr) 28px}
.pkg-head{padding:0 0 10px;border-bottom:1.5px solid var(--ink);font-size:var(--step--1);font-weight:700;color:var(--muted)}
.pkg-head span:nth-last-child(2){text-align:right}
.pkg summary .p small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.pkg summary{padding:20px 0;cursor:pointer;list-style:none}
.pkg-fact{font-size:var(--step--1);color:var(--ink-2)}
.pkg .tip{display:block;margin-top:4px;font:700 12px/1.3 var(--font-body);color:var(--coral-ink)}
.pkg summary .p{text-align:right}
.pkg summary::-webkit-details-marker{display:none}
.pkg summary h3{font-size:var(--step-1)}
.pkg summary .p{font-weight:700;font-variant-numeric:tabular-nums}
.pkg summary .plus{position:relative;width:20px;height:20px}
.pkg summary .plus::before,.pkg summary .plus::after{content:"";position:absolute;left:0;right:0;top:9px;border-top:2px solid var(--ink);transition:transform .2s var(--ease)}
.pkg summary .plus::after{transform:rotate(90deg)}
.pkg[open] summary .plus::after{transform:rotate(0)}
.pkg-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 48px;padding:0 0 32px}
.pkg-body h4{font-size:var(--step-2);margin-bottom:12px}
.pkg-body ul{margin:0;padding-left:1.1em}
.pkg-body li{margin-bottom:6px}
.pkg-note{grid-column:2;color:var(--muted);font-size:var(--step--1);margin:0}
.fine{margin-top:24px;color:var(--muted);font-size:var(--step--1);max-width:80ch}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.two-col h2{font-size:var(--step-2);margin-bottom:16px}

.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
.steps li{counter-increment:s;border-top:1.5px solid var(--ink);padding-top:16px}
.steps li::before{content:counter(s);display:block;font:700 var(--step-2)/1 var(--font-display);color:var(--coral-ink);margin-bottom:14px}
.steps h3{margin-bottom:8px}
.steps p{color:var(--muted);margin:0}

.case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.case img{border:1.5px solid var(--ink);border-radius:8px}
.case-media{display:grid;place-items:center;min-height:220px;padding:32px;border:1.5px solid var(--ink);border-radius:10px;background:#fff}
.case-media img{border:0;max-height:200px;width:auto}
.case-media strong{font:700 var(--step-3)/1 var(--font-display)}

.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{overflow-wrap:anywhere;display:flex;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer;font:700 var(--step-1)/1.25 var(--font-display);letter-spacing:-.01em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-top:.35em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .answer{padding:0 0 24px;max-width:70ch}
.faq .answer p:last-child{margin:0}

.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;list-style:none;margin:0;padding:0}
.related a{display:block;padding:18px 0;border-top:1.5px solid var(--ink);text-decoration:none}
.related strong{display:block;font:700 var(--step-1)/1.2 var(--font-display)}
.related span{color:var(--muted);font-size:var(--step--1)}
.related a:hover strong{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}

/* ---------- initiatiefpagina ---------- */
.mhm-hero h1{max-width:12ch}
.mhm-hero .mark{display:block;width:44px;height:44px;margin-bottom:24px}
.mhm-hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start}
.mhm-hero .lead{font-size:var(--step-0);line-height:1.6;max-width:46ch}
.mhm-next{font-size:var(--step--1);color:var(--ink-2);max-width:46ch}
.mhm-visual img{width:100%;border-radius:10px}
.mhm-visual .round-card{margin-top:14px}
.mhm-visual .round-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.mhm-visual .round-row{display:block;padding:12px 16px;border-bottom:0;border-right:1px solid var(--line)}
.mhm-visual .round-row:last-child{border-right:0}
.mhm-visual .round-row dt{font-size:12px;line-height:1.3}
.mhm-visual .round-row dd{margin-top:4px;font-size:var(--step-0)}
.mhm-visual .round-note,.mhm-visual .round-actions{padding:10px 16px}
.chosen--text{grid-template-columns:minmax(0,1fr);max-width:68ch}
.chosen--text h2{font-size:var(--step-2)}
.chosen-more{margin:0 0 1em}
.chosen-more summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:700;list-style:none}
.chosen-more summary::-webkit-details-marker{display:none}
.chosen-more summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
.chosen-more[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.chosen-more summary:hover{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
@media (max-width:960px){.mhm-hero-grid{grid-template-columns:minmax(0,1fr)}.mhm-visual{max-width:520px}}
@media (max-width:640px){
  .mhm-hero .mark{width:32px;height:32px;margin-bottom:16px}
  .mhm-visual .round-card dl{grid-template-columns:minmax(0,1fr)}
  .mhm-visual .round-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:baseline;gap:12px;padding:10px 14px;border-right:0;border-bottom:1px solid var(--line)}
  .mhm-visual .round-row dd{grid-column:auto;margin:0;text-align:right;font-size:15px}
}
.chosen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:start}
.chosen img{border-radius:var(--radius)}
.chosen-meta{font-size:var(--step--1);color:var(--muted);margin-bottom:14px}
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.rules div{border-top:1.5px solid var(--ink);padding-top:16px}
.rules strong{display:block;font:700 var(--step-1)/1.2 var(--font-display);margin-bottom:8px}
.rules p{color:var(--muted);margin:0}
.examples{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.examples li{border-top:1.5px solid var(--ink);padding-top:16px}
.examples h3{margin-bottom:8px}
.examples .eg{color:var(--muted);font-size:var(--step--1);margin:0}

.form-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.form-intro ul{padding-left:1.1em}
.form-intro li{margin-bottom:6px}
.form{border:1.5px solid var(--ink);border-radius:10px;padding:clamp(20px,3vw,36px);background:#fff}
.form fieldset{border:0;margin:0 0 28px;padding:0;min-width:0}
.form legend{font:700 var(--step-1)/1.2 var(--font-display);margin-bottom:16px;padding:0}
.form legend .n{color:var(--coral-ink);margin-right:8px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.f{margin-bottom:18px}
.f label{display:block;font-weight:700;font-size:var(--step--1);margin-bottom:6px}
.f .opt,.f .hint{font-weight:400;color:var(--muted)}
.f .hint{display:block;font-size:13px;margin-top:4px}
.f input,.f select,.f textarea{width:100%;min-height:48px;padding:11px 12px;border:1.5px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:400 16px/1.4 var(--font-body)}
.f textarea{resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:3px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.f input:user-invalid,.f select:user-invalid,.f textarea:user-invalid{border-color:var(--coral-ink)}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice label{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:start;padding:14px;border:1.5px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;background:var(--paper)}
.choice label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.choice input{grid-row:span 2;width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.choice strong{font-size:var(--step--1)}
.choice span{font-size:13px;color:var(--muted)}
.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:var(--step--1)}
.consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin:14px 0 0;font-size:13px;color:var(--muted)}
.field-error{display:block;margin-top:6px;font-size:13px;font-weight:700;color:var(--coral-ink)}
.form-errors{margin:0 0 24px;padding:14px 16px;border:1.5px solid var(--coral-ink);border-radius:var(--radius);background:#fff5f3}
.form-errors ul{margin:8px 0 0}
.form--closed h3{font-size:var(--step-2);margin-bottom:12px}
.f [aria-invalid=true]{border-color:var(--coral-ink)}
.form-message{margin-top:14px;padding:12px 14px;border-radius:var(--radius);background:var(--paper-2);font-size:var(--step--1)}
.form-message[hidden]{display:none}

.section--flush-top{padding-top:0}
.form-title{font-size:var(--step-2);margin-bottom:20px}
.form-wrap--contact{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.choice--pills{display:flex;flex-wrap:wrap;gap:8px}
.choice--pills label{display:inline-flex;grid-template-columns:none;align-items:center;gap:8px;padding:10px 14px}
.choice--pills input{grid-row:auto;margin:0}
.form-extra{margin:4px 0 24px;border-top:1px solid var(--line);padding-top:12px}
.form-extra summary{cursor:pointer;font-weight:700;font-size:var(--step--1);padding:8px 0}
.form-extra[open] summary{margin-bottom:12px}
.contact-aside h2{font-size:var(--step-2);margin-bottom:12px}
.contact-dl{margin:24px 0 12px}
.contact-dl div{padding:12px 0;border-top:1px solid var(--line)}
.contact-dl dt{font-size:var(--step--1);color:var(--muted)}
.contact-dl dd{margin:2px 0 0;font-weight:700}
.contact-next{margin-top:40px}
@media (min-width:961px){.steps:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
.share{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- modusbalk (preview, staging) ---------- */
.mode-bar{max-width:none;margin:0;padding:8px var(--gutter);background:var(--ink);color:var(--paper);font-size:13px;text-align:center}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--paper);padding-block:72px 32px;font-size:var(--step--1)}
.site-footer a{text-decoration:none;color:inherit}
.site-footer a:hover{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.footer-top{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:32px}
.footer-top img{width:150px;margin-bottom:18px}
.footer-top p{color:#B9BCC2;max-width:34ch}
.footer-business{font-size:13px}
.footer-kvwb{margin-top:18px}
.footer-kvwb img{width:180px;margin:0}
.footer-top h2{font:700 var(--step--1)/1.3 var(--font-body);color:#B9BCC2;margin:0 0 12px}
.footer-top ul{list-style:none;margin:0;padding:0}
.footer-top li{padding:5px 0}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:56px;padding-top:20px;border-top:1px solid #2F343B;color:#B9BCC2}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:18px;list-style:none;margin:0;padding:0}
.kvwb{display:inline-flex;align-items:center;gap:10px}

/* ---------- meldingen ---------- */
.message .wrap{max-width:860px}
.message .mark{width:44px;height:44px;margin-bottom:24px}
.reference{padding:12px 16px;border:1.5px solid var(--ink);border-radius:var(--radius);display:inline-block}

/* ---------- artikelen (kennis en nieuws) ---------- */
.article-hero{padding-bottom:clamp(32px,4vw,56px)}
.article-head{max-width:920px}
.article-head h1{font-size:var(--step-3);max-width:22ch}
.article-meta{font-size:var(--step--1);color:var(--muted);margin-bottom:18px}
.article-meta a{color:var(--ink);font-weight:700}
.byline{font-size:var(--step--1);color:var(--muted)}
.article-figure{margin:0 auto clamp(32px,4vw,56px)}
.article-figure img{width:100%;border-radius:8px;border:1.5px solid var(--ink)}
.article-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:start;padding-bottom:var(--space-section)}
.toc,.article-aside{position:sticky;top:calc(var(--header-h) + 24px);font-size:var(--step--1)}
.toc h2,.article-aside h2{font:700 var(--step--1)/1.3 var(--font-body);color:var(--muted);margin:0 0 10px}
.article-aside h2+ul,.article-aside h2+p{margin-top:0}
.article-aside h2:not(:first-child){margin-top:28px}
.toc ol,.article-aside ul{list-style:none;margin:0;padding:0}
.toc li,.article-aside li{border-top:1px solid var(--line)}
.toc a,.article-aside li a{display:block;padding:8px 0;text-decoration:none}
.toc a:hover,.article-aside li a:hover{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.toc a[aria-current=true]{font-weight:700}
.toc[hidden]{display:none}
.article-layout:has(.toc[hidden]){grid-template-columns:minmax(0,1fr)}
.article-layout:has(.toc[hidden]) .prose{margin-inline:auto}

.prose{max-width:70ch;font-size:clamp(1.03rem,1rem + .2vw,1.125rem);line-height:1.7}
.prose>*+*{margin-top:1em}
.prose p{margin:0;max-width:none}
.prose h2{font-size:var(--step-2);margin-top:2.2em;scroll-margin-top:calc(var(--header-h) + 24px)}
.prose h3{font-size:var(--step-1);margin-top:1.8em}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose a{text-decoration-color:var(--coral);text-decoration-thickness:2px}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--coral);font-family:var(--font-display);font-size:var(--step-1);line-height:1.35}
.prose img{border-radius:8px;margin:1.6em 0}
.prose table{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.prose .wervora-platform-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(to right,var(--paper) 40%,rgba(246,245,239,0)) left/28px 100% no-repeat local,linear-gradient(to left,var(--paper) 40%,rgba(246,245,239,0)) right/28px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(17,20,24,.16),transparent) left/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(17,20,24,.16),transparent) right/12px 100% no-repeat scroll}
.prose .wervora-platform-table:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.prose .wervora-platform-table table{min-width:520px}
.prose th,.prose td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{border-bottom:1.5px solid var(--ink)}
.prose strong{font-weight:700}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose code{font-size:.9em;background:var(--paper-2);padding:.1em .35em;border-radius:4px}

/* ---------- overzichten ---------- */
.filters ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 28px;padding:0}
.filters a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;text-decoration:none;font-size:var(--step--1);font-weight:700}
.filters a:hover{border-color:var(--ink)}
.filters a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.post-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.post-list a{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:8px clamp(24px,4vw,48px);align-items:start;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none}
.post-thumb{display:block;overflow:hidden;border-radius:var(--radius);background:var(--paper-2);box-shadow:inset 0 0 0 1px rgba(17,20,24,.06)}
.post-thumb img{width:100%;height:auto;transition:transform .4s var(--ease)}
.post-list a:hover .post-thumb img{transform:scale(1.03)}
.post-body{display:grid;gap:10px;align-content:start;max-width:72ch}
.post-list .topic{font-size:var(--step--1);color:var(--muted)}
.post-list h2{font-size:var(--step-1)}
.post-list p{margin:0;color:var(--muted)}
.post-list a:hover h2{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
/* projecten: compacte kop en logowand */
.work-hero{padding-block:clamp(32px,4vw,56px) clamp(32px,4vw,56px)}
.work-hero-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px clamp(32px,5vw,72px);align-items:end;margin-bottom:clamp(28px,3.4vw,44px)}
.work-hero-head h1{font-size:clamp(2.3rem,1.5rem + 2.8vw,4rem)}
.work-hero-head .lead{margin:0;font-size:var(--step-0);color:var(--ink-2)}
.logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr));gap:20px 16px;margin:0;padding:0;list-style:none}
.logo-wall a{display:grid;gap:8px;text-decoration:none}
.logo-wall .brand-tile{aspect-ratio:3/2;padding:14%;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.logo-wall a:hover .brand-tile{transform:translateY(-3px);box-shadow:0 10px 24px -16px rgba(17,20,24,.5)}
.logo-wall .wordmark{font-size:clamp(.9rem,.8rem + .3vw,1.1rem)}
.logo-wall-name{font-weight:700;font-size:14px;line-height:1.25}
.logo-wall-kind{margin-top:-6px;font-size:12px;color:var(--muted)}
.logo-wall-kind--own{color:var(--coral-ink)}
.logo-wall a:hover .logo-wall-name{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.logo-wall-note{margin:clamp(20px,2.4vw,28px) 0 0}
.section-head--compact{margin-bottom:clamp(24px,3vw,36px)}
.section-head--compact h2{font-size:var(--step-2)}
.section-head--compact p{font-size:var(--step--1)}
@media (min-width:1100px){.logo-wall{grid-template-columns:repeat(7,minmax(0,1fr));gap:20px 14px}}
@media (max-width:960px){.work-hero-head{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.logo-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}}

/* actueel bovenaan Kennis & nieuws */
.news-top{padding-block:clamp(32px,4vw,56px) clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.news-top-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(20px,2.4vw,32px)}
.news-top-head h1{font-size:var(--step-3)}
.news-top-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start}
.news-lead{display:grid;gap:12px;text-decoration:none}
.news-lead-img,.news-side-img{display:block;overflow:hidden;border-radius:var(--radius);background:var(--paper-2)}
.news-lead-img img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s var(--ease)}
.news-lead .topic,.news-side .topic{font-size:var(--step--1);color:var(--muted)}
.news-lead h2{font-size:var(--step-2);line-height:1.1}
.news-lead p{margin:0;color:var(--muted)}
.news-lead:hover h2,.news-side a:hover h3{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.news-lead:hover img,.news-side a:hover img{transform:scale(1.02)}
.news-side{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1.5px solid var(--ink)}
.news-side a{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:start}
.news-side-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s var(--ease)}
.news-side-text{display:grid;gap:6px}
.news-side h3{font-size:var(--step-0);line-height:1.25;font-family:var(--font-display);letter-spacing:-.01em}
.knowledge-intro{padding-bottom:clamp(24px,3vw,40px)}
.knowledge-intro h2{font-size:var(--step-3);max-width:20ch}
@media (max-width:960px){.news-top-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.news-side a{grid-template-columns:112px minmax(0,1fr)}}
.news-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.news-list a{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:20px 40px;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:start}
.news-list img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius)}
.news-list .topic{display:block;font-size:var(--step--1);color:var(--muted);margin-bottom:8px}
.news-list h2{font-size:var(--step-2);margin-bottom:10px}
.news-list p{color:var(--muted);margin:0}
.news-list a:hover h2{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px}
.pager{display:flex;align-items:center;gap:16px;margin-top:28px;font-size:var(--step--1)}
.note-band{margin-top:48px;padding:clamp(24px,3vw,40px);border:1.5px solid var(--ink);border-radius:10px}
.note-band h2{font-size:var(--step-2);margin-bottom:10px}

@media (max-width:960px){
  .article-layout{grid-template-columns:minmax(0,1fr)}
  .toc,.article-aside{position:static}
  .article-aside{order:2}
  .news-list a{grid-template-columns:minmax(0,1fr)}
}

/* ---------- tarieven ---------- */
.route-list h2{font:700 var(--step--1)/1.3 var(--font-body);color:var(--muted);margin:0 0 10px}
.route-list ul{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.route-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.route-choice{font-weight:700}
.route-price{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.route-copy{grid-column:1/-1;color:var(--muted);font-size:var(--step--1)}
.route-note{grid-column:1/-1;color:var(--muted);font-size:12px}
.route-list a:hover .route-choice{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 20px;padding:0}
.facts li{padding:8px 12px;border:1px solid var(--line-strong);border-radius:999px;font-size:var(--step--1)}
.group-title{font-size:var(--step-2);margin:40px 0 8px}
.pkg-list--plain{border-top:1.5px solid var(--ink);margin-top:20px}
.choose--single>div+div{background:var(--paper);color:var(--ink)}
.cost-tool{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border:1.5px solid var(--ink);border-radius:10px;overflow:hidden}
.cost-controls{padding:clamp(20px,3vw,36px)}
.cost-controls fieldset{border:0;padding:0;margin:0 0 18px}
.cost-controls legend{font-weight:700;font-size:var(--step--1);margin-bottom:8px}
.cost-result{padding:clamp(20px,3vw,36px);background:var(--ink);color:var(--paper)}
.cost-result div{padding:14px 0;border-bottom:1px solid #2F343B}
.cost-result span{display:block;font-size:var(--step--1);color:#B9BCC2}
.cost-result strong{font:700 var(--step-2)/1.15 var(--font-display);letter-spacing:-.02em}
.cost-result .small{color:#B9BCC2;margin:16px 0}
.cost-result .btn--primary:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
@media (max-width:960px){.cost-tool{grid-template-columns:minmax(0,1fr)}}

/* ---------- projecten: merktegels in de huisstijl van het project ---------- */
.work-item--project{grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr)}
.brand-tile{display:grid;place-items:center;aspect-ratio:4/3;padding:12%;border-radius:var(--radius);background:#fff;border:1px solid var(--line);overflow:hidden}
.brand-tile img{max-height:100%;width:auto;object-fit:contain}
.brand-tile--jack{background:#23221d}.brand-tile--hair{background:#f3eee6}.brand-tile--wishstone{background:#ede9df}
.brand-tile--boeklio{background:#fbfaf6}.brand-tile--factuur{background:#e9efeb}.brand-tile--bespaar{background:#faf9f6}
.brand-tile--nail{background:#f69ec4}.brand-tile--doe{background:#faf7ef;color:#242320}.brand-tile--wat{background:#f7f4eb}
.wordmark{font-weight:700;text-align:center;font-size:clamp(20px,2vw,28px);letter-spacing:-.04em}
.wordmark--bespaar{display:flex;gap:12px;align-items:center;color:#073c48}
.bespaar-mark{display:inline-grid;place-items:center;width:36px;height:39px;border-radius:8px;background:#ffaa2d;color:#143d45;font-size:24px;font-family:Georgia,serif}
.wordmark--wishstone{font-family:Georgia,serif;font-size:36px;font-weight:400;color:#26433e;letter-spacing:-.045em}
.wordmark--wishstone small{display:block;margin-top:10px;font:400 9px Arial,sans-serif;letter-spacing:.42em;text-transform:uppercase;color:#8a6a43}
.work-links{list-style:none;margin:0;padding:0;font-size:var(--step--1)}
.work-links li{padding:8px 0;border-top:1px solid var(--line)}
.work-links a{font-weight:700;position:relative;z-index:1}
.work-item--project h3 a::after{content:none}
.game-band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:center}
.game-band h2{font-size:var(--step-3);margin:4px 0 16px}
.game-art{display:block;border-radius:10px;overflow:hidden;border:1.5px solid var(--ink);line-height:0}
.game-art svg{width:100%;height:auto}
@media (max-width:960px){.work-item--project{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}.work-links{grid-column:2}.game-band{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.work-item--project{grid-template-columns:minmax(0,1fr)}.work-links{grid-column:1}}

/* ---------- case-pagina ---------- */
.brand-tile--hero{aspect-ratio:16/10;padding:10%}
.facts--case{margin-top:32px}
.story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px clamp(28px,4vw,64px)}
.story-part h2{font-size:var(--step-2);margin-bottom:14px}
.photo-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.photo-row figure{margin:0}
.photo-row img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius)}
.photo-row figcaption{margin-top:8px;font-size:var(--step--1);color:var(--muted)}
.lab-switch{display:flex}
.lab{border:1.5px solid var(--ink);border-radius:10px;padding:clamp(16px,2.5vw,28px);background:#fff}
.lab-panel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,48px);align-items:start;margin-top:8px}
.lab-panel[hidden]{display:none}
.no-js .lab-panel+.lab-panel{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.lab-screen{border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--paper)}
.lab-screen--visitor{padding:clamp(20px,3vw,40px);display:grid;gap:14px;justify-items:start}
.lab-screen--visitor img{width:160px}
.lab-screen--visitor h3{font-size:var(--step-2)}
.lab-explain h3{font-size:var(--step-1);margin-bottom:12px}
.lab-explain ol{padding-left:1.2em}
.lab-explain li{margin-bottom:6px}
.lab-status{margin:16px 0 0}
@media (max-width:960px){.story,.photo-row,.lab-panel{grid-template-columns:minmax(0,1fr)}}

/* ---------- algemene pagina's ---------- */
.page-body{padding-bottom:var(--space-section)}
.page-body .prose{margin-inline:auto}
.facts--stack{flex-direction:column;align-items:flex-start}
.over-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.over-hero h1{font-size:clamp(2.3rem,1.5rem + 2.6vw,4rem)}
.over-hero .lead{font-size:var(--step-0);line-height:1.6}
.facts--row{margin:24px 0 0}
.over-shot{margin:0}
.over-shot img{width:100%;border-radius:12px}
.over-shot figcaption{margin-top:10px;font-size:var(--step--1);color:var(--muted)}
@media (max-width:960px){.over-hero-grid{grid-template-columns:minmax(0,1fr);gap:24px}.over-shot{order:-1}}

/* ---------- Over: verhaalinhoud uit content/imported.json (wv-*) ---------- */
.about-page .wv-band{padding-block:calc(var(--space-section)*.7)}
.about-page .wv-band--soft{background:var(--paper-2)}
.about-page .wv-band--dark{background:var(--ink);color:var(--paper)}
.about-page .wv-shell{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.about-page .wv-kicker{font-size:var(--step--1);font-weight:700;color:var(--muted);margin:0 0 12px}
.about-page .wv-band--dark .wv-kicker{color:#B9BCC2}
.about-page h2{font-size:var(--step-3);max-width:24ch;margin-bottom:20px}
.about-page .wv-story-grid,.about-page .wv-cta-grid,.about-page .nail-about-grid,.about-page .wv-trust-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.about-page .wv-trust-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.about-page .wv-quote{padding:clamp(20px,3vw,36px);border-left:3px solid var(--coral);font:600 var(--step-1)/1.35 var(--font-display)}
.about-page .wv-quote p{max-width:none}
.about-page .wv-quote-mark{display:none}
.about-page .wv-quote-note{display:block;margin-top:12px;font:400 var(--step--1)/1.5 var(--font-body);color:var(--muted)}
.about-page .wv-timeline,.about-page .wv-value-grid,.about-page .wv-project-grid{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.about-page .wv-timeline-card,.about-page .wv-value-card{border-top:1.5px solid var(--ink);padding-top:16px}
.about-page .wv-step{display:block;font-size:var(--step--1);color:var(--coral-ink);font-weight:700;margin-bottom:10px}
.about-page .wv-timeline-card h3,.about-page .wv-value-card h3,.about-page .wv-project-card h3{margin-bottom:8px}
.about-page .wv-timeline-card p,.about-page .wv-value-card p{color:var(--muted)}
.about-page .wv-project-heading{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:end}
.about-page .wv-project-heading p{color:var(--muted)}
.about-page .wv-project-image{display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);background:#e9efeb;text-decoration:none}
.about-page .wv-project-image img{width:100%;height:100%;object-fit:cover}
.about-page .wv-fzg-mark{font:700 var(--step-3)/1 var(--font-display);color:#123f3a}
.about-page .wv-fzg-caption{font-size:var(--step--1);color:#123f3a}
.about-page .wv-project-type{font-size:var(--step--1);font-weight:700;color:var(--coral-ink);margin:14px 0 6px}
.about-page .wv-text-link{font-weight:700;text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.about-page .wv-text-link span,.about-page .wv-button span{display:none}
.about-page .wv-all-projects{margin-top:28px}
.about-page .nail-about-image img{border-radius:var(--radius)}
.about-page .wv-trust-mark{display:grid;gap:6px;justify-items:start;padding:24px;border:1.5px solid var(--ink);border-radius:10px}
.about-page .wv-trust-mark strong{font:700 var(--step-3)/1 var(--font-display)}
.about-page .wv-trust-mark-small,.about-page .wv-trust-mark-line{font-size:var(--step--1);color:var(--muted)}
.about-page .wv-location{font-size:var(--step--1);color:var(--muted);margin-top:14px}
.about-page .wv-button{display:inline-flex;align-items:center;min-height:48px;padding:.75em 1.25em;border-radius:var(--radius);background:var(--coral);color:var(--ink);font-weight:700;text-decoration:none;justify-self:start}
.about-page .wv-button:hover{background:var(--paper)}
@media (max-width:960px){
  .about-page .wv-story-grid,.about-page .wv-cta-grid,.about-page .nail-about-grid,.about-page .wv-trust-grid,.about-page .wv-project-heading{grid-template-columns:minmax(0,1fr)}
  .about-page .wv-timeline,.about-page .wv-value-grid,.about-page .wv-project-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- hosting, zoeken, overige ---------- */
.summary-title{font-size:var(--step-1);margin-bottom:12px}
.summary .btn{margin:6px 0 12px}
.demo-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,5vw,72px)}
.demo-steps li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,48px);align-items:start}
.demo-steps h3,.two-col--media h3,.note-band h3{font-size:var(--step-1);margin-bottom:10px}
.shot{margin:0}
.shot img{width:100%;border:1.5px solid var(--ink);border-radius:8px}
.shot--mobile img{max-width:340px}
.shot figcaption{margin-top:8px;font-size:var(--step--1);color:var(--muted)}
.two-col--media{margin-bottom:40px}
.note-band.two-col{display:grid}
.band-dark{background:var(--ink);color:var(--paper)}
.band-dark a{color:inherit;text-decoration-color:var(--coral)}
.search-page{max-width:860px}
.search-form{margin-top:28px}
.search-form label{display:block;font-weight:700;font-size:var(--step--1);margin-bottom:8px}
.search-row{display:flex;gap:10px}
.search-row input{flex:1;min-height:52px;padding:12px 14px;border:1.5px solid var(--ink);border-radius:var(--radius);background:#fff;font:400 17px/1.4 var(--font-body)}
.link-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.link-list a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-weight:700;text-decoration:none}
.link-list a:hover{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
@media (max-width:960px){.demo-steps li{grid-template-columns:minmax(0,1fr)}.search-row{flex-direction:column}}

/* ---------- spellen: eigen opmaak, alleen begrenzen ---------- */
.about-page .ps-section{overflow-x:clip}

/* ---------- responsief ---------- */
@media (max-width:960px){
  .svc-index .price{white-space:normal;text-align:left;grid-column:1/-1}
  .hero-grid,.page-hero-grid,.about,.initiative-band,.chosen,.form-wrap,.case,.two-col,.contact-band .wrap,.section-head{grid-template-columns:minmax(0,1fr)}
  .hero h1{max-width:none}
  .work-item{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .work-built{grid-column:2}
  .svc-index a{grid-template-columns:1fr auto}
  .svc-index p{grid-column:1/-1;grid-row:2}
  .choose{grid-template-columns:1fr}
  .choose>div+div{border-left:0;border-top:1.5px solid var(--ink)}
  .steps{grid-template-columns:1fr 1fr;gap:28px}
  .rules,.examples,.related{grid-template-columns:1fr;gap:20px}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-top>div:first-child{grid-column:1/-1}
  .pkg-body{grid-template-columns:1fr}
  .pkg-head{display:none}
  .pkg summary{grid-template-columns:minmax(0,1fr) 24px;gap:4px 14px}
  .pkg-name{grid-column:1}
  .pkg summary .p{grid-column:1;text-align:left}
  .pkg summary .plus{grid-column:2;grid-row:1}
  .pkg-fact{grid-column:1/-1}
  .pkg-fact .visually-hidden{position:static!important;width:auto;height:auto;margin:0;clip:auto;overflow:visible;color:var(--muted)}
  .pkg-list{border-top:1.5px solid var(--ink)}
  .pkg-note{grid-column:1}
}
@media (max-width:640px){
  .post-list a{grid-template-columns:112px minmax(0,1fr);gap:6px 16px;padding:20px 0}
  .post-list h2{font-size:1.08rem;line-height:1.2}
  .post-list p{font-size:var(--step--1);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .work-item{grid-template-columns:1fr;gap:16px}
  .work-built{grid-column:1}
  .posts{grid-template-columns:1fr;gap:24px}
  .steps{grid-template-columns:1fr}
  .field-row,.choice{grid-template-columns:1fr}
  .js .bench-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  .bench-stages button{padding:0 4px;font-size:13px}
  .footer-top{grid-template-columns:1fr}
}

/* ==========================================================================
   Probeer het zelf: schets van een website die in de browser ontstaat
   ========================================================================== */
.play{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,56px);align-items:start}
.play-controls{display:grid;gap:26px;margin:0}
.play-field{margin:0;padding:0;border:0;min-width:0}
.play-field>label,.play-field>legend{display:block;margin:0 0 10px;padding:0;font-weight:700;font-size:var(--step--1)}
.play-field input[type=text]{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--ink);border-radius:var(--radius);background:#fff;color:var(--ink);font:400 var(--step-0)/1.3 var(--font-body)}
.play-field input[type=text]::placeholder{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input,.swatch input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:999px;font-weight:700;font-size:14px;color:var(--ink-2);transition:background-color .15s,color .15s,border-color .15s}
.chip:hover span{border-color:var(--ink)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip input:focus-visible+span,.swatch:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{position:relative;width:44px;height:44px;border-radius:50%;border:2px solid transparent;display:grid;place-items:center;cursor:pointer}
.swatch::before{content:"";width:32px;height:32px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(17,20,24,.15)}
.swatch:has(input:checked){border-color:var(--ink)}
.swatch--koraal{--sw:#FF6B5B}.swatch--salie{--sw:#7E9A86}.swatch--oceaan{--sw:#2F5D7C}.swatch--pruim{--sw:#7A4E6D}.swatch--antraciet{--sw:#2A2E34}
.play-note{margin:0;color:var(--muted);font-size:var(--step--1)}
.play-stage{min-width:0}
.play-frame{position:relative;width:100%;border:1.5px solid var(--ink);border-radius:10px;background:#fff}
.js .play-frame{width:var(--frame-w,100%)}
.play-frame.is-easing{transition:width .45s var(--ease)}
.play-frame>.screen-bar{border-radius:9px 9px 0 0}
.play-viewport{position:relative;overflow:hidden;border-radius:0 0 9px 9px}
.js .play-viewport{max-height:clamp(400px,44vw,540px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.js .play-sizer{position:relative;height:var(--sizer-h,auto)}
.js .play-viewport .mini{position:absolute;left:0;top:0;width:var(--mini-w,1280px);transform:scale(var(--mini-s,1));transform-origin:0 0}
.play-handle{position:absolute;top:50%;right:-13px;width:26px;height:72px;margin-top:-36px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);cursor:ew-resize;touch-action:none;z-index:2}
.play-handle span{width:6px;height:28px;border-left:1.5px solid var(--ink);border-right:1.5px solid var(--ink)}
.play-handle:hover,.play-handle.is-dragging{background:var(--coral)}
.play-handle[hidden]{display:none}
.play-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.play-width{margin:0;font-variant-numeric:tabular-nums;font-size:var(--step--1);color:var(--muted)}
.play-presets{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px}
.play-presets[hidden]{display:none}
.play-presets button{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:700 13px/1 var(--font-body);cursor:pointer}
.play-presets button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.play-after{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(28px,4vw,48px);padding-top:24px;border-top:1px solid var(--line)}
.play-after p{margin:0;color:var(--ink-2)}
@media (max-width:960px){.play{grid-template-columns:minmax(0,1fr)}.js .play-viewport{max-height:min(560px,130vw)}}

/* de schets zelf: werkt met container queries op de eigen breedte */
.mini{--m-bg:#FBFAF6;--m-ink:#1D2024;--m-soft:#EEEBE3;--m-muted:#5A5E64;--m-accent:#FF6B5B;--m-on-accent:#111418;--m-accent-text:#B23A2E;--m-head:var(--font-display);--m-weight:650;--m-radius:10px;--m-track:-.03em;
  container-type:inline-size;background:var(--m-bg);color:var(--m-ink);font:400 16px/1.55 var(--font-body);transition:background-color .3s,color .3s}
.mini[data-kleur=salie]{--m-accent:#7E9A86;--m-on-accent:#111418;--m-accent-text:#4A6553}
.mini[data-kleur=oceaan]{--m-accent:#2F5D7C;--m-on-accent:#FFFFFF;--m-accent-text:#2F5D7C}
.mini[data-kleur=pruim]{--m-accent:#7A4E6D;--m-on-accent:#FFFFFF;--m-accent-text:#7A4E6D}
.mini[data-kleur=antraciet]{--m-accent:#2A2E34;--m-on-accent:#FFFFFF;--m-accent-text:#2A2E34}
.mini[data-sfeer=uitgesproken]{--m-bg:#15181C;--m-ink:#F6F5EF;--m-soft:#24282E;--m-muted:#B4B6B9;--m-weight:800;--m-radius:4px;--m-track:-.045em;--m-accent-text:#FF8A7D}
.mini[data-sfeer=uitgesproken][data-kleur=salie]{--m-accent-text:#A9C2B0}
.mini[data-sfeer=uitgesproken][data-kleur=oceaan]{--m-accent:#5B8DB0;--m-on-accent:#111418;--m-accent-text:#9DC0DA}
.mini[data-sfeer=uitgesproken][data-kleur=pruim]{--m-accent:#B07EA2;--m-on-accent:#111418;--m-accent-text:#DDB3D1}
.mini[data-sfeer=uitgesproken][data-kleur=antraciet]{--m-accent:#F6F5EF;--m-on-accent:#111418;--m-accent-text:#F6F5EF}
.mini[data-sfeer=klassiek]{--m-bg:#F7F3EC;--m-ink:#2A2522;--m-soft:#ECE5D8;--m-muted:#625A53;--m-head:Georgia,"Times New Roman",serif;--m-weight:400;--m-radius:0;--m-track:-.01em}
.mini p{margin:0;max-width:none}
.mini-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--m-soft)}
.mini-logo{display:flex;align-items:center;gap:10px;font:var(--m-weight) 18px/1.1 var(--m-head);letter-spacing:var(--m-track);min-width:0}
.mini-logo span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-mark{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--m-radius);background:var(--m-accent);color:var(--m-on-accent);font:700 15px/1 var(--font-body);letter-spacing:0}
.mini[data-sfeer=klassiek] .mini-mark{border-radius:50%;background:transparent;border:1.5px solid var(--m-ink);color:var(--m-ink);font-family:var(--m-head)}
.mini-nav{display:none;gap:22px;font-size:14px;font-weight:700}
.mini-menu{padding:7px 12px;border:1.5px solid currentColor;border-radius:var(--m-radius);font-size:13px;font-weight:700}
.mini-hero{display:grid;gap:22px;padding:30px 22px}
.mini-kicker{color:var(--m-accent-text);font-weight:700;font-size:14px}
.mini-title{margin-top:10px!important;font:var(--m-weight) 34px/1.04 var(--m-head);letter-spacing:var(--m-track);text-wrap:balance}
.mini-intro{margin-top:14px!important;color:var(--m-muted);font-size:16px;max-width:42ch!important}
.mini-btn{display:inline-block;margin-top:20px;padding:12px 18px;border-radius:var(--m-radius);background:var(--m-accent);color:var(--m-on-accent);font-weight:700;font-size:15px}
.mini[data-sfeer=klassiek] .mini-btn{background:transparent;color:var(--m-ink);border:1.5px solid var(--m-ink)}
.mini-art{position:relative;min-height:170px;border-radius:var(--m-radius);background:var(--m-soft);overflow:hidden}
.mini-art span{position:absolute;transition:all .45s var(--ease)}
.mini-cards{display:grid;gap:14px;margin:0;padding:0 22px 30px;list-style:none}
.mini-cards li{display:grid;gap:4px;padding:16px;border-radius:var(--m-radius);background:var(--m-soft)}
.mini[data-sfeer=klassiek] .mini-cards li{background:transparent;border-top:1px solid var(--m-ink);border-radius:0;padding:14px 0 0}
.mini-cards strong{font:var(--m-weight) 18px/1.2 var(--m-head);letter-spacing:var(--m-track)}
.mini-cards span{color:var(--m-muted);font-size:14px}
.mini-foot{display:flex;justify-content:space-between;gap:12px;padding:16px 22px;border-top:1px solid var(--m-soft);font-size:13px;color:var(--m-muted)}
@container (min-width:600px){
  .mini-nav{display:flex}.mini-menu{display:none}
  .mini-head{padding:20px 36px}.mini-hero{padding:44px 36px}.mini-cards{padding:0 36px 44px}.mini-foot{padding:18px 36px}
  .mini-title{font-size:46px}
  .mini-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container (min-width:900px){
  .mini-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:48px;padding:64px 48px}
  .mini-head{padding:22px 48px}.mini-cards{padding:0 48px 56px;gap:20px}.mini-foot{padding:20px 48px}
  .mini-title{font-size:60px}
  .mini-art{min-height:300px}
  .mini[data-sfeer=uitgesproken] .mini-title{font-size:72px}
  .mini[data-sfeer=klassiek] .mini-hero{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
  .mini[data-sfeer=klassiek] .mini-intro{margin-inline:auto}
  .mini[data-sfeer=klassiek] .mini-art{width:100%;min-height:220px}
}
/* abstracte beelden per branche: vormen, geen foto's */
.mini-art .a1{left:12%;top:14%;width:40%;aspect-ratio:1;border-radius:50%;background:var(--m-accent)}
.mini-art .a2{right:10%;bottom:12%;width:42%;height:48%;border-radius:var(--m-radius);background:var(--m-ink)}
.mini-art .a3{left:8%;bottom:12%;width:30%;height:5%;border-radius:4px;background:var(--m-muted);opacity:.5}
.mini[data-branche=kapsalon] .mini-art .a1{left:16%;top:10%;width:46%;border-radius:50% 50% 0 50%}
.mini[data-branche=kapsalon] .mini-art .a2{right:12%;bottom:-20%;width:34%;height:80%;border-radius:999px 999px 0 0}
.mini[data-branche=hondentraining] .mini-art .a1{left:auto;right:14%;top:12%;width:22%}
.mini[data-branche=hondentraining] .mini-art .a2{left:8%;right:auto;bottom:16%;width:64%;height:12%;border-radius:999px}
.mini[data-branche=hondentraining] .mini-art .a3{left:8%;bottom:auto;top:30%;width:44%;height:4%}
.mini[data-branche=yoga] .mini-art .a1{left:34%;top:8%;width:32%}
.mini[data-branche=yoga] .mini-art .a2{left:18%;right:18%;bottom:10%;width:auto;height:14%;border-radius:999px}
.mini[data-branche=yoga] .mini-art .a3{left:40%;bottom:30%;width:20%;height:24%;border-radius:999px 999px 0 0;opacity:.35}
.mini[data-branche=bakkerij] .mini-art .a1{left:10%;top:auto;bottom:14%;width:50%;border-radius:999px 999px 0 0;aspect-ratio:2/1}
.mini[data-branche=bakkerij] .mini-art .a2{right:12%;top:16%;bottom:auto;width:26%;height:auto;aspect-ratio:1;border-radius:50%}
.mini[data-branche=klusbedrijf] .mini-art .a1{left:10%;top:16%;width:34%;border-radius:var(--m-radius)}
.mini[data-branche=klusbedrijf] .mini-art .a2{right:12%;bottom:12%;width:40%;height:58%;border-radius:0;clip-path:polygon(0 30%,50% 0,100% 30%,100% 100%,0 100%)}
.mini[data-branche=fotograaf] .mini-art .a1{left:36%;top:28%;width:28%;z-index:1}
.mini[data-branche=fotograaf] .mini-art .a2{left:22%;right:22%;top:18%;bottom:18%;width:auto;height:auto;border-radius:var(--m-radius)}
.mini[data-branche=fotograaf] .mini-art .a3{left:auto;right:30%;top:22%;bottom:auto;width:8%;height:6%;opacity:.8}

/* ==========================================================================
   Bouwtekening: raster, maten en opmaak van elk onderdeel zichtbaar maken
   ========================================================================== */
.bp-toggle{position:fixed;right:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:700 14px/1 var(--font-body);cursor:pointer;box-shadow:0 6px 18px -10px rgba(17,20,24,.5)}
.bp-toggle::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--ruler) center/contain no-repeat;mask:var(--ruler) center/contain no-repeat}
.bp-toggle{--ruler:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 14 14 2l4 4L6 18z' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='m6 10 2 2m1-5 1.5 1.5M12 4l2 2' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E")}
.bp-toggle:hover{background:var(--ink);color:var(--paper)}
.bp-toggle[aria-pressed=true]{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.menu-open .bp-toggle,.menu-open .bp-layer,.menu-open .bp-bar,.menu-open .bp-card,.menu-open .bp-box,.menu-open .bp-margin,.menu-open .bp-content{display:none}
.bp-layer{position:fixed;inset:0;z-index:55;pointer-events:none}
.bp-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;width:min(var(--wrap),100% - 2*var(--gutter));height:100%;margin-inline:auto}
.bp-cols span{background:rgba(255,107,91,.07);border-inline:1px solid rgba(255,107,91,.32)}
.bp-layer::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(17,20,24,.045) 0 1px,transparent 1px 8px)}
.bp-on:not(.menu-open) .site-header,.bp-on:not(.menu-open) section,.bp-on:not(.menu-open) .site-footer,.bp-on:not(.menu-open) .wrap{outline:1px dashed rgba(17,20,24,.25);outline-offset:-1px}
.bp-on:not(.menu-open) .site-footer .wrap{outline-color:rgba(246,245,239,.3)}
.bp-margin,.bp-box,.bp-content{position:fixed;left:0;top:0;pointer-events:none;z-index:56;transition:transform .12s var(--ease),width .12s var(--ease),height .12s var(--ease)}
.bp-margin{background:repeating-linear-gradient(135deg,rgba(17,20,24,.12) 0 1px,transparent 1px 6px)}
.bp-box{background:rgba(255,107,91,.12);box-shadow:inset 0 0 0 1.5px var(--coral)}
.bp-content{box-shadow:inset 0 0 0 1px rgba(17,20,24,.55)}
.bp-margin[hidden],.bp-box[hidden],.bp-content[hidden],.bp-card[hidden]{display:none}
.bp-size{position:absolute;left:-1.5px;bottom:100%;margin-bottom:4px;padding:3px 7px;border-radius:3px;background:var(--coral);color:var(--ink);font:700 11px/1.2 var(--font-body);font-variant-numeric:tabular-nums;white-space:nowrap}
.bp-card{position:fixed;left:0;top:0;z-index:57;width:min(300px,calc(100vw - 24px));margin:0;padding:14px 16px;border-radius:8px;background:var(--ink);color:var(--paper);font:400 13px/1.45 var(--font-body);pointer-events:none;box-shadow:0 14px 34px -16px rgba(0,0,0,.6)}
.bp-card h2{margin:0 0 8px;font:700 15px/1.2 var(--font-body);letter-spacing:0}
.bp-card dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:0}
.bp-card dt{color:#A9ACB1}
.bp-card dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bp-chip{display:inline-block;width:.9em;height:.9em;margin-right:.4em;vertical-align:-.1em;border-radius:2px;background:var(--chip,#000);box-shadow:0 0 0 1px rgba(246,245,239,.5)}
.bp-bar{position:fixed;left:50%;bottom:clamp(12px,2vw,24px);z-index:58;transform:translateX(-50%);display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 24px - 190px);margin:0;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font:400 13px/1.3 var(--font-body);font-variant-numeric:tabular-nums}
.bp-bar strong{color:var(--coral)}
.bp-bar[hidden],.bp-layer[hidden]{display:none}
@media (max-width:1240px){.bp-cols{grid-template-columns:repeat(8,minmax(0,1fr));gap:20px}.bp-cols span:nth-child(n+9){display:none}}
@media (max-width:640px){
  .bp-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.bp-cols span:nth-child(n+5){display:none}
  .bp-toggle{width:44px;padding:0;justify-content:center;bottom:12px;right:12px}
  .bp-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bp-bar{left:12px;right:auto;transform:none;max-width:calc(100% - 24px - 56px);border-radius:12px;justify-content:flex-start;bottom:12px}
  .bp-card{left:12px;top:auto;bottom:76px;width:calc(100vw - 24px);max-height:45vh;overflow:hidden}
  .bp-card--top{top:12px;bottom:auto}
  .bp-hint--done{display:none}
}
@media print{.bp-toggle,.bp-layer,.bp-bar,.bp-card,.bp-box,.bp-margin,.bp-content{display:none!important}}

/* ---------- onder de motorkap: pagina meet zichzelf ---------- */
.hosting-hero h1{font-size:clamp(2.4rem,1.5rem + 3vw,4.2rem)}
.hosting-hero .lead{font-size:var(--step-0);line-height:1.6;max-width:52ch}
.hosting-hero .summary{padding:22px 24px}
.hosting-hero .summary li{padding:7px 0 7px 24px;font-size:var(--step--1);line-height:1.45}
.hosting-hero .summary li::before{top:.85em}
.hosting-hero .summary .amount-note{margin-bottom:12px}
.xray-mini{display:grid;gap:12px;margin-top:clamp(28px,3.6vw,44px);padding:18px 20px;border-radius:10px;background:var(--ink);color:var(--paper);text-decoration:none;max-width:560px}
.xray-mini[hidden]{display:none}
.xray-mini-label{display:flex;align-items:center;gap:10px;font-size:13px;color:#B4B6B9}
.xray-mini-vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.xray-mini-vals span{font-size:12px;line-height:1.35;color:#B4B6B9}
.xray-mini-vals b{display:block;margin-bottom:2px;font:700 clamp(1.4rem,1.1rem + .9vw,1.9rem)/1.05 var(--font-display);letter-spacing:-.02em;color:var(--paper);font-variant-numeric:tabular-nums}
.xray-mini-link{font-weight:700;font-size:13px;text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:.25em}
.xray-mini:hover .xray-mini-link{text-decoration-color:var(--paper)}
.xray-mini:focus-visible{outline-color:var(--ink)}
.xray-fallback{color:var(--muted)}
.js .xray-fallback{display:none}
.xray-panel{padding:clamp(20px,3vw,40px);border-radius:12px;background:var(--ink);color:var(--paper)}
.xray-panel[hidden]{display:none}
.xray-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(20px,2.6vw,32px)}
.xray-live{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--step--1);color:#B4B6B9}
.xray-dot{width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,107,91,.22)}
.xray-replay{min-height:40px;padding:0 16px;border:1.5px solid #5E6269;border-radius:999px;background:transparent;color:var(--paper);font:700 13px/1 var(--font-body);cursor:pointer}
.xray-replay:hover{border-color:var(--paper)}
.xray-vitals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 clamp(24px,3vw,36px);border-top:1px solid #2A2E34}
.vital{padding:16px 18px 4px 0;border-right:1px solid #2A2E34;margin-right:18px}
.vital:last-child{border-right:0;margin-right:0}
.vital dt{font-size:13px;color:#B4B6B9}
.vital dd{margin:6px 0 0}
.vital-num{font:700 clamp(1.9rem,1.2rem + 2.2vw,3rem)/1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vital-unit{font-size:13px;color:#B4B6B9}
.vital-verdict{font-size:13px;font-weight:700;color:#B4B6B9}
.vital-verdict::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:currentColor}
.vital-verdict.is-good{color:#A9C2B0}.vital-verdict.is-ok{color:#DCDAD1}.vital-verdict.is-bad{color:#FF8A7D}
.xray-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,3.4vw,48px);align-items:start}
.xray-scroll{overflow-x:auto}
.xray-fall table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.xray-fall caption{text-align:left;padding-bottom:10px;font-weight:700;font-size:var(--step--1);color:var(--paper)}
.xray-fall th{padding:6px 10px 6px 0;text-align:left;font-weight:700;color:#8A8E94;border-bottom:1px solid #2A2E34;white-space:nowrap}
.xray-fall th:last-child{width:46%;text-align:right;padding-right:0}
.xray-fall td{padding:5px 10px 5px 0;border-bottom:1px solid #1F2328;white-space:nowrap}
.xray-fall td:first-child{max-width:190px;overflow:hidden;text-overflow:ellipsis;color:#E6E4DC}
.xray-fall td:nth-child(2),.xray-fall td:nth-child(3){color:#B4B6B9}
.xray-fall td.xray-ext{color:#FF8A7D}
.xray-track{position:relative;height:12px;border-radius:2px;background:#1A1D21}
.xray-bar{position:absolute;top:0;bottom:0;left:var(--l);width:max(2px,var(--w));border-radius:2px;background:var(--c,#B9B7AE);transform-origin:0 50%}
.xray-mark{position:absolute;top:-4px;bottom:-4px;left:var(--l);width:1px;background:var(--paper);opacity:.35}
.xray-clock{color:var(--paper)}
.xray.is-playing .xray-bar{transform:scaleX(0)}
.xray.is-played .xray-bar{transform:scaleX(1);transition:transform var(--d,.3s) linear var(--s,0s)}
.xray-axis{display:flex;justify-content:space-between;margin:8px 0 0;padding-left:54%;font-size:12px;color:#8A8E94;max-width:none}
.xray-side h3{margin:0 0 10px;font:700 var(--step-0)/1.2 var(--font-display);color:var(--paper)}
.xray-side h3+*{margin-top:0}
.xray-side ul{list-style:none;margin:0 0 26px;padding:0}
.xray-total{margin:0 0 12px;font:700 clamp(1.6rem,1.2rem + 1.2vw,2.3rem)/1 var(--font-display);letter-spacing:-.02em}
.xray-small{font:400 13px/1.3 var(--font-body);color:#B4B6B9;letter-spacing:0}
.xray-stack{display:flex;height:10px;overflow:hidden;border-radius:999px;margin-bottom:12px;background:#1A1D21}
.xray-stack span{height:100%;background:var(--c);flex:0 0 var(--w)}
.xray-legend li,.xray-facts li,.xray-sec li{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid #1F2328;font-size:13px;line-height:1.4}
.xray-legend li span:last-child{margin-left:auto;color:#B4B6B9;font-variant-numeric:tabular-nums}
.xray-legend i{width:10px;height:10px;margin-top:4px;border-radius:2px;background:var(--c);flex:none}
.xray-facts li::before,.xray-sec li::before{content:"";flex:none;width:12px;height:12px;margin-top:3px;background:#A9C2B0;-webkit-mask:var(--chk) center/contain no-repeat;mask:var(--chk) center/contain no-repeat}
.xray-facts,.xray-sec{--chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E")}
.xray-sec b,.xray-facts b{display:block;color:var(--paper);font-weight:700}
.xray-sec span,.xray-facts span{color:#B4B6B9}
.xray-note{margin:clamp(20px,2.6vw,32px) 0 0;font-size:12px;color:#8A8E94;max-width:80ch}
@media (max-width:960px){.xray-grid{grid-template-columns:minmax(0,1fr)}.xray-vitals{grid-template-columns:repeat(2,minmax(0,1fr))}.vital:nth-child(2){border-right:0;margin-right:0}.vital:nth-child(-n+2){border-bottom:1px solid #2A2E34}}
@media (max-width:640px){.xray-fall th:nth-child(2),.xray-fall td:nth-child(2){display:none}.xray-fall td:first-child{max-width:120px}.xray-axis{padding-left:44%}}
@media (prefers-reduced-motion:reduce){.xray.is-playing .xray-bar{transform:none}}

/* ---------- de doorsnede: een pagina in lagen ---------- */
.ds{--tilt:1;--spread:1;padding-block:var(--space-section);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.ds-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);align-items:center}
.ds-side h2{font-size:var(--step-3)}
.ds-intro{color:var(--muted);margin:16px 0 24px}
.ds-legend{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.ds-legend li{border-bottom:1px solid var(--line)}
.ds-legend button{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;width:100%;padding:12px 0;border:0;background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.ds-n{grid-row:span 2;font:700 13px/1.6 var(--font-body);font-style:normal;color:var(--muted)}
.ds-legend b{font:700 var(--step-0)/1.3 var(--font-display)}
.ds-legend span{font-size:var(--step--1);line-height:1.45;color:var(--muted)}
.ds-legend li.is-on .ds-n{color:var(--coral-ink)}
.ds-legend li.is-on b{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:.2em}
.ds-legend button:hover b{text-decoration:underline;text-decoration-color:var(--line-strong)}
.ds-scene{position:relative;container-type:inline-size;aspect-ratio:4/3.1;display:grid;place-items:center;perspective:1900px;perspective-origin:50% 30%}
.ds-stack{position:relative;width:70cqw;aspect-ratio:16/10.4;transform-style:preserve-3d;
  transform:translateY(calc(var(--spread) * 11cqw)) rotateX(calc(var(--tilt) * 56deg)) rotateZ(calc(var(--tilt) * -38deg)) scale(calc(1 - var(--tilt) * .16))}
.ds-layer{position:absolute;inset:0;border-radius:8px;transform:translateZ(calc(var(--i) * var(--spread) * 10cqw));transition:transform .28s var(--ease),filter .3s,box-shadow .3s}
.ds-layer--host{--i:0;opacity:var(--tilt)}
.ds-layer--tech{--i:1;opacity:var(--spread)}
.ds-layer--struct{--i:2;opacity:var(--spread)}
.ds-layer--design{--i:3}
.ds-layer--content{--i:4}
.ds[data-active] .ds-layer{filter:opacity(.38)}
.ds[data-active] .ds-layer.is-active{filter:none;transform:translateZ(calc(var(--i) * var(--spread) * 10cqw + 3cqw));box-shadow:0 0 0 2px var(--coral)}

/* de voorbeeldpagina, drie keer met dezelfde opbouw */
.ds-page{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:auto 1fr auto;gap:4cqw 5cqw;padding:4cqw 5cqw;border-radius:8px}
.ds-nav{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
.ds-logo{display:flex;align-items:center;gap:1cqw;font:700 1.9cqw/1 var(--font-display)}
.ds-logo i{width:2.4cqw;height:2.4cqw;border-radius:50%}
.ds-links{display:flex;gap:2.4cqw;font:700 1.35cqw/1 var(--font-body)}
.ds-text{display:grid;gap:1.6cqw;align-content:center;justify-items:start}
.ds-title{margin:0;font:700 4.1cqw/1.02 var(--font-display);letter-spacing:-.035em;max-width:none}
.ds-copy{margin:0;font-size:1.45cqw;line-height:1.5;max-width:none}
.ds-btn{padding:1.1cqw 1.8cqw;border-radius:4px;font:700 1.35cqw/1 var(--font-body)}
.ds-art{position:relative;border-radius:5px;overflow:hidden}
.ds-art span{position:absolute}
.ds-art .a1{left:14%;top:14%;width:46%;aspect-ratio:1;border-radius:50%}
.ds-art .a2{right:10%;bottom:12%;width:44%;height:52%;border-radius:3px}
.ds-art .a3{left:10%;bottom:14%;width:30%;height:6%;border-radius:3px}
.ds-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8cqw}
.ds-cards span{display:grid;gap:.8cqw;padding:1.4cqw 1.6cqw;border-radius:4px}
.ds-cards b{font:700 1.35cqw/1.1 var(--font-display)}
.ds-cards i{height:.7cqw;border-radius:2px}
/* ontwerp: vlakken, kleur en ruimte; geen tekst */
.ds-page--design{background:#fff;color:transparent;box-shadow:0 1px 0 var(--line-strong),0 30px 60px -40px rgba(17,20,24,.5)}
.ds-page--design .ds-logo i{background:var(--coral)}
.ds-page--design .ds-btn{background:var(--coral)}
.ds-page--design .ds-art{background:var(--paper-2)}
.ds-page--design .ds-cards span{background:var(--paper)}
/* inhoud: tekst en beeld */
.ds-page--content{color:var(--ink)}
.ds-page--content .ds-copy,.ds-page--content .ds-links{color:var(--ink-2)}
.ds-page--content .ds-art .a1{background:var(--coral)}
.ds-page--content .ds-art .a2{background:var(--ink)}
.ds-page--content .ds-art .a3{background:var(--line-strong)}
.ds-page--content .ds-cards i{background:var(--line)}
/* structuur: het geraamte */
.ds-page--struct{color:transparent;outline:1.5px dashed var(--line-strong);outline-offset:-1px;background:rgba(246,245,239,.55)}
.ds-page--struct .ds-nav,.ds-page--struct .ds-text>*,.ds-page--struct .ds-art,.ds-page--struct .ds-cards span{outline:1.5px dashed var(--ink-2);outline-offset:2px;border-radius:3px}
.ds-tag{position:absolute;padding:.4cqw .8cqw;border-radius:3px;background:var(--ink);color:var(--paper);font:600 1.2cqw/1 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
.ds-tag.t1{left:3%;top:3%}.ds-tag.t2{left:7%;top:31%}.ds-tag.t3{left:52%;top:27%}.ds-tag.t4{left:7%;top:78%}
.ds-spec{position:absolute;right:3%;top:3%;display:flex;align-items:center;gap:.6cqw;padding:.6cqw 1cqw;border-radius:4px;background:var(--ink);color:var(--paper);font:700 1.6cqw/1 var(--font-display);opacity:var(--spread)}
.ds-spec i{width:1.6cqw;height:1.6cqw;border-radius:50%}
.ds-spec .sw1{background:var(--paper)}.ds-spec .sw2{background:var(--coral)}.ds-spec .sw3{background:#8A8E94}
/* techniek */
.ds-tech{position:absolute;inset:0;display:grid;align-content:center;gap:1.6cqw;padding:5cqw;border-radius:8px;background:rgba(17,20,24,.9);color:#E6E4DC}
.ds-tech code{font:500 1.5cqw/1.3 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden}
.ds-tech code b{color:#FF8A7D;font-weight:600}
.ds-meter{display:block;height:1cqw;border-radius:99px;background:#2A2E34;overflow:hidden}
.ds-meter i{display:block;width:92%;height:100%;background:#A9C2B0}
/* hosting */
.ds-host{position:absolute;inset:0;display:grid;align-content:center;justify-items:start;gap:2.4cqw;padding:5cqw;border-radius:8px;background:#15181C;color:var(--paper);box-shadow:0 3cqw 5cqw -2cqw rgba(17,20,24,.5)}
.ds-host-url{display:flex;align-items:center;gap:1.2cqw;font:700 2cqw/1 var(--font-body)}
.ds-lock{width:1.8cqw;height:2.1cqw;border-radius:.4cqw;background:#A9C2B0;position:relative}
.ds-lock::before{content:"";position:absolute;left:20%;right:20%;top:-1.1cqw;height:1.3cqw;border:.35cqw solid #A9C2B0;border-bottom:0;border-radius:1cqw 1cqw 0 0}
.ds-rack{display:grid;gap:1cqw;width:60%}
.ds-rack i{height:2.4cqw;border-radius:3px;background:#24282E;box-shadow:inset 1.4cqw 0 0 -.9cqw var(--coral)}
.ds-host-chips{display:flex;gap:1cqw}
.ds-host-chips em{padding:.6cqw 1.2cqw;border-radius:99px;background:#24282E;font:700 1.3cqw/1 var(--font-body);font-style:normal}
.ds-status,.ds-live{position:absolute;z-index:2;margin:0;font:700 13px/1 var(--font-body)}
.ds-status{left:0;top:0;color:var(--muted)}
.ds-live{right:0;top:4px;padding:6px 12px;border-radius:99px;background:var(--ink);color:var(--paper);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.ds-live.is-on{opacity:1;transform:none}
.ds:not(.is-scroll) .ds-status,.ds:not(.is-scroll) .ds-live{display:none}

/* scrollgestuurd (alleen met JavaScript en zonder 'minder beweging') */
.ds.is-scroll{padding-block:0}
.ds.is-scroll .ds-track{height:330vh}
.ds.is-scroll{--avail:calc(100vh - var(--header-h) - var(--subnav-h,0px))}
@supports (height:100svh){.ds.is-scroll{--avail:calc(100svh - var(--header-h) - var(--subnav-h,0px))}}
.ds.is-scroll .ds-stage{position:sticky;top:calc(var(--header-h) + var(--subnav-h,0px));height:var(--avail);display:flex;align-items:center;padding-block:clamp(12px,3vh,36px);overflow:hidden}
.ds.is-scroll .ds-grid{max-height:100%}
.ds.is-scroll .ds-scene{width:min(100%,calc((var(--avail) - 2 * clamp(12px,3vh,36px)) * 1.25));justify-self:center}
.ds.is-scroll .ds-stage>.wrap{width:min(var(--wrap),100% - 2*var(--gutter))}
@media (max-width:960px){
  .ds-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .ds-scene{aspect-ratio:1/1.02;order:-1}
  .ds-stack{width:88cqw}
  .ds-page{gap:4.6cqw 5cqw;padding:5cqw 6cqw}
  .ds-title{font-size:4.8cqw}.ds-copy{font-size:2.2cqw}.ds-btn,.ds-links,.ds-cards b{font-size:2cqw}.ds-logo{font-size:2.6cqw}
  .ds-tag{font-size:2cqw}.ds-tech code{font-size:2.2cqw}.ds-host-url{font-size:2.8cqw}.ds-host-chips em{font-size:2cqw}
  .ds.is-scroll .ds-track{height:300vh}
  .ds.is-scroll .ds-stage{align-items:flex-start;padding-top:12px}
  .ds.is-scroll .ds-side h2{font-size:var(--step-2)}
  .ds.is-scroll[data-active] .ds-intro{display:none}
  .ds.is-scroll .ds-intro{margin:10px 0 0}
  .ds.is-scroll .ds-legend li:not(.is-on){display:none}
  .ds.is-scroll .ds-legend{border-top-width:1px}
}
@media (max-width:960px) and (max-height:700px){.ds.is-scroll .ds-scene{aspect-ratio:1/0.75}}
@media (min-width:961px) and (max-height:900px){
  .ds.is-scroll .ds-side h2{font-size:var(--step-2)}
  .ds.is-scroll .ds-intro{margin:10px 0 16px;font-size:var(--step--1)}
  .ds.is-scroll .ds-legend li:not(.is-on) span{display:none}
  .ds.is-scroll .ds-legend button{padding:8px 0}
}
@media (min-width:961px) and (max-height:620px){.ds.is-scroll .ds-intro{display:none}}

/* ---------- voor wie ik bouw: lijntekeningen ---------- */
.vw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin:0;padding:0;list-style:none}
.vw-card{display:grid;grid-template-rows:auto auto 1fr auto;padding:clamp(16px,2vw,24px);border:1px solid var(--line);border-radius:12px;background:#fff}
.vw-card svg{width:100%;height:auto;margin-bottom:14px;border-radius:8px;background:var(--paper)}
.vw-card h3{font-size:var(--step-1)}
.vw-card p{margin:8px 0 0;color:var(--muted);font-size:var(--step--1)}
.vw-play{justify-self:start;margin-top:14px;min-height:40px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:700 13px/1 var(--font-body);cursor:pointer}
.vw-play:hover{background:var(--ink);color:var(--paper)}
.vw-play[hidden]{display:none}
.vw-foot{margin:clamp(20px,2.6vw,32px) 0 0}
.lt{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lt .acc,.lt .acc *,.lt .dw.acc{stroke:var(--coral)}
.lt .vw-fill,.lt .vw-fill *{fill:var(--ink);stroke:none}
.lt .wk{fill:#fff;stroke:var(--ink);stroke-width:1.1;transition:fill .12s,transform .12s;transform-box:fill-box}
.lt .wk.is-down{fill:var(--coral);transform:translateY(2px)}
.lt .vw-lane{stroke:var(--line-strong);stroke-dasharray:8 8}
.lt .vw-label{fill:var(--coral-ink);stroke:var(--paper);stroke-width:3.5px;paint-order:stroke fill;font:700 9.5px/1 var(--font-body)}
.lt .vw-glow{fill:var(--coral);stroke:none;opacity:.08}
.lt .vw-notes>*,.lt .vw-hair>*,.lt .vw-breath>*,.lt .vw-rain>*,.lt .vw-heat{opacity:0}
.lt .vw-type>*{transform-box:fill-box;transform-origin:0 50%}
.lt .vw-checks>*{stroke-dasharray:1;stroke-dashoffset:0}
.lt .vw-day{fill:none;stroke-width:1.6}

/* zichzelf tekenen (alleen met JavaScript en zonder 'minder beweging') */
.vw.is-anim .dw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.4,.1,.2,1)}
.vw.is-anim .vw-card.is-drawn .dw{stroke-dashoffset:0}
.vw.is-anim .vw-card .vw-keys,.vw.is-anim .vw-card .vw-fill,.vw.is-anim .vw-card .vw-label,.vw.is-anim .vw-card .vw-lane,.vw.is-anim .vw-card .vw-fan,.vw.is-anim .vw-card .vw-scissors,.vw.is-anim .vw-card .vw-glow,.vw.is-anim .vw-card .vw-type,.vw.is-anim .vw-card .vw-clock,.vw.is-anim .vw-card .vw-lamp{opacity:0;transition:opacity .7s 1s}
.vw.is-anim .vw-card.is-drawn .vw-keys,.vw.is-anim .vw-card.is-drawn .vw-fill,.vw.is-anim .vw-card.is-drawn .vw-label,.vw.is-anim .vw-card.is-drawn .vw-lane,.vw.is-anim .vw-card.is-drawn .vw-fan,.vw.is-anim .vw-card.is-drawn .vw-scissors,.vw.is-anim .vw-card.is-drawn .vw-type,.vw.is-anim .vw-card.is-drawn .vw-clock,.vw.is-anim .vw-card.is-drawn .vw-lamp{opacity:1}
.vw.is-anim .vw-card.is-drawn .vw-glow{opacity:.08}

/* rustige bewegingen zodra een tekening klaar is en in beeld staat */
.is-playing .vw-pend{transform-box:view-box;transform-origin:306px 64px;animation:vw-swing 1.1s ease-in-out infinite alternate}
.is-playing .vw-notes>*{transform-box:fill-box;animation:vw-rise 3.6s ease-out infinite}
.is-playing .vw-notes .n2{animation-delay:1.2s}.is-playing .vw-notes .n3{animation-delay:2.4s}
.is-playing:not(.is-melody) .wk:nth-child(1){animation:vw-press 2.8s infinite}
.is-playing:not(.is-melody) .wk:nth-child(3){animation:vw-press 2.8s .35s infinite}
.is-playing:not(.is-melody) .wk:nth-child(5){animation:vw-press 2.8s .7s infinite}
.is-playing:not(.is-melody) .wk:nth-child(8){animation:vw-press 2.8s 1.05s infinite}
.is-playing .vw-scissors .bl1{transform-box:view-box;transform-origin:316px 96px;animation:vw-snip1 .5s ease-in-out infinite alternate}
.is-playing .vw-scissors .bl2{transform-box:view-box;transform-origin:316px 96px;animation:vw-snip2 .5s ease-in-out infinite alternate}
.is-playing .vw-hair>*{transform-box:fill-box;animation:vw-fall 1.8s ease-in infinite}
.is-playing .vw-hair .h2{animation-delay:.6s}.is-playing .vw-hair .h3{animation-delay:1.2s}
.is-playing .vw-belly{transform-box:fill-box;transform-origin:50% 100%;animation:vw-breathe 4.8s ease-in-out infinite}
.is-playing .vw-breath>*{transform-box:fill-box;transform-origin:50% 50%;animation:vw-ring 4.8s ease-out infinite}
.is-playing .vw-breath .b2{animation-delay:1.6s}.is-playing .vw-breath .b3{animation-delay:3.2s}
.is-playing .vw-rain>*{transform-box:fill-box;animation:vw-drop .9s linear infinite}
.is-playing .vw-rain .r2{animation-delay:.22s}.is-playing .vw-rain .r3{animation-delay:.45s}.is-playing .vw-rain .r4{animation-delay:.67s}
.no-rain .vw-rain{display:none}
.is-playing .vw-fan{transform-box:view-box;transform-origin:150px 172px;animation:vw-spin 1.4s linear infinite}
.is-playing .vw-glow{animation:vw-glow 3s ease-in-out infinite alternate}
.is-playing .vw-lamp>*{transform-box:fill-box;transform-origin:50% 50%;animation:vw-ring 2.6s ease-out infinite}
.is-playing .vw-lamp>*+*{animation-delay:1.3s}
.is-playing .vw-heat{transform-box:fill-box;animation:vw-heat 2s ease-out infinite}
@keyframes vw-swing{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes vw-rise{0%{opacity:0;transform:translateY(8px)}20%{opacity:1}100%{opacity:0;transform:translateY(-46px)}}
@keyframes vw-press{0%,14%,100%{fill:#fff;transform:none}4%{fill:var(--paper-2);transform:translateY(2px)}}
@keyframes vw-snip1{to{transform:rotate(-11deg)}}
@keyframes vw-snip2{to{transform:rotate(11deg)}}
@keyframes vw-fall{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(-6px,70px) rotate(40deg)}}
@keyframes vw-breathe{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(1.45)}}
@keyframes vw-ring{0%{opacity:.75;transform:scale(.4)}100%{opacity:0;transform:scale(2)}}
@keyframes vw-drop{0%{opacity:0;transform:translate(0,-12px)}25%{opacity:.85}100%{opacity:0;transform:translate(-5px,18px)}}
@keyframes vw-spin{to{transform:rotate(360deg)}}
@keyframes vw-glow{from{opacity:.06}to{opacity:.16}}
@keyframes vw-heat{0%{opacity:0;transform:translateY(4px)}40%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.is-playing .vw-type>*{animation:vw-type 2.6s ease-out infinite}
.is-playing .vw-type .t2{animation-delay:.5s}.is-playing .vw-type .t3{animation-delay:1s}
@keyframes vw-type{0%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
@media (max-width:760px){.vw-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- tarieven: prijskaartjes met omcirkelde prijs ---------- */
.price-hero{padding-bottom:clamp(40px,5vw,72px)}
.price-hero-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:16px clamp(32px,5vw,72px);align-items:end;margin-bottom:clamp(28px,3.6vw,48px)}
.price-hero-head h1{font-size:clamp(2.4rem,1.5rem + 3vw,4.4rem)}
.price-hero-head .lead{margin:0;font-size:var(--step-0);line-height:1.6}
.price-tiles{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.price-tile{display:flex;flex-direction:column;gap:10px;height:100%;padding:22px 22px 18px;border:1.5px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.price-tile:hover,.price-tile:focus-visible{transform:translateY(-4px);box-shadow:0 16px 32px -22px rgba(17,20,24,.55)}
.pt-choice{font:700 var(--step-0)/1.2 var(--font-display);letter-spacing:-.01em}
.pt-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-height:3.4rem}
.pt-pre,.pt-per{font-size:var(--step--1);color:var(--muted)}
.pt-amt{font:700 clamp(2.3rem,1.7rem + 1.9vw,3.4rem)/1 var(--font-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.pt-amt--text{font-size:clamp(1.7rem,1.3rem + 1.2vw,2.4rem)}
.pt-copy{color:var(--muted);font-size:var(--step--1);line-height:1.5}
.pt-note{margin-top:auto;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.price-tile:hover .pt-choice{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.price-fine{margin:18px 0 0}
.pt-ring-holder{position:absolute;inset:0;pointer-events:none;display:none}
.js .pt-ring-holder{display:block}
.pt-ring{position:absolute;left:0;top:0;width:0;height:0;max-width:none;overflow:visible;fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;transition:transform .55s cubic-bezier(.34,1.4,.64,1),width .45s var(--ease),height .45s var(--ease),opacity .3s}
.pt-ring path{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.pt-ring.is-drawn path{stroke-dashoffset:0;transition:stroke-dashoffset .75s cubic-bezier(.5,.1,.25,1) .12s}
.price-tiles.is-pre .price-tile{opacity:0;transform:translateY(22px) scale(.95)}
.price-tiles.is-in .price-tile{opacity:1;transform:none;transition:opacity .45s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.price-tiles.is-in .price-tile:hover,.price-tiles.is-in .price-tile:focus-visible{transform:translateY(-4px)}
@media (max-width:960px){.price-hero-head{grid-template-columns:minmax(0,1fr)}.price-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .price-tiles{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 14px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .price-tiles::-webkit-scrollbar{display:none}
  .price-tiles>li:not(.pt-ring-holder){flex:0 0 82%;scroll-snap-align:start}
  .pt-ring-holder{inset:0 auto 0 0;width:max-content}
}
@media (prefers-reduced-motion:reduce){.pt-ring,.pt-ring.is-drawn path{transition:none}}

/* ---------- websiteplanner ---------- */
.wp[hidden]{display:none}
.wp{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.wp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start}
.wp-controls{display:grid;gap:22px;margin:0}
.wp-q{margin:0;padding:0;border:0;min-width:0}
.wp-q legend{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:0;font-weight:700}
.wp-q legend>span:first-child{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:12px}
.wp-q .chip span{min-height:38px;font-size:13.5px}
.wp-side{position:sticky;top:calc(var(--header-h) + 16px);display:grid;gap:16px}
.wp-map{position:relative;height:clamp(300px,30vw,400px);border:1.5px solid var(--ink);border-radius:12px;background:#fff;overflow:hidden;
  background-image:radial-gradient(circle,var(--line) 1px,transparent 1.2px);background-size:18px 18px}
.wp-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--ink-2);stroke-width:1.4;stroke-linecap:round}
.wp-edges .e-new{stroke-dasharray:1;stroke-dashoffset:1;animation:wp-draw .55s var(--ease) forwards}
.wp-edges .route{stroke:var(--coral);stroke-width:3}
.wp-edges .walker{fill:var(--coral);stroke:#fff;stroke-width:2}
@keyframes wp-draw{to{stroke-dashoffset:0}}
.wp-node{position:absolute;left:0;top:0;transform:translate(-50%,-50%);padding:7px 11px;border:1.5px solid var(--ink);border-radius:8px;background:#fff;font:700 12.5px/1.15 var(--font-body);white-space:nowrap;transition:left .45s var(--ease),top .45s var(--ease),opacity .3s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.wp-node.is-home{background:var(--ink);color:var(--paper);font-family:var(--font-display);font-size:14px;padding:9px 14px}
.wp-node.is-mod{border-style:dashed;border-radius:999px;font-weight:600;color:var(--ink-2);background:var(--paper)}
.wp-node.is-goal{border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,107,91,.25)}
.wp-node.is-new{opacity:0;transform:translate(-50%,-50%) scale(.6)}
.wp-legend{position:absolute;left:12px;bottom:10px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.wp-legend i{width:18px;height:3px;border-radius:2px;background:var(--coral)}
.wp-sum{padding:18px 20px;border:1.5px solid var(--ink);border-radius:12px;background:#fff}
.wp-fit{margin:0 0 8px;font:700 var(--step-1)/1.2 var(--font-display);letter-spacing:-.01em}
.wp-fit small{display:block;margin-top:4px;font:400 var(--step--1)/1.4 var(--font-body);color:var(--muted)}
.wp-list{margin:0 0 10px;padding:0;list-style:none;font-size:var(--step--1)}
.wp-list li{padding:5px 0;border-bottom:1px solid var(--line)}
.wp-list b{display:inline-block;min-width:92px;color:var(--muted);font-weight:600}
.wp-fine{margin:0 0 14px;font-size:12px;color:var(--muted)}
@media (max-width:960px){.wp-grid{grid-template-columns:minmax(0,1fr)}.wp-side{position:static}.wp-map{height:320px}}
@media (max-width:640px){.wp-map{height:400px}.wp-node{font-size:11px;padding:6px 8px}.wp-node.is-home{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.wp-node{transition:none}.wp-edges .e-new{animation:none;stroke-dashoffset:0}}

/* ---------- zoeken: collage en loep ---------- */
.zoek-hero .search-page{max-width:none;position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.zoek-vondsten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zv:nth-child(2){margin-top:44px}.zv:nth-child(3){margin-top:-44px}
.zv a{display:block;text-decoration:none;color:var(--ink)}
.zv img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1.5px solid var(--ink);border-radius:10px;background:#fff}
.zv-naam{display:block;margin-top:8px;font-weight:700;font-size:var(--step--1)}
.zv-soort{display:block;font-size:12px;color:var(--muted)}
.zv a:hover .zv-naam,.zv a:focus-visible .zv-naam{text-decoration:underline;text-underline-offset:3px}
.loep{position:absolute;left:0;top:0;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);pointer-events:none;z-index:3;opacity:0;transition:opacity .35s}
.loep.is-aan{opacity:1}
.loep-glas{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--paper);border:2.5px solid var(--ink);box-shadow:0 10px 30px rgba(17,20,24,.18),inset 0 0 0 5px rgba(255,255,255,.55)}
.loep-glas::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),transparent 38%);pointer-events:none}
.loep-kopie{position:absolute;left:0;top:0;margin:0!important;transform-origin:0 0}
.loep-steel{position:absolute;left:84%;top:84%;width:calc(var(--d) * .42);height:12px;border-radius:6px;background:var(--ink);transform:rotate(45deg);transform-origin:0 50%}
.loep-steel::before{content:"";position:absolute;left:-2px;top:-3px;width:16px;height:18px;border-radius:4px;background:var(--coral)}
.loep.is-sleep{pointer-events:auto;cursor:grab;touch-action:none}
@media (max-width:960px){
  .zoek-hero .search-page{grid-template-columns:minmax(0,1fr)}
  .zoek-vondsten{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .zv:nth-child(n){margin-top:0}
}
@media (max-width:560px){.zoek-vondsten{grid-template-columns:1fr 1fr}.zv-soort{display:none}}

/* ---------- blokken uit het beheer ---------- */
.cb-flow{padding-bottom:clamp(40px,6vw,88px)}
.page-hero--cms{padding-bottom:clamp(8px,2vw,24px)}
.cb{--rail:56px;position:relative}
.cb--light{background:var(--paper)}
.cb--dark{background:var(--ink);color:var(--paper)}
.cb--coral{background:var(--coral);color:var(--ink)}
.cb--dark,.cb--coral{padding-block:clamp(48px,6vw,88px);margin-block:clamp(24px,4vw,48px)}
.cb--dark a:not(.btn){color:#FF9B8E}
.cb-in{position:relative;padding-left:var(--rail);padding-block:clamp(20px,3vw,36px)}
/* de verhaallijn: loopt door zolang lichte blokken op elkaar volgen */
.cb--light:is(.cb--hoofdstuk,.cb--paar) .cb-in::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:1.5px;background:var(--line)}
.cb--light:first-child .cb-in::before{top:clamp(28px,4vw,48px)}
.cb--light:last-child .cb-in::before{bottom:50%}
.cb-flow h2{margin:0;font-size:var(--step-3);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.cms-prose{max-width:62ch;font-size:var(--step-0);line-height:1.7}
.cms-prose p{margin:0 0 1em}.cms-prose>:last-child{margin-bottom:0}
.cms-prose h2,.cms-prose h3{margin:1.4em 0 .5em;line-height:1.2}.cms-prose h3{font-size:var(--step-1)}
.cms-prose ul,.cms-prose ol{margin:0 0 1em;padding-left:1.3em}.cms-prose li{margin:.3em 0}
.cms-prose blockquote{margin:1.2em 0;padding-left:1em;border-left:3px solid var(--coral)}
.cms-prose a{text-decoration:underline;text-underline-offset:3px}
/* hoofdstuk: kop links, tekst rechts, punt op de lijn */
.cb--hoofdstuk .cb-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,64px);align-items:start;padding-block:clamp(36px,5vw,64px)}
.cb--hoofdstuk .cb-in::after{content:"";position:absolute;left:var(--rail);right:0;top:0;height:1px;background:var(--line)}
.cb--hoofdstuk h2{position:sticky;top:calc(var(--header-h,72px) + 24px)}
.cb-punt{position:absolute;left:4px;top:clamp(46px,5.6vw,74px);width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--coral)}
.cb--dark .cb-punt,.cb--coral .cb-punt{display:none}
.cb--dark .cb-in::before,.cb--coral .cb-in::before,.cb--dark .cb-in::after,.cb--coral .cb-in::after{display:none}
/* tekst naast beeld */
.cb--paar .cb-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(28px,4vw,56px)}
.cb--beeld-eerst .cb-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.cb-tekst h2{margin-bottom:.5em}
.cb-tekst--lead .cms-prose{font-size:var(--step-1);line-height:1.55;max-width:34ch}
.cb-figuur{margin:0}
.cb-figuur img{display:block;width:100%;height:auto;border:1.5px solid var(--ink);border-radius:12px;background:var(--paper-2)}
.cb--paar .cb-figuur img{transform:rotate(1.2deg);box-shadow:0 18px 40px rgba(17,20,24,.14)}
.cb--beeld-eerst .cb-figuur img{transform:rotate(-1.2deg)}
.cb-figuur figcaption{margin-top:14px;font-size:var(--step--1);color:var(--muted)}
.cb--dark .cb-figuur figcaption{color:#C9CBCF}.cb--coral .cb-figuur figcaption{color:var(--ink)}
.cb--beeld .cb-in>h2{margin-bottom:24px}
.cb--beeld .cb-figuur{max-width:960px}
.cb--kolommen .cb-in>h2,.cb--faq .cb-in>h2,.cb--knoppen .cb-in>h2{margin-bottom:24px}
.cb-kolommen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px)}
.cb-knoprij{display:flex;flex-wrap:wrap;gap:12px}
.cb--knoppen .cb-in{padding-block:clamp(28px,4vw,48px)}
.cb-faq{max-width:820px;border-top:1px solid var(--line)}
.cb-faq details{border-bottom:1px solid var(--line);padding:18px 0}
.cb-faq summary{cursor:pointer;font-weight:700;font-size:var(--step-1);list-style-position:outside}
.cb-faq .cms-prose{padding-top:12px}
.cb--dark .cb-faq,.cb--dark .cb-faq details{border-color:rgba(246,245,239,.2)}
@media (prefers-reduced-motion:no-preference){.cb--paar .cb-figuur img{transition:transform .5s var(--ease)}.cb--paar:hover .cb-figuur img{transform:rotate(0)}}
@media (max-width:860px){
  .cb{--rail:32px}
  .cb-in::before{left:7px!important}
  .cb-punt{left:0;top:40px;width:15px;height:15px}
  .cb--hoofdstuk .cb-in,.cb--paar .cb-in,.cb--beeld-eerst .cb-in{grid-template-columns:minmax(0,1fr)}
  .cb--hoofdstuk h2{position:static}
  .cb--paar .cb-figuur img,.cb--beeld-eerst .cb-figuur img{transform:none}
  .cb-tekst--lead .cms-prose{max-width:none}
  .cb-kolommen{grid-template-columns:minmax(0,1fr)}
}

/* ---------- tijdmachine op /mijn-verhaal ---------- */
.tm{background:var(--ink);color:var(--paper);padding-block:clamp(40px,5vw,72px) clamp(48px,6vw,88px);overflow:hidden}
.tm-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.tm h1{color:var(--paper);margin:0 0 28px;font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.tm-lijst{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.tm-lijst li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:baseline}
.tm-lijst strong{font:700 var(--step-1)/1 var(--font-display);color:var(--coral)}
.tm-lijst p{margin:0;color:#C9CBCF;max-width:42ch}
/* met JavaScript: één moment tegelijk, groot */
.tm.is-live .tm-lijst{display:block;position:relative;min-height:9.5em}
.tm.is-live .tm-lijst li{display:block;position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s var(--ease);pointer-events:none}
.tm.is-live .tm-lijst li.is-actief{opacity:1;transform:none;pointer-events:auto}
.tm.is-live .tm-lijst strong{display:block;font-size:clamp(3rem,6vw,5.2rem);letter-spacing:-.03em;margin-bottom:10px}
.tm.is-live .tm-lijst p{font-size:var(--step-1);line-height:1.45;color:var(--paper)}
.tm-machine[hidden]{display:none}
.tm-monitor{background:#2A3038;border-radius:22px;padding:clamp(12px,1.6vw,20px) clamp(12px,1.6vw,20px) 10px;box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.tm-scherm{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#161A1F;cursor:pointer;outline:none}
.tm-scherm:focus-visible{box-shadow:0 0 0 3px var(--coral)}
.tm-scherm canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.tm-scherm::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;transition:opacity .6s;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45));opacity:var(--crt,1)}
.tm-res{flex:1;margin-left:10px;font:600 11px/1 var(--font-body);color:#B4B9C0;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.tm-voet{display:flex;align-items:center;justify-content:space-between;padding:9px 6px 0}
.tm-led{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 8px rgba(255,107,91,.8)}
.tm-merk{font:700 10px/1 var(--font-display);letter-spacing:.2em;color:#B4B9C0}
.tm-bediening{margin-top:22px}
.tm-stops{position:relative;display:grid;grid-template-columns:repeat(5,1fr);touch-action:pan-y}
.tm-lijn{position:absolute;left:10%;right:10%;top:13px;height:2px;background:#3A414B;border-radius:2px}
.tm-lijn-vul{position:absolute;left:0;top:0;bottom:0;width:var(--vul,0%);background:var(--coral);border-radius:2px}
.tm-stop{position:relative;display:grid;justify-items:center;gap:8px;padding:0 0 4px;border:0;background:none;color:#C9CBCF;font:600 13px/1.2 var(--font-body);cursor:pointer}
.tm-stop::before{content:"";width:28px;height:28px;border-radius:50%;background:var(--ink);border:2px solid #4A525D;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.tm-stop.is-voorbij::before{border-color:var(--coral)}
.tm-stop[aria-pressed="true"]{color:var(--paper)}
.tm-stop[aria-pressed="true"]::before{background:var(--coral);border-color:var(--coral);transform:scale(1.12)}
.tm-stop:focus-visible{outline:2px solid var(--paper);outline-offset:4px;border-radius:6px}
.tm-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px}
.tm-speel[hidden]{display:none}
.tm .btn--primary:hover,.tm .btn--primary:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tm-pauze{border:0;background:none;padding:6px 0;color:#C9CBCF;font:600 var(--step--1)/1.2 var(--font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tm-pauze:hover{color:var(--paper)}
.tm-pauze:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
@media (max-width:960px){
  .tm-grid{grid-template-columns:minmax(0,1fr)}
  .tm-machine{order:2}.tm-tekst{order:1}
  .tm.is-live .tm-lijst{min-height:8.2em}
  .tm-stop{font-size:12px}.tm-stop::before{width:22px;height:22px}.tm-lijn{top:10px}
}
@media (max-width:420px){.tm.is-live .tm-lijst{min-height:9.5em}}
@media (prefers-reduced-motion:reduce){.tm.is-live .tm-lijst li{transition:none}}

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- alleen preview ---------- */
.preview-note{position:fixed;left:50%;bottom:20px;z-index:80;transform:translateX(-50%);margin:0;padding:12px 16px;border-radius:var(--radius);background:var(--ink);color:var(--paper);font-size:var(--step--1);max-width:calc(100% - 40px)}
.preview-note[hidden]{display:none}