/* ============================================================
   STUDIO ELVN
   De stijl van de hele site.

   Het idee: Zwitserse kapitalen op hun strakst, zo groot dat ze
   de rand raken, met daartussen een enkel woord in een zwierige
   cursief en aantekeningen in handschrift in de kantlijn.
   Kastanje, papier en creme dragen het beeld. Oranje komt alleen
   in kleine hoeveelheden terug, als accent.
   ============================================================ */

/* ---------- letters, zelf gehost ---------- */
/* Gabarito staat op de koppen. Breul Grotesk, waar we naar zochten, heeft
   een weblicentie nodig en de demobestanden missen alle Nederlandse
   letters. Gabarito komt er het dichtst bij: dezelfde ronde bogen, dezelfde
   smalle E en T tegen een brede O, en net zo dicht op elkaar. Vrij te
   gebruiken, ook zakelijk, en de gewichtsas loopt van 400 tot 900.
   Archivo blijft staan voor de lopende tekst. */
@font-face{
  font-family:"Gabarito";font-style:normal;font-weight:400 900;
  font-display:swap;src:url("../fonts/gabarito-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Gabarito";font-style:normal;font-weight:400 900;
  font-display:swap;src:url("../fonts/gabarito-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;
  font-display:swap;src:url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;
  font-display:swap;src:url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Serif";font-style:normal;font-weight:400;
  font-display:swap;src:url("../fonts/instrument-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";font-weight:200 800;font-display:swap;
  src:url("../fonts/newsreader-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Instrument Serif";font-style:italic;font-weight:400;
  font-display:swap;src:url("../fonts/instrument-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --kastanje:#3D0000;
  --creme:#DEDAD0;
  --grijs:#4A4641;
  --zwart:#0A0A0A;
  --wit:#FFFFFF;
  --papier:#F6F4EF;

  /* Zacht warm bruin als accent. Rustiger dan het felle oranje en
     daardoor editorialer, en het haalt op wit 6,96:1 zodat het ook in
     kleine tekst mag staan. Het oranje haalde daar 3,27:1.
     Op kastanje valt dit bruin juist weg, dus daarvoor staat er een
     lichte variant klaar die daar 8,3:1 haalt. */
  /* Uit de kastanje-familie, niet het taupe-bruin van hiervoor. Het palet
     is zwart, wit en kastanje; een neutraal grijsbruin was daarin de vierde
     kleur. Dit is dezelfde rode ondertoon als #3D0000, alleen lichter, en
     haalt 8,8:1 op wit. */
  --accent:#6B3A3A;
  --accent-licht:#D8B9B0;   /* dezelfde familie, voor op kastanje */

  --rule:rgba(61,0,0,.14);
  --rule-soft:rgba(61,0,0,.08);
  --rule-creme:rgba(222,218,208,.22);
  --greige:#EFEDE8;
  --fast:.3s;

  /* Archivo draagt de koppen: strak, smal en in kapitalen. Newsreader
     is er alleen nog voor de sierlijke cursief, het enkele woord dat
     uit de rij springt. Newsreader in kapitalen op gewicht 700 werd
     te dik en te log, en dat is precies wat er weg moest.
     Hier komt Breul Grotesk zodra de webfontlicentie er is. */
  /* Drie families, meer niet. Gabarito draagt de koppen en de lopende
     tekst; Archivo doet alleen de wijd gespatieerde labels als 01 // WAT
     IK DOE; Newsreader cursief is het enige accent, voor woorden als
     partner, verhaal en feels like you. Karumbi staat los en wordt alleen
     gebruikt voor de handtekening op About me. */
  --display:"Gabarito","Archivo",system-ui,sans-serif;
  --label:"Archivo",system-ui,sans-serif;
  --sier:"Newsreader",Georgia,serif;
  --sans:var(--label);
  /* Wees allemaal dezelfde schreefletter; Instrument Serif is eruit. */
  --editorial:var(--sier);
  --hand:"karumbi",cursive;

  --ease:cubic-bezier(.22,1,.36,1);
  /* ============================================================
     HET SYSTEEM
     Editorial hospitality: luxe in de basis, creativiteit in de
     compositie, energie in de details. Alles hieronder is een knop
     die overal tegelijk draait, zodat een pagina niet zijn eigen
     maten kan gaan verzinnen.
     ============================================================ */

  /* ---- raster en breedtes ---- */
  --kolom:12;                          /* twaalf kolommen op desktop */
  --breed:1440px;                      /* de buitenmaat van elke pagina */
  --lees:640px;                        /* lopende tekst, nooit breder */
  --lees-smal:520px;                   /* een korte inleiding naast een kop */
  --gut:clamp(18px,4.4vw,64px);        /* buitenmarge */
  --kier:clamp(12px,1.6vw,28px);       /* tussenruimte in een raster */

  /* ---- verticaal ritme: vier maten, meer niet ---- */
  --ruim-xs:clamp(12px,1.4vw,20px);
  --ruim-s:clamp(20px,2.6vw,36px);
  --ruim-m:clamp(34px,4.6vw,68px);
  --ruim-l:clamp(56px,7.4vw,112px);
  --ruim-xl:clamp(96px,14vw,240px);    /* tussen twee secties */

  /* ---- rondingen ---- */
  --rond-0:0;                          /* full bleed en grote editorial beelden */
  --rond-s:6px;                        /* labels, kleine vlakken */
  --rond-m:14px;                       /* kaarten en kleinere foto's */
  --rond-l:22px;                       /* losse beelden in een collage */

  /* ---- het felle accent, alleen als klein detail ---- */
  /* Stond op #B23A1E, een rood-oranje. Dat was naast zwart, wit en
     kastanje een vierde kleur, en juist die maakte de pagina onrustig:
     elk kaartnummer, elk cijfer en elke zweefkleur sprong eruit. Nu
     dezelfde lichtere kastanje als het accent, zodat het palet weer op
     drie kleuren staat. 8,8:1 op wit. */
  --vonk:#6B3A3A;

  /* De secties stonden op de grootste ruimte uit het stelsel en dat
     werd op de voorpagina een half leeg scherm tussen elk blok. */
  --sec:clamp(72px,9.4vw,148px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--wit);color:var(--kastanje);
  font-family:var(--display);
  font-size:clamp(16.5px,1.15vw,18.2px);line-height:1.74;
  /* Dezelfde letter als de koppen, alleen licht gezet en met de letters
     iets verder uit elkaar. Dat maakt het rustiger en creatiever dan de
     strak op elkaar gezette variant die er eerst stond. */
  font-variation-settings:"wght" 400;letter-spacing:.008em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto hoort erbij. Elke foto heeft een height-attribuut staan
   zodat de browser tijdens het laden al ruimte reserveert, maar dat
   attribuut wint van aspect-ratio in css. Zonder deze regel werd een
   portret van 1400 pixels ook echt 1400 pixels hoog uitgerekt en zag je
   een halve meter lege muur boven het onderwerp. Regels die wel een
   hoogte willen, zoals de banner, staan op een klasse en winnen hiervan. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--breed);margin:0 auto;padding:0 var(--gut)}

/* ============ TYPOGRAFIE ============ */
/* Zo strak als het kan: normale breedte, zwaar, en de letters bijna
   tegen elkaar. Dat is wat een grotesk duur maakt op groot formaat. */
.mega{
  font-family:var(--display);
  font-size:clamp(36px,5vw,74px);line-height:.9;letter-spacing:-.038em;
  text-transform:uppercase;font-variation-settings:"wght" 800;
  color:var(--kastanje);
}
/* De sectiekoppen van de voorpagina. Stonden op 82 pixels en gewicht
   900 en vulden daarmee een halve pagina per kop. Nu een maat kleiner
   en een graad lichter, zodat de pagina in één oogopslag te overzien is
   en de banner de enige plek blijft waar de letters echt groot zijn. */
.groot{
  font-family:var(--display);
  font-size:clamp(29px,3.4vw,50px);line-height:.96;letter-spacing:-.034em;
  text-transform:uppercase;font-variation-settings:"wght" 800;
  color:var(--kastanje);
}
.mid{
  font-family:var(--display);
  font-size:clamp(21px,2.2vw,30px);line-height:1.06;letter-spacing:-.026em;
  text-transform:uppercase;font-variation-settings:"wght" 800;
  color:var(--kastanje);
}
/* Het enkele woord dat uit de rij springt. */
/* Het enkele woord dat uit de rij springt.

   Op koptekstformaat botste de schreefcursief met de zware kapitalen
   ernaast: twee families die niets met elkaar te maken hebben. Daar
   staat nu dezelfde letter, maar dun en in kleine letters. Het verschil
   zit in gewicht en kleur, niet in een vreemde familie.
   In de kaarten en citaten blijft de schreefcursief wel: daar staat hij
   klein en op zichzelf, en daar werkt hij. */
/* font-variation-settings op normal is hier het hele punt. Zonder die
   regel erft het schuine woord de dikte van de kop eromheen, en Newsreader
   is een variabele letter: dan wordt "contract" 900 en "voor gastvrijheid"
   400, terwijl het dezelfde letter is. Ze zagen er daardoor anders uit. */
.ital{
  font-family:var(--sier);font-style:italic;
  font-variation-settings:normal;font-weight:400;
  text-transform:none;letter-spacing:-.02em;color:var(--accent);
}
/* Geen aparte behandeling meer voor de grootste koppen. Partner, verhaal
   en achter het merk stonden in Gabarito licht en dat las als een tweede
   accentletter naast de cursief van feels like you. Nu overal dezelfde
   cursief, zodat er maar een accent is. */
.mega .ital{font-size:.92em}
.groot .ital{font-size:.96em}
.mid .ital{font-size:.94em}
/* Op een smal scherm past de cursieve staart niet meer achter de kapitalen
   en breekt hij middenin af. Daar krijgt hij zijn eigen regel. */
@media(max-width:680px){
  .mega .ital{display:block;font-size:.74em;margin-top:.04em}
}
.hand{font-family:var(--editorial);font-style:italic;font-variation-settings:normal;font-weight:400;letter-spacing:0;text-transform:none;color:var(--kastanje)}
.zwart{color:var(--zwart)}
.wit{color:var(--papier)}

.label{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;
  font-variation-settings:"wght" 500;color:var(--grijs);
}
.label b{font-variation-settings:"wght" 700;color:var(--accent);font-weight:400}
/* Een inleiding mag opvallen, maar stond hier bijna op kopformaat.
   Nu een halve stap boven de lopende tekst. */
.lede{font-size:clamp(16.8px,1.24vw,19px);line-height:1.62;max-width:var(--lees-smal)}
.body{color:var(--grijs);max-width:var(--lees)}
.body + .body{margin-top:1em}

/* ============ KOP ============ */
.kop{position:sticky;top:0;z-index:300;background:var(--wit)}

.kop-in{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--rule-soft);
}
/* Het merkteken is bewust groter dan eerst. De twee schuine strepen
   rechtsboven zijn de elf, en die vielen weg zodra het logo onder de
   honderd pixels kwam. */
.merk{display:block;width:clamp(104px,9vw,148px);flex:none;line-height:0}
.merk img{width:100%;height:auto}
.nav{display:flex;gap:clamp(14px,1.7vw,30px)}
.nav a{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--grijs);padding:6px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--accent);transition:right .45s var(--ease)}
.nav a:hover{color:var(--accent)}
.nav a:hover::after{right:0}
.nav-knop{
  display:none;background:none;border:1px solid var(--rule);padding:11px 15px;
  font-family:var(--sans);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--kastanje);cursor:pointer;position:relative;z-index:320;
}
@media(max-width:900px){
  .nav{
    position:fixed;inset:0;background:var(--kastanje);z-index:310;
    flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:flex-start;
    gap:4px;padding:0 var(--gut);overflow-y:auto;
    transform:translateY(-100%);visibility:hidden;pointer-events:none;
    transition:transform .6s var(--ease),visibility 0s linear .6s;
  }
  .nav.open{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .6s var(--ease),visibility 0s}
  .nav a{font-size:clamp(24px,7vw,40px);letter-spacing:-.03em;text-transform:uppercase;color:var(--creme);padding:9px 0;font-variation-settings:"wght" 800}
  .nav a::after{display:none}
  .nav a:hover{color:var(--wit)}
  .nav-knop{display:block}
}

/* ============ BANNER ============ */
/* Er ligt bewust geen donkere waas over de foto. Zo'n laag maakt de kop
   wel leesbaar maar verandert de kleur van het beeld, en het beeld moet
   blijven zoals het geschoten is. Daarom staat de kop eronder, op papier,
   en loopt de foto van rand tot rand. */
.banner{position:relative;height:clamp(300px,58vh,620px);overflow:hidden;background:var(--creme)}
.banner-beeld{position:absolute;inset:-9% 0;will-change:transform}
.banner-beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}

.titelblok{padding:clamp(20px,3.2vw,44px) 0 clamp(22px,3.4vw,48px)}
.banner-voet{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin-top:clamp(16px,2.2vw,30px);
}
.scrolltip{display:flex;align-items:center;gap:9px;font-size:8.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--grijs)}
.scrolltip i{display:block;width:1px;height:26px;background:var(--rule);position:relative;overflow:hidden}
.scrolltip i::after{content:"";position:absolute;inset:0;background:var(--accent);animation:zak 2.1s var(--ease) infinite}
@keyframes zak{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ============ LOPENDE BAND ============ */
.band{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(11px,1.3vw,17px) 0;overflow:hidden;background:var(--wit);
}
.band-rij{display:flex;width:max-content;animation:schuif 34s linear infinite}
.band:hover .band-rij{animation-play-state:paused}
/* De balk stond in dikke kapitalen en dat oogde log. Klein en wijd
   gespatieerd leest als een agency-detail in plaats van als een
   reclamestrook. */
.band span{
  font-family:var(--display);
  font-size:clamp(10.5px,1vw,13px);letter-spacing:.42em;text-transform:uppercase;
  font-variation-settings:"wght" 600;color:var(--kastanje);
  padding-right:clamp(26px,3vw,48px);white-space:nowrap;
}
.band span i{color:var(--accent);font-style:normal;padding-right:clamp(20px,2.4vw,38px)}
@keyframes schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ RITME ============ */
.sec{padding:var(--sec) 0 0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);align-items:start}
@media(max-width:900px){.duo{grid-template-columns:1fr;gap:22px}}
.streep{height:1px;background:var(--rule);margin:clamp(20px,3vw,38px) 0}

/* De dikke punt achter een kop. Staat in de kastanje, zodat het een
   accent is en niet zomaar een leesteken dat je over het hoofd ziet. */
.punt{font-weight:inherit;color:var(--accent)}

/* De handgeschreven notitie op een lichte ondergrond. De krabbel op de
   kastanje vlakken staat in de lichte kastanje; hier moet hij donker,
   anders valt hij weg op het papier. */
.handnoot{
  font-family:var(--hand);color:var(--accent);
  font-size:clamp(26px,2.8vw,40px);line-height:1.05;
  margin-top:clamp(24px,3vw,34px);
  rotate:-2deg;transform-origin:left center;
  /* block met fit-content in plaats van inline-block: anders kroop de
     link erachter op dezelfde regel */
  display:block;width:fit-content;
}

/* De kantlijnnotitie: hoort bij de tekst, staat er net naast. */
.notitie{
  /* Stond in het handschrift, maar dat werd op deze maat slecht
     leesbaar. De schreefcursief houdt hetzelfde terloopse gevoel en is
     wel te lezen. Kastanje in plaats van oranje, want oranje haalt op
     papier maar 2,97:1 en dit is leestekst, geen versiering. */
  font-family:var(--editorial);font-style:italic;color:var(--kastanje);
  font-size:clamp(24px,3vw,40px);line-height:1.15;
  display:inline-block;rotate:-2.6deg;transform-origin:left center;
}

/* ============ ELF ============ */
/* Het cijfer stond eerst als bleke schim achter de tekst. Zelfs op tien
   procent dekking bleven die enorme stokken door de letters heen lopen.
   Nu staan ze onder elkaar: het cijfer is zelf het accent, de tekst
   heeft zijn eigen ruimte. */
.elf{text-align:center;display:flex;flex-direction:column;align-items:center}
.elf-cijfer{
  font-family:var(--display);
  font-size:clamp(84px,22vw,320px);line-height:.78;letter-spacing:-.055em;
  font-variation-settings:"wght" 900;color:var(--accent);
  user-select:none;white-space:nowrap;
}
.elf-tekst{
  display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(20px,3.4vw,50px);
}
.elf-tekst .body{max-width:46ch}
.elf-tekst .groot{max-width:18ch}

/* ============ VORMEN ============ */
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(28px,4vw,56px)}
@media(max-width:900px){.drie{grid-template-columns:1fr}}
.kaart{background:var(--wit);padding:clamp(24px,2.8vw,42px);display:flex;flex-direction:column;transition:background .55s var(--ease),color .55s var(--ease)}
.kaart:hover{background:var(--wit)}
.kaart .nr{font-family:var(--display);font-size:clamp(34px,4vw,58px);line-height:1;letter-spacing:-.05em;font-variation-settings:"wght" 900;color:var(--accent);margin-bottom:clamp(16px,2.4vw,30px)}
.kaart .mid{margin-bottom:9px}
.kaart .prijs{font-family:var(--editorial);font-size:clamp(18px,1.9vw,25px);color:var(--zwart)}
.kaart .belofte{
  font-family:var(--editorial);font-style:italic;font-size:clamp(19px,2vw,27px);line-height:1.25;
  color:var(--accent);margin-top:clamp(18px,2.4vw,30px);padding-top:clamp(15px,2vw,22px);
  border-top:1px solid var(--rule);
}
.kaart p{color:var(--grijs);font-size:16.7px;line-height:1.62;margin-top:14px}
.kaart .erbij{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-top:auto;padding-top:clamp(18px,2.4vw,28px);font-variation-settings:"wght" 600}

