/* pagina/werkwijze.css — ronde 3 (na de derde jurybeurt). Eigenaar: pagina-bouwer van kozijnen/werkwijze/index.html (prefix .ww-).
   Fundament-componenten (s-vel, s-titelblok, s-routekaart, s-stappen-ring, s-folio, s-slot …): ronde2/FUNDAMENT.md.
   Raster desktop: één kaderbreedte voor alle hoofdstukken = container 1116 (x 162–1278), 12 kolommen van 71 + goot 24.
   Mobiel: 1 kolom, tekst ≥ 14 px, tikvlak ≥ 44 px. Beweging: alleen transform/opacity/stroke-dashoffset; startstanden alleen onder
   html.ww-beweeg en nooit onzichtbaar (start op opacity .4). De filmische scène (hoofdstuk 6) zet transforms vanuit één rAF-lus. */

/* ================================================================ gedeeld op deze pagina */
.ww main > section{overflow-x:clip}
.ww{--ww-sectie:clamp(64px,6.7vw,96px)}
.ww main > .s-sectie{padding-block:var(--ww-sectie) 0}
.ww main > .ww-route{padding-top:clamp(14px,2vw,24px)}
/* scheidingsregel (bewijs/meta): de · hoort bij het volgende item en valt aan het begin van een regel weg */
.ww-meta{display:flex;flex-wrap:wrap;margin:0 0 0 -22px;clip-path:inset(-4px -4px -4px 22px);font:500 .875rem/1.6 var(--f-mono);color:var(--grijs1)}
.ww-meta > span{position:relative;padding-left:22px;white-space:nowrap}
.ww-meta > span::before{content:"·";position:absolute;left:0;width:22px;text-align:center;color:var(--dgoud)}
@media (min-width:768px){.ww-meta{font-size:.8125rem}}
/* tekstlink die mag afbreken: onderstreping op de tekst zelf; tikvlak via padding */
.ww-tekstlink{display:inline-block;max-width:100%;padding-block:12px;font:500 .875rem/1.55 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt);text-decoration:none;text-wrap:balance}
.ww-tekstlink > span{text-decoration:underline;text-decoration-color:var(--dgoud);text-decoration-thickness:1px;text-underline-offset:.42em}
.ww-tekstlink .s-ico{display:inline-block;width:16px;height:16px;margin-left:10px;vertical-align:-2px;color:var(--dgoud);transition:transform var(--duur-kort) var(--ease)}
.ww-tekstlink > .s-ico:first-child{margin:0 10px 0 0}
.ww-tekstlink:hover > .s-ico:last-child{transform:translateX(4px)}
.ww-tekstlink:hover > span{text-decoration-color:var(--inkt)}
.ww-tekstlink:focus-visible{outline:2px solid var(--inkt);outline-offset:2px}
/* zachte onthulling (eigen observer met ruime marge): nooit vanaf 0 */
html.ww-beweeg [data-ww-op]:not(.is-zichtbaar){opacity:.4;translate:0 14px}
html.ww-beweeg [data-ww-op]{transition:opacity .8s var(--s-ease-inkt),translate .8s var(--s-ease-inkt)}
html.ww-beweeg [data-ww-stempel]:not(.is-zichtbaar){opacity:.4;scale:1.18}
html.ww-beweeg [data-ww-stempel].is-zichtbaar{animation:s-stempel-in .28s var(--s-ease-stempel) both}
html.ww-beweeg [data-ww-teken] path{stroke-dasharray:1 1;transition:stroke-dashoffset 1.6s var(--s-ease-inkt)}
html.ww-beweeg .ww-schets:not(.is-zichtbaar) [data-ww-teken] path{stroke-dashoffset:.6}
/* titelblok: rubriek mobiel nooit onder het grote teken; hoofdstukzegels met penseelcijfer */
@media (max-width:1023px){.ww .s-titelblok__rubriek{padding-right:68px}}
.ww .s-zegel-nr img{border-radius:3px}

/* sticky kop (gedeeld, lokaal opgevangen): in de ingeklapte stand valt de tagline weg en schuift het woordmerk naar de middellijn van het logo */
/* (ingeklapte kop: nu gedeeld in site.css §13) */
/* actiebalk (gedeeld): 44 px knoppen ook op 375, en weg zodra de slotknoppen in beeld zijn (geen dubbel goud) */
@media (max-width:767px){
  .ww .s-actiebalk .s-knop{min-height:44px}
  .ww .s-actiebalk.ww-slot-in-beeld{transform:translateY(110%)}
}
.ww .s-kruimel a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding-inline:6px;margin-inline:-6px}
/* ornamentlijn zo breed als het titelblok: dubbele goudlijn · ◇·◇ · dubbele goudlijn */
.ww-orn{display:flex;align-items:center;gap:12px;width:100%;height:12px}
.ww-orn::before,.ww-orn::after{content:"";flex:1;height:4px;border-block:1px solid var(--lijn-goud);opacity:.9}
.ww-orn::before{-webkit-mask-image:linear-gradient(90deg,#000 70%,rgba(0,0,0,.4));mask-image:linear-gradient(90deg,#000 70%,rgba(0,0,0,.4))}
.ww-orn::after{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.4),#000 30%);mask-image:linear-gradient(90deg,rgba(0,0,0,.4),#000 30%)}
.ww-orn{background:url('../../../kozijnen/werkwijze/beeld/orn-ruit.svg?v=4c498dfc') center/44px 12px no-repeat;column-gap:56px}
.ww-orn--midden{max-width:360px;margin:var(--ruimte-5,24px) auto}
/* subnav (gedeeld): bij overloop rechts een gouden pijltje als hint */
.ww .s-subnav__balk{position:relative}
.ww .s-subnav__balk:has(.s-subnav__lijst[data-overloop~=rechts])::after{content:"";position:absolute;right:max(8px,calc(var(--s-goot,16px) - 6px));top:50%;width:7px;height:7px;
  border-top:1.5px solid var(--dgoud);border-right:1.5px solid var(--dgoud);translate:0 -50%;rotate:45deg;pointer-events:none}
@media (max-width:767px){.ww .s-subnav__lijst{-webkit-mask-image:linear-gradient(90deg,var(--fl),#000 24px,#000 calc(100% - 36px),var(--fr));mask-image:linear-gradient(90deg,var(--fl),#000 24px,#000 calc(100% - 36px),var(--fr))}}
/* voet (gedeeld): woordmerk nooit afbreken */
.ww .s-voet .s-merk__naam{white-space:nowrap}

/* ================================================================ 0 OMSLAG — vel met dubbel goudkader, zon, schip in de bergen, mist, tak */
.ww-kop{position:relative;padding:8px 0 0}
.ww-omslag{position:relative;overflow:clip;isolation:isolate;padding:clamp(18px,3.4vw,44px) clamp(18px,4.4vw,60px) clamp(28px,4vw,52px);
  background:radial-gradient(ellipse 70% 60% at 68% 40%,rgba(255,252,243,.55),transparent 70%)}
.ww-omslag__lagen{position:absolute;inset:6px;z-index:-1;overflow:hidden;pointer-events:none}
.ww-omslag__lagen > *{position:absolute}
/* de zon: zachte kern met een lichte bloom-rand; loopt onder het schip door en vervaagt in de mist */
.ww-omslag__zon{left:var(--zon-x,50%);top:var(--zon-y,26%);width:var(--zon-d,360px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,244,214,.9) 0,rgba(var(--goud-rgb),.62) 30%,rgba(var(--goud-rgb),.5) 50%,rgba(var(--goud-rgb),.26) 64%,rgba(var(--goud-rgb),.08) 72%,rgba(var(--goud-rgb),0) 80%);
  -webkit-mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,.35) 74%,transparent 92%);mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,.35) 74%,transparent 92%)}
