@charset "utf-8";

/* ═══════════════════════════════════════════════════════════════ fonts ══ */
@font-face{font-family:'Antonio';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/antonio-400.woff2') format('woff2')}
@font-face{font-family:'Antonio';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/antonio-600.woff2') format('woff2')}
@font-face{font-family:'Cardo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cardo-400.woff2') format('woff2')}
@font-face{font-family:'Cardo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/cardo-700.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-400.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-500.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/jost-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/hanken-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/hanken-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/hanken-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/karla-400.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/karla-500.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/karla-700.woff2') format('woff2')}

/* ══════════════════════════════════════════════════════════════ tokens ══ */
/* Eén basiseenheid, één easing, drie duren, drie radii, drie schaduwen.
   Elke kleur is een custom property: nergens een losse hex in een gewone
   declaratie, zodat een palet op één plek per versie omgezet wordt. De radius-
   en schaduwtokens worden PER VERSIE opnieuw gevuld, zodat elke richting zijn
   eigen vormtaal heeft zonder dat het aantal waarden groeit. */
:root{
  --u:8px;
  --maxw:1280px;
  --pad:clamp(20px,5.2vw,72px);
  --toph:76px;

  --r-a:3px;
  --r-b:16px;
  --r-pill:999px;

  --sh-a:0 20px 44px -20px rgba(8,10,12,.55);
  --sh-b:0 46px 96px -34px rgba(8,10,12,.72);
  --sh-ring:0 0 0 5px var(--ring-out);

  --ease:cubic-bezier(.16,1,.3,1);
  --t1:180ms;
  --t2:460ms;
  --t3:900ms;

  --fs-mega:clamp(2.6rem,9vw,6rem);
  --fs-display:clamp(1.9rem,5vw,3.2rem);
  --fs-h2:clamp(1.4rem,3vw,2.1rem);
  --fs-h3:1.0625rem;
  --fs-lead:clamp(1rem,1.15vw,1.1875rem);
  --fs-body:1rem;
  --fs-small:.8125rem;
  --fs-micro:.6875rem;
  --fs-nav:.875rem;

  --f1:#12151b;
  --f2:#c8cfc6;
  --f3:#14261e;
}

/* ═══════════════════════════════════════════════════════════════ reset ══ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--f1)}
html[data-v="v2"]{background:var(--f2)}
html[data-v="v3"]{background:var(--f3)}
body{margin:0;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:var(--fs-body);line-height:1.62}
img,video,svg{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,figcaption{margin:0}
a{color:inherit;text-decoration:none}
b,strong{font-weight:600}
em,i{font-style:normal}
button{font:inherit;color:inherit;background:none;border:0}

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

.skip-link{
  position:absolute;left:calc(var(--u)*2);top:calc(var(--u)*2);z-index:80;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  padding:calc(var(--u)*1.25) calc(var(--u)*2);
  background-color:var(--accent);color:var(--accent-ink);
  font-size:var(--fs-small);font-weight:600;border-radius:var(--r-a);
}
.skip-link:focus{width:auto;height:auto;overflow:visible;clip-path:none}

.ver{background-color:var(--veld);color:var(--ink);min-height:100svh;display:flex;flex-direction:column}
.ver[hidden]{display:none}
/* Zonder deze regel groeit alleen de <section> binnen een <main> die zelf op
   zijn inhoud blijft staan, en schuift de voettekst het eerste scherm in. */
.ver > main{flex:1;display:flex;flex-direction:column}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:calc(var(--u)*6.5);padding:0 calc(var(--u)*3.25);
  background-color:var(--accent);color:var(--accent-ink);
  font-weight:600;font-size:var(--fs-h3);letter-spacing:.01em;
  border-radius:var(--r-a);box-shadow:var(--sh-a);
  transition:transform var(--t1) var(--ease),opacity var(--t1) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* ═════════════════════════════════════════════════════════ keuzebalk ══ */
/* Gereedschap van het voorstel, geen onderdeel van een ontwerp: bewust
   neutraal en buiten alle vier de composities. */
.vswitch{
  position:fixed;left:50%;bottom:calc(var(--u)*2);transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:calc(var(--u)*.5);
  padding:calc(var(--u)*.75);
  background-color:var(--sw-bg);color:var(--sw-ink);
  border-radius:var(--r-pill);box-shadow:var(--sh-b);
  --sw-bg:#101418;--sw-ink:#f2f0ec;--sw-on:#f2f0ec;--sw-on-ink:#101418;
  --ring-in:#f2f0ec;--ring-out:#101418;--r-pill:999px;
}
.vswitch-t{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.16em;padding:0 calc(var(--u)*1.25);opacity:.72}
.vswitch button{
  display:inline-flex;align-items:baseline;gap:calc(var(--u)*.75);
  min-height:calc(var(--u)*4.5);padding:0 calc(var(--u)*1.75);
  border-radius:var(--r-pill);font-size:var(--fs-small);font-weight:500;cursor:pointer;
  transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease);
}
.vswitch button span{font-size:var(--fs-micro);opacity:.7}
.vswitch button[aria-pressed="true"]{background-color:var(--sw-on);color:var(--sw-on-ink)}
.vswitch button[aria-pressed="true"] span{opacity:.8}
@media (max-width:640px){
  .vswitch{gap:0;padding:calc(var(--u)*.5)}
  .vswitch-t{display:none}
  .vswitch button span{display:none}
  .vswitch button{padding:0 calc(var(--u)*1.5)}
}

/* ══════════════════════════════════ gedeelde kop- en voettekstvorm ══ */
.v1-top,.v2-top,.v3-top{
  position:relative;z-index:6;
  min-height:var(--toph);display:flex;align-items:center;justify-content:space-between;
  gap:calc(var(--u)*2);padding:calc(var(--u)*1) var(--pad);
}
/* De kop wordt van het eerste scherm AFGETROKKEN. Zonder die aftrek telt
   `min-height:100svh` op de versie-root de kop en de voettekst mee, en schuift
   de voettekst het eerste scherm in (LESSONS: de hero die zijn eigen knop
   wegduwt, hier het spiegelbeeld ervan). */
@media (min-width:768px){
  .v1-hero,.v2-hero,.v3-hero{min-height:calc(100svh - var(--toph))}
}
.v1-nav,.v2-nav,.v3-nav{display:flex;align-items:center;gap:calc(var(--u)*1.5);font-size:var(--fs-nav)}
.v1-nav a,.v2-nav a,.v3-nav a{padding:calc(var(--u)*1.25) calc(var(--u)*1.5);border-radius:var(--r-a)}
.v1-ghost,.v2-ghost,.v3-ghost{
  border:1px solid var(--line);font-weight:600;
  transition:transform var(--t1) var(--ease),opacity var(--t1) var(--ease);
}
.v1-ghost:hover,.v2-ghost:hover,.v3-ghost:hover{transform:translateY(-1px)}
.v1-brand,.v2-brand,.v3-brand,.v1-ghost,.v2-ghost,.v3-ghost{white-space:nowrap}
/* Op 390 brak de merknaam op twee regels en de knop erbij; de kop werd dan
   hoger dan de rest van het ontwerp aankan. */
@media (max-width:560px){
  .v1-nav,.v2-nav,.v3-nav{font-size:var(--fs-small);gap:calc(var(--u)*.5)}
  .v1-nav a,.v2-nav a,.v3-nav a{padding:calc(var(--u)*1) calc(var(--u)*1.25)}
  .v1-brand,.v3-brand{font-size:var(--fs-small);letter-spacing:.1em}
  .v2-brand{font-size:var(--fs-body)}
}
/* Onder 380 past merknaam plus menu niet meer op één regel zonder de letters
   onleesbaar te maken. Dan de merknaam op een eigen regel, menu eronder
   rechts: alle links blijven bestaan en er loopt niets buiten beeld. */
