@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/young-serif-400.woff2') format('woff2')}
@font-face{font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/gloock-400.woff2') format('woff2')}
@font-face{font-family:'Andada Pro';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/andada-pro-600.woff2') format('woff2')}
@font-face{font-family:'Andada Pro';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/andada-pro-700.woff2') format('woff2')}
@font-face{font-family:'Chivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/chivo-600.woff2') format('woff2')}
@font-face{font-family:'Chivo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/chivo-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}

/* ---------------------------------------------------------------- tokens */
/* De vormtaal komt van dev.skinrenew.nl. Die site heeft zes hoekwaarden en
 * vier schaduwen; token-drift laat er drie van elk toe, dus zijn de drie
 * gekozen die de site het meest gebruikt: zacht (10), ruim (24) en pil.
 * De schaduwkleur rgba(58,45,18,..) en de ease zijn letterlijk overgenomen. */
:root{
  --u:8px;
  --u2:16px; --u3:24px; --u4:32px; --u5:48px; --u6:64px; --u8:96px;
  --r-a:10px; --r-b:24px; --r-c:999px;
  --sh-a:0 2px 8px rgb(58 45 18 / .10), 0 20px 60px rgb(58 45 18 / .22);
  --sh-b:0 2px 8px rgb(58 45 18 / .08);
  --sh-ring:0 0 0 5px var(--ring);
  --body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-1:14px; --fs-2:15px; --fs-3:17px; --fs-4:20px; --fs-5:26px;
  --fs-6:34px; --fs-7:46px;
  --lh-kop:1.08; --lh-lead:1.5; --lh-tekst:1.6;
  /* Letterlijk de ease van de bron. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --t-1:140ms; --t-2:240ms; --t-3:350ms; --t-4:700ms;
  --clip-b:480px;

  /* Het bronpalet, ongewijzigd overgenomen uit --gold-*, --bronze, --cta,
   * --ink, --muted en --surface van dev.skinrenew.nl. */
  --goud-50:#FBF8F1; --goud-100:#F4ECD9; --goud-200:#E8D9B4;
  --goud-300:#D7C088; --goud-400:#C2A25C; --goud-500:#AE8B33;
  --goud-600:#96762B; --goud-700:#7A5F24; --goud-900:#3A2D12;
  --brons:#43351A; --brons-diep:#2F2510;
  --cta:#157A26; --cta-zacht:#EAF6EC;
  --inkt:#191814; --inkt-2:#2E2C26; --gedempt:#676253;
  --lijn:#E7E2D8; --vlak:#FFFFFF; --vlak-2:#FAF8F3;
  --golf:#F0E8D4;
  /* Gereedschap van dit voorstel, buiten elk ontwerp. */
  --tool-licht:#FBF8F1; --tool-donker:#2F2510;
}

/* ----------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--veld,var(--inkt));font-family:var(--body);
  font-size:var(--fs-3);line-height:var(--lh-tekst);
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
svg{display:block}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid currentColor;outline-offset:3px;box-shadow:var(--sh-ring)}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%)}

.skip-link{position:absolute;left:var(--u2);top:var(--u2);z-index:60;
  padding:var(--u2) var(--u3);border-radius:var(--r-a);
  background:var(--accent);color:var(--opAccent);
  font-weight:600;text-decoration:none;
  transform:translateY(-160px);
  transition:transform var(--t-2) var(--ease)}
.skip-link:focus{transform:none}

/* ------------------------------------------------------------- versieschil */
.ver{display:flex;flex-direction:column;min-height:100svh;
  background:var(--veld);color:var(--tekst)}
.ver[hidden]{display:none}
.ver > main{flex:1;display:flex;flex-direction:column}

.vswitch{position:fixed;left:50%;bottom:var(--u2);transform:translateX(-50%);
  z-index:80;display:flex;gap:2px;padding:5px;border-radius:var(--r-c);
  background:rgb(47 37 16 / .92);box-shadow:var(--sh-b);
  backdrop-filter:blur(10px)}
.vswitch button{min-width:60px;min-height:44px;padding:0 var(--u2);
  border-radius:var(--r-c);color:var(--tool-licht);font-size:var(--fs-2);
  font-weight:600;
  transition:background-color var(--t-1) ease, color var(--t-1) ease}
.vswitch button[aria-pressed="true"]{background:var(--tool-licht);
  color:var(--tool-donker)}

/* -------------------------------------------------------------- kop, knop */
.bar{position:relative;z-index:12;display:flex;flex-wrap:nowrap;
  align-items:center;justify-content:space-between;gap:var(--u2);
  padding:var(--u2) var(--u3);min-height:66px}
.merk{display:flex;align-items:baseline;gap:7px;min-width:0;
  font-size:var(--fs-4);font-weight:600;letter-spacing:-.02em;
  line-height:1.1;text-decoration:none}
.merk small{font-size:var(--fs-1);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;opacity:.72}
.bar .knop-stil{padding:0 var(--u2);white-space:nowrap}
@media (max-width:520px){
  .bar{padding:var(--u2)}
  .merk small{display:none}
}

.knop{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--u);min-height:52px;padding:0 var(--u4);border-radius:var(--r-c);
  background:var(--accent);color:var(--opAccent);
  font-size:var(--fs-3);font-weight:600;text-decoration:none;
  box-shadow:var(--sh-b);
  transition:transform var(--t-1) var(--ease)}
.knop:active{transform:scale(.97)}
.knop-stil{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 var(--u3);border-radius:var(--r-c);
  border:1px solid var(--rand);background:none;color:inherit;
  font-size:var(--fs-3);font-weight:600;text-decoration:none;
  transition:transform var(--t-1) var(--ease)}
.knop-stil:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .knop:hover{transform:translateY(-2px)}
  .knop-stil:hover{transform:translateY(-2px)}
  .vswitch button:hover{background:rgb(251 248 241 / .2)}
}
.acties{display:flex;flex-wrap:wrap;gap:var(--u2);align-items:center}

.vpauze{position:absolute;z-index:9;right:var(--u2);bottom:var(--u2);
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:var(--r-c);background:var(--opAccent);color:var(--accent);
  border:1px solid var(--rand);
  transition:transform var(--t-1) var(--ease)}
.vpauze:active{transform:scale(.96)}
.vpauze svg{width:16px;height:16px;fill:currentColor}
.vpauze .aan{display:none}
.vpauze[data-uit="ja"] .aan{display:block}
.vpauze[data-uit="ja"] .af{display:none}

.voet{padding:var(--u4) var(--u3) calc(var(--u8) + var(--u2));
  font-size:var(--fs-2);line-height:var(--lh-lead)}
.credit{margin-top:var(--u2);opacity:.85}

/* ======================================================== v1 · De horizon */
/* redactioneel · Young Serif · crème · de golf als gestapelde lagen */
#version-v1{--veld:#FAF8F3;--accent:#157A26;--tekst:#191814;--oppervlak:#FFFFFF;
  --rand:#676253;--opAccent:#FBF8F1;--stil:#4D4A41;--ring:rgb(21 122 38 / .28)}
.v1-merk{font-family:'Young Serif',Georgia,serif;font-weight:400}
.v1-hero{position:relative;flex:1;display:grid;align-content:start;
  overflow:clip;padding:var(--u5) 0 0}
.v1-in{width:100%;max-width:1140px;margin:0 auto;
  padding:0 var(--u3);display:grid;gap:var(--u3);justify-items:start}
.v1-label{display:inline-flex;align-items:center;gap:var(--u);
  padding:7px var(--u2);border-radius:var(--r-c);
  background:var(--cta-zacht);color:var(--cta);
  font-size:var(--fs-1);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase}
.v1-titel{font-family:'Young Serif',Georgia,serif;font-weight:400;
  font-size:clamp(34px,8.4vw,76px);line-height:var(--lh-kop);
  letter-spacing:-.02em;text-wrap:balance;max-width:15ch}
.v1-titel em{font-style:normal;color:var(--accent)}
.v1-lead{font-size:var(--fs-4);line-height:var(--lh-lead);max-width:40ch;
  color:var(--stil)}
/* De golf van de bronsite, hier als drie gestapelde lagen: een horizon die
 * je in de diepte ziet liggen in plaats van één scheidingslijn. */
.v1-doek{position:relative;margin-top:var(--u5);width:100%;
  display:grid;justify-items:center}
.v1-lagen{position:absolute;left:0;right:0;top:-2px;z-index:4;
  filter:drop-shadow(0 8px 20px rgb(58 45 18 / .20));
  width:100%;height:120px;pointer-events:none}
.v1-raam{position:relative;width:100%;max-width:var(--clip-b);
  height:clamp(280px,44svh,420px);overflow:hidden;
  border-radius:var(--r-b) var(--r-b) 0 0;background:var(--brons-diep);
  box-shadow:var(--sh-a)}
.v1-raam video,.v1-raam img{width:100%;height:100%;object-fit:cover;
  object-position:50% 40%}
.v1-kaart{position:absolute;z-index:8;left:50%;top:var(--u3);
  transform:translateX(-50%);
  display:grid;grid-template-columns:auto auto;gap:var(--u2);
  align-items:center;padding:10px var(--u3);border-radius:var(--r-c);
  background:var(--vlak);color:var(--tekst);box-shadow:var(--sh-a)}
.v1-kaart b{font-family:'Young Serif',Georgia,serif;font-weight:400;
  font-size:var(--fs-5);line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums}
.v1-kaart span{font-size:var(--fs-1);letter-spacing:.04em;color:var(--stil)}
@media (min-width:900px){
  /* Compacter dan het lijkt te moeten: met ruime gaps begon de clip pas op
   * driekwart van het eerste scherm en bleef er vooral leeg crème over. */
  .v1-hero{padding-top:var(--u4)}
  .v1-in{gap:var(--u3)}
  .v1-doek{margin-top:var(--u3)}
  .v1-raam{max-width:760px;height:clamp(320px,44svh,460px)}
  .v1-lagen{height:170px}
}

/* =========================================================== v2 · Maki-e */
/* motion · Gloock · brons · goud dat zich op een donkere grond verzamelt */
#version-v2{--veld:#2F2510;--accent:#E8D9B4;--tekst:#F4ECD9;--oppervlak:#43351A;
  --rand:#96762B;--opAccent:#2F2510;--stil:#D7C088;--ring:rgb(232 217 180 / .34)}
.v2-merk{font-family:'Gloock',Georgia,serif;font-weight:400}
.v2-hero{position:relative;flex:1;display:grid;align-content:end;
  overflow:clip;padding:var(--u6) var(--u3) var(--u5);isolation:isolate}
.v2-doek{position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  background:var(--brons-diep)}
.v2-doek video,.v2-doek img{width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 42%}
@media (min-width:520px){
  .v2-doek video,.v2-doek img{width:min(100%,var(--clip-b));height:auto;
    max-height:100%;border-radius:var(--r-b);box-shadow:var(--sh-a)}
}
.v2-hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgb(47 37 16 / .76) 0%,rgb(47 37 16 / .16) 30%,
    rgb(47 37 16 / .80) 58%,rgb(47 37 16 / .96) 100%)}