.ww-omslag__verte{left:var(--verte-l,30%);right:-4%;top:var(--verte-y,40%);height:var(--verte-h,90px);background:url('../../kit/afgeleid/bergen-ver-web.webp?v=5988c592') center bottom/100% 100% no-repeat;opacity:.34;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 80%,transparent),linear-gradient(0deg,transparent,#000 40%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 80%,transparent),linear-gradient(0deg,transparent,#000 40%);mask-composite:intersect}
.ww-omslag__bergen{--op-bergen:.5;height:clamp(84px,13vw,180px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 38%);mask-image:linear-gradient(180deg,transparent,#000 38%)}
.ww-omslag__den{bottom:clamp(10px,2vw,26px);opacity:.5}
.ww-omslag__den--l{left:clamp(10px,2.4vw,34px);width:clamp(44px,5vw,70px)}
.ww-omslag__den--r{right:clamp(14px,3vw,44px);width:clamp(36px,4vw,58px);scale:-1 1}
@media (min-width:1024px){.ww-omslag__den--r{right:2.6%;bottom:clamp(12px,1.6vw,24px);width:50px;opacity:.36;scale:-1 1}}
@media (max-width:1023px){.ww-omslag__den--m{display:none}}
.ww-omslag__tak{--op-tak:.95;top:-14px;right:-26px;width:clamp(190px,26vw,380px);z-index:2}
/* inktbergen over de volle breedte onder het schip, met mist en bonsai-silhouetten; draakwatermerk rechtsonder (± 5 %) */
.ww-omslag__watermerk{right:-3%;bottom:-4%;width:clamp(220px,34%,470px);opacity:.05}
.ww-omslag__inkt{left:-2%;right:-2%;bottom:0;height:clamp(80px,13vw,184px);background:url('../../kit/afgeleid/bergen-web.webp?v=b7ecbbad') center bottom/100% 100% no-repeat;opacity:.3;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%)}
.ww-omslag__mist{left:-6%;right:-6%;bottom:-2%;height:clamp(60px,9vw,120px);background:url('../../kit/svg/land/nevel.svg?v=caf49ff3') center bottom/100% 100% no-repeat;opacity:.9}
.ww-omslag__den--m{left:60%;width:clamp(36px,3.6vw,52px);bottom:clamp(14px,2.2vw,30px);opacity:.38}
.ww-omslag__mini{display:none}
html.ww-beweeg .ww-omslag [data-ww-diepte]{transform:translate3d(0,var(--ww-par,0px),0);will-change:transform}
.ww-omslag__blaadjes{inset:0;z-index:3}
.ww-omslag__raster{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"kruimel" "beeld" "tekst"}
.ww-omslag__kruimel{grid-area:kruimel;min-width:0;position:relative;z-index:4}
.ww-omslag__kruimel .s-kruimel{margin:0}
.ww-omslag__teken{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px}
.ww-omslag__kalli{display:block;mix-blend-mode:multiply;opacity:.9}
.ww-omslag__zegel{width:30px;height:30px;rotate:-4deg}
.ww-omslag__tekst{grid-area:tekst;position:relative;z-index:4;min-width:0}
.ww-omslag__tekst .s-kicker{margin:0 0 12px}
.ww-omslag__kicker .s-kicker{margin:0}
.ww-omslag__kicker{margin:0 0 12px}
.ww-omslag__titel{margin:0}
.ww-omslag__titel em{display:inline-block;margin-top:.04em}
.ww-omslag__orn{margin:18px 0 16px;max-width:444px}
.ww-omslag__lead{margin:0;max-width:40ch;text-wrap:pretty}
.ww-omslag__meta{margin-top:14px}
.ww-omslag__knoppen{margin-top:22px}
.ww-omslag__knoppen .ww-tekstlink{padding-block:14px}
.ww-omslag__beeld{grid-area:beeld;position:relative;margin:0;min-width:0}
.ww-omslag__bijschrift{margin:0;text-align:right}

/* het water en het schip: render v3 (warm hooflicht, AO, contactschaduw en inktspiegeling in het beeld), deining via transform */
.ww-zee{position:relative;width:100%;aspect-ratio:1600 / 742}
.ww-zee > span{position:absolute;pointer-events:none}
.ww-zee__golven{left:-6%;right:-6%;top:64%;bottom:-8%;background:url('../../beeld/kaart/golf.svg?v=fac7bd0f') 0 0/30px 12px repeat;opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse 50% 58% at 50% 24%,#000 18%,transparent 76%);mask-image:radial-gradient(ellipse 50% 58% at 50% 24%,#000 18%,transparent 76%)}
.ww-zee__schip{inset:0}
.ww-zee__render{display:block;transform-origin:60% 76%}
.ww-zee__render img{display:block;width:100%;height:auto}
.ww-zee__nevel{left:-14%;right:-14%;bottom:-10%;height:36%;background:url('../../kit/svg/land/nevel.svg?v=caf49ff3') center/100% 100% no-repeat;opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 35%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 35%);mask-composite:intersect}
@media (prefers-reduced-motion:no-preference){
  html.ww-beweeg .ww-kop.is-in-beeld:not(.is-gepauzeerd) .ww-zee__render{animation:ww-deinen 7s ease-in-out infinite}
  html.ww-beweeg .ww-kop.is-in-beeld:not(.is-gepauzeerd) .ww-zee__golven{animation:ww-drijf 40s linear infinite}
  html.ww-beweeg .ww-kop.is-in-beeld:not(.is-gepauzeerd) .ww-zee__nevel{animation:ww-mist 18s ease-in-out infinite alternate}
}
@keyframes ww-deinen{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-3px) rotate(.25deg)}}
@keyframes ww-drijf{to{background-position:-300px 0}}
@keyframes ww-mist{from{transform:translateX(-2%)}to{transform:translateX(2%)}}

@media (max-width:767px){
  .ww-kop{padding-top:6px}
  .ww-omslag{padding:18px 16px 76px}
  .ww-omslag__kruimel{display:none}
  .ww-omslag__teken{display:none}
  .ww-omslag__kicker{display:flex;align-items:center;gap:12px}
  .ww-omslag__mini{display:inline-flex;align-items:center;gap:6px;flex:none}
  .ww-omslag__mini img{width:34px;height:34px;mix-blend-mode:multiply;opacity:.9}
  .ww-omslag__minizegel{width:20px;height:20px;rotate:-4deg}
  .ww-omslag__beeld{width:78%;margin:46px -4px 0 auto}
  .ww-omslag__bijschrift{display:none}
  .ww-omslag{--zon-x:62%;--zon-y:118px;--zon-d:230px;--verte-y:100px;--verte-h:46px;--verte-l:24%}
  .ww-omslag__tak{width:122px;right:-44px;top:60px;z-index:0}
  .ww-omslag__den{display:none}
  .ww-omslag__bergen{height:70px;--op-bergen:.42}
  .ww-omslag__inkt{height:64px;opacity:.26}
  .ww-omslag__watermerk{width:62%;bottom:-2%}
  .ww-omslag__lead{font-size:1.125rem}
  .ww-omslag__orn{margin:14px 0 12px;max-width:320px}
  .ww-omslag__knoppen{margin-top:18px}
}
@media (min-width:768px) and (max-width:1023px){
  .ww-omslag__teken{top:0;right:0}
  .ww-omslag__kalli{width:64px;height:64px}
  .ww-omslag{--zon-x:62%;--zon-y:30%;--zon-d:300px}
  .ww-omslag__beeld{margin-top:24px}
}
@media (min-width:1024px){
  .ww-kop{padding-top:14px}
  .ww-omslag{padding:34px 40px 46px 52px;--zon-x:66%;--zon-y:40%;--zon-d:440px;--verte-y:41%;--verte-h:120px;--verte-l:38%}
  .ww-omslag__raster{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;grid-template-rows:auto 1fr;
    grid-template-areas:"kruimel kruimel kruimel kruimel kruimel kruimel beeld beeld beeld beeld beeld beeld" "tekst tekst tekst tekst tekst tekst beeld beeld beeld beeld beeld beeld"}
  .ww-omslag__kruimel{padding:4px 0 0 92px}
  .ww-omslag__teken{left:0;top:58px;gap:14px}
  .ww-omslag__kalli{width:76px;height:76px}
  .ww-omslag__zegel{width:32px;height:32px}
  .ww-omslag__tekst{padding:28px 0 0 92px;align-self:start;max-width:calc(92px + 444px)}
  .ww-omslag__kicker{margin-bottom:16px}
  .ww-omslag__titel{font-size:clamp(3rem,4.4vw,4rem)}
  .ww-omslag__lead{font-size:1.375rem;max-width:none}
  .ww-omslag__knoppen{margin-top:28px;flex-wrap:nowrap;gap:12px 32px;width:max-content}
  .ww-omslag__knoppen > *{white-space:nowrap}
  /* het schip staat ín het bergenlandschap: de romp zakt tot in de bergband, de mist loopt eroverheen */
  .ww-omslag__beeld{align-self:end;margin:0 -24px -8px 10px}
  .ww-omslag__bijschrift{position:relative;z-index:2;margin:-6px 34px 0 0}
}

/* ================================================================ 一 DE ROUTE — vel met kaart, vijf haltes en "ter plaatse" */
.ww-route{--ww-pad:clamp(18px,4.4vw,60px)}
.ww-route__vel{padding:clamp(30px,4.4vw,60px) var(--ww-pad) clamp(40px,4vw,56px)}
.ww-route__kop{margin-bottom:clamp(0px,1vw,12px)}
@media (min-width:1024px){.ww-route__kop .s-titelblok__lead{align-self:end;margin-bottom:6px}}

