/* =====================================================================
   LUKAS INSTALLATIETECHNIEK — vier hero voorstellen
   Vier losse richtingen in een document. Elke versie heeft haar eigen
   tokens onder haar eigen root, zodat er geen palet kan lekken.
   ===================================================================== */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/bricolage-grotesque-var.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/karla-var.woff2') format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/big-shoulders-display-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('fonts/ibm-plex-sans-var.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/instrument-sans-var.woff2') format('woff2')}
@font-face{font-family:'Literata';font-style:normal;font-weight:200 900;font-display:swap;src:url('fonts/literata-var.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('fonts/figtree-var.woff2') format('woff2')}

/* ------------------------------------------------------------- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#111;min-height:100vh}
[hidden]{display:none !important}
/* height:auto is niet optioneel: de width/height-attributen op elke img zijn
   een presentational hint op height, en die zet elke CSS aspect-ratio buiten
   spel. Zonder deze regel rendert een beeld op zijn volle intrinsieke hoogte. */
img{max-width:100%;height:auto;display:block}
svg{display:block;max-width:100%}
h1,h2,p,figure,figcaption,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:2px}

.ver{min-height:100vh;display:flex;flex-direction:column;overflow-wrap:break-word}
.ver main{flex:1 0 auto}

/* Het veld als achtergrond, niet een eigen zwart: de vingerafdruk van de
   hero leest de eerste knop met een eigen vlak als het accent, en een
   zwarte springlink zou in alle vier de voorstellen als hetzelfde accent
   binnenkomen. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:50;padding:12px 18px;
  background:var(--veld,#111);color:var(--ink,#fff);border:2px solid currentColor;border-radius:8px;
  text-decoration:none;font:600 15px/1 system-ui,sans-serif}
.skip-link:focus{left:12px;top:12px}

/* -------------------------------------------------------- navigatie ----- */
/* Zonder script staat de <details> open en valt het menu terug op een gewone
   gestapelde lijst onder de kopregel. De zwevende lade hangt daarom aan
   .has-js en niet aan een klasse die over beweging gaat. */
.nav-menu{position:relative}
.nav-burger{display:none;list-style:none;cursor:pointer;align-items:center;gap:10px;
  min-height:44px;padding:10px 14px;font:600 14px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.nav-burger::-webkit-details-marker{display:none}
.nav-bars{display:block;width:20px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.nav-list{display:flex;gap:clamp(14px,1.8vw,28px);align-items:center}
.nav-list a{text-decoration:none;display:inline-block;padding:10px 2px;min-height:44px;line-height:24px}

@media (max-width:859px){
  .nav-burger{display:flex}
  /* Een expliciete display op het kind houdt de lijst in de lay-out terwijl de
     details dicht is: de links renderen dan wel, maar focus() landt op body en
     het menu is met het toetsenbord onbereikbaar. Vandaar dit expliciet weg. */
  .nav-menu:not([open]) .nav-list{display:none}
  .nav-list{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 0 4px}
  .has-js .nav-menu[open] .nav-list{position:absolute;right:0;top:calc(100% + 10px);z-index:30;
    min-width:220px;padding:12px 18px;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.4);
    background:var(--veld2);border:1px solid currentColor}
}

/* ------------------------------------------------------- wisselaar ------ */
.vswitch{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;
  display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(16,16,16,.9);
  box-shadow:0 14px 40px rgba(0,0,0,.4);backdrop-filter:blur(6px)}
.vswitch-b{border:0;background:transparent;color:#EDEAE4;cursor:pointer;
  min-width:52px;min-height:38px;padding:0 14px;border-radius:999px;
  font:700 13px/1 system-ui,sans-serif;letter-spacing:.08em}
.vswitch-b[aria-pressed="true"]{background:#EDEAE4;color:#111}
.vswitch-b:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* =====================================================================
   v1 · DE WARMSTE PLEK
   veld warm antraciet · accent vermiljoen · Bricolage Grotesque
   ===================================================================== */
#version-v1{
  --u:8px;
  --veld:#1B1917; --veld2:#262220;
  --ink:#F4F0EA; --stil:#A79E93;
  --acc:#C2350F; --accL:#F2704A;
  --r:18px;
  --sh:0 26px 60px rgba(0,0,0,.62);
  --e:cubic-bezier(.22,.61,.36,1);
  background:var(--veld);color:var(--ink);
  font:400 17px/1.6 'Karla',system-ui,sans-serif;
}
.v1-head{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:calc(var(--u)*3) clamp(20px,4vw,56px);position:relative;z-index:20}
.v1-logo{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.v1-logo-w{font:800 30px/1 'Bricolage Grotesque',system-ui,sans-serif;font-variation-settings:'opsz' 14;letter-spacing:-.02em}
.v1-logo-a{color:var(--accL)}
.v1-logo-s{font:700 10px/1 'Karla',system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--stil);margin-top:6px}
.v1-nav{font:700 14px/1 'Karla',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.v1-list a{color:var(--stil)}
.v1-list a[aria-current]{color:var(--ink)}

.v1-hero{position:relative;isolation:isolate;overflow:visible;
  padding:clamp(20px,4vw,56px) clamp(20px,4vw,56px) clamp(110px,20vh,200px);
  min-height:calc(100vh - 118px);display:grid;align-content:center;
  grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*5);
  background-image:radial-gradient(120% 78% at 62% 96%,rgba(214,88,32,.26) 0%,rgba(150,54,18,.12) 34%,rgba(27,25,23,0) 68%)}
/* De gloed ademt, niet de sectie zelf: een transform op de hero maakte het
   eerste scherm vier procent breder dan het venster, en dat is horizontale
   overflow op elke breedte. */
.v1-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(78% 56% at 63% 88%,rgba(226,104,46,.32) 0%,rgba(150,54,18,.12) 42%,rgba(27,25,23,0) 74%)}

/* de getekende radiator: de sokkel waar de foto op staat, van rand tot rand */
.v1-fins{position:absolute;left:0;right:0;bottom:0;height:clamp(120px,22vh,210px);z-index:1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 22%),
    linear-gradient(180deg,#5C5348 0 10px,rgba(0,0,0,0) 10px),
    repeating-linear-gradient(90deg,#4B443B 0 15px,#332E28 15px 30px);
  border-top:4px solid #6B6053;
  box-shadow:0 -30px 60px rgba(0,0,0,.55)}
.v1-fins::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:#221E1A}

.v1-say{position:relative;z-index:3;max-width:min(720px,100%)}
.v1-kick{font:700 clamp(1.1rem,2.4vw,1.55rem)/1.25 'Karla',system-ui,sans-serif;
  letter-spacing:.02em;color:var(--accL);margin-bottom:calc(var(--u)*2)}
.v1-h1{font:800 clamp(2.9rem,7.6vw,6.6rem)/1.02 'Bricolage Grotesque',system-ui,sans-serif;
  font-variation-settings:'opsz' 20;letter-spacing:-.035em;margin:0 0 calc(var(--u)*3);
  max-width:14ch;min-width:0}
.v1-hot{position:relative;display:inline-block;z-index:1}
.v1-hot::before{content:"";position:absolute;left:-.06em;right:-.06em;top:.30em;bottom:.10em;z-index:-1;
  background:linear-gradient(90deg,var(--acc),#E4571F);border-radius:4px}
.v1-lead{color:var(--stil);max-width:46ch;font-size:clamp(1rem,1.5vw,1.2rem);margin-bottom:calc(var(--u)*4)}
.v1-act{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*3)}
.v1-btn{display:inline-flex;align-items:center;min-height:54px;padding:0 30px;border-radius:999px;
  background:var(--acc);color:#fff;text-decoration:none;box-shadow:var(--sh);
  font:700 17px/1 'Karla',system-ui,sans-serif;letter-spacing:.01em;
  transition:transform .24s var(--e),background-color .24s var(--e)}
.v1-btn:hover{transform:translateY(-3px);background:#D33D14}

.v1-fig{position:relative;z-index:2;width:min(78vw,340px);justify-self:end;margin-bottom:calc(var(--u)*-9)}
.v1-fig::before{content:"";position:absolute;inset:auto 0 -26px -20px;height:74%;z-index:-1;
  background:linear-gradient(160deg,var(--acc),#8E2409);border-radius:var(--r)}
.v1-img{width:100%;border-radius:var(--r) var(--r) 4px 4px;box-shadow:var(--sh);
  filter:saturate(1.06) contrast(1.06)}
.v1-chip{position:absolute;left:-18px;bottom:34px;z-index:4;
  padding:12px 18px;border-radius:14px;background:var(--veld2);border:1px solid #3B342E;
  box-shadow:var(--sh);text-align:left}
.v1-chip-n{display:block;font:800 30px/1 'Bricolage Grotesque',system-ui,sans-serif;font-variation-settings:'opsz' 14;letter-spacing:-.03em;color:var(--ink)}
.v1-chip-u{font-size:15px;margin-left:3px;color:var(--accL)}
.v1-chip-l{display:block;margin-top:5px;font:700 10px/1 'Karla',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--stil)}

.v1-strip{background:var(--veld2);padding:clamp(40px,7vw,80px) clamp(20px,4vw,56px);border-top:1px solid #342E28}
.v1-h2{font:800 clamp(1.6rem,3vw,2.3rem)/1.1 'Bricolage Grotesque',system-ui,sans-serif;font-variation-settings:'opsz' 18;letter-spacing:-.03em;margin-bottom:calc(var(--u)*2)}
.v1-note{color:var(--stil);max-width:62ch;margin-bottom:calc(var(--u)*3)}
.v1-open{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:12px;padding:14px 20px;border-radius:12px;
  border:2px dashed #4A423A;background:rgba(0,0,0,.2)}
.v1-open-l{font:700 11px/1 'Karla',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--stil)}
.v1-open-v{color:var(--accL);font-weight:700}
.v1-foot{padding:26px clamp(20px,4vw,56px) 84px;color:var(--stil);font-size:14px;border-top:1px solid #2E2822}
.v1-foot a{color:var(--ink)}

@media (min-width:1000px){
  .v1-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
  .v1-say{grid-column:1;grid-row:1}
  .v1-fig{grid-column:2;grid-row:1;width:520px;margin-bottom:-120px;margin-left:-56px;align-self:end}
  .v1-fig::before{inset:auto -26px -30px 30px}
  .v1-h1{max-width:11ch}
}

/* =====================================================================
   v2 · VIER TEKENS
   veld zink · accent merkgeel · Big Shoulders Display
   ===================================================================== */
#version-v2{
  --u:8px;
  --veld:#94908A; --veld2:#A9A59D;
  --ink:#141311; --quiet:#1C1A18;
  --acc:#F2E317;
  --r:6px;
  --sh:0 22px 48px rgba(20,19,17,.42);
  --e:cubic-bezier(.16,.84,.44,1);
  background:var(--veld);color:var(--ink);
  font:400 17px/1.6 'IBM Plex Sans',system-ui,sans-serif;
}
.v2-head{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:calc(var(--u)*3) clamp(20px,4vw,56px);position:relative;z-index:20}
.v2-logo{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.v2-logo-w{font:800 34px/1.05 'Big Shoulders Display',system-ui,sans-serif;letter-spacing:.01em}
.v2-logo-a{background:var(--acc);color:var(--ink);padding:0 .07em;border-radius:2px}
.v2-logo-s{font:600 10px/1 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--quiet);margin-top:6px}
.v2-nav{font:600 14px/1 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.v2-list a{color:var(--quiet)}
.v2-list a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

.v2-hero{position:relative;isolation:isolate;min-height:calc(100vh - 122px);display:flex;flex-direction:column;
  background-image:linear-gradient(168deg,#A5A19A 0%,#9E9A93 42%,#918D86 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,0) 1px 4px)}
/* De panelen staan op ware verhouding, dus de hoogte volgt de breedte. Met een
   vaste hoogte moet de tekening kiezen tussen uitrekken of afsnijden, en dat
   sneed de sneeuwvlok en de kraan er half af. */
.v2-plates{position:absolute;left:0;right:0;bottom:0;z-index:0}
.v2-svg{width:100%;height:auto}
.v2-svg-breed{display:none}
.v2-m{filter:drop-shadow(0 16px 26px rgba(15,14,12,.34))}
.v2-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.v2-say{position:relative;z-index:3;padding:clamp(16px,3vw,40px) clamp(20px,4vw,56px) 0;max-width:min(1100px,100%)}
.v2-h1{font:800 clamp(2.6rem,10.4vw,9rem)/.84 'Big Shoulders Display',system-ui,sans-serif;
  letter-spacing:-.005em;text-transform:uppercase;margin-bottom:calc(var(--u)*2);min-width:0}
.v2-h1 span{display:block}
.v2-sub{font:800 clamp(1.4rem,3vw,2.4rem)/1.05 'Big Shoulders Display',system-ui,sans-serif;
  text-transform:uppercase;color:#2E2A04;margin-bottom:calc(var(--u)*2)}
.v2-lead{max-width:42ch;color:var(--ink);margin-bottom:calc(var(--u)*3)}
.v2-btn{display:inline-flex;align-items:center;min-height:54px;padding:0 30px;border-radius:var(--r);
  background:var(--acc);color:var(--ink);text-decoration:none;box-shadow:var(--sh);
  font:600 17px/1 'IBM Plex Sans',system-ui,sans-serif;
  transition:transform .2s var(--e),box-shadow .2s var(--e)}
.v2-btn:hover{transform:translateY(-3px);box-shadow:0 30px 56px rgba(20,19,17,.5)}
.v2-tag{position:absolute;z-index:4;left:auto;right:clamp(20px,4vw,56px);bottom:42%;
  padding:14px 18px;border-radius:var(--r);
  background:#EFECE6;border:2px solid var(--ink);box-shadow:var(--sh)}
.v2-tag-t{display:block;font:600 10px/1 'IBM Plex Sans',system-ui,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:#4B4409;margin-bottom:9px}
.v2-tag-l{display:block;font:600 15px/1.5 'IBM Plex Sans',system-ui,sans-serif;color:var(--ink)}

.v2-strip{background:#A5A199;padding:clamp(40px,7vw,80px) clamp(20px,4vw,56px);border-top:3px solid var(--ink)}
.v2-h2{font:800 clamp(1.9rem,3.6vw,2.9rem)/.9 'Big Shoulders Display',system-ui,sans-serif;text-transform:uppercase;margin-bottom:calc(var(--u)*2)}
.v2-note{max-width:62ch;margin-bottom:calc(var(--u)*3);color:var(--quiet)}
.v2-open{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:12px;padding:14px 20px;border-radius:var(--r);
  border:2px dashed var(--ink);background:#B0ACA4}
.v2-open-l{font:600 11px/1 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.v2-open-v{font-weight:600}
.v2-foot{padding:26px clamp(20px,4vw,56px) 84px;font-size:14px;border-top:3px solid var(--ink);background:#8E8A83}
.v2-foot a{color:var(--ink)}

@media (min-width:620px){
  .v2-svg-breed{display:block}
  .v2-svg-smal{display:none}
  /* De panelenband is 30vw hoog, dus dit zet het kaartje 90px onder de bovenrand
     ervan: daar is het paneel nog veldkleur en staat er geen teken. */
  .v2-tag{bottom:calc(30vw - 90px)}
}
@media (min-width:860px){
  .v2-say{padding-top:clamp(24px,5vw,64px)}
  .v2-h1{max-width:16ch}
  .v2-tag{right:clamp(20px,4vw,56px)}
}

/* =====================================================================
   v3 · 20,0
   veld porselein · accent displayblauw · Instrument Sans
   ===================================================================== */
#version-v3{
  --u:8px;
  --veld:#DDE7ED; --veld2:#C9D8E1;
  --ink:#141A1F; --stil:#4E5C66;
  --acc:#0B5CA3; --accL:#0F72C9;
  --r:10px;
  --sh:0 20px 46px rgba(20,26,31,.24);
  --e:cubic-bezier(.3,.7,.2,1);
  background:var(--veld);color:var(--ink);
  font:400 16px/1.6 'Instrument Sans',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
}
.v3-head{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:calc(var(--u)*3) clamp(20px,4vw,56px);position:relative;z-index:20;border-bottom:1px solid #B6C8D3}
.v3-logo{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.v3-logo-w{font:700 28px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.035em}
.v3-logo-a{color:var(--acc)}
.v3-logo-s{font:500 10px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--stil);margin-top:6px}
.v3-nav{font:500 14px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.02em}
.v3-list a{color:var(--stil)}
.v3-list a[aria-current]{color:var(--ink)}

.v3-hero{position:relative;isolation:isolate;min-height:calc(100vh - 118px);
  padding:clamp(20px,3.5vw,48px) clamp(20px,4vw,56px) clamp(28px,5vw,64px);
  display:grid;align-content:center;gap:calc(var(--u)*3);
  background-image:linear-gradient(178deg,#E6EEF3 0%,#DDE7ED 42%,#CEDCE5 100%)}
/* Het meetraster is een pseudo-element en geen div: een broertje ter grootte
   van de hele hero maakt van elk klein element eronder een satelliet, en dan
   meldt de poort een dashboard waar een compositie staat. */
.v3-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(20,26,31,.07) 0 1px,rgba(0,0,0,0) 1px 56px),
    repeating-linear-gradient(0deg,rgba(20,26,31,.05) 0 1px,rgba(0,0,0,0) 1px 56px);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 70%,rgba(0,0,0,0) 100%)}

.v3-h1{position:relative;z-index:2;margin:0}
.v3-num{display:block;font:700 clamp(5.4rem,30vw,27rem)/.78 'Instrument Sans',system-ui,sans-serif;
  letter-spacing:-.055em;color:var(--ink);min-width:0}
.v3-deg{font-size:.22em;letter-spacing:-.01em;vertical-align:.9em;margin-left:.06em;color:var(--accL)}
.v3-say{display:block;margin-top:calc(var(--u)*2);max-width:20ch;
  font:700 clamp(1.5rem,3.2vw,2.5rem)/1.08 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.03em}

.v3-panel{position:relative;z-index:3;width:min(88vw,400px);justify-self:end;margin-top:calc(var(--u)*-2)}
.v3-img{width:100%;border-radius:var(--r);box-shadow:var(--sh);transform:rotate(-3.5deg);
  filter:saturate(1.04) contrast(1.05)}
.v3-chip{position:absolute;right:-10px;bottom:-22px;z-index:4;padding:10px 16px;border-radius:var(--r);
  background:#fff;border:1px solid #B6C8D3;box-shadow:var(--sh)}
.v3-chip-n{display:block;font:700 22px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.03em}
.v3-chip-l{display:block;margin-top:4px;font:500 10px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--stil)}

.v3-lead{position:relative;z-index:2;max-width:44ch;color:var(--stil);font-size:clamp(1rem,1.4vw,1.1rem)}
.v3-btn{position:relative;z-index:2;justify-self:start;display:inline-flex;align-items:center;min-height:52px;padding:0 28px;
  border-radius:var(--r);background:var(--acc);color:#fff;text-decoration:none;box-shadow:var(--sh);
  font:700 16px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.01em;
  transition:transform .18s var(--e),background-color .18s var(--e)}
.v3-btn:hover{transform:translateY(-2px);background:#0A4E8B}

/* de temperatuurschaal: het signature device */
.v3-scale{position:relative;z-index:2;display:flex;align-items:center;gap:12px;
  font:500 11px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.14em;color:var(--stil)}
.v3-scale-bar{position:relative;flex:1 1 auto;height:8px;border-radius:999px;
  background:linear-gradient(90deg,#9FC4DA,#0F72C9 62%,#0B4C86)}
.v3-scale-mark{position:absolute;left:62%;top:50%;width:4px;height:30px;border-radius:2px;
  background:var(--ink);transform:translate(-50%,-50%)}
.v3-scale-v{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  font:700 12px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink)}

.v3-strip{background:var(--veld2);padding:clamp(40px,7vw,80px) clamp(20px,4vw,56px);border-top:1px solid #A8BFCC}
.v3-h2{font:700 clamp(1.6rem,3vw,2.3rem)/1.05 'Instrument Sans',system-ui,sans-serif;letter-spacing:-.035em;margin-bottom:calc(var(--u)*2)}
.v3-note{max-width:62ch;margin-bottom:calc(var(--u)*3);color:#3D4A53}
.v3-open{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:12px;padding:14px 20px;border-radius:var(--r);
  border:2px dashed #8FA8B6;background:#DCE8EF}
.v3-open-l{font:500 11px/1 'Instrument Sans',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--stil)}
.v3-open-v{color:var(--acc);font-weight:700}
.v3-foot{padding:26px clamp(20px,4vw,56px) 84px;color:var(--stil);font-size:14px;border-top:1px solid #A8BFCC}
.v3-foot a{color:var(--ink)}

/* Op breed scherm blijft dit één kolom: het getal is met vw gezet, dus zodra
   het in een eigen rasterkolom zou komen te staan rekent die kolom niet mee en
   loopt het getal de pagina uit. Het paneel ligt er daarom absoluut overheen. */
@media (min-width:1000px){
  .v3-hero{padding-right:clamp(56px,8vw,120px);row-gap:calc(var(--u)*4)}
  .v3-panel{position:absolute;right:clamp(24px,4vw,56px);top:50%;
    transform:translateY(-46%);width:clamp(360px,38vw,620px);margin:0;justify-self:auto}
  .v3-h1{max-width:none}
  .v3-say{max-width:16ch}
  .v3-lead{max-width:40ch}
  .v3-scale{max-width:min(48vw,690px)}
}

/* =====================================================================
   v4 · ONDER DE VLOER
   veld warm zand · accent kopergroen · Literata
   ===================================================================== */
#version-v4{
  --u:8px;
  --veld:#E9DDC7; --veld2:#F3EADA;
  --ink:#231C12; --stil:#6A5B47;
  --acc:#1F5F51; --accL:#2E7D6B;
  --r:14px;
  --sh:0 24px 54px rgba(35,28,18,.32);
  --e:cubic-bezier(.2,.6,.3,1);
  background:var(--veld);color:var(--ink);
  font:400 17px/1.62 'Figtree',system-ui,sans-serif;
}
.v4-head{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:calc(var(--u)*3) clamp(20px,4vw,56px);position:relative;z-index:20}
.v4-logo{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.v4-logo-w{font:700 28px/1 'Literata',Georgia,serif;font-variation-settings:'opsz' 16;letter-spacing:-.02em}
.v4-logo-a{color:var(--acc)}
.v4-logo-s{font:600 10px/1 'Figtree',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--stil);margin-top:6px}
.v4-nav{font:600 14px/1 'Figtree',system-ui,sans-serif;letter-spacing:.02em}
.v4-list a{color:var(--stil)}
.v4-list a[aria-current]{color:var(--ink)}

.v4-hero{position:relative;isolation:isolate;min-height:calc(100vh - 118px);
  display:grid;grid-template-rows:auto auto 1fr;
  background-image:linear-gradient(180deg,#EFE5D2 0%,#E9DDC7 58%,#DFD0B4 100%)}
.v4-shot{position:relative;z-index:1;height:min(40vh,340px);overflow:hidden}
.v4-img{width:100%;height:100%;object-fit:cover;object-position:52% 46%;
  filter:saturate(1.08) contrast(1.06)}
.v4-bar{position:absolute;left:0;bottom:0;width:100%;height:10px;background:var(--accL);z-index:2}
.v4-card{position:absolute;z-index:3;right:clamp(14px,4vw,34px);top:clamp(14px,3vw,26px);
  padding:15px 19px;border-radius:var(--r);background:#1F5F51;box-shadow:var(--sh)}
.v4-card-t{display:block;font:600 10px/1 'Figtree',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#B8DDD3;margin-bottom:9px}
.v4-card-l{display:block;font:600 15px/1.5 'Figtree',system-ui,sans-serif;color:#F2EEE4}
.v4-card-on{color:#A6E0CE;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

.v4-plate{position:relative;z-index:4;margin:-34px clamp(20px,4vw,56px) 0 0;
  background:var(--veld2);border-radius:0 var(--r) var(--r) 0;box-shadow:var(--sh);
  padding:clamp(20px,3.5vw,34px) clamp(20px,4vw,44px)}
.v4-h1{font:700 clamp(2.5rem,6.6vw,5.4rem)/1.0 'Literata',Georgia,serif;
  font-variation-settings:'opsz' 22;letter-spacing:-.025em;max-width:15ch;min-width:0}
.v4-say{position:relative;z-index:2;padding:calc(var(--u)*4) clamp(20px,4vw,56px) clamp(28px,5vw,56px);
  display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*2)}
.v4-kick{font:600 12px/1 'Figtree',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.v4-lead{max-width:46ch;color:var(--stil);font-size:clamp(1rem,1.4vw,1.15rem)}
.v4-btn{display:inline-flex;align-items:center;min-height:54px;padding:0 30px;border-radius:999px;
  background:var(--accL);color:#fff;text-decoration:none;box-shadow:var(--sh);
  font:600 17px/1 'Figtree',system-ui,sans-serif;margin-top:calc(var(--u)*1);
  transition:transform .26s var(--e),background-color .26s var(--e)}
.v4-btn:hover{transform:translateY(-3px);background:var(--acc)}

.v4-strip{background:var(--acc);color:#F2EEE4;padding:clamp(40px,7vw,80px) clamp(20px,4vw,56px)}
.v4-h2{font:700 clamp(1.6rem,3vw,2.3rem)/1.1 'Literata',Georgia,serif;font-variation-settings:'opsz' 18;letter-spacing:-.02em;margin-bottom:calc(var(--u)*2)}
.v4-note{max-width:62ch;margin-bottom:calc(var(--u)*3);color:#D8E5DF}
.v4-open{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:12px;padding:14px 20px;border-radius:var(--r);
  border:2px dashed #6E9C90;background:rgba(0,0,0,.16)}
.v4-open-l{font:600 11px/1 'Figtree',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#BCD3CB}
.v4-open-v{color:#fff;font-weight:600}
.v4-foot{padding:26px clamp(20px,4vw,56px) 84px;color:var(--stil);font-size:14px;background:var(--veld);border-top:1px solid #CBB794}
.v4-foot a{color:var(--ink)}

@media (min-width:720px){
  .v4-hero{grid-template-rows:1fr;grid-template-columns:minmax(0,1fr)}
  .v4-shot{position:absolute;inset:0;height:auto;z-index:0}
  .v4-img{object-position:56% 52%}
  .v4-bar{width:10px;height:100%;left:auto;right:clamp(28px,7vw,140px);top:0}
  .v4-card{right:auto;left:clamp(24px,5vw,64px);top:auto;bottom:clamp(24px,5vw,56px)}
  .v4-plate{position:relative;z-index:4;grid-row:1;align-self:center;justify-self:start;
    margin:0;width:min(62vw,760px);border-radius:0 var(--r) var(--r) 0;
    background:linear-gradient(96deg,rgba(243,234,218,.97) 62%,rgba(243,234,218,.9) 100%)}
  /* Vanaf hier ligt de tekst op de foto, dus krijgt hij zijn eigen vlak: een
     kopergroen paneel. Zo staat er geen letter rechtstreeks op fotografie. */
  /* Bewust dezelfde creme als de kopplaat: samen lezen ze als een blok, en de
     knop kan dan het kopergroen dragen dat verder niets op de pagina heeft.
     Een cremekleurige knop op een zandveld telt niet als gevulde knop, en dat
     is terecht: hij valt niet op. */
  .v4-say{position:absolute;z-index:5;right:clamp(20px,4vw,44px);bottom:clamp(20px,4vw,48px);
    left:auto;max-width:min(56vw,400px);padding:24px 28px;border-radius:var(--r);
    background:rgba(243,234,218,.96);border:1px solid #CBB794;box-shadow:var(--sh)}
}
@media (min-width:1000px){
  .v4-hero{min-height:calc(100vh - 122px)}
  .v4-plate{width:min(56vw,720px);padding:clamp(28px,3.4vw,46px) clamp(28px,4vw,56px)}
  .v4-say{right:clamp(28px,7vw,140px);bottom:clamp(34px,6vw,72px);padding:26px 30px}
  .v4-bar{right:auto;left:clamp(28px,7vw,140px)}
  .v4-card{left:auto;right:clamp(28px,7vw,140px);top:clamp(28px,6vw,86px);bottom:auto}
}

/* =====================================================================
   BEWEGING
   Alles staat binnen no-preference: onder reduced motion wordt er geen
   enkele animatie aangemaakt en blijft er dus ook niets verborgen achter.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  @keyframes v1-adem{0%,100%{opacity:.55}50%{opacity:1}}
  @keyframes v1-op{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes v1-fig{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
  .v1-hero::after{animation:v1-adem 22s var(--e) infinite}
  .v1-kick{animation:v1-op .5s var(--e) both}
  .v1-h1{animation:v1-op .62s var(--e) .06s both}
  .v1-lead{animation:v1-op .62s var(--e) .14s both}
  .v1-act{animation:v1-op .62s var(--e) .22s both}
  .v1-fig{animation:v1-fig .74s var(--e) .1s both}
  .v1-chip{animation:v1-op .6s var(--e) .5s both}

  @keyframes v2-plaat{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
  @keyframes v2-veeg{0%{background-position:-40% 0}100%{background-position:140% 0}}
  @keyframes v2-op{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .v2-p1,.v2-m1{animation:v2-plaat .66s var(--e) .04s both}
  .v2-p2,.v2-m2{animation:v2-plaat .66s var(--e) .13s both}
  .v2-p3,.v2-m3{animation:v2-plaat .66s var(--e) .22s both}
  .v2-p4,.v2-m4{animation:v2-plaat .66s var(--e) .31s both}
  .v2-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(100deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 62%);
    background-size:220% 100%;animation:v2-veeg 14s linear infinite}
  .v2-h1{animation:v2-op .55s var(--e) .1s both}
  .v2-sub,.v2-lead,.v2-btn{animation:v2-op .55s var(--e) .2s both}
  .v2-tag{animation:v2-op .55s var(--e) .46s both}

  @keyframes v3-mark{from{left:24%}to{left:62%}}
  @keyframes v3-net{from{opacity:0}to{opacity:1}}
  @keyframes v3-op{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes v3-paneel{from{opacity:0;transform:rotate(-8deg) translateY(20px)}to{opacity:1;transform:rotate(-3.5deg)}}
  .v3-hero::before{animation:v3-net 1.1s var(--e) both}
  .v3-h1{animation:v3-op .5s var(--e) both}
  .v3-img{animation:v3-paneel .7s var(--e) .12s both}
  .v3-chip{animation:v3-op .5s var(--e) .46s both}
  .v3-lead,.v3-btn{animation:v3-op .5s var(--e) .18s both}
  .v3-scale-mark{animation:v3-mark .9s var(--e) .3s both}

  @keyframes v4-adem{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
  @keyframes v4-op{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes v4-plaat{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
  .v4-img{animation:v4-adem 24s ease-in-out infinite}
  .v4-plate{animation:v4-plaat .7s var(--e) .08s both}
  .v4-say{animation:v4-op .6s var(--e) .26s both}
  .v4-card{animation:v4-op .6s var(--e) .44s both}
}