/* =====================================================================
   website/site/assets/css/site.css — dragonimports.nl in "Inkt & rijstpapier" · RONDE 2 (fundament)
   Bovenop de kit-tokens (assets/kit/tokens/dist/dsd-tokens.css) en de kit-fonts (assets/kit/assets/fonts/woff2/fonts.css).
   Eigenaar: fundament (zie website/ronde2/FUNDAMENT.md en ONTWERP.md §1). Pagina-bouwers voegen GEEN regels toe aan dit
   bestand, maar schrijven in assets/css/pagina/<pagina>.css (prefix per pagina). Afwijkingen alleen via een modifier.
   Prefix: .s-  (site). Mobiel eerst: tekst >= 14px, tikvlakken >= 44px, geen horizontale scroll, vaste balken 100 % dekkend.
   Beweging: alleen transform/opacity/mask/clip-path/stroke-dashoffset; startstanden alleen onder html.js-beweeg (beweeg.js).
   Inhoud:  0 tokens · 1 basis · 2 raster · 3 typografie · 4 knoppen · 5 ornament (vel/kader/zegels/nummers/ornamentlijn) ·
            6 blokken ronde 1 (blijven werken) · 7 componenten ronde 2 (C03–C23) · 8 routekaart (C15) · 9 chroom (C24) ·
            10 voet · 11 beweging · 12 print
   ===================================================================== */

/* ================================================================ 0 TOKENS */
:root{
  --s-fs-label:.875rem;           /* kleinste tekst op mobiel (14px) */
  --s-fs-tekst:1.0625rem;         /* lopende tekst desktop (17px) */
  --s-kop-h:64px;                 /* kop mobiel 64, desktop 68 (ingeklapt 56) */
  --s-subnav-h:48px;
  --s-actiebalk-h:64px;
  --s-rand:1px solid var(--lijn-goud);
  --s-rand-zacht:1px solid var(--lijn-goud-zacht);
  --s-vlak:rgba(var(--rijst-rgb),.72);
  --s-vlak-vol:rgba(var(--rijst-rgb),.94);
  --s-maan:radial-gradient(circle at 50% 50%,rgba(var(--goud-rgb),.42) 0,rgba(var(--goud-rgb),.30) 38%,rgba(var(--goud-rgb),.10) 62%,rgba(var(--goud-rgb),0) 71%);
  /* ritme (ONTWERP 1.1) */
  --sectie:clamp(56px,6.4vw,92px);
  --titelblok-na:clamp(28px,3vw,44px);
  --blok:24px;
  --s-goot:16px;
  /* ornament */
  --hoek:28px;                    /* vel/kader-hoek: 28 < 480 · 36 tot 900 · 44 vanaf 900 */
  --lijn-buiten:rgba(var(--dgoud-rgb),.60);
  --lijn-binnen:rgba(var(--dgoud-rgb),.45);
  --s-goudverloop:linear-gradient(180deg,#EBCF83 0%,#DDBA62 48%,#C9A24B 100%);
  --s-ease-inkt:cubic-bezier(.2,.7,.2,1);
  --s-ease-stempel:cubic-bezier(.3,1.6,.5,1);
}
@media (min-width:390px){:root{--s-goot:20px}}
@media (min-width:480px){:root{--hoek:36px}}
@media (min-width:768px){:root{--s-goot:20px;--s-subnav-h:52px}}
@media (min-width:900px){:root{--hoek:44px}}
@media (min-width:1024px){:root{--s-kop-h:68px;--s-goot:24px}}
@media (max-height:700px) and (max-width:767px){:root{--s-actiebalk-h:56px}}

/* ================================================================ 1 BASIS */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--s-kop-h) + var(--s-subnav-h) + 24px)}
body{margin:0;min-height:100vh;color:var(--inkt2);font-family:var(--f-tekst);font-size:1rem;line-height:1.6;
  background:var(--rijst) url('../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/768px 768px repeat;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern","liga";overflow-x:clip;hyphens:manual}
@media (min-width:768px){body{font-size:var(--s-fs-tekst);line-height:1.65}}
img,svg,video,canvas{max-width:100%}
img{display:block;height:auto}
picture{display:block}
::selection{background:var(--goudtint);color:var(--inkt)}
:focus-visible{outline:2px solid var(--dgoud);outline-offset:3px;border-radius:1px}
b,strong{font-weight:600;color:var(--inkt)}
p{margin:0 0 .9em}
p,li{text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:400;color:var(--inkt);text-wrap:balance}
a{color:inherit}
ul,ol{margin:0;padding:0}
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--lijn-goud),transparent);margin:var(--ruimte-6) 0}
[hidden]{display:none!important}
.s-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.s-nw{white-space:nowrap}
.s-skip{position:absolute;left:12px;top:-60px;z-index:var(--z-overlay);display:inline-flex;align-items:center;min-height:44px;background:var(--rijst);border:var(--s-rand);padding:12px 18px;
  font:500 var(--s-fs-label)/1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--inkt)}
.s-skip:focus{top:12px}

/* ================================================================ 2 RASTER (ONTWERP 1.1) */
/* container 1116 px binnen (x 162–1278 op 1440); vel = container + 2 × 32 px */
.s-container{width:100%;max-width:calc(1116px + 2 * var(--s-goot));margin-inline:auto;padding-inline:var(--s-goot)}
@media (min-width:1024px) and (max-width:1279px){.s-container{max-width:none;width:92vw;padding-inline:0}}
.s-container--smal{max-width:860px}
.s-container--vel{max-width:calc(1116px + 64px + 2 * var(--s-goot))}
.s-raster12{display:grid;grid-template-columns:minmax(0,1fr);column-gap:24px;row-gap:var(--blok)}
@media (min-width:768px){.s-raster12{grid-template-columns:repeat(8,minmax(0,1fr));column-gap:20px}}
@media (min-width:1024px){.s-raster12{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}}
.s-sectie{position:relative;padding-block:var(--sectie)}
.s-sectie + .s-sectie,.s-mist + .s-sectie{padding-top:calc(var(--sectie) * .4)}   /* nooit twee keer sectie-lucht op elkaar */
.s-sectie--compact{padding-block:clamp(28px,3.6vw,48px)}
.s-sectie--ruim{padding-block:clamp(72px,9vw,140px)}
.s-sectie--vlak{background:none}       /* ronde 2: één doorlopend rijstpapier (geen tintbanden) */
.s-raster{display:grid;gap:var(--s-gap,var(--ruimte-5));grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--s-kolom,280px)),1fr))}
.s-twee{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:960px){.s-twee{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.s-twee--breed-links{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .s-twee--breed-rechts{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.s-stapel{display:flex;flex-direction:column;gap:var(--s-gap,var(--ruimte-4))}
.s-tekst{max-width:64ch}
.s-midden{text-align:center;margin-inline:auto}

/* ================================================================ 3 TYPOGRAFIE (ONTWERP 1.2) */
.s-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--ruimte-4);font:500 .875rem/1.3 var(--f-kop);letter-spacing:.20em;
  text-transform:uppercase;color:var(--dgoud);white-space:nowrap}
@media (min-width:768px){.s-kicker{font-size:.75rem;letter-spacing:.30em}}
.s-nr{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 4px;background:var(--rood);color:var(--zegeltekst);
  font:700 .875rem/1 var(--f-zh);letter-spacing:0;border-radius:var(--straal-s);box-shadow:var(--schaduw-zegel)}
.s-h1{font-family:var(--f-kop);font-weight:300;font-size:1.875rem;line-height:1.14;letter-spacing:.14em;text-transform:uppercase;color:var(--inkt);overflow-wrap:break-word}
@media (min-width:390px){.s-h1{font-size:2.125rem}}
@media (min-width:768px){.s-h1{font-size:clamp(40px,4.4vw,64px)}}
.s-h2{font-family:var(--f-kop);font-weight:400;font-size:1.625rem;line-height:1.12;letter-spacing:.16em;text-transform:uppercase;color:var(--inkt)}
@media (min-width:390px){.s-h2{font-size:1.75rem}}
@media (min-width:768px){.s-h2{font-size:clamp(30px,3.2vw,46px)}}
.s-h3{font-family:var(--f-kop);font-weight:500;font-size:1.125rem;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--inkt)}
@media (min-width:768px){.s-h3{font-size:1.1875rem}}
.s-h4{font-family:var(--f-kop);font-weight:500;font-size:1rem;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt)}
@media (max-width:389px){.s-h1{letter-spacing:.10em}.s-h2{letter-spacing:.10em}}
/* cursief accent: altijd één ongebroken span (bouw.py koppelt de laatste woorden) */
.s-h1 em,.s-h2 em{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:1.05em;text-transform:none;letter-spacing:0;color:var(--dgoud);white-space:nowrap}
.s-vervolg{display:flex;align-items:center;gap:16px;font:400 1.125rem/1.1 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--inkt)}
@media (min-width:768px){.s-vervolg{font-size:1.375rem}}
.s-vervolg::after{content:"";flex:1;height:1px;background:var(--inkt);opacity:.8}
.s-meta{font:400 .875rem/1.3 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--grijs2)}
@media (min-width:768px){.s-meta{font-size:.8125rem}}
.s-lead{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.1875rem;line-height:1.42;color:var(--grijs1);max-width:36ch;text-wrap:balance}
@media (min-width:768px){.s-lead{font-size:1.4375rem}}
.s-kop-blok{margin-bottom:clamp(28px,4vw,48px)}
.s-kop-blok > * + *{margin-top:var(--ruimte-4)}
.s-kop-blok--midden{text-align:center}
.s-kop-blok--midden .s-lead{margin-inline:auto}
.s-klein{font-size:var(--s-fs-label);color:var(--grijs1)}
.s-bijschrift{font-family:var(--f-serif);font-style:italic;font-size:1rem;color:var(--grijs1)}   /* grijs1 op rijst = 8,1:1 */
@media (min-width:768px){.s-bijschrift{font-size:.9375rem}}
.s-mono{font-family:var(--f-mono);font-weight:500;font-size:.9375rem;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em}
.s-maat{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em;white-space:nowrap}
.s-codelabel{display:inline-flex;align-items:center;height:22px;padding:0 8px;background:var(--inkt);color:var(--goud);font:500 .875rem/1 var(--f-kop);
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
@media (min-width:768px){.s-codelabel{font-size:.8125rem}}
.s-kalli{font-family:var(--f-kalli);font-weight:400;line-height:1;color:var(--inkt)}
.s-kalli--v{writing-mode:vertical-rl;letter-spacing:.06em}
img.s-kalli{width:auto;opacity:.9}
.s-zh{font-family:var(--f-zh);font-weight:500;color:var(--dgoud)}
.s-bewijs{margin:0;font:500 .875rem/1.45 var(--f-mono);color:var(--grijs1);font-variant-numeric:tabular-nums}
.s-bewijs > span + span::before{content:" · ";color:var(--dgoud)}
.s-tel{font-family:var(--f-mono);font-weight:500;white-space:nowrap;letter-spacing:0}

/* ================================================================ 4 KNOPPEN (C22) */
.s-knop{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 calc(28px - .16em) 0 28px;
  border:1px solid rgba(var(--inkt-rgb),.8);border-radius:var(--straal-s);font:500 .9375rem/1.15 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;
  text-align:center;text-decoration:none;color:var(--inkt);background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;isolation:isolate;overflow:hidden;
  transition:transform var(--duur-kort) var(--ease),color var(--duur-kort) var(--ease)}
.s-knop::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(var(--inkt-rgb),.06);clip-path:inset(0 100% 0 0);transition:clip-path .32s var(--ease)}
.s-knop:hover::before{clip-path:inset(0 0 0 0)}
.s-knop:active{transform:translateY(1px)}
.s-knop:focus-visible{outline:0;box-shadow:0 0 0 2px var(--rijst),0 0 0 4px var(--inkt)}
.s-knop[disabled],.s-knop[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.s-knop[aria-busy=true]{cursor:progress}
.s-knop .s-ico{width:16px;height:16px}
.s-knop--goud{border-color:transparent;background:var(--s-goudverloop) 0 0/100% 160%;
  box-shadow:inset 0 1px 0 rgba(255,250,232,.65),inset 0 -1px 0 var(--dgoud),0 6px 18px rgba(var(--dgoud-rgb),.22);transition:background-position .3s var(--ease),transform var(--duur-kort) var(--ease)}
.s-knop--goud::before{inset:-1px auto -1px -40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,252,240,.55),transparent);clip-path:none;transform:translateX(0) skewX(-12deg);opacity:0}
.s-knop--goud:hover{background-position:0 100%}
@media (prefers-reduced-motion:no-preference){.s-knop--goud:hover::before{opacity:1;transform:translateX(560%) skewX(-12deg);transition:transform .6s var(--ease),opacity .1s}}
.s-knop--goud:focus-visible{box-shadow:inset 0 1px 0 rgba(255,250,232,.65),inset 0 -1px 0 var(--dgoud),0 0 0 2px var(--rijst),0 0 0 4px var(--inkt)}
.s-knop--inkt{color:var(--goud);border-color:var(--inkt);background:var(--inkt)}
.s-knop--inkt::before{background:rgba(var(--goud-rgb),.14)}
.s-knop--rand{background:transparent}
.s-knop--rand-goud{border-color:var(--dgoud)}
.s-knop--klein{min-height:44px;padding:0 calc(16px - .14em) 0 16px;font-size:.875rem;letter-spacing:.14em}
.s-knop--blok{width:100%}
.s-knoppen{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
@media (max-width:480px){.s-knoppen > .s-knop{flex:1 1 100%}}
.s-link{color:var(--dgoud);text-decoration:underline;text-decoration-color:rgba(var(--dgoud-rgb),.45);text-underline-offset:.22em;text-decoration-thickness:1px}
.s-link:hover{color:var(--inkt);text-decoration-color:var(--dgoud)}
.s-pijllink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 .875rem/1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt);text-decoration:none;background:linear-gradient(var(--dgoud),var(--dgoud)) 0 calc(100% - 10px)/100% 1px no-repeat}
.s-pijllink .s-ico{width:16px;height:16px;color:var(--dgoud);transition:transform var(--duur-kort) var(--ease)}
.s-pijllink:hover .s-ico{transform:translateX(4px)}
.s-ico{width:24px;height:24px;flex:none;display:inline-block;vertical-align:middle;overflow:visible}

