/* =====================================================================
   De Zeeuwse Uitvaartverzorging — vier hero-voorstellen
   Vier losse richtingen. Elke richting heeft zijn eigen vlak, accent,
   kopletter, indelingslogica en signatuur; alles is per versie ge-
   namespaced zodat geen token kan weglekken.
   Tokens zijn genoemd naar het VLAK waarop ze leesbaar zijn.
   ===================================================================== */

/* ---------- letters, lokaal ---------- */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(font/instrument-sans-500.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(font/instrument-sans-600.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url(font/instrument-sans-700.woff2) format('woff2')}
@font-face{font-family:'Cardo';font-style:normal;font-weight:400;font-display:swap;src:url(font/cardo-400.woff2) format('woff2')}
@font-face{font-family:'Cardo';font-style:normal;font-weight:700;font-display:swap;src:url(font/cardo-700.woff2) format('woff2')}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:500;font-display:swap;src:url(font/frank-ruhl-libre-500.woff2) format('woff2')}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:700;font-display:swap;src:url(font/frank-ruhl-libre-700.woff2) format('woff2')}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(font/marcellus-400.woff2) format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url(font/karla-400.woff2) format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url(font/karla-500.woff2) format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url(font/karla-700.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(font/source-serif-4-400.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(font/source-serif-4-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(font/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(font/ibm-plex-mono-500.woff2) format('woff2')}

/* ---------- reset ----------
   img{height:auto} staat hier met opzet: een aspect-ratio op een <img>
   doet niets zolang het height-attribuut als presentational hint een
   echte hoogte oplegt. Regels die wél een hoogte willen, overschrijven
   dit hieronder expliciet. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,p,dl,dd,dt,ol,ul,figure,figcaption{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0}
:where(a,button,[tabindex]):focus-visible{outline:2px solid currentColor;outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:60;padding:10px 16px;background:#0A1230;color:#fff;font:500 14px/1 'IBM Plex Mono',ui-monospace,monospace}
.skip:focus{left:8px;top:8px}

.ver[hidden]{display:none}

.nav{position:relative}
.nav-b{display:none;list-style:none;cursor:pointer;min-height:44px;align-items:center;
  padding:0 14px;border:1px solid currentColor;
  font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase}
.nav-b::-webkit-details-marker{display:none}
.nav-l{display:flex;flex-wrap:wrap;gap:4px 22px;
  font:500 12px/1.3 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.nav-l a{display:inline-block;padding:5px 0;text-decoration:none}
.nav-l a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

@media (max-width:760px){
  .nav-b{display:inline-flex}
  .has-js .nav:not([open]) .nav-l{display:none}
  .has-js .nav[open] .nav-l{position:absolute;z-index:30;top:calc(100% + 9px);left:0;
    min-width:200px;display:grid;gap:14px;padding:16px 18px;
    background:var(--nav-vlak,#111);border:1px solid var(--nav-lijn,rgba(255,255,255,.25))}
}

/* ---------- de wisselaar: gereedschap, geen ontwerp ---------- */
.vswitch{position:fixed;right:12px;bottom:12px;z-index:50;display:flex;align-items:center;gap:6px;
  padding:7px 9px;background:rgba(12,14,22,.9);border:1px solid rgba(255,255,255,.24);border-radius:999px;
  font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace;color:#F2F3F7;backdrop-filter:blur(6px)}
.vswitch-l{letter-spacing:.06em;opacity:.72;padding-left:4px}
.vswitch-b{min-width:30px;height:30px;border-radius:999px;cursor:pointer;color:#F2F3F7;
  border:1px solid rgba(255,255,255,.3);transition:background .18s ease,color .18s ease}
.vswitch-b:hover{background:rgba(255,255,255,.16)}
.vswitch-b[aria-pressed="true"]{background:#F2F3F7;color:#12141C;border-color:#F2F3F7}


/* =====================================================================
   V1 — HET UUR
   Vlak: middernachtblauw. Accent: het karmijn uit het wapen, opgehaald
   voor een donkere ondergrond. Kopletter: Instrument Sans.
   Indeling: het oog landt linksonder in het water, loopt langs de
   urenband naar rechts en stopt op het telefoonnummer.
   Signatuur: het etmaal in vierentwintig uren, met het nu erin.
   ===================================================================== */
#version-v1{
  --v1-nacht:#0A1230;          /* paginavlak */
  --v1-nacht-d:#060A1C;        /* diepste band, onder de plaat */
  --v1-licht:#E8ECF6;          /* tekst, leesbaar op nacht (13:1) */
  --v1-stil:#A6B0CC;           /* gedempt, leesbaar op nacht (7.4:1) */
  --v1-rood-vul:#C0342A;       /* vlakvulling waar licht op komt (5.5:1) */
  --v1-rood-l:#EE7A66;         /* karmijn als TEKST op nacht (5.7:1) */
  --v1-lijn:rgba(232,236,246,.2);
  --v1-r:0px;                  /* één radiustaal: recht */
  --v1-schaduw:0 18px 44px rgba(3,6,18,.55);   /* één elevatietaal */
  --v1-u:7px;                  /* basiseenheid; elke maat is een veelvoud */
  --v1-soepel:cubic-bezier(.32,.72,.24,1);

  --nav-vlak:#070C1F;
  --nav-lijn:rgba(232,236,246,.24);

  background:var(--v1-nacht);color:var(--v1-licht);
  background-image:radial-gradient(112% 78% at 8% 4%,rgba(96,120,190,.2) 0%,rgba(96,120,190,0) 58%),
                   radial-gradient(90% 70% at 96% 92%,rgba(192,52,42,.14) 0%,rgba(192,52,42,0) 62%);
  font:400 17px/1.62 'Source Serif 4',Georgia,serif;
}
.v1-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:calc(var(--v1-u)*2);
  padding:calc(var(--v1-u)*3) calc(var(--v1-u)*4);border-bottom:1px solid var(--v1-lijn)}
.v1-mark{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--v1-u)*2);min-width:0}
.v1-mark-n{font:600 17px/1.2 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.012em}
.v1-mark-s{font:400 11.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.05em;color:var(--v1-stil)}
.v1-top-tel{display:flex;align-items:baseline;gap:calc(var(--v1-u)*1.5);text-decoration:none;white-space:nowrap}
.v1-top-tel-l{font:400 11.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.05em;color:var(--v1-rood-l)}
.v1-top-tel-n{font:600 17px/1.2 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.01em}
.v1-top-tel:hover .v1-top-tel-n{color:var(--v1-rood-l)}

.v1-hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - 66px);
  display:grid;grid-template-columns:minmax(0,1fr);align-content:end}