/* de kaart loopt door tot vlak binnen de goudrand en vervaagt rondom naar het papier */
.ww-kaart{--ww-zoom:1;position:relative;margin-inline:calc((var(--ww-pad) - 10px) * -1)}
.ww-kaart .s-routekaart{--ky:-2!important;--kh:338!important}
.ww-kaart .s-routekaart__vel{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 88%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 88%,transparent);mask-composite:intersect}
/* de hele route staat er altijd als dunne stippellijn (schim); de getekende route en het schip lopen eroverheen */
.ww-route-schim{opacity:.5}
/* fijner schip en kompas (op de schaal van de offertekaart); het schip 'meert af' bij aankomst */
.ww-kaart .s-routekaart__schip > .s-routekaart__romp{width:clamp(34px,calc(36 * var(--k)),54px)}
.ww-kaart .s-routekaart__schip{transition:opacity .6s ease-out}
.ww-kaart .s-routekaart.ww-aan .s-routekaart__schip{opacity:0}
.ww-kaart .s-routekaart__kompas > svg{width:clamp(40px,calc(40 * var(--k)),58px)}
/* Nederland-loep altijd zichtbaar (ook vóór het draaiboek), met labels binnen de cirkel */
.ww-kaart .s-routekaart .s-routekaart__loep--nl{opacity:1!important;transform:none!important}
.ww-kaart .s-routekaart .s-routekaart__loep--nl .s-routekaart__lab,.ww-kaart .s-routekaart .s-routekaart__loep--nl .s-routekaart__loeptitel{opacity:1!important}
.ww-kaart .s-routekaart .s-routekaart__nlroute,.ww-kaart .s-routekaart .s-routekaart__verbind--nl{clip-path:none!important}
.ww-kaart .s-routekaart.is-aangekomen .ww-loep-ring{animation:ww-loep 1.4s var(--s-ease-inkt) both}
@keyframes ww-loep{0%{opacity:0;transform:scale(.92)}40%{opacity:.9}100%{opacity:0;transform:scale(1.06)}}
.ww-loep-ring{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.ww-kaart .s-routekaart__loep--nl .s-routekaart__lab{translate:none;line-height:1.2}
.ww-kaart .s-routekaart__lab--aankomst{text-align:right;translate:-100% -50%!important}
.ww-kaart .s-routekaart__lab--adres{translate:0 -50%!important}
.ww-kaart .s-routekaart__lab--dsd{display:grid;justify-items:end;text-align:right;translate:-100% 0!important}
.ww-kaart .s-routekaart__lab--dsd b{letter-spacing:.08em}
.ww-kaart .s-routekaart__lab--dsd i{font-size:1.12em}
@media (min-width:768px){
  .ww-kaart .s-routekaart__loep--nl{--ux:160!important;--uy:276!important;--ur:112!important}
  .ww-kaart{padding-bottom:clamp(48px,5vw,72px)}
  .ww-kaart .s-routekaart__lab,.ww-kaart .s-routekaart__loeptitel{font-size:max(12px,calc(9 * var(--k)))}
}
/* labels: papierkleurige halo (geen vlak), zodat geen kustlijn door een letter loopt; minimaal 12 px */
.ww-kaart .s-routekaart__naam > *,.ww-kaart .s-routekaart__lab,.ww-kaart .s-routekaart__loeptitel{
  text-shadow:0 0 2px var(--rijst),0 0 2px var(--rijst),0 0 3px var(--rijst),0 0 4px var(--rijst),1px 1px 0 var(--rijst),-1px -1px 0 var(--rijst),1px -1px 0 var(--rijst),-1px 1px 0 var(--rijst)}
.ww-kaart .s-routekaart__naam small{font-size:max(12px,calc(7.4 * var(--k)))}
/* Foshan: labelblok boven het land (± 27°N), met een korte gouden leider naar de markering */
.ww-kaart .s-routekaart__naam--foshan{translate:calc(-4 * var(--k)) calc(-27 * var(--k))}
.ww-kaart .s-routekaart__naam--foshan > *{right:calc(14px + 4 * var(--k))}
.ww-kaart .s-routekaart__naam--foshan::after{content:"";position:absolute;right:0;top:calc(6px + 2 * var(--k));width:1px;height:calc(27 * var(--k) - 14px - 2 * var(--k));
  background:linear-gradient(180deg,var(--dgoud),rgba(var(--dgoud-rgb),.4))}
.ww-kaart .s-routekaart__naam--foshan::before{content:"";position:absolute;right:0;top:calc(6px + 2 * var(--k));width:calc(10px + 4 * var(--k));height:1px;background:var(--dgoud)}
/* eigen kustlijn: Noord-Afrika en de Sinaï in dezelfde inktlijn (laag in het kaartvel, zie werkwijze.js) */
.ww-kust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
@media (max-width:767px){
  .ww-kaart{margin-inline:calc((var(--ww-pad) - 6px) * -1)}
  .ww-kaart.is-pan{--ww-zoom:2.15}
  .ww-kaart .s-routekaart__vel{-webkit-mask-image:none;mask-image:none}
  .ww-kaart .s-routekaart__naam--foshan{translate:calc(-4 * var(--k)) calc(-27 * var(--k))}
  .ww-venster{position:relative;overflow:hidden;aspect-ratio:5 / 3;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 90%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 90%,transparent);mask-composite:intersect}
  .ww-venster > .s-routekaart__kompas{left:46px;top:auto;bottom:46px;z-index:3}
  .ww-venster > .s-routekaart__kompas > svg{width:58px}
  /* het schip wacht op zee, naast de Foshan-markering (niet erbovenop) */
  .ww-kaart .s-routekaart[data-staat=wacht] .s-routekaart__schip{translate:22px 20px}
  .ww-kaart .s-routekaart__loep--nl{width:min(92vw,400px)}
  .ww-kaart.is-pan .s-routekaart{overflow:hidden}
  .ww-kaart.is-pan .s-routekaart__vel{width:calc(100% * var(--ww-zoom));--k:calc(var(--ww-zoom) * 100cqw / var(--kw));will-change:transform}
  .ww-kaart .s-routekaart__onder,.ww-kaart .s-routekaart figcaption{padding-inline:calc(var(--ww-pad) - 6px);text-wrap:balance}
  .ww-kaart .s-routekaart__lab,.ww-kaart .s-routekaart__loeptitel,.ww-kaart .s-routekaart__naam small{font-size:14px}
}

/* vijf haltes onder de kaart: 1–5 in een gouden ring, het stapnummer klein in mono; de halte van het schip wordt rood (rond, met een pulserende ring) */
.ww-haltes__kop{display:flex;align-items:center;gap:14px;margin:clamp(22px,3vw,36px) 0 0;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--dgoud)}
.ww-haltes__kop::before,.ww-haltes__kop::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--lijn-goud))}
.ww-haltes__kop::after{background:linear-gradient(90deg,var(--lijn-goud),transparent)}
@media (min-width:768px){.ww-haltes__kop{font-size:.75rem;letter-spacing:.32em}}
.ww-ringen{margin-top:clamp(18px,2.4vw,30px)}
.ww-ringen > li{outline-offset:6px;align-content:start}
.ww-ringen .s-ring{transition:background-color .5s var(--s-ease-inkt),box-shadow .5s var(--s-ease-inkt)}
.ww-ringen > li.is-bereikt .s-ring{background:var(--goudlicht);box-shadow:inset 0 0 0 2px var(--goud),inset 0 0 0 5px var(--goudlicht),inset 0 0 0 6px var(--dgoud)}
.ww-ringen > li.is-actief .s-ring{background:var(--goudtint)}
.ww-halteknop{position:absolute;inset:-6px;z-index:2;margin:0;padding:0;border:0;border-radius:6px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ww-halteknop:focus-visible{outline:2px solid var(--dgoud);outline-offset:2px}
.ww-halte__fase{font:500 .875rem/1.3 var(--f-mono);color:var(--grijs2);letter-spacing:.02em}
/* fasebalk boven de haltes (desktop): welke haltes bij welke fase horen */
.ww-fasebalk{display:none}
@media (min-width:1024px){
  .ww-fasebalk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:20px;margin:clamp(18px,2.4vw,28px) 0 -4px}
  .ww-fasebalk__fase{grid-column:var(--van) / var(--tot);position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding-bottom:12px;
    font:500 .75rem/1 var(--f-kop);letter-spacing:.28em;text-transform:uppercase;color:var(--dgoud)}
  .ww-fasebalk__fase img{width:22px;height:22px;rotate:-3deg}
  .ww-fasebalk__fase::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:8px;border:1px solid var(--lijn-goud);border-bottom:0}
  .ww-fasebalk__fase::before{content:"";position:absolute;left:50%;bottom:-5px;width:7px;height:7px;translate:-50% 0;rotate:45deg;background:var(--rijst);box-shadow:inset 0 0 0 1px var(--dgoud)}
  .ww-halte__fase{display:none}
  .ww-ringen{margin-top:10px}
}
.ww-halte{position:absolute;right:-8px;top:-8px;width:30px;height:30px}
.ww-halte img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .2s var(--s-ease-inkt)}
.ww-halte__rood{opacity:0}
.ww-halte::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(var(--rood-rgb),.55);opacity:0;pointer-events:none}
.ww-ringen > li.is-hier .ww-halte__rood{opacity:1}
.ww-ringen > li.is-hier .ww-halte img:first-child{opacity:0}
@media (prefers-reduced-motion:no-preference){html.ww-beweeg .ww-ringen > li.is-hier .ww-halte::after{animation:ww-puls 2.4s var(--s-ease-inkt) infinite}}
html:not(.ww-beweeg) .ww-ringen > li.is-hier .ww-halte::after{opacity:.6}
@keyframes ww-puls{0%{opacity:.7;transform:scale(.9)}70%,100%{opacity:0;transform:scale(1.5)}}
@media (max-width:1023px){
  .ww-ringen > li > .s-ring{grid-row:1 / span 4}
  .ww-ringen > li > :not(.s-ring){grid-column:2}
}
@media (min-width:1024px){
  .ww-ringen .s-stappen-ring__titel{min-height:2.5em;align-items:flex-end;margin-bottom:8px}
  .ww-ringen .s-stappen-ring__tekst{text-wrap:pretty}
  .ww-ringen .s-ring{margin-bottom:10px}
  .ww-ringen .s-stappen-ring__moment{margin-top:8px}
}
.ww-ringen__voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;margin:clamp(10px,1.6vw,18px) 0 0}
.ww-ringen__hint{margin:0}
.ww-hint--grof{display:none}
@media (hover:none),(pointer:coarse){.ww-hint--fijn{display:none}.ww-hint--grof{display:inline}}
@media (min-width:1024px){.ww-ringen__voet{justify-content:center;gap:4px 40px;padding-top:4px}}

/* warehouse en team · Foshan — drie kolommen op één basislijn */
.ww-plaats{position:relative;display:grid;gap:22px;margin-top:clamp(28px,3.6vw,44px);padding-top:clamp(26px,3.2vw,40px)}
.ww-plaats::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--lijn-goud) 14%,var(--lijn-goud) 86%,transparent)}
.ww-plaats__kop{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;align-items:center}
.ww-plaats__zegel{grid-row:1 / span 2;rotate:-4deg}
.ww-plaats__label{margin:0;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt);white-space:nowrap}
.ww-plaats__sub{margin:2px 0 0}
.ww-plaats__lijst{list-style:none;display:grid;gap:18px;margin:0;padding:0}
.ww-plaats__lijst > li{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;align-content:start;align-items:start}
.ww-plaats__ico{grid-row:1 / span 2;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--dgoud);
  box-shadow:inset 0 0 0 1px var(--lijn-goud),inset 0 0 0 4px var(--rijst),inset 0 0 0 5px rgba(var(--dgoud-rgb),.25)}