/* ================================================================ 5 ORNAMENT */
/* C01 .s-vel — vel met dubbele goudrand en 回-hoeken. Lijnen stoppen bij het ornament (geen lijn door de hoek).
   <section class="s-vel"> … </section>  · varianten --fijn (alleen buitenlijn, hoek 28) · --plechtig (3 lijnen, hoek 56) · --waaier
   Hoeken en lijnen zitten in ::before/::after: geen extra markup, altijd exact symmetrisch (test A11). */
.s-vel,.s-kader{position:relative;--h:var(--hoek);--h2:calc(var(--h) * 2);--in:5px}
@media (max-width:479px){.s-vel,.s-kader{--in:4px}}
.s-vel::before,.s-kader::before,.s-vel::after,.s-kader::after{content:"";position:absolute;pointer-events:none}
.s-vel::before,.s-kader::before{inset:0;background:
  url('../beeld/orn/hoek-lb.svg?v=6851610d') 0 0/var(--h) var(--h) no-repeat,
  url('../beeld/orn/hoek-rb.svg?v=3a38563a') 100% 0/var(--h) var(--h) no-repeat,
  url('../beeld/orn/hoek-lo.svg?v=5db15fb6') 0 100%/var(--h) var(--h) no-repeat,
  url('../beeld/orn/hoek-ro.svg?v=e022f10a') 100% 100%/var(--h) var(--h) no-repeat,
  linear-gradient(var(--lijn-buiten),var(--lijn-buiten)) var(--h) 0/calc(100% - var(--h2)) 1px no-repeat,
  linear-gradient(var(--lijn-buiten),var(--lijn-buiten)) var(--h) 100%/calc(100% - var(--h2)) 1px no-repeat,
  linear-gradient(var(--lijn-buiten),var(--lijn-buiten)) 0 var(--h)/1px calc(100% - var(--h2)) no-repeat,
  linear-gradient(var(--lijn-buiten),var(--lijn-buiten)) 100% var(--h)/1px calc(100% - var(--h2)) no-repeat}
.s-vel::after,.s-kader::after{inset:var(--in);background:
  linear-gradient(var(--lijn-binnen),var(--lijn-binnen)) calc(var(--h) - var(--in)) 0/calc(100% - var(--h2) + 2 * var(--in)) 1px no-repeat,
  linear-gradient(var(--lijn-binnen),var(--lijn-binnen)) calc(var(--h) - var(--in)) 100%/calc(100% - var(--h2) + 2 * var(--in)) 1px no-repeat,
  linear-gradient(var(--lijn-binnen),var(--lijn-binnen)) 0 calc(var(--h) - var(--in))/1px calc(100% - var(--h2) + 2 * var(--in)) no-repeat,
  linear-gradient(var(--lijn-binnen),var(--lijn-binnen)) 100% calc(var(--h) - var(--in))/1px calc(100% - var(--h2) + 2 * var(--in)) no-repeat}
.s-vel{padding:clamp(28px,5vw,64px) clamp(18px,4vw,64px)}
.s-vel--fijn,.s-kader--fijn{--h:28px}
.s-vel--fijn::after,.s-kader--fijn::after{display:none}
.s-vel--plechtig{--h:56px;--in:4px}
.s-vel--plechtig > .s-vel__derde{position:absolute;inset:8px;pointer-events:none;background:
  linear-gradient(var(--lijn-binnen),var(--lijn-binnen)) calc(var(--h) - 8px) 0/calc(100% - var(--h2) + 16px) 1px no-repeat,
  linear-gradient(var(--lijn-binnen),var(--lijn-binnen)) calc(var(--h) - 8px) 100%/calc(100% - var(--h2) + 16px) 1px no-repeat,
  linear-gradient(var(--lijn-binnen),var(--lijn-binnen)) 0 calc(var(--h) - 8px)/1px calc(100% - var(--h2) + 16px) no-repeat,
  linear-gradient(var(--lijn-binnen),var(--lijn-binnen)) 100% calc(var(--h) - 8px)/1px calc(100% - var(--h2) + 16px) no-repeat;opacity:.7}
.s-vel--waaier::before{background:
  url('../beeld/orn/waaier-lb.svg?v=e0ad9ae1') 0 0/var(--h) var(--h) no-repeat,url('../beeld/orn/waaier-rb.svg?v=92dcf5ca') 100% 0/var(--h) var(--h) no-repeat,
  url('../beeld/orn/waaier-lo.svg?v=8e04fbb8') 0 100%/var(--h) var(--h) no-repeat,url('../beeld/orn/waaier-ro.svg?v=90e95fba') 100% 100%/var(--h) var(--h) no-repeat,
  linear-gradient(var(--lijn-buiten),var(--lijn-buiten)) var(--h) calc(var(--h) * .15)/calc(100% - var(--h2)) 1px no-repeat,
  linear-gradient(var(--lijn-buiten),var(--lijn-buiten)) var(--h) calc(100% - var(--h) * .15)/calc(100% - var(--h2)) 1px no-repeat,
  linear-gradient(var(--lijn-buiten),var(--lijn-buiten)) calc(var(--h) * .15) var(--h)/1px calc(100% - var(--h2)) no-repeat,
  linear-gradient(var(--lijn-buiten),var(--lijn-buiten)) calc(100% - var(--h) * .15) var(--h)/1px calc(100% - var(--h2)) no-repeat}
.s-vel--waaier::after{display:none}
/* C02 .s-kader v2 — zelfde lijnen/hoeken voor blokken binnen een sectie (oude .s-kader__hoek-markup wordt genegeerd) */
.s-kader{padding:clamp(22px,3.4vw,44px);background:rgba(var(--rijst-rgb),.55)}
.s-kader > .s-kader__hoek{display:none!important}
.s-kader--vol{background:var(--s-vlak-vol)}
.s-kader--leeg{background:none}

/* C04 nummering: hoofdstukzegel · stapnummer · pin */
.s-zegel-nr{display:inline-flex;align-items:center;gap:10px;font:500 .875rem/1 var(--f-mono);color:var(--dgoud);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.s-zegel-nr img{width:32px;height:32px;transform:rotate(-3deg)}
@media (min-width:768px){.s-zegel-nr{font-size:.8125rem}.s-zegel-nr img{width:28px;height:28px}}
.s-zegel-nr__tot{color:var(--grijs2)}
.s-stapnr{display:inline-grid;place-items:center;width:24px;height:24px;background:url('../kit/svg/zegel/leeg.svg?v=648606df') center/100% 100% no-repeat;
  color:var(--rijst);font:500 .8125rem/1 var(--f-mono);font-variant-numeric:tabular-nums}
@media (max-width:767px){.s-stapnr{width:28px;height:28px;font-size:.875rem}}
.s-pin{position:absolute;left:var(--px,50%);top:var(--py,50%);z-index:3;display:grid;place-items:center;width:30px;height:30px;padding:0;margin:0;border:1.5px solid var(--dgoud);border-radius:50%;
  translate:-50% calc(-100% - 18px);background:radial-gradient(circle at 38% 32%,#F6E7BD,var(--goud) 58%,var(--dgoud));color:var(--inkt);
  box-shadow:inset 0 0 0 3px rgba(var(--rijst-rgb),.0),inset 0 0 0 4px rgba(var(--rijst-rgb),.6),0 3px 8px rgba(var(--inkt-rgb),.25);
  font:500 .8125rem/1 var(--f-mono);text-decoration:none;cursor:pointer;transition:scale var(--duur-kort) var(--ease)}
.s-pin::before{content:"";position:absolute;left:50%;top:100%;width:2px;height:18px;margin-left:-1px;background:var(--dgoud)}
.s-pin::after{content:"";position:absolute;inset:-7px -7px -25px}           /* tikvlak 44 px incl. steel */
.s-pin:hover,.s-pin:focus-visible{scale:1.12}
.s-pin__tip{position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 4px;white-space:nowrap;padding:6px 10px;background:var(--s-vlak-vol);border:var(--s-rand);
  font:500 .8125rem/1.2 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),translate .2s var(--ease)}
.s-pin:hover .s-pin__tip,.s-pin:focus-visible .s-pin__tip{opacity:1;translate:-50% 0}

/* C05 .s-zegel v2 — merkzegels uit de sprite ({{zegel:long}}); maat via modifier, draaiing per plek in de HTML (style="--draai:-4deg") */
.s-zegel{display:inline-grid;place-items:center;padding:6px 5px;background:var(--rood);color:var(--zegeltekst);font:400 1.1rem/1.05 var(--f-kalli);
  writing-mode:vertical-rl;border-radius:var(--straal-s);box-shadow:var(--schaduw-zegel);transform:rotate(-3deg)}
.s-zegel-svg{width:40px;height:40px;color:var(--rood);rotate:var(--draai,0deg)}
.s-zegel-svg--24{width:24px;height:24px}.s-zegel-svg--32{width:32px;height:32px}.s-zegel-svg--48{width:48px;height:48px}.s-zegel-svg--64{width:64px;height:64px}

/* C19 .s-ornamentlijn ◇·◇ — <i class="s-ornamentlijn" aria-hidden="true"></i> (variant --met-zegel: zegel in het midden) */
.s-ornamentlijn{display:block;width:220px;height:12px;margin-block:var(--ruimte-5);background:url('../beeld/orn/ornamentlijn-smal.svg?v=69d6aeca') center/100% 100% no-repeat}
@media (min-width:768px){.s-ornamentlijn{width:360px;height:14px;background-image:url('../beeld/orn/ornamentlijn.svg?v=511adfb3')}}
.s-midden .s-ornamentlijn,.s-ornamentlijn--midden{margin-inline:auto}
.s-scheiding{display:flex;align-items:center;gap:12px;margin-block:var(--ruimte-5)}
.s-scheiding::before,.s-scheiding::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--lijn-goud),transparent)}
.s-scheiding > i{width:8px;height:8px;transform:rotate(45deg);background:var(--goud);box-shadow:0 0 0 3px var(--rijst),0 0 0 4px var(--lijn-goud)}
.s-hui{height:12px;background:url('../kit/assets/orn/hui.svg?v=30759513') 0 0/12px 12px repeat-x;opacity:.7}
.s-ruitlijst{list-style:none;display:grid;gap:10px}
.s-ruitlijst > li{position:relative;padding-left:22px}
.s-ruitlijst > li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;transform:rotate(45deg);background:var(--goud)}