/* Blikvanger: het beeld vult het hele eerste scherm en bloedt aan vier kanten. */
.v1-beeld{position:absolute;inset:0;z-index:0;overflow:hidden}
.v1-beeld picture{display:block;width:100%;height:100%}
.v1-beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.v1-beeld::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(6,10,28,.72) 0%,rgba(6,10,28,.44) 46%,rgba(6,10,28,0) 82%),
             linear-gradient(178deg,rgba(6,10,28,.58) 0%,rgba(6,10,28,.1) 30%,rgba(6,10,28,.6) 72%,rgba(6,10,28,.94) 100%)}

/* De tekstplaat draagt zijn EIGEN gradient, op de voorouder van de tekst. */
.v1-plaat{position:relative;z-index:2;padding:calc(var(--v1-u)*10) calc(var(--v1-u)*4) calc(var(--v1-u)*6);
  max-width:min(92vw,880px);
  background:linear-gradient(180deg,rgba(6,10,28,0) 0%,rgba(6,10,28,.4) 34%,rgba(6,10,28,.72) 74%,rgba(6,10,28,.78) 100%)}
.v1-kop{font:700 clamp(2.15rem,6.4vw,4.5rem)/1.04 'Instrument Sans',system-ui,sans-serif;
  letter-spacing:-.032em;text-wrap:balance;min-width:0}
.v1-kop-em{font-style:normal;color:var(--v1-rood-l)}
.v1-lead{margin-top:calc(var(--v1-u)*3);max-width:56ch;font-size:1.06rem;color:var(--v1-licht)}
.v1-cta{margin-top:calc(var(--v1-u)*5);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--v1-u)*3)}
.v1-bel{display:inline-flex;align-items:baseline;gap:.5ch;padding:calc(var(--v1-u)*2.2) calc(var(--v1-u)*4);
  border-radius:999px;                                  /* de ene bewuste uitzondering op de rechte hoek */
  background:var(--v1-rood-vul);color:#fff;text-decoration:none;box-shadow:var(--v1-schaduw);
  font:600 1.06rem/1.1 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.01em;
  transition:transform .2s var(--v1-soepel),background .2s ease}