.ww-plaats__ico .s-ico{width:24px;height:24px}
.ww-plaats__titel{grid-column:2;margin:3px 0 6px;font:500 1rem/1.25 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.ww-plaats__lijst p{grid-column:2;margin:0;font-size:.9375rem;line-height:1.5;color:var(--grijs1);text-wrap:pretty}
@media (min-width:768px){.ww-plaats__label{font-size:.8125rem;letter-spacing:.22em}.ww-plaats__lijst{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media (min-width:1024px){.ww-plaats{gap:26px}.ww-plaats__kop{grid-template-columns:48px auto;justify-content:start}.ww-plaats__lijst{gap:40px}.ww-plaats__lijst p{max-width:34ch}}
@media (max-width:389px){.ww-plaats__kop{grid-template-columns:minmax(0,1fr);row-gap:10px}.ww-plaats__zegel{grid-row:auto;width:40px;height:40px}.ww-plaats__label{letter-spacing:.14em}}

/* ================================================================ 二 ZEVEN STAPPEN IN DRIE FASEN — per fase: kop in het hoofdstukraster (klein teken in de marge) · één plaat ·
   stapkaarten op papier met een fijne dubbele goudrand en hoekjes (kleiner dan het grote meanderkader); mobiel een veegrij per fase */
.ww-fase{position:relative;padding-top:clamp(64px,6.4vw,92px)}
.ww-fase + .ww-fase::before{content:"";position:absolute;left:0;right:0;top:clamp(18px,2.2vw,30px);height:12px;
  background:url('../../../kozijnen/werkwijze/beeld/orn-ruit.svg?v=4c498dfc') center/44px 12px no-repeat,
    linear-gradient(90deg,transparent,var(--lijn-goud) 14%,var(--lijn-goud) calc(50% - 34px),transparent calc(50% - 34px),transparent calc(50% + 34px),var(--lijn-goud) calc(50% + 34px),var(--lijn-goud) 86%,transparent) 0 50%/100% 1px no-repeat}
.ww-stappen .s-titelblok + .ww-fase{padding-top:clamp(4px,1vw,12px)}
.ww-fase__kop{position:relative;display:grid;gap:10px;margin-bottom:clamp(18px,2.4vw,30px)}
.ww-fase__teken{position:absolute;right:0;top:-2px;width:46px;height:46px;mix-blend-mode:multiply;opacity:.86}
.ww-fase__nr{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0;padding-right:58px;font:500 .875rem/1 var(--f-kop);letter-spacing:.3em;text-transform:uppercase;color:var(--dgoud)}
.ww-fase__nr img{width:34px;height:34px;rotate:-3deg}
.ww-fase__stappen{font:500 .875rem/1 var(--f-mono);letter-spacing:.02em;text-transform:none;color:var(--grijs2)}
.ww-fase__stappen::before{content:"";display:inline-block;width:14px;height:1px;margin:0 10px 4px 0;background:var(--lijn-goud);vertical-align:middle}
.ww-fase__titel{margin:4px 0 0;font:400 clamp(1.75rem,3vw,2.625rem)/1.06 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt)}
.ww-fase__titel em{display:block;margin-top:.1em;font:italic 400 .86em/1.05 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--dgoud)}
.ww-fase__lede{position:relative;margin:4px 0 0;padding-top:14px;max-width:36ch;font:italic 400 1.1875rem/1.45 var(--f-serif);color:var(--inkt2);text-wrap:pretty}
.ww-fase__lede::before{content:"";position:absolute;left:0;top:0;width:40px;height:2px;background:var(--goud)}
.ww-fase__beeld{margin:0;min-width:0}
.ww-fase__bijschrift{margin:14px 0 0;text-align:center;text-wrap:balance}
/* de plaat: render op rijstpapier in een dubbele goudlijst, met zon en mist; de render lost op in het papier (alfa, geen rechthoek) */
.ww-plaat{position:relative;margin:7px;overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px var(--lijn-goud-sterk),0 0 0 6px var(--rijst),0 0 0 7px var(--lijn-goud),0 16px 32px rgba(var(--inkt-rgb),.10)}
.ww-plaat--papier{padding:clamp(18px,3vw,40px) clamp(10px,2vw,28px) 0;background:var(--rijst) url('../../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/420px 420px}
.ww-plaat__beeld{position:relative;width:min(100%,880px);margin-inline:auto}
.ww-plaat__beeld picture{display:block}
.ww-plaat__beeld img{display:block;width:100%;height:auto}
.ww-plaat__zon{position:absolute;left:62%;top:42%;width:min(52%,520px);aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,242,210,.8) 0,rgba(var(--goud-rgb),.5) 34%,rgba(var(--goud-rgb),.42) 52%,rgba(var(--goud-rgb),.12) 66%,rgba(var(--goud-rgb),0) 72%)}
.ww-plaat__zon--links{left:36%}
.ww-plaat__nevel{position:absolute;left:-10%;right:-10%;bottom:-2%;height:22%;background:url('../../kit/svg/land/nevel.svg?v=caf49ff3') center/100% 100% no-repeat;opacity:.8;pointer-events:none}
/* fase II: drie producten in één scène (één licht, één basislijn, gelijke schaal); vloer loopt weg in het papier; namen op een gouden maatlijn */
.ww-plaat--producten{padding-bottom:clamp(20px,3vw,40px)}
.ww-plaat--producten .ww-plaat__beeld{width:min(100%,1000px)}
.ww-plaat__vloer{position:absolute;left:4%;right:4%;bottom:12%;height:30%;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(var(--inkt-rgb),.07),rgba(var(--inkt-rgb),.025) 55%,transparent 72%)}
.ww-maatlijn{list-style:none;position:relative;height:40px;margin:6px 0 0;padding:0}
.ww-maatlijn > li{position:absolute;left:var(--l);right:calc(100% - var(--r));top:0;height:16px;border-inline:1px solid var(--dgoud)}
.ww-maatlijn > li::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--dgoud)}
.ww-maatlijn > li > span{position:absolute;left:50%;top:50%;translate:-50% -50%;padding:0 10px;background:var(--rijst) url('../../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/420px 420px;
  font:500 .8125rem/1 var(--f-mono);color:var(--inkt2);white-space:nowrap}
@media (max-width:599px){.ww-maatlijn{display:none}.ww-plaat--producten .ww-plaat__beeld{width:min(100%,420px)}}
/* genummerde medaillons op de kozijnen; korte stagger (alles staat er binnen ± 0,6 s) */
.ww-med{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.ww-med > li{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:26px;height:26px;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F3DD9A,#D9B45C 55%,#B08A32);color:var(--inkt);font:600 .875rem/1 var(--f-mono);
  box-shadow:0 0 0 1.5px var(--rijst),0 0 0 2.5px rgba(var(--dgoud-rgb),.8),0 3px 8px rgba(var(--inkt-rgb),.35)}
html.ww-beweeg .ww-fase__beeld:not(.is-zichtbaar) .ww-med > li{opacity:0;scale:.6}
html.ww-beweeg .ww-med > li{transition:opacity .26s var(--s-ease-inkt),scale .26s var(--s-ease-stempel);transition-delay:calc(.08s + var(--i,0) * .04s)}
@media (min-width:1024px){.ww-med > li{width:32px;height:32px}}

/* stapkaarten */
.ww-rij{list-style:none;margin:clamp(26px,3.4vw,44px) 0 0;padding:0;display:grid;gap:16px}
.ww-stap{--hoek:10px;position:relative;display:flex;flex-direction:column;min-width:0;padding:22px 22px 18px;
  background:
    linear-gradient(var(--dgoud),var(--dgoud)) left 7px top 7px/var(--hoek) 1px,linear-gradient(var(--dgoud),var(--dgoud)) left 7px top 7px/1px var(--hoek),
    linear-gradient(var(--dgoud),var(--dgoud)) right 7px top 7px/var(--hoek) 1px,linear-gradient(var(--dgoud),var(--dgoud)) right 7px top 7px/1px var(--hoek),
    linear-gradient(var(--dgoud),var(--dgoud)) left 7px bottom 7px/var(--hoek) 1px,linear-gradient(var(--dgoud),var(--dgoud)) left 7px bottom 7px/1px var(--hoek),
    linear-gradient(var(--dgoud),var(--dgoud)) right 7px bottom 7px/var(--hoek) 1px,linear-gradient(var(--dgoud),var(--dgoud)) right 7px bottom 7px/1px var(--hoek),
    linear-gradient(170deg,rgba(255,252,243,.72),rgba(var(--rijst-rgb),.35));
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px var(--lijn-goud),inset 0 0 0 4px rgba(var(--rijst-rgb),.6),inset 0 0 0 5px rgba(var(--dgoud-rgb),.32),0 10px 26px rgba(var(--inkt-rgb),.06)}
.ww-stap__kop{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(var(--dgoud-rgb),.3)}
.ww-stapnr{flex:none;display:block;width:34px;height:34px;rotate:-3deg}
.ww-stap__moment{flex:1;min-width:0;margin:0;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--dgoud)}
.ww-stap__teller{flex:none;font:500 .875rem/1 var(--f-mono);color:var(--grijs2)}
.ww-stap__titel{margin:0 0 10px;font:500 1.25rem/1.2 var(--f-kop);letter-spacing:.08em;text-transform:uppercase;color:var(--inkt);text-wrap:balance}
.ww-stap__tekst{margin:0;color:var(--inkt2);text-wrap:pretty}
.ww-stap__niet{margin:14px 0 0}
/* "U krijgt": ruitopsomming met een gouden onderlijn (zoals de subtotalen in de offerte) */
.ww-krijgt{margin:16px 0 0;padding-top:12px;border-top:1px dashed rgba(var(--dgoud-rgb),.35)}
.ww-krijgt__label{margin:0 0 6px;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--dgoud)}
.ww-krijgt__lijst{list-style:none;margin:0;padding:0 0 10px;display:grid;gap:4px;
  background:linear-gradient(90deg,var(--goud),rgba(var(--goud-rgb),.25)) 0 100%/100% 1px no-repeat}