/* C18 .s-mist — overgang tussen hoofdstukken (geen kleurvlak): <div class="s-mist" aria-hidden="true"></div> */
.s-mist{height:120px;margin-block:-24px;pointer-events:none;background:url('../kit/afgeleid/bergen-ver-web.webp?v=5988c592') center/cover no-repeat;opacity:.18;
  -webkit-mask-image:linear-gradient(transparent,#000 40%,#000 60%,transparent),linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent,#000 40%,#000 60%,transparent),linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-composite:intersect}

/* decoratieve lagen (papier, maan, tak, bergen, watermerk) */
.s-papier{position:relative;isolation:auto}
.s-laag,.s-papier > .s-laag{position:absolute;pointer-events:none}
.s-maan{width:min(78vw,560px);aspect-ratio:1;border-radius:50%;background:var(--s-maan)}
.s-maan--svg{background:url('../kit/svg/land/maan.svg?v=15b8e602') center/contain no-repeat;opacity:.55}
.s-tak{top:-10px;right:-20px;width:clamp(220px,34vw,520px);aspect-ratio:700/530;opacity:var(--op-tak);background:url('../kit/afgeleid/tak-web.webp?v=e852fe12') right top/contain no-repeat}
@media (max-width:767px){.s-tak{width:230px;right:-34px;top:-6px}}
.s-bergen{left:0;right:0;bottom:0;height:clamp(96px,15vw,216px);opacity:var(--op-bergen);overflow:hidden}
.s-bergen::before,.s-bergen::after{content:"";position:absolute;bottom:0;background-position:center bottom;background-size:100% 100%;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent),linear-gradient(0deg,transparent,#000 14%,#000 68%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent),linear-gradient(0deg,transparent,#000 14%,#000 68%,transparent);mask-composite:intersect}
.s-bergen::before{left:-6%;width:64%;aspect-ratio:1300/300;background-image:url('../kit/afgeleid/bergen-ver-web.webp?v=5988c592');opacity:.85}
.s-bergen::after{right:-8%;width:70%;aspect-ratio:1600/369;background-image:url('../kit/afgeleid/bergen-web.webp?v=b7ecbbad')}
@media (max-width:767px){.s-bergen::before{left:-40%;width:140%}.s-bergen::after{right:-55%;width:150%}}
.s-watermerk{width:min(70vw,620px);aspect-ratio:900/760;opacity:.05;mix-blend-mode:multiply;background:url('../kit/afgeleid/draak-web.webp?v=ac373b6e') center/contain no-repeat}
.s-den{width:clamp(48px,6vw,88px);aspect-ratio:1;background:url('../kit/svg/land/den.svg?v=bb26820b') center bottom/contain no-repeat;opacity:.55}

/* render "op het papier" (multiply/alpha) — ouder zonder z-index/opacity/transform */
.s-render{margin:0}
.s-render img{width:100%}
.s-render--multiply img{mix-blend-mode:multiply}
.s-render--nevel img{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 99%);mask-image:linear-gradient(180deg,#000 72%,transparent 99%)}
.s-render--rond img{-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 46%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 46%,#000 62%,transparent 100%)}
.s-render figcaption{margin-top:var(--ruimte-3);font-family:var(--f-serif);font-style:italic;font-size:1rem;color:var(--grijs1);text-align:center}
.s-foto{margin:0;position:relative;border:var(--s-rand);padding:6px;background:var(--s-vlak-vol);box-shadow:var(--schaduw-kaart)}
.s-foto img{width:100%;aspect-ratio:var(--s-ratio,4/3);object-fit:cover}

/* ================================================================ 6 BLOKKEN UIT RONDE 1 (blijven werken tot de pagina's herbouwd zijn) */
.s-held{position:relative;padding-block:clamp(32px,6vw,88px) clamp(110px,15vw,210px);overflow:clip}
.s-held__raster{position:relative;display:grid;gap:clamp(24px,4vw,56px);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.s-held__raster{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.s-held__tekst > * + *{margin-top:var(--ruimte-5)}
.s-held__beeld{position:relative}
.s-held__beeld > .s-maan{position:absolute;left:50%;top:44%;translate:-50% -50%;pointer-events:none}
.s-held .s-kalli--v{position:absolute;right:max(8px,2vw);top:clamp(70px,9vw,120px);font-size:clamp(44px,6vw,84px);opacity:.88}
@media (max-width:959px){.s-held .s-kalli--v{display:none}}
.s-held__noot{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--s-fs-label);color:var(--grijs1)}
.s-held__noot span{display:inline-flex;align-items:center;gap:8px}
.s-held__noot span::before{content:"";width:6px;height:6px;transform:rotate(45deg);background:var(--goud)}
.s-paginakop{position:relative;padding-block:clamp(36px,6vw,80px) clamp(28px,4vw,48px);overflow:clip}
.s-paginakop .s-kalli--v{position:absolute;right:max(16px,3vw);top:clamp(28px,5vw,56px);font-size:clamp(40px,5vw,72px);opacity:.85}
@media (max-width:767px){.s-paginakop .s-kalli--v{display:none}}
.s-kruimel{display:flex;flex-wrap:wrap;gap:0 10px;list-style:none;margin:0 0 var(--ruimte-3);font-size:var(--s-fs-label);color:var(--grijs2)}
.s-kruimel li{display:inline-flex;align-items:center;gap:10px}
.s-kruimel li + li::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:var(--goud)}
.s-kruimel a{display:inline-flex;align-items:center;min-height:44px;color:var(--grijs1);text-decoration:none}
.s-kruimel a:hover{color:var(--inkt);text-decoration:underline}
.s-feiten{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));border-block:var(--s-rand)}
.s-feit{display:flex;gap:14px;align-items:flex-start;padding:20px 16px}
.s-feit + .s-feit{border-top:var(--s-rand-zacht)}
@media (min-width:700px){.s-feit + .s-feit{border-top:0;border-left:var(--s-rand-zacht)}}
.s-feit .s-ico{width:30px;height:30px;color:var(--dgoud);margin-top:2px}
.s-feit__label{display:block;font:500 var(--s-fs-label)/1.3 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--dgoud)}
.s-feit__waarde{display:block;margin-top:4px;font:300 1.45rem/1.15 var(--f-kop);letter-spacing:.04em;color:var(--inkt)}
.s-feit__tekst{display:block;margin-top:4px;font-size:.9375rem;color:var(--grijs1);line-height:1.4}
.s-kaart{position:relative;display:flex;flex-direction:column;background:var(--s-vlak);border:var(--s-rand-zacht);box-shadow:var(--schaduw-kaart);padding:clamp(18px,2.4vw,28px);border-radius:var(--straal-s)}
.s-kaart > * + *{margin-top:var(--ruimte-3)}
.s-kaart__beeld{margin:calc(-1 * clamp(18px,2.4vw,28px)) calc(-1 * clamp(18px,2.4vw,28px)) var(--ruimte-4);aspect-ratio:6/5;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 55%,rgba(var(--goud-rgb),.16),rgba(var(--goud-rgb),0) 70%);border-bottom:var(--s-rand-zacht);overflow:hidden}
.s-kaart__beeld img{max-height:100%;width:auto;mix-blend-mode:multiply}
.s-kaart__titel{font:500 var(--fs-l)/1.2 var(--f-kop);letter-spacing:.07em;text-transform:uppercase;color:var(--inkt)}
.s-kaart__tekst{color:var(--grijs1)}
.s-kaart__voet{margin-top:auto;padding-top:var(--ruimte-3)}
a.s-kaart{text-decoration:none;color:inherit;transition:box-shadow var(--duur) var(--ease),border-color var(--duur) var(--ease)}
a.s-kaart:hover{border-color:var(--lijn-goud);box-shadow:0 1px 0 rgba(var(--dgoud-rgb),.4),0 14px 32px rgba(var(--inkt-rgb),.12)}
.s-chips{display:flex;flex-wrap:wrap;gap:6px}
.s-chip{display:inline-flex;align-items:center;min-height:28px;padding:2px 10px;border:var(--s-rand-zacht);font:500 .875rem/1.2 var(--f-tekst);color:var(--grijs1)}
.s-stappen{list-style:none;display:grid;gap:0;counter-reset:stap}
.s-stap{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 18px;padding-bottom:var(--ruimte-6)}
.s-stap::before{content:"";position:absolute;left:27px;top:52px;bottom:6px;width:1px;background:repeating-linear-gradient(180deg,var(--lijn-goud) 0 5px,transparent 5px 10px)}
.s-stap:last-child::before{display:none}
.s-stap__ring{grid-row:1 / span 3;position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:var(--s-rand);background:var(--rijst);color:var(--dgoud)}
.s-stap__ring .s-ico{width:26px;height:26px}
.s-stap__ring .s-nr{position:absolute;right:-8px;top:-6px;min-width:22px;height:22px;font-size:.8rem}
.s-stap__wanneer{font:500 var(--s-fs-label)/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--dgoud)}
.s-stap__titel{font:500 var(--fs-l)/1.2 var(--f-kop);letter-spacing:.07em;text-transform:uppercase;color:var(--inkt)}
.s-stap__tekst{color:var(--grijs1);max-width:64ch}
.s-stap__tekst > :last-child{margin-bottom:0}
@media (min-width:1100px){
  .s-stappen--rij{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--ruimte-5)}
  .s-stappen--rij .s-stap{grid-template-columns:minmax(0,1fr);padding-bottom:0}
  .s-stappen--rij .s-stap__ring{grid-row:auto;margin-bottom:var(--ruimte-3)}
  .s-stappen--rij .s-stap::before{left:64px;right:-12px;top:28px;bottom:auto;width:auto;height:1px;background:repeating-linear-gradient(90deg,var(--lijn-goud) 0 5px,transparent 5px 10px)}
}
.s-welniet{display:grid;gap:var(--ruimte-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.s-welniet__kolom{padding:clamp(18px,3vw,32px);border:var(--s-rand-zacht);background:var(--s-vlak)}
.s-welniet__kop{display:flex;align-items:center;gap:10px;margin-bottom:var(--ruimte-4);font:500 1rem/1.2 var(--f-kop);letter-spacing:.18em;text-transform:uppercase;color:var(--inkt)}
.s-welniet ul{list-style:none;display:grid;gap:12px}
.s-welniet li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.s-welniet li .s-ico{width:20px;height:20px;margin-top:2px}
.s-welniet__kolom--wel li .s-ico{color:var(--dgoud)}
.s-welniet__kolom--niet li .s-ico{color:var(--rood)}
/* label "niet inbegrepen": rood + roodtint; één keer per pagina (ONTWERP 0.1-5) */
.s-niet{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:3px 10px;border:1px solid rgba(var(--rood-rgb),.35);background:none;color:var(--rood);
  font:500 .875rem/1.2 var(--f-kop);letter-spacing:.14em;text-transform:uppercase}
.s-niet::before{content:"";width:10px;height:10px;flex:none;background:linear-gradient(45deg,transparent 43%,currentColor 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,currentColor 43% 57%,transparent 57%)}
.s-noot{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:16px 18px;border-left:2px solid var(--goud);background:rgba(var(--goud-rgb),.08);color:var(--inkt2);font-size:.9375rem;line-height:1.5}
.s-noot .s-ico{width:22px;height:22px;color:var(--dgoud)}
.s-noot > div > :last-child{margin-bottom:0}
.s-faq{border-top:var(--s-rand)}
.s-faq details{border-bottom:var(--s-rand-zacht)}
.s-faq summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:16px;align-items:center;min-height:56px;padding:14px 4px;cursor:pointer;font:600 1.0625rem/1.35 var(--f-tekst);color:var(--inkt)}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"";width:12px;height:12px;justify-self:center;border-right:1.5px solid var(--dgoud);border-bottom:1.5px solid var(--dgoud);transform:rotate(45deg) translate(-3px,-3px);transition:transform var(--duur-kort) var(--ease)}
.s-faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.s-faq summary:hover{color:var(--dgoud)}
.s-faq__antwoord{padding:0 4px 20px;color:var(--grijs1);max-width:64ch}
.s-faq__antwoord > :last-child{margin-bottom:0}
.s-cta{position:relative;text-align:center}
.s-cta .s-knoppen{justify-content:center;margin-top:var(--ruimte-5)}
.s-cta__contact{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin-top:var(--ruimte-5);font-size:.9375rem;color:var(--grijs1)}
.s-cta__contact a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--inkt);text-decoration:none}
.s-cta__contact a:hover{text-decoration:underline}
.s-cta__contact .s-ico{width:18px;height:18px;color:var(--dgoud)}
.s-persoon{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:center}
.s-persoon img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:1px solid var(--lijn-goud-sterk);padding:3px;background:var(--rijst)}
.s-persoon__naam{font:500 1.05rem/1.2 var(--f-kop);letter-spacing:.1em;text-transform:uppercase;color:var(--inkt)}
.s-persoon__rol{font-family:var(--f-serif);font-style:italic;font-size:1.05rem;color:var(--grijs1)}
.s-persoon a{display:inline-flex;align-items:center;min-height:44px;color:var(--inkt)}

/* ================================================================ 7 COMPONENTEN RONDE 2 */
/* C03 .s-titelblok — hoofdstukopener (offerte p5/p14): groot teken · zegel + nr + kicker / H2 / bewijsregel · lead met goudlijn */
.s-titelblok{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:var(--titelblok-na)}
.s-titelblok__teken{position:absolute;right:0;top:0;width:56px;height:56px;display:grid;place-items:center;font-size:56px;line-height:1;opacity:.88;mix-blend-mode:multiply}
.s-titelblok__teken img{width:56px;height:56px}
.s-titelblok__kop{display:grid;gap:12px;min-width:0}
.s-titelblok__kop > .s-h2{padding-right:64px}
.s-titelblok__rubriek{display:flex;align-items:center;gap:12px;margin:0;flex-wrap:nowrap;min-width:0}
.s-titelblok__rubriek .s-kicker{margin:0;min-width:0}
.s-titelblok__lead{position:relative;margin:6px 0 0;padding-top:18px}
.s-titelblok__lead::before{content:"";position:absolute;left:0;top:0;width:40px;height:2px;background:var(--goud)}
@media (min-width:1024px){
  .s-titelblok{grid-template-columns:96px minmax(0,1fr) minmax(320px,.8fr);gap:24px;align-items:start}
  .s-titelblok__teken{position:static;width:96px;height:auto;min-height:96px;font-size:96px;align-self:start}
  .s-titelblok__teken img{width:96px;height:auto}
  .s-titelblok__kop > .s-h2{padding-right:0}
  .s-titelblok__lead{margin:0;padding:0 0 0 20px;align-self:start}
  .s-titelblok__lead::before{width:2px;height:100%;top:4px;bottom:0}
}
.s-titelblok--zonder-teken{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.s-titelblok--zonder-teken{grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr)}}
.s-titelblok--zonder-teken .s-titelblok__kop > .s-h2{padding-right:0}
.s-titelblok--midden{text-align:center;justify-items:center}
@media (min-width:1024px){.s-titelblok--midden{grid-template-columns:minmax(0,1fr)}}
.s-titelblok--midden .s-titelblok__rubriek{justify-content:center}
.s-titelblok--midden .s-titelblok__lead{padding:18px 0 0;text-align:center}
.s-titelblok--midden .s-titelblok__lead::before{left:50%;margin-left:-20px;width:40px;height:2px;top:0}
.s-titelblok--inline .s-titelblok__kop > .s-h2{display:flex;align-items:baseline;gap:18px}

/* C07 .s-totaal — totaalkader (p1/p13), nooit een bedrag */
.s-totaal{position:relative;--h:36px;min-width:min(100%,300px);max-width:380px;padding:22px 24px 24px;
  background:linear-gradient(160deg,rgba(243,233,207,.85),rgba(235,221,185,.6))}
.s-totaal__label{display:block;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--dgoud)}
@media (min-width:768px){.s-totaal__label{font-size:.75rem;letter-spacing:.34em}}
.s-totaal__waarde{display:block;margin:8px 0 16px;font:500 1.375rem/1.2 var(--f-mono);color:var(--inkt);letter-spacing:.02em;font-variant-numeric:tabular-nums}
@media (min-width:768px){.s-totaal__waarde{font-size:1.5rem}}
.s-totaal__waarde--leeg{font:italic 400 1.25rem/1.35 var(--f-serif);letter-spacing:0;color:var(--grijs1)}
.s-totaal > .s-zegel-svg{position:absolute;right:-10px;top:-28px;width:48px;height:48px;rotate:-4deg}

/* C08 .s-brief + .s-handtekening (p2) */
.s-brief{max-width:680px}
.s-brief__aanhef{font:italic 400 1.375rem/1.4 var(--f-serif);color:var(--inkt);margin-bottom:.6em}
.s-brief__tekst{font-size:1.0625rem;line-height:1.7}
.s-brief__tekst > p:first-child::first-letter{float:left;margin:.06em .1em 0 0;font:500 4rem/.82 var(--f-serif);color:var(--dgoud)}
@supports (initial-letter:3){.s-brief__tekst > p:first-child::first-letter{float:none;margin:0 .12em 0 0;initial-letter:3;-webkit-initial-letter:3;font-size:inherit;line-height:inherit}}
.s-handtekeningen{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:var(--ruimte-6);grid-auto-rows:1fr}
@media (min-width:640px){.s-handtekeningen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.s-handtekening{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;align-items:center}
.s-handtekening__foto{grid-row:1 / span 4;width:80px;height:80px;border-radius:50%;padding:6px;background:var(--rijst);
  box-shadow:0 0 0 1px var(--lijn-goud-sterk),0 0 0 4px var(--rijst),0 0 0 6px var(--goud)}
.s-handtekening__foto img{width:100%;height:100%;border-radius:50%;object-fit:cover}
@media (min-width:1024px){.s-handtekening__foto{width:96px;height:96px}}
.s-handtekening__naam{position:relative;justify-self:start;font:italic 400 1.75rem/1.1 var(--f-serif);color:var(--inkt);white-space:nowrap}
@media (min-width:768px){.s-handtekening__naam{font-size:1.875rem}}
.s-handtekening__naam .s-zegel-svg{position:absolute;left:calc(100% + 12px);top:-10px;width:44px;height:44px;rotate:4deg}
.s-handtekening__rol{font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--grijs2)}
@media (min-width:768px){.s-handtekening__rol{font-size:.75rem;letter-spacing:.30em}}
.s-handtekening__contact{display:flex;flex-wrap:wrap;gap:0 16px}
.s-handtekening__contact a{display:inline-flex;align-items:center;min-height:44px;font:500 .9375rem/1.2 var(--f-mono);color:var(--inkt);text-decoration:none;white-space:nowrap}
.s-handtekening__contact a:hover{text-decoration:underline;text-decoration-color:var(--goud)}