.v1-bel-n{font-variant-numeric:tabular-nums}
.v1-bel:hover{transform:translateY(-2px);background:#D03C31}
.v1-mail{font:400 15px/1.3 'IBM Plex Mono',ui-monospace,monospace;color:var(--v1-stil);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.v1-mail:hover{color:var(--v1-licht)}

/* Signatuur: de urenband ligt VOOR het beeld en overlapt de plaat. */
.v1-band{position:relative;z-index:3;margin:0 calc(var(--v1-u)*4) calc(var(--v1-u)*4);
  margin-top:calc(var(--v1-u)*-3);
  padding:calc(var(--v1-u)*3) calc(var(--v1-u)*4) calc(var(--v1-u)*3.5);
  background:rgba(6,10,28,.9);border:1px solid var(--v1-lijn);border-radius:var(--v1-r);
  box-shadow:var(--v1-schaduw)}
.v1-band-k{font:500 11.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.09em;
  text-transform:uppercase;color:var(--v1-rood-l)}
.v1-dag{position:relative;display:flex;gap:2px;margin-top:calc(var(--v1-u)*2);height:calc(var(--v1-u)*5)}
.v1-uur{flex:1 1 0;min-width:0;background:rgba(232,236,246,.16);border-radius:var(--v1-r)}
.v1-uur-op{background:rgba(232,236,246,.44)}
.v1-nu{position:absolute;top:-6px;bottom:-6px;left:calc(var(--nu,.5) * 100%);width:2px;
  background:var(--v1-rood-l);box-shadow:0 0 0 4px rgba(240,133,122,.22)}
.v1-tijden{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:calc(var(--v1-u)*2) calc(var(--v1-u)*4);
  margin-top:calc(var(--v1-u)*3)}
.v1-tijden dt{font:500 12px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.04em;color:var(--v1-stil)}
.v1-tijden dd{font:600 15px/1.4 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.008em;font-variant-numeric:tabular-nums}

/* Satelliet: één cijfer dat over het beeld valt. */
.v1-chip{position:absolute;z-index:4;right:calc(var(--v1-u)*4);top:calc(var(--v1-u)*5);
  display:flex;align-items:baseline;gap:calc(var(--v1-u)*1.5);max-width:min(52vw,260px);
  padding:calc(var(--v1-u)*2) calc(var(--v1-u)*3);background:rgba(6,10,28,.86);
  border:1px solid var(--v1-lijn);border-radius:var(--v1-r);box-shadow:var(--v1-schaduw)}
.v1-chip-c{font:700 clamp(1.5rem,3.2vw,2.15rem)/1 'Instrument Sans',system-ui,sans-serif;
  letter-spacing:-.03em;color:var(--v1-rood-l);font-variant-numeric:tabular-nums}
.v1-chip-t{font:400 11.5px/1.35 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.03em;color:var(--v1-stil)}

.v1-voet{padding:calc(var(--v1-u)*7) calc(var(--v1-u)*4);background:var(--v1-nacht-d);border-top:1px solid var(--v1-lijn)}
.v1-voet-k{font:600 1.15rem/1.2 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.015em}
.v1-voet-a{margin-top:calc(var(--v1-u)*1.5);max-width:62ch;color:var(--v1-stil);font-size:.98rem}
.v1-voet-t{margin-top:calc(var(--v1-u)*3);display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--v1-u)*1) calc(var(--v1-u)*2.5);
  font:400 13.5px/1.6 'IBM Plex Mono',ui-monospace,monospace}
.v1-voet-t span{color:var(--v1-stil);font-size:11.5px;letter-spacing:.05em}
.v1-voet-t a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.v1-credit{margin-top:calc(var(--v1-u)*5);font:400 12.5px/1.5 'IBM Plex Mono',ui-monospace,monospace;color:var(--v1-stil)}
.v1-credit a{color:var(--v1-licht)}

/* Smal: het beeld boven, de tekst op het volle vlak eronder. Zo staat er
   geen letter meer op de foto en hoeft de plaat de foto niet op te eten. */
@media (max-width:760px){
  .v1-hero{min-height:0;display:block;overflow:visible}
  .v1-beeld{position:relative;inset:auto;height:52svh;min-height:280px}
  .v1-beeld img{object-position:50% 50%}
  .v1-beeld::after{background:linear-gradient(180deg,rgba(6,10,28,.34) 0%,rgba(6,10,28,0) 40%,rgba(6,10,28,.72) 100%)}
  .v1-plaat{background:none;max-width:none;padding:calc(var(--v1-u)*5) calc(var(--v1-u)*3) calc(var(--v1-u)*3)}
  .v1-band{margin:0 calc(var(--v1-u)*3) calc(var(--v1-u)*5);margin-top:calc(var(--v1-u)*2);
    padding:calc(var(--v1-u)*3);background:rgba(232,236,246,.05)}
  .v1-chip{position:absolute;right:calc(var(--v1-u)*3);top:calc(52svh - 34px);z-index:5;max-width:72vw}
  .v1-top,.v1-voet{padding-left:calc(var(--v1-u)*3);padding-right:calc(var(--v1-u)*3)}
}

@media (prefers-reduced-motion:no-preference){
  @keyframes v1-adem{0%,100%{opacity:.9}50%{opacity:.58}}
  @keyframes v1-drift{0%{transform:scale(1.04) translate3d(0,0,0)}100%{transform:scale(1.09) translate3d(0,-1.2%,0)}}
  .v1-nu{animation:v1-adem 4.4s var(--v1-soepel) infinite}
  .v1-beeld img{animation:v1-drift 30s var(--v1-soepel) infinite alternate}
}


/* =====================================================================
   V2 — VAN WOUW TOT ZEEUWS-VLAANDEREN
   Vlak: het steengrijs van de Zeeuwse lucht, een middentoon. Accent: het
   diepe blauw van het wapen, op schaal. Kopletter: Cardo.
   Indeling: het oog landt linksboven op de kop, valt op de waterband en
   wordt door de golven van links naar rechts naar de drie plaatsen
   gedragen, die op de blauwe plint staan.
   Signatuur: de golven uit het wapen, op provincieschaal.
   ===================================================================== */
#version-v2{
  --v2-steen:#AFB4B0;          /* paginavlak */
  --v2-steen-d:#98A099;        /* diepere band */
  --v2-inkt:#23282A;           /* tekst op steen (7.0:1) */
  --v2-stil:#363C3E;           /* gedempt op steen (5.3:1) */
  --v2-blauw:#151F72;          /* accent op steen (6.7:1), en vlakvulling */
  --v2-op-blauw:#F2ECE0;       /* tekst op de blauwe golf (11.7:1) */
  --v2-lijn:rgba(35,40,42,.3);
  --v2-r:0px;                  /* één radiustaal: geen */
  --v2-schaduw:0 20px 40px rgba(24,30,34,.36);
  --v2-u:7px;
  --v2-soepel:cubic-bezier(.4,.02,.2,1);
  --nav-vlak:#8F958F;
  --nav-lijn:rgba(35,40,42,.42);

  background:var(--v2-steen);color:var(--v2-inkt);
  background-image:radial-gradient(104% 70% at 8% 0%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 58%),
                   radial-gradient(96% 74% at 96% 40%,rgba(21,31,114,.16) 0%,rgba(21,31,114,0) 62%);
  font:400 17px/1.6 'Karla',system-ui,sans-serif;
}
.v2-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:calc(var(--v2-u)*2);
  padding:calc(var(--v2-u)*3) calc(var(--v2-u)*4)}