.ww-krijgt__lijst > li{position:relative;padding-left:20px;font:500 .875rem/1.5 var(--f-mono);color:var(--inkt)}
.ww-krijgt__lijst > li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;rotate:45deg;background:var(--goud);box-shadow:0 0 0 1px rgba(var(--dgoud-rgb),.5)}
.ww-stap__link{margin-top:auto;padding-top:16px;align-self:flex-start}
.ww-rij__teller{display:none}
/* mobiel: veegrij per fase (scroll-snap), volgende kaart piept in beeld; teller + puntjes */
@media (max-width:767px){
  .ww-rij{grid-auto-flow:column;grid-auto-columns:calc(100% - 36px);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(var(--s-goot,16px) * -1);padding:4px var(--s-goot,16px) 10px;scroll-padding-inline:var(--s-goot,16px)}
  .ww-rij::-webkit-scrollbar{display:none}
  .ww-stap{scroll-snap-align:start;padding:20px 18px 16px}
  .ww-rij__teller{display:flex;align-items:center;gap:14px;margin:6px 0 0;font:500 .875rem/1 var(--f-mono);color:var(--grijs2)}
  .ww-rij__punten{display:flex;gap:7px}
  .ww-rij__punten i{width:7px;height:7px;rotate:45deg;box-shadow:inset 0 0 0 1px var(--dgoud);transition:background-color .3s var(--s-ease-inkt)}
  .ww-rij__punten i.is-aan{background:var(--goud)}
  .ww-rij__tel b{font-weight:500;color:var(--inkt)}
  .ww-rij__veeg{margin-left:auto;font:italic 400 .9375rem/1 var(--f-serif);color:var(--grijs1)}
  .ww-fase__teken{width:44px;height:44px}
}
@media (min-width:768px) and (max-width:1023px){.ww-rij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .ww-fase__kop{grid-template-columns:96px minmax(0,1fr) minmax(320px,.8fr);column-gap:24px;align-items:end;row-gap:10px}
  .ww-fase__teken{position:static;grid-column:1;grid-row:1 / span 2;justify-self:center;align-self:center;width:64px;height:64px}
  .ww-fase__kop > .ww-fase__nr{grid-column:2;grid-row:1;padding-right:0}
  .ww-fase__kop > .ww-fase__titel{grid-column:2;grid-row:2}
  .ww-fase__kop > .ww-fase__lede{grid-column:3;grid-row:1 / span 2;align-self:end;margin:0 0 4px;padding:0 0 0 20px}
  .ww-fase__lede::before{width:2px;height:100%;top:4px}
  .ww-fase__nr{font-size:.75rem;letter-spacing:.34em}
  .ww-fase__stappen{font-size:.8125rem}
  .ww-rij{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:28px}
  .ww-stap{padding:26px 26px 20px}
  .ww-stap + .ww-stap::before{content:"";position:absolute;left:-28px;top:42px;width:28px;height:1px;background:repeating-linear-gradient(90deg,var(--dgoud) 0 2px,transparent 2px 6px)}
  .ww-stapnr{width:38px;height:38px}
  .ww-stap__moment{font-size:.75rem;letter-spacing:.3em}
  .ww-stap__teller{font-size:.8125rem}
  .ww-stap__titel{font-size:1.3125rem}
  .ww-krijgt__label{font-size:.75rem;letter-spacing:.3em}
  .ww-krijgt__lijst > li{font-size:.8125rem}
}

/* het controleblad (fase II): kozijn in de gevel, randen opgelost in het papier, maatlijnen op de kozijnranden · 信 naast de kop · checklist ·
   een rij polaroids 'foto's van de controle' */
.ww-qc{position:relative;display:grid;gap:26px;margin-top:32px;padding:30px 20px;
  background:linear-gradient(160deg,rgba(255,252,243,.75),rgba(var(--rijst-rgb),.5));
  box-shadow:inset 0 0 0 1px var(--lijn-goud),inset 0 0 0 5px rgba(255,252,243,.0),inset 0 0 0 6px rgba(var(--dgoud-rgb),.35)}