/* C09 .s-oogopslag — "in één oogopslag" (p2 rechterkolom) */
.s-oogopslag{display:grid}
.s-oogopslag__titel{font:400 1.5rem/1.1 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt)}
.s-oogopslag__titel small{display:block;margin-top:6px;font:500 .875rem/1 var(--f-zh);letter-spacing:.4em;color:var(--dgoud)}
.s-oogopslag__rij{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:2px 16px;align-items:center;padding:16px 0;border-top:1px solid rgba(var(--dgoud-rgb),.3)}
.s-oogopslag__label{grid-column:1;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--grijs2)}
@media (min-width:768px){.s-oogopslag__label{font-size:.75rem;letter-spacing:.30em}}
.s-oogopslag__waarde{grid-column:1;font:300 1.875rem/1.05 var(--f-kop);letter-spacing:.02em;color:var(--inkt)}
@media (min-width:768px){.s-oogopslag__waarde{font-size:2.5rem}}
.s-oogopslag__waarde small{margin-left:6px;font:500 .875rem/1 var(--f-mono);letter-spacing:0;color:var(--grijs1)}
.s-oogopslag__toel{grid-column:1;font-size:.9375rem;line-height:1.4;color:var(--grijs1)}
.s-oogopslag__ico{grid-column:2;grid-row:1 / span 3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--lijn-goud);color:var(--dgoud)}
.s-oogopslag__ico .s-ico{width:28px;height:28px}
@media (max-width:767px){.s-oogopslag--twee{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}.s-oogopslag--twee .s-oogopslag__titel{grid-column:1 / -1}.s-oogopslag--twee .s-oogopslag__ico{display:none}
  .s-oogopslag--twee .s-oogopslag__rij{grid-template-columns:minmax(0,1fr)}}

/* C11 .s-element — elementkaart met specificatieblok (offerte p5): beeld · titel · meta · tekst · maatblok · acties */
.s-element{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto auto;gap:0;min-width:0}
@supports (grid-template-rows:subgrid){.s-elementen{display:grid;grid-auto-rows:auto auto auto 1fr auto auto}.s-elementen > .s-element{grid-row:span 6;grid-template-rows:subgrid}}
.s-element__beeld{position:relative;margin:0 0 18px;aspect-ratio:var(--s-ratio,16/10);overflow:hidden;background:radial-gradient(ellipse at 50% 60%,rgba(var(--goud-rgb),.14),transparent 70%)}
.s-element__beeld img{width:100%;height:100%;object-fit:cover}
.s-element__beeld picture{height:100%}
.s-element__beeld > .s-inzet{position:absolute;right:14px;bottom:-18px;z-index:2}
.s-element__beeld:has(> .s-inzet){overflow:visible;margin-bottom:34px}
.s-element__beeld:has(> .s-inzet) > picture{display:block;height:100%;overflow:hidden}
.s-element--klein .s-element__beeld img{object-fit:contain;object-position:50% 100%}
.s-element__beeld > .s-codelabel{position:absolute;left:0;top:0;translate:-8px -50%;z-index:2}
.s-element > .s-codelabel{justify-self:start;margin:0 0 10px -8px}
.s-element__beeld:has(> .s-codelabel){overflow:visible}
.s-element__beeld:has(> .s-codelabel) img{clip-path:inset(0)}
.s-element__titel{font:500 1.125rem/1.2 var(--f-kop);letter-spacing:.08em;text-transform:uppercase;color:var(--inkt);margin:0}
@media (min-width:768px){.s-element__titel{font-size:1.1875rem}}
.s-element__meta{margin:4px 0 10px;font:400 .875rem/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--grijs2)}
@media (min-width:768px){.s-element__meta{font-size:.75rem}}
.s-element__tekst{margin:0 0 16px;color:var(--grijs1);font-size:.9375rem;line-height:1.55}
.s-maatblok{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px 16px;align-items:start;padding-top:2px}
.s-maatblok__schema{width:64px;height:48px;color:var(--inkt)}
.s-maatblok__schema svg,.s-maatblok__schema img{width:100%;height:100%}
.s-maatblok .s-ruitlijst{gap:4px;font-size:.875rem;line-height:1.4;color:var(--grijs1)}
.s-maatblok__lijn{grid-column:1 / -1;width:40px;height:2px;background:var(--dgoud);margin:6px 0 2px}
.s-maatblok__regels{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px 20px;margin:0}
.s-maatblok__regels > div{display:grid;gap:3px;min-width:0}
.s-maatblok__regels dt{font:500 .875rem/1.2 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--dgoud);white-space:nowrap}
@media (min-width:768px){.s-maatblok__regels dt{font-size:.75rem;letter-spacing:.28em}}
.s-maatblok__regels dd{margin:0;font:500 .9375rem/1.35 var(--f-mono);color:var(--inkt);font-variant-numeric:tabular-nums}
.s-maatblok__regels dd.s-maatblok__prijs{font:italic 400 1.0625rem/1.3 var(--f-serif);color:var(--grijs1)}
.s-element__acties{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
@media (max-width:480px){.s-element__acties > .s-knop{flex:1 1 calc(50% - 5px);padding-inline:10px}}
.s-element--klein .s-element__beeld{--s-ratio:11/15}
.s-element--groot .s-element__beeld{--s-ratio:16/10}

/* C13 .s-inzet — ronde inzet met dubbele goudring en label GEOPEND */
.s-inzet{position:relative;display:inline-block;flex:none;width:var(--d,96px);aspect-ratio:1;margin:0;border-radius:50%;padding:5px;background:var(--rijst);
  box-shadow:0 0 0 2px var(--goud),0 0 0 6px var(--rijst),0 0 0 7px var(--dgoud),0 8px 22px rgba(var(--inkt-rgb),.18)}
.s-inzet img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.s-inzet__label{position:absolute;left:-6px;bottom:4%;display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;background:url('../kit/svg/zegel/leeg.svg?v=648606df') center/100% 100%;
  color:var(--rijst);font:500 .75rem/1 var(--f-kop);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;z-index:2}
@media (max-width:767px){.s-inzet{--d:80px}.s-inzet__label{font-size:.875rem;height:28px}}
.s-inzet--groot{--d:140px}
.s-inzet__open{position:absolute;inset:5px;border-radius:50%;opacity:0;transition:opacity .3s var(--ease)}
@media (pointer:fine){.s-inzet:hover .s-inzet__open{opacity:1}}

/* C14 .s-tabel — positielijst (p13) */
.s-tabel{width:100%;border-collapse:collapse;font-size:.9375rem}
.s-tabel th,.s-tabel td{padding:12px 10px;text-align:left;vertical-align:middle;border-bottom:1px solid rgba(var(--dgoud-rgb),.25)}
.s-tabel thead th{font:500 .875rem/1.2 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;color:var(--grijs2);border-bottom:1px solid var(--lijn-goud)}
@media (min-width:768px){.s-tabel thead th{font-size:.75rem;letter-spacing:.28em}}
.s-tabel__groep th{padding-top:22px;font:500 .875rem/1.2 var(--f-kop);letter-spacing:.3em;text-transform:uppercase;color:var(--inkt);border-bottom:1px solid var(--lijn-goud)}
@media (min-width:768px){.s-tabel__groep th{font-size:.8125rem}}
.s-tabel__groep th > span{display:flex;align-items:baseline;gap:12px}
.s-tabel__groep img{width:22px;height:22px;align-self:center;color:var(--rood)}
.s-tabel__groep .s-mono{margin-left:auto;color:var(--grijs1);letter-spacing:0}
.s-tabel td.s-tabel__getal{text-align:right;font:500 .9375rem/1.2 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.s-tabel__schema{width:28px;height:28px}
@media (max-width:767px){
  .s-tabel thead{display:none}
  .s-tabel tr:not(.s-tabel__groep){display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;min-height:52px;padding:10px 0;border-bottom:1px solid rgba(var(--dgoud-rgb),.25)}
  .s-tabel tr:not(.s-tabel__groep) td{padding:0;border:0}
  .s-tabel tr:not(.s-tabel__groep) td.s-tabel__getal{grid-column:2;text-align:left}
}

/* C15 stappen-ring (tijdlijn onder de kaart) — <ol class="s-stappen-ring" data-route> <li data-route-doel="0"> */
.s-stappen-ring{--ring:56px;list-style:none;display:grid;gap:22px;margin:0;padding:0;position:relative}
.s-stappen-ring > li{position:relative;display:grid;grid-template-columns:var(--ring) minmax(0,1fr);gap:4px 18px;align-items:start}
.s-stappen-ring > li::before{content:"";position:absolute;left:calc(var(--ring) / 2);top:var(--ring);bottom:-22px;width:1px;margin-left:-.5px;
  background:repeating-linear-gradient(180deg,var(--dgoud) 0 2px,transparent 2px 6px);z-index:-1}
.s-stappen-ring > li:last-child::before{display:none}
.s-ring{grid-row:1 / span 3;position:relative;width:var(--ring);height:var(--ring);border-radius:50%;display:grid;place-items:center;background:var(--rijst);color:var(--inkt);
  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),.6)}
.s-ring .s-ico{width:28px;height:28px}
.s-ring .s-stapnr{position:absolute;right:-6px;top:-6px}
.s-stappen-ring__moment{display:block;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--dgoud)}
.s-stappen-ring__titel{display:block;font:500 1rem/1.25 var(--f-kop);letter-spacing:.08em;text-transform:uppercase;color:var(--inkt)}
.s-stappen-ring__tekst{margin:4px 0 0;font-size:.9375rem;line-height:1.5;color:var(--grijs1)}
.s-stappen-ring [data-route-doel]{cursor:pointer}
.s-stappen-ring > li.is-actief .s-ring{box-shadow:inset 0 0 0 2px var(--dgoud),inset 0 0 0 5px var(--goudlicht),inset 0 0 0 6px var(--dgoud)}
@media (min-width:1024px){
  .s-stappen-ring{--ring:72px;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:20px}
  .s-stappen-ring > li{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--ring) auto auto auto;justify-items:center;text-align:center;gap:0}
  .s-stappen-ring > li::before{left:50%;right:auto;top:calc(var(--ring) / 2);bottom:auto;width:calc(100% + 20px);height:1px;margin:0;
    background:repeating-linear-gradient(90deg,var(--dgoud) 0 2px,transparent 2px 6px)}
  .s-ring{grid-row:1;margin-bottom:16px}
  .s-stappen-ring__moment{margin-top:16px;font-size:.75rem;letter-spacing:.3em}
  .s-stappen-ring__titel{margin-top:6px;min-height:2.5em;display:flex;align-items:flex-start;justify-content:center}
  .s-stappen-ring > li:hover .s-ring{box-shadow:inset 0 0 0 2px var(--dgoud),inset 0 0 0 5px var(--goudlicht),inset 0 0 0 6px var(--dgoud)}
}

/* C16 .s-afspraken (p16) */
.s-afspraken{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.s-afspraken{grid-template-columns:repeat(2,minmax(0,1fr))}}
.s-afspraken__kop{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:500 .875rem/1.2 var(--f-kop);letter-spacing:.28em;text-transform:uppercase;color:var(--inkt)}
@media (min-width:768px){.s-afspraken__kop{font-size:.8125rem}}
.s-afspraken ol,.s-afspraken ul{list-style:none;display:grid;gap:10px;margin:0;padding:0;counter-reset:afspraak}
.s-afspraken ol > li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 8px;counter-increment:afspraak;font-size:1rem;line-height:1.5}
.s-afspraken ol > li::before{content:counter(afspraak);font:500 .8125rem/1.6 var(--f-mono);color:var(--dgoud)}
.s-afspraken ul.s-afspraken__niet > li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 8px;font-size:1rem;line-height:1.5}
.s-afspraken ul.s-afspraken__niet > li::before{content:"";width:12px;height:12px;margin-top:.4em;
  background:linear-gradient(45deg,transparent 42%,var(--rood) 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--rood) 42% 58%,transparent 58%)}
.s-afspraken ul.s-afspraken__niet > li:first-child{font-weight:600;color:var(--inkt)}
.s-afsprakentabel{display:grid;margin:clamp(28px,4vw,48px) 0 0;border-top:1px solid var(--lijn-goud)}
.s-afsprakentabel > div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0;border-bottom:1px solid rgba(var(--dgoud-rgb),.25)}
@media (min-width:768px){.s-afsprakentabel > div{grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:baseline}}
.s-afsprakentabel dt{font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--dgoud)}
@media (min-width:768px){.s-afsprakentabel dt{font-size:.75rem;letter-spacing:.3em}}
.s-afsprakentabel dd{margin:0;font-size:1rem;line-height:1.5;color:var(--inkt2)}

/* C17 .s-slot — slot (p17): logo · 谢谢 · citaat · ornamentlijn · kop · knoppen · contact · avondrender in de voet */
.s-slot{position:relative;text-align:center;padding-top:var(--sectie)}
.s-slot__logo{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;padding:3px;background:var(--rijst);box-shadow:0 0 0 1px var(--lijn-goud-sterk),0 0 0 5px var(--rijst),0 0 0 6px var(--lijn-goud-zacht)}
@media (min-width:768px){.s-slot__logo{width:88px;height:88px}}
.s-slot__logo img{width:100%;height:100%;border-radius:50%}
.s-slot__xiexie{display:block;width:96px;height:48px;margin:0 auto 14px;opacity:.88}
.s-slot__citaat{max-width:30ch;margin:0 auto;font:italic 400 1.3125rem/1.4 var(--f-serif);color:var(--inkt2);text-wrap:balance}
@media (min-width:768px){.s-slot__citaat{font-size:1.625rem}}
.s-slot .s-h2{margin-top:6px}
.s-slot .s-knoppen{justify-content:center;margin-top:28px}
.s-slot__contact{display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px;margin-top:20px}
.s-slot__contact a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 .9375rem/1.2 var(--f-mono);color:var(--inkt);text-decoration:none;white-space:nowrap}
.s-slot__contact a:hover{text-decoration:underline;text-decoration-color:var(--goud)}
.s-slot__beeld{position:relative;margin:clamp(24px,4vw,48px) auto 0;max-width:1440px;aspect-ratio:1440/520}
@media (max-width:767px){.s-slot__beeld{aspect-ratio:430/300}}
.s-slot__beeld picture,.s-slot__beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.s-slot__beeld::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(180deg,rgba(var(--rijst-rgb),0),var(--rijst))}
.s-slot__licht{mix-blend-mode:screen}
.s-slot__beeld > .s-zegel-svg{position:absolute;left:88%;top:80%;width:44px;height:44px;rotate:-4deg;z-index:2}
@media (min-width:768px){.s-slot__beeld > .s-zegel-svg{width:56px;height:56px}}
.s-slot--kort .s-slot__beeld{display:none}
.s-slot + .s-voet{margin-top:-8px}