@media (max-width:380px){
  .v1-top,.v2-top,.v3-top{flex-wrap:wrap;row-gap:calc(var(--u)*.25);padding-block:calc(var(--u)*1.5)}
  .v1-brand,.v2-brand,.v3-brand{flex:1 0 100%}
  .v1-nav,.v2-nav,.v3-nav{margin-left:auto}
}

.v1-foot,.v2-foot,.v3-foot{margin-top:auto;padding:calc(var(--u)*5) var(--pad) calc(var(--u)*12)}
.v1-foot-in,.v2-foot-in,.v3-foot-in{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:calc(var(--u)*1.5) calc(var(--u)*5);
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  align-items:start;font-size:var(--fs-small);color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:calc(var(--u)*4);
}
.v1-foot-t,.v2-foot-t,.v3-foot-t{color:var(--ink);font-weight:600}
.v1-foot a,.v2-foot a,.v3-foot a{border-bottom:1px solid var(--line)}

/* ══════════════════════════════════════════════════════════════════════ */
/* V1 · MILLIMETERWERK                                                    */
/* grafiet veld, goud accent, Antonio, macrovideo over de volle breedte   */
/* ══════════════════════════════════════════════════════════════════════ */
.v1{
  --veld:var(--f1);
  --veld-2:#1b1f26;
  --veld-3:#221d18;
  --ink:#f4f1ec;
  --ink-2:#b3ac9f;
  --accent:#c2a278;
  --accent-ink:#12151b;
  /* tekst OP het gouden vlak; beide doorgerekend tegen #c2a278:
     8,3:1 voor de donkere en 5,6:1 voor de gedempte (LESSONS regel 1) */
  --gold-ink:#12151b;
  --gold-ink-2:#3a3428;
  --line:#3a3f47;
  --ring-in:#f4f1ec;
  --ring-out:#12151b;
  --r-a:2px;
  --r-b:2px;
  --fs-mega:clamp(2.3rem,8.2vw,5.4rem);
  --fs-lead:clamp(1rem,1.1vw,1.125rem);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background-image:radial-gradient(120% 80% at 78% 8%,var(--veld-2) 0%,var(--veld) 62%);
}
/* eigen plaat onder de kopregel: de video loopt eronder door */
/* De hele koptekst dekkend, alleen de laatste strook vervaagt: de merknaam
   staat met ruime spatiëring op de video en elke gap tussen twee letters is
   anders een venster op het beeld eronder. */
.v1 .v1-top{background-image:linear-gradient(to bottom,rgb(18,21,27) 0%,rgb(18,21,27) 78%,rgba(18,21,27,.5) 90%,rgba(18,21,27,0) 100%)}
.v1-brand{font-family:'Antonio',system-ui,sans-serif;font-size:var(--fs-h3);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.v1-brand em{color:var(--accent)}
.v1-nav a{color:var(--ink-2)}
.v1-ghost{color:var(--ink)}

.v1-hero{position:relative;overflow:clip;flex:1;display:flex;align-items:stretch}
.v1-media{position:absolute;inset:0;z-index:0}
.v1-video{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.08) brightness(.9)}
.v1-wrap{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:calc(var(--u)*6) var(--pad) calc(var(--u)*7);
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.7fr);
  gap:calc(var(--u)*4);align-items:center;
}
/* bewezen patroon 5: elke tekst op beeld draagt zijn EIGEN plaat */
.v1-copy{
  grid-column:1;grid-row:1;position:relative;
  padding:calc(var(--u)*4) calc(var(--u)*7) calc(var(--u)*4) calc(var(--u)*3);
  margin-left:calc(var(--u)*-3);
  background-image:linear-gradient(96deg,rgba(18,21,27,.96) 0%,rgba(18,21,27,.9) 62%,rgba(18,21,27,0) 100%);
}
.v1-kicker{
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.24em;
  color:var(--accent);margin-bottom:calc(var(--u)*2);
}
.v1-h1{
  font-family:'Antonio',system-ui,sans-serif;font-weight:600;
  font-size:var(--fs-mega);line-height:.94;letter-spacing:-.012em;text-transform:uppercase;
}
.v1-h1 .v1-w{display:block}
.v1-h1 .v1-place{color:var(--accent);font-weight:400;letter-spacing:.02em}
.v1-lead{margin-top:calc(var(--u)*3);max-width:42ch;font-size:var(--fs-lead);color:var(--ink-2)}

/* De maat staat bewust in px en niet in ch: `ch` rekent met de fontgrootte van
   dit element zelf (11px), dus 38ch werd 209px en de drie kolommen liepen over
   elkaar heen. LESSONS regel 11. */
.v1-zones{
  margin-top:calc(var(--u)*3.5);display:grid;gap:calc(var(--u)*1.25);max-width:min(440px,100%);
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.v1-zones li{
  display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;
  gap:calc(var(--u)*2);align-items:baseline;
  padding-bottom:calc(var(--u)*1.25);border-bottom:1px solid var(--line);
}
.v1-zones b{color:var(--accent);letter-spacing:.2em}
.v1-zones i{
  font-family:'Antonio',system-ui,sans-serif;font-size:var(--fs-h3);
  letter-spacing:.04em;color:var(--ink);
}
.v1-zones i::before{content:"vanaf €"}

.v1-acts{margin-top:calc(var(--u)*4);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*3)}
.v1-quiet{font-size:var(--fs-small);color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:2px}

.v1-right{grid-column:2;grid-row:1;position:relative;justify-self:end;width:min(360px,34vw)}
.v1-inset{
  position:relative;z-index:3;transform:rotate(-1.8deg);box-shadow:var(--sh-b);
  border:1px solid var(--line);background-color:var(--veld-2);padding:calc(var(--u)*1);
}
.v1-inset img{width:100%;border-radius:var(--r-a)}
.v1-inset figcaption{
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-2);padding:calc(var(--u)*1.25) 0 calc(var(--u)*.5);text-align:center;
}
/* satelliet: klein, uit de stroom, landt op het veel grotere ingezette beeld.
   Rechtsboven, want de millimeterlat hangt aan de linkerrand. */
.v1-sat{
  position:absolute;z-index:7;right:calc(var(--u)*-5);top:calc(var(--u)*2);
  padding:calc(var(--u)*1.5) calc(var(--u)*2.25);max-width:24ch;
  background-color:var(--veld);border:1px solid var(--accent);
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  box-shadow:var(--sh-a);border-radius:var(--r-a);
}
.v1-sat b{
  display:block;font-family:'Antonio',system-ui,sans-serif;font-size:var(--fs-h3);
  letter-spacing:.06em;color:var(--accent);
}

/* signature device: de millimeterlat, ligt OP het ingezette beeld met de
   streepjes het beeld in, zoals een schaalbalk op een macrofoto */
/* Hoogte EXPLICIET, niet via top+bottom: een <svg> met viewBox heeft een eigen
   beeldverhouding, dus `height:auto` rekent 48px breed om naar 576px hoog en de
   `bottom` wordt genegeerd. De lat liep daardoor een halve pagina door. */
.v1-rule{
  position:absolute;left:calc(var(--u)*-2.5);top:calc(var(--u)*-2.5);
  width:48px;height:calc(100% + var(--u)*5);z-index:6;pointer-events:none;
}
.v1-rule line{stroke:var(--accent);stroke-width:1.4;vector-effect:non-scaling-stroke}
.v1-spine{stroke-width:2}

