/* pagina/voorstel-diensten.css — ronde 2b, na jury 3. Eigenaar: pagina-bouwer van diensten.html (prefix .vd-).
   Beeldtaal = de offerte: eigen 3D-renders (assets/beeld/voorstel-diensten/_studio/: three.js op de GPU, 160–256 samples, zachte
   halfschaduw, hemel-occlusie, randlicht, spiegeling in het water) op rijstpapier; art-deco kaders met meanderband; rode zegels
   alleen voor hoofdstukken; gouden munten voor de werkwijze en alle pins (huis én stelling); deelpunten met een gouden ruit.
   Elk hoofdbeeld staat vóór een eigen zachte zon met inktbergen of mist onder de voet (offerte p1/p3).
   Kalligrafie: één systeem — het teken staat rechts op de regel van de kicker (.vd-teken), nooit op een render.
   Ritme: elk hoofdstuk een eigen compositie — 1 volle plaat met titelkaart · 2 gespiegeld kader + tijdlijn · 3 schip op het water +
   kaart als spread · 4 stelling met zes munten = legenda · 5 alleen de rol · 6 het huis groot · 7 document · slot als brief in een
   tweekoloms kader. Mobiel: deelpunten als compacte lijst met de ruit links, geen bewijsregels, de rol verticaal.
   Inhoud: 0 basis · 1 demo · 2 kader · 3 kop/held · 4 rollen · 5 overgang · 6 titelblok · 7 items · 8 sourcing · 9 tafel ·
           10 zee + golven · 11 kaart + reis · 12 daarnaast · 13 handrol · 14 praktijk · 15 afspraken · 16 slot · 17 folio ·
           18 kop/voet · 19 beweging · 20 print */

/* ================================================================ 0 BASIS */
@font-face{font-family:"VD Kalli";src:url('../../beeld/voorstel-diensten/vd-kalli.woff2?v=3fb17db5') format('woff2');font-weight:400;font-display:swap}
.vd{--vd-zon:radial-gradient(circle at 50% 50%,rgba(238,206,128,.78) 0,rgba(240,212,140,.72) 52%,rgba(242,219,156,.42) 63%,rgba(242,219,156,0) 70.7%);
  --vd-papier:#F4EFE4;--vd-sectie:72px;
  --vd-zon-zacht:radial-gradient(circle at 50% 50%,rgba(238,206,128,.62) 0,rgba(240,212,140,.55) 50%,rgba(242,219,156,.26) 62%,rgba(242,219,156,0) 70.7%);
  --vd-zon-bleek:radial-gradient(circle at 50% 50%,rgba(240,218,160,.6) 0,rgba(242,224,174,.52) 50%,rgba(244,230,190,.24) 62%,rgba(244,230,190,0) 70.7%);
  --vd-zon-warm:radial-gradient(circle at 50% 50%,rgba(236,178,112,.5) 0,rgba(238,190,128,.44) 50%,rgba(240,204,150,.2) 62%,rgba(240,204,150,0) 70.7%);
  --vd-goudtekst:#7F611C;            /* donker goud voor tekst < 18 px: 4,9:1 op rijst (het lichte goud alleen voor lijnen en ornamenten) */
  --vd-haar:linear-gradient(90deg,transparent,var(--lijn-goud) 8%,var(--lijn-goud) 92%,transparent)}
@media (min-width:1024px){.vd{--vd-sectie:120px}}
.vd .s-kicker{color:var(--vd-goudtekst)}
@media (min-width:768px){.vd .s-kicker{font-size:.8125rem;letter-spacing:.28em}}
.vd-kalli{font-family:"VD Kalli",var(--f-kalli);font-weight:400;line-height:1;color:var(--inkt)}
.vd-br{display:inline}
.vd-ruit{display:inline-block;width:7px;height:7px;rotate:45deg;background:var(--goud);box-shadow:0 0 0 2px var(--vd-papier),0 0 0 2.6px var(--lijn-goud);flex:none}
.vd-nw{white-space:nowrap}
/* rood zegel met kalligrafisch cijfer: alleen voor hoofdstukken */
.vd-zegelnr{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;rotate:-3deg;
  background:url('../../kit/svg/zegel/leeg.svg?v=648606df') center/100% 100% no-repeat;color:#F6E8DC;
  font:400 21px/1 "VD Kalli",var(--f-kalli);padding-top:1px;box-shadow:0 1px 2px rgba(var(--rood-rgb),.25)}
/* gouden munt: alleen werkwijze-stappen en pins */
.vd-munt,.vd-pins .s-pin{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FBEBB8 0,#E8C979 36%,#C9A24B 70%,#A07A28 100%);
  box-shadow:0 0 0 1.5px var(--dgoud),inset 0 0 0 3px rgba(255,248,226,.55),inset 0 0 0 4px rgba(var(--dgoud-rgb),.35),0 2px 6px rgba(var(--inkt-rgb),.22);
  font:600 .9375rem/1 var(--f-mono);color:var(--inkt);font-variant-numeric:tabular-nums lining-nums}
/* tag in een gouden kader (i.p.v. een inktvlak) */
.vd-tag{display:inline-flex;align-items:center;min-height:30px;padding:4px 14px 4px calc(14px + .24em);background:var(--vd-papier);
  box-shadow:inset 0 0 0 1px var(--dgoud),inset 0 0 0 3px var(--vd-papier),inset 0 0 0 3.5px rgba(var(--dgoud-rgb),.6);
  font:500 .8125rem/1.2 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--vd-goudtekst);white-space:nowrap}