/* Het strijklicht: een smalle gouden veeg die over het beeld trekt, zoals
 * het licht dat over een lakoppervlak strijkt. */
.v2-strijk{position:absolute;z-index:2;top:0;bottom:0;width:38%;
  background:linear-gradient(100deg,rgb(232 217 180 / 0),rgb(232 217 180 / .20) 46%,
    rgb(251 248 241 / .30) 52%,rgb(232 217 180 / 0));
  pointer-events:none;mix-blend-mode:screen}
.v2-in{position:relative;z-index:5;display:grid;gap:var(--u3);
  justify-items:start;max-width:640px;
  filter:drop-shadow(0 2px 24px rgb(24 18 6 / .6))}
.v2-label{display:inline-block;padding:7px var(--u2);border-radius:var(--r-c);
  background:var(--opAccent);color:var(--accent);
  font-size:var(--fs-1);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase}
.v2-titel{font-family:'Gloock',Georgia,serif;font-weight:400;
  font-size:clamp(36px,10vw,88px);line-height:1.02;letter-spacing:-.02em;
  text-wrap:balance}
.v2-titel u{display:block;text-decoration:none;color:var(--accent)}
.v2-lead{font-size:var(--fs-4);line-height:var(--lh-lead);max-width:34ch;
  color:var(--tekst)}