/* ── V1 secties ─────────────────────────────────────────────────────── */
.v1-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.v1 h2,.v1 h3{font-family:'Antonio',system-ui,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.01em}
.v1-h2{font-size:var(--fs-h2);line-height:1.02}
.v1-h3{font-size:var(--fs-h3);letter-spacing:.06em}
.v1-cap{
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.24em;
  color:var(--accent);margin-bottom:calc(var(--u)*1.5);
}
.v1-groot{
  font-family:'Antonio',system-ui,sans-serif;font-weight:600;text-transform:uppercase;
  font-size:var(--fs-display);line-height:.98;letter-spacing:-.015em;max-width:16ch;
}

/* 2 · lijnen — de lat loopt hier door en steekt de sectiegrens over */
.v1-lijnen{position:relative;background-color:var(--veld-2);padding:calc(var(--u)*12) 0 calc(var(--u)*14)}
.v1-zonegrid{
  margin-top:calc(var(--u)*5);display:grid;gap:calc(var(--u)*5);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
}
.v1-zone{position:relative;padding-left:calc(var(--u)*4)}
.v1-zone p{color:var(--ink-2);font-size:var(--fs-small);margin-top:calc(var(--u)*1.5)}
/* de millimeterlat, hier als verticale maatstreep naast elke zone */
.v1-zmaat{
  position:absolute;left:0;top:0;bottom:calc(var(--u)*5);width:calc(var(--u)*2);
  background-image:repeating-linear-gradient(to bottom,var(--accent) 0 1px,rgba(0,0,0,0) 1px 14px);
  border-left:1px solid var(--accent);
}
.v1-zbeeld{overflow:hidden;border-radius:var(--r-a);border:1px solid var(--line)}
.v1-zbeeld img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.82) contrast(1.06) brightness(.94)}
.v1-zone h3{margin-top:calc(var(--u)*2.5);color:var(--ink)}
.v1-vanaf{
  font-family:'Antonio',system-ui,sans-serif;font-size:var(--fs-h3);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);margin-top:calc(var(--u)*2)
}
.v1-zone .v1-vanaf{color:var(--accent)}

/* 3 · wensen — koud, geen kop, alleen de acht */
.v1-wensen{background-color:var(--veld);padding:calc(var(--u)*10) 0}
.v1-wenslijst{
  display:grid;gap:calc(var(--u)*1) calc(var(--u)*4);
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
}
.v1-wenslijst li{
  font-family:'Antonio',system-ui,sans-serif;font-size:var(--fs-h2);line-height:1.16;
  text-transform:uppercase;letter-spacing:-.005em;color:var(--ink);
  padding-bottom:calc(var(--u)*1.5);border-bottom:1px solid var(--line);
}
.v1-wenslot{margin-top:calc(var(--u)*5);max-width:44ch;color:var(--ink-2);font-size:var(--fs-lead)}

/* 4 · register — één zin op displaymaat, dan de lijst */
.v1-register{background-color:var(--veld-2);padding:calc(var(--u)*12) 0}
.v1-groep{margin-top:calc(var(--u)*5)}
.v1-glabel{
  font-size:var(--fs-micro);letter-spacing:.24em;color:var(--accent);
  padding-bottom:calc(var(--u)*1.25);border-bottom:1px solid var(--accent);
}
.v1-rijen li{
  display:grid;grid-template-columns:minmax(0,1fr) max-content;
  gap:calc(var(--u)*.25) calc(var(--u)*3);align-items:baseline;
  padding:calc(var(--u)*2) 0;border-bottom:1px solid var(--line);
}
.v1-rijen b{font-family:'Antonio',system-ui,sans-serif;font-size:var(--fs-h3);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.v1-rijen > li > span{grid-column:1;color:var(--ink-2);font-size:var(--fs-small)}
.v1-rijen i{
  grid-column:2;grid-row:1 / span 2;font-family:'Antonio',system-ui,sans-serif;
  font-size:var(--fs-h3);letter-spacing:.04em;text-transform:uppercase;color:var(--accent);
}

/* 5 · agenda — het gouden vlak, van rand tot rand, kop komt laat */
.v1-agenda{background-color:var(--accent);color:var(--gold-ink);padding:calc(var(--u)*12) 0 calc(var(--u)*20)}
.v1-agenda h2{color:var(--gold-ink)}
/* De duurbalken staan in de normale stroom onder de urenlat. Absoluut
   gepositioneerd pasten vier balken van 3u niet in 7u padding en lagen ze
   dwars over de kop; een staafdiagram hoort sowieso niet te zweven. */
.v1-tijdlat{position:relative;margin-bottom:calc(var(--u)*5)}
.v1-uren{
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));
  border-top:2px solid var(--gold-ink);padding-top:calc(var(--u)*1.25);
}
.v1-uren li{
  font-family:'Antonio',system-ui,sans-serif;font-size:var(--fs-micro);letter-spacing:.1em;
  color:var(--gold-ink-2);position:relative;
}
.v1-uren li::before{content:"";position:absolute;left:0;top:calc(var(--u)*-1.75);width:1px;height:calc(var(--u)*1.25);background-color:var(--gold-ink)}
.v1-uren b{font-size:var(--fs-small);color:var(--gold-ink)}
.v1-duren{margin-top:calc(var(--u)*2.5);display:grid;gap:calc(var(--u)*.75)}
.v1-duren li{
  height:calc(var(--u)*2.25);display:flex;align-items:center;padding-left:calc(var(--u)*1.25);
  background-color:var(--gold-ink);color:var(--accent);border-radius:var(--r-a);
  font-family:'Antonio',system-ui,sans-serif;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
}
.v1-d1{width:22.2%}
.v1-d2{width:33.3%}
.v1-d3{width:44.4%}
.v1-d4{width:55.5%}
.v1-aglead{margin-top:calc(var(--u)*2);max-width:48ch;color:var(--gold-ink-2);font-size:var(--fs-lead)}
.v1-agenda .btn{
  margin-top:calc(var(--u)*4);background-color:var(--gold-ink);color:var(--accent);
}