/* C20 .s-folio — hoofdstukvoet */
.s-folio{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:40px;font:500 .6875rem/1 var(--f-kop);letter-spacing:.3em;text-transform:uppercase;color:var(--dgoud)}
.s-folio__lijn{display:flex;align-items:center;gap:16px;color:var(--grijs2)}
.s-folio__lijn::before,.s-folio__lijn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--lijn-goud))}
.s-folio__lijn::after{background:linear-gradient(90deg,var(--lijn-goud),transparent)}
.s-folio__nr{display:inline-flex;align-items:center;gap:10px;color:var(--inkt)}
.s-folio__nr .s-zegel-svg{width:16px;height:16px}
.s-folio__nr span{color:var(--grijs2)}
@media (max-width:767px){.s-folio{grid-template-columns:minmax(0,1fr) auto;font-size:.875rem;letter-spacing:.2em}.s-folio__site{display:none}}

/* C21 .s-bewijsband — de drie zegels */
.s-bewijsband{display:grid;grid-template-columns:minmax(0,1fr);border-block:1px solid var(--lijn-goud)}
@media (min-width:900px){.s-bewijsband{grid-template-columns:repeat(3,minmax(0,1fr))}}
.s-bewijsband__item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 16px;align-items:start;min-height:64px;padding:20px 4px}
.s-bewijsband__item + .s-bewijsband__item{border-top:1px solid rgba(var(--dgoud-rgb),.3)}
@media (min-width:900px){.s-bewijsband__item{padding:24px clamp(16px,2vw,28px)}.s-bewijsband__item + .s-bewijsband__item{border-top:0;border-left:1px solid rgba(var(--dgoud-rgb),.3)}}
.s-bewijsband__item > .s-zegel-svg{grid-row:1 / span 3;width:40px;height:40px}
.s-bewijsband__titel{font:500 .9375rem/1.25 var(--f-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--inkt)}
.s-bewijsband__tekst{margin:0;font-size:.9375rem;line-height:1.45;color:var(--grijs1)}
.s-bewijsband__item .s-pijllink{justify-self:start;min-height:44px}
.s-bewijsband--compact{grid-template-columns:minmax(0,1fr)!important}
.s-bewijsband--compact .s-bewijsband__item + .s-bewijsband__item{border-left:0;border-top:1px solid rgba(var(--dgoud-rgb),.3)}

/* C23 formulier en toestanden */
.s-veld{display:grid;grid-template-rows:20px auto;gap:8px;align-content:start}
.s-veld > span,.s-veld > legend,.s-veld__label{font:500 .875rem/20px var(--f-kop);letter-spacing:.18em;text-transform:uppercase;color:var(--grijs1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:768px){.s-veld > span,.s-veld > legend,.s-veld__label{font-size:.8125rem}}
.s-invoer{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--grijs3);border-radius:var(--straal-s);background:var(--s-vlak-vol);font:400 1.0625rem/1.4 var(--f-tekst);color:var(--inkt)}
textarea.s-invoer{min-height:120px;resize:vertical}
.s-invoer:focus{outline:0;border-color:var(--dgoud);box-shadow:0 0 0 1px var(--dgoud),0 0 0 4px rgba(var(--goud-rgb),.25)}
.s-invoer::placeholder{color:var(--grijs2)}
.s-invoer[aria-invalid=true]{border-color:var(--grijs3);border-bottom:2px solid var(--inkt)}
.s-fout{display:flex;align-items:center;gap:8px;margin:6px 0 0;font:600 .9375rem/1.35 var(--f-tekst);color:var(--inkt)}
.s-fout::before{content:"";width:6px;height:6px;flex:none;rotate:45deg;background:var(--rood)}
.s-keuzes{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.s-keuze{position:relative;display:inline-flex}
.s-keuze input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.s-keuze span{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 16px;border:1px solid var(--grijs3);border-radius:var(--straal-s);background:var(--s-vlak);font:500 .9375rem/1.2 var(--f-tekst);color:var(--inkt2)}
.s-keuze input:checked + span{border-color:var(--dgoud);box-shadow:inset 0 0 0 1px var(--dgoud),0 0 0 3px var(--rijst),0 0 0 4px var(--goud);color:var(--inkt)}
.s-keuze input:focus-visible + span{outline:2px solid var(--dgoud);outline-offset:4px}
.s-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));translate:-50% 20px;z-index:var(--z-overlay);display:flex;align-items:center;gap:12px;max-width:min(92vw,360px);
  padding:12px 18px;border:var(--s-rand);background:var(--rijst);box-shadow:0 12px 32px rgba(var(--inkt-rgb),.18);font-size:.9375rem;color:var(--inkt);
  opacity:0;pointer-events:none;transition:opacity var(--duur) var(--ease),translate var(--duur) var(--ease)}
.s-toast.is-zichtbaar{opacity:1;translate:-50% 0}
@media (max-width:767px){body.s-met-actiebalk .s-toast{bottom:calc(var(--s-actiebalk-h) + 12px + env(safe-area-inset-bottom))}}

/* C25 .s-draaiboek — vooraf gerenderde 3D-beweging: <figure class="s-draaiboek" data-draaiboek data-frames='[…]'><img …></figure> */
.s-draaiboek{position:relative;margin:0}
.s-draaiboek > canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .2s linear;pointer-events:none}
.s-draaiboek.is-actief > canvas{opacity:1}
.s-draaiboek.is-actief > picture,.s-draaiboek.is-actief > img{visibility:hidden}
.s-pins{position:absolute;inset:0;transition:opacity .35s var(--ease)}
.s-draaiboek[data-gedraaid] + .s-pins{opacity:0;pointer-events:none}

/* C06 omslag-lagen (compositie per pagina; zie ONTWERP §3) */
.s-omslag{position:relative;overflow:clip}
.s-omslag__woord{display:block;font:300 2.875rem/1 var(--f-kop);letter-spacing:.30em;margin-right:-.30em;text-transform:uppercase;color:var(--inkt)}
@media (min-width:390px){.s-omslag__woord{font-size:3.25rem}}
@media (min-width:768px){.s-omslag__woord{font-size:clamp(64px,7.2vw,104px);letter-spacing:.42em;margin-right:-.42em}}
.s-omslag__sub{display:block;margin-top:10px;font:400 1.375rem/1.3 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--inkt2)}
@media (min-width:768px){.s-omslag__sub{font-size:1.875rem}}
.s-omslag__sub em{font-style:italic;color:var(--dgoud)}
.s-nevel{position:absolute;left:-4%;right:-4%;bottom:0;height:35%;pointer-events:none;background:url('../kit/svg/land/nevel.svg?v=caf49ff3') center bottom/100% 100% no-repeat;opacity:.9}
.s-blaadjes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.s-blaadjes i{position:absolute;top:-16px;left:var(--x,50%);width:var(--s,12px);aspect-ratio:1;background:url('../kit/svg/land/bloesem-bloem.svg?v=58d95359') center/contain no-repeat;opacity:0}

/* ================================================================ 8 ROUTEKAART (C15) — markup: <!--#shell kaart variant=vol|strook|regio id=…-->
   Lagen: zee (golfjes, gemaskeerd op land) · land (inktwas + penseelrand, statisch) · lijnen (route via masker) · HTML-lagen
   (kompas, Foshan-zegel, labels, schip) · loepen. Eenheden = kaarteenheden (851 × 341, projectie van de offerte);
   --k = px per eenheid (cqw-terugval, exact gezet door kaart.js). */
.s-routekaart{--k:calc(100cqw / var(--kw));position:relative;container-type:inline-size;margin:0;padding:0;border:0;background:none;box-shadow:none;display:block}
.s-routekaart > * + *{margin-top:0}
.s-routekaart__vel{position:relative;width:100%;aspect-ratio:var(--kw) / var(--kh);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 88%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 88%,transparent);mask-composite:intersect}
.s-routekaart__vlak{position:absolute;left:calc(var(--kx) * var(--k) * -1);top:calc(var(--ky) * var(--k) * -1);width:calc(851 * var(--k));height:calc(341 * var(--k))}
.s-routekaart__land,.s-routekaart__lijnen{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.s-routekaart__zee{position:absolute;inset:0;overflow:hidden;-webkit-mask:url('../beeld/kaart/zee.svg?v=ea6b3780') 0 0/100% 100% no-repeat;mask:url('../beeld/kaart/zee.svg?v=ea6b3780') 0 0/100% 100% no-repeat}
.s-routekaart__golven{position:absolute;left:0;top:0;bottom:0;width:calc(100% + 26 * var(--k));background:url('../beeld/kaart/golf.svg?v=fac7bd0f') 0 0/calc(26 * var(--k)) calc(11 * var(--k)) repeat;will-change:transform}
.s-routekaart__kompas,.s-routekaart__plek,.s-routekaart__naam,.s-routekaart__schip{position:absolute;left:calc(var(--ux) * var(--k));top:calc(var(--uy) * var(--k));width:0;height:0}
/* kompas */
.s-routekaart__kompas > svg{position:absolute;max-width:none;width:clamp(40px,calc(54 * var(--k)),76px);aspect-ratio:54/58;left:0;top:0;translate:-50% -53.4%;opacity:.92}
.s-routekaart__naald{transform-origin:50% 53.45%}
/* Foshan: gouden ring + rood zegel */
.s-routekaart__plek .s-routekaart__ring{position:absolute;left:0;top:0;width:clamp(18px,calc(21 * var(--k)),30px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--dgoud)}
.s-routekaart__plek .s-routekaart__zegel{position:absolute;left:0;top:0;width:clamp(10px,calc(11 * var(--k)),16px);aspect-ratio:1;translate:-50% -50%;rotate:-6deg;
  background:url('../kit/svg/zegel/leeg.svg?v=648606df') center/100% 100% no-repeat}
.s-routekaart__plek .s-routekaart__zegel::after{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(var(--rood-rgb),.35),rgba(var(--rood-rgb),0) 68%);opacity:0}
.s-routekaart__naam{z-index:2}
.s-routekaart__naam--foshan{display:block}
.s-routekaart__naam--foshan > *{position:absolute;right:calc(20px + 6 * var(--k));white-space:nowrap;text-align:right}
.s-routekaart__zh{bottom:4px;font:400 clamp(18px,calc(19 * var(--k)),30px)/1 var(--f-kalli);color:var(--rood);letter-spacing:.08em}
.s-routekaart__naam b{top:2px;font:500 clamp(14px,calc(10 * var(--k)),16px)/1 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--inkt)}
.s-routekaart__naam small{top:calc(8px + clamp(14px,calc(10 * var(--k)),16px));font:500 clamp(14px,calc(7.4 * var(--k)),12px)/1.2 var(--f-kop);letter-spacing:.2em;text-transform:uppercase;color:var(--dgoud)}
@media (min-width:768px){.s-routekaart__naam small{font-size:clamp(11px,calc(7.4 * var(--k)),13px)}}
/* schip: positie in eenheden, koers via --hoek/--zijde; deining op de romp */
.s-routekaart__schip{z-index:3}
.s-routekaart__schip > .s-routekaart__romp{position:absolute;left:0;top:0;width:clamp(40px,calc(46 * var(--k)),74px);aspect-ratio:54/30;translate:-50% -62%;
  transform:rotate(var(--hoek,0deg)) scaleX(var(--zijde,1));transition:transform .45s var(--ease)}
.s-routekaart__schip svg{display:block;width:100%;height:100%}
/* loepen */
.s-routekaart__loepen{position:absolute;left:0;top:0;width:100%;aspect-ratio:var(--kw) / var(--kh);pointer-events:none;z-index:4}
.s-routekaart__loep{position:absolute;left:calc((var(--ux) - var(--kx) - var(--ur) - 3) * var(--k));top:calc((var(--uy) - var(--ky) - var(--ur) - 3) * var(--k));
  width:calc((var(--ur) + 3) * 2 * var(--k));aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 6px 16px rgba(var(--inkt-rgb),.10))}
.s-routekaart__loepbeeld{position:absolute;inset:0;width:100%;height:100%}
.s-routekaart__loeptitel{position:absolute;left:50%;top:9%;translate:-50% 0;font:500 clamp(10px,calc(6.6 * var(--k)),13px)/1 var(--f-kop);letter-spacing:.22em;padding-left:.22em;text-transform:uppercase;color:var(--dgoud);white-space:nowrap}
.s-routekaart__lab{position:absolute;translate:0 -50%;font:500 clamp(10.5px,calc(6.6 * var(--k)),13px)/1.15 var(--f-kop);letter-spacing:.1em;text-transform:uppercase;color:var(--inkt);white-space:nowrap;
  text-shadow:0 0 3px var(--rijst),0 0 3px var(--rijst),0 0 6px var(--rijst)}