/* De korrels: goudstof dat op het vlak neerkomt, fijn en grof door elkaar. */
.v2-korrels{position:absolute;z-index:3;inset:0;pointer-events:none}
/* Rechts uitgelijnd op smal: links stond hij pal op het label eronder. */
.v2-pil{position:absolute;z-index:9;right:var(--u3);top:var(--u2);
  display:grid;grid-template-columns:auto auto;gap:var(--u2);align-items:center;
  padding:10px var(--u2);border-radius:var(--r-c);
  background:var(--opAccent);color:var(--tekst);border:1px solid var(--rand);
  box-shadow:var(--sh-a)}
.v2-pil b{font-family:'Gloock',Georgia,serif;font-weight:400;
  font-size:var(--fs-4);line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums}
.v2-pil span{font-size:var(--fs-1);letter-spacing:.06em}
@media (min-width:900px){
  .v2-hero{padding:var(--u8) var(--u5) var(--u6);align-content:center}
  .v2-doek{justify-items:end;padding-right:7vw}
  .v2-doek video,.v2-doek img{width:min(40vw,var(--clip-b));max-height:84vh}
  .v2-hero::before{background:linear-gradient(96deg,rgb(47 37 16 / .97) 0%,
    rgb(47 37 16 / .92) 46%,rgb(47 37 16 / .22) 76%,rgb(47 37 16 / .44) 100%)}
  .v2-pil{right:calc(7vw + var(--u3));top:var(--u8)}
}