/* 6 · lexy — de foto steekt de gouden band in */
.v1-lexy{background-color:var(--veld);padding-bottom:calc(var(--u)*12)}
.v1-lexy-in{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:calc(var(--u)*6);align-items:start;
}
.v1-kamer{margin-top:calc(var(--u)*-14);position:relative;z-index:3}
.v1-kamer img{
  width:100%;border-radius:var(--r-a);border:1px solid var(--line);
  box-shadow:var(--sh-b);filter:saturate(.86) contrast(1.04);
}
.v1-kamer figcaption{
  margin-top:calc(var(--u)*1.5);font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
}
.v1-lexy-tekst{padding-top:calc(var(--u)*12)}
.v1-lexy-tekst p{margin-top:calc(var(--u)*2.5);max-width:52ch;color:var(--ink-2);font-size:var(--fs-lead)}
.v1-feiten{margin-top:calc(var(--u)*4);display:grid;gap:calc(var(--u)*1.5)}
.v1-feiten > div{
  display:grid;grid-template-columns:minmax(0,14ch) minmax(0,1fr);gap:calc(var(--u)*3);
  padding-bottom:calc(var(--u)*1.5);border-bottom:1px solid var(--line);
}
.v1-feiten dt{font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.v1-feiten dd{margin:0;font-family:'Antonio',system-ui,sans-serif;font-size:var(--fs-h3);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}

/* 7 · reviews — een echte full-bleed strook, en de kop onderbreekt hem.
   Het beeld is vooraf op 3.6:1 gesneden en het vak staat op diezelfde
   verhouding, dus er wordt op geen enkele breedte iets weggegooid. */
.v1-reviews{position:relative;background-color:var(--veld-3);padding-bottom:calc(var(--u)*12)}
.v1-band{width:100%}
.v1-band img{width:100%;aspect-ratio:3.6/1;object-fit:cover;filter:saturate(.62) contrast(1.08) brightness(.66)}
.v1-rev-in{position:relative;z-index:2;margin-top:calc(var(--u)*-7)}
.v1-rev-k{
  display:inline-block;background-color:var(--veld-3);
  padding:calc(var(--u)*2) calc(var(--u)*3) calc(var(--u)*1.5) 0;
  padding-right:calc(var(--u)*4);
}
/* Vier citaten in twee kolommen: met auto-fit werden het er drie plus een
   wees op een eigen rij. */
.v1-quotes{
  margin-top:calc(var(--u)*4);display:grid;gap:calc(var(--u)*3);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:700px){.v1-quotes{grid-template-columns:1fr}}
.v1-quotes li{
  padding:calc(var(--u)*3);border:1px solid var(--line);border-radius:var(--r-a);
  background-image:linear-gradient(160deg,rgba(18,21,27,.94) 0%,rgba(18,21,27,.88) 100%);
}
.v1-quotes blockquote p{color:var(--ink);font-size:var(--fs-small)}
.v1-naam{
  margin-top:calc(var(--u)*2);font-family:'Antonio',system-ui,sans-serif;font-size:var(--fs-micro);
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.v1-reviews .v1-quiet{display:inline-block;margin-top:calc(var(--u)*4)}

/* 8 · boeken */
.v1-boeken{background-color:var(--veld-2);padding:calc(var(--u)*12) 0}
.v1-bk-k{max-width:none}
.v1-bk-grid{
  margin-top:calc(var(--u)*4);display:grid;gap:calc(var(--u)*4) calc(var(--u)*6);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;
}
.v1-bk-lead{max-width:42ch;color:var(--ink-2);font-size:var(--fs-lead)}
.v1-bk-acts{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*3)}
.v1-bk-info{grid-column:2;grid-row:1 / span 2;display:grid;gap:calc(var(--u)*1.5);align-content:start}
.v1-bk-info > div{
  display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);gap:calc(var(--u)*2);
  padding-bottom:calc(var(--u)*1.5);border-bottom:1px solid var(--line);
}
.v1-bk-info dt{font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.v1-bk-info dd{margin:0;color:var(--ink);font-size:var(--fs-small)}
.v1-bk-info a{border-bottom:1px solid var(--accent)}

@media (max-width:820px){
  .v1-lexy-in{grid-template-columns:1fr;gap:calc(var(--u)*4)}
  .v1-kamer{margin-top:calc(var(--u)*-10)}
  .v1-lexy-tekst{padding-top:0}
  .v1-bk-grid{grid-template-columns:1fr}
  .v1-bk-acts,.v1-bk-info{grid-column:1}
  .v1-bk-info{grid-row:auto}
  .v1-duren li{font-size:var(--fs-micro)}
}
@media (max-width:520px){
  .v1-uren li:nth-child(even){visibility:hidden}
  .v1-feiten > div,.v1-bk-info > div{grid-template-columns:1fr;gap:calc(var(--u)*.5)}
}

.v1-foot{background-color:var(--veld-2)}

@media (max-width:1000px){
  /* een echte band video boven de tekst: zonder die marge dekt de plaat het
     hele eerste scherm en houd je op een telefoon een tekstblok over */
  .v1-wrap{grid-template-columns:1fr;align-items:start;padding-top:calc(var(--u)*14);gap:calc(var(--u)*5)}
  .v1-copy{grid-column:1;grid-row:1;margin-left:0;padding:calc(var(--u)*3) calc(var(--u)*2.5);
    background-image:linear-gradient(to top,rgba(18,21,27,.97) 0%,rgba(18,21,27,.94) 82%,rgba(18,21,27,.42) 100%)}
  .v1-lead{margin-top:calc(var(--u)*2.5)}
  .v1-zones{margin-top:calc(var(--u)*3);gap:calc(var(--u)*1)}
  .v1-zones li{padding-bottom:calc(var(--u)*1)}
  .v1-acts{margin-top:calc(var(--u)*3)}
  .v1-right{grid-column:1;grid-row:2;justify-self:start;width:min(300px,66vw)}
  .v1-rule{left:calc(var(--u)*-1.5);width:34px}
}
@media (max-width:520px){
  .v1-zones li{grid-template-columns:minmax(0,1fr) auto;gap:calc(var(--u)*1.5)}
  .v1-zones span{grid-column:1;grid-row:2;letter-spacing:.1em}
  .v1-zones i{grid-column:2;grid-row:1 / span 2}
}

/* ══════════════════════════════════════════════════════════════════════ */
/* V2 · DE KAART VAN JE GEZICHT                                           */
/* saliepapier, diep petrol, Cardo, foto als geannoteerde plaat           */
/* ══════════════════════════════════════════════════════════════════════ */
.v2{
  --veld:var(--f2);
  --veld-2:#dae0d8;
  --ink:#161c1b;
  --ink-2:#414d49;
  --accent:#1f4247;
  --accent-ink:#f2f5f1;
  /* tekst OP het petrolvlak, doorgerekend tegen #1f4247:
     9,5:1 voor de lichte en 5,8:1 voor de gedempte (LESSONS regel 1) */
  --petrol-ink:#f2f5f1;
  --petrol-ink-2:#a8bfc0;
  --line:#a3ada6;
  --ring-in:#161c1b;
  --ring-out:#f2f5f1;
  --r-a:2px;
  --r-b:260px 260px 2px 2px;
  --fs-display:clamp(1.8rem,4.1vw,2.9rem);
  font-family:'Karla',system-ui,sans-serif;
  background-image:radial-gradient(88% 66% at 8% 0%,var(--veld-2) 0%,var(--veld) 62%);
}
.v2-brand{font-family:'Cardo',Georgia,serif;font-size:var(--fs-h3);letter-spacing:.04em;color:var(--ink)}
.v2-nav a{color:var(--ink-2)}
.v2-ghost{color:var(--ink)}

.v2-hero{position:relative;overflow:clip;flex:1;display:flex;align-items:center}
.v2-wrap{
  position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:calc(var(--u)*4) var(--pad) calc(var(--u)*7);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  grid-template-areas:"copy plate" "index plate" "acts plate";
  gap:calc(var(--u)*3) calc(var(--u)*7);align-items:start;align-content:center;
}
.v2-copy{grid-area:copy}
.v2-index{grid-area:index}
.v2-acts{grid-area:acts}
.v2-plate{grid-area:plate;align-self:center}
.v2-h1{font-family:'Cardo',Georgia,serif;font-weight:400;font-size:var(--fs-display);line-height:1.08;letter-spacing:-.008em}
.v2-sub{
  font-family:'Cardo',Georgia,serif;font-size:var(--fs-h2);line-height:1.2;color:var(--accent);
  margin-top:calc(var(--u)*.75);
}
.v2-lead{margin-top:calc(var(--u)*2.5);max-width:46ch;font-size:var(--fs-lead);color:var(--ink-2)}

.v2-index{margin-top:calc(var(--u)*3.5);display:grid;gap:calc(var(--u)*1.5);max-width:46ch;font-size:var(--fs-small)}
.v2-index li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--u)*.25) calc(var(--u)*2);
  padding-top:calc(var(--u)*1.25);border-top:1px solid var(--line);
}
.v2-n{font-family:'Cardo',Georgia,serif;grid-row:span 2;color:var(--accent);font-size:var(--fs-h3)}
.v2-index b{color:var(--ink)}
.v2-index span:last-child{color:var(--ink-2)}

