/* ===== LETTERTYPEN ======================================================
   Zelf gehost in plaats van via fonts.googleapis.com. Die route kostte twee
   extra verbindingen voordat er een letter op het scherm stond: eerst het
   stijlblad ophalen bij googleapis, dat vervolgens naar gstatic verwijst
   voor de bestanden zelf. Beide moesten klaar zijn voordat de pagina iets
   toonde, en daar begint ook de openingsanimatie pas.

   Archivo is een variabel lettertype: een bestand voor alle gewichten van
   400 tot 800 en alle breedtes van 62 tot 125 procent. De site gebruikt
   die breedte-as ook echt, onder meer op de woorden van de opening.

   Alleen latin en latin-ext. De overige subsets die Google meelevert
   (cyrillisch, vietnamees) komen op een Nederlandse site niet voor. Met
   unicode-range haalt de browser latin-ext alleen op als er een teken op
   de pagina staat dat erin zit.

   Beide families staan onder de Open Font License, dus zelf hosten mag.
   ==================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-normal-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: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-normal-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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-italic-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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================================
   KMW homepage, filmische opzet. Palet en letters komen uit
   kmw/kmwpost_render.py, hetzelfde systeem als de carrousel.

   De pagina is een scrollend verhaal: donker als grondtoon, crème als
   onderbreking, en per scène een nummer. Alles wat beweegt start vanuit
   een ZICHTBARE ruststand, dus zonder JavaScript, zonder scroll-timeline
   en met prefers-reduced-motion staat de pagina compleet en leesbaar.
   ===================================================================== */
:root {
  --groen:  #1E3B2E;
  --diep:   #12261D;
  --nacht:  #0A160F;
  --pek:    #060E09;
  --creme:  #F6F3EB;
  --salie:  #8FA89A;
  --inkt:   #121712;

  --lijn-op-creme:  rgba(30, 59, 46, .20);
  --lijn-op-groen:  rgba(143, 168, 154, .28);
  --sluimer-creme:  rgba(18, 23, 18, .65);
  --sluimer-groen:  rgba(246, 243, 235, .58);

  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --kop-xxl: clamp(2.7rem, 8vw, 6.6rem);
  --kop-xl:  clamp(2.3rem, 6vw, 4.6rem);
  --kop-l:   clamp(1.9rem, 4.6vw, 3.4rem);
  --kop-m:   clamp(1.4rem, 3vw, 2.1rem);
  --tekst:   clamp(1rem, 1.35vw, 1.16rem);
  --klein:   .76rem;

  --marge: clamp(1.25rem, 4.6vw, 4.5rem);
  --breed: 1360px;
  --soepel: cubic-bezier(.22, 1, .36, 1);
  --traag:  cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* ===== LENIS =========================================================
   De stylesheet die bij Lenis hoort en die ik eerder vergat. Zonder deze
   regels staat scroll-behavior: smooth nog aan, en dan animeert de browser
   zélf naar elke positie die Lenis zestig keer per seconde zet. Die twee
   vechten: de pagina blijft achter en schiet daarna in één keer door. Dat
   was precies het gedrag.
   ===================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Zonder Lenis (geen JavaScript, of beweging uitgezet) blijft het netjes
   soepel springen naar een anker. */
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.lenis) { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--nacht); color: var(--creme);
  font-family: var(--serif); font-size: var(--tekst); line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--salie); outline-offset: 4px; }

/* ===== DE OPENING =====================================================
   Drie woorden, dan de telefoon, dan de site. Roys eigen drieslag van
   kaart 5 van de carrousel: Bekend. Vertrouwd. Gebeld. Dat is de hele
   merkreis in drie woorden en het is al door hem geschreven.

   Daarna wordt het laatste woord het scherm van een telefoon, en die
   telefoon groeit uit tot de pagina. Zo komen beide referenties samen:
   de punchy woorden en het toestel waarop het werk leeft.

   Traag en zwaar, niet snel en speels: dat is het verschil tussen luxe
   en druk. Pure CSS, zodat het hoe dan ook wegtrekt, met een vangnet in
   het script. De pagina eronder staat compleet, dus crawler en thumbnail
   zien gewoon de site.
   ===================================================================== */
.opening { position: fixed; inset: 0; z-index: 100; background: var(--pek);
           display: grid; place-items: center; pointer-events: none;
           overflow: hidden; }
.opening::after {           /* vignet, voor diepte */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(118% 88% at 50% 46%, transparent 42%, rgba(0,0,0,.72) 100%);
}
/* Een verloop naar donker over een heel scherm bandt op acht bits: je ziet
   ringen in plaats van een vloeiende overgang. Deze fijne ruislaag breekt
   die randen, net als dither in beeldbewerking. Vier procent dekking is
   genoeg om de banden weg te halen en te weinig om als korrel te lezen. */
.opening .ruis { position: absolute; inset: 0; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.42'/%3E%3C/svg%3E");
  background-size: 140px 140px; }

.woorden { position: relative; display: grid; place-items: center;
           width: 100%; height: 100%; }
.woorden b {
  position: absolute; font-family: var(--sans); font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 7rem); font-stretch: 86%;
  letter-spacing: -.03em; color: var(--creme); line-height: 1;
  opacity: 0; white-space: nowrap;
}
/* Gebeld. is het klapstuk van de drieslag maar stond het zwakst in beeld:
   saliegroen op gewicht 500, terwijl de twee ervoor vol creme op 800
   staan. Het blijft de serif-cursief, want dat is het accent van het merk,
   maar nu in dezelfde volle kleur, een slag groter dan de rest en met een
   gloed die vooruitloopt op het licht dat zo over het logo gaat. */
.woorden b.laatste { font-family: var(--serif); font-weight: 500;
                     font-style: italic; font-stretch: normal;
                     letter-spacing: -.01em; color: var(--creme);
                     font-size: clamp(2.6rem, 10.6vw, 8.2rem);
                     text-shadow: 0 0 38px rgba(143,168,154,.42); }
.woorden .streep { position: absolute; bottom: clamp(3rem, 13vh, 7.5rem);
                   width: clamp(92px, 15vw, 180px); height: 1px;
                   background: rgba(143,168,154,.28); overflow: hidden; }
.woorden .streep::after { content: ""; position: absolute; inset: 0;
                          background: var(--salie); transform-origin: 0 50%;
                          transform: scaleX(0); }

/* Het toestel dat uit het laatste woord ontstaat en de pagina onthult. */
.ontvouw { position: absolute; width: clamp(214px, 28vw, 310px);
           aspect-ratio: 9 / 19; border: 2px solid rgba(143,168,154,.5);
           border-radius: 30px; background: var(--nacht); opacity: 0;
           box-shadow: 0 40px 110px -30px rgba(0,0,0,.95); }

/* Het toestel stond zeshonderd milliseconden leeg te wachten tot het
   opengroeide. Daar gebeurt nu de merkonthulling.

   Het logo is 18:1, dus binnen een frame van 190px zou het een haarlijn van
   acht pixels worden. Het ligt daarom over het toestel heen en steekt aan
   weerszijden uit: een band licht dwars over het apparaat.

   Twee kopieen van hetzelfde bestand boven elkaar. De onderste staat op
   dertien procent, de bovenste wordt met clip-path van links naar rechts
   vrijgegeven. Clip-path en niet een verloopmasker, omdat de rand daarvan
   exact op een percentage van de breedte ligt: de straal kan er dan met
   dezelfde timing precies bovenop lopen. */
/* Het logo stond eerst breder dan het toestel en sneed er dwars doorheen,
   wat als een botsing las in plaats van als een ontwerp. Het staat nu op
   het scherm zelf, op tweeënzeventig procent van de schermbreedte: de
   splash van een app, en dat is precies wat dit apparaat hier is. */
.merk { position: absolute; left: 50%; top: 50%; width: 72%;
        transform: translate(-50%, -50%);
        display: grid; place-items: center; isolation: isolate; opacity: 0; }
.merk img { grid-area: 1 / 1; width: 100%; height: auto; display: block; }
.merk .dof { opacity: .13; }
.merk .vol { clip-path: inset(0 100% 0 0); }

/* De straal: geen strakke balk maar een uitgeveegde ovaal, anders leest hij
   als een witte doos over het logo heen. */
/* Absoluut en niet als rasteronderdeel: in het raster staat hij al
   gecentreerd en telde left daar bovenop, waardoor de straal achter de
   onthulling aan liep in plaats van er precies op. Zo is het midden van de
   straal exact de left-waarde. Smal en hoog, zodat het een lichtveeg is en
   geen vlek. */
.merk .straal { position: absolute; top: 50%; left: 0;
                width: 13%; height: 760%; opacity: 0;
                transform: translate(-50%, -50%);
                mix-blend-mode: screen; pointer-events: none;
                background: radial-gradient(50% 50% at 50% 50%,
                            rgba(255,255,255,.98), rgba(198,226,212,.42) 42%,
                            transparent 70%);
                filter: blur(6px); }

/* Het scherm van het toestel licht mee op, zodat het apparaat niet dood
   achter de band blijft liggen. */
.ontvouw .scherm { position: absolute; inset: 0; border-radius: inherit;
                   opacity: 0; background:
                   radial-gradient(74% 40% at 50% 50%,
                     rgba(143,168,154,.46), transparent 70%); }