.ww-qc__plaat{margin:0;justify-self:center;width:min(100%,360px)}
.ww-qc__beeld{position:relative}
.ww-qc__beeld picture{display:block}
.ww-qc__beeld img{display:block;width:100%;height:auto}
.ww-qc__maat{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--dgoud);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.ww-qc__maat path{vector-effect:non-scaling-stroke}
.ww-qc__b,.ww-qc__h{position:absolute;padding:3px 7px;font:500 .875rem/1 var(--f-mono);color:var(--dgoud);background:var(--rijst);white-space:nowrap;border-radius:2px}
.ww-qc__b{left:49.9%;top:95.6%;translate:-50% -50%}
.ww-qc__h{left:94.9%;top:49.7%;translate:-50% -50%;rotate:-90deg}
.ww-qc__voorbeeld{margin:12px 0 0;font:italic 400 .9375rem/1.4 var(--f-serif);color:var(--grijs1);text-wrap:balance}
.ww-qc__lijst{min-width:0}
.ww-qc__titel{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--inkt)}
.ww-qc__zegel{flex:none;width:40px;height:40px;rotate:-5deg}
.ww-qc__qc{display:inline-grid;place-items:center;height:24px;padding:0 8px;background:var(--inkt);color:var(--goud);font:500 .875rem/1 var(--f-mono);letter-spacing:.08em}
.ww-qc__punten{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0;padding:0 0 18px;border-bottom:1px solid rgba(var(--dgoud-rgb),.3)}
.ww-qc__punten > li{display:flex;align-items:center;gap:10px;font:500 .9375rem/1.2 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt)}
.ww-qc__fotos{display:grid;grid-template-columns:repeat(3,minmax(0,92px));gap:14px;align-items:start;margin-top:18px}
.ww-qc__fotolabel{grid-column:1 / -1;margin:0 0 2px;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--dgoud)}
.ww-polaroid{display:block;padding:5px 5px 16px;background:#FBF8F1;rotate:var(--d,0deg);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 14px rgba(var(--inkt-rgb),.16),0 1px 3px rgba(var(--inkt-rgb),.1)}
.ww-polaroid picture{display:block;aspect-ratio:1;overflow:hidden}
.ww-polaroid img{display:block;width:100%;height:100%;object-fit:cover}
.ww-qc__slot{margin:18px 0 0;font:italic 400 1.1875rem/1.45 var(--f-serif);color:var(--inkt2);text-wrap:balance}
.ww-vink{flex:none;width:24px;height:24px;padding:3px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--lijn-goud);fill:none;stroke:var(--dgoud);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html.ww-beweeg .ww-qc .ww-vink path{stroke-dasharray:1 1;transition:stroke-dashoffset .5s var(--s-ease-inkt)}
html.ww-beweeg .ww-qc:not(.is-zichtbaar) .ww-vink path{stroke-dashoffset:.5}
html.ww-beweeg .ww-qc.is-zichtbaar li:nth-child(2) .ww-vink path{transition-delay:.08s}
html.ww-beweeg .ww-qc.is-zichtbaar li:nth-child(3) .ww-vink path{transition-delay:.16s}
html.ww-beweeg .ww-qc.is-zichtbaar li:nth-child(4) .ww-vink path{transition-delay:.24s}
html.ww-beweeg .ww-qc.is-zichtbaar li:nth-child(5) .ww-vink path{transition-delay:.32s}
@media (min-width:768px){.ww-qc__titel{font-size:.75rem;letter-spacing:.3em}.ww-qc__fotolabel{font-size:.75rem;letter-spacing:.3em}}
@media (min-width:1024px){
  .ww-qc{grid-template-columns:400px minmax(0,1fr);align-items:center;gap:0 64px;margin-top:clamp(36px,4vw,52px);padding:46px 64px 46px 44px}
  .ww-qc__plaat{width:400px}
  .ww-qc__punten{grid-template-columns:repeat(5,auto);justify-content:start;gap:12px 24px}
  .ww-qc__punten > li{font-size:.875rem;letter-spacing:.1em}
  .ww-qc__fotos{grid-template-columns:repeat(3,104px);gap:18px}
}

/* ================================================================ 三 HOE LANG DUURT HET? — cartouche: 期 groot op de plek van het titelteken (één symbool), folio in het kader */
.ww-tijd__kader{position:relative;display:grid;gap:28px;background:linear-gradient(160deg,rgba(243,233,207,.8),rgba(235,221,185,.45))}
.ww-tijd__links{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.ww-tijd__teken{position:absolute;right:0;top:0;width:56px;height:56px;mix-blend-mode:multiply;opacity:.88}
.ww-tijd .s-titelblok__rubriek{margin-bottom:12px;padding-right:64px}
.ww-tijd .s-zegel-nr,.ww-tijd .s-zegel-nr > span,.ww-tijd .s-titelblok__rubriek .s-kicker{white-space:nowrap}
.ww-tijd .s-h2{margin:0;padding-right:60px}
.ww-tijd__tekst{margin:18px 0 0;max-width:40ch;font:italic 400 1.25rem/1.45 var(--f-serif);color:var(--inkt2);text-wrap:pretty}
.ww-tijd__deadline{margin:12px 0 2px;max-width:52ch;color:var(--grijs1);text-wrap:pretty}
.ww-tijd__factortitel{margin:0 0 14px;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--dgoud)}
.ww-factoren{list-style:none;display:grid;gap:0;margin:0;padding:0}
.ww-factoren > li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:12px 0;border-top:1px solid rgba(var(--dgoud-rgb),.28)}
.ww-factoren > li:last-child{border-bottom:1px solid rgba(var(--dgoud-rgb),.28)}
.ww-factoren__ico{grid-row:1 / span 2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--dgoud);box-shadow:inset 0 0 0 1px var(--lijn-goud)}
.ww-factoren__ico .s-ico{width:22px;height:22px}
.ww-factoren b{font:500 .9375rem/1.3 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt);font-weight:500}
.ww-factoren span:not(.ww-factoren__ico){font-size:.9375rem;line-height:1.4;color:var(--grijs1)}
.ww-tijd__noot{position:relative;margin:18px 0 0;padding-left:18px;font:italic 400 1.0625rem/1.45 var(--f-serif);color:var(--grijs1);text-wrap:pretty}
.ww-tijd__noot::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:1.5px;background:var(--goud)}
.ww-tijd .ww-folio--binnen{grid-column:1 / -1}
/* mobiel: 'waar het van afhangt' als 2 × 2 raster (icoon boven, titel, korte tekst) */
@media (max-width:767px){
  .ww-factoren{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  .ww-factoren > li{grid-template-columns:minmax(0,1fr);row-gap:8px;align-content:start;padding:14px 0 16px}
  .ww-factoren > li:nth-last-child(2){border-bottom:1px solid rgba(var(--dgoud-rgb),.28)}
  .ww-factoren__ico{grid-row:auto}
  .ww-factoren b{font-size:.875rem;letter-spacing:.1em}
}
@media (min-width:768px){.ww-tijd__factortitel{font-size:.75rem;letter-spacing:.3em}}
@media (min-width:1024px){
  .ww-tijd__kader{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:52px 52px 34px}
  .ww-tijd__teken{position:static;width:84px;height:84px;margin-top:2px}
  .ww-tijd .s-h2,.ww-tijd .s-titelblok__rubriek{padding-right:0}
  .ww-tijd__links{grid-column:1 / 8;grid-template-columns:96px minmax(0,1fr);gap:0 24px;align-items:start}
  .ww-tijd__rechts{grid-column:8 / 13;padding-top:6px}
}

/* ================================================================ 四 WAT U AANLEVERT — schets op rijstpapier (beeldanker) + legenda */
.ww-aanleveren__raster{display:grid;gap:clamp(28px,4vw,48px)}
.ww-schets{margin:0;min-width:0}
.ww-schets__vel{position:relative;aspect-ratio:400 / 470;max-width:min(440px,calc(100% - 10px));margin-inline:auto;padding:4%;rotate:-1.6deg;overflow:clip;
  background:#F8F4EA url('../../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/420px 420px;border:1px solid rgba(var(--dgoud-rgb),.25);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 36px rgba(var(--inkt-rgb),.14),0 3px 6px rgba(var(--inkt-rgb),.08)}
.ww-schets__tekening{display:block;width:100%;height:100%;overflow:visible}
.ww-schets__tak{--op-tak:.9;top:-10px;right:-26px;width:min(50%,210px);z-index:1}
.ww-schets__nr{position:absolute;left:var(--x);top:var(--y);z-index:3;display:grid;place-items:center;width:28px;height:28px;translate:-50% -50%;border-radius:50%;
  background:var(--rijst);font:500 .875rem/1 var(--f-mono);color:var(--inkt);box-shadow:inset 0 0 0 1.5px var(--goud),inset 0 0 0 4px var(--rijst),inset 0 0 0 5px var(--dgoud),0 2px 6px rgba(var(--inkt-rgb),.18)}
.ww-schets__foto{position:absolute;right:6%;top:14%;z-index:2;width:22%;padding:4px 4px 14px;background:#FBF8F1;rotate:7deg;box-shadow:0 6px 14px rgba(var(--inkt-rgb),.18)}
.ww-schets__foto picture{display:block;aspect-ratio:1;overflow:hidden}
.ww-schets__foto img{width:100%;height:100%;object-fit:cover}
.ww-schets__foto i{position:absolute;left:38%;top:-8px;width:26%;height:16px;background:rgba(235,224,196,.85);rotate:-6deg;box-shadow:0 1px 2px rgba(var(--inkt-rgb),.12)}
.ww-schets__zegel{position:absolute;left:8.5%;top:49%;z-index:2;rotate:-6deg;line-height:0;opacity:.92}
.ww-schets__zegel .s-zegel-svg{width:40px;height:40px}
.ww-schets__bijschrift{margin:22px auto 0;max-width:34ch;text-align:center;text-wrap:balance}
.ww-legenda{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;margin:0;padding:0;align-content:start}
.ww-legenda > li{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:18px;align-content:start;align-items:start;padding:20px 0;
  background:linear-gradient(90deg,transparent,var(--lijn-goud) 12%,var(--lijn-goud) 88%,transparent) 0 0/100% 1px no-repeat}
.ww-legenda__ico{grid-row:1 / span 2;position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--inkt);background:var(--rijst);
  box-shadow:inset 0 0 0 2px var(--goud),inset 0 0 0 5px var(--rijst),inset 0 0 0 6px rgba(var(--dgoud-rgb),.55)}
.ww-legenda__ico .s-ico{width:26px;height:26px}
.ww-legenda__nr{position:absolute;right:-7px;top:-5px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--rijst);
  box-shadow:inset 0 0 0 1px var(--lijn-goud);font:500 .875rem/1 var(--f-mono);color:var(--dgoud)}
.ww-legenda__titel{grid-column:2;margin:4px 0 6px;font:500 1rem/1.25 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.ww-legenda p{grid-column:2;margin:0;font-size:.9375rem;line-height:1.55;color:var(--grijs1);text-wrap:pretty}
@media (min-width:640px){.ww-legenda{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .ww-aanleveren__raster{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  .ww-schets{grid-column:1 / 6;padding:10px 20px 0 0}
  .ww-legenda{grid-column:6 / 13;column-gap:32px}
  .ww-legenda > li{padding:24px 8px 24px 0}
  .ww-legenda__nr{font-size:.8125rem;width:22px;height:22px}
}
.ww-aanleveren__voet{display:grid;gap:18px;align-items:center;margin-top:14px;padding-top:24px;
  background:linear-gradient(90deg,transparent,var(--lijn-goud) 12%,var(--lijn-goud) 88%,transparent) 0 0/100% 1px no-repeat}
@media (min-width:1024px){.ww-aanleveren__voet{grid-template-columns:minmax(0,1fr) auto;gap:40px}}
.ww-noot{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;margin:0;max-width:66ch;font-size:.9375rem;line-height:1.55;color:var(--grijs1)}
.ww-noot .s-ico{width:20px;height:20px;margin-top:1px;color:var(--dgoud)}
.ww-lead-met-link .s-lead{margin:0}
.ww-lead-met-link .ww-tekstlink{margin-top:4px}

/* ================================================================ 五 TRANSPORT — titelblok bovenaan gelijk met de kist; exportkisten v2; daarna twee kolommen */
.ww-transport__kop{display:grid;gap:24px;margin-bottom:clamp(28px,3.4vw,44px)}
.ww-transport__titelblok{margin-bottom:0}
.ww-transport__lead{margin:6px 0 0;max-width:34ch;text-wrap:pretty}
.ww-kist{position:relative;margin:24px 0 0;isolation:isolate}
.ww-kist__zon{position:absolute;left:56%;top:44%;width:min(74%,440px);aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--goud-rgb),.42) 0,rgba(var(--goud-rgb),.34) 52%,rgba(var(--goud-rgb),.1) 66%,rgba(var(--goud-rgb),0) 72%)}
.ww-kist picture{display:block;width:88%;margin-inline:auto}
.ww-kist img{display:block;width:100%;height:auto}
.ww-kist__bijschrift{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 0;text-align:left;text-wrap:balance}
.ww-kist__zegel{flex:none;width:34px;height:34px;rotate:-6deg}
@media (min-width:1024px){
  .ww-transport__titelblok{grid-template-columns:96px minmax(0,1fr)}
  .ww-transport__kop{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  .ww-transport__titelblok{grid-column:1 / 7}
  .ww-transport__lead{font-size:1.375rem;max-width:30ch}
  .ww-kist{grid-column:7 / 13;margin:0 -20px 0 0}
  .ww-kist picture{width:94%}
  .ww-kist__bijschrift{justify-content:flex-end;padding-right:24px}
  .ww-kist__zegel{width:40px;height:40px}
}
.ww-transport__raster{display:grid;gap:40px}
.ww-transport__links > p:not([class]){margin:16px 0 18px;max-width:58ch}
.ww-transport__links .s-ruitlijst{gap:10px;margin:0 0 22px;padding:0}
.ww-transport__links > .ww-tekstlink{margin-top:10px}
.ww-transport__rechts .s-vervolg,.ww-transport__links .s-vervolg{margin:0}
@media (min-width:1024px){
  .ww-transport__raster{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .ww-transport__links{grid-column:1 / 6}
  .ww-transport__rechts{grid-column:7 / 13}
}
.ww-papier{display:grid;gap:22px;margin-top:20px}
.ww-stapel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;padding:6px 6px 10px}
.ww-vel{position:relative;display:flex;flex-direction:column;gap:8px;aspect-ratio:3 / 4;margin-inline:-3px;padding:12px 11px;overflow:hidden;
  background:#F8F4EA url('../../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/420px 420px;border:1px solid rgba(var(--dgoud-rgb),.28);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 24px rgba(var(--inkt-rgb),.13),0 2px 4px rgba(var(--inkt-rgb),.08)}
.ww-vel--1{z-index:1}.ww-vel--2{z-index:2}.ww-vel--3{z-index:3}
.ww-vel__kop{display:block;padding-bottom:6px;border-bottom:1px solid var(--inkt);font:500 .875rem/1.15 var(--f-kop);letter-spacing:.04em;text-transform:uppercase;color:var(--inkt)}
.ww-vel__fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.ww-vel__fotos picture{display:block;aspect-ratio:1;padding:2px;background:#FBF8F1;box-shadow:0 1px 3px rgba(var(--inkt-rgb),.18)}
.ww-vel__fotos img{width:100%;height:100%;object-fit:cover}
.ww-vel__tekening{width:100%;height:auto}
.ww-vel__regels{flex:1;background:repeating-linear-gradient(180deg,transparent 0 7px,rgba(var(--inkt-rgb),.14) 7px 8px);min-height:16px}
.ww-vel__rij{display:flex;align-items:center;gap:6px}
.ww-vel__code{flex:none;display:inline-grid;place-items:center;height:22px;padding:0 5px;background:var(--inkt);color:var(--goud);font:500 .75rem/1 var(--f-kop);font-style:normal;letter-spacing:.06em}
.ww-vel__lijn{flex:1;height:5px;background:linear-gradient(90deg,rgba(var(--inkt-rgb),.2) 0 62%,transparent 62% 76%,rgba(var(--dgoud-rgb),.6) 76%)}
.ww-vel__totaal{display:block;height:5px;margin-top:4px;border-top:1px solid var(--dgoud);border-bottom:1px solid var(--dgoud)}
.ww-vel__zegel{position:absolute;right:12px;bottom:12px;width:40px;height:40px;rotate:-6deg;opacity:.92}
@media (min-width:768px){
  .ww-vel{padding:14px 13px}
  .ww-vel--1{rotate:-4deg;translate:6px 8px}
  .ww-vel--2{rotate:1deg;translate:0 -2px}
  .ww-vel--3{rotate:5deg;translate:-6px 10px}
  .ww-vel__kop{font-size:.75rem;letter-spacing:.12em}
}
@media (max-width:767px){.ww-vel__code{font-size:.875rem}}
.ww-documenten{list-style:none;counter-reset:doc;display:grid;gap:14px 24px;margin:0;padding:0}
.ww-documenten > li{align-content:start;counter-increment:doc;display:grid;grid-template-columns:26px minmax(0,1fr);gap:2px 8px}
.ww-documenten > li::before{content:counter(doc,decimal-leading-zero);grid-row:1 / span 2;font:500 .8125rem/1.55 var(--f-mono);color:var(--dgoud)}
.ww-documenten b{font:500 .9375rem/1.3 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt);font-weight:500}
.ww-documenten span{font-size:.9375rem;line-height:1.5;color:var(--grijs1);text-wrap:pretty}
@media (min-width:640px){.ww-documenten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.ww-documenten > li::before{font-size:.875rem}}

/* ================================================================ 六 WAAROM WIJ — filmische scène: het schip vaart met de scroll van rechts naar links (naar Nederland)
   Het podium blijft sticky staan terwijl de sectie ± 1,6 schermhoogte scrollt; lagen schuiven met parallax (transform), de drie regels
   verschijnen na elkaar en aan het eind stempelt 直 (rechtstreeks; 平安 staat alleen bij het slot). Zonder JS / reduced motion: één stilstaand beeld met alle regels zichtbaar. */
.ww-waarom .s-titelblok{margin-bottom:clamp(20px,2.4vw,32px)}
.ww-film{position:relative;height:auto}
.ww-film__vel{position:relative;overflow:hidden;isolation:isolate;height:clamp(380px,38vw,500px);background:var(--rijst) url('../../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/420px 420px;
  box-shadow:inset 0 0 0 1px var(--lijn-goud-sterk),inset 0 0 0 6px rgba(var(--rijst-rgb),.9),inset 0 0 0 7px var(--lijn-goud)}
.ww-film__scene{position:absolute;inset:7px;overflow:hidden}
.ww-film__scene > *{position:absolute;pointer-events:none;will-change:transform}
.ww-film__zon{left:var(--zx,64%);top:var(--zy,34%);width:clamp(220px,30vw,380px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,205,.95) 0,rgba(var(--goud-rgb),.6) 34%,rgba(var(--goud-rgb),.46) 54%,rgba(var(--goud-rgb),.12) 68%,rgba(var(--goud-rgb),0) 74%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 88%);mask-image:linear-gradient(180deg,#000 55%,transparent 88%)}
.ww-film__laag{left:-25%;width:150%;background-repeat:no-repeat;background-position:center bottom;background-size:100% 100%}
.ww-film__bergen-ver{bottom:30%;height:34%;background-image:url('../../kit/afgeleid/bergen-ver-web.webp?v=5988c592');opacity:.34}
.ww-film__kust{bottom:22%;height:20%;background-image:url('../../kit/afgeleid/bergen-web.webp?v=b7ecbbad');opacity:.22;scale:-1 1;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 30%,transparent 55%);mask-image:linear-gradient(90deg,#000 0,#000 30%,transparent 55%)}
.ww-film__bergen-dicht{bottom:0;height:30%;background-image:url('../../kit/afgeleid/bergen-web.webp?v=b7ecbbad');opacity:.5;
  -webkit-mask-image:linear-gradient(0deg,transparent,#000 35%);mask-image:linear-gradient(0deg,transparent,#000 35%)}
.ww-film__nevel{background-image:url('../../kit/svg/land/nevel.svg?v=caf49ff3')}
.ww-film__nevel--ver{bottom:20%;height:24%;opacity:.85}
.ww-film__nevel--dicht{bottom:-4%;height:30%;opacity:.95}
.ww-film__tak{top:-18px;right:-24px;width:clamp(170px,22vw,300px);aspect-ratio:700/530;background:url('../../kit/afgeleid/tak-web.webp?v=e852fe12') right top/contain no-repeat;opacity:.95}
.ww-film__schip{left:50%;bottom:9%;width:clamp(280px,46%,560px);translate:-50% 0}
.ww-film__schip img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,.55) 84%,transparent 97%);mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,.55) 84%,transparent 97%)}
.ww-film__tekst{position:absolute;left:clamp(26px,6%,72px);top:clamp(26px,9%,52px);z-index:2;display:grid;gap:4px;max-width:min(40ch,60%)}
.ww-film__regel{margin:0;font:italic 400 clamp(1.375rem,2.3vw,2rem)/1.3 var(--f-serif);color:var(--inkt);text-wrap:balance;
  text-shadow:0 0 12px rgba(var(--rijst-rgb),.9),0 0 3px rgba(var(--rijst-rgb),.9);transition:color .6s var(--s-ease-inkt)}

.ww-film__zegel{position:absolute;right:clamp(190px,24vw,320px);top:clamp(26px,3vw,38px);z-index:2;width:clamp(44px,4vw,56px);height:auto;rotate:-5deg}
.ww-film__voortgang{position:absolute;left:50%;bottom:16px;z-index:2;width:120px;height:2px;translate:-50% 0;background:rgba(var(--dgoud-rgb),.25);display:none}
.ww-film__voortgang i{display:block;height:100%;width:100%;background:var(--dgoud);transform-origin:0 50%;transform:scaleX(var(--p,1))}
/* actief (JS + beweging): de scène loopt mee met de positie in de viewport (geen vastgezette lengte, dus nooit een leeg vlak);
   de regels blijven altijd leesbaar, de actieve regel kleurt goud; het zegel stempelt bij aankomst */
html.ww-film-aan .ww-film__regel.is-hier{color:var(--dgoud)}
html.ww-film-aan .ww-film__zegel.is-aan{animation:s-stempel-in .32s var(--s-ease-stempel) both}
html.ww-film-aan .ww-film__voortgang{display:block}
@media (max-width:767px){
  .ww-film__vel{height:min(100vw,430px)}
  .ww-film__tekst{left:20px;right:76px;top:22px;max-width:none;gap:2px}
  .ww-film__regel{font-size:1.25rem}
  .ww-film__schip{width:80%;bottom:13%}
  .ww-film__zon{width:220px;--zx:58%;--zy:34%}
  .ww-film__zegel{right:20px;top:20px;width:44px}
  .ww-film__bergen-ver{bottom:30%;height:22%}
  .ww-film__kust{height:14%}
  .ww-film__bergen-dicht{height:22%}
  .ww-film__tak{display:none}
}
/* in één oogopslag: de mono-maten van de offerte, op één rij */
.ww-oog{margin-top:clamp(36px,4.4vw,60px)}
.ww-oog__titel{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 18px;font:400 1.5rem/1.1 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.ww-oog__titel small{font:500 .875rem/1 var(--f-zh);letter-spacing:.4em;color:var(--dgoud);white-space:nowrap}
@media (max-width:767px){.ww-oog__titel{font-size:1.25rem}}
@media (min-width:1024px){.ww-film__regel{white-space:nowrap}}
.ww-oog__rijen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0}
.ww-oog__rijen > div{display:grid;align-content:start;gap:6px;padding:18px 16px 18px 0;border-top:1px solid rgba(var(--dgoud-rgb),.35)}
.ww-oog__rijen dt{font:500 .875rem/1.3 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--grijs2)}
.ww-oog__rijen dd{margin:0}
.ww-oog__waarde{font:300 2.5rem/1 var(--f-kop);letter-spacing:.02em;color:var(--inkt)}
.ww-oog__toel{font-size:.9375rem;line-height:1.45;color:var(--grijs1);text-wrap:pretty}
@media (max-width:389px){.ww-oog__waarde{font-size:2.125rem}}
.ww-oog__kort{display:none}
@media (max-width:767px){.ww-oog__kort{display:inline}.ww-oog__lang{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ww-oog__rijen dt{white-space:nowrap}}
@media (min-width:1024px){
  .ww-oog__rijen{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ww-oog__rijen > div{padding:22px 28px 6px 0;border-top:1px solid var(--inkt)}
  .ww-oog__rijen > div + div{padding-left:28px;box-shadow:-1px 0 0 rgba(var(--dgoud-rgb),.35)}
  .ww-oog__rijen dt{font-size:.75rem;letter-spacing:.3em}
  .ww-oog__waarde{font-size:3.25rem}
}

/* ================================================================ ritme, folio, slot */
/* folio = één scheider per hoofdstukovergang, zoals de voet van de offerte: dubbele goudlijn · ◇ RUBRIEK ◇ · dubbele goudlijn;
   in de omlijste hoofdstukken (1 en 3) staat hij binnen het kader. Mobiel: rubriek tussen twee gelijke lijnen, 'Hoofdstuk x / 6' eronder. */
.ww-folio{margin-top:clamp(44px,4.4vw,60px)}
.ww-folio--binnen{margin-top:clamp(30px,3.4vw,44px)}
.ww-folio__tekst{white-space:nowrap}
.ww-folio .s-folio__lijn{position:relative;gap:12px;color:var(--grijs2)}
.ww-folio .s-folio__lijn::before,.ww-folio .s-folio__lijn::after{content:"";flex:none;width:7px;height:7px;rotate:45deg;background:none;box-shadow:inset 0 0 0 1px var(--dgoud)}
.ww-folio .s-folio__site::after,.ww-folio .s-folio__nr::before{content:"";flex:1;height:4px;border-block:1px solid var(--lijn-goud)}
.ww-folio .s-folio__nr{display:flex;align-items:center;gap:16px}
@media (min-width:768px){.ww-folio .s-folio__site{display:flex;align-items:center;gap:16px}}
.ww-folio .s-folio__site::after{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 40%);mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 40%)}
.ww-folio .s-folio__nr::before{order:-1;-webkit-mask-image:linear-gradient(90deg,#000 60%,rgba(0,0,0,.25));mask-image:linear-gradient(90deg,#000 60%,rgba(0,0,0,.25))}
.ww-folio .s-folio__nr{justify-content:flex-end;gap:10px}
.ww-folio .s-folio__nr::before{margin-right:6px}
@media (min-width:768px){
  .ww-folio{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;font-size:.75rem}
  .ww-folio .s-folio__nr .s-zegel-svg{width:18px;height:18px}
}
@media (max-width:767px){
  .ww-folio{grid-template-columns:minmax(0,1fr);justify-items:stretch;row-gap:10px;margin-top:40px;font-size:.875rem;letter-spacing:.2em}
  .ww-folio--binnen{margin-top:28px}
  .ww-folio{position:relative}
  .ww-folio::before{content:"";position:absolute;left:0;right:0;top:8px;height:4px;border-block:1px solid var(--lijn-goud);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
  .ww-folio .s-folio__lijn{position:relative;justify-self:center;display:inline-flex;min-height:20px;padding:0 14px;background:var(--rijst)}
  .ww-folio .s-folio__nr{justify-content:center;font-size:.875rem}
  .ww-folio .s-folio__nr::before{display:none}
  .ww main > .s-sectie{padding-top:64px}
}

/* slot: de villa voor de zon met inktbergen eronder; het zegel staat op het papier rechtsonder (zoals de prijskaart in de offerte) */
.ww-slot{padding-top:calc(var(--ww-sectie) * .9)}
.ww-slot__scene{position:relative;max-width:1116px;margin:0 auto;isolation:isolate}
.ww-slot__zon{position:absolute;left:58%;top:40%;width:min(76vw,560px);aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,242,210,.9) 0,rgba(var(--goud-rgb),.58) 34%,rgba(var(--goud-rgb),.48) 52%,rgba(var(--goud-rgb),.16) 66%,rgba(var(--goud-rgb),0) 72%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 88%);mask-image:linear-gradient(180deg,#000 55%,transparent 88%)}
.ww-slot__beeld{position:relative;margin:0 auto;width:min(100%,780px)}
.ww-slot__beeld picture{display:block}
.ww-slot__beeld img{display:block;width:100%;height:auto}
.ww-slot__zegel{position:absolute;right:max(16px,calc(50% - 390px));bottom:8%;z-index:2;line-height:0;rotate:-5deg}
.ww-slot__zegel .s-zegel-svg{width:44px;height:44px}
@media (min-width:768px){.ww-slot__zegel .s-zegel-svg{width:56px;height:56px}}
.ww-slot__bergen{--op-bergen:.5;height:clamp(70px,10vw,140px);bottom:-6px;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.ww-slot__tekst{position:relative;padding-top:clamp(8px,1.6vw,20px)}
.ww-slot__kalli{display:block;width:112px;height:56px;margin:0 auto 14px;opacity:.88;mix-blend-mode:multiply}
.ww-slot__knoppen{margin-top:28px}
@media (max-width:767px){
  .ww-slot{padding-top:104px}
  .ww-slot__zon{top:46%}
  .ww-slot__beeld{width:104%;margin-left:-2%}
  .ww-slot__zegel{right:14px;bottom:-6px}
}
.ww-contact{list-style:none;display:grid;gap:4px;margin:26px auto 0;padding:0;max-width:300px}
.ww-contact a{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;min-height:52px;padding:6px 8px;
  text-align:left;text-decoration:none;color:var(--inkt);border-radius:2px}
.ww-contact a:hover .ww-contact__waarde{text-decoration:underline;text-decoration-color:var(--goud)}
.ww-contact a:focus-visible{outline:2px solid var(--inkt);outline-offset:2px}
.ww-contact__ico{grid-row:1 / span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--dgoud);box-shadow:inset 0 0 0 1px var(--lijn-goud)}
.ww-contact__ico .s-ico{width:18px;height:18px}
.ww-contact__label{font:500 .875rem/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--grijs2)}
.ww-contact__waarde{font:500 .9375rem/1.3 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:768px){
  .ww-contact{grid-template-columns:repeat(3,minmax(0,1fr));max-width:820px;gap:0}
  .ww-contact > li + li{box-shadow:-1px 0 0 var(--lijn-goud)}
  .ww-contact a{justify-content:center;grid-template-columns:36px auto;padding:6px 18px}
  .ww-contact__label{font-size:.75rem;letter-spacing:.26em}
}
@media (max-width:389px){
  .ww-omslag__knoppen .s-knop{padding:0 14px;font-size:.875rem;letter-spacing:.11em}
}
@media (max-width:767px){.ww-tijd .ww-folio--binnen::before{display:none}.ww-tijd .ww-folio--binnen .s-folio__lijn{background:none}}
.ww-kaart .s-routekaart__lab--dsd .ww-nb{font-size:1em;margin-top:1px}
.ww .ww-voetmeta{display:flex;flex-wrap:wrap;margin-left:-18px;clip-path:inset(-4px -4px -4px 18px)}
.ww .ww-voetmeta > span{position:relative;padding-left:18px;white-space:nowrap}
.ww .ww-voetmeta > span::before{content:"·";position:absolute;left:0;width:18px;text-align:center;color:var(--dgoud)}
.ww .ww-voetmeta > span:last-child{white-space:normal}
@media (max-width:767px){.ww-venster .s-routekaart__kompasring > circle:first-of-type{fill-opacity:.95}}

/* ================================================================ EINDKEURING
   omslag: het schip is het hoofdbeeld (± 60 % van het kader, de boeg steekt over de rechterlijn) en deint traag; mobiel volle breedte */
@media (min-width:1024px){
  .ww-omslag__beeld{margin:0 -30px -8px -24px;z-index:1}
  .ww-omslag__bijschrift{margin-right:48px}
}
@media (max-width:1023px){.ww-omslag__beeld{width:100%;margin:30px 0 0}}
@media (prefers-reduced-motion:no-preference){
  .ww-omslag__beeld picture{animation:ww-deining 6s ease-in-out infinite alternate}
  @keyframes ww-deining{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(0,-3px,0) rotate(-.3deg)}}
}
/* filmscène: de tekstkolom blijft vrij van de zongloed, het zegel staat als handtekening onder het citaat, geen losse voortgangsstreep */
@media (min-width:768px){
  .ww-film__tekst{max-width:min(420px,46%)}
  .ww-film__zon{--zx:72%}
  .ww-film__zegel{right:auto;left:calc(clamp(26px,6%,72px) + min(430px,47%));top:clamp(30px,9.5%,56px)}
}
.ww-film__voortgang{display:none!important}
@media (max-width:767px){.ww-film__vel{height:auto;aspect-ratio:4/5}.ww-film__schip{width:90%}}

/* ================================================================ EEN DOCUMENT (eenheid.css) — doorlooptijd in hetzelfde vel als elk hoofdstuk */
.ww-tijd__kader{background:none}
.ww-tijd__kader > .ww-tijd__titelblok{grid-column:1 / -1;margin-bottom:0}
@media (min-width:1024px){.ww-tijd__links{grid-template-columns:minmax(0,1fr)}}
.ww-waarom .ww-film{margin-bottom:clamp(20px,3vw,40px)}
/* één groot teken per hoofdstuk (in de hoofdstukbalk); fasen krijgen geen eigen kalligrafie */
.ww-fase__teken{display:none}
@media (min-width:1024px){
  .ww-transport__kop > .ww-transport__titelblok{grid-column:1 / -1}
  .ww-transport__kop > .ww-kist{grid-column:3 / 11}
}
@media (min-width:1024px){
  .ww-fase__kop{grid-template-columns:minmax(0,1fr) minmax(320px,.8fr)}
  .ww-fase__kop > .ww-fase__nr,.ww-fase__kop > .ww-fase__titel{grid-column:1}
  .ww-fase__kop > .ww-fase__lede{grid-column:2}
}