.v2-acts{margin-top:calc(var(--u)*4);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*3)}
.v2-quiet{font-size:var(--fs-small);color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:2px}

/* de plaat loopt de buitenmarge van de container in */
.v2-plate{position:relative;margin-right:calc(var(--pad)*-1)}
.v2-arch{
  position:relative;overflow:hidden;
  border-radius:var(--r-b);
  border:1px solid var(--line);box-shadow:var(--sh-a);
  background-color:var(--veld-2);
}
.v2-arch img{width:100%;filter:grayscale(.94) sepia(.16) contrast(1.16) brightness(.97)}
.v2-leads{position:absolute;inset:0;width:100%;height:100%}
.v2-lead-g path{stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.v2-lead-g circle{fill:var(--accent);stroke:var(--accent-ink);stroke-width:1;vector-effect:non-scaling-stroke}
/* De nummers staan BIJ hun punt op het gezicht, niet in een kolom tegen de
   rechterrand: die rand is een boog, dus alles wat daar hoog staat wordt door
   `overflow:hidden` weggeknipt. Twee van de vier verdwenen zo compleet. */
.v2-tag{
  position:absolute;z-index:3;
  font-family:'Cardo',Georgia,serif;font-size:var(--fs-small);line-height:1;
  padding:calc(var(--u)*.5) calc(var(--u)*.75);
  background-color:var(--accent);color:var(--accent-ink);border-radius:var(--r-a);
}
.v2-t1{left:calc(81.7% - 4px);top:calc(31.1% - 11px)}
.v2-t2{left:calc(80% - 4px);top:calc(60% - 11px)}
.v2-t3{left:calc(92.7% - 4px);top:calc(66.7% - 11px)}
.v2-t4{left:calc(59.3% - 4px);top:calc(15.6% - 11px)}
.v2-plate figcaption{
  margin-top:calc(var(--u)*1.5);text-align:right;padding-right:var(--pad);
  font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
/* satelliet: klein, uit de stroom, landt op de veel grotere plaat */
.v2-sat{
  position:absolute;z-index:5;left:calc(var(--u)*-4);bottom:calc(var(--u)*4);
  padding:calc(var(--u)*1.75) calc(var(--u)*2.5);text-align:center;
  background-color:var(--accent);color:var(--accent-ink);
  box-shadow:var(--sh-b);border-radius:var(--r-a);transform:rotate(-2deg);
}
.v2-sat b{display:block;font-family:'Cardo',Georgia,serif;font-size:var(--fs-h2);line-height:1}
.v2-sat span{display:block;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase}

/* ── V2 secties ─────────────────────────────────────────────────────── */
.v2-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.v2 h2,.v2 h3{font-family:'Cardo',Georgia,serif;font-weight:400;letter-spacing:-.006em}
.v2-h2{font-size:var(--fs-h2);line-height:1.14}
.v2-groot{font-family:'Cardo',Georgia,serif;font-weight:400;font-size:var(--fs-display);line-height:1.08;max-width:18ch}
.v2-cap{
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.2em;
  color:var(--accent);margin-bottom:calc(var(--u)*1);
}

/* 2 · kiezer — een echte tablist; zonder script staan alle panelen open */
.v2-kiezer{background-color:var(--veld-2);padding:calc(var(--u)*10) 0 calc(var(--u)*12)}
.v2-tabs{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1)}
.v2-tabs button{
  padding:calc(var(--u)*1.5) calc(var(--u)*2.5);cursor:pointer;
  font-family:'Cardo',Georgia,serif;font-size:var(--fs-h3);
  color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-a);
  transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease);
}
.v2-tabs button[aria-selected="true"]{background-color:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.v2-paneel{margin-top:calc(var(--u)*4)}
.v2-paneel[hidden]{display:none}
.v2-beh{display:grid;gap:calc(var(--u)*2)}
.v2-beh li{
  display:grid;grid-template-columns:minmax(0,1fr) max-content;
  gap:calc(var(--u)*.5) calc(var(--u)*3);align-items:baseline;
  padding-bottom:calc(var(--u)*2);border-bottom:1px solid var(--line);
}
.v2-beh b{font-family:'Cardo',Georgia,serif;font-weight:700;font-size:var(--fs-h3);color:var(--ink)}
.v2-beh > li > span{grid-column:1;color:var(--ink-2);font-size:var(--fs-small);max-width:56ch}
.v2-beh i{grid-column:2;grid-row:1 / span 2;font-family:'Cardo',Georgia,serif;font-size:var(--fs-h3);color:var(--accent)}

/* 3 · wensen — type as image */
.v2-wensen{background-color:var(--veld);padding:calc(var(--u)*12) 0}
.v2-wenslijst{
  margin-top:calc(var(--u)*5);display:grid;gap:calc(var(--u)*1.5) calc(var(--u)*5);
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
}
.v2-wenslijst li{
  font-family:'Cardo',Georgia,serif;font-size:var(--fs-h2);line-height:1.2;color:var(--accent);
  padding-bottom:calc(var(--u)*1.5);border-bottom:1px solid var(--line);
}

/* 4 · producten — het beeld steekt de vorige sectie in */
.v2-prod{background-color:var(--accent);color:var(--petrol-ink);padding:0 0 calc(var(--u)*12)}
.v2-prod-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:calc(var(--u)*6);align-items:center;
}
.v2-prodbeeld{margin-top:calc(var(--u)*-9);position:relative;z-index:3}
.v2-prodbeeld img{
  width:100%;border-radius:var(--r-a);box-shadow:var(--sh-b);
  filter:saturate(.8) contrast(1.04);
}
.v2-prodtekst{padding-top:calc(var(--u)*10)}
.v2-prod h2{color:var(--petrol-ink)}
.v2-prodtekst p{margin-top:calc(var(--u)*2.5);max-width:50ch;color:var(--petrol-ink-2);font-size:var(--fs-lead)}

/* 5 · lexy — full bleed huidveld, tekst op een eigen plaat */
.v2-lexy{position:relative;background-color:var(--veld);padding-bottom:calc(var(--u)*12)}
.v2-veld{width:100%}
.v2-veld img{width:100%;aspect-ratio:2.6/1;object-fit:cover;filter:grayscale(.86) sepia(.12) contrast(.92) brightness(1.16)}
.v2-lexy-in{
  position:relative;z-index:2;margin-top:calc(var(--u)*-14);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:calc(var(--u)*5);align-items:end;
}
.v2-kamer img{width:100%;border-radius:var(--r-a);box-shadow:var(--sh-b);border:1px solid var(--line)}
.v2-kamer figcaption{
  margin-top:calc(var(--u)*1.25);font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
}
.v2-lexy-tekst{
  padding:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*3);
  background-image:linear-gradient(180deg,rgba(200,207,198,.94) 0%,rgba(200,207,198,1) 34%);
}
.v2-lexy-tekst p{margin-top:calc(var(--u)*2);max-width:48ch;color:var(--ink-2);font-size:var(--fs-lead)}