.v2-mark{font:700 18px/1.2 'Cardo',Georgia,serif;letter-spacing:.004em}
.v2-top-tel{display:flex;align-items:baseline;gap:calc(var(--v2-u)*1.5);text-decoration:none;white-space:nowrap;
  font:500 16px/1.2 'IBM Plex Mono',ui-monospace,monospace;color:var(--v2-blauw)}
.v2-top-tel-l{font-size:11.5px;letter-spacing:.06em;color:var(--v2-stil)}
.v2-top-tel:hover{text-decoration:underline;text-underline-offset:4px}

.v2-hero{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - 62px)}
.v2-blok{padding:calc(var(--v2-u)*4) calc(var(--v2-u)*4) calc(var(--v2-u)*5)}
.v2-kop{max-width:22ch;
  font:700 clamp(2.3rem,6.6vw,4.9rem)/1.03 'Cardo',Georgia,serif;letter-spacing:-.014em;
  min-width:0;text-wrap:balance}
.v2-kop-em{font-style:normal;color:var(--v2-blauw)}
.v2-lead{margin-top:calc(var(--v2-u)*3);max-width:52ch;color:var(--v2-stil);font-size:1.04rem}
.v2-cta{margin-top:calc(var(--v2-u)*4);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--v2-u)*3)}
.v2-bel{display:inline-block;padding:calc(var(--v2-u)*2.4) calc(var(--v2-u)*4.5);background:var(--v2-blauw);
  color:var(--v2-op-blauw);text-decoration:none;border-radius:var(--v2-r);box-shadow:var(--v2-schaduw);
  font:700 1.04rem/1.1 'Karla',system-ui,sans-serif;
  transition:transform .2s var(--v2-soepel),background .2s ease}
.v2-bel:hover{transform:translateY(-2px);background:#1B2894}
.v2-cta-s{font-size:.96rem;color:var(--v2-stil)}
.v2-cta-s a{text-decoration:underline;text-underline-offset:3px;color:var(--v2-blauw)}

/* De band bloedt door beide schermranden en vult de rest van het scherm. */
.v2-golf{position:relative;flex:1 1 auto;isolation:isolate;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);
  min-height:clamp(360px,34vw,470px);display:flex;flex-direction:column;justify-content:flex-end}
.v2-water{position:absolute;inset:0;z-index:0}
.v2-water img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.v2-water::after{content:"";position:absolute;inset:0;
  background:linear-gradient(184deg,rgba(175,180,176,.5) 0%,rgba(175,180,176,.05) 26%,rgba(15,22,86,.24) 100%)}

.v2-linten{position:absolute;z-index:1;left:0;right:0;top:6%;height:52%;
  filter:drop-shadow(0 14px 22px rgba(16,22,60,.42))}

/* Satelliet: één chip die over het water valt. */
.v2-chip{position:absolute;z-index:3;right:calc(var(--v2-u)*4);top:calc(var(--v2-u)*3);
  max-width:min(54vw,270px);padding:calc(var(--v2-u)*1.8) calc(var(--v2-u)*2.6);
  background:rgba(15,22,86,.9);color:var(--v2-op-blauw);box-shadow:var(--v2-schaduw);
  font:500 12px/1.45 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.04em}

/* De plint waar de drie kantoren op staan; zijn bovenrand is de derde golf. */
.v2-plint{position:relative;z-index:2;background:#0F1656;
  padding:calc(var(--v2-u)*3) calc(var(--v2-u)*4) calc(var(--v2-u)*4)}
.v2-plint-golf{position:absolute;left:0;right:0;bottom:100%;height:clamp(38px,4.4vw,64px);width:100%;
  margin-bottom:-1px}