/* ============ ZIJWAARTSE STRIP ============ */
.strip{
  display:flex;gap:clamp(8px,1vw,16px);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;padding:clamp(26px,4vw,54px) var(--gut) 8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.strip::-webkit-scrollbar{display:none}
.strip figure{flex:none;width:clamp(210px,25vw,360px);scroll-snap-align:start;margin:0}
@media(max-width:820px){.strip figure{width:76vw}}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.1s var(--ease)}
.strip figure:hover img{transform:scale(1.04)}
.strip figcaption{font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--grijs);padding-top:9px}
.strip figure:nth-child(even){margin-top:clamp(18px,3vw,46px)}

/* ============ VLAK ============ */
.vlak{background:var(--kastanje);color:var(--creme);padding:clamp(30px,5vw,80px) clamp(22px,3.4vw,60px)}
.vlak .groot,.vlak .mid{color:var(--creme)}
.vlak .body{color:rgba(222,218,208,.76)}
.vlak .label{color:rgba(222,218,208,.55)}
.vlak .lede{color:var(--creme)}
.vlak .notitie{color:var(--creme)}
.vlak .ital{color:var(--creme)}

/* ============ KNOPPEN ============ */
.knop{
  display:inline-block;font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;font-variation-settings:"wght" 600;padding:20px 36px;
  border:1px solid currentColor;color:var(--kastanje);cursor:pointer;background:none;
  position:relative;overflow:hidden;transition:color .5s var(--ease);
}
.knop span{position:relative;z-index:2}
.knop::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .5s var(--ease)}
.knop:hover{color:var(--papier);border-color:var(--accent)}
.knop:hover::before{transform:translateY(0)}
.knop-vol{background:var(--accent);border-color:var(--accent);color:var(--papier)}
.knop-vol::before{background:var(--kastanje)}
.vlak .knop{color:var(--creme)}
.vlak .knop:hover{color:var(--papier)}
.knoprij{display:flex;gap:10px;flex-wrap:wrap}

/* De pijl was een streepje dat langer werd. Uit haar eigen portfoliodeck
   komt de rondje-pijl: een dunne cirkel met een pijl erin. Steviger, en
   het is een knop in plaats van een streepje naast tekst. */
.pijl{
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:14px;margin-top:24px;
}
.pijl i{
  display:grid;place-items:center;flex:none;
  width:clamp(34px,2.6vw,42px);height:clamp(34px,2.6vw,42px);
  border:1px solid var(--accent);border-radius:50%;
  transition:background .45s var(--ease),color .45s var(--ease);
}
.pijl i::before{
  content:"\2192";font-style:normal;font-family:var(--label);
  font-size:clamp(14px,1.1vw,17px);line-height:1;
}
.pijl:hover i{background:var(--accent);color:var(--wit)}

/* Op een kastanje vlak moet de cirkel juist licht zijn. */
.werkwijze .pijl,.slotblok .pijl,.beeldband .pijl{color:var(--accent-licht)}
.werkwijze .pijl i,.slotblok .pijl i,.beeldband .pijl i{border-color:var(--accent-licht)}
.werkwijze .pijl:hover i,.slotblok .pijl:hover i,.beeldband .pijl:hover i{background:var(--accent-licht);color:var(--kastanje)}

/* ============ VOET ============ */
footer.voet{margin-top:var(--sec);border-top:1px solid var(--rule);padding:clamp(34px,5vw,70px) 0 26px}
footer.voet .voet-boven{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(22px,3vw,50px)}
@media(max-width:760px){footer.voet .voet-boven{grid-template-columns:1fr;gap:26px}}
footer.voet h4{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:13px;font-variation-settings:"wght" 600}
footer.voet a{display:block;font-size:16.2px;color:var(--grijs);padding:5px 0;transition:color .3s var(--ease)}
footer.voet a:hover{color:var(--accent)}
footer.voet .voet-merk{width:clamp(104px,9vw,140px);height:auto;margin-bottom:16px}
footer.voet .voet-onder{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(28px,4vw,52px);padding-top:20px;border-top:1px solid var(--rule);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--grijs)}

/* ============ BEWEGING ============ */
/* Alles wat beweegt zit achter de klasse .js, zodat de pagina zonder
   JavaScript gewoon leesbaar blijft in plaats van leeg. */
.js .op{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .op.in{opacity:1;transform:none}
.js .op[data-d="1"]{transition-delay:.09s}
.js .op[data-d="2"]{transition-delay:.18s}
.js .op[data-d="3"]{transition-delay:.27s}

/* Regel voor regel omhoog schuiven vanachter een masker. */
.js .rgl{display:block;overflow:hidden}
.js .rgl > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.js .rgl.in > span{transform:none}
.js .rgl:nth-of-type(2) > span{transition-delay:.08s}
.js .rgl:nth-of-type(3) > span{transition-delay:.16s}

/* Woord voor woord, voor de losse zinnen. */
.js .wrd span{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .wrd.in span{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .js .op,.js .rgl > span,.js .wrd span{opacity:1;transform:none;transition:none}
  .band-rij{animation:none}
  .scrolltip i::after{animation:none}
  .banner-beeld{transform:none !important}
}

/* ---------- onderdelen, overgenomen uit het vorige ontwerp ---------- */
/* ============ VLAKKEN ============ */
.plate{background:var(--wit);padding:clamp(26px,4vw,60px) clamp(20px,3.4vw,52px);position:relative}
.plate.creme{background:var(--creme)}
.plate.kast{background:var(--kastanje);color:var(--creme)}
.plate.kast .tag{color:rgba(222,218,208,.6)}
.plate.kast .h-sec,.plate.kast .h-hero{color:var(--creme)}
.plate.kast .body{color:rgba(222,218,208,.76)}
.plate.kast .lede,.plate.kast .quote,.plate.kast .h-sub,.plate.kast .h-min,.plate.kast .zwart{color:var(--creme)}
.plate.kast .hand{color:var(--creme)}
.runners{display:flex;justify-content:space-between;gap:16px;font-size:8.5px;letter-spacing:.38em;text-transform:uppercase;color:var(--grijs);opacity:.85}
.plate.kast .runners{color:rgba(222,218,208,.5)}

/* ============ RITME ============ */
.sec{padding:var(--sec) 0 0}
.sec-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,72px);align-items:end}
@media(max-width:900px){.sec-lead{grid-template-columns:1fr;gap:18px;align-items:start}}
.sec-lead.top{align-items:start}
.rule{height:1px;background:var(--rule);margin:clamp(22px,3vw,40px) 0}

/* ============ GEPLAKTE AFDRUK ============ */
.print{position:relative;background:var(--wit);padding:11px 11px 13px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 34px rgba(0,0,0,.08);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.print img{width:100%;object-fit:cover}
.print figcaption{font-family:var(--editorial);font-style:italic;font-size:19px;line-height:1.2;color:var(--kastanje);text-align:center;padding-top:9px}
.print::before,.print::after{
  content:"";position:absolute;width:70px;height:19px;left:50%;
  background:linear-gradient(175deg,rgba(222,218,208,.72),rgba(206,200,186,.5));
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  clip-path:polygon(3% 8%,97% 0,100% 88%,96% 100%,6% 96%,0 12%);
}
.print::before{top:-10px;transform:translateX(-50%) rotate(-1.6deg)}
.print::after{bottom:-10px;transform:translateX(-50%) rotate(1.2deg)}
.print:hover{transform:rotate(0) translateY(-3px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 22px 48px rgba(0,0,0,.13)}
.tilt-a{transform:rotate(-1.6deg)}
.tilt-b{transform:rotate(1.2deg)}
.tilt-c{transform:rotate(-.7deg)}
/* staande foto in een vierkante uitsnede: hoofd blijft in beeld */
.print.portret img{object-position:50% 16%}
.print.is-empty{box-shadow:none;background:transparent;border:1px dashed var(--rule)}
.print.is-empty::before,.print.is-empty::after{display:none}
.print.is-empty:hover{transform:none}
.print.is-empty figcaption{opacity:.35}
.slot{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;background:rgba(0,0,0,.03);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--grijs)}

/* Groot portret als opening van een verhaal */
.portret-groot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,80px);align-items:center}
@media(max-width:900px){.portret-groot{grid-template-columns:1fr;gap:30px}}
.portret-groot .print{width:100%}
.portret-groot .print img{aspect-ratio:4/5}

/* Verhaal in hoofdstukken */
.verhaal{max-width:62ch}
.verhaal h3{
  font-family:var(--display);
  font-size:clamp(23px,2.4vw,32px);line-height:1.15;letter-spacing:-.018em;
  font-variation-settings:"wght" 800;color:var(--kastanje);
  margin:clamp(34px,4.4vw,58px) 0 12px;
}
.verhaal h3:first-child{margin-top:0}
.verhaal p{color:var(--grijs)}
.verhaal p + p{margin-top:1em}
.verhaal .kick{
  font-family:var(--serif);font-size:clamp(21px,2.2vw,28px);line-height:1.4;
  color:var(--zwart);margin:clamp(30px,4vw,48px) 0;max-width:24ch;
}

/* ---------- beeld in een dunne lijst, zoals in het portfolio ----------
   Rustiger dan de geplakte afdruk. De polaroid blijft bestaan voor de
   momenten waar hij iets toevoegt, maar dit is de standaard geworden. */
.frame{border:1px solid var(--kastanje);padding:clamp(8px,1vw,12px);background:var(--wit);display:block}
.frame img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.frame.vrij img{aspect-ratio:auto}
.frame figcaption{
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--grijs);
  padding-top:10px;text-align:center;
}

/* ---------- schoon raster: beeld strak naast elkaar ---------- */
.grid-clean{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.1vw,16px);align-items:start}
@media(max-width:820px){.grid-clean{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.grid-clean{grid-template-columns:1fr}}
/* Geen vulkleur achter de figuur. Zolang een foto nog laadt zag je
   anders een leeg vak staan, alsof er een beeld ontbrak. */
.grid-clean figure{margin:0;overflow:hidden}
.grid-clean img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  transition:transform 1s var(--ease);
}
.grid-clean figure:hover img{transform:scale(1.03)}
.grid-clean figcaption{
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--grijs);
  padding-top:8px;
}
/* twee liggende beelden mogen breder staan */
.grid-clean .breed{grid-column:span 2}
.grid-clean .breed img{aspect-ratio:3/2}
@media(max-width:460px){.grid-clean .breed{grid-column:span 1}.grid-clean .breed img{aspect-ratio:3/4}}

/* ---------- samenwerkingsvormen ----------
   Drie vormen naast elkaar. Rustig gezet: de prijs staat er wel, maar
   schreeuwt niet. Wat je krijgt staat in de zin erboven, niet in een
   lijst met vinkjes. */
.vormen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);align-items:stretch;margin-top:clamp(30px,4.4vw,60px)}
@media(max-width:1000px){.vormen{grid-template-columns:1fr;gap:16px}}
.vorm{
  background:var(--wit);border:1px solid var(--rule);
  padding:clamp(26px,3vw,42px) clamp(22px,2.4vw,34px);
  display:flex;flex-direction:column;
  transition:border-color .5s var(--ease);
}
.vorm:hover{border-color:var(--kastanje)}
.vorm.leidend{background:var(--kastanje);color:var(--creme);border-color:var(--kastanje)}
.vorm .n{font-size:9.5px;letter-spacing:.28em;color:var(--grijs);margin-bottom:clamp(20px,2.6vw,34px)}
.vorm.leidend .n{color:rgba(222,218,208,.6)}
.vorm h3{
  font-family:var(--display);
  font-size:clamp(22px,2.2vw,30px);line-height:1.05;letter-spacing:-.022em;
  text-transform:uppercase;font-variation-settings:"wght" 800;color:var(--kastanje);
}
.vorm.leidend h3{color:var(--creme)}
.vorm .prijs{
  font-family:var(--serif);font-size:clamp(17px,1.7vw,22px);
  color:var(--zwart);margin-top:8px;
}
.vorm.leidend .prijs{color:var(--creme)}
.vorm .belofte{
  font-family:var(--serif);font-size:clamp(17px,1.8vw,23px);line-height:1.35;
  color:var(--kastanje);margin:clamp(20px,2.6vw,32px) 0 0;
  padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--rule);
}
.vorm.leidend .belofte{color:var(--creme);border-top-color:var(--rule-creme)}
.vorm p{color:var(--grijs);font-size:14px;line-height:1.65;margin-top:14px}
.vorm.leidend p{color:rgba(222,218,208,.78)}
.vorm .erbij{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--kastanje);
  margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-variation-settings:"wght" 600;
}
.vorm.leidend .erbij{color:var(--creme);border-top-color:var(--rule-creme)}
.vorm .btn{margin-top:auto;align-self:flex-start;margin-top:clamp(26px,3vw,38px)}

/* ---------- projecten in drie categorieen ---------- */
.projecten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(30px,4.4vw,60px)}
@media(max-width:900px){.projecten{grid-template-columns:1fr;gap:30px}}
.projecten > div{border-top:2px solid var(--kastanje);padding-top:clamp(18px,2.2vw,26px)}
.projecten h3{
  font-family:var(--display);
  font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;text-transform:uppercase;
  font-variation-settings:"wght" 800;color:var(--kastanje);margin-bottom:10px;
}
.projecten .voor{font-family:var(--serif);font-size:clamp(15px,1.4vw,18px);color:var(--zwart);line-height:1.4;margin-bottom:12px}
.projecten p{color:var(--grijs);font-size:14px;line-height:1.65}

/* ---------- werkwijze in genummerde stappen ---------- */
.werkwijze{list-style:none;margin-top:clamp(24px,3.4vw,44px)}
.werkwijze li{
  display:grid;grid-template-columns:64px 1fr;gap:clamp(16px,2.4vw,34px);
  align-items:start;padding:clamp(16px,2.2vw,26px) 0;border-bottom:1px solid var(--rule);
}
.werkwijze li:first-child{border-top:1px solid var(--rule)}
@media(max-width:600px){.werkwijze li{grid-template-columns:44px 1fr;gap:14px}}
.werkwijze .pijl{
  width:60px;height:34px;border:1px solid var(--kastanje);border-radius:999px;
  display:flex;align-items:center;justify-content:center;color:var(--kastanje);
  transition:background .4s var(--ease),color .4s var(--ease);
}
@media(max-width:600px){.werkwijze .pijl{width:42px;height:26px}}
.werkwijze li:hover .pijl{background:var(--kastanje);color:var(--papier)}
.werkwijze .pijl svg{width:22px;height:9px}
.werkwijze h3{
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  font-variation-settings:"wght" 700;color:var(--kastanje);margin-bottom:6px;
}
.werkwijze p{color:var(--grijs);font-size:14.5px;line-height:1.6;max-width:52ch}

.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,64px);align-items:start;margin-top:clamp(28px,4vw,60px)}
@media(max-width:760px){.row3{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:440px){.row3{grid-template-columns:1fr}}
.row3 .print img{aspect-ratio:3/4}
.row3 > *:nth-child(2){margin-top:clamp(16px,2.6vw,42px)}


/* ============ LIJSTEN ============ */
.svc{list-style:none;border-top:1px solid var(--rule);margin-top:clamp(24px,3.4vw,48px)}
.svc li{display:grid;grid-template-columns:56px 1fr 1.05fr;gap:clamp(14px,2.6vw,44px);align-items:baseline;padding:clamp(18px,2.4vw,32px) 0;border-bottom:1px solid var(--rule);transition:padding-left .5s var(--ease)}
.svc li:hover{padding-left:clamp(8px,1.2vw,16px)}
@media(max-width:820px){.svc li{grid-template-columns:44px 1fr;gap:8px}.svc li p{grid-column:2}}
.svc .n{font-size:9.5px;letter-spacing:.24em;color:var(--grijs)}
.svc p{color:var(--grijs);font-size:13.5px;line-height:1.6}
.svc .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;grid-column:2}
.svc .tags span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--rule);padding:5px 9px;color:var(--grijs)}

.cols{columns:2;column-gap:36px;list-style:none;margin-top:22px}
@media(max-width:560px){.cols{columns:1}}
.cols li{padding:9px 0;border-bottom:1px solid var(--rule-creme);font-size:13.5px;break-inside:avoid}
.plate:not(.kast) .cols li{border-bottom-color:var(--rule)}

.facts{list-style:none;margin-top:26px;border-top:1px solid var(--rule)}
.facts li{display:grid;grid-template-columns:clamp(88px,11vw,148px) 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
@media(max-width:560px){.facts li{grid-template-columns:1fr;gap:2px}}
.facts .k{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--grijs);padding-top:5px}

.versus{list-style:none;border-top:1px solid var(--rule);margin-top:clamp(20px,3vw,32px)}
.versus li{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(10px,1.8vw,24px);align-items:center;padding:clamp(13px,1.7vw,19px) 0;border-bottom:1px solid var(--rule)}
.versus .niet{color:var(--grijs);font-size:13.5px;text-decoration:line-through;text-decoration-color:rgba(91,87,81,.45)}
.versus .pijl{color:var(--kastanje);opacity:.4;font-size:11px}
.versus .wel{font-variation-settings:"wght" 700;font-size:clamp(14px,1.35vw,17px);line-height:1.25}
@media(max-width:600px){.versus li{grid-template-columns:1fr;gap:3px}.versus .pijl{display:none}}

/* Drop het bij mij: wat je brengt en wat ik ermee doe */
.drop{list-style:none;border-top:1px solid var(--rule);margin-top:clamp(20px,3vw,32px)}
.drop li{
  display:grid;grid-template-columns:1fr 20px 1.15fr;gap:clamp(10px,1.8vw,22px);
  align-items:baseline;padding:clamp(12px,1.6vw,18px) 0;border-bottom:1px solid var(--rule);
}
.drop .q{font-family:var(--serif);font-size:clamp(15px,1.5vw,19px);color:var(--kastanje);line-height:1.3}
.drop .pijl{color:var(--kastanje);opacity:.35;font-size:11px}
.drop .a{font-size:clamp(13.5px,1.2vw,15.5px);color:var(--grijs);line-height:1.45}
@media(max-width:600px){.drop li{grid-template-columns:1fr;gap:2px}.drop .pijl{display:none}}
.plate.kast .drop{border-top-color:var(--rule-creme)}
.plate.kast .drop li{border-bottom-color:var(--rule-creme)}
.plate.kast .drop .q{color:var(--creme)}
.plate.kast .drop .a{color:rgba(222,218,208,.72)}
.plate.kast .drop .pijl{color:var(--creme)}