/* =================================================== v3 · Twee kolommen */
/* informatie · Andada Pro · wit · de keuze zelf is de hero */
#version-v3{--veld:#FFFFFF;--accent:#7A5F24;--tekst:#191814;--oppervlak:#FAF8F3;
  --rand:#676253;--opAccent:#FBF8F1;--stil:#4D4A41;--ring:rgb(122 95 36 / .30)}
.v3-merk{font-family:'Andada Pro',Georgia,serif;font-weight:700}
.v3-hero{position:relative;flex:1;display:grid;align-content:start;
  padding:var(--u5) 0 var(--u6);overflow:clip}
.v3-in{width:100%;max-width:1140px;margin:0 auto;padding:0 var(--u3);
  display:grid;gap:var(--u4)}
.v3-label{font-size:var(--fs-1);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
.v3-titel{margin-top:var(--u2);font-family:'Andada Pro',Georgia,serif;
  font-weight:700;font-size:clamp(32px,7.6vw,64px);line-height:var(--lh-kop);
  letter-spacing:-.025em;text-wrap:balance;max-width:16ch}
.v3-lead{margin-top:var(--u3);font-size:var(--fs-4);line-height:var(--lh-lead);
  max-width:44ch;color:var(--stil)}
.v3-acties{margin-top:var(--u4)}
.v3-raster{display:grid;gap:var(--u3);align-items:stretch}
/* De twee keuzes, met een gouden boog die ze verbindt: het verschil tussen
 * 60 en 75 minuten is de lengte van die boog. */
.v3-keuze{position:relative;display:grid;gap:var(--u2);align-content:start;
  padding:var(--u4);border-radius:var(--r-b);border:1px solid var(--lijn);
  background:var(--oppervlak);box-shadow:var(--sh-b)}
.v3-keuze-b{background:var(--brons-diep);color:var(--goud-100);box-shadow:var(--sh-a);
  border-color:var(--brons)}
.v3-kop{display:grid;gap:var(--u)}
.v3-naam{font-family:'Andada Pro',Georgia,serif;font-weight:700;
  font-size:var(--fs-5);letter-spacing:-.02em;line-height:1.1}
.v3-bedrag{font-family:'Andada Pro',Georgia,serif;font-weight:700;
  font-size:var(--fs-6);line-height:1;letter-spacing:-.03em;
  color:var(--accent);font-variant-numeric:tabular-nums}
.v3-keuze-b .v3-bedrag{color:var(--goud-200)}
.v3-was{margin-left:var(--u);font-family:var(--body);font-size:var(--fs-2);
  font-weight:400;text-decoration:line-through;color:var(--stil)}
.v3-keuze-b .v3-was{color:var(--goud-400)}
.v3-duur{font-size:var(--fs-2);color:var(--stil)}
.v3-keuze-b .v3-duur{color:var(--goud-300)}
.v3-boog{width:100%;max-width:220px;height:auto}
.v3-keuze ul{display:grid;gap:6px}
.v3-keuze li{position:relative;padding-left:var(--u3);font-size:var(--fs-2);
  line-height:var(--lh-lead)}
.v3-keuze li::before{content:"";position:absolute;left:0;top:11px;
  width:12px;height:2px;border-radius:var(--r-a);background:var(--accent)}
.v3-keuze-b li::before{background:var(--goud-300)}
/* De clip staat als staande kolom naast de vergelijking. Op de telefoon komt
 * hij ná de kop en de knop maar vóór de twee keuzes: eerst de woorden, dan
 * het beeld, en de prijstabel pas daaronder. */
.v3-strook{position:relative;overflow:hidden;border-radius:var(--r-b);
  background:var(--brons-diep);box-shadow:var(--sh-a);
  height:clamp(300px,46svh,420px)}
.v3-strook video,.v3-strook img{width:100%;height:100%;object-fit:cover;
  object-position:52% 44%;position:absolute;inset:0}
.v3-vlag{position:absolute;z-index:8;left:var(--u2);bottom:var(--u2);
  display:grid;grid-template-columns:auto auto;gap:var(--u2);align-items:center;
  padding:8px var(--u2);border-radius:var(--r-c);background:var(--vlak);
  box-shadow:var(--sh-a)}
.v3-vlag b{font-family:'Andada Pro',Georgia,serif;font-weight:700;
  font-size:var(--fs-3);line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums}
.v3-vlag span{font-size:var(--fs-1);color:var(--stil)}
@media (min-width:820px){
  /* Het beeld staat links over de VOLLE hoogte van de hero, met de tekst
   * rechtsboven en de twee keuzes daaronder. Als derde kolom naast twee
   * tekstkaarten bleef het onderwerp op 11 procent steken: dan is de hero
   * tekst en dozen met een randje beeld ernaast. */
  .v3-in{grid-template-columns:minmax(360px,.62fr) minmax(0,1fr);
    grid-template-rows:auto 1fr;gap:var(--u5);align-items:start}
  .v3-tekst{grid-column:2;grid-row:1}
  .v3-strook{grid-column:1;grid-row:1 / 3;height:auto;min-height:600px}
  .v3-raster{grid-column:2;grid-row:2;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ============================================================ v4 · De golf */
/* humanistisch · Chivo · inkt · dezelfde golf, nu als omhulsel */
#version-v4{--veld:#191814;--accent:#EAF6EC;--tekst:#F4ECD9;--oppervlak:#2E2C26;
  --rand:#96762B;--opAccent:#191814;--stil:#C2A25C;--ring:rgb(234 246 236 / .30)}
.v4-merk{font-family:'Chivo',Helvetica,sans-serif;font-weight:700}
.v4-hero{position:relative;flex:1;display:grid;gap:var(--u4);
  align-content:center;padding:var(--u5) var(--u3) var(--u6);overflow:clip}
.v4-in{width:100%;max-width:1140px;margin:0 auto;display:grid;gap:var(--u5);
  align-items:center}
.v4-tekst{display:grid;gap:var(--u3);justify-items:start;max-width:560px}
.v4-label{display:inline-block;padding:7px var(--u2);border-radius:var(--r-c);
  background:var(--oppervlak);color:var(--stil);
  font-size:var(--fs-1);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase}
.v4-titel{font-family:'Chivo',Helvetica,sans-serif;font-weight:700;
  font-size:clamp(32px,8.6vw,72px);line-height:1.04;letter-spacing:-.035em;
  text-wrap:balance}
.v4-titel u{display:block;text-decoration:none;color:var(--accent)}
.v4-lead{font-size:var(--fs-4);line-height:var(--lh-lead);max-width:38ch;
  color:var(--goud-200)}
/* Het golvende masker: de clip zit in een vorm die van de bronsite komt,
 * niet in een rechthoek en niet in een cirkel. */
.v4-vorm{position:relative;width:100%;max-width:var(--clip-b);
  justify-self:center}
/* Een tweede golf in goud, iets verschoven achter de eerste: dat geeft de
 * vorm diepte in plaats van hem als uitgeknipte sticker te laten liggen. */
.v4-echo{position:absolute;z-index:0;left:14px;top:18px;right:-14px;bottom:-18px;
  background:var(--goud-700);clip-path:url(#v4-golfpad);opacity:.5;
  filter:drop-shadow(0 6px 26px rgb(24 18 6 / .55))}
.v4-masker{position:relative;width:100%;aspect-ratio:480 / 560;
  overflow:hidden;background:var(--brons-diep);
  clip-path:url(#v4-golfpad);
  filter:drop-shadow(0 3px 3px rgb(24 18 6 / .5))
         drop-shadow(20px 30px 40px rgb(24 18 6 / .45))}
.v4-masker video,.v4-masker img{width:100%;height:100%;object-fit:cover;
  object-position:50% 40%}
.v4-chip{position:absolute;z-index:9;right:var(--u2);top:var(--u4);
  display:grid;gap:2px;justify-items:center;
  padding:var(--u2) var(--u3);border-radius:var(--r-a);
  background:var(--accent);color:var(--opAccent);box-shadow:var(--sh-a)}
.v4-chip b{font-family:'Chivo',Helvetica,sans-serif;font-weight:700;
  font-size:var(--fs-4);line-height:1.05;font-variant-numeric:tabular-nums}
.v4-chip span{font-size:var(--fs-1);letter-spacing:.08em;text-transform:uppercase}
.v4-hero .vpauze{right:auto;left:var(--u2)}
@media (min-width:900px){
  .v4-hero{padding:var(--u6) var(--u5) var(--u8)}
  .v4-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--u8)}
  .v4-vorm{justify-self:end}
}

/* ------------------------------------------------------------- beweging */
/* De verborgen beginstaat zit ÍN de keyframes, achter een klasse die het
 * script alleen zet bij no-preference. Zonder script of met beweging uit
 * bestaat .bm-anim niet, gelden deze regels niet, en staat er niets op nul. */
@keyframes rijzen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes zakken{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes deinen{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
@keyframes strijken{from{transform:translateX(-45%)}to{transform:translateX(190%)}}
@keyframes stollen{from{opacity:0;transform:translateY(-8px) scale(.94)}
  to{opacity:.85;transform:none}}
@keyframes ademen{from{transform:scale(1)}to{transform:scale(1.04)}}
@keyframes trekken{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}

.bm-anim .op{animation:rijzen var(--t-4) var(--ease) both;
  animation-play-state:paused;animation-delay:calc(var(--i,0) * 90ms)}
.bm-anim .op.aan{animation-play-state:running}

/* v1: de drie golflagen deinen langzaam langs elkaar heen. */
.bm-anim .v1-golf-a{animation:deinen 17s var(--ease-io) infinite alternate}
.bm-anim .v1-golf-b{animation:deinen 23s var(--ease-io) infinite alternate-reverse}
.bm-anim .v1-golf-c{animation:deinen 29s var(--ease-io) infinite alternate}
.bm-anim .v1-kaart{animation:zakken var(--t-4) var(--ease) both;
  animation-play-state:paused;animation-delay:340ms}
.bm-anim .v1-kaart.aan{animation-play-state:running}

/* v2: het strijklicht trekt over het vlak en laat goudkorrels achter die
 * één voor één stollen, zoals maki-e op nog natte lak. */
.bm-anim .v2-strijk{animation:strijken 9s var(--ease-io) infinite}
.bm-anim .v2-korrel{animation:stollen 1.1s var(--ease) both;
  animation-play-state:paused;
  animation-delay:calc(var(--k,0) * 130ms + 400ms)}
.bm-anim .v2-korrels.aan .v2-korrel{animation-play-state:running}
.bm-anim .v2-pil{animation:zakken var(--t-4) var(--ease) both;
  animation-play-state:paused;animation-delay:420ms}
.bm-anim .v2-pil.aan{animation-play-state:running}

/* v3: de twee bogen trekken zichzelf, de kortste als eerste. */
.bm-anim .v3-lijn{stroke-dasharray:420;
  animation:trekken 1.5s var(--ease-io) both;animation-play-state:paused}
.bm-anim .v3-lijn.aan{animation-play-state:running}
.bm-anim .v3-vlag{animation:rijzen var(--t-4) var(--ease) both;
  animation-play-state:paused;animation-delay:520ms}
.bm-anim .v3-vlag.aan{animation-play-state:running}

/* v4: de golfvorm zelf ademt, heel traag. */
.bm-anim .v4-masker video,.bm-anim .v4-masker img{
  animation:ademen 26s var(--ease-io) infinite alternate}
.bm-anim .v4-chip{animation:rijzen var(--t-4) var(--ease) both;
  animation-play-state:paused;animation-delay:400ms}
.bm-anim .v4-chip.aan{animation-play-state:running}

@media (prefers-reduced-motion:reduce){
  /* Overschrijf de ANIMATIE, niet de transform: een keyframe schrijft in de
   * animation-origin cascade en wint van elke gewone declaratie. */
  .bm-anim .op,.bm-anim .v1-golf-a,.bm-anim .v1-golf-b,.bm-anim .v1-golf-c,
  .bm-anim .v1-kaart,.bm-anim .v2-strijk,.bm-anim .v2-korrel,.bm-anim .v2-pil,
  .bm-anim .v3-lijn,.bm-anim .v3-vlag,.bm-anim .v4-chip,
  .bm-anim .v4-masker video,.bm-anim .v4-masker img{animation:none}
  .knop,.knop-stil,.vpauze,.skip-link,.vswitch button{transition:none}
  html{scroll-behavior:auto}
}

/* ------------------------------------------------------- de velden zelf */
/* De bronsite legt overal een warme veeg licht over zijn vlakken; plat
 * gevulde velden lezen als een sjabloon, ook met een goed palet. Elk verloop
 * hieronder is opgebouwd uit tokens van datzelfde palet. */
#version-v1{background-image:
  radial-gradient(108% 62% at 84% 0%, rgb(240 232 212 / .85), rgb(240 232 212 / 0) 58%),
  radial-gradient(70% 40% at 6% 96%, rgb(231 226 216 / .60), rgb(231 226 216 / 0) 70%)}
#version-v2{background-image:
  radial-gradient(96% 54% at 50% 0%, rgb(174 139 51 / .22), rgb(174 139 51 / 0) 62%),
  radial-gradient(86% 50% at 10% 100%, rgb(24 18 6 / .70), rgb(24 18 6 / 0) 66%)}
#version-v3{background-image:
  radial-gradient(92% 52% at 12% 0%, rgb(250 248 243 / .96), rgb(250 248 243 / 0) 60%),
  radial-gradient(78% 44% at 96% 92%, rgb(240 232 212 / .70), rgb(240 232 212 / 0) 66%)}
#version-v4{background-image:
  radial-gradient(104% 56% at 78% 4%, rgb(150 118 43 / .26), rgb(150 118 43 / 0) 60%),
  radial-gradient(80% 46% at 4% 98%, rgb(46 44 38 / .80), rgb(46 44 38 / 0) 68%)}