.v2-plaatsen{position:relative;display:flex;flex-wrap:wrap;gap:calc(var(--v2-u)*2) calc(var(--v2-u)*7)}
.v2-plaats{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--v2-u)*1.6);min-width:0}
.v2-plaats-n{font:700 clamp(1.3rem,2.5vw,1.95rem)/1 'Cardo',Georgia,serif;letter-spacing:-.008em;color:var(--v2-op-blauw)}
.v2-plaats-t{font:500 14.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;color:#D9D3C6}
a.v2-plaats-t{color:var(--v2-op-blauw);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

.v2-voet{padding:calc(var(--v2-u)*7) calc(var(--v2-u)*4);background:var(--v2-steen-d);border-top:1px solid var(--v2-lijn)}
.v2-voet-k{font:700 1.2rem/1.2 'Cardo',Georgia,serif}
.v2-voet-a{margin-top:calc(var(--v2-u)*1.5);max-width:62ch;color:#20252A;font-size:.98rem}
.v2-voet-t{margin-top:calc(var(--v2-u)*3);display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--v2-u)*1) calc(var(--v2-u)*2.5);
  font:400 13.5px/1.6 'IBM Plex Mono',ui-monospace,monospace}
.v2-voet-t span{color:#20252A;font-size:11.5px;letter-spacing:.05em}
.v2-voet-t a{text-decoration:underline;text-underline-offset:3px;color:var(--v2-blauw)}
.v2-credit{margin-top:calc(var(--v2-u)*5);font:400 12.5px/1.5 'IBM Plex Mono',ui-monospace,monospace;color:#20252A}
.v2-credit a{color:var(--v2-blauw)}

@media (max-width:860px){
  .v2-hero{min-height:0}
  .v2-blok{padding:calc(var(--v2-u)*3) calc(var(--v2-u)*3) calc(var(--v2-u)*4)}
  .v2-kop{max-width:none}
  .v2-golf{min-height:clamp(420px,86vw,540px)}
  .v2-linten{top:4%;height:44%}
  .v2-chip{right:calc(var(--v2-u)*3);top:calc(var(--v2-u)*2.5);max-width:64vw}
  .v2-plint{padding:calc(var(--v2-u)*3) calc(var(--v2-u)*3) calc(var(--v2-u)*4)}
  .v2-plaatsen{gap:calc(var(--v2-u)*2)}
  .v2-plaats{width:100%}
  .v2-top,.v2-voet{padding-left:calc(var(--v2-u)*3);padding-right:calc(var(--v2-u)*3)}
}

@media (prefers-reduced-motion:no-preference){
  @keyframes v2-stroom{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-2.4%,0,0)}}
  @keyframes v2-stroom-t{0%{transform:translate3d(-2%,0,0)}100%{transform:translate3d(0,0,0)}}
  .v2-lint-a{animation:v2-stroom 28s ease-in-out infinite alternate}
  .v2-lint-b{animation:v2-stroom-t 38s ease-in-out infinite alternate}
}


/* =====================================================================
   V3 — DE PRIJS STAAT ER GEWOON
   Vlak: ongebleekt papier, het materiaal dat de bron zelf noemt.
   Accent: gedempt mosgroen, uit de fair trade en natuurlijke producten.
   Kopletter: Frank Ruhl Libre.
   Indeling: het oog landt op het bedrag, wordt onderbroken door de
   kaart die eroverheen ligt, en zakt dan het register in.
   Signatuur: het prijsregister, waarin alleen het verschil staat.
   ===================================================================== */
#version-v3{
  --v3-papier:#F2ECE0;         /* paginavlak */
  --v3-papier-d:#E4DCCB;       /* diepere band */
  --v3-inkt:#241F1A;           /* tekst op papier (13.7:1) */
  --v3-stil:#6A6055;           /* gedempt op papier (5.2:1) */
  --v3-mos:#4B5F3A;            /* accent op papier (6.0:1), en vlakvulling */
  --v3-op-mos:#F2ECE0;         /* tekst op mos (6.0:1) */
  --v3-lijn:rgba(36,31,26,.2);
  --v3-r:2px;                  /* één radiustaal */
  --v3-schaduw:0 26px 50px -12px rgba(46,38,26,.42);
  --v3-u:7px;
  --v3-soepel:cubic-bezier(.22,.68,.16,1);

  --nav-vlak:#E7DFCF;
  --nav-lijn:rgba(36,31,26,.28);

  background:var(--v3-papier);color:var(--v3-inkt);
  font:400 17px/1.62 'Karla',system-ui,sans-serif;
  background-image:radial-gradient(120% 80% at 12% 0%,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 56%),
                   radial-gradient(90% 70% at 92% 100%,rgba(75,95,58,.09) 0%,rgba(75,95,58,0) 60%);
}
.v3-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:calc(var(--v3-u)*2);
  padding:calc(var(--v3-u)*3) calc(var(--v3-u)*4);border-bottom:1px solid var(--v3-lijn)}
.v3-mark{font:700 17px/1.2 'Frank Ruhl Libre',Georgia,serif;letter-spacing:-.004em}
.v3-top-tel{font:500 16px/1.2 'IBM Plex Mono',ui-monospace,monospace;color:var(--v3-mos);text-decoration:none;white-space:nowrap}
.v3-top-tel:hover{text-decoration:underline;text-underline-offset:4px}

.v3-hero{position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  grid-template-areas:"blok kaarten" "cta cta" "reg reg";
  column-gap:calc(var(--v3-u)*5);align-items:start;
  padding:calc(var(--v3-u)*7) calc(var(--v3-u)*4) 0}