.deliver{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,46px)}
@media(max-width:820px){.deliver{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.deliver{grid-template-columns:1fr}}
.deliver > div{border-top:2px solid var(--kastanje);padding-top:16px}
.deliver h3{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;font-variation-settings:"wght" 700;color:var(--kastanje);margin-bottom:6px}
.deliver ul{list-style:none}
.deliver li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px;color:var(--grijs);line-height:1.4}
.deliver li:last-child{border-bottom:0}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
@media(max-width:820px){.trio{grid-template-columns:1fr;gap:24px}}
.trio > div{border-top:2px solid var(--kastanje);padding-top:18px}
.trio h3{margin-bottom:9px}
.trio p{color:var(--grijs);font-size:14px}


/* ============ PORTFOLIO ============ */
.cats{position:sticky;top:var(--kop-h,70px);z-index:100;background:var(--wit);border-bottom:1px solid var(--rule);margin-top:clamp(26px,3.4vw,50px)}
.cats-in{display:flex;overflow-x:auto;scrollbar-width:none}
.cats-in::-webkit-scrollbar{display:none}
.cat{background:none;border:0;border-right:1px solid var(--rule);font-family:var(--sans);color:var(--grijs);cursor:pointer;white-space:nowrap;padding:17px clamp(13px,1.7vw,24px);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;font-variation-settings:"wght" 500;display:flex;align-items:center;gap:9px;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.cat:first-child{border-left:1px solid var(--rule)}
.cat .n{font-size:8.5px;opacity:.55}
.cat:hover{color:var(--kastanje);background:rgba(0,0,0,.025)}
.cat.active{background:var(--kastanje);color:var(--creme)}
.cat.active .n{opacity:.65}

.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3.2vw,52px) clamp(18px,2.6vw,40px);align-items:start}
@media(max-width:1080px){.wall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.wall{grid-template-columns:repeat(2,1fr);gap:22px 16px}}
@media(max-width:420px){.wall{grid-template-columns:1fr}}
.wall .print img{aspect-ratio:1/1}
.wall > *:nth-child(4n+2){margin-top:clamp(18px,3vw,46px)}
.wall > *:nth-child(4n+3){margin-top:clamp(7px,1.2vw,18px)}
.wall > *:nth-child(4n+4){margin-top:clamp(26px,4.4vw,68px)}
@media(max-width:760px){
  .wall > *:nth-child(4n+2),.wall > *:nth-child(4n+3),.wall > *:nth-child(4n+4){margin-top:0}
  .wall > *:nth-child(even){margin-top:24px}
}
.wall-note{display:block;text-align:center;font-size:clamp(21px,2.2vw,27px);margin-top:clamp(36px,5vw,64px);transform:rotate(-2deg)}
.pf-empty{padding:clamp(34px,6vw,80px) 0 clamp(50px,8vw,110px);max-width:52ch}

/* ============ PROJECTEN ============ */
.proj{padding-bottom:clamp(50px,8vw,110px);border-bottom:1px solid var(--rule);margin-bottom:clamp(50px,8vw,110px)}
.proj:last-of-type{border-bottom:0;margin-bottom:0}
.proj-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.proj-meta span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--rule);padding:5px 10px;color:var(--grijs)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin:clamp(28px,4vw,52px) 0}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:22px}}
.steps li{border-top:1px solid var(--rule);padding-top:16px}
.steps .tag{margin-bottom:8px;display:block}
.steps p{font-size:13.5px;color:var(--grijs);line-height:1.6}
mark.todo{background:rgba(61,0,0,.07);color:var(--kastanje);border-bottom:1px dashed rgba(61,0,0,.4);padding:1px 5px;font-style:italic}

/* ============ FORMULIER ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:36px}}
.form-note{border:1px solid var(--kastanje);background:rgba(61,0,0,.04);padding:19px 21px;margin-bottom:28px;font-size:13.5px;line-height:1.55}
.field{margin-bottom:21px}
.field label{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--grijs);margin-bottom:8px;font-variation-settings:"wght" 500}
.field input,.field textarea,.field select{width:100%;font-family:var(--sans);font-size:16px;color:var(--zwart);background:var(--wit);border:1px solid var(--rule);padding:13px 12px;border-radius:0;transition:border-color var(--fast) var(--ease)}
.field textarea{min-height:118px;resize:vertical;line-height:1.55}
.field select{cursor:pointer}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--kastanje)}
.field input::placeholder,.field textarea::placeholder{color:rgba(91,87,81,.5)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:21px}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
.contact-direct{border-top:1px solid var(--rule);margin-top:30px;padding-top:24px}
.contact-direct a{border-bottom:1px solid var(--rule);padding-bottom:2px}
.contact-direct a:hover{border-color:var(--kastanje);color:var(--kastanje)}

/* ============ JURIDISCHE PAGINA ============ */
.legal{max-width:72ch}
.legal h2{font-family:var(--sans);font-size:clamp(17px,1.8vw,24px);line-height:1.2;font-variation-settings:"wght" 700;color:var(--kastanje);margin:clamp(34px,4.2vw,56px) 0 12px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:15px;font-variation-settings:"wght" 700;margin:24px 0 7px}
.legal p,.legal li{color:var(--grijs);font-size:15px;line-height:1.72}
.legal p + p{margin-top:1em}
.legal ul,.legal ol{margin:11px 0 0 20px}
.legal li{padding:4px 0}
.legal a{color:var(--kastanje);border-bottom:1px solid var(--rule)}
.legal a:hover{border-color:var(--kastanje)}
/* De tabellen in de privacyverklaring hebben drie kolommen met lange
   woorden erin. Op een heel smal scherm passen die niet meer naast
   elkaar, dus daar mag de tabel zelf schuiven in plaats van de hele
   pagina scheef te trekken. */
.legal .tabelrol{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px}
.legal table{width:100%;min-width:420px;border-collapse:collapse;font-size:14px}
@media(max-width:420px){.legal table{font-size:13px}}
.legal th,.legal td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--grijs)}
.legal th{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--kastanje);font-variation-settings:"wght" 600}
.legal .updated{margin-top:clamp(34px,4.5vw,56px);padding-top:20px;border-top:1px solid var(--rule);font-size:13px}
.legal-toc{border:1px solid var(--rule);padding:20px 22px;margin-bottom:clamp(30px,4vw,48px);background:var(--wit)}
.legal-toc p{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--kastanje);margin-bottom:11px;font-variation-settings:"wght" 600}
.legal-toc ol{margin:0 0 0 18px;columns:2;column-gap:28px}
@media(max-width:640px){.legal-toc ol{columns:1}}
.legal-toc li{padding:3px 0;font-size:13.5px}
.legal-toc a{border:0}
.legal-toc a:hover{border-bottom:1px solid var(--rule)}

/* ============ HULPKLASSEN ============ */
.center{text-align:center}
.center .body,.center .quote,.center .lede{margin-left:auto;margin-right:auto}
.hero{padding:clamp(38px,6vw,88px) 0 0}
/* Het handschrift hangt onder de displayletters en kruipt er net tegenaan,
   zoals het kleine woord dat op het moodboard in de A van AMORE zit. */
.hero-hand{
  display:block;font-family:var(--hand);text-transform:none;letter-spacing:0;
  color:var(--kastanje);font-size:clamp(19px,2.5vw,36px);line-height:1;
  margin:clamp(6px,.8vw,12px) 0 0 clamp(6px,3vw,64px);
  transform:rotate(-2.4deg);transform-origin:left center;
}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-top:clamp(26px,3.4vw,48px);padding-top:clamp(18px,2.4vw,30px);border-top:1px solid var(--rule)}
.page-hero{padding:clamp(40px,6vw,86px) 0 0}
.page-hero-foot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4.5vw,72px);align-items:start;margin-top:clamp(22px,3vw,40px)}
@media(max-width:820px){.page-hero-foot{grid-template-columns:1fr;gap:20px}}

/* ============ SCROLL REVEAL ============ */
/* Korter en met minder verplaatsing. Een lange lap tekst die pas na
   acht tiende seconde verschijnt voelt alsof de pagina vastloopt in
   plaats van dat er iets moois gebeurt. */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.06s}
.js .reveal[data-d="2"]{transition-delay:.12s}
.js .reveal[data-d="3"]{transition-delay:.18s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}


/* ---------- kop en voet zoals de overige pagina's ze noemen ---------- */
/* ============ HEADER ============ */
/* De blur staat bewust op een pseudo-element en niet op .top zelf. Een
   backdrop-filter maakt van het element de containing block voor alles
   wat eronder position:fixed is, en dan krimpt het mobiele menu mee tot
   de hoogte van de balk in plaats van het hele scherm te vullen. */
/* Ondoorzichtig, en zonder blur. Met 94 procent dekking schemerden de
   foto's er tijdens het scrollen doorheen, en dat leest als een fout. */
/* Op het element, niet op de losse klasse. .sec-lead.top gebruikt dezelfde
   naam als modificator, en die kreeg zo per ongeluk sticky, z-index 200
   en een papieren achtergrond: dat blok bleef bovenin plakken tijdens
   het scrollen. */
header.top{position:sticky;top:0;z-index:200;background:var(--wit)}

/* Alleen boven en onder, want de zijmarge komt van .wrap. Een korte
   padding-regel zou die overschrijven en dan plakt het logo op mobiel
   tegen de schermrand terwijl de rest netjes inspringt. */
.top-in{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:20px;padding-bottom:20px;border-bottom:1px solid var(--rule-soft)}
/* Groter dan eerst. De twee schuine strepen rechtsboven in het merkteken
   zijn de elf, en die zijn maar een fractie van de breedte: onder de
   honderd pixels vallen ze weg tegen de achtergrond. */
.mark{display:block;width:clamp(104px,8vw,140px);line-height:0;flex:none;position:relative;z-index:210}
/* height:auto is hier niet optioneel: het logo heeft width- en height-
   attributen voor layoutstabiliteit, en zonder deze regel rekt de
   browser het uit tot de volle 446px hoogte. */
.mark img{width:100%;height:auto}
.menu{display:flex;gap:clamp(12px,1.8vw,30px);flex-wrap:wrap}
.menu a{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-variation-settings:"wght" 500;color:var(--grijs);padding:6px 0;position:relative;transition:color var(--fast) var(--ease)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--kastanje)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);padding:12px 16px;font:inherit;font-family:var(--sans);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--kastanje);cursor:pointer;position:relative;z-index:210}

@media(max-width:900px){
  .menu{
    position:fixed;inset:0;background:var(--kastanje);
    flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:flex-start;
    gap:6px;padding:0 var(--gut);overflow-y:auto;
    transform:translateY(-100%);visibility:hidden;pointer-events:none;
    transition:transform .6s var(--ease),visibility 0s linear .6s;
  }
  .menu.open{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .6s var(--ease),visibility 0s}
  .menu a{font-size:clamp(22px,6vw,34px);letter-spacing:-.02em;text-transform:none;color:var(--creme);padding:11px 0;font-variation-settings:"wdth" 94,"wght" 700}
  .menu a:hover,.menu a[aria-current="page"]{color:var(--wit)}
  .nav-toggle{display:block}
}

/* ============ FOOTER ============ */
.foot{margin-top:var(--sec);padding:clamp(30px,4vw,54px) 0 30px;border-top:1px solid var(--rule)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,60px);padding-bottom:clamp(26px,3.4vw,44px)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr;gap:26px}}
.foot-mark{width:clamp(84px,7vw,112px);height:auto;opacity:.9;margin-bottom:14px}
.foot-top h4{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--kastanje);margin-bottom:12px;font-variation-settings:"wght" 600}
.foot-top a{display:block;padding:8px 0;color:var(--grijs);transition:color var(--fast),transform var(--fast) var(--ease)}
.foot-top a:hover{color:var(--kastanje);transform:translateX(4px)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px 22px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--rule);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--grijs)}
.foot-bottom a{display:inline-block;padding:8px 0}
.foot-bottom a:hover{color:var(--kastanje)}


/* kleuren van kop en voet naar het nieuwe accent */
header.top{background:var(--wit)}
.mark{width:clamp(104px,8vw,140px)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--accent)}
.nav-toggle{color:var(--kastanje)}
.foot h4{font-size:10.5px;color:var(--accent)}
.foot a:hover{color:var(--accent)}
.foot-mark{width:clamp(104px,8vw,140px)}


/* ============================================================
   BRUG NAAR DE BESTAANDE PAGINA'S
   De overige pagina's zijn geschreven met de oude klassenamen.
   In plaats van al die opmaak te herschrijven, wat inhoud kan
   kosten, worden die namen hier opnieuw gezet in de bold-stijl.
   Zo wisselt een pagina om door alleen de stylesheet te wisselen.
   ============================================================ */

/* Instrument Serif neemt de rol van de rustige schreefletter over. */
/* Een schreefletter op de site, niet twee. Instrument Serif viel af
   toen Newsreader de sierletter werd. */
:root{--serif:var(--sier)}

/* ---------- typografie omgezet naar de bold-schaal ---------- */
.h-hero,.h-woord{
  font-family:var(--display);
  font-size:clamp(47px,9.4vw,140px);line-height:.86;letter-spacing:-.043em;
  text-transform:uppercase;font-variation-settings:"wght" 900;
  color:var(--kastanje);
}
.h-sec{
  font-family:var(--display);
  font-size:clamp(36px,5.4vw,82px);line-height:.92;letter-spacing:-.04em;
  text-transform:uppercase;font-variation-settings:"wght" 900;
  color:var(--kastanje);
}
.h-sub{
  font-family:var(--display);
  font-size:clamp(20px,2vw,28px);line-height:1.08;letter-spacing:-.026em;
  text-transform:uppercase;font-variation-settings:"wght" 800;
  color:var(--kastanje);
}
.h-min{font-family:var(--sans);font-size:clamp(13.5px,1.15vw,16px);font-variation-settings:"wght" 700;color:var(--zwart)}
.tag{font-family:var(--sans);font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;font-variation-settings:"wght" 500;color:var(--grijs)}
.tag-k{color:var(--accent)}
.num{font-variant-numeric:tabular-nums;letter-spacing:.22em}
.kast{color:var(--kastanje)}
.serif{font-family:var(--serif);font-weight:400;font-style:normal}
.quote{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.6vw,36px);line-height:1.24;letter-spacing:-.01em;max-width:26ch;color:var(--kastanje)}

/* ---------- knoppen en verwijzingen ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;font-variation-settings:"wght" 600;padding:18px 34px;
  border:1px solid currentColor;color:var(--kastanje);cursor:pointer;background:none;
  position:relative;overflow:hidden;transition:color .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--papier)}
.btn-fill{background:var(--accent);border-color:var(--accent);color:var(--papier)}
.btn-fill:hover{background:var(--kastanje);border-color:var(--kastanje);color:var(--papier)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.link{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  color:var(--accent);border:0;padding:0;
}
.link::after{content:"";display:block;width:32px;height:1px;background:var(--accent);transition:width .45s var(--ease)}
.link:hover::after{width:52px}

/* ---------- vlakken en accenten in de nieuwe kleuren ---------- */
.plate{background:var(--wit)}
.plate.creme{background:var(--creme)}
.plate.kast{background:var(--kastanje);color:var(--creme)}
.plate.kast .h-sec,.plate.kast .h-hero,.plate.kast .h-sub,.plate.kast .quote{color:var(--creme)}
.plate.kast .tag-k{color:var(--accent-licht)}
.plate.kast .btn{color:var(--creme);border-color:var(--creme)}
.plate.kast .btn:hover{background:var(--accent-licht);border-color:var(--accent-licht);color:var(--kastanje)}
.plate.kast .link{color:var(--accent-licht)}
.hand{color:var(--kastanje)}
.plate.kast .hand{color:var(--accent-licht)}
.runners{font-size:8.5px;letter-spacing:.4em}
.frame{border-color:var(--kastanje)}
.eleven .fig{
  font-family:var(--display);
  font-size:clamp(62px,11vw,178px);line-height:.78;letter-spacing:-.05em;
  font-variation-settings:"wght" 900;color:var(--accent);opacity:1;
}
.plate.kast .eleven .fig{color:var(--accent-licht)}
.svc .n,.vorm .n,.projecten h3,.werkwijze h3,.deliver h3,.trio h3{color:var(--accent)}
.projecten > div,.deliver > div,.trio > div{border-top-color:var(--accent)}
.werkwijze .pijl{border-color:var(--accent);color:var(--accent)}
.werkwijze li:hover .pijl{background:var(--accent);color:var(--papier)}
.drop .q,.versus .wel{color:var(--kastanje)}
.drop .pijl,.versus .pijl{color:var(--accent)}
/* Het actieve tabblad heeft een kastanje vlak, dus daar hoort creme
   en niet het accent: dat haalde maar 2,16:1. Alleen de hover, die op
   papier staat, krijgt de accentkleur. */
.cat:hover{color:var(--accent)}
.cat.active{color:var(--creme)}
.vorm.leidend{background:var(--kastanje);color:var(--creme);border-color:var(--kastanje)}
.vorm.leidend .belofte,.vorm.leidend .erbij{color:var(--accent-licht)}
.vorm .belofte{font-family:var(--serif);font-style:italic;color:var(--accent)}
.vorm .prijs{font-family:var(--serif)}
.vorm h3{
  font-family:var(--display);
  font-size:clamp(22px,2.2vw,30px);line-height:1.05;letter-spacing:-.03em;
  text-transform:uppercase;font-variation-settings:"wght" 900;
}
.projecten .voor,.verhaal .kick{font-family:var(--serif);font-style:italic;color:var(--accent)}
.verhaal h3{
  font-family:var(--display);
  font-size:clamp(21px,2.2vw,30px);line-height:1.05;letter-spacing:-.03em;
  text-transform:uppercase;font-variation-settings:"wght" 900;color:var(--kastanje);
}

/* ============================================================
   PAKKETTEN EN LOSSE DIENSTEN
   Zelfde kaartvorm als de rest van de site: dunne lijn, papier,
   het nummer in het accent. Wat erbij komt is de opsomming van wat
   inbegrepen is, en die staat bewust zonder opsommingstekens.
   Alleen haarlijnen ertussen, dat scant het rustigst.
   ============================================================ */