@media (prefers-reduced-motion: no-preference) {
  /* Elk woord komt zwaar op en zakt weer weg. */
  /* De drieslag liep van 0,12 tot 2,24s en dat was het grootste deel van
     de wachttijd. Korter per woord en dichter op elkaar: elk woord staat
     nog ruim een derde seconde vol in beeld, genoeg voor een enkel woord,
     en de reeks is nu op 1,78s klaar in plaats van op 2,24s. */
  .woorden b { animation: woord .72s var(--traag) both; }
  .woorden b:nth-child(1) { animation-delay: .08s; }
  .woorden b:nth-child(2) { animation-delay: .50s; }
  .woorden b:nth-child(3) { animation-delay: .92s; animation-duration: .86s; }
  @keyframes woord {
    0%   { opacity: 0; transform: translateY(30px) scale(.97); filter: blur(7px); }
    26%  { opacity: 1; transform: none; filter: blur(0); }
    74%  { opacity: 1; transform: none; filter: blur(0); }
    100% { opacity: 0; transform: translateY(-16px) scale(1.02); filter: blur(5px); }
  }
  .woorden .streep::after { animation: vullen 1.5s var(--soepel) .12s both; }
  @keyframes vullen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .woorden .streep { animation: dim .36s ease 1.58s both; }
  @keyframes dim { to { opacity: 0; } }

  /* Het toestel verschijnt waar het laatste woord stond en groeit dan
     open tot het de hele pagina is. */
  /* De zoom zat op dezelfde sterk voorbelaste versnelling als de rest van
     de opening, waardoor hij binnen honderd milliseconden klaar was: je
     zag een sprong naar een vlak en daarna pas de pagina. De laatste twee
     stappen hebben nu hun eigen versnelling die juist opbouwt, zodat de
     zoom zevenhonderd milliseconden duurt en het gordijn er middenin kan
     oplossen. */
  .ontvouw { animation: toestel 1.3s var(--traag) 1.52s both; }
  @keyframes toestel {
    0%   { opacity: 0; transform: scale(.72); border-radius: 30px; }
    18%  { opacity: 1; transform: scale(1); border-radius: 30px; }
    42%  { opacity: 1; transform: scale(1); border-radius: 30px;
           animation-timing-function: cubic-bezier(.5, 0, .78, .36); }
    100% { opacity: 1; transform: scale(14); border-radius: 0;
           border-color: transparent; }
  }
  /* --- de merkonthulling ---------------------------------------------
     Alles hieronder deelt dezelfde duur, vertraging en versnelling, zodat
     de straal exact op de rand van de onthulling blijft liggen. */
  /* merk-door staat op forwards en niet op both: met both vulde ook die
     tweede animatie terugwaarts, en omdat hij later in de lijst staat won
     zijn 0%-stand (opacity 1) van merk-op. Het gedimde logo hing daardoor
     al achter de drie woorden. */
  /* Het logo doofde zodra de zoom begon, waardoor je het alleen klein op
     het toestel zag: op een scherm van 1728px is dat 223px breed en 12px
     hoog, oftewel nul procent van de pixels boven helderheid 150. Het
     blijft nu staan terwijl de zoom het naar je toe brengt en dooft pas
     als het de breedte van het bronbestand voorbij gaat. Daar wordt het
     groot en leesbaar, zonder dat er iets bijkomt. */
  .merk { animation: merk-op .55s var(--soepel) 1.58s both,
                     merk-door .34s ease-in 2.24s forwards; }
  /* Op een breed scherm is het logo 13 procent van de breedte en heeft het
     dus alle ruimte om naar voren te komen: het gaat pas buiten beeld als
     het al gedoofd is. Op een telefoon is het al 41 procent en raakt het de
     schermrand bij een zoom van 2,4, midden in zijn beste moment. Daar
     dooft het daarom eerder, zodat de naam niet half afgesneden blijft
     staan. */
  @media (max-width: 700px) {
    .merk { animation: merk-op .55s var(--soepel) 1.58s both,
                       merk-door .30s ease-in 2.14s forwards; }
  }
  /* Niet alleen opkomen maar ook aankomen: een halve procent krimp die
     zich rechtzet terwijl het licht erover loopt. */
  @keyframes merk-op {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(.955); }
    40%  { opacity: 1; }
    100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  }
  /* Op het eind vliegen we er doorheen, gelijk met het toestel. */
  /* Geen eigen schaal meer: het logo hangt in het toestel en schaalt dus
     al mee met de zoom. Het hoeft alleen te doven voordat die zoom het
     onleesbaar uitvergroot. De translate uit de basisstijl moet hier
     herhaald worden, anders springt het logo uit het midden. */
  /* De zoom versnelt, dus het logo is pas laat groot. De dekking blijft
     daarom tot zeventig procent vrijwel vol en valt dan in een keer weg:
     op het moment dat het logo het grootst en nog scherp is, is het ook
     nog zichtbaar. */
  @keyframes merk-door {
    0%   { opacity: 1;  filter: blur(0);    transform: translate(-50%,-50%); }
    70%  { opacity: .9; filter: blur(0); }
    100% { opacity: 0;  filter: blur(12px); transform: translate(-50%,-50%); }
  }

  .merk .vol { animation: ontsteken .55s var(--soepel) 1.64s both; }
  @keyframes ontsteken {
    0%   { clip-path: inset(0 100% 0 0);
           filter: drop-shadow(0 0 0 rgba(143,168,154,0)); }
    60%  { filter: drop-shadow(0 0 18px rgba(143,168,154,.8)); }
    100% { clip-path: inset(0 0 0 0);
           filter: drop-shadow(0 0 8px rgba(143,168,154,.35)); }
  }

  /* left loopt van 0 naar 100 procent van de merkbreedte, exact de baan
     die de rand van de clip-path aflegt. */
  .merk .straal { animation: straal .55s var(--soepel) 1.64s both; }
  @keyframes straal {
    0%   { opacity: 0; left: -2%;  transform: translate(-50%,-50%) scaleY(.5); }
    12%  { opacity: 1; }
    74%  { opacity: 1; }
    100% { opacity: 0; left: 102%; transform: translate(-50%,-50%) scaleY(1); }
  }

  .ontvouw .scherm { animation: schermgloed .95s ease 1.66s both; }
  @keyframes schermgloed {
    0%   { opacity: 0; }
    48%  { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Het gordijn loste pas op als het toestel al klaar was met inzoomen,
     dus zag je eerst een vlak en daarna pas de pagina. Nu begint het
     oplossen midden in de zoom: je vliegt het scherm in en de homepagina
     komt er doorheen tevoorschijn. */
  /* Deze begon eerst op 2,86s, midden in het moment waarop het logo groot
     naar voren kwam: de twee gebeurtenissen vochten en het logo lag over de
     homepagina heen. Nu pas daarna, en nog altijd tijdens de zoom. */
  .opening { animation: opening-weg .4s ease 2.60s both; }
  @keyframes opening-weg { to { opacity: 0; visibility: hidden; } }
}
@media (prefers-reduced-motion: reduce) { .opening { display: none; } }

/* De eerste scène komt op zodra de opening voorbij is. */
@media (prefers-reduced-motion: no-preference) {
  .na-opening { animation: zacht-in 1.1s var(--soepel) 2.60s both; }
  @keyframes zacht-in { from { opacity: 0; transform: translateY(18px); }
                        to { opacity: 1; transform: none; } }
}


/* ===== DE GROND ========================================================
   Eén vast vlak achter alles dat van kleur wisselt terwijl je scrolt. Zo
   fadet de hele pagina van crème naar pek in plaats van dat er een harde
   rand voorbijkomt. De secties zelf zijn daarom doorzichtig.
   ===================================================================== */
.grond { position: fixed; inset: 0; z-index: -2; background: var(--pek);
         transition: background-color 1.05s var(--soepel); }

/* ===== DE CURSOR =======================================================
   Een rondje dat de muis volgt. mix-blend-mode difference laat hem vanzelf
   omslaan: donker op crème, licht op pek. Geen kleurlogica nodig, en hij
   klopt dus ook midden in een fade. Alleen op apparaten met een muis.
   ===================================================================== */
.stip { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
        border-radius: 50%; mix-blend-mode: difference; opacity: 0;
        width: 9px; height: 9px; background: var(--creme);
        margin: -4.5px 0 0 -4.5px;
        transition: opacity .3s ease, width .32s var(--soepel),
                    height .32s var(--soepel), margin .32s var(--soepel); }
body.muis .stip { opacity: 1; }
body.muis.grijpt .stip { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
@media (prefers-reduced-motion: reduce), (hover: none) { .stip { display: none; } }
@media (hover: hover) and (pointer: fine) { body.muis { cursor: none; }
  body.muis a, body.muis button { cursor: none; } }

/* ===== SCHERMHOGE SCÈNES ===============================================
   De verhaalsecties vullen het scherm. De secties met veel inhoud (vragen,
   blog) niet: daar zou een vaste hoogte de tekst afknellen.
   ===================================================================== */
.scene { min-height: 100svh; display: grid; align-content: center; }
.scene > .binnen { width: 100%; }

/* ===== MENU ============================================================
   Vol scherm, items rechts uitgelijnd in de schreefletter met een nummer
   links en een haarlijn ertussen. Dicht is het een gewone link, dus zonder
   JavaScript blijft de navigatie werken.
   ===================================================================== */

/* Het kruis rechtsboven in het menu, op dezelfde hoogte als de menuknop
   eronder, zodat je oog er al is als het menu opent. */
.menulaag .kruis { position: absolute; top: clamp(.7rem, 1.6vw, 1.1rem);
                   right: var(--marge); width: 34px; height: 34px;
                   background: none; border: 0; padding: 0;
                   display: grid; place-items: center; }
.menulaag .kruis span { position: absolute; width: 19px; height: 1px;
                        background: var(--creme); display: block;
                        transition: background .3s ease, width .35s var(--soepel); }
.menulaag .kruis span:nth-child(1) { transform: rotate(45deg); }
.menulaag .kruis span:nth-child(2) { transform: rotate(-45deg); }
.menulaag .kruis:hover span { background: var(--salie); width: 23px; }
.menuknop { font-family: var(--sans); font-weight: 600; font-size: .75rem;
            letter-spacing: .18em; text-transform: uppercase; background: none;
            border: 0; color: inherit; padding: .45rem 0; line-height: 1;
            transition: color .3s ease; }
.menuknop:hover { color: var(--salie); }
.menulaag { position: fixed; inset: 0; z-index: 70; background: var(--pek);
            display: grid; align-content: center; visibility: hidden;
            opacity: 0; transition: opacity .55s var(--soepel),
                                    visibility 0s linear .55s; }
.menulaag.open { visibility: visible; opacity: 1; transition-delay: 0s; }
.menulaag .binnen { width: 100%; }
.menulaag ol { list-style: none; margin: 0; padding: 0; }
.menulaag li { border-top: 1px solid rgba(143,168,154,.22);
               display: grid; grid-template-columns: auto 1fr;
               align-items: baseline; gap: 1.6rem; }
.menulaag li:last-child { border-bottom: 1px solid rgba(143,168,154,.22); }
.menulaag .nr { font-family: var(--sans); font-weight: 600; font-size: .72rem;
                letter-spacing: .18em; color: var(--salie); opacity: .7; }
.menulaag a { display: block; text-align: right; text-decoration: none;
              font-family: var(--serif); font-weight: 400;
              font-size: clamp(2.1rem, 8.4vw, 6rem); line-height: 1.06;
              color: rgba(246,243,235,.42); padding: .3rem 0;
              transition: color .4s var(--soepel), transform .55s var(--soepel); }
.menulaag a:hover { color: var(--creme); transform: translateX(-.5rem); }
.menulaag .onder { display: flex; justify-content: space-between;
                   flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem;
                   font-family: var(--sans); font-weight: 600;
                   font-size: .72rem; letter-spacing: .16em;
                   text-transform: uppercase; color: var(--salie); }
@media (prefers-reduced-motion: no-preference) {
  .menulaag li { opacity: 0; transform: translateY(18px); }
  .menulaag.open li { animation: menu-in .7s var(--traag) both; }
  .menulaag.open li:nth-child(1) { animation-delay: .06s; }
  .menulaag.open li:nth-child(2) { animation-delay: .13s; }
  .menulaag.open li:nth-child(3) { animation-delay: .20s; }
  .menulaag.open li:nth-child(4) { animation-delay: .27s; }
  .menulaag.open li:nth-child(5) { animation-delay: .34s; }
  .menulaag.open li:nth-child(6) { animation-delay: .41s; }
  @keyframes menu-in { to { opacity: 1; transform: none; } }
}

/* De secties zijn doorzichtig: de grondlaag doet de kleur. De tekstkleur
   wisselt wel mee, met dezelfde duur, zodat het één beweging is. */
.vel { background: transparent; transition: color 1.05s var(--soepel); }
.vel.licht, .vel.groen, .vel.diep, .vel.pek { background: transparent; }

/* --- voortgang ---------------------------------------------------------- */
.voortgang { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
             background: var(--salie); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .voortgang { animation: rek linear; animation-timeline: scroll(root block); }
}
@keyframes rek { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- registers ----------------------------------------------------------- */
.vel { --grond: var(--nacht); --tekst-kleur: var(--creme);
       --accent: var(--salie); --haar: var(--lijn-op-groen);
       --sluimer: var(--sluimer-groen);
       background: var(--grond); color: var(--tekst-kleur); position: relative; }
.vel.groen { --grond: var(--groen); }
.vel.diep  { --grond: var(--diep); }
.vel.pek   { --grond: var(--pek); }
.vel.licht { --grond: var(--creme); --tekst-kleur: var(--inkt);
             --accent: var(--groen); --haar: var(--lijn-op-creme);
             --sluimer: var(--sluimer-creme); }

.binnen { max-width: var(--breed); margin-inline: auto;
          padding-inline: var(--marge);
          padding-block: clamp(3.5rem, 7vw, 6.5rem); }

/* --- getrapte overgang ---------------------------------------------------- */
.trap { display: block; height: clamp(24px, 3.4vw, 50px); position: relative;
        overflow: hidden; }
.trap span { position: absolute; top: 0; }
.trap[data-van="groen"] span { background: var(--groen); }
.trap[data-van="diep"]  span { background: var(--diep); }
.trap[data-van="nacht"] span { background: var(--nacht); }
.trap[data-van="pek"]   span { background: var(--pek); }
.trap[data-van="licht"] span { background: var(--creme); }
.trap span:nth-child(1) { left: 0;   width: 17%; height: 100%; }
.trap span:nth-child(2) { left: 17%; width: 10%; height: 60%; }
.trap span:nth-child(3) { left: 27%; width: 6%;  height: 28%; }

/* --- scènekop ------------------------------------------------------------- */
.band { display: flex; align-items: center; gap: 1.1rem;
        margin-bottom: clamp(1.6rem, 3vw, 2.7rem); }
.band .merk, .band .nr {
  font-family: var(--sans); font-weight: 700; font-size: var(--klein);
  letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
}
.band .nr .van { opacity: .45; }
.band .haar { flex: 1 1 auto; height: 1px; background: var(--haar);
              transform-origin: 0 50%; }
.band .blok { width: 8px; height: 8px; background: var(--accent); flex: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band .haar { animation: lijn-open 1s var(--soepel) both;
                  animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes lijn-open { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* --- koppen ----------------------------------------------------------------- */
.kop { font-family: var(--sans); font-weight: 800; letter-spacing: -.035em;
       line-height: .97; text-wrap: balance; margin: 0;
       font-size: var(--kop-l); font-stretch: 86%; }
.kop.xxl { font-size: var(--kop-xxl); letter-spacing: -.045em; }
.kop.xl  { font-size: var(--kop-xl); letter-spacing: -.04em; }
.kop.m   { font-size: var(--kop-m); letter-spacing: -.02em; line-height: 1.08; }

.serif-woord { font-family: var(--serif); font-weight: 500; font-style: normal;
               letter-spacing: -.015em; color: var(--accent); font-size: 1.16em;
               font-stretch: normal; line-height: .78; }
.serif-woord.cursief { font-style: italic; font-weight: 400; }

.oog { font-family: var(--sans); font-weight: 700; font-size: var(--klein);
       letter-spacing: .24em; text-transform: uppercase; margin: 0 0 1.1rem;
       color: var(--accent); display: flex; align-items: center; gap: .7rem; }
.oog::before { content: ""; width: 24px; height: 1px; background: currentColor;
               flex: none; }

.lood { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.48; }
p { margin: 0 0 1rem; max-width: 60ch; }
p:last-child { margin-bottom: 0; }

/* --- opkomen ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .komt-op { animation: op-schuiven .9s var(--soepel) both;
               animation-timeline: view(); animation-range: entry 0% entry 42%; }
    @keyframes op-schuiven { from { transform: translateY(28px); opacity: .5; }
                             to { transform: none; opacity: 1; } }
    .komt-op.laat  { animation-range: entry 7% entry 52%; }
    .komt-op.later { animation-range: entry 14% entry 62%; }
    /* Van opzij in beeld: dit is wat de referentie doet met de kaartjes
       rond de telefoon. */
    .van-links  { animation: in-links 1s var(--soepel) both;
                  animation-timeline: view(); animation-range: entry 2% entry 58%; }
    .van-rechts { animation: in-rechts 1s var(--soepel) both;
                  animation-timeline: view(); animation-range: entry 2% entry 58%; }
    @keyframes in-links  { from { transform: translateX(-46px) rotate(-3deg); opacity: 0; }
                           to { transform: none; opacity: 1; } }
    @keyframes in-rechts { from { transform: translateX(46px) rotate(3deg); opacity: 0; }
                           to { transform: none; opacity: 1; } }
  }
}

/* --- knoppen -------------------------------------------------------------------- */
.knoppen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.knop { position: relative; overflow: hidden; isolation: isolate;
        font-family: var(--sans); font-weight: 700; font-size: .86rem;
        letter-spacing: .05em; text-decoration: none; padding: .95rem 1.6rem;
        border: 1px solid var(--accent); color: var(--grond);
        background: transparent; display: inline-flex; align-items: center; gap: .6rem;
        transition: color .3s var(--soepel), border-color .3s var(--soepel),
                    transform .25s var(--soepel); }
.knop::before { content: ""; position: absolute; inset: 0; z-index: -1;
                background: var(--accent); transform-origin: 50% 100%;
                transition: transform .45s var(--soepel); }
.knop:hover { color: var(--tekst-kleur); }
.knop:hover::before { transform: scaleY(0); }
.knop .pijl { transition: transform .35s var(--soepel); }
.knop:hover .pijl { transform: translateX(5px); }
.knop.leeg { color: var(--tekst-kleur); border-color: var(--haar); }
.knop.leeg::before { transform: scaleY(0); transform-origin: 50% 0; }
.knop.leeg:hover { color: var(--grond); border-color: var(--accent); }
.knop.leeg:hover::before { transform: scaleY(1); }

/* --- kopbalk -------------------------------------------------------------------- */
.kopbalk { position: sticky; top: 0; z-index: 50; background: rgba(10,22,15,.86);
           backdrop-filter: blur(14px); color: var(--creme); }
.kopbalk .binnen { padding-block: .7rem; display: flex; align-items: center;
                   justify-content: space-between; gap: 1rem; }
.merkteken-kop { font-family: var(--sans); font-weight: 700; font-size: .75rem;
                 letter-spacing: .18em; text-transform: uppercase;
                 text-decoration: none; padding: .45rem 0; line-height: 1;
                 white-space: nowrap; transition: color .3s ease; }
.merkteken-kop:hover { color: var(--salie); }
/* De volledige naam staat er bij het openen en trekt zich daarna samen tot
   het monogram: de letters tussen de hoofdletters lopen naar breedte nul,
   zodat K, M en W naar elkaar toe schuiven. Zonder animatie staat er meteen
   de hele naam, dus een crawler leest altijd Keijzer Media Works. */
.merkteken-kop .rest { display: inline-block; overflow: hidden;
                       vertical-align: bottom; max-width: 5em; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .merkteken-kop .rest { animation: naam-intrekken .62s var(--traag) 2.86s both; }
  /* Op pagina's zonder openingsanimatie hoeft de naam niet te wachten tot
     een gordijn dat er niet is voorbij zou zijn. */
  body:not(:has(.opening)) .merkteken-kop .rest { animation-delay: .7s; }
  /* De drie woorddelen volgen elkaar op, zodat de naam zich van links naar
     rechts opvouwt in plaats van in één klap te verdwijnen. */
  .merkteken-kop > :nth-child(5), .merkteken-kop > :nth-child(6) {
    animation-delay: calc(2.86s + .07s); }
  .merkteken-kop > :nth-child(8) { animation-delay: calc(2.86s + .14s); }
  body:not(:has(.opening)) .merkteken-kop > :nth-child(5),
  body:not(:has(.opening)) .merkteken-kop > :nth-child(6) {
    animation-delay: calc(.7s + .07s); }
  body:not(:has(.opening)) .merkteken-kop > :nth-child(8) {
    animation-delay: calc(.7s + .14s); }
  @keyframes naam-intrekken {
    0%   { max-width: 5em; opacity: 1; }
    30%  { max-width: 5em; opacity: 1; }
    100% { max-width: 0; opacity: 0; }
  }

  /* Zodra het intrekken klaar is zet app.js de klasse 'ingeklapt'. Vanaf dat
     moment is het geen animatie meer maar een overgang, en dat is precies
     wat het uitklappen eerder miste: een animatie start vanaf de basisstijl
     (5em), dus hij had niets te overbruggen en sprong open. Een overgang
     loopt wel beide kanten op, en onderbreek je hem halverwege dan keert
     hij netjes om. */
  .merkteken-kop.ingeklapt .rest {
    animation: none; max-width: 0; opacity: 0;
    transition: max-width .34s var(--soepel), opacity .24s ease; }
  .merkteken-kop.ingeklapt:hover .rest,
  .merkteken-kop.ingeklapt:focus-visible .rest { max-width: 5em; opacity: 1; }
  /* Dezelfde volgorde als het intrekken: van links naar rechts. Bij het
     uitklappen leest dat als een naam die geschreven wordt, bij het
     dichtklappen als een naam die zich naar het monogram toe trekt. */
  .merkteken-kop.ingeklapt > :nth-child(5),
  .merkteken-kop.ingeklapt > :nth-child(6) { transition-delay: .05s; }
  .merkteken-kop.ingeklapt > :nth-child(8) { transition-delay: .1s; }
}
/* Het volledige woordmerk is 271px breed en weegt daarmee veel zwaarder dan
   het woord Menu ernaast. Het monogram staat ook linksboven op de kaarten
   van de carrousel, dus dit is geen nieuwe vorm maar de bestaande. */     /* bewust klein */
.menu { display: flex; gap: clamp(.7rem, 1.6vw, 1.6rem); align-items: center;
        flex-wrap: wrap; }
.menu a { position: relative; font-family: var(--sans); font-weight: 600;
          font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
          text-decoration: none; padding-block: .3rem; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
                 height: 1px; background: var(--salie); transform: scaleX(0);
                 transform-origin: 100% 50%; transition: transform .4s var(--soepel); }
.menu a:hover { color: var(--salie); }
.menu a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.menu .nu { display: none; }
@media (min-width: 880px) { .menu .nu { display: inline-block; } }

/* ===== BEELDVLAK ==================================================== */
.vlak { position: relative; overflow: hidden; background: var(--pek);
        border: 1px solid rgba(143,168,154,.15); display: block;
        text-decoration: none; color: var(--creme);
        /* <figure> draagt standaard margin: 1em 40px; dat kneep de
           hoofdbeelden op de artikelpagina's dicht. */
        margin: 0; }
.vlak.staand { aspect-ratio: 9 / 16; }
.vlak.liggend { aspect-ratio: 16 / 9; }
/* Twee plekken dragen het bijschrift 3:2 maar stonden op de 16:9-vorm, dus
   het label klopte niet met wat je zag. Een foto voor Funda is 3:2, en dat
   is precies wat die plekken tonen. */
.vlak.foto { aspect-ratio: 3 / 2; }
.vlak.breed { aspect-ratio: 21 / 9; }
.vlak.vierkant { aspect-ratio: 1 / 1; }
.vlak.post { aspect-ratio: 4 / 5; }
.vlak::before {
  content: ""; position: absolute; inset: -22%;
  background:
    radial-gradient(40% 50% at 26% 20%, rgba(143,168,154,.32), transparent 70%),
    radial-gradient(52% 62% at 80% 84%, rgba(30,59,46,.9), transparent 72%),
    linear-gradient(154deg, #1b3a2c 0%, var(--pek) 64%);
  animation: zwerf 30s ease-in-out infinite alternate;
}
.vlak::after { content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(104deg, rgba(246,243,235,.05) 0 1px, transparent 1px 38px),
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(6,14,9,.6) 100%);
  transition: transform .9s var(--soepel), opacity .5s ease; }
@keyframes zwerf { from { transform: translate3d(-2%,-1%,0) scale(1.05); }
                   to { transform: translate3d(2%,2%,0) scale(1.11); } }
.vlak .merkteken { position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(40px, 6vw, 62px); height: clamp(40px, 6vw, 62px);
  border: 1px solid rgba(246,243,235,.38); border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .5s var(--soepel), border-color .4s ease, background .4s ease; }
.vlak .merkteken::before { content: ""; border-left: 8px solid var(--creme);
  border-block: 5.5px solid transparent; margin-left: 3px; }
.vlak[data-soort="foto"] .merkteken::before { border: 1px solid var(--creme);
  width: 14px; height: 11px; margin: 0; }
.vlak .bijschrift { position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(.65rem, 1.5vw, 1rem); display: flex;
  justify-content: space-between; align-items: flex-end; gap: .8rem;
  /* De waas liep van bijna dekkend naar niets over de hoogte van de regel
     zelf. Op een donkere foto volstaat dat, maar op een licht beeld, zoals
     de schermafbeelding van een artikel, bleef de maat rechts onleesbaar.
     Hij begint nu hoger en houdt langer vast. */
  padding-top: clamp(1.8rem, 4vw, 2.6rem);
  background: linear-gradient(to top, rgba(6,14,9,.95) 0%,
                              rgba(6,14,9,.74) 42%, transparent 100%);
  font-family: var(--sans); font-weight: 600; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; }
.vlak .bijschrift .maat { color: var(--salie); }
/* Een clip met bedieningsknoppen heeft onderin de balk van de browser
   staan. Het bijschrift stond daar overheen, dus bij die clips gaat het
   naar boven, met de waas de andere kant op. */
.inhoudclip .bijschrift { inset: 0 0 auto 0;
  padding-top: clamp(.65rem, 1.5vw, 1rem);
  padding-bottom: clamp(1.8rem, 4vw, 2.6rem);
  background: linear-gradient(to bottom, rgba(6,14,9,.95) 0%,
                              rgba(6,14,9,.74) 42%, transparent 100%); }
.vlak:hover::after { transform: translateX(26px) scale(1.06); opacity: .5; }
.vlak:hover .merkteken { transform: scale(1.18); border-color: var(--salie);
                         background: rgba(143,168,154,.16); }
.vlak:hover { border-color: rgba(143,168,154,.42); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vlak.parallax::before { animation: zwerf 30s ease-in-out infinite alternate,
                             traag linear; animation-timeline: auto, view(); }
    @keyframes traag { from { translate: 0 -5%; } to { translate: 0 5%; } }
  }
}

/* --- hero --------------------------------------------------------------------- */
.hero .binnen { padding-block: clamp(2.4rem, 4.6vw, 4rem) 0; }
.hero-grid { display: grid; gap: clamp(1.8rem, 3.4vw, 3rem); align-items: center; }
@media (min-width: 1020px) {
  .hero-grid { grid-template-columns: minmax(0, 1.26fr) minmax(280px, .74fr); }
}
.hero .kop { margin-bottom: 1.1rem; }
.hero .lood { max-width: 45ch; }
.regel { display: block; overflow: hidden; }
.regel > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .regel > span { animation: regel-in 1.1s var(--traag) both; }
  .regel:nth-child(1) > span { animation-delay: 2.95s; }
  .regel:nth-child(2) > span { animation-delay: 3.08s; }
  @keyframes regel-in { from { transform: translateY(103%); } to { transform: none; } }
}

/* --- lopende band -------------------------------------------------------------- */
.band-loop { overflow: hidden; border-block: 1px solid rgba(143,168,154,.18);
             background: var(--pek); padding-block: .8rem; }
.band-loop ul { display: flex; gap: 3.2rem; margin: 0; padding: 0 0 0 3.2rem;
                list-style: none; width: max-content; animation: schuif 48s linear infinite; }
.band-loop li { font-family: var(--sans); font-weight: 600; font-size: .76rem;
                letter-spacing: .2em; text-transform: uppercase; color: var(--salie);
                white-space: nowrap; display: flex; align-items: center; gap: 3.2rem; }
.band-loop li::after { content: ""; width: 4px; height: 4px;
                       background: rgba(143,168,154,.5); flex: none; }
.band-loop:hover ul { animation-play-state: paused; }
@keyframes schuif { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .band-loop ul { animation: none; flex-wrap: wrap; width: auto;
                  padding-inline: var(--marge); gap: 1.2rem; }
  .band-loop li { gap: 1.2rem; }
}

/* --- bewijs --------------------------------------------------------------------- */
.bewijs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
          background: rgba(143,168,154,.18); }
@media (min-width: 780px) { .bewijs { grid-template-columns: repeat(4, 1fr); } }
.bewijs > div { background: var(--nacht); padding: clamp(1.4rem, 2.8vw, 2.2rem)
                clamp(1rem, 2vw, 1.6rem); position: relative; overflow: hidden;
                transition: background .45s var(--soepel); }
.bewijs > div::before { content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
                        background: var(--salie); transform: scaleX(0);
                        transform-origin: 0 50%; transition: transform .5s var(--soepel); }
.bewijs > div:hover { background: var(--groen); }
.bewijs > div:hover::before { transform: scaleX(1); }
.bewijs .getal { font-family: var(--serif); font-weight: 500;
                 font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1;
                 color: var(--salie); font-variant-numeric: tabular-nums; display: block; }
.bewijs .wat { font-family: var(--sans); font-weight: 600; font-size: var(--klein);
               letter-spacing: .15em; text-transform: uppercase; color: var(--creme);
               display: block; margin-top: .5rem; opacity: .78; }

/* --- statement -------------------------------------------------------------------- */
.statement { font-family: var(--sans); font-weight: 800; font-size: var(--kop-xl);
             line-height: 1.01; letter-spacing: -.04em; font-stretch: 86%;
             max-width: 18ch; margin: 0; }
.statement .w { color: var(--sluimer); transition: color .55s ease; }
.statement .w.aan { color: var(--tekst-kleur); }
.statement .w.sleutel.aan { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .statement .w { color: var(--tekst-kleur); transition: none; }
  .statement .w.sleutel { color: var(--accent); }
  .vlak::before { animation: none; }
}

.tweeluik { display: grid; gap: clamp(2rem, 4vw, 3.4rem); align-items: center; }
@media (min-width: 920px) {
  .tweeluik { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
  .tweeluik.omgekeerd > *:first-child { order: 2; }
  /* Een case waarvan het beeld nog niet is aangeleverd heeft maar een
     kind. Zonder deze regel houdt het raster de tweede kolom aan en staat
     er een halve lege rij. De tekst krijgt wel een leesbare maat mee: over
     de volle breedte worden de regels te lang. */
  .tweeluik.alleentekst { grid-template-columns: minmax(0, 1fr); }
  .tweeluik.alleentekst > * { max-width: 46rem; }
}

/* ===== HET TELEFOONTONEEL ==============================================
   De telefoon staat stil, de kaartjes komen van links en rechts in beeld
   terwijl je scrollt. Zonder animatie staan ze gewoon op hun plek.
   ===================================================================== */
.toneel { position: relative; display: grid; place-items: center;
          padding-block: clamp(2rem, 5vw, 4rem); margin-top: clamp(1rem, 3vw, 2rem); }
.telefoon { position: relative; width: clamp(200px, 27vw, 282px); aspect-ratio: 9 / 19;
            border: 2px solid rgba(143,168,154,.4); border-radius: 30px;
            padding: 7px; background: var(--pek); z-index: 2;
            box-shadow: 0 32px 80px -24px rgba(0,0,0,.85); }
.telefoon .scherm { position: relative; width: 100%; height: 100%;
                    border-radius: 23px; overflow: hidden; }
.telefoon .scherm .vlak { width: 100%; height: 100%; aspect-ratio: auto;
                          border: 0; }
.telefoon .kerf { position: absolute; left: 50%; top: 11px; translate: -50% 0;
                  width: 34%; height: 17px; background: var(--pek);
                  border-radius: 0 0 11px 11px; z-index: 3; }

.kaartje { position: absolute; z-index: 3; background: rgba(10,22,15,.93);
           border: 1px solid rgba(143,168,154,.3); padding: .75rem .95rem;
           min-width: 118px; backdrop-filter: blur(6px);
           box-shadow: 0 18px 42px -18px rgba(0,0,0,.9);
           transition: transform .4s var(--soepel), border-color .4s ease; }
.kaartje:hover { transform: translateY(-5px) !important;
                 border-color: rgba(143,168,154,.6); }
.kaartje .et { font-family: var(--sans); font-weight: 600; font-size: .6rem;
               letter-spacing: .17em; text-transform: uppercase; color: var(--salie);
               display: block; margin-bottom: .22rem; }
.kaartje .nr { font-family: var(--serif); font-weight: 500; font-size: 1.5rem;
               line-height: 1; color: var(--creme); font-variant-numeric: tabular-nums; }
.kaartje .zin { font-size: .86rem; line-height: 1.35; color: var(--creme);
                max-width: 19ch; display: block; }
/* Buiten de telefoon geplaatst; op smalle schermen onder elkaar. */
.kaartje.k1 { left: 2%;  top: 10%; }
.kaartje.k2 { left: 0;   top: 46%; }
.kaartje.k3 { left: 5%;  bottom: 9%; }
.kaartje.k4 { right: 2%; top: 15%; }
.kaartje.k5 { right: 0;  top: 52%; }
.kaartje.k6 { right: 6%; bottom: 12%; }
@media (max-width: 860px) {
  .toneel { grid-template-columns: 1fr; gap: .7rem; }
  /* Afgebakend tot het eerste toneel: zonder .toneel ervoor raakte hij
     ook de kaartjes van de gepinde sequentie, en die horen daar juist
     over het toestel te liggen. */
  .toneel .kaartje { position: static; min-width: 0; width: 100%; max-width: 330px; }
  .telefoon { order: -1; margin-bottom: 1.2rem; }
}


/* ===== HET TELEFOONTONEEL ALS SEQUENTIE ================================
   De sectie is drie schermen hoog; daarbinnen staat een kader van één
   scherm vast. De scrollvoortgang zet data-stap op 0, 1 of 2 en de drie
   staten wisselen elkaar af: de kop, wat er op het toestel staat en de
   kaartjes eromheen.

   Zonder JavaScript staat er geen data-stap en is staat 0 zichtbaar, dus
   de sectie leest altijd compleet. Alle drie de koppen staan in de HTML,
   zodat een crawler ze alle drie leest.
   ===================================================================== */
.pin { position: relative; height: 300svh; }
.pin .vast-kader { position: sticky; top: 0; height: 100svh;
                   display: grid; align-content: center; overflow: hidden; }

/* De koppen liggen over elkaar; alleen de actieve staat vol in beeld. */
.koppen { position: relative; display: grid; justify-items: center;
          text-align: center; min-height: 4.6em; }
.koppen .kop { grid-area: 1 / 1; opacity: 0; transform: translateY(14px);
               transition: opacity .55s var(--soepel), transform .7s var(--soepel);
               max-width: 17ch; }
.pin:not([data-stap]) .koppen .kop[data-s="0"],
.pin[data-stap="0"] .koppen .kop[data-s="0"],
.pin[data-stap="1"] .koppen .kop[data-s="1"],
.pin[data-stap="2"] .koppen .kop[data-s="2"] { opacity: 1; transform: none; }

.pin .onderregel { text-align: center; margin: 1rem auto 0; max-width: 46ch;
                   opacity: .8; }

/* Het toestel: de drie beelden liggen op elkaar en schuiven verticaal door,
   zoals een reel die doorveegt. */
.toneel2 { position: relative; display: grid; place-items: center;
           margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.telefoon2 { position: relative; width: clamp(168px, 20vw, 232px);
             aspect-ratio: 9 / 19; border: 2px solid rgba(143,168,154,.42);
             border-radius: 28px; padding: 6px; background: var(--pek);
             z-index: 2; box-shadow: 0 34px 90px -26px rgba(0,0,0,.9); }
.telefoon2 .scherm2 { position: relative; width: 100%; height: 100%;
                      border-radius: 22px; overflow: hidden; }
.telefoon2 .kerf2 { position: absolute; left: 50%; top: 10px; translate: -50% 0;
                    width: 34%; height: 15px; background: var(--pek);
                    border-radius: 0 0 10px 10px; z-index: 3; }
.scherm2 .doek { position: absolute; inset: 0; opacity: 0;
                 transform: translateY(22%);
                 transition: opacity .6s var(--soepel), transform .85s var(--soepel); }
.pin:not([data-stap]) .doek[data-s="0"],
.pin[data-stap="0"] .doek[data-s="0"],
.pin[data-stap="1"] .doek[data-s="1"],
.pin[data-stap="2"] .doek[data-s="2"] { opacity: 1; transform: none; }
/* Wat al voorbij is, schuift naar boven weg. */
.pin[data-stap="1"] .doek[data-s="0"],
.pin[data-stap="2"] .doek[data-s="0"],
.pin[data-stap="2"] .doek[data-s="1"] { transform: translateY(-22%); }
.scherm2 .doek .vlak { width: 100%; height: 100%; aspect-ratio: auto; border: 0; }

/* De kaartjes: per staat een eigen set, die van opzij in beeld komt. */
.zwerm { position: absolute; inset: 0; pointer-events: none; }
.zwerm .kaartje { pointer-events: auto; opacity: 0;
                  transition: opacity .5s var(--soepel),
                              transform .8s var(--soepel); }
.zwerm[data-s] { opacity: 0; transition: opacity .4s ease; }
.pin:not([data-stap]) .zwerm[data-s="0"],
.pin[data-stap="0"] .zwerm[data-s="0"],
.pin[data-stap="1"] .zwerm[data-s="1"],
.pin[data-stap="2"] .zwerm[data-s="2"] { opacity: 1; }
.pin:not([data-stap]) .zwerm[data-s="0"] .kaartje,
.pin[data-stap="0"] .zwerm[data-s="0"] .kaartje,
.pin[data-stap="1"] .zwerm[data-s="1"] .kaartje,
.pin[data-stap="2"] .zwerm[data-s="2"] .kaartje { opacity: 1; transform: none; }
.zwerm .kaartje.links  { transform: translateX(-54px) rotate(-3deg); }
.zwerm .kaartje.rechts { transform: translateX(54px) rotate(3deg); }
.zwerm .kaartje:nth-child(2) { transition-delay: .09s; }
.zwerm .kaartje:nth-child(3) { transition-delay: .18s; }

/* De voortgangsstreep onder het toestel: drie strepen, de actieve vult. */
.stappenbalk { display: flex; gap: .5rem; justify-content: center;
               margin-top: clamp(1.2rem, 2.4vw, 2rem); }
.stappenbalk i { display: block; width: clamp(26px, 4vw, 46px); height: 2px;
                 background: rgba(143,168,154,.26); position: relative;
                 overflow: hidden; }
.stappenbalk i::after { content: ""; position: absolute; inset: 0;
                        background: var(--salie); transform: scaleX(0);
                        transform-origin: 0 50%;
                        transition: transform .5s var(--soepel); }
.pin:not([data-stap]) .stappenbalk i:nth-child(1)::after,
.pin[data-stap="0"] .stappenbalk i:nth-child(1)::after,
.pin[data-stap="1"] .stappenbalk i:nth-child(2)::after,
.pin[data-stap="2"] .stappenbalk i:nth-child(3)::after { transform: scaleX(1); }

/* Op een telefoon bleef hier eerst niets van over: alle drie de koppen
   onder elkaar, negen kaartjes als lijst eronder en maar één video. Dan
   is het geen sequentie meer maar een lange opsomming.

   Het mechanisme blijft nu staan, alleen kleiner: het toestel in het
   midden, de kaartjes eroverheen in plaats van ernaast, en één kop per
   stap. Dat is precies wat de referentie op mobiel doet. De desktop
   hierboven verandert niet. */
@media (max-width: 900px) {
  .pin { height: 280svh; }
  .pin .vast-kader { padding-block: 1rem; }
  .pin .binnen { padding-block: 0; }
  .koppen { min-height: 3.4em; }
  .koppen .kop { font-size: clamp(1.7rem, 7.4vw, 2.6rem); max-width: 14ch; }
  .pin .onderregel { font-size: .95rem; max-width: 34ch; }

  .toneel2 { margin-top: clamp(1rem, 3vw, 1.8rem); }
  .telefoon2 { width: clamp(150px, 44vw, 205px); }

  /* De kaartjes liggen half over het toestel: naast elkaar past niet op
     375 pixels, en eronder zetten haalt het effect weg. */
  .zwerm .kaartje { position: absolute; width: 46%; min-width: 0; padding: .5rem .65rem;
                    box-shadow: 0 14px 30px -14px rgba(0,0,0,.95); }
  .zwerm .kaartje .et { font-size: .55rem; letter-spacing: .14em; }
  .zwerm .kaartje .zin { font-size: .78rem; line-height: 1.3; max-width: none; }
  /* Hoog en laag langs de randen, zodat het midden van het scherm vrij
     blijft: daar staat de makelaar of de woning. */
  .kaartje.k1 { left: 0;  top: 4%; }
  .kaartje.k2 { left: 0;  top: 38%; }
  .kaartje.k3 { left: 0;  bottom: 4%; }
  .kaartje.k4 { right: 0; top: 10%; }
  .kaartje.k5 { right: 0; top: 46%; }
  .kaartje.k6 { right: 0; bottom: 8%; }
  .zwerm .kaartje.links  { transform: translateX(-16px) rotate(-2deg); }
  .zwerm .kaartje.rechts { transform: translateX(16px) rotate(2deg); }
  .stappenbalk { margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .koppen .kop, .scherm2 .doek, .zwerm .kaartje { transition: none; }
}

/* --- aanpak ----------------------------------------------------------------------- */
.sequentie { display: grid; gap: clamp(2rem, 4vw, 3.4rem);
             margin-top: clamp(2rem, 3.6vw, 3rem); }
@media (min-width: 960px) {
  .sequentie { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
               align-items: start; gap: clamp(3rem, 5vw, 5rem); }
  .sequentie .vast { position: sticky; top: 100px; }
  .sequentie .vast .vlak { height: min(70vh, 600px); width: auto; margin-inline: auto; }
}
.stappen { display: grid; gap: clamp(1.5rem, 2.8vw, 2.4rem); }
.stap { border-top: 1px solid var(--haar); padding-top: 1.2rem;
        transition: border-color .4s ease; }
.stap:hover { border-color: var(--accent); }
.stap .rij { display: flex; align-items: baseline; gap: 1rem; }
.stap .cijfer { font-family: var(--serif); font-weight: 500;
                font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: .9;
                color: var(--accent); font-variant-numeric: tabular-nums;
                transition: transform .45s var(--soepel); }
.stap:hover .cijfer { transform: translateY(-4px); }
.stap h3 { font-family: var(--sans); font-weight: 700;
           font-size: clamp(1.02rem, 1.6vw, 1.26rem); letter-spacing: -.015em; margin: 0; }
.stap p { font-size: .99rem; margin: .65rem 0 0; }

/* --- cases ---------------------------------------------------------------------- */
.cases { display: grid; gap: clamp(1.1rem, 2vw, 1.7rem); margin-top: clamp(2rem, 3.6vw, 2.8rem); }
@media (min-width: 840px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case { display: flex; flex-direction: column; }
.case .vlak { margin-bottom: .9rem; }
.case .plaats { font-family: var(--sans); font-weight: 600; font-size: var(--klein);
                letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.case h3 { font-family: var(--sans); font-weight: 700; font-size: 1.18rem;
           letter-spacing: -.015em; margin: .35rem 0 .45rem;
           transition: transform .4s var(--soepel); }
.case:hover h3 { transform: translateX(5px); }
.case p { font-size: .97rem; margin: 0; }

/* --- over ons -------------------------------------------------------------------- */
.portret { display: grid; gap: clamp(2rem, 4vw, 3.6rem); align-items: center; }
@media (min-width: 900px) { .portret { grid-template-columns: minmax(260px, .62fr) minmax(0, 1fr); } }
.onderteken { font-family: var(--serif); font-style: italic; font-size: 1.2rem;
              color: var(--accent); margin-top: 1.6rem; display: block; }

/* --- review ---------------------------------------------------------------------- */
.citaat { max-width: 22ch; }
.citaat blockquote { margin: 0; font-family: var(--sans); font-weight: 800;
                     font-size: clamp(1.5rem, 3.6vw, 2.7rem); line-height: 1.1;
                     letter-spacing: -.03em; font-stretch: 88%; max-width: 18ch; }
.citaat .sterren { color: var(--accent); letter-spacing: .25em; font-size: 1rem;
                   display: block; margin-bottom: 1.2rem; }
.citaat figcaption { font-family: var(--sans); font-weight: 600; font-size: var(--klein);
                     letter-spacing: .16em; text-transform: uppercase;
                     color: var(--accent); margin-top: 1.4rem; }
.citaat .los { display: block; opacity: .62; margin-top: .35rem; letter-spacing: .1em; }

/* --- blog -------------------------------------------------------------------------- */
.blogs { display: grid; gap: 0; margin-top: clamp(1.8rem, 3.4vw, 2.6rem); }
.blogpost { display: grid; gap: .3rem 1.6rem; align-items: baseline;
            border-top: 1px solid var(--haar); padding: 1.3rem 0;
            text-decoration: none; position: relative;
            transition: padding-left .45s var(--soepel); }
@media (min-width: 760px) {
  .blogpost { grid-template-columns: 7.5rem 1fr auto; }
}
.blogpost:last-child { border-bottom: 1px solid var(--haar); }
.blogpost:hover { padding-left: 1.1rem; }
.blogpost .datum { font-family: var(--sans); font-weight: 600; font-size: var(--klein);
                   letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.blogpost .titel { font-family: var(--sans); font-weight: 700;
                   font-size: clamp(1.02rem, 1.7vw, 1.26rem); letter-spacing: -.015em; }
.blogpost .pijl { color: var(--accent); opacity: 0; transform: translateX(-8px);
                  transition: opacity .35s ease, transform .4s var(--soepel); }
.blogpost:hover .pijl { opacity: 1; transform: none; }

/* --- regels, FAQ, voet -------------------------------------------------------------- */
.regels { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 54ch; }
.regels li { border-top: 1px solid var(--haar); padding: .9rem 0;
             font-size: clamp(1.02rem, 1.6vw, 1.18rem); display: flex;
             justify-content: space-between; gap: 1rem;
             transition: padding-left .4s var(--soepel); }
.regels li::after { content: "→"; color: var(--accent); opacity: 0;
                    transition: opacity .35s ease, transform .4s var(--soepel);
                    transform: translateX(-8px); }
.regels li:hover { padding-left: .7rem; }
.regels li:hover::after { opacity: 1; transform: none; }

.faq { display: grid; margin-top: 2.2rem; max-width: 72ch; }
.faq .vraag { border-top: 1px solid var(--haar); padding: 1.35rem 0; position: relative;
              transition: padding-left .45s var(--soepel); }
.faq .vraag::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 0;
                      height: 2px; background: var(--accent);
                      transition: width .45s var(--soepel); }
.faq .vraag:hover { padding-left: 2.1rem; }
.faq .vraag:hover::before { width: 1.35rem; }
.faq .vraag:last-child { border-bottom: 1px solid var(--haar); }
.faq h3 { font-family: var(--sans); font-weight: 700; font-size: 1.03rem;
          letter-spacing: -.01em; margin: 0 0 .45rem; }
.faq p { font-size: .99rem; margin: 0; }

.voet .binnen { padding-block: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem;
                justify-content: space-between; align-items: center; }
.voet, .voet a { font-family: var(--sans); font-weight: 600; font-size: var(--klein);
                 letter-spacing: .14em; text-transform: uppercase; }
.voet img { height: 15px; width: auto; }

/* =====================================================================
   BINNENPAGINA'S
   Alles hieronder hoort bij de pagina's naast de homepage. Dezelfde
   bouwstenen, alleen rustiger: geen gepinde sequenties, wel dezelfde
   band, koppen en beeldvlakken.
   ===================================================================== */

.paginakop .binnen { padding-block: clamp(4.5rem, 9vw, 8rem) clamp(2.5rem, 5vw, 4rem); }
.paginakop .kop { max-width: 16ch; }

/* --- diensten ---------------------------------------------------------- */
.diensten { display: grid; gap: clamp(2.6rem, 5vw, 4.4rem); }
.dienst { border-top: 1px solid var(--haar); padding-top: clamp(1.4rem, 2.6vw, 2rem); }
.dienst .rij { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem;
               align-items: baseline; margin-bottom: 1rem; }
.dienst .cijfer { font-family: var(--serif); font-weight: 500;
                  font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: .9;
                  color: var(--accent); font-variant-numeric: tabular-nums; }
.dienst .lood { max-width: 58ch; }
.puntjes { list-style: none; margin: 1.5rem 0 0; padding: 0;
           display: grid; gap: .55rem; max-width: 56ch; }
.puntjes li { position: relative; padding-left: 1.5rem; font-size: 1rem; }
.puntjes li::before { content: ""; position: absolute; left: 0; top: .62em;
                      width: 7px; height: 1px; background: var(--accent); }
@media (min-width: 900px) {
  .dienst { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
            gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
  .dienst .rij { grid-column: 1 / -1; }
  .puntjes { margin-top: 0; }
}

/* --- cases ------------------------------------------------------------- */
.cases-lijst { display: grid; gap: clamp(2.4rem, 4.6vw, 4rem); }
.case-rij { display: grid; gap: clamp(1.2rem, 2.6vw, 2.4rem); align-items: center; }
@media (min-width: 860px) {
  .case-rij { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
  .case-rij:nth-child(even) > *:first-child { order: 2; }
}
.case-rij .plaats { font-family: var(--sans); font-weight: 600;
                    font-size: var(--klein); letter-spacing: .16em;
                    text-transform: uppercase; color: var(--accent); }
.case-rij h2 { margin: .5rem 0 .7rem; }
.voetnoot { font-size: .92rem; opacity: .65; margin-top: 2.4rem; max-width: 52ch; }

/* --- leespagina's (privacy, cookies) ------------------------------------ */
.lezen .binnen { max-width: 760px; }
.lezen h2 { margin: 2.4rem 0 .7rem; }
.lezen h2:first-child { margin-top: 0; }
.lezen p { max-width: none; }
.lezen a { text-decoration: underline; text-underline-offset: 3px;
           text-decoration-color: var(--accent); }

/* --- formulier ---------------------------------------------------------- */
.formulier { display: grid; gap: 1.1rem; max-width: 30rem; }
.veld { display: grid; gap: .4rem; }
.veld label { font-family: var(--sans); font-weight: 600; font-size: var(--klein);
              letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.veld input, .veld textarea {
  font-family: var(--serif); font-size: 1rem; color: var(--tekst-kleur);
  background: rgba(246,243,235,.05); border: 1px solid var(--haar);
  padding: .8rem .9rem; width: 100%; border-radius: 0;
  transition: border-color .3s ease, background .3s ease;
}
.veld input:focus, .veld textarea:focus {
  outline: none; border-color: var(--accent); background: rgba(246,243,235,.09);
}
.veld input::placeholder, .veld textarea::placeholder { color: var(--sluimer); }
.veld textarea { resize: vertical; min-height: 6rem; }
.formulier button { justify-self: start; margin-top: .4rem; cursor: pointer; }
.bij { font-size: .86rem; opacity: .64; text-transform: none;
       letter-spacing: 0; font-family: var(--serif); font-weight: 400; }
.veld .bij { display: inline; }
.verstopt { position: absolute; left: -9999px; }
.formulier .bij a { text-decoration: underline; text-underline-offset: 3px; }

/* Het vinkje om gebeld te worden. Geen grid zoals de andere velden, want
   hokje en tekst horen op een regel. Het hele label is klikbaar, dus het
   raakvlak is de tekst en niet alleen het hokje van 16 bij 16. */
.keuzeveld { margin-top: -.3rem; }
.aanvinken { display: flex; align-items: flex-start; gap: .65rem;
             cursor: pointer; font-family: var(--sans); font-weight: 600;
             font-size: var(--klein); letter-spacing: .04em;
             text-transform: none; line-height: 1.4;
             padding-block: .4rem; min-height: 2.5rem; }
.aanvinken input { appearance: none; flex: none; width: 1.05rem; height: 1.05rem;
                   margin: 0; border: 1px solid var(--haar); background: transparent;
                   display: grid; place-content: center; cursor: pointer;
                   transition: border-color .25s var(--soepel),
                               background-color .25s var(--soepel); }
.aanvinken input::before { content: ""; width: .5rem; height: .5rem;
                           background: var(--grond); transform: scale(0);
                           transition: transform .2s var(--soepel); }
.aanvinken input:checked { background: var(--accent); border-color: var(--accent); }
.aanvinken input:checked::before { transform: scale(1); }
.aanvinken:hover input { border-color: var(--accent); }
.aanvinken input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.regels a { text-decoration: none; }
.regels a:hover { color: var(--accent); }

/* --- voet met links ----------------------------------------------------- */
/* De identiteitsregel onder de voetlinks: klein en rustig, want het is
   verplichte informatie en geen boodschap. */
.voetgegevens { font-family: var(--sans); font-size: .72rem; letter-spacing: .04em;
  opacity: .5; margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; line-height: 1.7; }
.voetgegevens a { color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; }
.voetgegevens a:hover { opacity: .8; }

.voetlinks { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; }
.voetlinks a { text-decoration: none; opacity: .72;
               transition: opacity .3s ease, color .3s ease; }
.voetlinks a:hover { opacity: 1; color: var(--salie); }
.voet .merkteken-kop { font-size: .72rem; }
@media (max-width: 760px) { .voet .binnen { gap: 1.2rem; } }

/* --- artikelpagina ------------------------------------------------------ */
.artikel .binnen { padding-block: 0; }
.artikel > .binnen:first-child { padding-block: clamp(4rem, 8vw, 7rem) 0; }
.kruimels { font-family: var(--sans); font-weight: 600; font-size: var(--klein);
            letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
            margin-bottom: 1.6rem; display: flex; gap: .6rem; }
.kruimels a { text-decoration: none; }
.kruimels a:hover { color: var(--tekst-kleur); }
.kruimels span { opacity: .5; }
.artikel h1 { max-width: 20ch; }
.artikelmeta { font-family: var(--sans); font-weight: 600; font-size: var(--klein);
               letter-spacing: .14em; text-transform: uppercase; opacity: .6;
               margin-top: 1.4rem; }
.artikelmeta span { opacity: .5; margin-inline: .4rem; }
.beeldbreed { padding-block: clamp(2.4rem, 5vw, 4rem) !important; }
.beeldbreed .vlak { margin: 0; }
.beeldbreed .vlak img { width: 100%; height: 100%; object-fit: cover; }

.artikelbody { padding-bottom: clamp(3.5rem, 7vw, 6rem) !important; }
.artikelbody h2, .artikelbody h3, .artikelbody h4 {
  font-family: var(--sans); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.12; font-stretch: 88%; margin: 2.6rem 0 .9rem;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}
.artikelbody h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin-top: 2.2rem; }
.artikelbody h4 { font-size: clamp(1.05rem, 1.7vw, 1.2rem); margin-top: 1.8rem; }
.artikelbody > *:first-child { margin-top: 0; }
.artikelbody p { margin: 0 0 1.15rem; max-width: none; font-size: 1.07rem;
                 line-height: 1.62; }
.artikelbody ul, .artikelbody ol { margin: 0 0 1.3rem; padding-left: 0;
                                   list-style: none; display: grid; gap: .5rem; }
.artikelbody li { position: relative; padding-left: 1.6rem; font-size: 1.05rem;
                  line-height: 1.55; }
.artikelbody li::before { content: ""; position: absolute; left: 0; top: .72em;
                          width: 8px; height: 1px; background: var(--accent); }
.artikelbody a { text-decoration: underline; text-underline-offset: 3px;
                 text-decoration-color: var(--accent); }
.artikelbody strong { font-weight: 600; color: var(--tekst-kleur); }
.artikelbeeld { margin: 2.2rem 0; }
.artikelbeeld img { width: 100%; height: auto; border: 1px solid var(--haar); }
.artikelbody blockquote { margin: 2rem 0; padding-left: 1.4rem;
                          border-left: 2px solid var(--accent);
                          font-family: var(--serif); font-style: italic;
                          font-size: 1.15rem; }
.vel h2 a { text-decoration: none; }
.vel h2 a:hover { color: var(--accent); }

/* Een beeldvlak waar een echte afbeelding in zit, toont het wachtpatroon
   niet: de verlooplagen en het merkteken horen bij de lege staat. */
.vlak:has(img)::before, .vlak:has(img)::after { display: none; }
.vlak:has(img) .merkteken { display: none; }
.vlak:has(img) .bijschrift { background: linear-gradient(to top, rgba(6,14,9,.9), transparent); }

/* ===== ZOOMOVERGANG ====================================================
   Een klein kader dat tijdens het scrollen uitgroeit tot het hele scherm.
   De sectie is twee schermen hoog; daarbinnen staat het kader stil en
   verandert alleen de maat. Zo loopt de ene sectie in de andere over.

   Zonder JavaScript of met beweging uit staat het kader meteen op volle
   breedte: dan is het gewoon een beeld, en dat leest prima.
   ===================================================================== */
.zoomsectie { position: relative; height: 215svh; }
.zoomkader { position: sticky; top: 0; height: 100svh;
             display: grid; place-items: center; overflow: hidden; }
.zoomvlak { width: 100%; max-width: none; border-radius: 0;
            transition: none; will-change: width, border-radius; }
.zoomsectie[data-zoom] .zoomvlak {
  width: calc(32% + 68% * var(--zoom, 1));
  border-radius: calc(26px * (1 - var(--zoom, 1)));
}
.zoomsectie .bijschrift { opacity: calc(.25 + .75 * var(--zoom, 1)); }
/* De tekst die bovenop het beeld komt zodra het scherm gevuld is. */
.zoomtekst { position: absolute; inset: auto 0 0 0; z-index: 3;
             padding: clamp(1.6rem, 4vw, 3.4rem) var(--marge);
             opacity: var(--zoom, 1);
             transform: translateY(calc(18px * (1 - var(--zoom, 1))));
             transition: none; pointer-events: none; }
.zoomtekst .kop { max-width: 15ch; }
.zoomtekst .onder { display: flex; flex-wrap: wrap; gap: .6rem 2rem;
                    margin-top: 1rem; font-family: var(--sans);
                    font-weight: 600; font-size: var(--klein);
                    letter-spacing: .16em; text-transform: uppercase;
                    color: var(--salie); }
@media (max-width: 900px) {
  .zoomsectie { height: auto; }
  .zoomkader { position: static; height: auto; padding-block: 2rem; }
  .zoomsectie[data-zoom] .zoomvlak { width: 100%; border-radius: 0; }
  .zoomtekst { position: static; opacity: 1; transform: none; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .zoomsectie { height: auto; }
  .zoomkader { position: static; height: auto; }
  .zoomsectie[data-zoom] .zoomvlak { width: 100%; border-radius: 0; }
  .zoomtekst { opacity: 1; transform: none; }
}

/* ===== HERO =============================================================
   Beeld over de volle breedte met de tekst eroverheen, in plaats van een
   kolom tekst naast een smal venster. Reden: die tweekolomsindeling komt
   verderop vier keer terug, dus het eerste scherm onderscheidde zich niet,
   en een staand venster van 436 pixels is klein voor werk waar je om
   verkocht wordt.

   Iets minder dan een vol scherm, zodat de lopende band eronder net
   zichtbaar blijft en de pagina zelf om scrollen vraagt.
   ===================================================================== */
.hero .heroblad { position: relative; height: min(88svh, 980px);
                  min-height: 30rem; overflow: hidden; }
.heroverbeeld { position: absolute; inset: 0; aspect-ratio: auto;
                width: 100%; height: 100%; border: 0; }
/* Het beeld ademt langzaam in; zo beweegt het eerste scherm al voordat de
   bezoeker iets doet. */
@media (prefers-reduced-motion: no-preference) {
  .heroverbeeld::before { animation: zwerf 30s ease-in-out infinite alternate,
                                     indalen 26s ease-in-out infinite alternate; }
  @keyframes indalen { from { scale: 1; } to { scale: 1.09; } }
}
.heroverbeeld .merkteken { top: auto; bottom: clamp(1.4rem, 4vw, 2.6rem);
                           left: auto; right: var(--marge); translate: 0 0; }

.herotekst { position: absolute; inset: auto 0 0 0; z-index: 2;
             padding-block: clamp(2rem, 6vw, 4.5rem);
             background: linear-gradient(to top,
               rgba(6,14,9,.94) 0%, rgba(6,14,9,.72) 42%, transparent 100%); }
.herotekst .binnen { padding-block: 0; }
.hero .kop { margin-bottom: 1rem; max-width: 14ch; }
.hero .lood { max-width: 38ch; }
.hero .oog { margin-bottom: .9rem; }

.scrolwenk { position: absolute; left: 50%; bottom: clamp(.9rem, 2vw, 1.4rem);
             translate: -50% 0; z-index: 3; font-family: var(--sans);
             font-weight: 600; font-size: .66rem; letter-spacing: .3em;
             text-transform: uppercase; color: var(--salie); opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
  .scrolwenk { animation: wenken 2.6s ease-in-out infinite; }
  @keyframes wenken { 0%,100% { transform: translateY(0); opacity: .75; }
                      50% { transform: translateY(5px); opacity: .35; } }
}
@media (max-width: 760px) {
  .hero .heroblad { height: min(82svh, 760px); }
  .scrolwenk { display: none; }
}

/* Op een telefoon staan de knoppen onder elkaar; dan horen ze even breed te
   zijn, anders leest de tweede als minder belangrijk dan hij is. */
@media (max-width: 560px) {
  .knoppen { flex-direction: column; align-items: stretch; }
  .knop { justify-content: space-between; }
}

/* ===== HEROSTROOK ======================================================
   Het archief is verticaal, want het is social video. De hero vult dus de
   breedte met staande clips die langzaam langsschuiven, in plaats van met
   een liggend beeld dat er niet is. Uitsnijden van 9:16 naar volle breedte
   zou zeventig procent weggooien, en juist de makelaar valt dan buiten beeld.

   De rij staat twee keer in de HTML; de animatie schuift precies de helft
   op, zodat de lus niet te zien is.
   ===================================================================== */
.herostrook { position: absolute; inset: 0; overflow: hidden; }
.strookrij { display: flex; gap: clamp(.4rem, .8vw, .8rem); height: 100%;
             width: max-content; align-items: center;
             padding-inline: clamp(.4rem, .8vw, .8rem); }
/* Allemaal even hoog en op één lijn. Het verspringen om en om was bedacht
   toen hier nog abstracte plaatshouders stonden: dat las als compositie.
   Met echt beeld erin leest precies hetzelfde als een slordige uitlijning,
   want je oog verwacht bij foto's en video wél een rechte rij. */
.strookclip { height: 100%; width: auto; aspect-ratio: 9 / 16; flex: none;
              border-radius: 0; }
.strookclip .bijschrift { font-size: .6rem; }
@media (prefers-reduced-motion: no-preference) {
  .strookrij { animation: strookschuif 68s linear infinite; }
  @keyframes strookschuif { to { transform: translateX(-50%); } }
}
/* Donkerder naar links toe, zodat de kop altijd op een rustige ondergrond
   staat ongeacht welke clip er net langskomt. */
.hero .herotekst { background:
  linear-gradient(to top, rgba(6,14,9,.96) 0%, rgba(6,14,9,.78) 46%, transparent 100%); }
.hero .heroblad::after { content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; background:
    linear-gradient(to right, rgba(6,14,9,.92) 0%, rgba(6,14,9,.5) 38%, rgba(6,14,9,.12) 70%); }
.hero .herotekst, .hero .scrolwenk { z-index: 2; }
@media (max-width: 760px) {
  .strookclip { height: 100%; }
  .strookclip:nth-child(even) { transform: none; }
  .hero .heroblad::after { background:
    linear-gradient(to top, rgba(6,14,9,.9) 0%, rgba(6,14,9,.45) 55%, rgba(6,14,9,.15) 100%); }
}

/* Zolang er plaatshouders staan moet zichtbaar zijn dat het losse clips
   zijn en niet één donker vlak. Elke clip krijgt daarom een eigen lichtval
   en een randje. Met echt beeld erin doen deze regels niets meer. */
.strookclip { border: 1px solid rgba(143,168,154,.22); }
.strookclip:nth-child(3n+1)::before { background:
  radial-gradient(60% 50% at 30% 18%, rgba(143,168,154,.34), transparent 72%),
  linear-gradient(160deg, #224635 0%, var(--pek) 70%); }
.strookclip:nth-child(3n+2)::before { background:
  radial-gradient(55% 45% at 70% 26%, rgba(143,168,154,.22), transparent 70%),
  linear-gradient(200deg, #1a3a2c 0%, var(--pek) 66%); }
.strookclip:nth-child(3n+3)::before { background:
  radial-gradient(70% 55% at 45% 80%, rgba(143,168,154,.28), transparent 74%),
  linear-gradient(140deg, #16302459 0%, var(--pek) 62%); }
.strookclip:nth-child(even)::before { animation-delay: -9s; }
.strookclip:nth-child(3n)::before { animation-delay: -17s; }

/* ===== RUSTIGER ========================================================
   Minder elementen per scherm, meer lucht ertussen. De lopende band onder
   de hero is vervallen: twee horizontale stroken boven elkaar maken het
   meteen druk, en de werkgebieden komen bij Eén regio terug waar ze iets
   betekenen.
   ===================================================================== */
.hero + .bewijs, .hero .bewijs { border-top: 1px solid rgba(143,168,154,.16); }
.bewijs > div { padding-block: clamp(2rem, 4vw, 3.2rem); }

/* --- het statement als moment ------------------------------------------ */
.statementscene .binnen { display: grid; align-content: center; }
.statementscene .statement { max-width: 15ch;
  font-size: clamp(2.6rem, 7.4vw, 5.6rem); line-height: .98; }
.statementuitleg { display: grid; gap: clamp(1.2rem, 2.4vw, 2.4rem);
                   margin-top: clamp(2.4rem, 5vw, 4rem); max-width: 62rem; }
@media (min-width: 860px) {
  .statementuitleg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.statementuitleg p { margin: 0; max-width: 40ch; }

/* --- blog in drie kaarten ---------------------------------------------- */
.blogkop { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem;
           align-items: end; justify-content: space-between; }
.blogkop .knop { margin: 0; }
.blogdrie { display: grid; gap: 1px; margin-top: clamp(2.2rem, 4vw, 3.2rem);
            background: var(--haar); border-block: 1px solid var(--haar); }
@media (min-width: 820px) { .blogdrie { grid-template-columns: repeat(3, 1fr); } }
.blogkaart { background: var(--diep); padding: clamp(1.6rem, 3vw, 2.4rem);
             text-decoration: none; display: grid; gap: 1.2rem;
             align-content: space-between; min-height: clamp(11rem, 18vw, 15rem);
             transition: background .45s var(--soepel); }
.blogkaart:hover { background: var(--groen); }
.blogkaart .nr { font-family: var(--serif); font-weight: 500;
                 font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1;
                 color: var(--accent); }
.blogkaart .titel { font-family: var(--sans); font-weight: 700;
                    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
                    letter-spacing: -.015em; line-height: 1.25; text-wrap: balance; }

/* --- de vragen gecentreerd --------------------------------------------- */
/* De sectie erboven is links uitgelijnd; twee keer hetzelfde begin achter
   elkaar laat de pagina stilstaan. */
.vragenmidden .binnen { display: grid; justify-items: center; text-align: center; }
.vragenmidden .kop { text-align: center; max-width: 18ch; }
.vragenmidden .faq { text-align: left; width: 100%; }
.vragenmidden .knoppen { justify-content: center; }

/* =====================================================================
   DE TWEEDE HELFT
   De eerste vijf secties hebben elk een eigen mechanisme: een schuivende
   strook, een woordreveal, een gepinde sequentie, een plakkende kolom, een
   zoomovergang. Daarna hield de pagina op met uitvinden: drie tweeluiken en
   vier vormloze secties. Hieronder krijgt elke sectie weer een eigen vorm.
   ===================================================================== */

/* --- 05 Over ons: portret vult het scherm ------------------------------ */
.portretscene .portretblad { position: relative; height: min(92svh, 1020px);
                             min-height: 32rem; overflow: hidden; }
.portretbeeld { position: absolute; inset: 0; aspect-ratio: auto;
                width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: no-preference) {
  .portretbeeld::before { animation: zwerf 34s ease-in-out infinite alternate,
                                     indalen 30s ease-in-out infinite alternate; }
}
.portretblad::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(6,14,9,.1) 0%, rgba(6,14,9,.55) 42%,
              rgba(6,14,9,.95) 78%); }
.portrettekst { position: absolute; inset: 0; z-index: 2;
                display: grid; align-content: center; justify-items: end; }
.portrettekst .binnen { padding-block: 0; text-align: right; }
.portrettekst .kop { max-width: 13ch; margin-left: auto; }
.portrettekst .lood { max-width: 34ch; margin: 1.4rem 0 0 auto; }
.portrettekst .band { flex-direction: row-reverse; }
.handtekening { font-family: var(--serif); font-style: italic; font-weight: 400;
                font-size: clamp(2.4rem, 5vw, 4rem); color: var(--accent);
                margin-top: clamp(1.4rem, 3vw, 2.4rem); line-height: 1; }
@media (max-width: 860px) {
  .portretblad::after { background: linear-gradient(to top,
    rgba(6,14,9,.95) 0%, rgba(6,14,9,.55) 55%, rgba(6,14,9,.12) 100%); }
  .portrettekst { align-content: end; justify-items: start; }
  .portrettekst .binnen { text-align: left; padding-block: 0 2.4rem; }
  .portrettekst .kop, .portrettekst .lood { margin-left: 0; }
  .portrettekst .band { flex-direction: row; }
}

/* --- 06 Review: één ding op het scherm --------------------------------- */
.citaatscene .binnen { display: grid; justify-items: center; }
.grootcitaat { margin: 0; text-align: center; max-width: 24ch; }
.grootcitaat .sterren { color: var(--accent); letter-spacing: .4em;
                        font-size: 1.1rem; display: block;
                        margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.grootcitaat blockquote { margin: 0; font-family: var(--sans); font-weight: 800;
  font-size: clamp(2rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -.04em;
  font-stretch: 86%; text-wrap: balance; }
.grootcitaat figcaption { font-family: var(--sans); font-weight: 600;
  font-size: var(--klein); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-top: clamp(1.8rem, 3.4vw, 2.8rem);
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: center; }
.grootcitaat figcaption a { opacity: .6; text-decoration: none; }
.grootcitaat figcaption a:hover { opacity: 1; text-decoration: underline;
                                  text-underline-offset: 3px; }

/* --- 08 De kantoren als lijst met hun gebied --------------------------- */
.kantorenkop { display: grid; gap: 1.2rem; }
@media (min-width: 900px) {
  .kantorenkop { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
                 gap: clamp(2rem, 5vw, 4rem); align-items: end; }
}
.kantoren { list-style: none; margin: clamp(2.4rem, 5vw, 4rem) 0 0; padding: 0;
            counter-reset: kantoor; }
.kantoren li { counter-increment: kantoor;
  display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.4rem;
  align-items: baseline; border-top: 1px solid var(--haar);
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  transition: padding-left .45s var(--soepel); }
@media (min-width: 760px) {
  .kantoren li { grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 1fr); }
}
.kantoren li:last-child { border-bottom: 1px solid var(--haar); }
.kantoren li::before { content: counter(kantoor, decimal-leading-zero);
  font-family: var(--sans); font-weight: 700; font-size: var(--klein);
  letter-spacing: .14em; color: var(--accent); opacity: .55; }
.kantoren li:hover { padding-left: .8rem; }
.kantoren .kantoor { font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem); letter-spacing: -.02em; }
.kantoren .gebied { font-size: clamp(.95rem, 1.5vw, 1.1rem); opacity: .72; }
@media (max-width: 759px) {
  .kantoren li::before { grid-row: span 2; }
}
.kantoren .vrij { color: var(--accent); }
.kantoren .vrij::before { opacity: 1; }
.kantoren .vrij .gebied { opacity: 1; }


/* --- kopsectie van elke binnenpagina ------------------------------------
   Diensten, cases, contact en over ons openen met dezelfde scene: tekst
   verticaal gecentreerd, een scrollwenk onderaan links. Alleen de
   regelbreedtes verschillen per pagina; die staan bij de pagina zelf.
   ----------------------------------------------------------------------- */
.dienstenkop .binnen, .caseskop .binnen,
.contactkop .binnen, .overkop .binnen { display: grid; align-content: center; }
.dienstenkop .kop, .caseskop .kop,
.contactkop .kop, .overkop .kop { margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); }
.dienstenkop .scrolwenk, .caseskop .scrolwenk,
.contactkop .scrolwenk, .overkop .scrolwenk {
  position: static; translate: none; justify-self: start;
  margin-top: clamp(2.4rem, 5vw, 4rem); }

/* --- dienstenpagina ----------------------------------------------------- */
/* Elke dienst is een scène met beeld, net als op de homepage, in plaats van
   vijf keer kop-alinea-lijstje onder elkaar. */
/* Het serif-woord heeft regelhoogte .78, dus de laatste regel van de kop
   neemt nauwelijks ruimte in en de alinea plakt eraan vast. Daarom extra
   lucht onder elke kop die op een serif-woord eindigt. */
.dienstenkop .kop { max-width: 16ch; }
.dienstenkop .lood { max-width: 46ch; }
.dienstscene .binnen { padding-block: clamp(4rem, 8vw, 7rem); }
.dienstscene .kop { max-width: 15ch; }
.dienstscene .lood { margin-top: clamp(1.4rem, 2.6vw, 2.1rem); max-width: 42ch; }
.dienstscene .puntjes { margin-top: 1.8rem; }
/* Deze twee hadden width:auto met margin-inline:auto, waardoor de doos
   kromp tot zijn inhoud. De inhoud van een .vlak staat absoluut
   gepositioneerd en telt dus niet mee: alle drie de slots klapten in tot
   twee pixels en waren onzichtbaar. Dat viel niet op zolang ze leeg
   waren. Nu een vaste hoogte, waaruit de verhouding de breedte afleidt,
   en voor de vierkante een echte breedte in plaats van een maximum. */
.dienstscene .vlak.staand { height: 68vh; width: auto; max-width: 100%;
                            margin-inline: auto; }
.dienstscene .vlak.vierkant { width: min(100%, 30rem); margin-inline: auto; }
.slotscene .binnen { display: grid; align-content: center; }
.slotscene .kop { max-width: 15ch; }
.slotscene .lood { margin-top: clamp(1.4rem, 2.6vw, 2.1rem); max-width: 42ch; }

/* De slotsectie van de homepage draagt dezelfde vorm als .slotscene op
   diensten; alleen de maximale breedte verschilt omdat er een knop onder staat. */
.slot .lood { margin-top: clamp(1.4rem, 2.6vw, 2.1rem); }

/* --- casespagina --------------------------------------------------------- */
.caseskop .kop { max-width: 14ch; }
.caseskop .lood { max-width: 46ch; }
.casescene .binnen { padding-block: clamp(4rem, 8vw, 7rem); }
.casescene .plaats { font-family: var(--sans); font-weight: 600;
                     font-size: var(--klein); letter-spacing: .16em;
                     text-transform: uppercase; color: var(--accent);
                     display: block; margin-bottom: .7rem; }
.casescene .kop { max-width: 14ch; }
.casescene .lood { margin-top: clamp(1.2rem, 2.4vw, 1.9rem); max-width: 42ch; }

/* Eén cijfer per kantoor: de weergaven sinds de start, opgeteld uit de
   maandmetingen. Eén groot getal zegt meer dan drie kleine. */
.viewcijfer { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--haar);
              padding-top: clamp(1.2rem, 2.4vw, 1.8rem); max-width: 26rem; }
.viewcijfer .getal { font-family: var(--serif); font-weight: 500;
                     font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1;
                     color: var(--accent); display: block;
                     font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.viewcijfer .wat { font-family: var(--sans); font-weight: 600; font-size: .72rem;
                   letter-spacing: .14em; text-transform: uppercase; display: block;
                   margin-top: .7rem; opacity: .72; line-height: 1.4; }
.viewcijfer .soorten { font-size: .95rem; display: block; margin-top: .9rem;
                       opacity: .62; }
/* Een opdracht zonder meting toont geen getal. De bovenmarge van de
   contentsoorten hing aan het cijfer erboven; zonder dat cijfer staat de
   regel anders los van de scheidingslijn. */
.viewcijfer.geencijfer .soorten { margin-top: 0; }

/* Drie pakketten naast elkaar, in opbouw. De labels tonen wat erin zit;
   er staat nergens wat je niet krijgt, want een makelaar leest dan vooral
   de gaten. */
.pakketten { display: grid; gap: 1px; background: var(--haar);
  border: 1px solid var(--haar); margin: clamp(2rem, 4vw, 3rem) 0 0; }
.pakket { background: var(--grond); padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid; align-content: start; gap: .85rem; }
/* De drie kaarten delen hun rijen. Zonder dat schoof de slotregel van het
   derde pakket omlaag zodra zijn drie labels over twee regels liepen, en
   dat gebeurt al rond 900px. */
@media (min-width: 860px) {
  .pakketten { grid-template-columns: repeat(3, minmax(0, 1fr));
               grid-template-rows: auto auto auto auto auto; }
  .pakket { grid-row: span 5; grid-template-rows: subgrid; }
}
.pakketnr { font-family: var(--sans); font-weight: 700; font-size: .72rem;
  letter-spacing: .2em; color: var(--accent); margin: 0; }
.pakketkop { font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.25rem, 2.3vw, 1.6rem); letter-spacing: -.025em;
  line-height: 1.18; margin: 0; }
.pakketvoor { margin: 0; opacity: .74; line-height: 1.55; font-size: .97rem; }
.pakket .erin { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pakket .erin span { font-family: var(--sans); font-weight: 700;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .65rem; border: 1px solid var(--lijn-op-groen);
  border-radius: 2px; white-space: nowrap; }
.pakketwat { margin: .35rem 0 0; padding-top: .85rem;
  border-top: 1px solid var(--haar); font-size: .95rem; line-height: 1.55;
  opacity: .82; }
/* De uitzondering voor kantoren die niet filmen: wel zichtbaar, maar niet
   als vierde pakket, want dan is de opbouw weer weg. */
.uitzondering { margin: clamp(1.4rem, 3vw, 2rem) 0 0; max-width: 52ch;
  opacity: .72; font-size: .97rem; line-height: 1.6; }
.montagescene .uitzondering { margin-top: clamp(1.2rem, 2.4vw, 1.6rem); }

/* De drie manieren waarop een opname bij ons binnenkomt, onder elkaar in
   de tekstkolom. Geen kaartjes naast elkaar: het zijn korte stukjes en
   naast elkaar werden de regels te smal. */
/* Zonder begrenzing werd het staande vak 647 bij 1150 en de sectie 1345
   hoog. Zelfde aanpak als op de dienstenpagina: hoogte vast, breedte volgt
   uit de verhouding. */
.montagescene .vlak.staand { height: 64vh; width: auto; max-width: 100%;
  margin-inline: auto; }

.montagekaarten { display: grid; gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.montagekaart { border-top: 1px solid var(--haar);
  padding-top: clamp(.8rem, 1.6vw, 1.1rem); }
.montagekop { font-family: var(--sans); font-weight: 700; font-size: .98rem;
  letter-spacing: -.01em; margin: 0 0 .35rem; }
.montagekaart p { margin: 0; opacity: .76; font-size: .96rem;
  line-height: 1.55; }

/* De cijfers per kantoor: alleen wat te tellen valt, geen geschat bereik. */
.caseresultaat { display: grid; grid-template-columns: repeat(3, 1fr);
                 gap: 1px; background: var(--haar);
                 border-block: 1px solid var(--haar);
                 margin-top: clamp(2rem, 4vw, 3rem); }
.caseresultaat > div { background: var(--grond); padding: clamp(1rem, 2vw, 1.4rem)
                       clamp(.7rem, 1.4vw, 1rem); }
.caseresultaat .getal { font-family: var(--serif); font-weight: 500;
                        font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1;
                        color: var(--accent); display: block;
                        font-variant-numeric: tabular-nums; }
.caseresultaat .wat { font-family: var(--sans); font-weight: 600;
                      font-size: .68rem; letter-spacing: .12em;
                      text-transform: uppercase; display: block;
                      margin-top: .45rem; opacity: .72; line-height: 1.3; }

/* Twee staande clips naast elkaar, het formaat waarin het werk gemaakt is. */
.klantstrook { display: grid; grid-template-columns: repeat(2, 1fr);
               gap: clamp(.5rem, 1vw, .9rem); align-items: start; }
.klantstrook .vlak:nth-child(2) { margin-top: clamp(1.6rem, 4vw, 3rem); }
@media (max-width: 620px) {
  .caseresultaat { grid-template-columns: 1fr; }
  .klantstrook .vlak:nth-child(2) { margin-top: 0; }
}

/* Het totaal is zeven tekens lang en zou anders over twee regels breken. */
.caseskop + .bewijs .getal { font-size: clamp(1.7rem, 3.4vw, 2.6rem);
                             letter-spacing: -.02em; }
.caseskop .kop { max-width: 15ch; }

/* --- contactpagina ------------------------------------------------------ */
.contactkop .kop { max-width: 14ch; }
.contactkop .lood { max-width: 44ch; }
.contactgrid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) {
  .contactgrid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
                 align-items: start; }
}
.contactgrid .formulier { max-width: none; }
.contactnaast .kop { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.stappenlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.stappenlijst li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem;
                   border-top: 1px solid var(--haar); padding: 1.1rem 0;
                   align-items: baseline; }
.stappenlijst li:last-child { border-bottom: 1px solid var(--haar); }
.stappenlijst .nr { font-family: var(--sans); font-weight: 700;
                    font-size: var(--klein); letter-spacing: .14em;
                    color: var(--accent); }
.stappenlijst li span:last-child { font-size: 1rem; line-height: 1.5; }
.andersdan { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: .5rem; }
.andersdan p { margin: 0; font-size: .98rem; opacity: .8; }
.andersdan a { text-decoration: underline; text-underline-offset: 3px;
               text-decoration-color: var(--accent); }
.contactslot .binnen { display: grid; align-content: center; justify-items: center;
                       text-align: center; }
.contactslot .kop { max-width: 17ch; }
.contactslot .lood { max-width: 48ch; margin-top: 1.4rem; }

/* =====================================================================
   Het serif-accentwoord heeft regelhoogte .78, zodat het binnen een kop
   niet de regelafstand oprekt. Keerzijde: eindigt een kop op zo'n woord,
   dan steken de letters onder de regelbox uit en plakt de volgende alinea
   eraan vast. Dat kwam op drie pagina's terug, dus hier één keer opgelost:
   een kop die op een serif-woord eindigt krijgt extra onderruimte.
   ===================================================================== */
.kop:has(> .serif-woord:last-child),
h1:has(> .serif-woord:last-child),
h2:has(> .serif-woord:last-child) { padding-bottom: .18em; }
.statement:has(> .sleutel:last-child) { padding-bottom: .1em; }

/* --- over ons ------------------------------------------------------------ */
.overkop .kop { max-width: 15ch; }
.overkop .lood { max-width: 46ch; }

/* Drie feiten onder de kop: opgericht, omvang, exclusiviteit. Geen kantoren
   tellen, want dat zegt niets over wat er gemaakt is. */
.feiten { list-style: none; margin: clamp(2.2rem, 4.5vw, 3.6rem) 0 0; padding: 0;
          display: flex; flex-wrap: wrap; gap: clamp(1.8rem, 5vw, 4.5rem); }
.feiten li { display: grid; gap: .3rem; }
.feiten .getal { font-family: var(--sans); font-weight: 800;
                 font-size: clamp(1.9rem, 3.8vw, 3rem); letter-spacing: -.04em;
                 line-height: 1; color: var(--accent); }
.feiten .wat { font-size: var(--klein); letter-spacing: .1em;
               text-transform: uppercase; opacity: .62; }

.overscene .binnen { padding-block: clamp(4rem, 8vw, 7rem); }
.overscene .kop { max-width: 14ch; }
.overscene .lood { margin-top: clamp(1.4rem, 2.6vw, 2.1rem); max-width: 42ch; }
.overscene p + p { margin-top: 1rem; max-width: 46ch; }
/* Het vak was 9:16 met een label dat 4:5 beloofde. Ik had eerst het vak
   aangepast, maar het beeld dat hier komt is een reel en die is 9:16, dus
   het label was fout en niet de vorm. Hoogte begrensd, anders wordt het
   vak 943 hoog naast een tekstkolom van de helft. */
.overscene .vlak.staand { height: min(72vh, 640px); width: auto;
                          max-width: 100%; margin-inline: auto; }

.mensenscene .binnen { padding-block: clamp(4rem, 8vw, 7rem); }
.mensenscene .kop { max-width: 14ch; }
.mensenscene .lood { margin-top: clamp(1.4rem, 2.6vw, 2.1rem); max-width: 46ch; }

/* Drie naast elkaar op een breed scherm, twee op een tablet, onder elkaar
   op een telefoon. Niet auto-fit: dat zette er bij zes mensen vijf op de
   eerste rij en een alleen op de tweede. Zes deelt netjes door drie en de
   portretten worden er ook groter van. Het beeldvlak houdt 4:5 aan, de
   verhouding waarin we filmen. */
.mensen { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem);
          margin-top: clamp(2.6rem, 5vw, 4rem);
          grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .mensen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .mensen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mens .vlak { aspect-ratio: 4 / 5; width: 100%; max-height: none; }
/* Bram wil geen foto. Zijn kaart krijgt daarom een initiaal in plaats van
   de cirkel met het fototeken, want die staat bij de anderen te wachten op
   beeld dat nog komt. Een leeg vak zou lezen alsof er iets ontbreekt. */
.vlak.monogram { display: grid; place-items: center;
  background: rgba(143,168,154,.07);
  border-color: rgba(143,168,154,.26); }
.vlak.monogram span { font-family: var(--serif); font-weight: 500;
  font-size: clamp(3rem, 7vw, 5rem); line-height: 1; color: var(--accent);
  opacity: .55; }
.mens .naam { font-family: var(--sans); font-weight: 700;
              font-size: clamp(1.05rem, 1.8vw, 1.3rem); letter-spacing: -.02em;
              margin: 1.1rem 0 0; }
.mens .rol { font-size: var(--klein); letter-spacing: .1em;
             text-transform: uppercase; color: var(--accent); margin: .35rem 0 0; }
.mens .wat { font-size: clamp(.92rem, 1.3vw, 1rem); line-height: 1.5;
             opacity: .74; margin: .7rem 0 0; }

/* --- toestemmingsbalk ------------------------------------------------------ */
/* Onderaan, over de pagina heen, maar niet als een slot: de site werkt
   gewoon terwijl hij er staat. De twee knoppen hebben dezelfde maat en
   staan naast elkaar; weigeren hoort niet moeilijker te zijn dan
   accepteren. Hij komt uit het niets omhoog zodra app.js hem toont. */
.toestemming { position: fixed; inset: auto 0 0 0; z-index: 70;
  background: var(--pek); color: var(--creme);
  border-top: 1px solid rgba(143,168,154,.28);
  padding: clamp(1rem, 2.4vw, 1.4rem) var(--marge);
  transform: translateY(100%); transition: transform .5s var(--soepel); }
.toestemming.op { transform: none; }
.toestemmingbinnen { max-width: var(--breed); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(.9rem, 2.4vw, 2rem); justify-content: space-between; }
.toestemmingtekst { margin: 0; max-width: 62ch; font-size: .92rem;
                    line-height: 1.5; opacity: .88; }
.toestemmingtekst a { color: var(--salie); text-decoration: underline;
                      text-underline-offset: 3px; }
.toestemmingknoppen { display: flex; gap: .6rem; flex: none; }
/* De knoppen staan op pek, dus ze hebben de donkere variabelen nodig. */
.toestemming .knop { --grond: var(--pek); --accent: var(--salie);
  --haar: rgba(143,168,154,.28); --tekst-kleur: var(--creme);
  font-size: .8rem; padding: .75rem 1.3rem;
  min-width: 9rem; justify-content: center; }
@media (max-width: 560px) {
  .toestemmingknoppen { width: 100%; }
  .toestemming .knop { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .toestemming { transition: none; }
}

/* --- kaart van Nederland --------------------------------------------------- */
/* Geen kaartdienst en geen tegels: de vormen staan als pad in de pagina
   (zie _nederland.json). Dat scheelt een verzoek naar een derde partij en
   de kaart neemt de kleuren van de sectie over. Alle klassen beginnen met
   een k, want .grond is al de vaste achtergrondlaag van het hele ontwerp.

   De provincies lichten een voor een op, van noord naar zuid, en blijven
   daarna staan. Welke werkgebieden bezet zijn hoort in een kennismaking
   en niet op een kaart, dus staat er geen enkele plaatsnaam.

   De grondstand is de afgemaakte kaart. Pas als app.js .doet erbij zet,
   dus alleen bij beweging aan en met javascript, wordt er iets verborgen
   om daarna op te bouwen. Zonder script of met beweging uit staat de kaart
   er gewoon, compleet. */
.kaartvlak { margin: 0; position: relative; }
.nlkaart { display: block; width: 100%; height: auto; overflow: visible; }
.nlkaart .kprov { fill: var(--accent); fill-opacity: .1;
                  stroke: var(--accent); stroke-opacity: .22; stroke-width: 1;
                  stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nlkaart .kkust { fill: none; stroke: var(--accent); stroke-opacity: .62;
                  stroke-width: 1.4; stroke-linejoin: round;
                  vector-effect: non-scaling-stroke; }

.gebiedenkop { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); }

@media (prefers-reduced-motion: no-preference) {
  /* .doet zet app.js erbij zodra het script draait; .aan als de sectie in
     beeld komt. Twee klassen, omdat anders een bezoeker zonder javascript
     naar een lege kaart kijkt. */
  .kaartscene.doet .nlkaart .kprov { fill-opacity: 0; stroke-opacity: 0; }
  .kaartscene.doet .nlkaart .kkust { stroke-dasharray: 1; stroke-dashoffset: 1; }

  .kaartscene.doet.aan .nlkaart .kkust {
    animation: kust-trekken 1.4s var(--traag) forwards; }
  /* Twaalf provincies van 0,16 s uit elkaar: de laatste licht op na
     ongeveer twee seconden. De flits gaat even over de eindwaarde heen,
     anders voel je niet dat er iets aangaat. */
  .kaartscene.doet.aan .nlkaart .kprov {
    animation: prov-op .85s var(--soepel) forwards;
    animation-delay: calc(.45s + var(--i) * .16s); }

  @keyframes kust-trekken { to { stroke-dashoffset: 0; } }
  @keyframes prov-op {
    from { fill-opacity: 0;   stroke-opacity: 0; }
    38%  { fill-opacity: .34; stroke-opacity: .5; }
    to   { fill-opacity: .1;  stroke-opacity: .22; } }
}

/* --- blogpagina ---------------------------------------------------------- */
/* Hier staan voor het eerst echte foto's in plaats van plaatsvlakken. Een
   vlak met een <img> laat zijn verlooplaag vallen; een vlak zonder beeld
   (drie artikelen hadden er op Wix al geen) houdt het merkvlak. */
.vlak img { position: absolute; inset: 0; z-index: 1;
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 1.1s var(--soepel); }
.vlak:has(img)::before { display: none; }
.vlak:has(img)::after { background:
  radial-gradient(120% 90% at 50% 50%, transparent 54%, rgba(6,14,9,.52) 100%); }
a:hover > .vlak img, .artikelkaart a:hover .vlak img { transform: scale(1.05); }

.blogkop .binnen { display: grid; align-content: center; }
.blogkop .kop { max-width: 15ch; margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); }
.blogkop .lood { max-width: 48ch; }
.blogkop .scrolwenk { position: static; translate: none; justify-self: start;
                      margin-top: clamp(2.4rem, 5vw, 4rem); }

.uitgelicht .binnen { padding-block: clamp(4rem, 8vw, 7rem); }
.uitgelicht .kop { max-width: 18ch; }
.uitgelicht .kop a { color: inherit; text-decoration: none; }
.uitgelicht .kop a:hover { color: var(--accent); }
.uitgelicht .lood { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); max-width: 46ch; }
.uitgelicht .meer { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.blogbeeld { display: block; }

.blogrooster .binnen { padding-block: clamp(4rem, 8vw, 7rem); }
.blogrooster .kop { opacity: .62; }
/* het rooster overschrijft de oude lijstvorm van .blogs */
.blogrooster .blogs { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem);
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.artikelkaart a { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: .9rem; text-decoration: none; color: inherit; position: relative; }
/* Categorie en datum ieder op een eigen regel. Samen op één regel braken
   ze bij de ene kaart wel en bij de andere niet, waardoor de titels binnen
   een rij tot 36px uiteenliepen. */
.artikelkaart .oog { margin: 0; white-space: nowrap; }
.artikelkaart .kaartdatum { font-family: var(--sans); font-weight: 600;
  font-size: var(--klein); letter-spacing: .14em; text-transform: uppercase;
  opacity: .5; margin: -.45rem 0 0; white-space: nowrap; }
.artikelkaart .titel { font-family: var(--sans); font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.18rem); letter-spacing: -.02em;
  line-height: 1.26; margin: 0; }
.artikelkaart .pijl { color: var(--accent); opacity: 0; transform: translateX(-8px);
  transition: opacity .35s ease, transform .35s var(--soepel); }
.artikelkaart a:hover .pijl { opacity: 1; transform: none; }
.artikelkaart a:hover .titel { color: var(--accent); }

/* --- filteren op thema --------------------------------------------------- */
/* De thema's stonden al bij elk artikel, maar je kon er niets mee. De balk
   verschijnt alleen als app.js draait: een knoppenrij die niets doet is
   erger dan geen knoppenrij. Zonder script staat het hele rooster er, en
   dat is ook wat een zoekmachine ziet.

   De nieuwste staat uitgelicht boven het rooster en zit er ook in, zodat
   filteren op zijn thema hem niet overslaat. Standaard is hij verborgen,
   anders stond hij er twee keer. */
.themabalk { display: none; flex-wrap: wrap; gap: .5rem;
             margin-top: clamp(1.6rem, 3vw, 2.2rem); }
body.blogfilter .themabalk { display: flex; }
.themaknop { font-family: var(--sans); font-weight: 700; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: inherit;
  background: transparent; border: 1px solid var(--haar); border-radius: 0;
  padding: .58rem .9rem; min-height: 2.5rem;
  display: inline-flex; align-items: center; gap: .5rem;
  cursor: pointer;
  transition: color .3s var(--soepel), border-color .3s var(--soepel),
              background-color .3s var(--soepel); }
.themaknop:hover { border-color: var(--accent); color: var(--accent); }
.themaknop .aantal { font-size: .68rem; opacity: .5;
                     font-variant-numeric: tabular-nums; }
.themaknop.aan { background: var(--accent); border-color: var(--accent);
                 color: var(--grond); }
.themaknop.aan .aantal { opacity: .66; }
.themaknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

body.opthema .uitgelicht { display: none; }

/* --- pakkettenpagina ----------------------------------------------------- */
.pakkettenkop .binnen { display: grid; align-content: center; }
.pakkettenkop .kop { max-width: 14ch; margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); }
.pakkettenkop .lood { max-width: 48ch; }
.pakkettenkop .scrolwenk { position: static; translate: none; justify-self: start;
                           margin-top: clamp(2.4rem, 5vw, 4rem); }

.woningscene .binnen { padding-block: clamp(4rem, 8vw, 7rem); }
.woningscene .kop { max-width: 14ch; }
.woningscene .lood { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); max-width: 44ch; }
.woningscene p + p { margin-top: 1rem; max-width: 46ch; }



/* Drie onderdelen naast elkaar. Geen ladder: elk blok staat op zichzelf,
   dus geen "alles uit het vorige pakket" en geen oplopende hoogte. */
.keuzescene .binnen, .combinatiescene .binnen { padding-block: clamp(4rem, 8vw, 7rem); }
.keuzescene .kop, .combinatiescene .kop { max-width: 16ch; }
.combinatiescene .lood { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); max-width: 46ch; }
.keuzes { display: grid; gap: clamp(1.8rem, 3.4vw, 3rem);
  margin-top: clamp(2.6rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.keuze { border-top: 1px solid var(--haar); padding-top: clamp(1.2rem, 2.4vw, 1.8rem); }
/* De drie kolommen delen hun rijen, zodat de opsommingen op dezelfde hoogte
   beginnen. Het kerngetal van Adverteren is een woord in plaats van een
   cijfer en loopt daardoor over meer regels; zonder dit begon die kolom
   tweeendertig pixels lager. */
@media (min-width: 760px) {
  /* Acht rijen en niet vier: bij twee kolommen zakt de derde kolom naar
     een eigen rijenband, en zonder die rijen valt de uitlijning daar weg. */
  .keuzes { grid-template-rows: repeat(8, auto); }
  .keuze { display: grid; grid-row: span 4; grid-template-rows: subgrid;
           align-content: start; }
}
.keuze .oog { margin-bottom: .9rem; }
.keuzekop { font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.35rem); letter-spacing: -.025em;
  line-height: 1.22; margin: 0 0 1.2rem; max-width: 22ch; }
/* Het getal dat het onderdeel definieert, boven de opsomming. Zonder dit
   stonden twaalf video's per maand en een intakedetail even groot. */
.kerngetal { margin: 0 0 1.3rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--haar); display: flex; align-items: baseline;
  gap: .6rem; flex-wrap: wrap; }
.kerngetal .getal { font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kerngetal .erbij { font-size: .98rem; line-height: 1.45; opacity: .8;
  max-width: 20ch; }

.keuze ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.keuze li { position: relative; padding-left: 1.1rem; opacity: .76;
  font-size: clamp(.92rem, 1.3vw, 1rem); line-height: 1.45; }
.keuze li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 1px; background: var(--accent); }

/* De combinatietabel: welke onderdelen zitten in welke keuze. */
.matrix { margin-top: clamp(2.2rem, 4vw, 3.2rem); overflow-x: auto; }
.matrix table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.matrix th, .matrix td { text-align: left; padding: clamp(.9rem, 1.8vw, 1.3rem) .8rem;
  border-bottom: 1px solid var(--haar); vertical-align: baseline; }
.matrix thead th { font-family: var(--sans); font-weight: 700;
  font-size: var(--klein); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); text-align: center; white-space: nowrap; }
.matrix tbody th { font-weight: 400; display: grid; gap: .25rem; }
.matrix .wat { font-family: var(--sans); font-weight: 700;
  font-size: clamp(1rem, 1.7vw, 1.15rem); letter-spacing: -.02em; }
.matrix .voor { font-size: clamp(.86rem, 1.2vw, .95rem); opacity: .6; }
.matrix td { text-align: center; }
/* .matrix centreert cellen, wat past bij een vergelijkingstabel met korte
   waarden. De enige tabel die er nu op staat is die in het hooks-artikel,
   en die heeft hele zinnen: links uitgelijnd, met het rijnummer rechts. */
.matrix.tekst td, .matrix.tekst th { text-align: left; }
.matrix.tekst td:first-child, .matrix.tekst th:first-child { text-align: right;
  color: var(--accent); opacity: .6;
  font-variant-numeric: tabular-nums; width: 2.5rem; }
.matrix.woorden td, .matrix.woorden th { text-align: left; }
.matrix.woorden thead th { text-align: left; white-space: normal; }
.matrix.woorden tbody td:first-child, .matrix.woorden tbody th:first-child {
  font-family: var(--sans); font-weight: 700; font-size: .95em;
  letter-spacing: -.01em; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* --- klantportaal -------------------------------------------------------- */
/* Bewust zonder beeldvlak: het portaal bevat klantgegevens en er wordt
   niets van getoond, ook geen nagebouwd scherm. */
.portaalkop .binnen { display: grid; align-content: center; }
.portaalkop .kop { max-width: 15ch; margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); }
.portaalkop .lood { max-width: 46ch; }
.portaalkop .scrolwenk { position: static; translate: none; justify-self: start;
                         margin-top: clamp(2.4rem, 5vw, 4rem); }
.portaalscene .binnen { padding-block: clamp(4rem, 8vw, 7rem); }
.portaalscene .kop { max-width: 12ch; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.portaalscene .lood { max-width: 42ch; }
.portaalscene p + p { margin-top: 1rem; max-width: 44ch; }
.portaalscene .meer { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* --- vragenpagina -------------------------------------------------------- */
.vragenkop .binnen { display: grid; align-content: center; }
.vragenkop .kop { max-width: 14ch; margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); }
.vragenkop .lood { max-width: 48ch; }
.vragenkop .scrolwenk { position: static; translate: none; justify-self: start;
                        margin-top: clamp(2.4rem, 5vw, 4rem); }
/* Drie groepen in plaats van één lange lijst: per thema een eigen scene. */
.vragenscene .binnen { padding-block: clamp(4rem, 8vw, 7rem); }
.vragenscene .kop { max-width: 16ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
/* De scheidingslijnen liepen 422px verder door dan de antwoorden zelf.
   De kolom is nu net iets breder dan de tekst, zodat de lijnen hem omlijsten
   in plaats van de halve pagina te doorkruisen. */
.vragenscene .faq { max-width: 40rem; }

/* --- video in de herostrook ----------------------------------------------
   Onder elke clip ligt het beeld dat Instagram als omslag koos; de video
   ligt erboven en wordt pas zichtbaar als hij echt speelt. Reden: een reel
   begint vaak met een donkere frame, en zodra de browser de video laadt
   toont hij die frame in plaats van de poster. Zo zie je nooit een zwart
   vlak, en blijft er een echt beeld staan als afspelen niet lukt: op een
   tabblad op de achtergrond, met beweging uit, of als de browser autoplay
   weigert. */
/* Geldt voor elk beeldvlak, niet alleen de herostrook: de foto ligt op
   z-index 1 (regel bij .vlak img hierboven), de video erboven. */
.vlak video { position: absolute; inset: 0; z-index: 2;
              width: 100%; height: 100%; object-fit: cover;
              opacity: 0; transition: opacity .7s var(--soepel); }
.vlak video.speelt { opacity: 1; }
.vlak:has(video)::before, .vlak:has(video)::after { display: none; }
.vlak:has(video) .merkteken { display: none; }
.vlak:has(video) .bijschrift {
  background: linear-gradient(to top, rgba(6,14,9,.9), transparent); }

/* --- video om naar te kijken --------------------------------------------
   De clips in de hero en de telefoon zijn decor: stil, in een lus, zonder
   knoppen. De kennismaking is iets anders. Daar kijk je naar, dus die
   heeft geluid en bediening, begint pas als je dat wilt, en staat meteen
   in beeld in plaats van over te vloeien. */
.inhoudclip video { opacity: 1; z-index: 2; }
.inhoudclip { border-color: rgba(143,168,154,.3); }

/* --- over ons op de homepage --------------------------------------------
   Zonder teamfoto is een schermvullend beeldvlak een leeg gat. De sectie
   draagt zich op typografie, net als het statement eerder op de pagina.
   Komt er later een foto, dan kan het portretblad er zo weer omheen. */
.teamscene .binnen { display: grid; align-content: center; }
.teamscene .kop { max-width: 15ch; margin-bottom: clamp(1.4rem, 2.8vw, 2.2rem); }
.teamscene .lood { max-width: 46ch; }
.teamscene .feiten { margin-top: clamp(2.4rem, 5vw, 4rem); }

/* --- het toestel kantelt naar je toe ------------------------------------
   Op de Apple-pagina draait het toestel omhoog terwijl je scrollt: het
   begint schuin naar achteren en staat rechtop zodra je er middenin zit.
   De waarde komt uit app.js, die hem aan de scrollpositie koppelt.
   Zonder script of met beweging uit is --kantel leeg en staat het toestel
   gewoon recht. */
@media (prefers-reduced-motion: no-preference) {
  .telefoon2 {
    transform: perspective(1600px)
               rotateX(calc(18deg * var(--kantel, 0)))
               scale(calc(1 - .06 * var(--kantel, 0)));
    transform-origin: 50% 85%;
  }
}


/* ===== DE TIJDLIJN OP PAKKETTEN =======================================
   Vijf stappen die je van links naar rechts afgaat terwijl je naar
   beneden scrolt. Dezelfde opzet als de gepinde sequentie op de
   homepage: de sectie is hoog, de inhoud plakt op schermhoogte, en
   app.js zet --loop van 0 naar 1 op basis van hoe ver je erdoorheen
   bent. CSS vertaalt dat naar een verschuiving.

   Zonder script blijft --loop op 0 en staat het spoor stil; het is dan
   een gewone horizontale lijst die je zelf kunt verschuiven. Met
   beweging uit staan de stappen onder elkaar.
   ==================================================================== */
.tijdlijnpin { position: relative; }
.tijdlijnvast { position: sticky; top: 0; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.8rem, 4vw, 3rem); overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem); }
/* .binnen is hier een flex-item, en margin-inline:auto wint daar van
   stretch: de container kromp tot zijn inhoud en ging in het midden
   staan, waardoor de kop ver rechts van de eerste stap kwam. */
.tijdlijnvast > .binnen { width: 100%; }
.tijdlijnkop .kop { max-width: 18ch; }
.tijdlijnkop .lood { margin-top: clamp(1rem, 2vw, 1.4rem); max-width: 44ch; }

.tijdlijnspoor { position: relative; }
.tijdlijnlijn { position: absolute; left: 0; right: 0; top: 2.1rem; height: 1px;
  background: var(--lijn-op-groen); }
.tijdstappen { list-style: none; margin: 0; display: flex;
  gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start;
  /* Gelijk beginnen met de kop erboven. .binnen is gecentreerd op --breed
     met --marge ernaast; zonder deze berekening startte de eerste stap
     tegen de schermrand terwijl de kop was ingesprongen. */
  padding: 0 0 0 max(var(--marge), (100vw - var(--breed)) / 2 + var(--marge));
  transform: translate3d(calc(var(--loop, 0) * var(--spoorloop, 0px) * -1), 0, 0);
  will-change: transform; }
.tijdstap { flex: 0 0 clamp(16rem, 25vw, 22rem); display: grid;
  gap: .55rem; align-content: start; }
.tijdnr { font-family: var(--serif); font-style: italic; font-size: 1.5rem;
  color: var(--accent); line-height: 1; display: block;
  width: 4.2rem; height: 4.2rem; border: 1px solid var(--lijn-op-groen);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--grond); margin-bottom: .5rem; }
.tijdkop { font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.025em;
  margin: 0; line-height: 1.2; }
.tijdwat { margin: 0; font-family: var(--sans); font-weight: 600;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); }
.tijdtekst { margin: .35rem 0 0; opacity: .76; line-height: 1.55;
  font-size: .97rem; }
.tijdbelofte { margin: .6rem 0 0; padding-top: .7rem;
  border-top: 1px solid var(--haar); font-size: .92rem; line-height: 1.5;
  color: var(--creme); opacity: .9; }
.tijdbelofte::before { content: "Belofte"; display: block;
  font-family: var(--sans); font-weight: 700; font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .3rem; }
/* margin-block en niet margin: de .binnen-klasse centreert met
   margin-inline:auto, en een kale margin:0 zette de slotregel daardoor
   tegen de linkerrand in plaats van onder de tijdlijn. */
.tijdlijnslot { margin-block: 0; opacity: .66; font-size: .95rem;
  line-height: 1.6; padding-block: 0; }
.tijdlijnslot { max-width: var(--breed); }

/* Geen gepinde sectie zonder scriptje of met beweging uit: dan gewoon
   onder elkaar, zodat alle vijf de stappen leesbaar blijven. */
@media (prefers-reduced-motion: reduce) {
  .tijdlijnpin { height: auto !important; }
  .tijdlijnvast { position: static; min-height: 0; }
  .tijdstappen { flex-direction: column; transform: none; padding-inline: var(--marge); }
  .tijdstap { flex: none; }
  .tijdlijnlijn { display: none; }
}
@media (max-width: 760px) {
  .tijdstap { flex: 0 0 min(78vw, 20rem); }
}