.v3-blok{grid-area:blok;min-width:0}
.v3-kop{display:grid;min-width:0;font-family:'Frank Ruhl Libre',Georgia,serif}
.v3-kop-b{font:500 clamp(1.05rem,2.1vw,1.55rem)/1.25 'Frank Ruhl Libre',Georgia,serif;color:var(--v3-stil)}
.v3-kop-g{font:700 clamp(4.1rem,13vw,10.5rem)/.86 'Frank Ruhl Libre',Georgia,serif;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin-left:-.03em}
.v3-kop-e{font-size:.36em;color:var(--v3-mos);vertical-align:.86em;letter-spacing:0;padding-right:.12em}
.v3-lead{margin-top:calc(var(--v3-u)*3);max-width:46ch;color:var(--v3-stil);font-size:1.02rem}
.v3-proef{margin-top:calc(var(--v3-u)*5);display:flex;flex-wrap:wrap;gap:calc(var(--v3-u)*2) calc(var(--v3-u)*6);
  padding-top:calc(var(--v3-u)*3);border-top:1px solid var(--v3-lijn);max-width:44ch}
.v3-proef dt{font:400 11.5px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.09em;
  text-transform:uppercase;color:var(--v3-stil)}
.v3-proef dd{margin-top:2px;font:700 1.02rem/1.3 'Frank Ruhl Libre',Georgia,serif;color:var(--v3-inkt)}

.v3-reg{grid-area:reg;margin-top:calc(var(--v3-u)*7);border-top:1px solid var(--v3-lijn);min-width:0;
  max-width:min(58vw,760px)}
.v3-reg-r{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:calc(var(--v3-u)*3);
  padding:calc(var(--v3-u)*2.5) 0;border-bottom:1px solid var(--v3-lijn)}
.v3-reg-n{font:700 1.02rem/1.3 'Karla',system-ui,sans-serif;min-width:0}
.v3-reg-p{grid-column:2;grid-row:1;font:700 clamp(1.2rem,2.4vw,1.7rem)/1 'Frank Ruhl Libre',Georgia,serif;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.v3-reg-p::before{content:"\20AC\A0";font-size:.62em;color:var(--v3-stil);vertical-align:.18em}
.v3-reg-d{grid-column:1;font:400 13.5px/1.5 'IBM Plex Mono',ui-monospace,monospace;color:var(--v3-stil);
  margin-top:calc(var(--v3-u)*.5);max-width:52ch}
.v3-reg-r-lb .v3-reg-n{color:var(--v3-mos)}

/* Blikvanger: twee echte kaarten, gemaakt en niet geplaatst. */
.v3-kaarten{grid-area:kaarten;position:relative;z-index:3;justify-self:end;
  width:min(34vw,420px);margin-top:calc(var(--v3-u)*2);margin-bottom:calc(var(--v3-u)*-9)}
.v3-kaart-2{position:absolute;inset:calc(var(--v3-u)*4) calc(var(--v3-u)*-3) calc(var(--v3-u)*-4) calc(var(--v3-u)*3);
  background:#FBF7EF;border:1px solid var(--v3-lijn);border-radius:var(--v3-r);
  box-shadow:var(--v3-schaduw);transform:rotate(3.4deg)}
.v3-kaart{position:relative;background:#FDFAF4;border:1px solid var(--v3-lijn);border-radius:var(--v3-r);
  padding:calc(var(--v3-u)*2);box-shadow:var(--v3-schaduw);transform:rotate(-2.6deg)}
.v3-kaart img{width:100%;height:auto;border-radius:var(--v3-r)}
.v3-kaart-c{margin-top:calc(var(--v3-u)*2);padding-bottom:calc(var(--v3-u)*3);
  font:400 13px/1.5 'Frank Ruhl Libre',Georgia,serif;color:var(--v3-stil)}
/* Satelliet: één chip die over de kaart valt. */
.v3-fsc{position:absolute;z-index:4;left:calc(var(--v3-u)*-4);bottom:calc(var(--v3-u)*-4);
  padding:calc(var(--v3-u)*1.6) calc(var(--v3-u)*2.6);background:var(--v3-mos);border-radius:var(--v3-r);
  box-shadow:var(--v3-schaduw)}
.v3-fsc-t{font:500 11.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.06em;
  text-transform:uppercase;color:var(--v3-op-mos)}

/* Verzadigd vlak: de mosgroene band bloedt door beide schermranden. */
.v3-cta{grid-area:cta;width:100vw;margin-left:calc(50% - 50vw);margin-top:calc(var(--v3-u)*6);
  padding:calc(var(--v3-u)*5) calc(var(--v3-u)*4);background:var(--v3-mos);color:var(--v3-op-mos);
  display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--v3-u)*2) calc(var(--v3-u)*4)}
.v3-actie{margin-top:calc(var(--v3-u)*4)}
.v3-bel{display:inline-block;padding:calc(var(--v3-u)*2.2) calc(var(--v3-u)*4);background:var(--v3-mos);
  color:var(--v3-op-mos);text-decoration:none;border-radius:var(--v3-r);box-shadow:var(--v3-schaduw);
  font:700 1.04rem/1.1 'Karla',system-ui,sans-serif;
  transition:transform .2s var(--v3-soepel),background .2s ease}