/* De ondertitel van een pakket: een hele zin, dus kleiner gezet dan
   de korte belofte die er eerst stond. */
.kaart .sub{
  font-family:var(--editorial);font-style:italic;
  font-size:clamp(16px,1.55vw,20px);line-height:1.32;
  color:var(--accent);margin-top:clamp(16px,2.2vw,26px);
  padding-top:clamp(14px,1.9vw,20px);border-top:1px solid var(--rule);
}

.inbegrepen{list-style:none;margin-top:clamp(18px,2.4vw,28px);border-top:1px solid var(--rule)}
.inbegrepen li{
  padding:10px 0;border-bottom:1px solid var(--rule);
  font-size:16.2px;line-height:1.5;color:var(--grijs);
}
.inbegrepen-kop{
  font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin-top:clamp(18px,2.4vw,28px);font-variation-settings:"wght" 600;
}

/* De kleine letters onder een pakket. */
.fijn{font-size:14.2px;line-height:1.6;color:var(--grijs);margin-top:clamp(14px,1.8vw,20px);opacity:.9}

/* De kaarten zijn even hoog, dus de knoppen horen ook op een lijn te
   eindigen. margin-top:auto duwt de knop omlaag; de tussenruimte komt
   van het element erboven, want auto kan geen minimum afdwingen. */
.kaart > *:nth-last-child(2){margin-bottom:clamp(22px,3vw,34px)}
.kaart .knop{margin-top:auto;align-self:flex-start}

/* Vier diensten passen niet in drie kolommen: twee bij twee. */
.vier{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(28px,4vw,56px)}
@media(max-width:820px){.vier{grid-template-columns:1fr}}

/* ---------- twee grote kaarten die helemaal klikbaar zijn ---------- */
.duokaart{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,30px);margin-top:clamp(28px,4vw,56px)}
@media(max-width:760px){.duokaart{grid-template-columns:1fr;gap:16px}}
.groteKaart{
  display:flex;flex-direction:column;border:1px solid var(--kastanje);background:var(--wit);
  overflow:hidden;transition:border-color .5s var(--ease),background .5s var(--ease);
}
.groteKaart:hover{border-color:var(--accent);background:var(--wit)}
.groteKaart .beeld{overflow:hidden}
.groteKaart img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease)}
.groteKaart:hover img{transform:scale(1.04)}
.groteKaart .tekst{padding:clamp(20px,2.6vw,36px);display:flex;flex-direction:column;flex:1}
.groteKaart h3{margin-bottom:12px}
.groteKaart p{color:var(--grijs);font-size:16.7px;line-height:1.62}
/* Dit ziet eruit als een knop maar is het niet: de hele kaart is al een
   link, en een link in een link mag niet. */
.schijnknop{
  margin-top:auto;padding-top:clamp(20px,2.6vw,30px);
  font-size:9px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:10px;
}
.schijnknop i{display:block;width:32px;height:1px;background:var(--accent);transition:width .45s var(--ease)}
.groteKaart:hover .schijnknop i{width:54px}

/* ---------- rustig blok met voorwaarden ---------- */
.infoblok{
  border-top:2px solid var(--accent);padding-top:clamp(18px,2.4vw,28px);
  margin-top:clamp(40px,6vw,90px);max-width:64ch;
}
.infoblok h3{
  font-size:9px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;font-variation-settings:"wght" 600;
}
.infoblok p{color:var(--grijs);font-size:16.2px;line-height:1.68}

/* ---------- afsluitend blok ---------- */
.slotblok{
  background:var(--kastanje);color:var(--creme);text-align:center;
  padding:clamp(36px,6vw,90px) clamp(22px,3.4vw,60px);margin-top:var(--sec);
}
.slotblok .groot{color:var(--creme)}
.slotblok .body{color:rgba(222,218,208,.78);margin:clamp(16px,2.2vw,26px) auto 0}
.slotblok .label{color:rgba(222,218,208,.55)}
.slotblok .knop{margin-top:clamp(24px,3vw,36px);color:var(--creme);border-color:var(--creme)}
.slotblok .knop::before{background:var(--accent-licht)}
.slotblok .knop:hover{color:var(--kastanje);border-color:var(--accent-licht)}


/* ============================================================
   DE UITGELICHTE KAART
   Een kastanje vlak tussen twee kaarten van papier, met het oranje
   als accent erop. Op kastanje haalt dat oranje 5,36:1, dus daar
   mag het ook in de kleine regels staan.
   ============================================================ */
.kaart.uit{background:var(--kastanje);color:var(--creme);border-color:var(--kastanje)}
.kaart.uit:hover{background:#2C0000}
.kaart.uit .nr{color:var(--accent-licht)}
.kaart.uit .mid,.kaart.uit .prijs{color:var(--creme)}
.kaart.uit .sub{color:var(--accent-licht);border-top-color:rgba(222,218,208,.3)}
.kaart.uit .belofte{color:var(--accent-licht);border-top-color:rgba(222,218,208,.3)}
.kaart.uit p{color:rgba(222,218,208,.86)}
.kaart.uit .inbegrepen{border-top-color:rgba(222,218,208,.3)}
.kaart.uit .inbegrepen li{border-bottom-color:rgba(222,218,208,.3);color:rgba(222,218,208,.86)}
.kaart.uit .inbegrepen-kop{color:var(--accent-licht)}
.kaart.uit .erbij{color:var(--accent-licht)}
.kaart.uit .fijn{color:rgba(222,218,208,.78)}
.kaart.uit .label{color:rgba(222,218,208,.68)}
.kaart.uit .label b{color:var(--accent-licht)}
.kaart.uit .ital{color:var(--creme)}
.kaart.uit .knop{color:var(--creme);border-color:var(--creme)}
.kaart.uit .knop::before{background:var(--accent-licht)}
.kaart.uit .knop:hover{color:var(--kastanje);border-color:var(--accent-licht)}

/* Het vaantje: oranje vlak met kastanje letters, 5,36:1. */
.kaart{position:relative}
.vaantje{
  position:absolute;top:0;right:0;
  /* Het vaantje zat op het oranje. Met het zachte bruin haalde
     kastanje erop nog maar 2,52:1; op de lichte variant 8,26:1. */
  background:var(--accent-licht);color:var(--kastanje);
  font-size:8px;letter-spacing:.26em;text-transform:uppercase;
  font-variation-settings:"wght" 700;padding:8px 13px;
}

/* ============================================================
   TEKST OP DONKERE VLAKKEN
   De algemene regels zetten koppen in kastanje en accenten in het
   diepe blauw. Op een kastanje of blauw vlak vallen die weg. Elk
   vlak dat donker is moet daarom expliciet zijn eigen tekstkleuren
   zetten, ook voor de losse woorden die erin staan.
   ============================================================ */
.slotblok .h-sec,.slotblok .h-hero,.slotblok .h-sub,.slotblok .quote,.slotblok .mid{color:var(--creme)}
.slotblok .ital{color:var(--creme)}
.slotblok .hand,.slotblok .notitie{color:var(--accent-licht)}
.slotblok .label b,.slotblok .tag-k{color:var(--accent-licht)}

.vlak .h-sec,.vlak .h-hero,.vlak .h-sub,.vlak .quote{color:var(--creme)}
.vlak .label b,.vlak .tag-k{color:var(--accent-licht)}

.plate.kast .ital{color:var(--creme)}
.plate.kast .notitie{color:var(--accent-licht)}
.plate.kast .label b{color:var(--accent-licht)}

.kaart.uit .hand,.kaart.uit .notitie{color:var(--accent-licht)}
/* .tag is de oude naam van .label en werd hier niet meegenomen: grijs op
   kastanje haalde 2,44:1. Creme op 68 procent haalt 6,14:1. */
.slotblok .tag,.vlak .tag,.plate.kast .tag{color:rgba(222,218,208,.68)}
.slotblok .label,.vlak .label{color:rgba(222,218,208,.68)}

/* ============================================================
   WAAR HET ORANJE WEL EN NIET KOMT
   Oranje is voor het kleine grut: de dubbele schuine strepen, de
   minilabels, de dunne lijntjes en de grote cijfers als grafisch
   element. De sierlijke tekst op koptekstformaat blijft kastanje,
   en op een donker vlak creme. Zo blijft het oranje een accent
   in plaats van een tweede tekstkleur.
   ============================================================ */

/* sierlijk en groot: kastanje */
.kaart .sub,.kaart .belofte,.vorm .belofte{color:var(--kastanje)}
.verhaal .kick,.projecten .voor{color:var(--kastanje)}
.projecten h3,.trio h3,.vorm h3{color:var(--kastanje)}
.hand,.notitie{color:var(--kastanje)}

/* op een donker vlak wordt datzelfde creme */
.kaart.uit .sub,.kaart.uit .belofte{color:var(--creme)}
.vorm.leidend .belofte{color:var(--creme)}
.plate.kast .hand,.slotblok .hand,.slotblok .notitie,.vlak .notitie{color:var(--creme)}

/* Een knop met een oranje vulling zou witte letters op 2,97:1 geven.
   Kastanje haalt daar 12,55:1, en past beter bij de rest. */
.btn-fill,.knop-vol{background:var(--kastanje);border-color:var(--kastanje);color:var(--papier)}
.btn-fill:hover{background:var(--accent);border-color:var(--accent);color:var(--kastanje)}
.knop-vol::before{background:var(--accent)}
.knop-vol:hover{color:var(--kastanje);border-color:var(--accent)}
.btn:hover{background:var(--kastanje);border-color:var(--kastanje);color:var(--papier)}
.knop::before{background:var(--kastanje)}
.knop:hover{color:var(--papier);border-color:var(--kastanje)}
/* .kaart p is specifieker dan .inbegrepen-kop, dus die kop werd grijs
   in plaats van oranje. Met .kaart ervoor wint hij weer. */
.kaart .inbegrepen-kop{color:var(--accent)}
.kaart.uit .inbegrepen-kop{color:var(--accent-licht)}

/* ============================================================
   OPDRACHTEN IN HET PORTFOLIO
   Een kopje bevat meerdere opdrachten, elk met een eigen naam
   en een eigen raster. De naam staat op een lijn met het aantal
   beelden, zodat je in een oogopslag ziet hoe groot de reeks is.
   ============================================================ */
.opdracht{margin-top:clamp(38px,5.4vw,80px)}
.opdracht:first-of-type{margin-top:clamp(24px,3.4vw,46px)}
.opdracht-kop{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;flex-wrap:wrap;
  padding-bottom:clamp(11px,1.5vw,17px);border-bottom:1px solid var(--rule);
  margin-bottom:clamp(15px,2.1vw,25px);
}
.opdracht-kop h3{
  font-family:var(--display);
  font-size:clamp(21px,2.2vw,30px);line-height:1.05;letter-spacing:-.028em;
  text-transform:uppercase;font-variation-settings:"wght" 900;
  color:var(--kastanje);
}
.opdracht-kop .telling{
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);font-variation-settings:"wght" 600;white-space:nowrap;
}

/* ============================================================
   ALBUMS
   Per kopje zie je de shoots als een rustig raster: een groot
   omslagbeeld, de naam eronder in kleine letters. Er stond eerder een
   mozaiek van vier beelden met randen en een stapeleffect, en dat werd
   druk en blokkerig. Een fotograaf toont een shoot met een beeld, niet
   met een collage.
   ============================================================ */
/* Een collage in plaats van een rij gelijke vakken. Op de telefoon stond
   er een kolom grote staande foto's, en met vier shoots onder een kopje was
   dat alleen scrollen zonder overzicht. Nu twee kolommen, dus je ziet er
   meerdere tegelijk, en de vakken wisselen van verhouding en staan om en om
   iets lager. Dat leest als een collage in plaats van als een tabel. */
/* ============================================================
   HET BORD
   De omslagen stonden in een raster van drie met een vaste
   uitsnede per plek: vier op vijf, vierkant, drie op vier. Dat
   is netjes maar het is geen bord; elke foto werd bijgesneden
   naar een maat die niet van hem was.
   Nu staan ze in kolommen en houdt elke foto zijn eigen
   verhouding, zoals op een prikbord. Liggend naast staand,
   hoog naast laag. De naam staat op de foto op een crème
   kaartje, als het naambordje bij een gerecht.
   ============================================================ */
.albums{
  columns:3;column-gap:clamp(12px,1.8vw,28px);
  margin-top:clamp(26px,3.6vw,50px);
}
@media(max-width:900px){.albums{columns:2;column-gap:clamp(10px,2vw,16px)}}

.album{
  /* break-inside houdt een omslag heel; zonder dit knipt de browser
     een foto doormidden over twee kolommen. */
  break-inside:avoid;-webkit-column-break-inside:avoid;
  display:block;width:100%;
  margin:0 0 clamp(12px,1.8vw,28px);
  position:relative;text-align:left;
  background:none;border:0;padding:0;font:inherit;cursor:pointer;color:inherit;
}
.album-beeld{position:relative;display:block;overflow:hidden;background:var(--wit)}
.album-beeld img{
  width:100%;height:auto;display:block;
  transition:scale 1.4s var(--ease);
}
/* alleen het eerste beeld is de omslag; de rest zit in de map */
.album-beeld img:not(:first-child){display:none}
.album:hover .album-beeld img{scale:1.04}

/* het naambordje op de foto */
.album-tekst{
  position:absolute;z-index:2;
  left:clamp(8px,.9vw,13px);right:clamp(8px,.9vw,13px);bottom:clamp(8px,.9vw,13px);
  display:block;background:var(--wit);
  padding:clamp(8px,.85vw,11px) clamp(10px,1.1vw,15px);
  transition:background .4s var(--ease);
}
.album-naam{
  display:block;font-family:var(--display);
  font-size:clamp(10px,.85vw,12px);line-height:1.3;letter-spacing:.12em;
  text-transform:uppercase;font-variation-settings:"wght" 700;
  color:var(--kastanje);transition:color .4s var(--ease);
}
@media(max-width:520px){.album-naam{font-size:9.5px;letter-spacing:.07em}}
/* Het aantal foto's stond naast de naam. Op een omslag hoort alleen
   de naam van de shoot, verder niets. */
.album-aantal{display:none}
.album:hover .album-tekst,.album[aria-expanded="true"] .album-tekst{background:var(--kastanje)}
.album:hover .album-naam,.album[aria-expanded="true"] .album-naam{color:var(--creme)}

/* ---------- de geopende map ---------- */
.album-inhoud{margin-top:clamp(30px,4.4vw,60px);border-top:1px solid var(--rule);padding-top:clamp(18px,2.4vw,30px);scroll-margin-top:calc(var(--kop-h,70px) + 76px)}
.album-inhoud[hidden]{display:none}
.album-inhoud-kop{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(15px,2.1vw,25px);
}
.album-inhoud-kop h3{
  font-family:var(--display);
  font-size:clamp(20px,2vw,26px);line-height:1.1;letter-spacing:.1em;
  text-transform:uppercase;font-variation-settings:"wght" 600;
  color:var(--kastanje);
}
.album-sluit{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
  font-family:var(--sans);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:9px;
}
.album-sluit i{display:block;width:26px;height:1px;background:var(--accent);transition:width .4s var(--ease)}
.album-sluit:hover i{width:40px}

/* ============================================================
   CASES
   Per case de rol links en de aanpak rechts, met daaronder de
   cijfers als grafisch anker. De getallen staan in de displayletter
   op formaat, want dat is waar het oog naartoe gaat.
   ============================================================ */
.case{margin-top:var(--sec)}
.case:first-of-type{margin-top:clamp(30px,4.4vw,60px)}
.case-kop{border-top:2px solid var(--kastanje);padding-top:clamp(16px,2.2vw,26px)}
.case-body{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,72px);margin-top:clamp(24px,3.4vw,46px)}
@media(max-width:860px){.case-body{grid-template-columns:1fr;gap:26px}}
.case-rol{list-style:none;border-top:1px solid var(--rule)}
.case-rol li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px;line-height:1.45;color:var(--grijs)}
.case-kopje{
  font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);font-variation-settings:"wght" 600;margin-bottom:11px;
}
.case-blok + .case-blok{margin-top:clamp(20px,2.8vw,34px)}

/* De cijfers stonden in drie doosjes met een randje. Dat maakt van een
   resultaat een tabel. Nu staan ze los op de pagina, groot, met alleen
   een haarlijn erboven; het getal is het beeld. */
.cijfers{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,54px);
  margin-top:clamp(34px,4.6vw,70px);
  border-top:1px solid var(--kastanje);padding-top:clamp(22px,3vw,40px);
}
@media(max-width:640px){.cijfers{grid-template-columns:1fr;gap:var(--ruim-s)}}
.cijfers > div{background:none;border:0;padding:0}
.cijfers b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(46px,7.4vw,124px);line-height:.84;letter-spacing:-.055em;
  font-variation-settings:"wght" 900;color:var(--kastanje);
}
.cijfers > div:first-child b{color:var(--vonk)}
.cijfers span{
  display:block;margin-top:clamp(10px,1.3vw,16px);
  font-family:var(--label);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);
}
.cijfer-voet{font-size:13px;line-height:1.6;color:var(--grijs);margin-top:clamp(16px,2vw,24px);max-width:56ch}

/* Een beeld zonder kader of schaduw. Het omlijste kader en de gekantelde
   afdruk vielen op als losse vormen op de pagina, en een schaduw op een
   gedraaid element moet bij elke scrollstap opnieuw getekend worden. */
.beeld-vlak{margin:0;display:block}
.beeld-vlak img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}

/* Lange leesteksten doen niet mee aan de scroll-animatie. Ze staan er
   gewoon. Bij een blok van meer dan duizend pixels hoog scrol je anders
   een leeg vlak in en wacht je tot de tekst komt. */
.js .verhaal,.js .verhaal.reveal{opacity:1;transform:none;transition:none}
.js .body,.js p.lede{transition-duration:.45s}


/* ============================================================
   HET ACCENT OP DONKERE VLAKKEN
   Het zachte bruin is gekozen voor wit. Op kastanje valt het weg,
   dus daar staat de lichte variant #C6AE97, die er 8,3:1 haalt.
   ============================================================ */