@media (max-width:767px){.vd-tag{font-size:.875rem;letter-spacing:.16em}}
/* lopende tekst: geen weeskinderen (koppen doen text-wrap:balance in site.css) */
.vd :is(p,figcaption,dd,li){text-wrap:pretty}
/* zon: zachte schijf achter elk hoofdbeeld (offerte p1/p3); goud, bleekgoud of warm oranje */
.vd-zon{position:absolute;z-index:-1;aspect-ratio:1;border-radius:50%;pointer-events:none;background:var(--vd-zon-zacht)}
.vd-zon--warm{background:var(--vd-zon-warm)}
/* voetmist: nevel onder de voet van een object, zodat het niet 'zweeft' */
.vd-voetmist{position:absolute;z-index:1;left:-8%;right:-8%;bottom:-3%;height:26%;pointer-events:none;
  background:url('../../kit/svg/land/nevel.svg?v=caf49ff3') center bottom/100% 100% no-repeat;opacity:.85;
  -webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
/* teken: kalligrafie (+ klein zegel) rechts, bovenkant gelijk met de kicker — op mobiel én desktop hetzelfde systeem */
.vd-teken{display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.vd-teken .vd-kalli{font-size:52px;opacity:.9;mix-blend-mode:multiply}
.vd-teken .s-zegel-svg{width:22px;height:22px;rotate:-4deg}
@media (min-width:768px){.vd-teken .vd-kalli{font-size:72px}.vd-teken .s-zegel-svg{width:26px;height:26px}}
@media (min-width:1024px){.vd-teken .vd-kalli{font-size:88px}}

/* ================================================================ 1 DEMO-BALK (voorstel) — mobiel één regel van 44 px */
.vd-demo{position:relative;z-index:1;border-bottom:1px solid var(--lijn-goud-zacht);background:var(--rijst2,#EFE7D6)}
.vd-demo__balk{display:flex;align-items:center;justify-content:space-between;gap:4px 14px;height:44px;font-size:.875rem;line-height:1.3;color:var(--inkt2)}
.vd-demo__label{font:500 .875rem/1.2 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--vd-goudtekst);white-space:nowrap}
.vd-demo__tekst{display:none}
.vd-demo a{display:inline-flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap;color:var(--inkt);text-underline-offset:.22em;text-decoration-color:var(--lijn-goud)}
.vd-demo a .s-ico{width:16px;height:16px;color:var(--dgoud)}
@media (max-width:389px){.vd-demo__label{letter-spacing:.14em}}
@media (min-width:900px){.vd-demo__balk{justify-content:flex-start}.vd-demo__label{font-size:.75rem;letter-spacing:.3em}.vd-demo__tekst{display:block}}

/* ================================================================ 2 GOUDEN KADER — meanderband in de hoeken, dubbele lijn (offerte p2/p3) */
.vd-goud{--h:60px;--in:10px}
@media (min-width:768px){.vd-goud{--h:80px;--in:13.33px}}
@media (min-width:1024px){.vd-goud{--h:96px;--in:16px}}
.vd-goud::before{inset:0;background:
  url('../../beeld/voorstel-diensten/vd-hoek-lb.svg?v=1cf0a472') 0 0/var(--h) var(--h) no-repeat,
  url('../../beeld/voorstel-diensten/vd-hoek-rb.svg?v=81719ffc') 100% 0/var(--h) var(--h) no-repeat,
  url('../../beeld/voorstel-diensten/vd-hoek-lo.svg?v=acedc0e6') 0 100%/var(--h) var(--h) no-repeat,
  url('../../beeld/voorstel-diensten/vd-hoek-ro.svg?v=cef56888') 100% 100%/var(--h) var(--h) no-repeat,
  linear-gradient(var(--dgoud),var(--dgoud)) var(--h) 0/calc(100% - 2 * var(--h)) 1px no-repeat,
  linear-gradient(var(--dgoud),var(--dgoud)) var(--h) 100%/calc(100% - 2 * var(--h)) 1px no-repeat,
  linear-gradient(var(--dgoud),var(--dgoud)) 0 var(--h)/1px calc(100% - 2 * var(--h)) no-repeat,
  linear-gradient(var(--dgoud),var(--dgoud)) 100% var(--h)/1px calc(100% - 2 * var(--h)) no-repeat}
.vd-goud::after{inset:0;background:
  linear-gradient(var(--lijn-binnen),var(--lijn-binnen)) var(--h) 3px/calc(100% - 2 * var(--h)) .5px no-repeat,
  linear-gradient(var(--lijn-binnen),var(--lijn-binnen)) var(--h) calc(100% - 3px)/calc(100% - 2 * var(--h)) .5px no-repeat,
  linear-gradient(var(--lijn-binnen),var(--lijn-binnen)) 3px var(--h)/.5px calc(100% - 2 * var(--h)) no-repeat,
  linear-gradient(var(--lijn-binnen),var(--lijn-binnen)) calc(100% - 3px) var(--h)/.5px calc(100% - 2 * var(--h)) no-repeat,
  linear-gradient(var(--dgoud),var(--dgoud)) var(--h) var(--in)/calc(100% - 2 * var(--h)) 1px no-repeat,
  linear-gradient(var(--dgoud),var(--dgoud)) var(--h) calc(100% - var(--in))/calc(100% - 2 * var(--h)) 1px no-repeat,
  linear-gradient(var(--dgoud),var(--dgoud)) var(--in) var(--h)/1px calc(100% - 2 * var(--h)) no-repeat,
  linear-gradient(var(--dgoud),var(--dgoud)) calc(100% - var(--in)) var(--h)/1px calc(100% - 2 * var(--h)) no-repeat}
.vd-goud > :not(.s-laag){position:relative;z-index:1}

/* ================================================================ 3 KOP + HELD — het kader sluit hier (vóór 'Drie vakken') */
.vd-kop{position:relative;padding-top:clamp(12px,2vw,28px)}
.vd-kop__vel{position:relative;padding:calc(var(--in) + 18px) calc(var(--in) + 14px) calc(var(--in) + 26px);overflow:clip}
.vd-kop__watermerk{left:-8%;bottom:-6%;width:min(64vw,560px);opacity:.04}
.vd-kop__raster{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.vd-kop__tekst{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
.vd-kop__tekst > .s-kruimel{grid-column:1 / -1;margin:0 0 14px}
/* kruimelpad: op smalle schermen alleen Home · Diensten (geen scheider aan een regelbegin) */
@media (max-width:400px){.vd-kop .s-kruimel li:nth-child(2){display:none}}
.vd-kop__kicker{grid-column:1;margin:0}
.vd-kop__h1{grid-column:1 / -1;margin:12px 0 0}
.vd-kop__h1 em{display:block;margin-top:.06em;white-space:nowrap}
/* 平安 + zegel: mobiel horizontaal op de regel van de kicker; desktop verticaal rechtsboven in het kader */
.vd-kop__teken{grid-column:2;grid-row:2;display:flex;align-items:center;gap:8px}
.vd-kop__teken .vd-kalli{font-size:30px;letter-spacing:.06em;opacity:.9;mix-blend-mode:multiply}
.vd-kop__teken .s-zegel-svg{width:22px;height:22px;rotate:-4deg}
.vd-kop__lead{max-width:34ch;margin:0}
/* scheider uit de offerte (dubbele lijn ◇·◇) tussen de lead en de knoppen */
.vd-kop__orn{margin:20px 0 0;width:220px}
.vd-kop__knoppen{margin-top:20px}
.vd-kop__meta{display:grid;margin:26px 0 0;border-top:1px solid var(--lijn-goud-zacht)}
.vd-kop__meta > div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--lijn-goud-zacht)}
.vd-kop__meta dt{font-size:.875rem;letter-spacing:.24em;color:var(--vd-goudtekst)}
.vd-kop__meta dd{margin:0;font:400 .9375rem/1.45 var(--f-tekst);color:var(--inkt2)}
/* 'sinds 2005' als groot Oswald-cijfer (zoals '28' en 'RAL 7021' in 'In één oogopslag', offerte p2) */
.vd-kop__meta dd.vd-kop__jaar{font:300 1.75rem/1 var(--f-kop);letter-spacing:.04em;color:var(--inkt);font-variant-numeric:lining-nums}
.vd-held{position:relative;margin:10px -10px 8px;display:grid;justify-items:center;isolation:isolate}
.vd-held__zon{position:absolute;z-index:-1;left:50%;top:-8%;width:min(78%,520px);aspect-ratio:1;translate:-46% 0;border-radius:50%;background:var(--vd-zon)}
.vd-held__beeld{position:relative;width:100%}
.vd-held__beeld img{width:100%;height:auto}
.vd-held__mist{position:absolute;left:-6%;right:-6%;bottom:14%;height:20%;pointer-events:none;
  background:url('../../kit/svg/land/nevel.svg?v=caf49ff3') center bottom/100% 100% no-repeat;opacity:.7}
/* onderschrift tussen twee dubbele gouden lijnen met een ruit (de scheider van de offerte) */
.vd-held__onderschrift{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:14px;width:min(100%,560px);margin-top:4px;
  font:500 .875rem/1.45 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--vd-goudtekst);text-align:center}
.vd-held__tekst{flex:none;max-width:calc(100% - 2 * 54px)}
.vd-held__lijn{position:relative;flex:1;min-width:40px;height:5px;
  background:linear-gradient(var(--dgoud),var(--dgoud)) 0 0/100% 1px no-repeat,linear-gradient(rgba(var(--dgoud-rgb),.55),rgba(var(--dgoud-rgb),.55)) 0 4px/100% .6px no-repeat}
.vd-held__lijn::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;rotate:45deg;background:var(--goud);box-shadow:0 0 0 2px var(--vd-papier),0 0 0 2.6px var(--dgoud)}
.vd-held__lijn:first-child{background:linear-gradient(90deg,transparent,var(--dgoud) 70%) 0 0/100% 1px no-repeat,linear-gradient(90deg,transparent,rgba(var(--dgoud-rgb),.55) 70%) 0 4px/100% .6px no-repeat}
.vd-held__lijn:last-child{background:linear-gradient(270deg,transparent,var(--dgoud) 70%) 0 0/100% 1px no-repeat,linear-gradient(270deg,transparent,rgba(var(--dgoud-rgb),.55) 70%) 0 4px/100% .6px no-repeat}
.vd-held__lijn:first-child::after{right:-3px}.vd-held__lijn:last-child::after{left:-3px}
.vd-held__onderschrift .vd-nw{display:block}
.vd-held__onderschrift .vd-scheider{display:none}
@media (min-width:600px){.vd-held__onderschrift .vd-nw{display:inline}.vd-held__onderschrift .vd-scheider{display:inline;color:var(--dgoud)}}
@media (min-width:768px){.vd-held__onderschrift{width:min(100%,700px);font-size:.8125rem;letter-spacing:.24em}.vd-held__tekst{padding-left:.24em;white-space:nowrap}}
.vd-kop__onder{margin-top:6px}
@media (max-width:1023px){
  .vd-kop__raster{grid-template-columns:minmax(0,1fr)}
  .vd-kop__onder{display:contents}
  .vd-kop__tekst{order:1}.vd-kop__lead{order:2;margin-top:16px}.vd-kop__orn{order:3}.vd-kop__knoppen{order:4}.vd-held{order:5;margin-top:22px}.vd-kop__meta{order:6}
}
@media (max-width:767px){
  .vd-kop .s-container--vel{padding-inline:8px}
  .vd-kop__knoppen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .vd-kop__knoppen .s-knop{width:100%;padding-inline:10px}
  .vd-kop__lead{max-width:none}
}
@media (max-width:389px){.vd-kop__knoppen{grid-template-columns:minmax(0,1fr)}.vd-kop__teken .vd-kalli{font-size:26px}}
@media (min-width:768px) and (max-width:1023px){.vd-held{margin-inline:0}.vd-held__beeld{max-width:640px}}
@media (min-width:1024px){
  .vd-kop__vel{padding:calc(var(--in) + 26px) calc(var(--in) + 40px) calc(var(--in) + 34px)}
  /* kruimelpad: binnenmarge = bandbreedte (96 px) + 24 px — optisch los van de meanderhoek */
  .vd-kop__tekst > .s-kruimel{margin:0 0 30px;padding-left:calc(var(--h) - var(--in) - 40px + 24px)}
  .vd-kop__raster{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .vd-kop__tekst{grid-column:1 / 7;grid-row:1;display:block}
  .vd-kop__kicker{margin-bottom:14px}
  .vd-kop__h1{margin:0}
  .vd-kop__teken{grid-column:auto;grid-row:auto;position:absolute;right:calc(var(--h) - 40px);top:0;flex-direction:column;gap:12px;z-index:3}
  .vd-kop__teken .vd-kalli{writing-mode:vertical-rl;font-size:64px;letter-spacing:.04em}
  .vd-kop__teken .s-zegel-svg{width:28px;height:28px}
  .vd-kop__onder{grid-column:1 / 6;grid-row:2;margin-top:26px}
  .vd-kop__orn{margin-top:24px;width:300px;background-size:100% 100%}
  .vd-kop__knoppen{margin-top:24px}
  /* de held-render ± 18 % groter: van kolom 6 tot vlak tegen de binnenrand van het kader (rechts ruimte voor 平安) */
  .vd-held{grid-column:6 / 13;grid-row:1 / 3;align-self:center;margin:34px calc(-1 * (var(--in) + 30px)) 0 -44px}
  .vd-held__beeld{width:112%;margin-left:-6%}
  .vd-held__zon{top:-12%;width:82%;translate:-44% 0}
  .vd-held__mist{bottom:16%}
  .vd-kop__meta{margin-top:30px}
}
@media (min-width:1280px){.vd-held{margin-right:calc(-1 * (var(--in) + 34px));margin-left:-56px}}

/* ================================================================ 4 DRIE ROLLEN — eigen, lichter kader (één lijn + binnenlijn, ruit in het midden) */
.vd-rollen{position:relative;margin:clamp(28px,4vw,48px) 0 0}
.vd-rollen__kader{position:relative;padding:34px 0 18px;box-shadow:inset 0 0 0 1px var(--lijn-goud-zacht),inset 0 0 0 5px var(--vd-papier),inset 0 0 0 5.5px rgba(var(--dgoud-rgb),.22)}
.vd-rollen__kop{position:absolute;left:50%;top:0;translate:-50% -50%;width:max-content;display:flex;align-items:center;gap:12px;margin:0;padding:0 16px;background:var(--vd-papier);white-space:nowrap}
.vd-rollen__kop .s-kicker{margin:0}
.vd-rollen__kop em{font:italic 400 1.125rem/1 var(--f-serif);color:var(--grijs1)}
.vd-rollen__baan{display:flex;gap:26px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:13%;
  padding:6px 13% 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vd-rollen__baan::-webkit-scrollbar{display:none}
.vd-rol{position:relative;flex:0 0 min(74%,300px);scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;outline-offset:6px}
.vd-rol__stok{position:relative;z-index:3;width:calc(100% + 12px);height:11px;border-radius:6px;flex:none;
  background:linear-gradient(180deg,#6B5440 0%,#3E2F24 55%,#2A1F18 100%);box-shadow:0 1px 0 rgba(255,240,210,.25) inset,0 3px 4px rgba(var(--inkt-rgb),.2)}
.vd-rol__stok::before,.vd-rol__stok::after{content:"";position:absolute;top:50%;width:11px;height:17px;margin-top:-8.5px;border-radius:3px;
  background:linear-gradient(180deg,#EBD08C,#B08A32);box-shadow:0 0 0 1px rgba(var(--inkt-rgb),.35)}
.vd-rol__stok::before{left:-6px}.vd-rol__stok::after{right:-6px}
.vd-rol__vel{position:relative;display:flex;flex-direction:column;width:100%;padding:10px 10px 0;
  background:linear-gradient(180deg,#F7F2E7,#EDE3CE);box-shadow:inset 0 0 0 1px rgba(var(--dgoud-rgb),.3),0 14px 26px -16px rgba(var(--inkt-rgb),.4)}
.vd-rol__vel::before{content:"";position:absolute;inset:4px;border:1px solid rgba(var(--dgoud-rgb),.22);pointer-events:none}
/* alle drie dezelfde behandeling: vignet op rijstpapier, onderwerp vrij met lucht rondom, binnenlijn boven het beeld */
.vd-rol__plaat{position:relative;display:block;aspect-ratio:1;overflow:hidden;isolation:isolate;
  background:var(--vd-papier) url('../../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/512px 512px}
.vd-rol__plaat::after{content:"";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 1px rgba(var(--dgoud-rgb),.45);pointer-events:none}
.vd-rol__plaat picture,.vd-rol__plaat img{display:block;width:100%;height:100%}
.vd-rol__plaat img{transition:transform 1.1s var(--s-ease-inkt)}
.vd-rol__label{position:relative;display:grid;justify-items:center;gap:4px;padding:26px 6px 16px;text-align:center}
.vd-zegelnr--rol{position:absolute;left:50%;top:0;translate:-50% -50%;z-index:3}
.vd-rol__titel{font:500 1rem/1.1 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--inkt);padding-left:.24em}
.vd-rol__sub{font:italic 400 1.0625rem/1.25 var(--f-serif);color:var(--grijs1)}
.vd-rol:hover .vd-rol__plaat img,.vd-rol:focus-visible .vd-rol__plaat img{transform:scale(1.035)}
.vd-rol:hover .vd-rol__titel{color:var(--vd-goudtekst)}
.vd-rollen__stippen{display:flex;justify-content:center;gap:10px;margin-top:2px}
.vd-rollen__stippen i{width:7px;height:7px;rotate:45deg;border:1px solid var(--dgoud);transition:background .3s var(--ease)}
.vd-rollen__stippen i.is-actief{background:var(--dgoud)}
@media (min-width:768px){
  .vd-rollen__kader{padding:40px 40px 22px}
  .vd-rollen__baan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);overflow:visible;padding:6px 0 10px;margin-inline:auto;max-width:960px}
  .vd-rol{flex:none}
  .vd-rollen__stippen{display:none}
}
/* mobiel: drie kleine rollen naast elkaar (geen carrousel, geen afgesneden kaart) — vignet + zegel + titel */
@media (max-width:767px){
  .vd-rollen__kader{padding:28px 8px 14px}
  .vd-rollen__baan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;overflow:visible;scroll-snap-type:none;padding:4px 6px 2px}
  .vd-rol{flex:none}
  .vd-rol__stok{width:calc(100% - 6px);height:8px;border-radius:4px}
  .vd-rol__stok::before,.vd-rol__stok::after{width:6px;height:12px;margin-top:-6px;border-radius:2px}
  .vd-rol__stok::before{left:-5px}.vd-rol__stok::after{right:-5px}
  .vd-rol__vel{padding:5px 5px 0}
  .vd-rol__vel::before{inset:3px}
  .vd-rol__label{padding:17px 0 10px;gap:0}
  .vd-zegelnr--rol{width:24px;height:24px;font-size:17px}
  .vd-rol__titel{font-size:.875rem;letter-spacing:.06em;padding-left:.06em}
  .vd-rol__sub{display:none}
  .vd-rollen__stippen{display:none}
  .vd-rollen__kop{gap:8px;padding:0 10px}
}
@media (max-width:389px){.vd-rollen__baan{gap:14px;padding-inline:4px}.vd-rol__titel{letter-spacing:.03em;padding-left:0}}

/* ================================================================ 5 OVERGANGEN — doorlopende inktbergen (a/b/c) of een dubbele lijn met ruit */
.vd-overgang{position:relative;height:calc(var(--vd-sectie) * 1.15);overflow:hidden;pointer-events:none}
.vd-overgang__bergen{position:absolute;inset:0 -2%;opacity:.55;background:url('../../beeld/voorstel-diensten/vd-bergen-a-1440.webp?v=183423fb') center bottom/auto 100% no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  transform:translate3d(0,var(--vd-par,0px),0)}
.vd-overgang--b .vd-overgang__bergen{background-image:url('../../beeld/voorstel-diensten/vd-bergen-b-1440.webp?v=f9e392a9')}
.vd-overgang--c .vd-overgang__bergen{background-image:url('../../beeld/voorstel-diensten/vd-bergen-c-1440.webp?v=d9998444');opacity:.48}
@media (min-width:1024px) and (min-resolution:1.5dppx){
  .vd-overgang__bergen{background-image:url('../../beeld/voorstel-diensten/vd-bergen-a-2880.webp?v=e3acef81')}
  .vd-overgang--b .vd-overgang__bergen{background-image:url('../../beeld/voorstel-diensten/vd-bergen-b-2880.webp?v=5a717771')}
  .vd-overgang--c .vd-overgang__bergen{background-image:url('../../beeld/voorstel-diensten/vd-bergen-c-2880.webp?v=36024b46')}
}
@media (max-width:767px){.vd-overgang{height:96px}.vd-overgang__bergen{background-size:auto 112%}}
.vd-overgang--lijn{display:grid;place-items:center;height:calc(var(--vd-sectie) * .9)}
.vd-overgang--kort{height:calc(var(--vd-sectie) * .6)}
.vd-ornament{position:relative;display:block;width:min(560px,74vw);height:14px}
.vd-ornament::before,.vd-ornament::after{content:"";position:absolute;top:50%;width:calc(50% - 18px);height:4px;margin-top:-2px;
  background:linear-gradient(var(--dgoud),var(--dgoud)) 0 0/100% 1px no-repeat,linear-gradient(rgba(var(--dgoud-rgb),.5),rgba(var(--dgoud-rgb),.5)) 0 3px/100% .5px no-repeat}
.vd-ornament::before{left:0;-webkit-mask:linear-gradient(90deg,transparent,#000 40%);mask:linear-gradient(90deg,transparent,#000 40%)}
.vd-ornament::after{right:0;-webkit-mask:linear-gradient(270deg,transparent,#000 40%);mask:linear-gradient(270deg,transparent,#000 40%)}
.vd-ornament{background:linear-gradient(45deg,transparent 45%,var(--goud) 45% 55%,transparent 55%) center/0 0 no-repeat}
.vd-ornament{--r:9px}
.vd-overgang--lijn .vd-ornament{background:none}
.vd-overgang--lijn .vd-ornament > *{display:none}
.vd-overgang--lijn::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;rotate:45deg;background:var(--goud);
  box-shadow:0 0 0 3px var(--vd-papier),0 0 0 4px var(--dgoud),0 0 0 7px var(--vd-papier),0 0 0 7.5px rgba(var(--dgoud-rgb),.5)}
.vd-overgang--tak .vd-overgang__tak{position:absolute;right:max(0px,calc(50% - 640px));top:0;width:clamp(150px,22vw,300px);aspect-ratio:700/530;opacity:.8;
  background:url('../../kit/afgeleid/tak-web.webp?v=e852fe12') right top/contain no-repeat}
@media (max-width:767px){.vd-overgang--tak .vd-overgang__tak{width:130px;opacity:.6}}

/* ================================================================ 6 HOOFDSTUK + TITELBLOK — basis + varianten (in beeld · kader · midden · smal) */
.vd-hfst{position:relative;padding:0;scroll-margin-top:24px}
.vd-rubriek{display:flex;align-items:center;gap:12px;margin:0;min-width:0}
.vd-rubriek .s-kicker{margin:0}
.vd-rubriek__nr{font:500 .875rem/1 var(--f-mono);letter-spacing:.04em;color:var(--vd-goudtekst);font-variant-numeric:tabular-nums;white-space:nowrap}
.vd-h2{margin:0}
.vd-h2 em{display:block;margin-top:.04em}
.vd-titelblok{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0 0 clamp(28px,3vw,44px)}
.vd-titelblok__teken{position:absolute;right:0;top:-6px;font-size:58px;opacity:.9;mix-blend-mode:multiply;pointer-events:none}
.vd-titelblok__kop{display:grid;gap:12px;min-width:0}
.vd-titelblok .vd-rubriek{padding-right:70px}
.vd-titelblok__lead{margin:4px 0 0;padding-left:18px;border-left:1px solid var(--goud);max-width:40ch}
/* bewijsregel: mobiel onder elkaar met ruit; desktop op één regel — een scheider aan het regelbegin valt buiten de clip */
.vd-bewijs{list-style:none;display:grid;gap:4px;margin:2px 0 0;padding:0;font:500 .9375rem/1.45 var(--f-mono);color:var(--grijs1)}
.vd-bewijs li{display:flex;align-items:center;gap:10px}
.vd-bewijs li::before{content:"";width:6px;height:6px;rotate:45deg;background:var(--goud);flex:none}
@media (min-width:768px){
  .vd-h2 .vd-br{display:none}
  .vd-bewijs{display:flex;flex-wrap:wrap;gap:2px 0;font-size:.875rem;margin-left:-1.6em;clip-path:inset(0 0 0 1.6em)}
  .vd-bewijs li{white-space:nowrap;gap:0}
  .vd-bewijs li::before{content:"·";width:1.6em;height:auto;rotate:none;background:none;text-align:center;color:var(--dgoud)}
  .vd-titelblok__teken{font-size:80px}
}
@media (min-width:1024px){
  .vd-titelblok--drie{grid-template-columns:132px minmax(0,1fr) minmax(300px,.78fr);column-gap:32px;align-items:start}
  .vd-titelblok--drie > .vd-titelblok__teken{position:relative;right:auto;top:-10px;font-size:120px;width:132px;text-align:left;margin-left:-6px}
  .vd-titelblok .vd-rubriek{padding-right:0}
  .vd-titelblok--drie .vd-titelblok__lead{margin:34px 0 0;padding-left:24px}
}
/* --midden: teken boven, alles op één as */
.vd-titelblok--midden{justify-items:center;text-align:center}
.vd-titelblok--midden > .vd-titelblok__teken{position:static;font-size:72px;margin:0 0 -4px}
.vd-titelblok--midden .vd-rubriek{justify-content:center;padding-right:0}
.vd-titelblok--midden .vd-bewijs{justify-content:center;justify-items:center}
.vd-titelblok--midden .vd-titelblok__lead{border-left:0;padding-left:0;margin-inline:auto;max-width:46ch;text-align:center}
.vd-titelblok--midden .vd-titelblok__lead::before{content:"";display:block;width:56px;height:1px;margin:0 auto 14px;background:var(--goud)}
@media (min-width:1024px){
  .vd-titelblok--midden{grid-template-columns:minmax(0,1fr)}
  .vd-titelblok--midden > .vd-titelblok__teken{width:auto;margin:0 0 -6px;font-size:96px;text-align:center}
  .vd-titelblok--midden .vd-titelblok__lead{margin-top:10px}
}
.vd-titelblok--compact{margin-bottom:clamp(20px,2.4vw,32px)}
/* titelblok met .vd-teken: teken in de rechterkolom, bovenkant op de kicker-regel; kop en lead lopen eronder door */
.vd-titelblok:has(> .vd-teken),.vd-titelkaart{grid-template-columns:minmax(0,1fr) auto;column-gap:16px}
.vd-titelblok > .vd-teken,.vd-titelkaart > .vd-teken{grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:start;margin-top:-6px}
.vd-titelblok:has(> .vd-teken) > :not(.vd-teken),.vd-titelkaart > :not(.vd-teken){grid-column:1 / -1}
.vd-titelblok:has(> .vd-teken) > .vd-rubriek,.vd-titelkaart > .vd-rubriek{grid-column:1;grid-row:1}
.vd-titelblok:has(> .vd-teken) > .vd-h2,.vd-titelkaart > .vd-h2{grid-column:1;grid-row:2}
.vd-titelblok:has(> .vd-teken) .vd-rubriek{padding-right:0}
@media (max-width:767px){.vd-titelblok__lead{max-width:none}}

/* ================================================================ 7 ITEMS — ruit + icoon (geen nummers), titel, tekst */
.vd-items{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;
  border-top:1px solid transparent;border-image:var(--vd-haar) 1}
.vd-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;padding:20px 0 6px}
.vd-item__merk{display:flex;align-items:center;gap:12px;margin-bottom:10px;color:var(--dgoud)}
.vd-item__merk .s-ico{width:22px;height:22px;display:block}
.vd-item__merk::after{content:"";width:24px;height:1px;background:var(--lijn-goud);order:3}
.vd-item__merk .s-ico{order:2}
.vd-item__moment{font:500 .875rem/1.3 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--vd-goudtekst);margin:0 0 4px}
.vd-item__titel{margin:0 0 6px;font:500 1rem/1.25 var(--f-kop);letter-spacing:.1em;text-transform:uppercase;color:var(--inkt)}
.vd-item p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--grijs1);max-width:38ch;text-wrap:pretty}
/* mobiel: compacte lijst — smalle kolom links met ruit en icoon onder elkaar, tekst over de volle breedte */
@media (max-width:899px){
  .vd-items{border-image:none;border-top:1px solid rgba(var(--dgoud-rgb),.3)}
  :is(.vd-item,.vd-praktijk__lijst > li){display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;padding:16px 0 15px;border-bottom:1px solid rgba(var(--dgoud-rgb),.2)}
  :is(.vd-item,.vd-praktijk__lijst > li):last-child{border-bottom:0}
  :is(.vd-item,.vd-praktijk__lijst > li) > .vd-item__merk{grid-column:1;grid-row:1 / span 3;flex-direction:column;gap:9px;margin:3px 0 0}
  :is(.vd-item,.vd-praktijk__lijst > li) > .vd-item__merk::after{width:1px;height:16px;background:linear-gradient(180deg,var(--lijn-goud),transparent)}
  :is(.vd-item,.vd-praktijk__lijst > li) > :not(.vd-item__merk){grid-column:2}
  .vd-item__titel{margin-bottom:4px}
  .vd-item p{max-width:none}
}
@media (min-width:900px){
  .vd-items{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vd-item{padding:28px 28px 6px}
  .vd-item:first-child{padding-left:0}.vd-item:last-child{padding-right:0}
  .vd-item + .vd-item::before{content:"";position:absolute;left:0;top:28px;bottom:0;width:1px;background:linear-gradient(180deg,var(--lijn-goud),transparent)}
  .vd-item__merk{margin-bottom:16px}
  .vd-item__titel{margin:0 0 8px}
}
/* --tijdlijn (kwaliteit): vooraf · tijdens · daarna aan één gestippelde gouden lijn; de ruit staat op de lijn */
.vd-items--tijdlijn{position:relative;border:0;border-image:none}
.vd-items--tijdlijn::before{content:"";position:absolute;pointer-events:none;border:0 dotted var(--goud)}
.vd-items--tijdlijn .vd-item__merk{position:relative;z-index:1}
.vd-items--tijdlijn .vd-ruit{width:9px;height:9px;box-shadow:0 0 0 3px var(--vd-papier),0 0 0 4px var(--dgoud),0 0 0 7px var(--vd-papier)}
@media (max-width:899px){
  .vd-items--tijdlijn::before{left:14.5px;top:26px;bottom:44px;border-left-width:1.6px}
  .vd-items--tijdlijn .vd-item{border-bottom:0;padding-block:12px 14px}
  .vd-items--tijdlijn .vd-item__merk{background:var(--vd-papier);padding-bottom:4px}
  .vd-items--tijdlijn .vd-item__merk::after{display:none}
}
@media (min-width:900px){
  .vd-items--tijdlijn::before{left:0;right:0;top:11px;border-top-width:1.6px;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
  .vd-items--tijdlijn .vd-item{padding-top:0}
  .vd-items--tijdlijn .vd-item + .vd-item::before{top:44px}
  .vd-items--tijdlijn .vd-item__merk{width:max-content;padding-right:14px;background:var(--vd-papier);margin-bottom:18px}
  .vd-items--tijdlijn .vd-item + .vd-item .vd-item__merk{margin-left:-4px;padding-left:4px}
  .vd-items--tijdlijn .vd-item__merk::after{display:none}
}
.vd-verder{display:flex;justify-content:flex-end;margin:clamp(14px,2vw,22px) 0 0}
@media (max-width:899px){.vd-verder{justify-content:flex-start}}
.vd-verder--midden{justify-content:center!important;margin-top:clamp(20px,2.4vw,32px)}

/* ================================================================ 8 SOURCING — volle plaat: render vóór een zon, bergen en mist; de kop als kaart */
.vd-plaat{position:relative;isolation:isolate;margin-bottom:clamp(22px,3vw,40px)}
.vd-zon--plaat{left:50%;top:-6%;width:min(86%,420px);translate:-40% 0}
.vd-plaat__bergen{position:absolute;z-index:-1;left:-6%;right:-6%;top:22%;height:52%;opacity:.42;pointer-events:none;
  background:url('../../beeld/voorstel-diensten/vd-bergen-c-1440.webp?v=d9998444') 40% 100%/auto 100% no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.vd-scene{position:relative;margin:0;display:grid;justify-items:center;isolation:isolate}
.vd-scene picture,.vd-scene img{position:relative;z-index:2;display:block;width:100%;height:auto}
.vd-scene .vd-voetmist{z-index:3;bottom:-6%;height:22%;opacity:.7}
/* titelkaart: rijstpapier met dubbele goudlijn en meanderhoekjes (als de totaal-cartouche op de offerte-cover) */
.vd-titelkaart{position:relative;z-index:4;display:grid;row-gap:12px;align-content:start;margin:-26px 4px 0;padding:24px 22px 24px;
  background:var(--vd-papier) url('../../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/512px 512px;
  box-shadow:inset 0 0 0 1px var(--dgoud),inset 0 0 0 5px var(--vd-papier),inset 0 0 0 5.6px rgba(var(--dgoud-rgb),.55),0 22px 40px -26px rgba(var(--inkt-rgb),.45)}
.vd-titelkaart::before{content:"";position:absolute;inset:0;pointer-events:none;--k:30px;background:
  url('../../beeld/voorstel-diensten/vd-hoek-lb.svg?v=1cf0a472') 0 0/var(--k) var(--k) no-repeat,
  url('../../beeld/voorstel-diensten/vd-hoek-rb.svg?v=81719ffc') 100% 0/var(--k) var(--k) no-repeat,
  url('../../beeld/voorstel-diensten/vd-hoek-lo.svg?v=acedc0e6') 0 100%/var(--k) var(--k) no-repeat,
  url('../../beeld/voorstel-diensten/vd-hoek-ro.svg?v=cef56888') 100% 100%/var(--k) var(--k) no-repeat}
.vd-titelkaart > .vd-teken{margin-top:-4px}
.vd-titelkaart__lead{margin:2px 0 0;padding-top:14px;border-top:1px solid transparent;border-image:linear-gradient(90deg,var(--lijn-goud),transparent) 1;
  font:italic 400 1.1875rem/1.45 var(--f-serif);color:var(--inkt2)}
@media (min-width:768px){.vd-titelkaart{margin:-60px auto 0;width:min(560px,86%);padding:32px 34px 30px}}
@media (min-width:1024px){
  .vd-plaat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding-bottom:12px}
  .vd-zon--plaat{left:auto;right:12%;top:-4%;width:min(50%,560px);translate:none}
  .vd-plaat__bergen{top:16%;height:58%;left:-4%;right:-4%}
  .vd-scene--sourcing{grid-column:3 / 13;grid-row:1;margin-right:-16px}
  .vd-titelkaart{grid-column:1 / 6;grid-row:1;align-self:end;width:auto;margin:0 0 -64px -8px;padding:36px 40px 34px}
  .vd-titelkaart::before{--k:40px}
  .vd-sourcing .vd-items{margin-top:72px}
}
@media (min-width:1280px){.vd-titelkaart{margin-left:-16px}}

/* ================================================================ 9 KWALITEIT — gespiegeld: render links vóór een bleke zon, kop + controle rechts, in één kader */
.vd-tafel{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:0 0 clamp(24px,3vw,40px);
  padding:calc(var(--in) + 18px) calc(var(--in) + 10px) calc(var(--in) + 22px);background:rgba(var(--rijst-rgb),.5)}
.vd-tafel__beeld{position:relative;margin:0;isolation:isolate;order:2}
.vd-zon--tafel{left:50%;top:-10%;width:min(74%,480px);translate:-50% 0;background:var(--vd-zon-bleek)}
.vd-tafel__render{position:relative;z-index:2;display:block}
.vd-tafel__render img{display:block;width:100%;height:auto}
.vd-voetmist--tafel{bottom:calc(1.45em * 2 + 10px);height:22%;z-index:3;opacity:.75}
.vd-tafel__maten{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vd-maat path{fill:none;stroke:var(--dgoud);stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round}
.vd-maatlabel{position:absolute;z-index:2;translate:-50% -50%;padding:2px 8px;background:var(--vd-papier);font:500 .875rem/1.25 var(--f-mono);
  font-variant-numeric:tabular-nums;color:var(--inkt);white-space:nowrap;box-shadow:0 0 0 1px rgba(var(--dgoud-rgb),.45)}
.vd-maatlabel--h{translate:-20% -50%}
.vd-tafel__code{position:absolute;z-index:2;translate:-50% -50%}
.vd-tafel__bijschrift{position:relative;z-index:4;margin-top:6px;text-align:center}
@media (max-width:767px){.vd-maatlabel{display:none}}
.vd-tafel__tekst{position:relative;align-self:center;order:1}
.vd-titelblok--kader{display:grid;gap:12px;margin:0 0 22px}
.vd-tafel__lead{margin:2px 0 0;font:italic 400 1.1875rem/1.42 var(--f-serif);color:var(--grijs1);max-width:36ch;text-wrap:pretty}
.vd-tafel__titel{margin:0 0 14px;padding:16px 0 12px;border-top:1px solid transparent;border-image:linear-gradient(90deg,var(--lijn-goud),transparent) 1;
  font:500 1rem/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.vd-tafel__t1{margin:0 0 16px;font-size:.9375rem;line-height:1.55;color:var(--inkt2);max-width:40ch}
.vd-check{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.vd-check li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:center;font-size:.9375rem;line-height:1.4;color:var(--inkt2)}
.vd-check svg{width:26px;height:26px;overflow:visible}
.vd-check circle{fill:rgba(var(--goud-rgb),.12);stroke:var(--goud);stroke-width:1.2}
.vd-check path{fill:none;stroke:var(--dgoud);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* controleregel = de vaste zin (één keer op de pagina); het zegel 诚信 ernaast, niet erover */
.vd-tafel__controle{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid rgba(var(--dgoud-rgb),.3);
  font:500 1rem/1.5 var(--f-tekst);color:var(--inkt)}
.vd-tafel__zegel{flex:none;rotate:-4deg;line-height:0}
@media (max-width:1023px){
  /* mobiel: kop → beeld → controle, zodat het beeld de tekst breekt */
  .vd-tafel__tekst{display:contents}
  .vd-titelblok--kader{order:1;margin:0}
  .vd-tafel__beeld{order:2;margin-inline:-6px}
  .vd-tafel__titel{order:3;margin:0}.vd-tafel__t1{order:4;margin:-6px 0 0}.vd-check{order:5}.vd-tafel__controle{order:6;margin-top:0}
  .vd-tafel{row-gap:16px}
  .vd-tafel__lead,.vd-tafel__t1{max-width:none}
}
@media (min-width:1024px){
  .vd-tafel{grid-template-columns:minmax(0,7fr) minmax(0,4.8fr);gap:48px;padding:calc(var(--in) + 34px) calc(var(--in) + 40px) calc(var(--in) + 32px)}
  .vd-tafel__beeld{order:1;align-self:center}
  .vd-tafel__tekst{order:2}
}

/* ================================================================ 10 ZEE — het schip op het water: korte spiegeling (± 90 px), golven in twee lagen, parallax ± 12 px */
.vd-zee{--kap:.82;--w:calc(var(--water) / var(--kap));position:relative;margin:clamp(-8px,-1vw,0px) 0 0;isolation:isolate;
  transform:translate3d(0,var(--vd-zweef,0px),0)}
@media (max-width:767px){.vd-zee{--kap:.87;--w:calc(var(--water-m) / var(--kap))}}
/* de uitsnede houdt de spiegeling kort; het beeld zelf vervaagt onder de waterlijn snel naar het papier */
.vd-zee__vaart{position:relative;z-index:1;display:block;width:100%;margin-inline:auto;aspect-ratio:2399/1333;overflow:hidden}
@media (max-width:767px){.vd-zee__vaart{aspect-ratio:1257/842}}
.vd-zee__beeld,.vd-zee__beeld img{display:block;width:100%;height:auto}
.vd-zee__beeld img{-webkit-mask:linear-gradient(180deg,#000 calc(var(--water) * 100% + .4%),rgba(0,0,0,.5) calc(var(--water) * 100% + 4%),transparent calc(var(--kap) * 100% - .5%));
  mask:linear-gradient(180deg,#000 calc(var(--water) * 100% + .4%),rgba(0,0,0,.5) calc(var(--water) * 100% + 4%),transparent calc(var(--kap) * 100% - .5%))}
@media (max-width:767px){.vd-zee__beeld img{--water:var(--water-m)}}
@media (min-width:1024px){.vd-zee__vaart{width:94%}}
.vd-golven{position:absolute;left:0;right:0;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.vd-golven i{position:absolute;left:-84px;right:-84px;height:12px;background-repeat:repeat-x;background-size:84px 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 12' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q21 3 42 8 T84 8' fill='none' stroke='%232B2724' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E")}
/* achterlaag: het water naast en achter de romp, vanaf net boven de waterlijn */
.vd-golven--achter{z-index:0;top:calc(var(--w) * 100% - 4%);height:16%}
.vd-golven--achter i:nth-child(1){top:0;opacity:.26;background-size:120px 100%;left:-120px}
.vd-golven--achter i:nth-child(2){top:46%;opacity:.2}
/* voorlaag: alleen onder de waterlijn, over de korte spiegeling */
.vd-golven--voor{z-index:2;top:calc(var(--w) * 100% + 1.5%);bottom:0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 50%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 50%,transparent);mask-composite:intersect}
.vd-golven--voor i:nth-child(1){top:14%;opacity:.2}
.vd-golven--voor i:nth-child(2){top:44%;opacity:.13;background-size:110px 100%;left:-110px}
.vd-golven--voor i:nth-child(3){top:72%;opacity:.08;background-size:140px 100%;left:-140px}

/* ================================================================ 11 KAART (desktop, als spread) + REIS (mobiel) */
.vd-kaart{position:relative;margin:0 0 clamp(18px,3vw,36px)}
@media (min-width:768px){.vd-kaart{margin-top:-6px}}
.vd-kaart__spread{display:none}
.vd-kaart__vel{position:relative;aspect-ratio:var(--kw)/var(--kh);container-type:inline-size}
.vd-kaart__land{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.vd-kaart__lijnen{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vd-kaart__vel > :where(span),.vd-kaart__loep{position:absolute;translate:-50% -50%}
.vd-kaart__kompas{width:64px;height:68px}
.vd-kaart__kompas svg{width:100%;height:100%;overflow:visible}
.vd-kaart__naald{transform-origin:0 0}
.vd-kaart__foshan{width:28px;height:28px;z-index:2}
.vd-kaart__ring,.vd-loep__plek .vd-kaart__ring{position:absolute;inset:-7px;border-radius:50%;border:1.2px solid var(--goud)}
.vd-kaart__zegel{position:absolute;inset:4px;background:url('../../kit/svg/zegel/leeg.svg?v=648606df') center/100% 100% no-repeat;rotate:-4deg}
.vd-kaart__lab{display:grid;gap:2px;white-space:nowrap;pointer-events:none;z-index:2;
  text-shadow:0 0 3px var(--vd-papier),0 0 3px var(--vd-papier),0 0 6px var(--vd-papier),0 0 10px var(--vd-papier)}
.vd-kaart__lab b{font:500 .9375rem/1.1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.vd-kaart__lab small{font:500 .75rem/1.1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--vd-goudtekst)}
.vd-kaart__lab span{font:400 1.375rem/1 "Noto Serif SC",var(--f-zh);color:var(--rood);letter-spacing:.2em}
/* Foshan: rechts uitgelijnd op een rijstpapier-plaatje (de kustlijn loopt nooit door de tekst), 30 px links van de marker */
.vd-kaart__lab--foshan{translate:calc(-100% - 30px) -50%;text-align:right;justify-items:end;padding:7px 11px 8px;text-shadow:none;
  background:rgba(var(--rijst-rgb),.94);box-shadow:inset 0 0 0 1px rgba(var(--dgoud-rgb),.6),0 3px 10px -4px rgba(var(--inkt-rgb),.25)}
.vd-kaart__zeelab{translate:-50% -50%;font:italic 400 1rem/1 var(--f-serif);color:var(--grijs1);white-space:nowrap;opacity:.9;
  text-shadow:0 0 4px var(--vd-papier),0 0 6px var(--vd-papier)}
.vd-kaart__schip{left:calc(var(--ux) / var(--kw) * 100%);top:calc(var(--uy) / var(--kh) * 100%);width:54px;height:30px;translate:-50% -78%;z-index:3;
  transform:rotate(var(--hoek,0deg)) scaleX(var(--zijde,1));transition:none}
.vd-kaart__schip svg{width:100%;height:100%;overflow:visible}
.vd-kaart__loep{left:var(--lx);top:var(--ly);width:calc(var(--lr) * 2% + 1%);aspect-ratio:1;margin:0;z-index:2;filter:drop-shadow(0 6px 14px rgba(var(--inkt-rgb),.16))}
.vd-kaart__loep img,.vd-reis__loep img{display:block;width:100%;height:100%}
.vd-loep__titel{position:absolute;left:50%;top:-2px;translate:-50% -100%;font:500 .8125rem/1 var(--f-kop);letter-spacing:.32em;text-transform:uppercase;color:var(--vd-goudtekst);
  background:var(--vd-papier);padding:3px 8px 3px calc(8px + .32em)}
/* loeplabels: altijd binnen de loep (≥ 12 px van de rand), met papiergloed; richting per label */
.vd-loep__lab{position:absolute;translate:12px -50%;font:500 .8125rem/1.15 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt);white-space:nowrap;
  text-shadow:0 0 3px var(--vd-papier),0 0 3px var(--vd-papier),0 0 6px var(--vd-papier)}
.vd-loep__lab--l{translate:calc(-100% - 12px) -50%}
.vd-loep__lab--lb{translate:calc(-100% - 14px) -112%}
.vd-loep__lab--o{translate:-24px calc(-100% - 11px)}
.vd-loep__lab--rood{color:var(--rood)}
.vd-loep__lab--dsd{color:var(--vd-goudtekst)}
.vd-loep__lab--l.vd-loep__lab--dsd{translate:calc(-100% + 10px) 7px;text-shadow:0 0 3px var(--vd-papier),0 0 3px var(--vd-papier),0 0 5px var(--vd-papier),0 0 8px var(--vd-papier),0 0 12px var(--vd-papier)}
.vd-loep__lab--waaier{translate:0 -50%;font-size:.75rem;color:var(--grijs1)}
.vd-loep__waaier{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vd-loep__waaier path{fill:none;stroke:var(--dgoud);stroke-width:.9;vector-effect:non-scaling-stroke}
.vd-loep__waaier circle{fill:#D9B45C;stroke:var(--dgoud);stroke-width:.8}
.vd-loep__plek{position:absolute;width:20px;height:20px;translate:-50% -50%}
/* delta-steden: eigen gouden cartouche links naast de China-loep, op de hoogte van Foshan */
.vd-kaart__vel > .vd-kaart__delta{translate:-100% -50%;display:grid;gap:3px;padding:9px 13px 10px;z-index:2;white-space:nowrap;text-align:right;
  background:rgba(var(--rijst-rgb),.94);box-shadow:inset 0 0 0 1px var(--dgoud),inset 0 0 0 3.5px rgba(var(--rijst-rgb),1),inset 0 0 0 4px rgba(var(--dgoud-rgb),.5)}
.vd-kaart__delta b{font:500 .75rem/1.1 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--vd-goudtekst)}
.vd-kaart__delta span{font:italic 400 1rem/1.25 var(--f-serif);color:var(--inkt2)}
.vd-kaart__delta i{display:block;font-style:inherit}
.vd-kaart__cartouche{position:absolute;left:1.6%;bottom:3%;display:grid;gap:4px;max-width:192px;padding:12px 15px;background:rgba(var(--rijst-rgb),.94);z-index:2;
  box-shadow:inset 0 0 0 1px var(--dgoud),inset 0 0 0 4px rgba(var(--rijst-rgb),1),inset 0 0 0 4.5px rgba(var(--dgoud-rgb),.6)}
.vd-kaart__cartouche .s-mono{font-size:.75rem;letter-spacing:.16em;white-space:nowrap;text-transform:uppercase;color:var(--vd-goudtekst)}
.vd-kaart__cartouche span + span{font:italic 400 1rem/1.35 var(--f-serif);color:var(--inkt2)}
.vd-kaart__noot{display:none;margin-top:6px;text-align:center}
@media (min-width:768px){
  /* de kaart als dubbele spread: dubbel goud kader, een zachte vouw in het midden */
  .vd-kaart__spread{display:block;position:relative;padding:22px;background:rgba(var(--rijst-rgb),.45);
    box-shadow:inset 0 0 0 1px var(--dgoud),inset 0 0 0 4px var(--vd-papier),inset 0 0 0 4.5px rgba(var(--dgoud-rgb),.55)}
  .vd-kaart__spread::after{content:"";position:absolute;top:5px;bottom:5px;left:50%;width:80px;margin-left:-40px;pointer-events:none;
    background:linear-gradient(90deg,rgba(60,40,20,0),rgba(60,40,20,.05) 46%,rgba(255,250,236,.35) 50%,rgba(60,40,20,.04) 54%,rgba(60,40,20,0))}
  .vd-reis{display:none}
}
@container (max-width:900px){.vd-kaart__zeelab,.vd-kaart__cartouche{display:none}.vd-loep__lab{font-size:.75rem}}

/* reis (mobiel): verticale route; een gouden vulling loopt mee met de scroll (geen scheepje over de lijn) */
.vd-reis{--lijn-x:15px;position:relative;list-style:none;display:grid;gap:0;margin:4px 0 0;padding:0 0 0 44px}
.vd-reis::before{content:"";position:absolute;left:var(--lijn-x);top:14px;bottom:20px;width:0;border-left:2.4px dotted var(--goud);margin-left:-1.2px}
.vd-reis__vulling{position:absolute;left:var(--lijn-x);top:14px;bottom:20px;width:2.4px;margin-left:-1.2px;border-radius:2px;background:var(--dgoud);
  transform-origin:50% 0;transform:scaleY(var(--vd-p,1))}
.vd-reis__stop{position:relative;display:grid;gap:2px;padding:10px 0 14px}
.vd-reis__stop b{font:500 1rem/1.2 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;color:var(--inkt)}
.vd-reis__tekst{font-size:.9375rem;line-height:1.5;color:var(--grijs1)}
.vd-reis__zh{position:absolute;right:0;top:4px;font:400 1.5rem/1 "Noto Serif SC",var(--f-zh);color:var(--rood);letter-spacing:.1em}
.vd-reis__punt{position:absolute;z-index:1;left:calc(var(--lijn-x) - 44px);top:13px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--vd-papier);box-shadow:inset 0 0 0 1.5px var(--goud),inset 0 0 0 4px var(--vd-papier),inset 0 0 0 7px var(--goud)}
.vd-reis__stop--start .vd-reis__punt{width:24px;height:24px;margin-left:-12px;top:8px;border-radius:2px;box-shadow:0 0 0 4px var(--vd-papier),0 0 0 5.2px var(--goud);
  background:url('../../kit/svg/zegel/leeg.svg?v=648606df') center/100% 100% no-repeat}
.vd-reis__stop--land .vd-reis__punt{background:var(--inkt);box-shadow:0 0 0 3px var(--vd-papier),0 0 0 4.2px var(--goud)}
.vd-reis__stop--dsd .vd-reis__punt{rotate:45deg;border-radius:1px;background:var(--vd-papier);box-shadow:inset 0 0 0 1.5px var(--dgoud),inset 0 0 0 4px var(--vd-papier),inset 0 0 0 7px var(--dgoud)}
.vd-reis__stop--eind .vd-reis__punt{background:var(--rood);box-shadow:0 0 0 3px var(--vd-papier),0 0 0 4.5px var(--dgoud)}
.vd-reis__stop--eind b{color:var(--rood)}
/* mobiele loepen: gecentreerd in de tekstkolom, 260 px, met labels van 14 px */
.vd-reis__loep{position:relative;display:block;width:min(260px,100%);aspect-ratio:1;margin:16px auto 6px;translate:-22px 0;filter:drop-shadow(0 4px 10px rgba(var(--inkt-rgb),.14))}
.vd-reis__loep--nl{width:min(240px,100%)}
.vd-reis__loep .vd-loep__lab{font-size:.875rem;letter-spacing:.08em}
.vd-reis__loep--cn{margin-bottom:58px}
.vd-reis__delta{position:absolute;left:50%;top:calc(100% + 10px);translate:-50% 0;width:max-content;max-width:calc(100vw - 80px);text-align:center;
  font:500 .875rem/1.4 var(--f-mono);color:var(--grijs1);text-wrap:balance}
.vd-reis__delta span{display:block;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;color:var(--vd-goudtekst)}
@media (max-width:767px){.vd-kaart__noot{display:block}}
@media (min-width:768px){.vd-reis{display:none}}
@media (max-width:389px){.vd-reis__loep{width:min(236px,100%)}}
/* mobiel compacter: de zeereis is onderweg, geen hoofdstuk op zich */
@media (max-width:767px){.vd-reis__stop{padding:7px 0 9px}.vd-reis__loep{width:min(236px,100%);margin-top:12px}.vd-reis__loep--nl{width:min(216px,100%)}.vd-reis__loep--cn{margin-bottom:54px}}

/* citaat onder logistiek */
.vd-citaat{display:grid;justify-items:center;gap:6px;margin:clamp(30px,4vw,48px) auto 0;max-width:720px;text-align:center}
.vd-citaat .s-ornamentlijn{margin:0 0 6px}
.vd-citaat blockquote{margin:0}
.vd-citaat p{margin:0;font:italic 400 1.375rem/1.4 var(--f-serif);color:var(--inkt2);text-wrap:balance}
@media (min-width:768px){.vd-citaat p{font-size:1.75rem}}

/* ================================================================ 12 DAARNAAST — tekst | magazijn vóór een warme zon; zes munten op de stelling = legenda */
.vd-extra__kop{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center;margin-bottom:clamp(20px,3vw,40px)}
.vd-titelblok--smal{margin:0}
.vd-extra__plaat{position:relative;margin:0;display:grid;justify-items:center;isolation:isolate}
.vd-zon--magazijn{left:50%;top:-8%;width:min(76%,470px);translate:-50% 0;background:var(--vd-zon-warm)}
.vd-extra__stelling{position:relative;z-index:2;display:block;width:100%}
.vd-extra__stelling picture,.vd-extra__stelling img{display:block;width:100%;height:auto}
.vd-extra__plaat > .vd-voetmist{z-index:3;bottom:24px;height:20%}
.vd-extra__plaat figcaption{position:relative;z-index:4;margin-top:-6px}
/* munten op de stelling (niet klikbaar: de legenda eronder is de tekst); licht op bij hover/focus in de legenda */
.vd-mpins{position:absolute;inset:0;z-index:3}
.vd-mpin{position:absolute;left:var(--px);top:var(--py);translate:-50% -50%;width:30px;height:30px;font-size:.875rem;
  transition:scale .35s var(--s-ease-inkt),box-shadow .35s var(--ease)}
.vd-mpin.is-actief{scale:1.22;box-shadow:0 0 0 1.5px var(--dgoud),inset 0 0 0 3px rgba(255,248,226,.55),0 0 0 7px rgba(var(--goud-rgb),.28),0 4px 10px rgba(var(--inkt-rgb),.25)}
@media (max-width:767px){.vd-mpin{width:26px;height:26px}}
.vd-legenda{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;border-top:1px solid transparent;border-image:var(--vd-haar) 1}
.vd-legenda li{display:grid;align-content:start;grid-template-columns:30px minmax(0,1fr);column-gap:14px;padding:14px 0;border-bottom:1px solid rgba(var(--dgoud-rgb),.2);
  transition:background-color .3s var(--ease)}
.vd-legenda li:last-child{border-bottom:0}
.vd-legenda__munt{grid-row:1 / span 2;width:30px;height:30px;font-size:.875rem;margin-top:1px}
.vd-legenda__titel{grid-column:2;margin:5px 0 3px;font:500 .9375rem/1.25 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt)}
.vd-legenda p{grid-column:2;margin:0;font-size:.9375rem;line-height:1.55;color:var(--grijs1);text-wrap:pretty}
.vd-legenda li.is-actief .vd-legenda__titel{color:var(--vd-goudtekst)}
@media (max-width:1023px){.vd-extra__plaat{margin-top:6px}}
@media (min-width:1024px){
  .vd-extra__kop{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
  .vd-extra__plaat{margin-right:-12px}
  .vd-legenda{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:36px}
  .vd-legenda li{grid-template-columns:36px minmax(0,1fr);padding:22px 0 24px}
  .vd-legenda li:nth-child(n+4){border-bottom:0}
  .vd-legenda li:nth-child(3){border-bottom:1px solid rgba(var(--dgoud-rgb),.2)}
  .vd-legenda__munt{width:36px;height:36px;font-size:.9375rem;margin-top:0}
  .vd-legenda__titel{margin:8px 0 6px}
}

/* ================================================================ 13 WERKWIJZE — horizontale handrol met houten stokken; rolt open vanuit het midden */
.vd-handrol{position:relative;display:flex;align-items:stretch;max-width:1220px;margin:0 auto;padding-inline:4px}
.vd-handrol__stok{position:relative;z-index:3;flex:none;width:14px;border-radius:7px;
  background:linear-gradient(90deg,#6B5440 0%,#3E2F24 55%,#2A1F18 100%);box-shadow:inset 1px 0 0 rgba(255,240,210,.25),3px 0 6px rgba(var(--inkt-rgb),.18)}
.vd-handrol__stok::before,.vd-handrol__stok::after{content:"";position:absolute;left:50%;width:20px;height:12px;margin-left:-10px;border-radius:3px;
  background:linear-gradient(90deg,#EBD08C,#B08A32);box-shadow:0 0 0 1px rgba(var(--inkt-rgb),.35)}
.vd-handrol__stok::before{top:-8px}.vd-handrol__stok::after{bottom:-8px}
.vd-handrol__vel{position:relative;flex:1;min-width:0;margin-block:8px;
  background:linear-gradient(180deg,#F8F3E8,#EEE5D0);box-shadow:inset 0 0 0 1px rgba(var(--dgoud-rgb),.3),0 18px 30px -20px rgba(var(--inkt-rgb),.4)}
.vd-handrol__vel::before{content:"";position:absolute;inset:6px;border:1px solid rgba(var(--dgoud-rgb),.25);pointer-events:none;z-index:1}
.vd-handrol__baan{list-style:none;position:relative;display:flex;gap:0;margin:0;padding:30px 0 28px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.vd-handrol__baan::-webkit-scrollbar{display:none}
.vd-stap{position:relative;flex:0 0 82%;scroll-snap-align:center;display:grid;align-content:start;gap:6px;padding:0 22px}
.vd-stap + .vd-stap{border-left:1px solid transparent;border-image:linear-gradient(180deg,transparent,var(--lijn-goud) 18%,var(--lijn-goud) 82%,transparent) 1}
.vd-stap__kop{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:10px;color:var(--dgoud)}
.vd-stap__kop::after{content:"";flex:1;height:0;border-top:1.6px dotted var(--goud);order:3}
.vd-stap__ico{order:2;display:grid;place-items:center}
.vd-stap__ico .s-ico{width:22px;height:22px}
.vd-stap__moment{font:500 .875rem/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--vd-goudtekst)}
.vd-stap__titel{margin:0;font:400 1.375rem/1.2 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt)}
.vd-stap p{margin:4px 0 0;font-size:.9375rem;line-height:1.6;color:var(--grijs1);text-wrap:pretty}
.vd-handrol__stippen{display:flex;justify-content:center;gap:10px;margin-top:14px}
.vd-handrol__stippen i{width:7px;height:7px;rotate:45deg;border:1px solid var(--dgoud);transition:background .3s var(--ease)}
.vd-handrol__stippen i.is-actief{background:var(--dgoud)}
@media (min-width:768px){
  .vd-handrol{padding-inline:clamp(12px,3vw,40px)}
  .vd-handrol__baan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;padding:38px 14px 34px}
  .vd-stap{padding:0 26px}
  .vd-stap:last-child .vd-stap__kop::after{display:none}
  .vd-handrol__stippen{display:none}
}
@media (min-width:1024px){.vd-stap__moment{font-size:.75rem;letter-spacing:.26em}.vd-handrol__stok{width:16px}}
/* mobiel: de rol staat rechtop — stokken boven en onder, de vier stappen onder elkaar (geen carrousel) */
@media (max-width:767px){
  .vd-handrol{flex-direction:column;align-items:stretch;padding-inline:calc(var(--s-goot) - 4px)}
  .vd-handrol__stok{width:auto;height:13px;border-radius:7px;margin-inline:0;
    background:linear-gradient(180deg,#6B5440 0%,#3E2F24 55%,#2A1F18 100%);box-shadow:inset 0 1px 0 rgba(255,240,210,.25),0 3px 6px rgba(var(--inkt-rgb),.18)}
  .vd-handrol__stok::before,.vd-handrol__stok::after{top:50%;left:auto;width:12px;height:19px;margin:-9.5px 0 0;background:linear-gradient(180deg,#EBD08C,#B08A32)}
  .vd-handrol__stok::before{left:-7px}.vd-handrol__stok::after{right:-7px;bottom:auto}
  .vd-handrol__vel{margin:0 8px}
  .vd-handrol__baan{flex-direction:column;overflow:visible;scroll-snap-type:none;padding:8px 22px}
  .vd-stap{flex:none;padding:20px 0 22px}
  .vd-stap + .vd-stap{border-left:0;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,var(--lijn-goud) 14%,var(--lijn-goud) 86%,transparent) 1}
  .vd-stap__kop{margin-bottom:8px}
  .vd-handrol__stippen{display:none}
}

/* ================================================================ 14 IN DE PRAKTIJK — het huis groot; pins = gouden munten (36 px) */
.vd-praktijk__vel{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:calc(var(--in) + 22px) calc(var(--in) + 10px) calc(var(--in) + 24px)}
.vd-praktijk__kop{margin:0}
.vd-praktijk__beeld{position:relative;isolation:isolate}
.vd-praktijk__beeld::before{content:"";position:absolute;z-index:-1;inset:4% -4% 34% -4%;opacity:.4;pointer-events:none;
  background:url('../../beeld/voorstel-diensten/vd-bergen-b-1440.webp?v=f9e392a9') center 100%/auto 100% no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.vd-praktijk__huis{position:relative;max-width:1000px;margin-inline:auto}
.vd-praktijk__huis picture,.vd-praktijk__huis img{display:block;width:100%;height:auto}
/* de grondschaduw van de render loopt zacht uit naar het papier (geen rechte beeldrand links en rechts) */
.vd-praktijk__huis img{-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,#000 72%,transparent 99%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,#000 72%,transparent 99%);mask-composite:intersect}
.vd-praktijk__bijschrift{position:relative;margin-top:-5%;text-align:center}
.vd-klik{display:none}
@media (hover:hover) and (pointer:fine){.vd-tik{display:none}.vd-klik{display:inline}}
.vd-pins .s-pin{width:36px;height:36px;border:0;translate:-50% calc(-100% - 16px)}
.vd-pins .s-pin::before{height:16px;background:var(--dgoud)}
.vd-pins .s-pin::after{inset:-4px -4px -20px}
.vd-pins .vd-pin--onder{translate:-50% 16px}
.vd-pins .vd-pin--onder::before{top:auto;bottom:100%}
.vd-pins .vd-pin--onder::after{inset:-20px -4px -4px}
.vd-pins .vd-pin--onder .s-pin__tip{bottom:auto;top:calc(100% + 10px)}
.vd-pins .vd-pin--kort{translate:-50% -50%}
.vd-pins .vd-pin--kort::before{display:none}
.vd-pins .vd-pin--kort::after{inset:-4px}
.vd-pins .s-pin__tip{font-size:.875rem}
@media (max-width:767px){.vd-pins .s-pin{width:32px;height:32px;font-size:.875rem}.vd-pins .s-pin::before{height:12px}.vd-pins .s-pin{translate:-50% calc(-100% - 12px)}
  .vd-pins .vd-pin--onder{translate:-50% 12px}.vd-pins .vd-pin--kort{translate:-50% -50%}
  .vd-pins .s-pin::after{inset:-6px -6px -18px}.vd-pins .vd-pin--onder::after{inset:-18px -6px -6px}.vd-pins .vd-pin--kort::after{inset:-6px}}
.vd-praktijk__lijst{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;border-top:1px solid transparent;border-image:var(--vd-haar) 1}
.vd-praktijk__lijst li{padding:16px 0 10px}
.vd-praktijk__lijst .vd-item__merk{margin-bottom:8px}
.vd-praktijk__lijst .vd-item__titel{margin:0 0 4px;font-size:.9375rem}
.vd-praktijk__lijst p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--grijs1);text-wrap:pretty}
.vd-praktijk__voet{display:grid;gap:18px;padding-top:20px;border-top:1px solid transparent;border-image:var(--vd-haar) 1}
.vd-praktijk__montage{display:grid;gap:8px;justify-items:start;margin:0;font-size:.9375rem;line-height:1.55;color:var(--grijs1)}
.vd-praktijk__knoppen{margin:0}
@media (max-width:767px){.vd-praktijk__knoppen{display:grid;grid-template-columns:minmax(0,1fr)}.vd-praktijk__knoppen .s-knop{width:100%}
  .vd-praktijk__beeld{margin-inline:-6px}}
@media (min-width:900px){
  .vd-praktijk__lijst{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vd-praktijk__lijst li{padding:22px 26px 12px}
  .vd-praktijk__lijst li:first-child{padding-left:0}.vd-praktijk__lijst li:last-child{padding-right:0}
  .vd-praktijk__lijst li + li{border-left:1px solid transparent;border-image:linear-gradient(180deg,var(--lijn-goud),transparent) 1}
}
@media (min-width:1024px){
  .vd-praktijk__vel{row-gap:22px;padding:calc(var(--in) + 36px) calc(var(--in) + 40px) calc(var(--in) + 30px)}
  .vd-praktijk__voet{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px}
  .vd-praktijk__montage{max-width:62ch}
}
/* uitsnede: mobiel ingezoomd op de woning (tot de binnenlijn van het kader), zodat de munten niet over de kozijnen vallen */
.vd-praktijk__uitsnede{position:relative}
@media (max-width:767px){
  .vd-praktijk__beeld{margin-inline:0}
  .vd-praktijk__uitsnede{margin-inline:calc(-1 * (var(--in) + 9px));aspect-ratio:1/.84;overflow:hidden;
    -webkit-mask:linear-gradient(180deg,#000 88%,transparent);mask:linear-gradient(180deg,#000 88%,transparent)}
  .vd-praktijk__huis{width:150%;max-width:none;margin-left:-14%}
  .vd-pins .s-pin{width:26px;height:26px;font-size:.875rem;translate:-50% calc(-100% - 9px)}
  .vd-pins .s-pin::before{height:9px}
  .vd-pins .vd-pin--onder{translate:-50% 9px}
  .vd-pins .vd-pin--kort{translate:-50% -50%}
  /* tikvlak 44 px rond de kleinere munt */
  .vd-pins .s-pin::after{inset:-9px -9px -18px}.vd-pins .vd-pin--onder::after{inset:-18px -9px -9px}.vd-pins .vd-pin--kort::after{inset:-9px}
  .vd-praktijk__bijschrift{margin-top:10px}
}

/* ================================================================ 15 AFSPRAKEN — document: kop in het midden, ruit-lijst, gouden haarlijnen */
.vd-afspraken__kader{padding:calc(var(--in) + 24px) calc(var(--in) + 10px) calc(var(--in) + 22px);background:rgba(var(--rijst-rgb),.5)}
.vd-afspraken__tabel{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid transparent;border-image:var(--vd-haar) 1}
.vd-afspraken__kolom{display:flex;flex-direction:column;padding:18px 0 20px}
.vd-afspraken__kolom + .vd-afspraken__kolom{border-top:1px solid rgba(var(--dgoud-rgb),.3)}
.vd-afspraken__kop{margin:0 0 14px;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--vd-goudtekst)}
.vd-afspraken__wel,.vd-afspraken__niet{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.vd-afspraken__wel > li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 12px;font-size:1rem;line-height:1.5;color:var(--inkt2);text-wrap:pretty}
.vd-afspraken__wel > li::before{content:"";width:7px;height:7px;margin:.55em 0 0 5px;rotate:45deg;background:var(--goud);box-shadow:0 0 0 2px var(--vd-papier),0 0 0 2.6px var(--lijn-goud)}
.vd-afspraken__niet > li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 12px;font-size:1rem;line-height:1.5;color:var(--inkt2)}
.vd-afspraken__niet > li::before{content:"";width:12px;height:12px;margin:.4em 0 0 3px;
  background:linear-gradient(45deg,transparent 42%,var(--rood) 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--rood) 42% 58%,transparent 58%)}
.vd-afspraken__niet > li:first-child{font-weight:600;color:var(--inkt)}
.vd-afspraken__noot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:auto 0 0;padding-top:22px;
  font:italic 400 1.0625rem/1.45 var(--f-serif);color:var(--grijs1)}
.vd-afspraken__noot .s-zegel-svg{flex:none;rotate:-5deg}
.vd-afspraken__noot{font:italic 500 1.1875rem/1.45 var(--f-serif);color:var(--inkt)}
.vd-afsprakentabel{display:grid;margin:8px 0 0;border-top:1px solid transparent;border-image:var(--vd-haar) 1}
.vd-afsprakentabel > div{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:6px;padding:14px 0;border-bottom:1px solid rgba(var(--dgoud-rgb),.25)}
.vd-afsprakentabel > div:last-child{border-bottom:0}
.vd-afsprakentabel dt{font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--vd-goudtekst)}
.vd-afsprakentabel dd{margin:0;font-size:1rem;line-height:1.5;color:var(--inkt2);text-wrap:pretty}
@media (min-width:768px){
  .vd-afspraken__tabel{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .vd-afspraken__kolom{padding:22px 32px 26px 0}
  .vd-afspraken__kolom + .vd-afspraken__kolom{border-top:0;border-left:1px solid rgba(var(--dgoud-rgb),.35);padding-left:32px;padding-right:0}
  .vd-afsprakentabel{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px}
  .vd-afsprakentabel > div{border-bottom:0;padding:18px 0 4px}
  .vd-afsprakentabel dt{font-size:.8125rem;letter-spacing:.26em}
  .vd-afsprakentabel dd{text-wrap:balance}
}
@media (min-width:1024px){.vd-afspraken__kader{padding:calc(var(--in) + 36px) calc(var(--in) + 44px) calc(var(--in) + 32px)}}

/* ================================================================ 16 SLOT — brief in een tweekoloms goud kader: links logo, 谢谢, citaat; rechts de vraag en de ondertekening */
.vd-slot{padding-top:calc(var(--vd-sectie) * .9);margin-bottom:0;overflow:clip;z-index:1}
.vd-brief{position:relative;display:grid;grid-template-columns:minmax(0,1fr);text-align:center;padding:calc(var(--in) + 30px) calc(var(--in) + 12px) calc(var(--in) + 28px);background:rgba(var(--rijst-rgb),.45)}
.vd-brief__links{display:grid;justify-items:center;align-content:center;padding-bottom:22px}
.vd-brief__links .s-ornamentlijn{margin:18px auto 10px}
.vd-brief__plaats{margin:0;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--vd-goudtekst)}
.vd-brief__rechts{display:grid;justify-items:center;padding-top:26px;border-top:1px solid transparent;border-image:var(--vd-haar) 1}
.vd-slot .s-slot__logo{display:block}
.vd-slot .s-slot__logo picture,.vd-slot .s-slot__logo img{width:100%;height:100%;border-radius:50%}
.vd-slot__tak{top:-74px;right:-46px;width:clamp(160px,19vw,270px);opacity:.88}
@media (max-width:767px){.vd-slot__tak{top:-58px;right:-24px;width:150px}}
.vd-slot__tekst{max-width:40ch;margin:12px auto 0;font-size:1rem;color:var(--grijs1);text-wrap:balance}
/* ondertekening: twee gelijkwaardige handtekeningen; het 龍-zegel ertussen, iets over de lijn (offerte p2 'Met vriendelijke groet') */
.vd-ondertekening{width:100%;max-width:640px;margin:26px auto 0}
.vd-ondertekening__kop{margin:0 0 6px;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--vd-goudtekst)}
.vd-ondertekening__rij{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:12px}
.vd-ondertekening__persoon{position:relative;display:grid;justify-items:center;grid-column:1}
.vd-ondertekening__hand{display:block;width:min(100%,250px);height:auto;max-height:90px;overflow:visible;rotate:-2.5deg;translate:0 6px}
.vd-ondertekening__hand--sharma{rotate:-1.4deg}
.vd-hand__inkt{fill:#2B2724;opacity:.92}
.vd-ondertekening__lijn{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--dgoud) 10%,var(--dgoud) 90%,transparent)}
.vd-ondertekening__naam{margin-top:8px;font-size:.9375rem;color:var(--grijs1)}
.vd-ondertekening__naam b{color:var(--inkt);font-weight:600}
.vd-ondertekening__persoon--laatst{margin-top:14px}
.vd-ondertekening__zegel{grid-column:2;grid-row:1 / span 2;align-self:center;rotate:-8deg;line-height:0;margin-left:0;
  border-radius:4px;box-shadow:0 0 0 3px var(--vd-papier)}
.vd-ondertekening__zegel .s-zegel-svg{width:54px;height:54px}
.vd-slot__knoppen{margin-top:26px!important}
.vd-slot__bel{margin:12px 0 0;font-size:.9375rem;color:var(--grijs1)}
.vd-slot__bel a{display:inline-flex;align-items:center;min-height:44px;color:var(--inkt);text-decoration:underline;text-decoration-color:var(--lijn-goud);text-underline-offset:.25em;white-space:nowrap}
/* telefoon = cijfers → Plex Mono; e-mail = tekst → Source Sans (zoals in de voet) */
.vd-slot__bel a.vd-tel{font:500 .9375rem/1.2 var(--f-mono)}
.vd-slot__bel a.vd-mail{font:500 1rem/1.2 var(--f-tekst)}
.vd-slot__bel span{margin:0 .4em;color:var(--goud)}
@media (max-width:767px){.vd-slot__bel span{display:none}.vd-slot__bel a.vd-mail{display:flex;justify-content:center;width:max-content;margin:0 auto}
  .vd-slot .s-container--vel{padding-inline:8px}}
@media (min-width:768px){
  .vd-ondertekening__rij{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto;align-items:end;column-gap:0}
  .vd-ondertekening__persoon{grid-column:auto}
  .vd-ondertekening__persoon--laatst{margin-top:0}
  .vd-ondertekening__zegel{grid-column:2;grid-row:1;align-self:center;margin:0 -10px;position:relative;z-index:2;translate:0 14px}
  .vd-ondertekening__zegel .s-zegel-svg{width:58px;height:58px}
  .vd-ondertekening__kop{font-size:.8125rem;letter-spacing:.28em}
}
@media (min-width:1024px){
  .vd-brief{grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);padding:calc(var(--in) + 46px) calc(var(--in) + 44px) calc(var(--in) + 40px)}
  .vd-brief__links{padding:0 40px 0 8px;border-right:1px solid transparent;border-image:linear-gradient(180deg,transparent,var(--lijn-goud) 12%,var(--lijn-goud) 88%,transparent) 1}
  .vd-brief__rechts{padding:0 0 0 48px;border-top:0}
  .vd-brief .s-slot__citaat{font-size:1.5rem}
}
/* de avond: vermiljoen zon, inktbergen, het schip klein als inktsilhouet; de lichten gaan aan; sluit direct op de brief aan */
.vd-avond{--w:var(--water-s,.6);position:relative;height:clamp(240px,28vw,360px);margin:clamp(8px,1.6vw,20px) auto 0;max-width:1440px;overflow:hidden;pointer-events:none}
.vd-avond__zon{position:absolute;left:50%;top:6%;width:clamp(180px,22vw,300px);aspect-ratio:1;translate:-8% 0;border-radius:50%;
  background:radial-gradient(circle,rgba(214,112,72,.55) 0,rgba(222,132,86,.48) 48%,rgba(232,168,116,.22) 62%,rgba(236,186,140,0) 70.7%)}
.vd-avond__bergen{position:absolute;inset:auto -2% 26% -2%;height:58%;opacity:.4;background:url('../../beeld/voorstel-diensten/vd-bergen-c-1440.webp?v=d9998444') 50% 100%/auto 100% no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.vd-avond__schip{position:absolute;left:calc(46% - clamp(260px,40vw,560px) / 2);bottom:6%;width:clamp(260px,40vw,560px)}
.vd-avond__schip picture,.vd-avond__schip img{display:block;width:100%;height:auto}
.vd-avond__licht{position:absolute!important;inset:0}
.vd-avond__licht img{width:100%;height:100%}
.vd-golven--avond{top:auto;bottom:calc(6% + (1 - var(--w)) * 0px);height:20%}
.vd-golven--avond i:nth-child(1){top:20%;opacity:.22}
.vd-golven--avond i:nth-child(2){top:55%;opacity:.14;background-size:120px 100%;left:-120px}
.vd-avond__mist{position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(180deg,rgba(var(--rijst-rgb),0),rgba(var(--rijst-rgb),.92) 70%,var(--rijst))}
/* de voet: geen eigen bergenband en minder bovenruimte op deze pagina (de avondscène is de overgang) */
.vd .s-voet{margin-top:0;padding-top:clamp(28px,4vw,56px)}
.vd .s-voet > .s-bergen{display:none}

/* ================================================================ 17 FOLIO — site · naam · Hoofdstuk n / 7 (mobiel: naam — n / 7) */
.vd-folio{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin-top:40px;
  font:500 .875rem/1 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--vd-goudtekst)}
.vd-folio__site{display:none}
.vd-folio__naam{display:flex;align-items:center;gap:16px;color:var(--grijs1);white-space:nowrap}
.vd-folio__naam::after{content:"";flex:1;min-width:24px;height:1px;background:linear-gradient(90deg,var(--lijn-goud),rgba(var(--dgoud-rgb),.2))}
.vd-folio__nr{display:inline-flex;align-items:center;gap:10px;color:var(--inkt);white-space:nowrap;font-variant-numeric:tabular-nums}
.vd-folio__nr .s-zegel-svg{width:18px;height:18px}
.vd-folio__getal{font:500 .875rem/1 var(--f-mono);letter-spacing:.04em;color:var(--inkt)}
.vd-folio__h{display:none}
@media (min-width:768px){
  .vd-folio{grid-template-columns:auto minmax(0,1fr) auto;font-size:.75rem;letter-spacing:.28em}
  .vd-folio__site{display:block}
  .vd-folio__naam::before{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(var(--dgoud-rgb),.2),var(--lijn-goud))}
  .vd-folio__h{display:inline}
}

/* ================================================================ 18 KOP (sticky) en VOET (mobiel) */

@media (max-width:479px){.vd .s-voet h2{letter-spacing:.18em}}
@media (max-width:399px){.vd .s-voet__raster{grid-template-columns:minmax(0,1fr)}}

/* ================================================================ 19 BEWEGING — alleen transform/opacity/clip-path/stroke-dashoffset; uit bij reduced motion */
@media (prefers-reduced-motion:no-preference){
  /* rollen: eenmalig uitrollen; de tekst komt pas als de rol open is */
  html.vd-beweeg .vd-rol__vel{transition:clip-path 1.1s var(--s-ease-inkt);transition-delay:calc(var(--i) * 140ms)}
  html.vd-beweeg .vd-rol__stok--onder{transition:transform 1.1s var(--s-ease-inkt);transition-delay:calc(var(--i) * 140ms)}
  html.vd-beweeg .vd-rol__label > *{transition:opacity .5s var(--ease);transition-delay:calc(var(--i) * 140ms + .8s)}
  html.vd-beweeg .vd-rollen:not(.is-open) .vd-rol__vel{clip-path:inset(0 -30px 100% -30px)}
  html.vd-beweeg .vd-rollen:not(.is-open) .vd-rol__stok--onder{transform:translate3d(0,var(--vd-oprol,-300px),0)}
  html.vd-beweeg .vd-rollen:not(.is-open) .vd-rol__label > *{opacity:0}
  html.vd-beweeg .vd-rollen.is-open .vd-rol__vel{clip-path:inset(0 -30px -40px -30px)}
  .vd-rol{transition:translate .45s var(--s-ease-inkt)}
  .vd-rol:hover{translate:0 -4px}
  /* handrol: opent vanuit het midden, de stokken rollen naar buiten */
  html.vd-beweeg .vd-handrol__vel{transition:clip-path 1.3s var(--s-ease-inkt)}
  html.vd-beweeg .vd-handrol__stok{transition:transform 1.3s var(--s-ease-inkt)}
  html.vd-beweeg .vd-handrol:not(.is-open) .vd-handrol__vel{clip-path:inset(-20px 50% -20px 50%)}
  html.vd-beweeg .vd-handrol:not(.is-open) .vd-handrol__stok--l{transform:translate3d(var(--vd-half,0px),0,0)}
  html.vd-beweeg .vd-handrol:not(.is-open) .vd-handrol__stok--r{transform:translate3d(calc(var(--vd-half,0px) * -1),0,0)}
  html.vd-beweeg .vd-handrol.is-open .vd-handrol__vel{clip-path:inset(-20px -2px -20px -2px)}
  /* golven drijven traag (alleen in beeld); het schip deint */
  .is-in-beeld > .vd-golven i,.vd-golven.is-in-beeld i{animation:vd-drijf 11s linear infinite}
  .vd-golven.is-in-beeld i:nth-child(2){animation-duration:15s;animation-direction:reverse}
  .vd-golven.is-in-beeld i:nth-child(3){animation-duration:19s}
  [data-vd-deining].is-in-beeld{animation:vd-deining 7s ease-in-out infinite}
  /* controlelijst, maatlijnen en handtekeningen tekenen zich */
  html.vd-beweeg [data-vd-check]:not(.is-zichtbaar) path{stroke-dashoffset:1}
  html.vd-beweeg [data-vd-check] path{stroke-dasharray:1 1;transition:stroke-dashoffset .3s var(--s-ease-inkt)}
  html.vd-beweeg [data-vd-check] li:nth-child(2) path{transition-delay:80ms}
  html.vd-beweeg [data-vd-check] li:nth-child(3) path{transition-delay:160ms}
  html.vd-beweeg [data-vd-check] li:nth-child(4) path{transition-delay:240ms}
  html.vd-beweeg [data-vd-check] li:nth-child(5) path{transition-delay:300ms}
  html.vd-beweeg [data-vd-check] li:nth-child(6) path{transition-delay:360ms}
  html.vd-beweeg [data-vd-teken] path[pathLength]{stroke-dasharray:1 1;transition:stroke-dashoffset 1.1s var(--s-ease-inkt);transition-delay:calc(var(--d,0) * .75s)}
  html.vd-beweeg .vd-ondertekening__hand path[pathLength]{transition-duration:.9s;transition-timing-function:cubic-bezier(.45,.05,.4,1)}
  html.vd-beweeg .vd-ondertekening__persoon--laatst .vd-ondertekening__hand path[pathLength]{transition-delay:calc(1.6s + var(--d,0) * .7s)}
  html.vd-beweeg [data-vd-teken]:not(.is-zichtbaar) path[pathLength]{stroke-dashoffset:1}
  /* avond: de lichten gaan aan */
  html.js-beweeg .vd-avond:not(.is-zichtbaar) .vd-avond__licht{opacity:0}
  html.js-beweeg .vd-avond .vd-avond__licht{transition:opacity 2.6s var(--ease) .5s}
  /* kaart: route tekent zich, schip vaart (JS); loepen in inkt-fade */
  html.vd-beweeg .vd-kaart__vel:not(.is-klaar) .vd-kaart__loep--nl,html.vd-beweeg .vd-kaart__vel:not(.is-gestart) .vd-kaart__loep--cn{opacity:0;scale:.92}
  html.vd-beweeg .vd-kaart__loep{transition:opacity .7s var(--ease),scale .7s var(--s-ease-inkt)}
  html.vd-beweeg .vd-kaart__vel.is-aankomst .vd-kaart__loep--nl{opacity:1;scale:1}
  /* reis (mobiel): gouden vulling volgt de scroll */
  html.vd-beweeg .vd-reis__vulling{will-change:transform}
  /* handrol mobiel: rolt van boven naar beneden open; de onderste stok rolt mee */
  @media (max-width:767px){
    html.vd-beweeg .vd-handrol:not(.is-open) .vd-handrol__vel{clip-path:inset(0 -20px 100% -20px)}
    html.vd-beweeg .vd-handrol.is-open .vd-handrol__vel{clip-path:inset(-20px -20px -20px -20px)}
    html.vd-beweeg .vd-handrol:not(.is-open) .vd-handrol__stok--l{transform:none}
    html.vd-beweeg .vd-handrol:not(.is-open) .vd-handrol__stok--r{transform:translate3d(0,calc(var(--vd-hoog,0px) * -1),0)}
  }
  /* schip: parallax via --vd-zweef (JS), vloeiend */
  html.vd-beweeg [data-vd-zweef]{will-change:transform}
}
@keyframes vd-drijf{to{transform:translate3d(84px,0,0)}}
@keyframes vd-deining{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-3px,0) rotate(-.3deg)}}

/* ================================================================ 20 PRINT */
@media print{.vd-overgang,.vd-golven,.vd-rollen__stippen,.vd-handrol__stippen,.vd-avond{display:none}
  .vd-rollen__baan{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}.vd-handrol__baan{display:grid;grid-template-columns:repeat(4,1fr)}}

/* ================================================================ EINDKEURING */
/* titelkaart Sourcing op de kaderlijn (geen 16 px buiten het raster) */
@media (min-width:1024px){.vd-titelkaart{margin-left:0}}
@media (min-width:1280px){.vd-titelkaart{margin-left:0}}
/* pins: munt blijft 26 px, het tikvlak is 44 × 44 */
.vd-pins .s-pin:not(.vd-pin--onder)::after{content:"";position:absolute;inset:-9px}
/* Parelrivierdelta hangt nu in de Zuid-Chinese Zee onder Foshan, met een fijne gestippelde leider naar het Foshan-punt */
.vd-kaart__vel > .vd-kaart__delta{translate:-100% 0}
.vd-kaart__vel > .vd-kaart__delta::after{content:"";position:absolute;right:-2px;top:-58px;height:54px;border-right:1px dashed rgba(var(--dgoud-rgb),.7)}
/* omslag: een echte zonneschijf achter de render (zoals PDF p1) en het hele vel binnen 1440 × 900: de metaregel staat op één lijn */
.vd-held__zon{background:radial-gradient(circle at 50% 48%,rgba(250,238,204,.96) 0,rgba(244,226,180,.88) 44%,rgba(235,211,150,.55) 63%,rgba(226,196,124,.22) 69.5%,rgba(226,196,124,0) 71%)}
@media (min-width:1024px){
  .vd-kop__meta{grid-template-columns:repeat(3,max-content);column-gap:36px;margin-top:22px}
  .vd-kop__meta > div{grid-template-columns:auto auto;gap:10px;padding:10px 0}
  .vd-kop__meta dd.vd-kop__jaar{font-size:1.5rem}
  .vd-kop__vel{padding-bottom:calc(var(--in) + 22px)}
}