.s-routekaart__lab b{font-weight:500}
.s-routekaart__lab--aankomst{translate:-100% -50%;color:var(--grijs1);font-weight:400}
.s-routekaart__lab--dsd{display:grid;justify-items:center;translate:-50% 0;text-align:center;line-height:1.25}
.s-routekaart__lab--dsd b{color:var(--inkt);letter-spacing:.12em}
.s-routekaart__lab--dsd i{font:italic 400 1.15em/1.2 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--grijs1)}
.s-routekaart__lab--adres{translate:-100% -50%;color:var(--rood);font-weight:500}
.s-routekaart__lab--regio{color:var(--inkt)}
.s-routekaart__lab--foshan-cn{translate:-100% -50%;color:var(--rood);letter-spacing:.16em}
.s-routekaart__loep .s-routekaart__plek{position:absolute;width:0;height:0}
.s-routekaart__onderschrift{margin:10px auto 0;max-width:60ch;text-align:center;font:italic 400 1rem/1.4 var(--f-serif);color:var(--grijs1)}
@media (min-width:768px){.s-routekaart__onderschrift{font-size:.9375rem}}
/* mobiel: loepen uit de kaart, onder elkaar/naast elkaar, labels ≥ 14 px */
@media (max-width:767px){
  .s-routekaart__vel{-webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent,#000 8%,#000 90%,transparent)}
  .s-routekaart__lijnen .s-routekaart__verbind{display:none}
  .s-routekaart__loepen{position:relative;aspect-ratio:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:20px 28px;margin-top:8px;padding-inline:4px}
  .s-routekaart__loep{position:relative;left:auto;top:auto;width:min(84vw,330px)}
  .s-routekaart__loeptitel,.s-routekaart__lab{font-size:14px}
  .s-routekaart__lab--dsd b{letter-spacing:.1em}
  .s-routekaart__naam small{letter-spacing:.12em}
  .s-routekaart__naam b{letter-spacing:.14em}
  .s-routekaart--strook .s-routekaart__loep--nl{width:min(70vw,280px)}
}
/* variant strook: kleinere loep, geen kompas-ring-detail */
@media (min-width:768px){.s-routekaart--strook .s-routekaart__loep--nl{--ur:54}}

/* ---- kaart-beweging (kaart.js zet data-staat=wacht → speelt → klaar; zonder JS/reduced motion: klaar = eindstand) */
.s-routekaart[data-staat=wacht] .s-routekaart__plek--foshan .s-routekaart__zegel,
.s-routekaart[data-staat=speelt]:not(.is-foshan) .s-routekaart__plek--foshan .s-routekaart__zegel{opacity:0;transform:scale(1.7) rotate(-14deg)}
.s-routekaart .s-routekaart__plek .s-routekaart__zegel{transition:opacity .22s ease-out,transform .32s var(--s-ease-stempel)}
.s-routekaart.is-foshan .s-routekaart__plek--foshan .s-routekaart__zegel::after{animation:s-inktpuls 1.1s var(--s-ease-inkt) .12s both}
.s-routekaart[data-staat=wacht] .s-routekaart__naam > *,.s-routekaart[data-staat=speelt]:not(.is-foshan) .s-routekaart__naam > *{opacity:0;translate:0 4px}
.s-routekaart .s-routekaart__naam > *{transition:opacity .9s var(--s-ease-inkt),translate .9s var(--s-ease-inkt)}
.s-routekaart .s-routekaart__naam > :nth-child(2){transition-delay:.18s}.s-routekaart .s-routekaart__naam > :nth-child(3){transition-delay:.36s}
.s-routekaart[data-staat=wacht] .s-routekaart__schip,.s-routekaart[data-staat=speelt]:not(.is-varen) .s-routekaart__schip{opacity:0}
.s-routekaart .s-routekaart__schip{transition:opacity .6s ease-out}
.s-routekaart[data-staat=wacht] .s-routekaart__loep--nl,.s-routekaart[data-staat=speelt]:not(.is-aangekomen) .s-routekaart__loep--nl{opacity:0;transform:scale(.62)}
.s-routekaart .s-routekaart__loep{transition:opacity .7s var(--s-ease-inkt),transform 1.1s var(--s-ease-inkt);transform-origin:var(--loep-oorsprong,22% 50%)}
.s-routekaart .s-routekaart__loep--china{--loep-oorsprong:80% 90%}
.s-routekaart[data-staat=wacht] .s-routekaart__loep--china,.s-routekaart[data-staat=speelt]:not(.is-regio) .s-routekaart__loep--china{opacity:0;transform:scale(.62)}
.s-routekaart .s-routekaart__loep .s-routekaart__lab,.s-routekaart .s-routekaart__loep .s-routekaart__loeptitel{transition:opacity .8s var(--s-ease-inkt) .5s}
.s-routekaart[data-staat=speelt]:not(.is-aangekomen) .s-routekaart__loep--nl .s-routekaart__lab,.s-routekaart[data-staat=speelt]:not(.is-aangekomen) .s-routekaart__loep--nl .s-routekaart__loeptitel{opacity:0}
.s-routekaart .s-routekaart__verbind,.s-routekaart .s-routekaart__nlroute{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--s-ease-inkt) .3s}
.s-routekaart[data-staat=wacht] .s-routekaart__verbind--nl,.s-routekaart[data-staat=speelt]:not(.is-aangekomen) .s-routekaart__verbind--nl,
.s-routekaart[data-staat=wacht] .s-routekaart__nlroute,.s-routekaart[data-staat=speelt]:not(.is-aangekomen) .s-routekaart__nlroute{clip-path:inset(0 100% 0 0)}
.s-routekaart.is-aangekomen .s-routekaart__verbind--nl{transition-delay:0s}
.s-routekaart.is-aangekomen .s-routekaart__nlroute{transition-delay:.8s}
.s-routekaart .s-routekaart__aanvoer{transition:opacity .8s ease-out calc(.7s + var(--i) * .16s)}
.s-routekaart[data-staat=wacht] .s-routekaart__aanvoer,.s-routekaart[data-staat=speelt]:not(.is-regio) .s-routekaart__aanvoer{opacity:0}
.s-routekaart .s-routekaart__regio{transition:opacity .5s ease-out calc(.25s + var(--i) * .16s)}
.s-routekaart[data-staat=wacht] .s-routekaart__regio,.s-routekaart[data-staat=speelt]:not(.is-regio) .s-routekaart__regio{opacity:0}
.s-routekaart.is-regio .s-routekaart__regio{animation:s-oplichten .9s ease-out calc(.25s + var(--i) * .16s) both}
.s-routekaart[data-staat=speelt]:not(.is-regio) .s-routekaart__loep--china .s-routekaart__lab{opacity:0}
.s-routekaart .s-routekaart__loep--china .s-routekaart__lab--regio{transition-delay:calc(.35s + var(--i) * .16s)}
.s-routekaart[data-staat=wacht] .s-routekaart__loep--china .s-routekaart__zegel{opacity:0;transform:scale(1.7) rotate(-14deg)}
.s-routekaart.is-regio .s-routekaart__loep--china .s-routekaart__zegel::after{animation:s-inktpuls 1.1s var(--s-ease-inkt) .4s both}
@media (prefers-reduced-motion:no-preference){
  .s-routekaart.is-in-beeld:not(.is-gepauzeerd) .s-routekaart__golven{animation:s-golfdrift 46s linear infinite}
  .s-routekaart.is-in-beeld:not(.is-gepauzeerd) .s-routekaart__romp > svg{animation:s-deinen 3.4s ease-in-out infinite}
  .s-routekaart.is-in-beeld:not(.is-gepauzeerd) .s-routekaart__kielzog{animation:s-kielzog 3.4s ease-in-out infinite}
  .s-routekaart.is-varen .s-routekaart__naald{animation:s-naald 3.2s cubic-bezier(.3,.1,.3,1) .3s both}
}
@keyframes s-golfdrift{to{transform:translate3d(-2.9646%,0,0)}}
@keyframes s-deinen{0%,100%{transform:translateY(0) rotate(-1.6deg)}50%{transform:translateY(-6%) rotate(1.6deg)}}
@keyframes s-kielzog{0%,100%{opacity:.5;transform:translateX(0)}50%{opacity:.3;transform:translateX(-3%)}}
@keyframes s-naald{0%{transform:rotate(-38deg)}22%{transform:rotate(22deg)}42%{transform:rotate(-12deg)}60%{transform:rotate(6deg)}78%{transform:rotate(-2.5deg)}100%{transform:rotate(0)}}
@keyframes s-inktpuls{0%{opacity:.85;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
@keyframes s-oplichten{0%{opacity:0}40%{opacity:1;filter:none}100%{opacity:1}}

/* ================================================================ 9 CHROOM (C24) — kop, subnav, actiebalk: 100 % dekkend op elke breedte, geen backdrop-filter */
.s-kop{position:sticky;top:0;z-index:var(--z-kop);padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--lijn-goud-zacht);
  background:var(--rijst) url('../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/768px 768px repeat;transition:transform .22s var(--ease)}
.s-kop__balk{display:flex;align-items:center;gap:12px;min-height:var(--s-kop-h);transition:transform .22s var(--ease)}
.s-merk{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--inkt);min-height:44px;margin-right:auto}
.s-merk__maan{flex:none;width:40px;height:40px;border-radius:50%;padding:2px;background:var(--rijst);box-shadow:0 0 0 1px var(--lijn-goud-sterk),0 0 0 4px var(--rijst),0 0 0 5px var(--lijn-goud-zacht);
  transform-origin:50% 50%;transition:transform .22s var(--ease)}
@media (min-width:1024px){.s-merk__maan{width:46px;height:46px}}
.s-merk__maan img{width:100%;height:100%;border-radius:50%}
.s-merk__tekst{display:grid;line-height:1.1}
.s-merk__naam{font:400 .9375rem/1.1 var(--f-kop);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
@media (min-width:1024px){.s-merk__naam{font-size:1.0625rem;letter-spacing:.24em}}
.s-merk__naam b{font-weight:400;color:var(--dgoud)}
.s-merk__tag{margin-top:3px;font-family:var(--f-serif);font-style:italic;font-size:.9375rem;color:var(--grijs1);white-space:nowrap;transition:opacity .2s var(--ease)}
@media (max-width:399px){.s-merk__tag{display:none}}
@media (max-width:389px){.s-merk__naam{letter-spacing:.16em}}
@media (max-width:359px){.s-merk{gap:8px}.s-merk__naam{letter-spacing:.06em;font-size:.875rem}.s-kop__balk{gap:6px}.s-kop__acties{gap:4px}.s-lijstknop{padding:0 6px;gap:4px}}
/* desktop: kop 68 → 56 px na 80 px scroll (geen layoutverschuiving: de kop schuift 12 px op, inhoud centreert mee) */
@media (min-width:1024px){
  html.s-ingeklapt .s-kop{transform:translateY(-12px)}
  html.s-ingeklapt .s-kop__balk{transform:translateY(6px)}
  html.s-ingeklapt .s-merk__maan{transform:scale(.84)}
  html.s-ingeklapt .s-merk__tag{opacity:0}
  html.s-ingeklapt .s-subnav{transform:translateY(-12px)}
}
.s-nav ul{list-style:none;display:flex;gap:2px}
.s-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font:500 .875rem/1 var(--f-kop);letter-spacing:.18em;text-transform:uppercase;color:var(--inkt2);text-decoration:none;white-space:nowrap}
.s-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:1px;background:var(--dgoud);transform:scaleX(0);transform-origin:left;transition:transform var(--duur) var(--ease)}
.s-nav a:hover::after,.s-nav a[aria-current]::after{transform:scaleX(1)}
.s-nav a[aria-current]{color:var(--inkt)}
.s-nav__contact{display:none}
.s-kop__acties{display:flex;align-items:center;gap:6px}
.s-lijstknop{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 10px;border:var(--s-rand-zacht);
  border-radius:var(--straal-s);color:var(--inkt);text-decoration:none;background:var(--rijst);font:500 .875rem/1 var(--f-kop);letter-spacing:.14em;text-transform:uppercase}
.s-lijstknop:hover{background:var(--goudlicht)}
.s-lijstknop .s-ico{width:20px;height:20px;color:var(--dgoud)}
.s-teller{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--goud);color:var(--inkt);font:500 .875rem/1 var(--f-mono);letter-spacing:0}
.s-teller[data-leeg]{display:none}            /* bij 0 alleen het icoon (ONTWERP C24) */
.s-teller.is-stempel{animation:s-stempel .32s var(--s-ease-stempel)}
.s-lijstknop__label{display:none}
@media (min-width:1180px){.s-lijstknop__label{display:inline}}
.s-menuknop{display:none;align-items:center;justify-content:center;width:48px;height:48px;border:var(--s-rand-zacht);border-radius:var(--straal-s);background:var(--rijst);color:var(--inkt);cursor:pointer;-webkit-tap-highlight-color:transparent}
.s-menuknop .s-ico{width:24px;height:24px}
.s-menuknop .s-ico--sluit{display:none}
.s-menuknop[aria-expanded=true] .s-ico--open{display:none}
.s-menuknop[aria-expanded=true] .s-ico--sluit{display:inline-block}
@media (max-width:1023px){
  .s-menuknop{display:inline-flex}
  html:not(.js) .s-kop__balk{flex-wrap:wrap}
  html:not(.js) .s-nav{order:5;width:100%;overflow-x:auto}
  html:not(.js) .s-menuknop{display:none}
  html.js .s-nav{position:fixed;left:0;right:0;top:calc(var(--s-kop-h) + env(safe-area-inset-top));bottom:0;z-index:var(--z-overlay);overflow-y:auto;overscroll-behavior:contain;
    padding:12px var(--s-goot) calc(32px + env(safe-area-inset-bottom));background:var(--rijst) url('../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/768px 768px repeat;
    border-top:var(--s-rand-zacht);visibility:hidden;opacity:0;transition:opacity var(--duur-kort) var(--ease),visibility 0s linear var(--duur-kort)}
  html.js .s-nav.is-open{visibility:visible;opacity:1;transition:opacity var(--duur-kort) var(--ease)}
  html.js .s-nav ul{flex-direction:column;gap:0}
  html.js .s-nav li{border-bottom:var(--s-rand-zacht)}
  html.js .s-nav a{display:flex;min-height:56px;padding:0 4px;font-size:1rem;letter-spacing:.2em}
  html.js .s-nav a::after{display:none}
  html.js .s-nav a[aria-current]{color:var(--dgoud)}
  html.js .s-nav__contact{display:grid;gap:4px;margin-top:var(--ruimte-5)}
  html.js .s-nav .s-nav__contact a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 4px;color:var(--inkt);text-decoration:none;font:500 1rem/1.3 var(--f-mono);letter-spacing:0;text-transform:none}
  .s-nav__contact .s-ico{width:20px;height:20px;color:var(--dgoud)}
  body.s-menu-open{overflow:hidden}
}
/* subnav: dekkend; mobiel weg bij omlaag scrollen, terug bij omhoog; fade alleen aan de kant met overloop */
.s-subnav{position:sticky;top:calc(var(--s-kop-h) + env(safe-area-inset-top));z-index:calc(var(--z-kop) - 1);border-bottom:1px solid var(--lijn-goud-zacht);
  background:var(--rijst) url('../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/768px 768px repeat;transition:transform .2s var(--ease)}
@media (max-width:1023px){html.s-omlaag .s-subnav{transform:translateY(-100%)}}
.s-subnav__balk{display:flex;align-items:center;gap:14px;min-height:var(--s-subnav-h)}
.s-subnav__titel{flex:none;display:inline-flex;align-items:center;gap:10px;font:500 .875rem/1 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--dgoud);text-decoration:none;min-height:44px}
.s-subnav__titel .s-zh{font-size:1rem;letter-spacing:.1em}
.s-subnav__lijst{display:flex;gap:2px;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:24px;min-width:0;--fl:#000;--fr:#000}
.s-subnav__lijst[data-overloop~=links]{--fl:transparent}
.s-subnav__lijst[data-overloop~=rechts]{--fr:transparent}
.s-subnav__lijst{-webkit-mask-image:linear-gradient(90deg,var(--fl),#000 32px,#000 calc(100% - 32px),var(--fr));mask-image:linear-gradient(90deg,var(--fl),#000 32px,#000 calc(100% - 32px),var(--fr))}
.s-subnav__lijst::-webkit-scrollbar{display:none}
.s-subnav__lijst li{flex:none}
.s-subnav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:var(--straal-s);font:400 .9375rem/1 var(--f-tekst);color:var(--grijs1);text-decoration:none;white-space:nowrap}
.s-subnav__lijst li:first-child a{padding-left:0}
.s-subnav a:hover{color:var(--inkt)}
.s-subnav a[aria-current]{color:var(--inkt);font-weight:600;box-shadow:inset 0 -2px 0 var(--goud)}
.s-subnav .s-teller{min-width:22px;height:22px;font-size:.875rem}
@media (max-width:767px){.s-subnav .s-subnav__titel{display:none}}
@media (orientation:landscape) and (max-height:500px){
  :root{--s-kop-h:52px}
  .s-merk__tag{display:none}
  .s-merk__maan{width:34px;height:34px}
  .s-subnav{position:relative;top:auto;transform:none!important}
  html{scroll-padding-top:calc(var(--s-kop-h) + 12px)}
  .s-actiebalk{display:none!important}
}
/* actiebalk (mobiel): 64 px + safe-area, dekkend, pas zichtbaar als de paginakop uit beeld is; weg bij invoerfocus en bij de voet */
.s-actiebalk{display:none}
@media (max-width:767px){
  .s-actiebalk{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--z-kop) + 1);display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;
    height:calc(var(--s-actiebalk-h) + env(safe-area-inset-bottom));padding:0 var(--s-goot) env(safe-area-inset-bottom);
    background:var(--rijst) url('../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/768px 768px repeat;border-top:1px solid var(--lijn-goud);
    box-shadow:0 -8px 24px rgba(var(--inkt-rgb),.08);transition:transform .26s var(--ease)}
  .s-actiebalk .s-knop{min-height:calc(var(--s-actiebalk-h) - 16px);padding:0 10px;font-size:.875rem;letter-spacing:.12em}
  .s-actiebalk .s-knop--rand{background:var(--rijst)}
  .s-actiebalk__lijst[data-leeg] .s-actiebalk__vol,.s-actiebalk__lijst:not([data-leeg]) .s-actiebalk__leeg{display:none}
  .s-actiebalk__leeg,.s-actiebalk__vol{display:inline-flex;align-items:center;gap:10px}
  .s-actiebalk__vol .s-teller[data-leeg]{display:inline-grid}
  .s-actiebalk.is-weg,.s-actiebalk.is-wacht,.s-actiebalk.is-invoer{transform:translateY(110%)}
  body.s-met-actiebalk{padding-bottom:calc(var(--s-actiebalk-h) + env(safe-area-inset-bottom))}
}

/* ================================================================ 10 VOET */
.s-voet{position:relative;margin-top:clamp(24px,4vw,56px);padding-top:clamp(112px,15vw,212px);color:var(--inkt2)}
.s-voet > .s-bergen{top:0;bottom:auto;height:clamp(104px,15vw,200px)}
.s-voet__raster{display:grid;gap:32px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.s-voet__raster > .s-voet__merk,.s-voet__raster > .s-voet__contact{grid-column:1 / -1}
@media (min-width:1100px){.s-voet__raster{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px 40px}.s-voet__raster > .s-voet__merk,.s-voet__raster > .s-voet__contact{grid-column:auto}}
.s-voet__merk p{max-width:36ch;color:var(--grijs1);font-size:.9375rem}
.s-voet__tag{display:block;margin:10px 0 12px;font-family:var(--f-serif);font-style:italic;font-size:1.1rem;color:var(--grijs1)}
.s-voet h2{margin-bottom:10px;font:500 var(--s-fs-label)/1.3 var(--f-kop);letter-spacing:.26em;text-transform:uppercase;color:var(--dgoud)}
.s-voet ul{list-style:none;display:grid;gap:0}
.s-voet li a,.s-voet__contact a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--inkt2);text-decoration:none;font-size:.9375rem}
.s-voet__contact a[href^="tel:"]{font-family:var(--f-mono);font-weight:500;white-space:nowrap}
.s-voet li a:hover,.s-voet__contact a:hover{color:var(--inkt);text-decoration:underline;text-decoration-color:var(--lijn-goud)}
.s-voet__contact .s-ico{width:18px;height:18px;color:var(--dgoud)}
.s-voet address{font-style:normal;font-size:.9375rem;color:var(--grijs1);line-height:1.5;margin-top:10px}
.s-voet address b{display:block;font:500 var(--s-fs-label)/1.4 var(--f-kop);letter-spacing:.16em;text-transform:uppercase;color:var(--inkt)}
.s-voet__onder{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;margin-top:clamp(32px,4vw,56px);padding-block:20px calc(24px + env(safe-area-inset-bottom));
  border-top:var(--s-rand-zacht);font-size:var(--s-fs-label);color:var(--grijs1)}
.s-voet__onder p{margin:0}
.s-voet__montage{display:inline-flex;align-items:center;gap:10px}

/* ================================================================ 11 BEWEGING (beweeg.js) — data-beweeg="inkt|teken|stempel|licht|op"
   Zichtbaar is de standaard: startstanden alleen onder html.js-beweeg (beweeg.js zet die klasse; nooit bij reduced motion). */
html.js-beweeg [data-beweeg=inkt]:not(.is-klaar){-webkit-mask:url('../beeld/orn/inkt-masker.webp?v=8dfd628d') 50% 55%/0% 0% no-repeat;mask:url('../beeld/orn/inkt-masker.webp?v=8dfd628d') 50% 55%/0% 0% no-repeat;opacity:.2}
html.js-beweeg [data-beweeg=inkt][data-beweeg-start]:not(.is-zichtbaar){-webkit-mask-size:150% 150%;mask-size:150% 150%;opacity:.6}
html.js-beweeg [data-beweeg=inkt].is-zichtbaar:not(.is-klaar){-webkit-mask-size:300% 300%;mask-size:300% 300%;opacity:1;
  transition:-webkit-mask-size .9s var(--s-ease-inkt),mask-size .9s var(--s-ease-inkt),opacity .9s var(--s-ease-inkt)}
html.js-beweeg [data-beweeg=op]:not(.is-zichtbaar){opacity:0;translate:0 12px}
html.js-beweeg [data-beweeg=op]{transition:opacity .7s var(--s-ease-inkt),translate .7s var(--s-ease-inkt)}
html.js-beweeg [data-beweeg=stempel]:not(.is-zichtbaar){opacity:0;scale:1.25;rotate:-8deg}
html.js-beweeg [data-beweeg=stempel].is-zichtbaar{animation:s-stempel-in .26s var(--s-ease-stempel) both}
html.js-beweeg [data-beweeg=teken] :is(path,line,circle,rect,polyline){stroke-dasharray:1 1}
html.js-beweeg [data-beweeg=teken]:not(.is-zichtbaar) :is(path,line,circle,rect,polyline){stroke-dashoffset:1}
html.js-beweeg [data-beweeg=teken].is-zichtbaar :is(path,line,circle,rect,polyline){stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--s-ease-inkt)}
html.js-beweeg .s-ornamentlijn[data-beweeg]:not(.is-zichtbaar){scale:0 1}
html.js-beweeg .s-ornamentlijn[data-beweeg]{transition:scale .8s var(--s-ease-inkt)}
/* licht: ramen gaan na elkaar aan (de lichtlaag .s-slot__licht wordt in 6 stappen van links naar rechts onthuld) */
html.js-beweeg [data-beweeg=licht] .s-slot__licht{-webkit-mask:linear-gradient(90deg,#000 48%,transparent 52%) 100% 0/220% 100% no-repeat;mask:linear-gradient(90deg,#000 48%,transparent 52%) 100% 0/220% 100% no-repeat}
html.js-beweeg [data-beweeg=licht].is-zichtbaar .s-slot__licht{-webkit-mask-position:0 0;mask-position:0 0;
  transition:-webkit-mask-position 2.4s steps(7,end) var(--vertraging,.5s),mask-position 2.4s steps(7,end) var(--vertraging,.5s)}
@keyframes s-stempel-in{0%{opacity:0;scale:1.25;rotate:-8deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes s-stempel{0%{transform:scale(1.35)}100%{transform:scale(1)}}
/* oude onthul-klasse (ronde 1) blijft werken, ook alleen met JS */
@media (prefers-reduced-motion:no-preference){
  html.js .s-onthul{opacity:0;translate:0 14px;transition:opacity .7s var(--ease),translate .7s var(--ease)}
  html.js .s-onthul.is-zichtbaar{opacity:1;translate:none}
}

/* ================================================================ 12 PRINT */
@media print{
  body{background:#fff}
  .s-kop,.s-subnav,.s-actiebalk,.s-menuknop,.s-laag{display:none!important}
}
@media (max-width:767px){.s-routekaart__naam--foshan{translate:0 -18px}}

/* ================================================================ 13 EINDKEURING RONDE 2 — gedeelde wensen van de pagina-bouwers
   (ronde2/wensen-*.md). Staat achteraan zodat het de basisregels hierboven overschrijft; paginacss mag nog verfijnen. */
:root{
  --goud-tekst:#7E6224;           /* klein goud (< 18 px) op rijst: 5,0 : 1 — licht goud alleen voor lijnen, ornament en grote cursief */
  --grijs-tekst:#6B655C;          /* klein grijs op rijst: 5,0 : 1 */
}
html{background-color:var(--rijst)}
/* contrast kleine kapitalen en labels (wens landing 18, assortiment 2, vragen 21, home 21, diensten 5) */
:is(.s-kicker,.s-folio,.s-voet h2,.s-feit__label,.s-stap__wanneer,.s-zegel-nr,.s-stappen-ring__moment,.s-maatblok__regels dt,
  .s-afsprakentabel dt,.s-totaal__label,.s-subnav__titel,.s-routekaart__loeptitel){color:var(--goud-tekst)}
:is(.s-meta,.s-zegel-nr__tot,.s-folio__lijn,.s-folio__nr span,.s-handtekening__rol,.s-oogopslag__label,.s-element__meta,.s-kruimel,
  .s-voet address,.s-voet__onder,.s-tabel thead th){color:var(--grijs-tekst)}
/* kop: ingeklapt klapt de ondertitel echt in, zodat het woordmerk op de as van logo en menu staat (wens landing 15, ass. 5, cf 15, ww 14, home 22, vp 14) */
.s-merk__tekst{align-content:center}
.s-merk__tag{display:block;max-height:1.4em;overflow:hidden;transition:opacity .2s var(--ease),max-height .22s var(--ease),margin .22s var(--ease)}
@media (max-width:399px){.s-merk__tag{display:none}}
html.s-ingeklapt .s-merk__tag{max-height:0;margin-top:0;opacity:0}
.s-merk__maan picture{width:100%;height:100%}
.s-merk__maan picture img{width:100%;height:100%;border-radius:50%}
/* kopknoppen: allebei 48 × 48 op mobiel; de teller staat op de hoek en duwt de navigatie niet opzij (wens landing 16, ass. 6, av 23) */
@media (max-width:1023px){.s-kop__acties{gap:8px}.s-lijstknop{width:48px;min-width:48px;height:48px;padding:0}.s-lijstknop .s-teller{position:absolute;top:-6px;right:-8px;box-shadow:0 0 0 2px var(--rijst)}}
@media (min-width:1024px){.s-lijstknop .s-teller{position:absolute;top:-6px;right:-10px;box-shadow:0 0 0 2px var(--rijst)}}
/* subnav: focusring binnen de scrollstrook (wens landing 35) */
.s-subnav a:focus-visible{outline-offset:-4px}
/* actiebalk: knoppen altijd 48 px (ook op 375 × 667), goud zonder zware slagschaduw (wens landing 17, vragen 19, ww 17) */
@media (max-width:767px){
  .s-actiebalk .s-knop{min-height:48px;height:48px}
  .s-actiebalk .s-knop--goud{box-shadow:inset 0 1px 0 rgba(255,250,232,.65),inset 0 -1px 0 var(--dgoud)}
  :root{--s-actiebalk-h:64px}
}
@media (max-width:767px) and (max-height:700px){:root{--s-actiebalk-h:58px}}
/* kruimel: ook "Home" krijgt een tikvlak van 44 px zonder dat de tekst verspringt (wens vragen 20) */
.s-kruimel a{justify-content:center;min-width:44px;padding-inline:6px;margin-inline:-6px}
/* kicker op smalle schermen: minder spatiëring zodat hij één regel blijft en vrij van het kader staat (wens landing 36) */
@media (max-width:440px){.s-kicker{letter-spacing:.16em}}
@media (max-width:400px){.s-kicker{letter-spacing:.12em}}
/* titelblok: lange nowrap-kinderen maken de kolom nooit breder; gecentreerde kop staat echt in het midden (wens cf 13, home 20) */
.s-titelblok__kop{grid-template-columns:minmax(0,1fr)}
.s-titelblok--midden .s-titelblok__kop > .s-h2{padding-right:0}
/* stappenring: titels op één basislijn (wens landing 5, cf 3, home 3, ww) */
.s-stappen-ring > li{align-content:start}
/* folio: 12 px op desktop; mobiel zonder losse lijnstomp aan het begin (wens ass. 3, ww 7, vragen 15, home 28) */
.s-folio{font-size:.75rem}
@media (max-width:767px){.s-folio{font-size:.875rem}.s-folio__lijn::before{display:none}}
/* slot: het cirkellogo is een blok (anders paginabreed), het beeld loopt met een masker in het papier uit i.p.v. een kleurvlak (wens C17, alle pagina's) */
.s-slot__logo{display:block}
.s-slot__beeld::after{display:none}
.s-slot__beeld > picture:not(.s-slot__licht) img{-webkit-mask-image:linear-gradient(180deg,#000 66%,transparent);mask-image:linear-gradient(180deg,#000 66%,transparent)}
/* absolute svg-lagen mogen breder zijn dan hun ouder (wens landing 31) */
.s-laag svg,svg[preserveAspectRatio=none]{max-width:none}
/* stempel eindigt op de eigen draaiing van het element (wens vp 23) */
@keyframes s-stempel-in{0%{opacity:0;scale:1.25;rotate:-8deg}100%{opacity:1;scale:1;rotate:var(--stempel-rot,0deg)}}
/* pins: tekst 14 px (wens vp 9) */
.s-pin,.s-pin__tip{font-size:.875rem}
/* voet: één regelritme, contact consequent in mono, zegel op de tekstregel, bergen lopen bovenaan zacht in (wens cf 17, home 26, vp 12/17, av 22, landing 25) */
.s-voet > .s-bergen{-webkit-mask-image:linear-gradient(180deg,transparent,#000 62%);mask-image:linear-gradient(180deg,transparent,#000 62%)}
.s-voet__contact a{font-family:var(--f-mono);font-weight:500;font-size:.875rem;letter-spacing:0}
.s-voet address b{margin-bottom:4px}
.s-voet h2{white-space:nowrap}
.s-voet li > a{min-width:44px}
.s-voet__montage .s-zegel-svg{flex:none;width:24px;height:24px}
.s-voet .s-merk__naam{white-space:nowrap}
/* regel met scheiders (·) die nooit aan een regelbegin bungelt: de scheider hoort bij het volgende item en wordt aan de linkerrand weggeknipt
   (wens ww 6/16/25, vp 10, vd 4, home 16) — gebruikt in de voet; bruikbaar als .s-scheidregel op elke pagina */
.s-scheidregel{display:flex;flex-wrap:wrap;margin-left:-1.3em;clip-path:inset(-4px -4px -4px 1.3em)}
.s-scheidregel > span{white-space:normal}
.s-scheidregel > span::before{content:"·";display:inline-block;width:1.3em;text-align:center;color:var(--dgoud)}
@media (max-width:767px){
  .s-voet{padding-top:clamp(88px,22vw,120px)}
  .s-voet__raster{gap:20px 20px}
  .s-voet__merk p{display:none}            /* mobiel: merkblok compact (het merk staat al in de sticky kop) */
  .s-voet__tag{margin:8px 0 0}
  .s-voet li a{min-height:44px}
}
.s-subnav__lijst > li.s-sub-weg{visibility:hidden}
@media (max-width:767px){.s-actiebalk.is-slot{transform:translateY(110%)}}
.s-kicker .s-nr{min-width:24px;height:24px;margin-block:-4px;vertical-align:middle}
@media (min-width:768px){.s-voet{padding-top:clamp(96px,10vw,150px)}.s-voet > .s-bergen{height:clamp(88px,10vw,140px)}}
/* routekaart: elk label op een papierhalo, nooit een kustlijn door de letters (wens home 5, ww 18, landing 21) */
.s-routekaart__naam > *{text-shadow:0 0 2px var(--rijst),0 0 4px var(--rijst),0 0 7px var(--rijst),0 0 10px rgba(var(--rijst-rgb),.8)}
main#inhoud,.s-voet{overflow-x:clip}   /* niets steekt buiten het scherm (Chrome mobiel verbreedt anders de layout-viewport ondanks body{overflow-x:clip}) */

/* ================================================================ 14. BEWEGING — het DSD-bewegingssysteem op de site (ronde 3)
   Bron: website/beweging/ (BEWEGING.md). Kopie in assets/beweging/ (beweging.css vóór dit bestand, beweging.min.js via beweeg.js).
   Eén systeem: beweging.min.js levert de toestand (b-beweeg | b-rustig), de wakende IntersectionObservers, de sfeer, de bloesem,
   de knop, de kaart en de focus; beweeg.js vertaalt de site-vocabulaire (data-beweeg, .s-wind, .s-knop) en bewaakt snel scrollen.
   Hier staat alleen wat de site-opmaak en het systeem op elkaar laat aansluiten. */

/* sfeer (papier ademt) als eerste kind van elke held: z-index −1 in een eigen stapelvlak, dus altijd onder de inhoud */
.vh-omslag__vel,.vd-kop__vel,.cf-kop{isolation:isolate}
.cf-kop{position:relative}
.s-vel > .b-sfeer,.cf-kop > .b-sfeer{inset:1px 1px 16px}         /* binnen de kaderlijn; onderaan 16 px vrij: de drift (±12 px) van het vel blijft binnen de held, anders telt de laag als overlap voor alles wat erna komt */

/* bloesem: het bladveld van het systeem (.b-scene > .b-bloesem) ligt ONDER elke tekstlaag (jurypunt: nooit over tekst) */
.s-blaadjes.b-scene{position:absolute;z-index:-1;contain:strict}
.ww-omslag__blaadjes.b-scene{z-index:3}                         /* ligt al in de lagengroep (z −1) onder de tekst; boven zon en bergen */

/* tak in de wind: ±0,45° om het aanhechtpunt (rechtsboven), 11 s, alleen terwijl de held in beeld is (beweeg.js) */
html.js-beweeg .s-wind{transform-origin:96% 6%;animation:s-wind var(--b-p-tak) var(--b-e-wind) infinite alternate}
html.js-beweeg .s-wind.is-rust,html.b-rustig .s-wind,html.b-verborgen .s-wind{animation:none}
@keyframes s-wind{0%{rotate:-.45deg}62%{rotate:.36deg}100%{rotate:.45deg}}

/* knop: .s-knop krijgt .b-knop (beweeg.js). De glans van het systeem (volgt de muis, één veeg bij tikken) vervangt de oude
   ::before-veeg en -vulling: geen twee glanseffecten tegelijk. Indrukken ½ mm (0,982) in plaats van 1 px omlaag. */
.s-knop.b-knop::before{display:none}
.s-knop.b-knop:active{transform:scale(calc(1 - (1 - var(--b-a-druk)) * var(--b-m)));transition-duration:var(--b-d-tik)}
.s-knop.b-knop .s-ico{position:relative}                          /* icoon boven de inktvlek */

/* kaart: [data-s-kaart] krijgt .b-kaart; de site tekent zijn eigen kaartvlak, het systeem alleen de lift en de schaduwwissel */
.b-kaart[data-s-kaart]::before{box-shadow:none}

/* velden: de focusring van het systeem (2 px donker goud, staat er meteen) + een gloed die zich neerlegt */
:is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus-visible{outline:2px solid var(--b-focus);outline-offset:2px;
  box-shadow:0 0 0 6px rgba(var(--goud-rgb),.22);animation:b-focus var(--b-d-staat) var(--b-e-uit) both}

/* onthullen via het systeem (data-b): titelblokken rijzen op in de vaste volgorde label → titel → lead */
.s-titelblok [data-b=op],.kz-kop [data-b=op]{will-change:auto}

/* snel scrollen (jurypunt): niets blijft halverwege een animatie staan — eindstand meteen (beweeg.js zet html.b-snel) */
html.b-snel :is([data-beweeg],[data-b],.is-zichtbaar,.is-gestempeld,.is-getekend){transition-duration:0s!important;transition-delay:0s!important}
/* aanvraaglijst: gouden inktring om de lijstknop bij toevoegen (beweeg.js, alleen met beweging) */
.s-golf{position:absolute;inset:-3px;border:1.5px solid var(--dgoud);border-radius:inherit;pointer-events:none;opacity:0}
/* de held met sfeer is zelf één laaggroep zolang de sfeer speelt (zoals .b-scene): anders wordt alles wat ná de held getekend
   wordt één "Overlap"-laag zo hoog als de pagina (LayerTree: 430 × 12 877 px). Buiten beeld (b-pauze) geeft hij de laag terug. */
html:not(.b-rustig) main > :is(section,header):has(.b-sfeer:not(.b-pauze)){will-change:transform}

/* =====================================================================
   §14 MOBIEL MENU ALS HANGROL (jury ronde 3; BEWEGING §3.3) — het papier ontrolt van onder de kop (720 ms, inkt-easing),
   de gouden staaf zakt mee aan de onderrand, de items volgen in een reeks van 90 ms; daaronder een sluier i.p.v. leeg papier.
   site.js zet .is-open, html.b-menu-open, inert op de rest, Esc sluit. Desktop: de omhulsels doen niet mee (display:contents).
   ===================================================================== */
.s-nav__rol,.s-nav__blad{display:contents}
.s-nav__staaf,.s-nav .s-nav__sub,.s-nav__voet{display:none}
@media (max-width:1023px){
  html.js .s-nav{bottom:auto;max-height:calc(100dvh - var(--s-kop-h) - env(safe-area-inset-top));padding:0;background:none;border-top:0;overflow:hidden;
    opacity:1;visibility:hidden;transition:visibility 0s linear 720ms}
  html.js .s-nav.is-open{visibility:visible;opacity:1;transition:none}
  html.js .s-nav__rol{display:block;max-height:inherit;overflow:hidden;transform:translate3d(0,-100%,0);transition:transform 720ms var(--b-e-in,cubic-bezier(.55,0,.75,.2))}
  html.js .s-nav__blad{display:block;max-height:calc(100dvh - var(--s-kop-h) - env(safe-area-inset-top) - 14px);overflow-y:auto;overscroll-behavior:contain;
    padding:12px var(--s-goot) 20px;background:var(--rijst) url('../kit/assets/orn/rijstpapier-tegel.jpg?v=766948a5') 0 0/768px 768px repeat;
    border-top:var(--s-rand-zacht);transform:translate3d(0,100%,0);transition:transform 720ms var(--b-e-in,cubic-bezier(.55,0,.75,.2))}
  html.js .s-nav.is-open .s-nav__rol,html.js .s-nav.is-open .s-nav__blad{transform:none;transition-timing-function:var(--b-e-inkt,cubic-bezier(.16,.84,.24,1))}
  /* de staaf: gouden rolstok met knoppen aan de onderrand van het papier */
  html.js .s-nav__staaf{display:block;position:relative;height:14px;background:var(--rijst);box-shadow:0 10px 18px -12px rgba(var(--inkt-rgb),.45)}
  html.js .s-nav__staaf::before{content:"";position:absolute;left:10px;right:10px;top:5px;height:4px;border-radius:2px;
    background:linear-gradient(180deg,var(--goudlicht),var(--goud) 45%,var(--dgoud));box-shadow:0 2px 6px rgba(var(--inkt-rgb),.18)}
  html.js .s-nav__staaf::after{content:"";position:absolute;inset:2px 0;
    background:radial-gradient(circle at 5px 5px,var(--goud) 0 4px,transparent 4.5px) 0 0/10px 10px no-repeat,
               radial-gradient(circle at 5px 5px,var(--goud) 0 4px,transparent 4.5px) 100% 0/10px 10px no-repeat}
  /* sluier over de pagina eronder (geen leeg papier tot de onderrand) */
  body.s-menu-open::after{content:"";position:fixed;inset:0;z-index:calc(var(--z-kop) - 1);background:rgba(var(--rijst-rgb),.74);pointer-events:none}
  /* kozijnen-subnav ingesprongen onder "Aluminium kozijnen" */
  html.js .s-nav .s-nav__sub{display:block;list-style:none;margin:-6px 0 10px;padding:0 0 0 18px;border-left:1px solid var(--lijn-goud-zacht)}
  html.js .s-nav__blad .s-nav__sub li{border-bottom:0}
  html.js .s-nav .s-nav__sub a{min-height:44px;font:500 .9375rem/1.2 var(--f-kop);letter-spacing:.16em;color:var(--inkt2)}
  html.js .s-nav__blad > ul > li:has(> .s-nav__sub){border-bottom:var(--s-rand-zacht)}
  /* onderkant: voetzegel 龍 + montageregel */
  html.js .s-nav__voet{display:flex;align-items:center;gap:10px;margin:var(--ruimte-5) 0 0;padding-top:14px;border-top:1px solid var(--lijn-goud-zacht);
    font:500 .875rem/1.4 var(--f-mono);color:var(--grijs-tekst,#6B655C)}
  html.js .s-nav__voet .s-zegel-svg{flex:none;width:24px;height:24px}
  /* items volgen het papier (reeks 90 ms, plafond 600 ms) */
  html.js .s-nav [data-b-rol-item]{opacity:0;transform:translate3d(0,-6px,0);transition:opacity 280ms var(--b-e-uit,ease-out),transform 280ms var(--b-e-uit,ease-out)}
  html.js .s-nav.is-open [data-b-rol-item]{opacity:1;transform:none;transition-duration:460ms;transition-delay:calc(200ms + min(var(--i,0) * 90ms, 600ms))}
  /* rustig: geen rol, alleen overvloeien */
  html.b-rustig .s-nav__rol,html.b-rustig .s-nav__blad{transform:none!important;transition:none!important}
  html.b-rustig .s-nav{opacity:0;transition:opacity 280ms linear,visibility 0s linear 280ms}
  html.b-rustig .s-nav.is-open{opacity:1;transition:opacity 280ms linear}
  html.b-rustig .s-nav [data-b-rol-item]{opacity:1;transform:none;transition:none}
}
@media (prefers-reduced-motion:reduce){
  html.js .s-nav__rol,html.js .s-nav__blad{transform:none!important;transition:none!important}
  html.js .s-nav [data-b-rol-item]{opacity:1!important;transform:none!important;transition:none!important}
}