.vlak .tag-k,.vlak .label b,.vlak .ital,.vlak .hand,.vlak .notitie,
.slotblok .tag-k,.slotblok .label b,.slotblok .ital,.slotblok .hand,.slotblok .notitie,
.plate.kast .tag-k,.plate.kast .label b,.plate.kast .ital,.plate.kast .hand,.plate.kast .notitie,
.kaart.uit .sub,.kaart.uit .belofte,.kaart.uit .erbij,.kaart.uit .inbegrepen-kop,
.kaart.uit .nr,.kaart.uit .label b,.kaart.uit .ital{color:var(--accent-licht)}

/* ============================================================
   TEKSTPINS IN HET RASTER
   Korte uitspraken tussen de beelden, zoals op een moodboard. Dit
   is wat een portfolioraster naar een Pinterest-bord trekt.
   ============================================================ */
.tegel{
  padding:clamp(26px,3vw,44px);display:flex;align-items:center;
  min-height:clamp(200px,22vw,320px);
}
.tegel p{
  font-family:var(--sier);font-weight:500;letter-spacing:-.028em;
  font-size:clamp(24px,2.6vw,40px);line-height:1.06;
}
.tegel i{font-style:italic;font-weight:400}
.tegel.donker{background:var(--kastanje);color:var(--creme)}
.tegel.donker i{color:var(--accent-licht)}
.tegel.licht{background:var(--creme);color:var(--kastanje)}
.tegel.licht i{color:var(--accent)}

/* ============================================================
   HET VERHAAL
   Dit stond eerst als genummerde hoofdstukken: 01, een kopje, een
   blok tekst. Dat leest als een cv en niet als iemand die iets
   vertelt. Nu is het een doorlopend verhaal in een leeskolom, met
   hier en daar een regel die stilstaat en een foto die het
   onderbreekt. Geen nummers, geen functietitels.
   ============================================================ */
/* De leeskolom stond gecentreerd op de pagina terwijl de koppen, de
   route en de blokken links beginnen. Dat wisselen tussen midden en
   links is precies wat een pagina rommelig maakt. Nu hangt hij aan
   dezelfde linkerlijn als de rest, met een leesbreedte uit het systeem. */
.vertel{max-width:var(--lees);margin:0}
.vertel p{color:var(--grijs);font-size:clamp(16.8px,1.22vw,19px);line-height:1.82}
.vertel p + p{margin-top:1.15em}
/* de kantlijnnotitie houdt haar eigen maat, ook binnen de leeskolom */
.vertel .notitie{font-size:clamp(24px,3vw,40px);line-height:1.15}
/* de eerste zin staat groter: daar begint het verhaal */
.vertel .aanhef{
  font-family:var(--display);font-variation-settings:"wght" 500;
  color:var(--zwart);letter-spacing:-.016em;
  font-size:clamp(21px,2.15vw,29px);line-height:1.42;
}

/* Een regel die het verhaal openbreekt. Geen tussenkop, want dan
   wordt het weer een opsomming; meer een adempauze. */
.adem{
  font-family:var(--display);font-variation-settings:"wght" 800;
  font-size:clamp(28px,4vw,54px);line-height:1.08;letter-spacing:-.035em;
  color:var(--kastanje);max-width:19ch;
  margin:clamp(48px,6.5vw,96px) 0;
}

/* Het moment halverwege: een foto met een zin ernaast. De foto wordt
   niet bijgesneden, die houdt zijn eigen verhouding. */
.moment{
  display:grid;grid-template-columns:.44fr .56fr;
  gap:clamp(24px,4.5vw,72px);align-items:center;
  margin:clamp(48px,6.5vw,96px) 0;
}
.moment figure{margin:0}
.moment img{width:100%;height:auto;display:block}
.moment p{
  font-family:var(--sier);font-style:italic;
  font-variation-settings:normal;font-weight:400;
  font-size:clamp(23px,2.6vw,36px);line-height:1.32;letter-spacing:-.02em;
  color:var(--kastanje);max-width:22ch;
}
@media(max-width:820px){
  .moment{grid-template-columns:1fr;gap:22px;margin:clamp(38px,6vw,60px) 0}
  .moment p{max-width:none}
}

/* een beeld dat het verhaal onderbreekt, over de volle breedte */
.tussenbeeld{margin:clamp(10px,1.6vw,24px) 0}
.tussenbeeld img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
.tussenbeeld figcaption{
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);padding-top:12px;
}

/* Een losse uitspraak, midden op de pagina. Eigen formaat: op .h-sec
   formaat met een breedte in ch brak hij af tot een woord per regel. */
.uitspraak{padding:clamp(26px,4vw,64px) 0;text-align:center}
.uitspraak p{
  font-family:var(--display);
  font-size:clamp(25px,3.9vw,54px);line-height:1.08;letter-spacing:-.03em;
  text-transform:none;font-variation-settings:"wght" 800;
  color:var(--kastanje);max-width:19ch;margin:0 auto;
}
.uitspraak .ital{
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-size:1.06em;letter-spacing:-.02em;color:var(--accent);
}

/* ============================================================
   BEELDKOP
   Een foto over de volle breedte met de titel er wit overheen,
   zwart-wit en rustig. Het moodboard dat de aanleiding was heeft een
   donkere foto; die van Lisa is dat niet overal. Vandaar de sluier
   links: gemeten met de slechtste plek onder elke tekst, niet met het
   gemiddelde, want een lichte pluk haar maakt een letter al onleesbaar.
   Vanaf 30 procent haalt de grote titel 3:1, vanaf 50 procent haalt de
   kleine tekst 4,5:1. De sluier loopt naar rechts uit, zodat het als
   lichtval leest en niet als filter over de foto.
   ============================================================ */
.beeldkop{
  position:relative;overflow:hidden;background:var(--kastanje);
  min-height:clamp(520px,82vh,860px);display:flex;align-items:center;
  margin-bottom:clamp(40px,6vw,90px);
}
.beeldkop > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:58% 42%;
}
.beeldkop::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,.58) 0%, rgba(0,0,0,.50) 40%,
    rgba(0,0,0,.26) 62%, rgba(0,0,0,.05) 84%, rgba(0,0,0,0) 100%);
}
@media(max-width:820px){
  .beeldkop{min-height:clamp(500px,78vh,720px)}
  .beeldkop > img{object-position:64% 38%}
  /* op een smal scherm staat de tekst over de hele breedte, dus dan
     mag de sluier ook overal even zwaar zijn */
  .beeldkop::after{background:linear-gradient(180deg,
    rgba(0,0,0,.52) 0%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.7) 100%)}
}
.beeldkop-in{position:relative;z-index:2;width:100%}

/* het streepje boven de titel, zoals op het moodboard */
.streep{display:block;width:clamp(52px,6vw,96px);height:3px;background:var(--wit);
  margin-bottom:clamp(18px,2.4vw,30px)}

.beeldkop .titel{
  font-family:var(--display);
  font-size:clamp(63px,12.5vw,190px);line-height:.82;letter-spacing:-.05em;
  text-transform:uppercase;font-variation-settings:"wght" 900;
  color:var(--wit);margin:0;
}
.beeldkop .onder{
  margin-top:clamp(24px,3.2vw,40px);max-width:36ch;
  color:var(--wit);font-family:var(--display);
  font-variation-settings:"wght" 400;
  font-size:clamp(14.5px,1.02vw,16px);line-height:1.7;letter-spacing:-.002em;
}
.beeldkop .onder + .onder{margin-top:1.1em}

/* Het grapje onder de introductie. Staat in de schreefcursief omdat het
   een gesproken zin is en geen lopende tekst; de kastanje van het merk is
   op deze foto te donker, dus de lichte variant. */
.beeldkop .grap{
  margin-top:clamp(20px,2.6vw,32px);max-width:31ch;
  font-family:var(--sier);font-style:italic;
  font-variation-settings:normal;font-weight:400;
  /* Op een telefoon staat hij op 25px en niet kleiner. In de lichte
     kastanje haalt hij op het lichtste plekje onder de letters 4,5:1,
     en dat is precies de grens voor lopende tekst. Vanaf 24px telt hij
     als grote tekst, waar 3:1 genoeg is. Zo hoeft de sluier over haar
     portret niet zwaarder. */
  font-size:clamp(25px,1.95vw,26px);line-height:1.34;letter-spacing:-.018em;
  color:var(--accent-licht);
}

.signatuur{
  margin-top:clamp(34px,5vw,68px);display:flex;align-items:baseline;
  gap:clamp(14px,2vw,26px);flex-wrap:wrap;
}
.signatuur .naam{
  font-family:var(--hand);color:var(--wit);
  font-size:clamp(46px,6vw,86px);line-height:.9;
}
.signatuur .tag{color:var(--wit);opacity:.72;font-size:10.5px;letter-spacing:.3em}

/* ---------- de band midden op een pagina ---------- */
/* Eerst stond hier hetzelfde als de beeldkop: foto over de volle breedte
   met een sluier eroverheen. Dat werkte niet. Een staande foto in een brede
   baan levert een plakje op waar haar hoofd niet eens op staat, en op een
   licht doek wordt het onder een sluier gewoon grauw.
   Nu een kastanje vlak naast de foto. Hetzelfde harde contrast, maar de
   foto blijft ongemoeid en de kleur komt uit het merk in plaats van uit een
   bewerking. */
.beeldband{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--kastanje);margin:clamp(50px,7vw,110px) 0;
  align-items:stretch;min-height:clamp(420px,50vw,680px);
}
.beeldband-in{
  display:flex;align-items:center;
  padding:clamp(44px,6vw,96px) clamp(24px,4vw,72px);
}
/* De foto zit in een omhulsel en staat daarbinnen absoluut. Als losse
   raster-item telde zijn eigen hoogte mee bij het opmeten van de rij, en
   werd elke paginakop 1040 pixels hoog in plaats van bijgesneden.
   min-height:0 haalt alleen de automatische minimumhoogte weg, niet die
   bijdrage; absoluut positioneren wel. */
.beeldband-beeld{position:relative;overflow:hidden;min-height:0}
.beeldband-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Op een smal scherm gaat de foto uit het raster-denken. Hij stond hier
   als raster-item met aspect-ratio, en dan kan de rijhoogte de breedte
   gaan bepalen in plaats van andersom: het vak rekt mee met de rij, de
   verhouding rekent daar een breedte bij terug, en de foto wordt smal.
   Nu staat het beeld gewoon in de tekststroom op volle breedte, en komt
   de hoogte uit de verhouding. min-height op nul haalt het uitrekken
   helemaal weg, zodat er niets meer te rekken valt. */
@media(max-width:820px){
  .beeldband{grid-template-columns:1fr;min-height:0}
  .beeldband-beeld{order:-1;position:static;width:100%;aspect-ratio:auto;height:auto;overflow:hidden}
  .beeldband-beeld img{position:static;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
  .beeldband-in{padding:clamp(32px,7vw,52px) clamp(22px,6vw,40px)}
}
.beeldband .uit{
  font-family:var(--display);color:var(--wit);margin:0;
  font-size:clamp(30px,3.9vw,58px);line-height:1;letter-spacing:-.042em;
  font-variation-settings:"wght" 900;text-transform:uppercase;
}
.beeldband .uit .zacht{
  display:block;font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;text-transform:none;
  font-size:1.02em;letter-spacing:-.02em;color:var(--creme);
}
.beeldband .bij{
  margin-top:clamp(20px,2.6vw,32px);max-width:36ch;color:var(--creme);
  font-family:var(--display);font-variation-settings:"wght" 400;
  font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.7;
}
.beeldband .streep{margin-bottom:clamp(20px,2.6vw,32px)}

/* ---------- de band als kop van een pagina ---------- */
/* Zelfde opzet als de band, maar hoger en met de paginatitel erin. Zo
   begint de homepage met een kastanje vlak in plaats van met een strook
   foto en een titel op wit eronder. */
/* Als kop sluit hij boven aan op de balk en onder op de lopende band,
   dus helemaal geen marge. */
.beeldband.hoog{margin:0;min-height:clamp(430px,52vw,700px)}
.beeldband.hoog .beeldband-beeld img{object-position:56% 30%}
.beeldband.hoog .beeldband-in{padding:clamp(48px,6.4vw,104px) clamp(26px,4.2vw,78px)}
/* De paginatitel. Stond alleen binnen de kastanje band; nu een eigen
   onderdeel, zodat alle drie de koppen dezelfde maat gebruiken en alleen
   de kleur verschilt. */
.titel-vlak{
  font-family:var(--display);color:var(--wit);margin:0;
  font-size:clamp(43px,4.8vw,78px);line-height:.9;letter-spacing:-.045em;
  text-transform:uppercase;font-variation-settings:"wght" 900;
}
.titel-vlak .zacht{
  display:block;margin-top:.1em;
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;text-transform:none;
  font-size:.96em;letter-spacing:-.02em;color:var(--accent-licht);
}
.beeldband .voet{
  margin-top:clamp(26px,3.4vw,44px);
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-licht);
}
.beeldband .voet b{font-weight:inherit;opacity:.6}
@media(max-width:820px){
  .beeldband.hoog{min-height:0}
  .beeldband.hoog .beeldband-beeld img{aspect-ratio:4/5}
  .beeldband.hoog .beeldband-in{padding:clamp(34px,7vw,56px) clamp(22px,6vw,40px)}
}

/* tekst en knop op het kastanje vlak van een paginakop */
.beeldband .lead{
  margin-top:clamp(20px,2.6vw,32px);max-width:34ch;color:var(--creme);
  font-family:var(--display);font-variation-settings:"wght" 400;
  font-size:clamp(16px,1.3vw,19px);line-height:1.62;letter-spacing:-.008em;
}
.beeldband .lead + .bij{margin-top:1.1em}
.beeldband .knop{
  margin-top:clamp(24px,3vw,36px);color:var(--creme);border-color:var(--creme);
}
.beeldband .knop::before{background:var(--accent-licht)}
.beeldband .knop:hover{color:var(--kastanje);border-color:var(--accent-licht)}

/* de handle naast de handtekening, zoals op het moodboard */
a.tag.num{transition:opacity var(--fast) var(--ease)}
.signatuur a.tag{color:var(--wit);opacity:.72;text-decoration:none}
.signatuur a.tag:hover{opacity:1}

/* ============================================================
   VEELGESTELDE VRAGEN
   Twee kolommen met korte vraag en antwoord. Vult de lege ruimte
   onder het contactformulier en beantwoordt wat mensen anders mailen.
   ============================================================ */
.vragen{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,3.4vw,56px) clamp(30px,4.4vw,80px);
  margin-top:clamp(30px,4vw,56px);
}
@media(max-width:820px){.vragen{grid-template-columns:1fr;gap:26px}}
.vraag{border-top:1px solid var(--rule);padding-top:clamp(16px,2vw,24px)}
.vraag h3{
  font-family:var(--display);
  font-size:clamp(17.5px,1.5vw,20px);line-height:1.2;letter-spacing:-.018em;
  text-transform:none;font-variation-settings:"wght" 700;
  color:var(--kastanje);margin-bottom:10px;
}
.vraag p{color:var(--grijs);max-width:46ch}

/* de reactietijd: geen handschrift meer maar dezelfde letter als de koppen */
.reactie{
  font-family:var(--display);font-variation-settings:"wght" 700;
  font-size:clamp(19px,1.9vw,25px);line-height:1.25;letter-spacing:-.02em;
  color:var(--kastanje);margin-top:clamp(22px,2.8vw,32px);max-width:22ch;
}
.reactie .ital{font-size:1.04em}

/* korte vraag: knoppen naar WhatsApp en Instagram, boven het directe blok */
.snel{margin-top:clamp(28px,3.6vw,44px);padding-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--rule)}
.snel-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.knop-klein{padding:14px 22px;font-size:9.5px;letter-spacing:.26em}

/* De uitnodigende tekst in de kastanje slotblokken mag steviger staan;
   die moet net zo goed leesbaar zijn als de kop erboven. */
.slotblok .body{
  font-variation-settings:"wght" 500;
  font-size:clamp(16.5px,1.3vw,19px);line-height:1.62;
}

/* twee pakketten naast elkaar in plaats van drie */
.duo-pakket{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(30px,4vw,54px);align-items:start}
@media(max-width:900px){.duo-pakket{grid-template-columns:1fr;gap:18px}}

/* ============================================================
   DE MENUKAART
   De diensten staan als drie gangen op een kaart. Geen kaartjes
   naast elkaar maar onder elkaar met een haarlijn ertussen, zoals
   een echte menukaart. Het romeinse cijfer en de gangnaam links,
   wat het inhoudt rechts.
   ============================================================ */
.menukaart{margin-top:clamp(30px,4vw,56px);border-top:1px solid var(--rule)}
.gang{
  display:grid;grid-template-columns:.34fr .66fr;
  gap:clamp(20px,4vw,72px);
  padding:clamp(32px,4.6vw,64px) 0;border-bottom:1px solid var(--rule);
}
@media(max-width:820px){.gang{grid-template-columns:1fr;gap:16px;padding:clamp(28px,4vw,44px) 0}}

.gang-kop{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,20px)}
/* De schuine strepen uit het logo als gangnummer: een voor de Starter,
   twee voor de Main, drie voor het Dessert. */
.gang-nr{
  font-family:var(--display);font-size:clamp(15px,1.5vw,20px);
  letter-spacing:-.02em;color:var(--accent);
  font-variation-settings:"wght" 700;flex:none;padding-top:.15em;
}
.gang-naam{
  font-family:var(--display);
  font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:-.035em;
  text-transform:uppercase;font-variation-settings:"wght" 900;color:var(--kastanje);
}
.gang-onder{
  font-family:var(--sier);font-style:italic;
  font-size:clamp(16px,1.5vw,20px);line-height:1.3;letter-spacing:-.015em;
  color:var(--accent);margin-top:.35em;
}
.gang-voorwie{
  font-variation-settings:"wght" 600;color:var(--kastanje);
  font-size:clamp(16.5px,1.3vw,19px);line-height:1.5;margin-bottom:.9em;
}
.gang-body > p{color:var(--grijs);max-width:52ch}
.gang-lijst{
  list-style:none;margin:clamp(20px,2.6vw,30px) 0 clamp(24px,3vw,34px);
  display:grid;gap:9px;max-width:46ch;
}
.gang-lijst li{
  position:relative;padding-left:22px;color:var(--grijs);
  font-size:clamp(15px,1.05vw,16.5px);line-height:1.5;
}
.gang-lijst li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:1px;background:var(--accent);
}
/* De afsluitende regel als eigen balk, niet als losse alinea die tegen de
   kaart aan plakt. */