.v3-bel:hover{transform:translateY(-2px);background:#566E42}
.v3-cta-s{max-width:52ch;font-size:.96rem;color:#EAE4D6}
.v3-cta-m{font:400 14px/1.4 'IBM Plex Mono',ui-monospace,monospace;color:var(--v3-op-mos);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

.v3-voet{padding:calc(var(--v3-u)*7) calc(var(--v3-u)*4);background:var(--v3-papier-d)}
.v3-voet-k{font:700 1.18rem/1.2 'Frank Ruhl Libre',Georgia,serif}
.v3-voet-a{margin-top:calc(var(--v3-u)*1.5);max-width:62ch;color:#584F44;font-size:.98rem}
.v3-voet-t{margin-top:calc(var(--v3-u)*3);display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--v3-u)*1) calc(var(--v3-u)*2.5);
  font:400 13.5px/1.6 'IBM Plex Mono',ui-monospace,monospace}
.v3-voet-t span{color:#584F44;font-size:11.5px;letter-spacing:.05em}
.v3-voet-t a{text-decoration:underline;text-underline-offset:3px;color:#33412A}
.v3-credit{margin-top:calc(var(--v3-u)*5);font:400 12.5px/1.5 'IBM Plex Mono',ui-monospace,monospace;color:#584F44}
.v3-credit a{color:#33412A}

@media (max-width:700px){
  .v3-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"blok" "kaarten" "reg" "cta";
    padding:calc(var(--v3-u)*5) calc(var(--v3-u)*3) 0;row-gap:0}
  .v3-kaarten{justify-self:start;width:78vw;margin-top:calc(var(--v3-u)*5);margin-bottom:calc(var(--v3-u)*6);
    margin-left:calc(var(--v3-u)*2)}
  .v3-kaart-2{inset:calc(var(--v3-u)*4) calc(var(--v3-u)*-4) calc(var(--v3-u)*-4) calc(var(--v3-u)*4)}
  .v3-reg{margin-top:calc(var(--v3-u)*3)}
  .v3-cta{padding:calc(var(--v3-u)*4) calc(var(--v3-u)*3)}
  .v3-top,.v3-voet{padding-left:calc(var(--v3-u)*3);padding-right:calc(var(--v3-u)*3)}
}

@media (prefers-reduced-motion:no-preference){
  @keyframes v3-drift{0%{transform:rotate(3.4deg) translate3d(0,0,0)}100%{transform:rotate(4.8deg) translate3d(0,-6px,0)}}
  @keyframes v3-leg{0%{transform:rotate(-6.2deg) translate3d(0,14px,0);opacity:0}100%{transform:rotate(-2.6deg) translate3d(0,0,0);opacity:1}}
  .v3-kaart{animation:v3-leg 1s var(--v3-soepel)}
  .v3-kaart-2{animation:v3-drift 19s ease-in-out infinite alternate}
}


/* =====================================================================
   V4 — DE LAATSTE RIT
   Vlak: grafiet, bijna zwart. Accent: petrol, de tegenkleur van de
   herfstbladeren in het beeld. Kopletter: Marcellus.
   Indeling: het oog landt linksboven op de kop, zakt door het register
   van vervoermiddelen en wordt rechts opgevangen door de boog.
   Signatuur: de boog, de vorm van de kerk en de brug in hun eigen beeld.
   ===================================================================== */
#version-v4{
  --v4-grafiet:#141414;        /* paginavlak */
  --v4-grafiet-d:#0C0C0C;      /* diepere band */
  --v4-been:#EFE8DC;           /* tekst op grafiet (15.2:1) */
  --v4-stil:#A39C90;           /* gedempt op grafiet (6.9:1) */
  --v4-petrol:#3E9AA3;         /* accent op grafiet (5.7:1), en vlakvulling */
  --v4-op-petrol:#0C1416;      /* tekst op petrol (5.5:1) */
  --v4-lijn:rgba(239,232,220,.18);
  --v4-r:0px;                  /* één radiustaal: geen; de boog is de uitzondering */
  --v4-schaduw:0 30px 60px -16px rgba(0,0,0,.8);
  --v4-u:7px;
  --v4-soepel:cubic-bezier(.36,.06,.16,1);

  --nav-vlak:#0A0A0A;
  --nav-lijn:rgba(239,232,220,.24);

  background:var(--v4-grafiet);color:var(--v4-been);
  font:400 17px/1.62 'Karla',system-ui,sans-serif;
  background-image:radial-gradient(120% 90% at 88% 8%,rgba(62,154,163,.13) 0%,rgba(62,154,163,0) 58%),
                   radial-gradient(100% 80% at 4% 96%,rgba(239,232,220,.07) 0%,rgba(239,232,220,0) 60%);
}
.v4-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:calc(var(--v4-u)*2);
  padding:calc(var(--v4-u)*3) calc(var(--v4-u)*4);border-bottom:1px solid var(--v4-lijn)}
.v4-mark{font:400 18px/1.2 'Marcellus',Georgia,serif;letter-spacing:.026em}
.v4-top-tel{font:500 16px/1.2 'IBM Plex Mono',ui-monospace,monospace;color:var(--v4-petrol);text-decoration:none;white-space:nowrap}
.v4-top-tel:hover{text-decoration:underline;text-underline-offset:4px}

.v4-hero{position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  column-gap:calc(var(--v4-u)*5);align-items:end;
  padding:calc(var(--v4-u)*9) calc(var(--v4-u)*4) 0;min-height:calc(100svh - 70px)}
.v4-blok{min-width:0;padding-bottom:calc(var(--v4-u)*9)}
.v4-kop{font:400 clamp(2.6rem,8.2vw,6.2rem)/.98 'Marcellus',Georgia,serif;letter-spacing:-.01em;min-width:0}
.v4-sub{margin-top:calc(var(--v4-u)*2);font:400 clamp(1.15rem,2.5vw,1.75rem)/1.25 'Marcellus',Georgia,serif;
  color:var(--v4-petrol);letter-spacing:.008em;max-width:32ch;text-wrap:balance}
.v4-lead{margin-top:calc(var(--v4-u)*3);max-width:48ch;color:var(--v4-stil);font-size:1.02rem}
.v4-lijst{margin-top:calc(var(--v4-u)*5);border-top:1px solid var(--v4-lijn);max-width:44ch}
.v4-lijst li{padding:calc(var(--v4-u)*1.7) 0;border-bottom:1px solid var(--v4-lijn);
  font:400 14px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.02em;color:var(--v4-stil)}
.v4-lijst-nu{color:var(--v4-been)!important;font-weight:500!important}
.v4-lijst-nu::after{content:"";display:inline-block;width:7px;height:7px;margin-left:1ch;
  background:var(--v4-petrol);vertical-align:.06em}
.v4-cta{margin-top:calc(var(--v4-u)*5);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--v4-u)*3)}
.v4-bel{display:inline-block;padding:calc(var(--v4-u)*2.3) calc(var(--v4-u)*4.5);background:var(--v4-petrol);
  color:var(--v4-op-petrol);text-decoration:none;border-radius:var(--v4-r);
  font:700 1.04rem/1.1 'Karla',system-ui,sans-serif;box-shadow:var(--v4-schaduw);
  transition:transform .2s var(--v4-soepel),background .2s ease}
.v4-bel:hover{transform:translateY(-2px);background:#4BAEB8}
.v4-cta-s{max-width:34ch;font-size:.96rem;color:var(--v4-stil)}

/* Blikvanger: de boog. Het beeld bloedt door de onderrand van het scherm. */
.v4-boog{position:relative;width:min(52vw,760px);align-self:end;overflow:hidden;
  margin-bottom:calc(var(--v4-u)*-8);box-shadow:var(--v4-schaduw)}
.v4-boog::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:50% 50% 0 0/30% 30% 0 0;border:1px solid rgba(239,232,220,.3);border-bottom:0}
.v4-boog picture{display:block}
.v4-boog img{width:100%;height:clamp(320px,34vw,470px);object-fit:cover;object-position:50% 46%;
  border-radius:50% 50% 0 0/30% 30% 0 0}
.v4-boog-c{position:absolute;z-index:3;left:calc(var(--v4-u)*3);bottom:calc(var(--v4-u)*11);
  padding:calc(var(--v4-u)*1.6) calc(var(--v4-u)*2.5);background:rgba(12,12,12,.86);
  border:1px solid var(--v4-lijn);box-shadow:var(--v4-schaduw);
  font:500 11.5px/1.35 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.05em;color:var(--v4-been)}

.v4-voet{padding:calc(var(--v4-u)*7) calc(var(--v4-u)*4);background:var(--v4-grafiet-d);border-top:1px solid var(--v4-lijn)}
.v4-voet-k{font:400 1.25rem/1.2 'Marcellus',Georgia,serif;letter-spacing:.02em}
.v4-voet-a{margin-top:calc(var(--v4-u)*1.5);max-width:62ch;color:var(--v4-stil);font-size:.98rem}
.v4-voet-t{margin-top:calc(var(--v4-u)*3);display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--v4-u)*1) calc(var(--v4-u)*2.5);
  font:400 13.5px/1.6 'IBM Plex Mono',ui-monospace,monospace}