/* 6 · reviews — horizontale rail */
.v2-rev{background-color:var(--veld-2);padding:calc(var(--u)*10) 0 calc(var(--u)*12)}
.v2-rail{
  margin:calc(var(--u)*4) 0;display:flex;gap:calc(var(--u)*3);
  overflow-x:auto;overscroll-behavior-x:contain;
  padding:calc(var(--u)*1) var(--pad) calc(var(--u)*3);
  min-width:0;max-width:100%;
  scroll-snap-type:x mandatory;
}
/* Breed genoeg dat de rail op elke breedte echt doorloopt: op 340px pasten er
   vier naast elkaar op 1440 en las het als een gewoon raster. */
.v2-rail li{
  flex:0 0 auto;width:min(420px,80vw);scroll-snap-align:start;
  padding:calc(var(--u)*3);background-color:var(--veld);
  border:1px solid var(--line);border-radius:var(--r-a);
}
.v2-rail blockquote p{color:var(--ink);font-size:var(--fs-small)}
.v2-naam{
  margin-top:calc(var(--u)*2);font-size:var(--fs-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}

/* 7 · praktisch */
.v2-prak{background-color:var(--veld);padding:calc(var(--u)*10) 0}
.v2-prakgrid{
  display:grid;gap:calc(var(--u)*3);
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
}
.v2-prakgrid > div{padding-top:calc(var(--u)*2);border-top:1px solid var(--line)}
.v2-prakgrid dt{font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.v2-prakgrid dd{margin:calc(var(--u)*.75) 0 0;font-family:'Cardo',Georgia,serif;font-size:var(--fs-h3);color:var(--ink)}
.v2-prakgrid a{border-bottom:1px solid var(--accent)}
.v2-prakslot{margin-top:calc(var(--u)*4);color:var(--ink-2);font-size:var(--fs-small)}

/* 8 · boeken — het paneel steekt de vorige sectie in */
.v2-boek{background-color:var(--accent);padding:0 0 calc(var(--u)*10)}
.v2-boekpaneel{
  margin-top:calc(var(--u)*-6);padding:calc(var(--u)*6);
  background-color:var(--veld);border-radius:var(--r-a);box-shadow:var(--sh-b);
}
.v2-boekpaneel p{margin-top:calc(var(--u)*2);max-width:48ch;color:var(--ink-2);font-size:var(--fs-lead)}
.v2-bk-k{max-width:20ch}

@media (max-width:860px){
  .v2-prod-in{grid-template-columns:1fr;gap:calc(var(--u)*4)}
  .v2-prodtekst{padding-top:0}
  .v2-lexy-in{grid-template-columns:1fr;margin-top:calc(var(--u)*-8);gap:calc(var(--u)*4)}
  .v2-boekpaneel{padding:calc(var(--u)*4)}
}

.v2-foot{background-color:var(--veld-2)}

/* Op smal komt de plaat DIRECT onder de lead te staan en pas daarna het
   register: anders staat het onderwerp onder de vouw en is het eerste scherm
   niets dan tekstblokken. */
@media (max-width:1000px){
  .v2-wrap{grid-template-columns:1fr;grid-template-areas:"copy" "plate" "index" "acts";gap:calc(var(--u)*4)}
  .v2-sat{left:calc(var(--u)*2);bottom:calc(var(--u)*5)}
  .v2-index{margin-top:0}
  .v2-acts{margin-top:calc(var(--u)*1)}
}

/* ══════════════════════════════════════════════════════════════════════ */
/* V3 · DONDERDAG EN VRIJDAG                                              */
/* dennegroen veld, ijsblauw accent, Jost, de week als raster             */
/* ══════════════════════════════════════════════════════════════════════ */
.v3{
  --veld:var(--f3);
  --veld-2:#1c3227;
  --veld-3:#0e1b15;
  /* tekst OP het ijsblauwe vlak, doorgerekend tegen #9fbece:
     9,3:1 voor de donkere en 5,8:1 voor de gedempte (LESSONS regel 1) */
  --ice-ink:#0e1b15;
  --ice-ink-2:#2c4038;
  --ink:#edf2ee;
  --ink-2:#a7b8ad;
  --accent:#9fbece;
  --accent-ink:#0e1b15;
  --line:#33503e;
  --ring-in:#edf2ee;
  --ring-out:#14261e;
  --r-a:2px;
  --r-b:4px;
  --fs-mega:clamp(2.2rem,6.6vw,4.2rem);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background-image:linear-gradient(168deg,var(--veld-2) 0%,var(--veld) 46%);
}
.v3-brand{font-family:'Jost',system-ui,sans-serif;font-weight:500;font-size:var(--fs-h3);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.v3-nav a{color:var(--ink-2)}
.v3-ghost{color:var(--ink)}

.v3-hero{position:relative;overflow:clip;flex:1;display:flex;align-items:center}
.v3-wrap{
  position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:calc(var(--u)*3) var(--pad) calc(var(--u)*7);
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:calc(var(--u)*5);align-items:center;
}
.v3-h1{font-family:'Jost',system-ui,sans-serif;font-weight:600;font-size:var(--fs-mega);line-height:.98;letter-spacing:-.02em}
.v3-h1 .v3-w{display:block}
.v3-sub{
  margin-top:calc(var(--u)*2);font-family:'Jost',system-ui,sans-serif;font-weight:400;
  font-size:var(--fs-h3);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.v3-lead{margin-top:calc(var(--u)*3);max-width:36ch;font-size:var(--fs-lead);color:var(--ink-2)}
.v3-acts{margin-top:calc(var(--u)*4);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*3)}
.v3-quiet{font-size:var(--fs-small);color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:2px}

.v3-panel{
  position:relative;background-color:var(--veld-2);border:1px solid var(--line);
  border-radius:var(--r-b);box-shadow:var(--sh-b);padding:calc(var(--u)*3);
  display:grid;gap:calc(var(--u)*3);
}
.v3-week{display:grid;gap:calc(var(--u)*1)}
.v3-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(var(--u)*.75)}
.v3-head span{
  text-align:center;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);padding-bottom:calc(var(--u)*.5);
}
.v3-head .v3-on{color:var(--accent);font-weight:600}
.v3-body span{
  min-height:calc(var(--u)*9);border-radius:var(--r-a);
  background-color:var(--veld);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
/* dicht is een keuze, geen leeg vak: een fijne diagonale arcering */
.v3-dicht{
  background-image:repeating-linear-gradient(135deg,rgba(167,184,173,.16) 0 1px,rgba(167,184,173,0) 1px 7px);
}
.v3-body .v3-lit{background-color:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.v3-body .v3-lit b{font-family:'Jost',system-ui,sans-serif;font-weight:600;font-size:var(--fs-small)}
.v3-body .v3-lit i{font-size:var(--fs-micro)}

.v3-lower{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:calc(var(--u)*3);align-items:stretch}
.v3-shot{
  position:relative;z-index:3;margin:calc(var(--u)*-1) 0 calc(var(--u)*-10) calc(var(--u)*-5);
  border:1px solid var(--line);border-radius:var(--r-a);overflow:hidden;box-shadow:var(--sh-b);
}
.v3-shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.05)}

.v3-slots{display:grid;align-content:space-between;gap:calc(var(--u)*1.25);font-size:var(--fs-small)}
.v3-slots li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:calc(var(--u)*.25) calc(var(--u)*2);
  padding-bottom:calc(var(--u)*1.25);border-bottom:1px solid var(--line);
}
.v3-slots b{font-family:'Jost',system-ui,sans-serif;font-weight:500;color:var(--ink)}
.v3-slots span{grid-column:1;color:var(--ink-2);font-size:var(--fs-micro)}
.v3-slots i{grid-column:2;grid-row:1 / span 2;font-family:'Jost',system-ui,sans-serif;color:var(--accent);font-weight:500}