/* De balk onder de drie gangen. Stond eerst als lichte doos met een dikke
   streep ernaast; dat trok meer aandacht dan de gangen erboven. Nu in de
   kleur van het merk, dunner, en met genoeg lucht naar de kop eronder. */
.menu-balk{
  margin:clamp(26px,3.4vw,44px) 0 0;
  background:var(--kastanje);
  padding:clamp(15px,1.7vw,21px) clamp(18px,2.2vw,28px);
  color:rgba(222,218,208,.88);max-width:74ch;
  font-size:clamp(14.5px,1.02vw,16px);line-height:1.62;
}

/* de beelden bij een case, onder het verhaal */
.case-beeld{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,1.1vw,16px);margin-top:clamp(24px,3vw,40px);
}
.case-beeld:has(> :nth-child(4)){grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){
  .case-beeld,.case-beeld:has(> :nth-child(4)){grid-template-columns:repeat(2,1fr);gap:8px}
}
.case-beeld figure{margin:0;overflow:hidden}
.case-beeld img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;transition:scale 1s var(--ease)}
.case-beeld figure:hover img{scale:1.03}

/* een handgeschreven regeltje onder de titel op het kastanje vlak */
.krabbel{
  font-family:var(--hand);color:var(--accent-licht);
  font-size:clamp(26px,3.3vw,46px);line-height:1.3;
  margin-top:clamp(18px,2.2vw,28px);rotate:-2deg;transform-origin:left center;
}

.na-balk{padding-top:clamp(52px,7vw,104px)}

/* Kopje boven de twee kaarten met beeld. Kleiner dan een sectiekop, want
   het hoort bij het blok erboven en begint geen nieuw hoofdstuk. */
.kaartkop{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--rule);padding-top:clamp(20px,2.4vw,30px)}
.kaartkop .h-sub{margin-top:10px}
.kaartkop p.body{margin-top:10px;max-width:52ch}

/* ============================================================
   REVIEWS
   Een balk met echte reviews die opzij scrolt, net als de strook
   met werk erboven. Elke kaart is even hoog en de naam staat
   onderaan op een lijn, ook als de ene review langer is dan de
   andere; anders gaan die namen zweven.
   ============================================================ */
.reviews{
  display:flex;gap:clamp(10px,1.2vw,18px);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;padding:clamp(26px,3.6vw,48px) var(--gut) 10px;
  /* Zonder deze regel klikt de eerste kaart vast tegen de schermrand en
     valt de marge links weg, terwijl de kop erboven wel inspringt. */
  scroll-padding-inline:var(--gut);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:stretch;
}
.reviews::-webkit-scrollbar{display:none}
.review{
  flex:none;width:clamp(268px,26vw,380px);scroll-snap-align:start;
  background:var(--wit);border:1px solid var(--kastanje);
  padding:clamp(22px,2.4vw,32px);
  display:flex;flex-direction:column;
}
@media(max-width:820px){.review{width:78vw}}
.review-sterren{
  color:var(--accent);font-size:13px;letter-spacing:.22em;line-height:1;
  margin-bottom:clamp(14px,1.8vw,20px);
}
.review p{
  color:var(--grijs);font-size:clamp(14.5px,1vw,16px);line-height:1.62;
  flex:1;margin:0;
}
.review-wie{
  margin-top:clamp(18px,2.2vw,26px);padding-top:clamp(14px,1.6vw,18px);
  border-top:1px solid var(--rule);
}
.review-naam{
  display:block;font-family:var(--display);font-variation-settings:"wght" 700;
  font-size:clamp(14.5px,1.1vw,16.5px);letter-spacing:-.014em;color:var(--kastanje);
}
.review-bron{
  display:block;font-family:var(--label);font-size:9px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--grijs);margin-top:5px;
}

/* ============================================================
   APPJES
   Wat klanten na afloop stuurden, als berichtjes. De hele site
   heeft rechte hoeken; deze niet, want dan lees je meteen dat
   het uit een telefoon komt en niet uit een reviewformulier.
   ============================================================ */
.appjes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,48px);margin-top:clamp(30px,4vw,54px);
  align-items:start;
}
@media(max-width:820px){.appjes{grid-template-columns:1fr;gap:26px}}
.appgroep{display:grid;gap:7px;justify-items:start}
.bubbel{
  background:var(--wit);border:1px solid var(--kastanje);
  border-radius:16px 16px 16px 5px;
  padding:clamp(11px,1.2vw,15px) clamp(14px,1.5vw,19px);
  color:var(--grijs);max-width:100%;
  font-size:clamp(14.5px,1vw,16px);line-height:1.5;
}
.appgroep .bubbel:first-child{border-radius:16px 16px 16px 16px}

/* ============================================================
   WAT IK DOE
   De site liet vooral beeld zien en niet wat er voor dat beeld
   bedacht wordt. Dit blok zegt het in vier stukken, zodat
   niemand na het scrollen nog hoeft te raden wat het werk is.
   Wit vlak met een kastanje kader; geen beige.
   ============================================================ */
.doen{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--kastanje);border:1px solid var(--kastanje);
  margin-top:clamp(30px,4.4vw,60px);
}
@media(max-width:820px){.doen{grid-template-columns:1fr}}
.doen > div{background:var(--wit);padding:clamp(24px,2.8vw,42px)}
.doen-nr{
  display:block;font-family:var(--label);font-size:10px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--vonk);margin-bottom:clamp(14px,1.8vw,20px);
}
.doen h3{
  font-family:var(--display);font-variation-settings:"wght" 800;
  font-size:clamp(20px,2vw,27px);line-height:1.1;letter-spacing:-.028em;
  color:var(--kastanje);margin-bottom:10px;
}
.doen p{color:var(--grijs);max-width:42ch;font-size:clamp(15px,1.05vw,16.5px);line-height:1.62}

/* ============================================================
   ONDERSCHRIFT OP HET PORTFOLIO
   De naam van de categorie staat in de gewone sectiekop; de
   omschrijving eronder in het handschrift. Zo staat er een
   stevige kop met een terloopse aantekening ernaast, in plaats
   van andersom.
   ============================================================ */
.pf-onder{
  font-family:var(--hand);color:var(--accent);
  /* Karumbi tekent klein binnen zijn regel, dus de maat staat hoger dan
     bij gewone lopende tekst. */
  font-size:clamp(28px,3.2vw,46px);line-height:1.12;
  rotate:-1.6deg;transform-origin:left center;
  display:block;width:fit-content;max-width:100%;
}

/* Het merk op het kastanje vlak. De naam stond hier in de schreefcursief
   getypt, en dat lijkt niet op het logo; nu staat het logo er zelf, in de
   cremeversie zodat hij op kastanje leesbaar blijft. */
.beeldband .uit-merk{
  display:block;width:clamp(150px,17vw,268px);height:auto;
  margin-top:clamp(10px,1.3vw,18px);
}
.beeldband .uit-merk + .bij{margin-top:clamp(20px,2.6vw,34px)}
.beeldband .bij + .bij{margin-top:1em}

/* ============================================================
   BEKIJK HET WERK
   Een link naar het echte bericht op TikTok of Instagram, onder
   een case. Bewijs dat je kunt aanklikken weegt zwaarder dan een
   zin waarin staat dat iets goed liep.
   ============================================================ */
.bekijk{
  display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,22px);
  margin-top:clamp(22px,2.8vw,34px);
}
.bekijk .pijl{margin-top:0}

/* ============================================================
   MANIFEST
   De belangrijkste slogan. Stond als een band met alleen tekst en
   dat las als een tussenkopje; nu een eigen moment met een smalle
   strook beeld ernaast, zodat het gewicht krijgt.
   ============================================================ */
.sloganvlak{background:var(--kastanje);color:var(--creme);overflow:hidden}
.sloganvlak-in{
  display:grid;grid-template-columns:1fr clamp(180px,22vw,340px);
  gap:var(--ruim-m);align-items:center;
  padding-block:var(--ruim-l);
}
@media(max-width:820px){
  .sloganvlak-in{grid-template-columns:1fr;gap:var(--ruim-s);padding-block:var(--ruim-m)}
}
.sloganvlak-label{
  font-family:var(--label);font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--accent-licht);
  margin-bottom:var(--ruim-s);
}
.sloganvlak-beeld{margin:0;overflow:hidden}
.sloganvlak-beeld img{
  width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover;
  transition:scale 1.2s var(--ease);
}
.sloganvlak:hover .sloganvlak-beeld img{scale:1.04}
@media(max-width:820px){.sloganvlak-beeld img{aspect-ratio:16/9}}

.slogan-regel{
  font-family:var(--display);font-variation-settings:"wght" 800;
  font-size:clamp(24px,3.1vw,46px);line-height:1.06;letter-spacing:-.036em;
  text-transform:uppercase;color:var(--creme);
}
.slogan-uit{
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;text-transform:none;
  letter-spacing:-.02em;color:var(--accent-licht);
  font-size:clamp(29px,4.6vw,68px);
}

/* ============================================================
   STAPKAARTEN
   De vier stappen stonden als vier tekstvakjes in een raster. Nu
   liggende kaarten met beeld die om en om verspringen, zodat het
   ritme heeft en je in een oogopslag ziet waar een stap begint.
   ============================================================ */
/* Vier stappen naast elkaar in plaats van vier brede kaarten onder
   elkaar. Om en om links en rechts was een leuk ritme, maar je moest er
   vier schermen voor scrollen om te zien dat het maar vier zinnen zijn.
   Nu staat de hele werkwijze in één blik op de pagina. */
.stapkaarten{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--gut) var(--kier);margin-top:var(--ruim-m);
}
@media(max-width:1000px){.stapkaarten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.stapkaarten{grid-template-columns:1fr;gap:var(--ruim-s)}}
.stapkaart{display:flex;flex-direction:column;background:var(--wit)}
.stapkaart-beeld{margin:0;overflow:hidden}
.stapkaart-beeld img{
  width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;
  transition:scale 1.3s var(--ease);
}
.stapkaart:hover .stapkaart-beeld img{scale:1.04}
.stapkaart-in{padding-top:clamp(14px,1.6vw,20px)}
.stapkaart-nr{
  display:block;font-family:var(--label);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);margin-bottom:clamp(8px,1vw,12px);
}
.stapkaart h3{
  font-family:var(--display);font-variation-settings:"wght" 800;
  font-size:clamp(17px,1.35vw,20px);line-height:1.14;letter-spacing:-.024em;
  color:var(--kastanje);margin-bottom:8px;
}
.stapkaart p{color:var(--grijs);font-size:clamp(14px,.98vw,15.5px);line-height:1.6}

/* De hotels waar zij het vak leerde. Staat er als mededeling en niet als
   argument: de namen doen het werk, dus er hoeft geen zin omheen die
   uitlegt waarom dat bijzonder is. */
.herkomst{
  margin-top:clamp(16px,2vw,24px);max-width:var(--lees-smal);
  font-size:clamp(14.5px,1.02vw,16px);line-height:1.6;color:var(--accent);
}

/* De kleine Engelse regels: nadrukkelijk kleiner dan de slogan, zodat
   die de belangrijkste blijft. */
.microregel{
  font-family:var(--label);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);line-height:1.8;max-width:46ch;
}
.beeldband .microregel{color:var(--accent-licht);margin-top:clamp(20px,2.6vw,30px)}
.slotblok .microregel{color:var(--accent-licht)}

/* ============================================================
   GROEPEN OP DE CASESPAGINA
   Werk uit eerdere functies staat los van het werk dat vanuit de
   studio is gedaan. Een kop met een regel eronder is genoeg; een
   zwaar kader zou het verdedigend laten lijken.
   ============================================================ */
.groep{
  margin:clamp(52px,7vw,110px) 0 clamp(26px,3.4vw,44px);
  border-top:1px solid var(--kastanje);padding-top:clamp(18px,2.2vw,28px);
}
.groep:first-child{margin-top:0;border-top:0;padding-top:0}
.groep-titel{
  font-family:var(--display);font-variation-settings:"wght" 900;
  font-size:clamp(24px,2.8vw,40px);line-height:1;letter-spacing:-.035em;
  text-transform:uppercase;color:var(--kastanje);
}
.groep-onder{
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.02em;
  font-size:clamp(16px,1.5vw,21px);color:var(--accent);margin-top:8px;
}

/* de regel onder een casetitel, en het label bij werk uit dienstverband */
.case-onder{
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.02em;
  font-size:clamp(16px,1.5vw,21px);color:var(--accent);margin-top:12px;max-width:24ch;
}
.case-label{
  margin-top:clamp(14px,1.8vw,22px);
  font-family:var(--label);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grijs);line-height:1.9;
}

/* de afsluitende regel onder een case: een zin, dus in de schreefcursief
   en niet in de gespatieerde kapitalen die voor korte labels zijn */
.case-slot{
  margin-top:clamp(18px,2.2vw,28px);
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.02em;
  font-size:clamp(17px,1.6vw,23px);line-height:1.3;color:var(--kastanje);max-width:30ch;
}

/* ============================================================
   HET RASTER
   Twaalf kolommen op desktop. Elk blok dat naast elkaar staat
   hangt hieraan, zodat een titel op de ene pagina op dezelfde
   lijn begint als op de andere.
   ============================================================ */
.raster{display:grid;grid-template-columns:repeat(var(--kolom),1fr);gap:var(--kier)}
@media(max-width:900px){.raster{grid-template-columns:repeat(6,1fr)}}
@media(max-width:560px){.raster{grid-template-columns:1fr;gap:var(--ruim-s)}}
/* de standaardverdeling: kop op vier kolommen, tekst op zes, met een
   kolom lucht ertussen */
.raster > .kolom-kop{grid-column:1 / span 4}
.raster > .kolom-tekst{grid-column:6 / span 6}
@media(max-width:900px){
  .raster > .kolom-kop{grid-column:1 / -1}
  .raster > .kolom-tekst{grid-column:1 / -1}
}

/* ============================================================
   HET ACCENT
   Rood-oranje, alleen op een lichte ondergrond: daar haalt het
   5,97:1 op wit en 5,43:1 op papier. Op kastanje blijft het op
   2,93:1 steken, dus daar gebruiken we de lichte kastanje.
   Nooit als vlak, alleen als streepje, cijfer of pijl.
   ============================================================ */
.vonk{color:var(--vonk)}
.tag-k .vonk,.label .vonk{color:var(--vonk)}
.aangestreept{
  background:linear-gradient(transparent 62%, rgba(178,58,30,.22) 62%);
  padding:0 .06em;
}

/* ---------- rondingen volgens de vaste set ----------
   Fotografie blijft haaks. Een afgeronde hoek maakt een foto een
   plaatje in een doosje; recht afgesneden leest hij als beeld dat de
   pagina in loopt. De ronding is er alleen nog voor wat geen foto is:
   de reviewkaartjes en de appjes, waar het juist het onderwerp is. */
.review{border-radius:var(--rond-m)}
.bubbel{border-radius:16px 16px 16px 5px}
.groteKaart,.kaart,.stapkaart{border-radius:var(--rond-0)}
.groteKaart .beeld img,.stapkaart-beeld img{border-radius:var(--rond-0)}
.album-beeld,.moment img,.kgang-beeld,.sloganvlak-beeld{border-radius:var(--rond-0)}
.strip img,.grid-clean img,.case-beeld img{border-radius:var(--rond-0)}
.collage figure > img,.kopB-beeld .klein,.kopB-beeld .klein img{border-radius:var(--rond-0)}
.beeldkop > img,.beeldband-beeld img{border-radius:var(--rond-0)}

/* ============================================================
   KOP B // EDITORIAL COLLAGE
   Voor de servicespagina. De oude kop was een groot kastanje vlak
   met alleen een titel links; dat las als een gat. Nu staat de
   titel op papier en ligt er rechts een collage van drie beelden
   met verschillende verhoudingen, waarvan er een overlapt.
   ============================================================ */
.kopB{
  display:grid;grid-template-columns:repeat(var(--kolom),1fr);
  gap:var(--kier);align-items:center;
  /* padding-block en niet de padding-afkorting: die zette de zijmarge
     van .wrap op nul en dan liep de tekst het scherm uit. */
  padding-block:var(--ruim-l) var(--ruim-m);
}
.kopB-tekst{grid-column:1 / span 5}
.kopB-beeld{grid-column:7 / span 6;position:relative}
@media(max-width:900px){
  .kopB{grid-template-columns:1fr;padding-block-start:var(--ruim-m)}
  .kopB-tekst,.kopB-beeld{grid-column:1 / -1}
}
.kopB .titel-vlak{color:var(--kastanje)}
.kopB .titel-vlak .zacht{color:var(--accent)}
.kopC .titel-vlak{color:var(--wit)}
.kopB .voet{
  margin-top:var(--ruim-s);border-top:0;padding:0;
  font-family:var(--label);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);
}
.kopB .voet b{color:var(--vonk);opacity:1}

/* de kleine vakwoorden onder de titel */
.vakken{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--ruim-s);
}
.vakken span{
  font-family:var(--label);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid var(--rule);border-radius:var(--rond-s);
  padding:7px 12px;
}

/* de collage: een hoog beeld, een liggend beeld eronder en een klein
   vierkant dat over de rand valt */
.collage{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--kier);align-items:start}
.collage figure{margin:0}
.collage figure > img{
  width:100%;height:auto;display:block;object-fit:cover;
  transition:scale 1.2s var(--ease);
}
.collage figure:hover > img{scale:1.03}
.collage .hoog img{aspect-ratio:3/4}
.collage .laag img{aspect-ratio:4/5}
/* Het kleine beeld valt met opzet een stukje buiten de collage, maar
   blijft binnen de kolom: een negatieve waarde naar rechts duwde hem
   eerder het scherm uit. */