.v4-voet-t span{color:var(--v4-stil);font-size:11.5px;letter-spacing:.05em}
.v4-voet-t a{text-decoration:underline;text-underline-offset:3px;color:var(--v4-petrol)}
.v4-credit{margin-top:calc(var(--v4-u)*5);font:400 12.5px/1.5 'IBM Plex Mono',ui-monospace,monospace;color:var(--v4-stil)}
.v4-credit a{color:var(--v4-been)}

@media (max-width:860px){
  .v4-hero{grid-template-columns:minmax(0,1fr);min-height:0;
    padding:calc(var(--v4-u)*5) calc(var(--v4-u)*3) 0;row-gap:calc(var(--v4-u)*5)}
  .v4-blok{padding-bottom:0;order:1}
  .v4-boog{order:2;width:88vw;margin:0 auto calc(var(--v4-u)*-6)}
  .v4-boog img{height:clamp(300px,72vw,420px);object-position:50% 46%}
  .v4-boog-c{left:50%;transform:translateX(-50%);bottom:calc(var(--v4-u)*9);white-space:nowrap}
  .v4-top,.v4-voet{padding-left:calc(var(--v4-u)*3);padding-right:calc(var(--v4-u)*3)}
}

@media (prefers-reduced-motion:no-preference){
  @keyframes v4-rit{0%{transform:scale(1.06) translate3d(0,0,0)}100%{transform:scale(1.12) translate3d(-1.6%,-1%,0)}}
  @keyframes v4-glans{0%,100%{opacity:.3}50%{opacity:.72}}
  .v4-boog img{animation:v4-rit 26s var(--v4-soepel) infinite alternate}
  .v4-boog::before{animation:v4-glans 9s ease-in-out infinite}
}