/* satelliet: klein, uit de stroom, landt op de veel grotere uitstekende foto.
   Rechtsboven kon niet: daar staan de dagen van de week. */
.v3-sat{
  position:absolute;z-index:5;left:calc(var(--u)*-2.5);bottom:calc(var(--u)*-4);
  padding:calc(var(--u)*1.25) calc(var(--u)*2.25);
  background-color:var(--accent);color:var(--accent-ink);
  border-radius:var(--r-a);box-shadow:var(--sh-a);
}
.v3-sat b{display:block;font-family:'Jost',system-ui,sans-serif;font-weight:600;font-size:var(--fs-h3)}
.v3-sat span{display:block;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase}

/* ── V3 secties ─────────────────────────────────────────────────────── */
.v3-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.v3 h2{font-family:'Jost',system-ui,sans-serif;font-weight:600;letter-spacing:-.015em}
.v3-h2{font-size:var(--fs-h2);line-height:1.06}
.v3-groot{font-family:'Jost',system-ui,sans-serif;font-weight:600;font-size:var(--fs-display);line-height:1.04;letter-spacing:-.02em;max-width:18ch}
.v3-cap{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:calc(var(--u)*1)}

/* 2 · dag — de uren blijven staan terwijl de duren langsschuiven */
.v3-dag{background-color:var(--veld-2);padding:calc(var(--u)*12) 0}
.v3-dag-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:calc(var(--u)*6);align-items:start}
.v3-pin{position:sticky;top:calc(var(--u)*12)}
.v3-uurgroot{
  font-family:'Jost',system-ui,sans-serif;font-weight:600;font-size:var(--fs-display);
  line-height:.98;letter-spacing:-.02em;color:var(--accent);margin-bottom:calc(var(--u)*3);
}
.v3-uurgroot span{font-size:var(--fs-h3);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.v3-dagl{margin-top:calc(var(--u)*2);max-width:36ch;color:var(--ink-2);font-size:var(--fs-lead)}
.v3-duurlijst{display:grid;gap:calc(var(--u)*3)}
.v3-duurlijst li{
  display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;
  gap:calc(var(--u)*3);align-items:baseline;
  padding-bottom:calc(var(--u)*3);border-bottom:1px solid var(--line);
}
.v3-duurlijst b{font-family:'Jost',system-ui,sans-serif;font-weight:600;font-size:var(--fs-h2);color:var(--ink)}
.v3-duurlijst > li > span{color:var(--ink-2);font-size:var(--fs-small)}
.v3-duurlijst i{font-family:'Jost',system-ui,sans-serif;color:var(--accent);font-size:var(--fs-h3)}

/* 3 · stapel — kaarten die op elkaar blijven liggen bij het scrollen */
.v3-stapel{background-color:var(--veld-3);padding:calc(var(--u)*10) 0 calc(var(--u)*14)}
.v3-kaarten{display:grid;gap:calc(var(--u)*3)}
.v3-kaart{
  position:sticky;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:calc(var(--u)*4);align-items:center;
  background-color:var(--veld-2);border:1px solid var(--line);border-radius:var(--r-b);
  padding:calc(var(--u)*4);box-shadow:var(--sh-b);
}
.v3-k1{top:calc(var(--u)*11)}
.v3-k2{top:calc(var(--u)*13)}
.v3-k3{top:calc(var(--u)*15)}
.v3-k4{top:calc(var(--u)*17)}
.v3-knr{
  font-family:'Jost',system-ui,sans-serif;font-weight:600;font-size:var(--fs-h3);
  letter-spacing:.2em;color:var(--accent);margin-bottom:calc(var(--u)*1)
}
.v3-kaart ul{margin-top:calc(var(--u)*2.5);display:grid;gap:calc(var(--u)*1.5)}
.v3-kaart ul li{
  display:grid;grid-template-columns:minmax(0,1fr) max-content;
  gap:calc(var(--u)*.25) calc(var(--u)*2);align-items:baseline;
  padding-bottom:calc(var(--u)*1.5);border-bottom:1px solid var(--line);
}
.v3-kaart ul li:last-child{border-bottom:0;padding-bottom:0}
.v3-kaart ul b{font-family:'Jost',system-ui,sans-serif;font-weight:500;color:var(--ink);font-size:var(--fs-h3)}
.v3-kaart ul span{grid-column:1;color:var(--ink-2);font-size:var(--fs-micro)}
.v3-kaart ul i{grid-column:2;grid-row:1 / span 2;font-family:'Jost',system-ui,sans-serif;color:var(--accent);font-size:var(--fs-h3)}
.v3-kaart figure{overflow:hidden;border-radius:var(--r-a)}
.v3-kaart figure img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.82) contrast(1.05)}