.kopB-beeld .klein{
  position:absolute;left:6%;bottom:-8%;width:28%;margin:0;
  border:6px solid var(--wit);
  box-shadow:0 18px 46px rgba(61,0,0,.16);overflow:hidden;
}
.kopB-beeld .klein img{
  width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;
}
@media(max-width:900px){
  .kopB-beeld .klein{position:static;width:46%;margin-top:calc(var(--kier) * -2);border-width:5px}
}
.bijschrift{
  font-family:var(--label);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--grijs);padding-top:9px;
}

/* ============================================================
   KOP C // FULL BLEED
   Voor het portfolio. Een beeld over de volle breedte met de
   titel eroverheen, en de categorieen er direct onder.
   ============================================================ */
.kopC{
  position:relative;overflow:hidden;background:var(--zwart);
  min-height:clamp(420px,64vh,680px);display:flex;align-items:flex-end;
}
.kopC > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.kopC::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* De sluier is onderin zwaarder dan hij oogt: het kleine label haalde
     op het lichtste plekje maar 4,29:1 en dat is te weinig voor tekst
     van tien punten. Bovenin blijft hij licht, zodat het beeld ademt. */
  /* De sluier loopt eerder op dan hij oogt. Op de lichte opnamen, zoals
     de coupes in de zon, haalde de lopende tekst onderin anders maar
     3,22:1 en dat is te weinig voor letters van zestien punten. */
  background:linear-gradient(180deg,
    rgba(0,0,0,.30) 0%, rgba(0,0,0,.10) 24%,
    rgba(0,0,0,.58) 52%, rgba(0,0,0,.86) 78%, rgba(0,0,0,.94) 100%);
}
/* Op een telefoon staat de paginatitel veel lager in het beeld, want
   de kop is daar bijna vierkant. Op een lichte opname liep hij dan dwars
   over een glas en haalde hij 2,51:1. Daarom is de sluier daar dieper. */
@media(max-width:700px){
  .kopC::after{
    background:linear-gradient(180deg,
      rgba(0,0,0,.34) 0%, rgba(0,0,0,.14) 18%,
      rgba(0,0,0,.66) 44%, rgba(0,0,0,.90) 72%, rgba(0,0,0,.96) 100%);
  }
}
.kopC-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(26px,3.6vw,54px)}
.kopC .titel-vlak{color:var(--wit)}
.kopC-label{
  font-family:var(--label);font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--wit);margin-bottom:clamp(14px,1.8vw,22px);
}
.kopC-onder{
  margin-top:clamp(14px,1.8vw,22px);max-width:44ch;color:var(--wit);
  font-family:var(--display);font-variation-settings:"wght" 400;
  font-size:clamp(15px,1.15vw,17.5px);line-height:1.65;
}


/* ---------- het accent op de kleine details ---------- */
/* Alleen op wit en papier: op kastanje haalt dit rood 2,93:1 en dan is
   het geen accent meer maar een leesprobleem. */
.cat.active{color:var(--wit)}
.cat.active::after{background:var(--vonk)}
.pijl:hover{color:var(--vonk)}
.pijl:hover i{background:var(--vonk);border-color:var(--vonk)}
a.ac-naam:hover{color:var(--vonk)}
a.ac-naam:hover i{background:var(--vonk)}
.doen > div:hover .doen-nr{color:var(--vonk)}


/* ============================================================
   DE VOET
   Het afsluitende merkonderdeel. De naam groot, de positionering
   eronder, dan vier kolommen en tot slot de kleine letters.
   ============================================================ */
footer.voet .voet-signatuur{
  font-family:var(--display);font-variation-settings:"wght" 900;
  font-size:clamp(42px,8vw,120px);line-height:.86;letter-spacing:-.05em;
  text-transform:uppercase;color:var(--kastanje);
}
footer.voet .voet-regel{
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.02em;
  font-size:clamp(17px,1.7vw,24px);color:var(--accent);
  margin-top:var(--ruim-xs);max-width:34ch;
}
footer.voet .voet-boven{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ruim-m);
  margin-top:var(--ruim-l);padding-top:var(--ruim-m);
  border-top:1px solid var(--rule);
}
@media(max-width:820px){footer.voet .voet-boven{grid-template-columns:1fr 1fr;gap:var(--ruim-s)}}
@media(max-width:460px){footer.voet .voet-boven{grid-template-columns:1fr}}
footer.voet .voet-quote{
  font-family:var(--display);font-variation-settings:"wght" 800;
  font-size:clamp(19px,1.8vw,25px);line-height:1.12;letter-spacing:-.028em;
  color:var(--kastanje);
}
footer.voet .voet-quote .ital{font-size:1.06em}

/* ============================================================
   DE ROUTE
   De loopbaan als opsomming, niet als cv met bolletjes en een
   lijn. Grote nummers, de plek eronder, en een korte regel. Op
   een breed scherm staan het nummer en de tekst naast elkaar.
   ============================================================ */
.route{list-style:none;margin:var(--ruim-m) 0 0;padding:0;counter-reset:halte}
.halte{
  display:grid;grid-template-columns:clamp(70px,9vw,132px) 1fr;
  gap:clamp(18px,3vw,48px);align-items:start;
  border-top:1px solid var(--rule);
  padding:clamp(22px,3vw,42px) 0;
}
.halte:last-child{border-bottom:1px solid var(--rule)}
@media(max-width:620px){.halte{grid-template-columns:1fr;gap:8px}}
.halte-nr{
  font-family:var(--display);font-variation-settings:"wght" 900;
  font-size:clamp(30px,4.4vw,64px);line-height:.86;letter-spacing:-.05em;
  color:var(--vonk);
}
.halte h3{
  font-family:var(--display);font-variation-settings:"wght" 800;
  font-size:clamp(21px,2.2vw,31px);line-height:1.06;letter-spacing:-.03em;
  color:var(--kastanje);
}
.halte-plek{
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.02em;
  font-size:clamp(16px,1.5vw,21px);color:var(--accent);margin-top:4px;
}
.halte-tekst{
  color:var(--grijs);max-width:var(--lees);margin-top:clamp(10px,1.3vw,16px);
  font-size:clamp(15px,1.05vw,16.5px);line-height:1.66;
}


/* de branche onder een casetitel: een klein editorial regeltje */
.case-meta{
  margin-top:clamp(12px,1.6vw,18px);
  font-family:var(--label);font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent);
}
.case-meta b{font-weight:inherit;color:var(--vonk)}

/* ============================================================
   BLOK
   Beeld aan de ene kant, tekst aan de andere. Om en om, zodat een
   pagina ritme krijgt zonder dat de tekst gaat zwerven: alles hangt
   aan dezelfde twee kolommen.
   ============================================================ */
.blok{
  display:grid;grid-template-columns:.42fr .58fr;
  gap:clamp(24px,4vw,72px);align-items:center;
  margin-top:var(--ruim-l);
}
.blok-om{grid-template-columns:.58fr .42fr}
.blok-om .blok-beeld{order:2}
@media(max-width:820px){
  .blok,.blok-om{grid-template-columns:1fr;gap:var(--ruim-s)}
  .blok-om .blok-beeld{order:0}
}
.blok-beeld{margin:0;overflow:hidden}
.blok-beeld img{
  width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;
  transition:scale 1.2s var(--ease);
}
.blok:hover .blok-beeld img{scale:1.03}
.blok-tekst .body{max-width:var(--lees)}

/* het grapje op een lichte ondergrond */
.grap-licht{
  margin-top:var(--ruim-s);max-width:34ch;
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;letter-spacing:-.018em;
  font-size:clamp(18px,1.7vw,24px);line-height:1.34;color:var(--accent);
}

/* ============================================================
   CASES INKLAPBAAR
   Vijf volledige cases onder elkaar is te veel om te lezen. Nu
   staat er een rij koppen met per case een regel over wat er
   gedaan is; wie meer wil, klapt hem open.
   ============================================================ */
.case-knop{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(18px,3vw,48px);text-align:left;cursor:pointer;
  background:none;border:0;border-top:1px solid var(--kastanje);
  padding:clamp(24px,3.4vw,48px) 0;margin:0;font:inherit;color:inherit;
  transition:opacity .4s var(--ease);
}
.case:last-of-type .case-knop{border-bottom:1px solid var(--kastanje)}
.case[data-open="true"] + .case .case-knop{border-top-color:var(--kastanje)}
.case-knop-in{display:block}
.case-titel{
  display:block;font-family:var(--display);font-variation-settings:"wght" 900;
  font-size:clamp(28px,4vw,58px);line-height:.96;letter-spacing:-.042em;
  text-transform:uppercase;color:var(--kastanje);margin-top:clamp(10px,1.4vw,16px);
  transition:color .4s var(--ease);
}
.case-knop:hover .case-titel{color:var(--vonk)}
.case-knop .case-meta{display:block;margin-top:clamp(8px,1.1vw,14px)}
.case-kort{
  display:block;margin-top:clamp(10px,1.4vw,18px);max-width:var(--lees);
  color:var(--grijs);font-size:clamp(15px,1.05vw,16.5px);line-height:1.6;
}
.case-knop .case-label{display:block;margin-top:clamp(10px,1.3vw,16px)}
/* het plusje dat een kruis wordt */
.case-open{
  flex:none;position:relative;
  width:clamp(34px,2.6vw,44px);height:clamp(34px,2.6vw,44px);
  border:1px solid var(--kastanje);border-radius:50%;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.case-open::before,.case-open::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--kastanje);
  transition:transform .45s var(--ease),background .4s var(--ease);
}
.case-open::before{width:13px;height:1px;transform:translate(-50%,-50%)}
.case-open::after{width:1px;height:13px;transform:translate(-50%,-50%)}
.case-knop:hover .case-open{background:var(--vonk);border-color:var(--vonk)}
.case-knop:hover .case-open::before,.case-knop:hover .case-open::after{background:var(--wit)}
.case-knop[aria-expanded="true"] .case-open::after{transform:translate(-50%,-50%) rotate(90deg)}
.case-uit[hidden]{display:none}
.case-uit{padding-bottom:clamp(26px,3.6vw,56px)}

/* het grote portret in een kop B, in plaats van een collage van drie */
.portret-groot-beeld{margin:0;overflow:hidden}
.portret-groot-beeld img{
  width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;
  transition:scale 1.2s var(--ease);
}
.kopB-beeld:hover .portret-groot-beeld img{scale:1.03}


/* ============ DUOQUOTE ============
   Een staande merkfoto naast een uitspraak. De brede fotoquote hierboven
   werkt alleen met de twee liggende opnamen; voor de staande beelden uit
   het brandbook staat het beeld links en de tekst ernaast op wit. */
.duoquote{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  margin:clamp(50px,7vw,110px) 0;background:var(--wit);
}
.duoquote-beeld{margin:0;position:relative;overflow:hidden}
.duoquote-beeld img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.duoquote-tekst{padding:clamp(30px,4vw,64px) clamp(26px,5vw,96px)}
@media(max-width:860px){
  .duoquote{grid-template-columns:1fr}
  .duoquote-tekst{padding:clamp(26px,6vw,40px) var(--gut) 0}
}

/* Een uitspraak boven in een staande merkfoto. In die shoot is de
   bovenkant van elk beeld leeg beige, dus daar kan een regel staan
   zonder dat er een sluier overheen hoeft. */
.beeld-quote{position:relative}
.beeld-quote-tekst{
  position:absolute;left:0;right:0;top:0;z-index:2;
  padding:clamp(20px,2.6vw,36px) clamp(20px,2.6vw,34px) 0;
  font-family:var(--hand);color:var(--kastanje);
  font-size:clamp(21px,2.1vw,32px);line-height:1.34;
  rotate:-2deg;transform-origin:left top;
}

/* ============ FOTOQUOTE ============
   Een merkfoto over de volle breedte met een uitspraak in het lege beige
   ernaast. Dezelfde gedachte als de kopfoto, alleen halverwege een
   pagina en zonder paginatitel. Links of rechts, afhankelijk van waar
   zij in het beeld staat: .rechts zet de tekst aan de andere kant. */
.fotoquote{position:relative;background:var(--wit);margin:clamp(50px,7vw,110px) 0}
.fotoquote-beeld{margin:0;position:relative;width:100%;overflow:hidden;line-height:0}
.fotoquote-beeld img{display:block;width:100%;height:100%;object-fit:cover}
.fotoquote-uit{
  font-family:var(--display);color:var(--zwart);margin:0;
  font-size:clamp(26px,3vw,44px);line-height:1.02;letter-spacing:-.036em;
  font-variation-settings:"wght" 800;text-transform:uppercase;
}
.fotoquote-uit .zacht{
  display:block;font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;text-transform:none;
  font-size:1.02em;letter-spacing:-.02em;color:var(--kastanje);
}
.fotoquote-bij{
  margin-top:clamp(18px,2.4vw,30px);max-width:34ch;color:var(--kastanje);
  font-family:var(--display);font-variation-settings:"wght" 400;
  font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.7;
}
.fotoquote-hand{
  font-family:var(--hand);color:var(--accent);
  font-size:clamp(24px,2.4vw,34px);line-height:1.3;
  margin-top:clamp(16px,2vw,26px);rotate:-2deg;transform-origin:left center;
}
@media(min-width:861px){
  .fotoquote-beeld{aspect-ratio:16/9;max-height:74vh}
  .fotoquote-beeld img{object-position:50% 8%}
  .fotoquote-in{position:absolute;inset:0;z-index:2;display:flex;align-items:center;pointer-events:none}
  .fotoquote-in .wrap{width:100%;display:flex}
  .fotoquote-tekst{max-width:min(38%,520px)}
  .fotoquote.rechts .fotoquote-in .wrap{justify-content:flex-end}
}
@media(max-width:860px){
  .fotoquote-beeld{aspect-ratio:4/5}
  .fotoquote-beeld img{object-position:50% 18%}
  .fotoquote-in{padding-top:clamp(24px,5.5vw,36px)}
}

/* ============ KOPFOTO ============
   De hoofdbanner van de voorpagina. Het beeld loopt van rand tot rand,
   want dat is het eerste wat iemand ziet. De tekst staat in het lege
   beige links naast haar. Er ligt bewust geen donkere sluier overheen:
   de letters staan alleen op het stuk waar toch niets gebeurt, en de
   foto blijft precies zoals hij uit de shoot kwam. */
.kopfoto{position:relative;background:var(--wit)}
.kopfoto-beeld{margin:0;position:relative;width:100%;overflow:hidden;line-height:0}
.kopfoto-beeld img{display:block;width:100%;height:100%;object-fit:cover}

.kopfoto .titel-vlak{color:var(--zwart)}
.kopfoto .titel-vlak .zacht{color:var(--kastanje)}
.kopfoto .krabbel{color:var(--accent)}
.kopfoto .voet{
  margin-top:clamp(22px,3vw,38px);
  font-family:var(--label);font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);
}
.kopfoto .voet b{font-weight:inherit;opacity:.55}

@media(min-width:1024px){
  .kopfoto-beeld{aspect-ratio:16/9;max-height:82vh}
  .kopfoto-beeld img{object-position:50% 18%}
  /* De tekst ligt over het beeld, maar vangt geen klikken: wie op de
     foto sleept of tikt moet gewoon bij de foto uitkomen. */
  .kopfoto-in{position:absolute;inset:0;z-index:2;display:flex;align-items:center;pointer-events:none}
  /* De foto loopt van rand tot rand, dus de tekst houdt dezelfde marge
     aan als de foto en niet die van het gecentreerde raster. Anders
     schuift de tekst op een breed scherm naar het midden toe terwijl
     zij op de foto blijft staan waar ze staat. */
  .kopfoto-in .wrap{width:100%;max-width:none}
  /* Haar arm begint op ongeveer 32% van de foto. De kolom stopt daar
     ruim voor, gerekend vanaf de schermrand en niet vanaf het raster,
     want anders liepen de laatste letters op een smal scherm tot op
     haar jasje en waren ze daar onleesbaar. */
  .kopfoto-tekst{max-width:min(calc(32vw - var(--gut) - 26px),470px)}
  /* Groter dan een gewone paginakop. Dit is de eerste blik op de site en
     mag zich gedragen als een omslag. */
  .kopfoto .titel-vlak{font-size:clamp(40px,5.4vw,96px)}
  .kopfoto .krabbel{margin-top:clamp(26px,3vw,42px)}
}
@media(max-width:1023px){
  /* Onder de duizend staat de tekst onder de foto op wit. Op een tablet
     past de liggende opname gewoon in zijn eigen verhouding; op een
     telefoon zou die een streepje worden en wordt hij staand
     bijgesneden op het midden, waar zij staat. */
  .kopfoto-beeld{aspect-ratio:3/2}
  .kopfoto-beeld img{object-position:50% 30%}
  .kopfoto-in{padding-top:clamp(26px,6vw,38px);padding-bottom:clamp(6px,2vw,14px)}
}
@media(max-width:640px){
  .kopfoto-beeld{aspect-ratio:4/5}
  .kopfoto-beeld img{object-position:50% 22%}
}


/* ============================================================
   VOORPAGINA // HOOFDSTUKKEN EN VAKKEN
   De voorpagina loopt als een verhaal: een hoofdstuk met een
   gecentreerde kop en een alinea op creme papier, dan meteen een
   rij vakken met beeld van rand tot rand, dan weer een hoofdstuk. Zo
   wisselt tekst zich af met beeld in plaats van blok op blok.

   Een vak is een foto of een stuk tekst, nooit
   allebei. Daardoor staat er nergens tekst half over een beeld.
   ============================================================ */

/* De hoekregel boven een hoofdstuk. Drie stukjes: een nummer links, de
   naam van het hoofdstuk in het midden en waar het over gaat rechts.
   Dat maakt van elke sectie een bladzijde in plaats van een blok. */
.hoofdregel{
  display:flex;align-items:baseline;gap:var(--kier);
  font-family:var(--label);font-size:9.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--accent);line-height:1.6;
}
.hoofdregel > span:nth-child(2){flex:1;text-align:center}
.hoofdregel > span:last-child{text-align:right}
@media(max-width:640px){.hoofdregel{font-size:8.5px;letter-spacing:.22em}}