/* 4 · wensen — het ijsblauwe vlak, van rand tot rand, kop komt laat */
.v3-wensen{background-color:var(--accent);color:var(--ice-ink);padding:calc(var(--u)*12) 0}
.v3-wenslijst{display:grid;gap:calc(var(--u)*1) calc(var(--u)*4);grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.v3-wenslijst li{
  font-family:'Jost',system-ui,sans-serif;font-weight:500;font-size:var(--fs-h2);line-height:1.14;
  letter-spacing:-.015em;color:var(--ice-ink);
  padding-bottom:calc(var(--u)*1.5);border-bottom:1px solid var(--ice-ink-2);
}
.v3-wn-k{margin-top:calc(var(--u)*5);color:var(--ice-ink-2)}

/* 5 · producten — stille tussenstop */
.v3-prod{background-color:var(--veld);padding:calc(var(--u)*12) 0}
.v3-prod p{margin-top:calc(var(--u)*3);max-width:52ch;color:var(--ink-2);font-size:var(--fs-lead)}

/* 6 · lexy — het beeld steekt de vorige sectie in */
.v3-lexy{background-color:var(--veld-2);padding-bottom:calc(var(--u)*12)}
.v3-lexy-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(var(--u)*6);align-items:center}
.v3-kamer{margin-top:calc(var(--u)*-10);position:relative;z-index:3}
.v3-kamer img{width:100%;border-radius:var(--r-a);box-shadow:var(--sh-b);border:1px solid var(--line)}
.v3-kamer figcaption{margin-top:calc(var(--u)*1.25);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.v3-lexy-tekst{padding-top:calc(var(--u)*10)}
.v3-lexy-tekst p{margin-top:calc(var(--u)*2.5);max-width:46ch;color:var(--ink-2);font-size:var(--fs-lead)}

/* 7 · reviews — split canvas */
.v3-rev{background-color:var(--veld);padding:calc(var(--u)*12) 0}
.v3-rev-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:calc(var(--u)*6);align-items:start}
.v3-quotes{margin-top:calc(var(--u)*3.5);display:grid;gap:calc(var(--u)*2.5)}
.v3-quotes li{padding-bottom:calc(var(--u)*2.5);border-bottom:1px solid var(--line)}
.v3-quotes li:last-child{border-bottom:0;padding-bottom:0}
.v3-quotes blockquote p{color:var(--ink);font-size:var(--fs-small)}
.v3-naam{margin-top:calc(var(--u)*1);font-family:'Jost',system-ui,sans-serif;font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.v3-rev .v3-quiet{display:inline-block;margin-top:calc(var(--u)*3)}
.v3-revbeeld img{width:100%;border-radius:var(--r-a);border:1px solid var(--line);box-shadow:var(--sh-a);filter:saturate(.82) contrast(1.05)}

/* 8 · hier — het paneel steekt de vorige sectie in */
.v3-hier{background-color:var(--accent);padding:0 0 calc(var(--u)*10)}
.v3-hierpaneel{
  margin-top:calc(var(--u)*-6);padding:calc(var(--u)*6);
  background-color:var(--veld-2);border:1px solid var(--line);
  border-radius:var(--r-b);box-shadow:var(--sh-b);
}
.v3-hiergrid{margin-top:calc(var(--u)*4);display:grid;gap:calc(var(--u)*3);grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.v3-hiergrid > div{padding-top:calc(var(--u)*2);border-top:1px solid var(--line)}
.v3-hiergrid dt{font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.v3-hiergrid dd{margin:calc(var(--u)*.75) 0 0;font-family:'Jost',system-ui,sans-serif;font-size:var(--fs-h3);color:var(--ink)}
.v3-hiergrid a{border-bottom:1px solid var(--accent)}
.v3-hierslot{margin-top:calc(var(--u)*3);color:var(--ink-2);font-size:var(--fs-small)}
.v3-hierpaneel .v3-acts{margin-top:calc(var(--u)*4)}

@media (max-width:860px){
  .v3-dag-in{grid-template-columns:1fr;gap:calc(var(--u)*4)}
  .v3-pin{position:static}
  .v3-kaart{grid-template-columns:1fr;gap:calc(var(--u)*3)}
  .v3-k1,.v3-k2,.v3-k3,.v3-k4{position:static}
  .v3-lexy-in,.v3-rev-in{grid-template-columns:1fr;gap:calc(var(--u)*4)}
  .v3-lexy-tekst{padding-top:0}
  .v3-kamer{margin-top:calc(var(--u)*-8)}
  .v3-hierpaneel{padding:calc(var(--u)*4)}
}

.v3-foot{background-color:var(--veld-2)}

@media (max-width:1000px){
  .v3-wrap{grid-template-columns:1fr;gap:calc(var(--u)*5);padding-top:calc(var(--u)*2)}
  .v3-lead{max-width:44ch}
  .v3-panel{margin-bottom:calc(var(--u)*6)}
}
@media (max-width:560px){
  .v3-body span{min-height:calc(var(--u)*7)}
  .v3-body .v3-lit i{display:none}
  .v3-lower{grid-template-columns:1fr}
  .v3-shot{margin:0;aspect-ratio:4/3}
  .v3-sat{left:calc(var(--u)*1);bottom:calc(var(--u)*-2)}
}

/* ═══════════════════════════════════════════════════════════ beweging ══ */
/* Eén easing, drie duren, alles op transform en opacity. De `.js` klasse gaat
   alleen aan als er script draait EN beweging gewenst is (LESSONS regel 8):
   zonder script staat elk element gewoon in zijn eindstand. */
@keyframes rijs{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tikaan{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@keyframes zwelaan{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes kantel{from{opacity:0;transform:scale(.94) rotate(1.4deg)}to{opacity:1;transform:rotate(-1.8deg)}}
@keyframes teken{from{stroke-dashoffset:280}to{stroke-dashoffset:0}}
@keyframes adem{0%,100%{opacity:.45}50%{opacity:.95}}
@keyframes strijk{0%{transform:translateX(-115%)}100%{transform:translateX(215%)}}
@keyframes lichtop{from{opacity:.12;transform:translateY(8px)}to{opacity:1;transform:none}}

.js .v1-kicker,.js .v1-h1 .v1-w,.js .v1-lead,.js .v1-zones li,.js .v1-acts{animation:rijs var(--t3) var(--ease) both}
.js .v1-h1 .v1-w:nth-child(1){animation-delay:60ms}
.js .v1-h1 .v1-w:nth-child(2){animation-delay:140ms}
.js .v1-h1 .v1-w:nth-child(3){animation-delay:220ms}
.js .v1-h1 .v1-w:nth-child(4){animation-delay:300ms}
.js .v1-lead{animation-delay:380ms}
.js .v1-zones li:nth-child(1){animation-delay:460ms}
.js .v1-zones li:nth-child(2){animation-delay:520ms}
.js .v1-zones li:nth-child(3){animation-delay:580ms}
.js .v1-acts{animation-delay:640ms}
.js .v1-ticks line{animation:tikaan var(--t2) var(--ease) both;transform-origin:0 50%}
.js .v1-ticks line:nth-child(3n+1){animation-delay:220ms}
.js .v1-ticks line:nth-child(3n+2){animation-delay:340ms}
.js .v1-ticks line:nth-child(3n+3){animation-delay:460ms}
.js .v1-inset{animation:kantel var(--t3) var(--ease) 260ms both}
.js .v1-inset::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(100deg,rgba(244,241,236,0) 38%,rgba(244,241,236,.16) 50%,rgba(244,241,236,0) 62%);
  animation:strijk 7s var(--ease) 1.6s infinite;
}
.js .v1-sat{animation:zwelaan var(--t2) var(--ease) 900ms both}

.js .v2-h1,.js .v2-sub,.js .v2-lead,.js .v2-acts{animation:rijs var(--t3) var(--ease) both}
.js .v2-sub{animation-delay:120ms}
.js .v2-lead{animation-delay:220ms}
.js .v2-acts{animation-delay:860ms}
.js .v2-arch{animation:zwelaan var(--t3) var(--ease) 140ms both}
.js .v2-lead-g path{stroke-dasharray:280;animation:teken var(--t3) var(--ease) 620ms both}
.js .v2-lead-g circle{animation:zwelaan var(--t2) var(--ease) 1s both}
.js .v2-tag{animation:zwelaan var(--t2) var(--ease) 1.16s both}
.js .v2-index li{animation:rijs var(--t2) var(--ease) both}
.js .v2-index li:nth-child(1){animation-delay:520ms}
.js .v2-index li:nth-child(2){animation-delay:600ms}
.js .v2-index li:nth-child(3){animation-delay:680ms}
.js .v2-index li:nth-child(4){animation-delay:760ms}
.js .v2-sat{animation:zwelaan var(--t2) var(--ease) 1.05s both}

.js .v3-h1 .v3-w,.js .v3-sub,.js .v3-lead,.js .v3-acts{animation:rijs var(--t3) var(--ease) both}
.js .v3-h1 .v3-w:nth-child(2){animation-delay:90ms}
.js .v3-h1 .v3-w:nth-child(3){animation-delay:180ms}
.js .v3-sub{animation-delay:260ms}
.js .v3-lead{animation-delay:340ms}
.js .v3-acts{animation-delay:420ms}
.js .v3-panel{animation:rijs var(--t3) var(--ease) 160ms both}
.js .v3-body span{animation:lichtop var(--t2) var(--ease) both}
.js .v3-body span:nth-child(1){animation-delay:420ms}
.js .v3-body span:nth-child(2){animation-delay:470ms}
.js .v3-body span:nth-child(3){animation-delay:520ms}
.js .v3-body span:nth-child(4){animation-delay:660ms}
.js .v3-body span:nth-child(5){animation-delay:790ms}
.js .v3-body span:nth-child(6){animation-delay:620ms}
.js .v3-body span:nth-child(7){animation-delay:670ms}
.js .v3-slots li{animation:rijs var(--t2) var(--ease) both}
.js .v3-slots li:nth-child(1){animation-delay:700ms}
.js .v3-slots li:nth-child(2){animation-delay:770ms}
.js .v3-slots li:nth-child(3){animation-delay:840ms}
.js .v3-slots li:nth-child(4){animation-delay:910ms}
.js .v3-shot{animation:zwelaan var(--t3) var(--ease) 620ms both}
.js .v3-sat{animation:zwelaan var(--t2) var(--ease) 980ms both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}
}