/* Een klein onderschrift onder een rij beeld, zoals in een tijdschrift. */
.beeldbij{
  font-family:var(--label);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--grijs);
  margin-top:14px;padding-bottom:clamp(10px,1.4vw,18px);
}

/* ---------- het hoofdstuk: gecentreerd en met lucht ---------- */
.hoofdstuk{background:var(--papier);padding:clamp(62px,8.4vw,136px) 0}
.hoofdstuk-mid{max-width:600px;margin:0 auto;text-align:center}
.hoofdstuk-titel{
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-size:clamp(32px,4.4vw,66px);line-height:1.06;letter-spacing:-.022em;
  color:var(--kastanje);margin-top:clamp(20px,2.4vw,34px);
}
.hoofdstuk-titel b{
  display:block;font-family:var(--display);font-style:normal;
  font-variation-settings:"wght" 800;text-transform:uppercase;
  letter-spacing:-.03em;font-size:.78em;color:var(--zwart);
}
.hoofdstuk-tekst{
  margin-top:clamp(18px,2.2vw,28px);color:var(--grijs);
  font-size:clamp(15px,1.08vw,16.5px);line-height:1.78;
}
.hoofdstuk-tekst + .hoofdstuk-tekst{margin-top:1em}
/* Verdeel de regels gelijkmatig in plaats van een volle regel met een
   los woord eronder. Dat was wat er gek uitzag bij de gecentreerde
   stukjes: een zin liep bijna helemaal uit en de rest stond alleen. */
.hoofdstuk-titel,.hoofdstuk-tekst,.sloganband-tekst,.kopC-onder{text-wrap:balance}

/* ---------- de vakkenrij: beeld van rand tot rand ---------- */
.vakkenrij{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--rule-soft);margin:0;
}
.vakkenrij.vier{grid-template-columns:repeat(4,1fr)}
/* Wat er na een hoofdstuk komt hoeft niet nog eens de volle sectielucht
   te krijgen: het creme vlak heeft die ruimte al. */
.hoofdstuk + .sec{padding-top:clamp(38px,4.8vw,74px)}
@media(max-width:900px){.vakkenrij,.vakkenrij.vier{grid-template-columns:repeat(2,1fr)}}
/* Op een telefoon gaat de rij naar een kolom, zodat een foto en de
   tekst die erbij hoort onder elkaar staan. Een rij die alleen uit
   beeld bestaat krijgt .dubbel en blijft twee aan twee, want anders
   wordt dat een eindeloze rij. */
@media(max-width:560px){
  /* Een rij waarin beeld en tekst elkaar afwisselen gaat naar een kolom,
     zodat een foto en de tekst die erbij hoort onder elkaar staan. */
  .vakkenrij,.vakkenrij.vier{grid-template-columns:1fr}
  /* Een rij met alleen beeld blijft twee aan twee. Anders wordt elke
     foto een vierkant van de volle breedte en scrol je op een telefoon
     door een stapel losse blokken. De laatste van een oneven aantal
     gaat over beide kolommen en wordt liggend bijgesneden. */
  .vakkenrij:not(:has(.vak-tekst)),.vakkenrij.dubbel{grid-template-columns:repeat(2,1fr)}
  /* En de foto's houden hun eigen staande verhouding, zodat er op een
     telefoon niets van het beeld wegvalt. Een oneven laatste loopt over
     beide kolommen en wordt daar het grote beeld van de rij. */
  .vakkenrij:not(.duo) .vak > img{aspect-ratio:2/3}
  .vakkenrij:not(:has(.vak-tekst)) .vak:last-child:nth-child(odd){grid-column:1 / -1}
  .vakkenrij:not(:has(.vak-tekst)) .vak:last-child:nth-child(odd) > img{aspect-ratio:2/3}
  /* De gecentreerde stukjes iets compacter, zodat er meer op een scherm
     past en de pagina minder als losse vlakken leest. */
  .hoofdstuk{padding:clamp(46px,13vw,62px) 0}
  .tussen{padding:clamp(46px,13vw,62px) 0}
  .sloganband{padding:clamp(54px,15vw,74px) 0}
}

.vak{position:relative;background:var(--wit);overflow:hidden}
.vak > img{
  display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;
  transition:scale 1.4s var(--ease);
}
.vak:hover > img{scale:1.04}

/* De tekstcel heeft dezelfde maat als een foto, dus het raster blijft
   kloppen ook als er een stuk verhaal tussen staat. */
.vak-tekst{
  aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,2.6vw,42px);background:var(--papier);
}
.vak-tekst.donker{background:var(--kastanje);color:var(--creme)}
.vak-tekst.donker .vak-nr,.vak-tekst.donker .vak-klein{color:var(--accent-licht)}
.vak-tekst.donker .vak-titel{color:var(--creme)}
/* In een kastanje cel moet ook de cursief meekleuren. Het accentbruin
   haalde daar maar 1,91:1 en was niet te lezen. */
.vak-tekst.donker .vak-titel .ital{color:var(--accent-licht)}
.vak-tekst.donker .vak-klein{color:var(--creme)}
@media(max-width:540px){.vak-tekst{aspect-ratio:auto;padding-block:clamp(30px,8vw,44px)}}

.vak-nr{
  font-family:var(--label);font-size:9.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--accent);margin-bottom:auto;
}
.vak-titel{
  font-family:var(--display);font-variation-settings:"wght" 800;
  font-size:clamp(20px,1.9vw,29px);line-height:1.06;letter-spacing:-.028em;
  text-transform:uppercase;color:var(--kastanje);margin-top:clamp(14px,1.6vw,20px);
}
.vak-titel .ital{
  display:block;font-family:var(--sier);font-style:italic;font-weight:400;
  font-variation-settings:normal;text-transform:none;letter-spacing:-.02em;
  color:var(--accent);
}
.vak-klein{
  margin-top:clamp(10px,1.2vw,14px);color:var(--grijs);
  font-size:clamp(14px,.98vw,15.5px);line-height:1.6;
}
.vak-link{
  margin-top:clamp(14px,1.6vw,20px);
  font-family:var(--label);font-size:9.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--kastanje);
  border-bottom:1px solid var(--rule);padding-bottom:4px;align-self:flex-start;
}
.vak-link:hover{color:var(--accent);border-color:var(--accent)}
.vak-tekst.donker .vak-link{color:var(--creme);border-color:var(--rule-creme)}

/* Een wit stuk tussen twee hoofdstukken. Het krijgt dezelfde lucht
   boven en onder als een hoofdstuk, zodat wit en creme elkaar nooit
   strak op de tekst raken. Zonder deze regel plakte het kastanje
   tekstvlak van de appjes tegen het creme blok eronder. */
.tussen{padding:clamp(62px,8.4vw,136px) 0}
.tussen > .wrap > .hoofdstuk-mid + *{margin-top:clamp(36px,4.6vw,66px)}

/* De strook met reviews hangt onder een hoofdstuk en heeft onderin
   net zo veel lucht nodig als erboven. */
.reviews{padding-bottom:clamp(26px,3.6vw,48px)}

/* ---------- de sloganband ----------
   Op kastanje en niet op wit. Op wit stond hij tussen twee creme
   hoofdstukken in en kreeg je twee luchtige blokken achter elkaar; als
   kleurvlak is het een eigen moment en blijft het om en om lopen. */
.sloganband{padding:clamp(74px,10vw,158px) 0;background:var(--kastanje)}
.sloganband .hoofdregel{color:var(--accent-licht)}
.sloganband-tekst{
  text-align:center;margin-top:clamp(30px,4vw,62px);
  font-family:var(--sier);font-style:italic;font-weight:400;
  font-size:clamp(27px,4vw,60px);line-height:1.14;letter-spacing:-.022em;
  color:var(--accent-licht);
}
.sloganband-tekst b{
  font-family:var(--display);font-style:normal;font-variation-settings:"wght" 800;
  text-transform:uppercase;letter-spacing:-.03em;color:var(--creme);font-size:.8em;
}

/* ---------- varianten op de twee bouwstenen ---------- */

/* Een kopfoto waarbij zij links van het midden staat: dan is het lege
   beige juist rechts, dus daar hoort de tekst. */
@media(min-width:1024px){
  .kopfoto.rechts .kopfoto-in .wrap{display:flex;justify-content:flex-end}
  .kopfoto.rechts .kopfoto-tekst{max-width:min(calc(30vw - var(--gut) - 26px),450px)}
}

/* Twee vakken naast elkaar, waarvan er een een foto is en de ander een
   heel stuk tekst. De cellen rekken mee met de langste in plaats van
   vierkant te blijven, anders past een opsomming er nooit in. */
.vakkenrij.duo{grid-template-columns:1fr 1fr}
/* De foto staat absoluut in de cel, anders bepaalt zijn eigen hoogte de
   rij en wordt een staande opname van 800 bij 1200 een blok van ruim
   duizend pixels hoog naast een half leeg tekstvak. */
.vakkenrij.duo .vak{min-height:clamp(300px,40vw,620px)}
.vakkenrij.duo .vak > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.vakkenrij.duo .vak-tekst{
  aspect-ratio:auto;justify-content:center;
  padding:clamp(30px,4vw,66px) clamp(26px,3.6vw,58px);
}
.vakkenrij.duo .vak-tekst.om{order:-1}
@media(max-width:760px){
  .vakkenrij.duo{grid-template-columns:1fr}
  /* De foto staat op een telefoon altijd boven de gang die erbij hoort,
     ook bij een omgedraaid blok. Anders komen er twee foto's achter
     elkaar te staan en weet je niet meer welke bij welke gang hoort. */
  .vakkenrij.duo .vak-tekst.om{order:1}
  /* En hij staat weer gewoon in de stroom in zijn eigen verhouding. Als
     absolute foto werd hij door de minimumhoogte van de cel tot een
     brede strook bijgesneden. */
  .vakkenrij.duo .vak{min-height:0}
  .vakkenrij.duo .vak > img{position:static;height:auto;aspect-ratio:2/3}
}

/* Een opsomming binnen een tekstvak. */
.vak-lijst{margin-top:clamp(14px,1.8vw,22px);display:grid;gap:9px}
.vak-lijst li{
  list-style:none;position:relative;padding-left:17px;
  color:var(--grijs);font-size:clamp(14px,.98vw,15.5px);line-height:1.55;
}
.vak-lijst li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:1px;background:var(--accent);
}
.vak-tekst.donker .vak-lijst li{color:var(--creme)}
.vak-tekst.donker .vak-lijst li::before{background:var(--accent-licht)}

/* Het merkteken in een hoofdstuk, voor het stuk over de naam. */
/* Het handschrift staat standaard op kastanje en is daarom licht. Op een
   wit of creme vlak moet het juist donker, anders haalt het 1,83:1. */
.tussen .krabbel,.hoofdstuk .krabbel{color:var(--accent)}

/* Het merkteken als tweede regel van een kop. Het staat op de plek waar
   anders de cursief staat, dus het krijgt ongeveer dezelfde hoogte. */
.hoofdstuk-titel .hoofdstuk-merk{
  display:block;width:auto;height:.82em;
  margin:.1em auto 0;
}

/* Het contactformulier staat gecentreerd in een eigen kolom in plaats
   van naast een kolom met losse blokjes en een ingelijste foto. */
.formulier-mid{max-width:700px;margin:clamp(30px,4vw,56px) auto 0}
.formulier-mid .btn,.formulier-mid button{width:100%}
.vak-tekst .vak-klein a{border-bottom:1px solid var(--rule)}
.vak-tekst.donker .vak-klein a,.vak-tekst.donker .vak-lijst a{color:var(--creme);border-bottom:1px solid var(--rule-creme)}

/* Een rij vakken waarin de tekst langer is dan een vierkant aankan: de
   cellen groeien mee met de langste in plaats van vierkant te blijven. */
.vakkenrij.open .vak-tekst{
  aspect-ratio:auto;justify-content:flex-start;
  padding-block:clamp(30px,4vw,58px);
}
.vakkenrij.open .vak-nr{margin-bottom:clamp(14px,1.8vw,22px)}
.vakkenrij.open .vak-link{margin-top:auto;padding-top:clamp(16px,2vw,24px)}

/* Een kop met een staande foto erin. Een portret van 2 op 3 in een brede
   band wordt anders vijf keer uitvergroot en dan zie je alleen nog een
   hoofd. Hoger maken scheelt: er past meer van het beeld in. */
.kopC.hoog{min-height:clamp(520px,88vh,940px)}

/* Een rij waarin de foto's hun eigen staande verhouding houden. Voor
   beelden die niet bijgesneden mogen worden, zoals een opname waar de
   hele scene nodig is om te zien wat er gebeurt. */
.vakkenrij.staand .vak > img{aspect-ratio:2/3}
.vakkenrij.staand .vak-tekst{aspect-ratio:2/3}
@media(max-width:560px){
  .vakkenrij.staand .vak:last-child:nth-child(odd) > img{aspect-ratio:2/3}
  .vakkenrij.staand .vak-tekst{aspect-ratio:auto}
}

/* Twee vierkante foto's naast elkaar met daaronder een liggende over de
   volle breedte. Voor een rij waarin een van de beelden liggend is: in
   een vierkant vak zou daar de helft van wegvallen. */
.vakkenrij.tweeplus{grid-template-columns:repeat(2,1fr)}
.vakkenrij.tweeplus .vak:last-child{grid-column:1 / -1}
/* In zijn eigen liggende verhouding, niet tot een bredere strook
   gerekt: dan valt er boven en onder van het beeld af. */
.vakkenrij.tweeplus .vak:last-child > img{aspect-ratio:3/2}

/* Een paginakop met een liggende foto toont die foto in zijn eigen
   verhouding. De gewone kop is een brede band, en daarin zou een
   opname van drie op twee boven en onder worden afgesneden. */
.kopC.liggend{min-height:0;aspect-ratio:3/2}

/* ---------- verticale video ----------
   Vier reels naast elkaar in de verhouding waarin ze gemaakt zijn. Ze
   staan stil tot ze in beeld komen en stoppen weer zodra je ze
   voorbijscrolt, zodat een telefoon niet vier films tegelijk laadt. */
.vakkenrij.reels .vak{background:var(--zwart)}
.vakkenrij.reels video{
  display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:9/16;
}
@media(max-width:560px){
  .vakkenrij.reels{grid-template-columns:repeat(2,1fr)}
  .vakkenrij.reels .vak:last-child:nth-child(odd){grid-column:auto}
}

/* De knop om het geluid aan te zetten. Een reel loopt zonder geluid,
   want anders mag hij van de browser niet vanzelf beginnen. Deze
   video's zijn pratende video's, dus de uitnodiging om te luisteren
   moet opvallen: een luidsprekertje van vierenveertig pixels, groot
   genoeg om met een duim te raken, vol kastanje zodat het op elk beeld
   leesbaar blijft. Je kunt ook gewoon op de video zelf tikken. */
.geluid{
  position:absolute;z-index:3;
  right:clamp(10px,1.1vw,16px);bottom:clamp(10px,1.1vw,16px);
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 15px 0 12px;
  background:var(--kastanje);color:var(--creme);border:0;
  font-family:var(--label);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.geluid:hover{background:var(--accent);color:var(--wit)}
.geluid:focus-visible{outline:2px solid var(--creme);outline-offset:3px}
.geluid svg{width:19px;height:19px;flex:none;fill:currentColor;stroke:currentColor}
.geluid .geluid-luid,.geluid .geluid-aan{display:none}
.geluid[aria-pressed="true"] .geluid-stil,.geluid[aria-pressed="true"] .geluid-uit{display:none}
.geluid[aria-pressed="true"] .geluid-luid{display:block}
.geluid[aria-pressed="true"] .geluid-aan{display:inline}
/* De hele video is ook een schakelaar, net als in een tijdlijn. */
.vakkenrij.reels .vak{cursor:pointer}
@media(max-width:700px){
  /* Op een telefoon blijft alleen het luidsprekertje over: het woord
     erbij zou de knop breder maken dan het halve beeld. */
  .geluid{padding:0;width:44px;justify-content:center;gap:0}
  .geluid .geluid-woord{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* Op een telefoon vallen de foto's tussen de vier stappen weg. De
   voorpagina heeft daar al beeld genoeg: de banner, de rij van drie en
   het werkraster van zeven. Op een laptop staan ze er wel, want daar
   staan ze naast de tekst en niet erboven. De volgorde van de vakken
   is zo gekozen dat de kleuren ook zonder die foto's om en om lopen. */
@media(max-width:560px){
  .vakkenrij.stappen .vak:not(.vak-tekst){display:none}
}

/* Op de casepagina liep het creme vlak tot halverwege de witte ruimte
   en stond het streepje van de eerste case daaronder op wit. Nu eindigt
   de kleur precies op dat streepje. */
.hoofdstuk + .sec:has(.case){padding-top:0}
.hoofdstuk + .sec .case:first-of-type{margin-top:0}

/* ---------- de taalkeuze ----------
   Klein en rechts van het menu. Op een telefoon staat hij naast de
   menuknop en dus buiten het uitklapmenu, want je moet altijd kunnen
   wisselen zonder eerst het menu te openen. */
.taal{
  display:flex;align-items:center;gap:0;flex:none;
  font-family:var(--label);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
}
/* De letters blijven klein, het aanraakvlak niet: met een duim moet je
   het in een keer raken, dus beide woorden zijn 44px hoog. */
.taal a,.taal .taal-nu{
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 8px;
}
.taal .taal-nu{color:var(--kastanje);font-variation-settings:"wght" 600}
.taal a{color:var(--accent)}
.taal a:hover{color:var(--kastanje)}
.taal span[aria-hidden]{opacity:.45}
@media(max-width:900px){
  .taal{margin-left:auto;margin-right:clamp(4px,1.6vw,12px);font-size:10.5px}
}
/* Op een smalle telefoon past de menuknop er anders niet meer naast.
   Het vak blijft 44px hoog, alleen de ruimte links en rechts krimpt. */
@media(max-width:420px){
  .taal a,.taal .taal-nu{padding:0 4px}
  .taal{letter-spacing:.14em}
}