/* ==========================================================================
   UNIEK WEBDESIGN · Het Venster
   Designsysteem 2026. Vervangt uw-studio.css en uw-pages.css.

   Drie regels dragen dit hele bestand:
     1. Het werk vult het venster. Elk project komt tot de rand, tegen
        hetzelfde navy vlak, zodat zes schermbeelden een serie worden.
     2. De boog uit het logo is het enige ornament. Eén keer per pagina.
     3. Blauw is een signaal. Het betekent: dit leeft. Verder geen blauw.

   Kleur wordt alleen als heel vlak gebruikt, van rand tot rand. Kaartjes met
   een tint, schaduwen en afgeronde hoeken horen niet in dit systeem.
   ========================================================================== */

/* ---------- 1 · Letters ---------------------------------------------------
   Allebei zelfgehost en allebei van dezelfde ontwerpers. De sans draagt alles
   wat gelezen wordt, de serif komt alleen boven de 28 pixels omdat zijn
   haarlijnen daaronder wegvallen.
   ------------------------------------------------------------------------- */

@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/instrumentsans-latin-normal.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:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/instrumentsans-latin-ext-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:'Archivo';font-style:normal;font-weight:700 800;font-stretch:104% 112%;font-display:swap;
  src:url('/fonts/archivo-latin-variable.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:700 800;font-stretch:104% 112%;font-display:swap;
  src:url('/fonts/archivo-latin-ext-variable.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Terugvalletters met bijgestelde metriek, zodat de pagina niet verspringt. */
@font-face{font-family:'IS Fallback';src:local('Helvetica Neue'),local('Arial');
  size-adjust:97%;ascent-override:96%;descent-override:24%;line-gap-override:0%;}
@font-face{font-family:'Archivo Fallback';src:local('Helvetica Neue Bold'),local('Arial Bold'),local('Arial');
  size-adjust:101%;ascent-override:90%;descent-override:22%;line-gap-override:0%;}

/* ---------- 2 · Tokens ----------------------------------------------------- */

:root{
  /* De vijf vlakken. Elk heeft één taak. */
  --doek:#F2F5F9;        /* standaardgrond, de navy op vier procent */
  --nacht:#0B1C3D;       /* de navy uit het logo, podium voor het werk */
  --nacht-2:#132B57;     /* één stap lichter, alleen voor randen op nacht */
  --wit:#FFFFFF;         /* het scherm: waar het werk op staat en waar je in typt */
  --blauw:#2563EB;       /* signaal: live, actief, verzenden */
  --blauw-diep:#1B4FD1;  /* dezelfde kleur ingedrukt */
  --lucht:#2563EB;       /* het merkblauw, vol vlak onder de mens */

  /* Inkt en lijnen, allemaal afgeleid van de navy. */
  --tekst:#0B1C3D;
  --tekst-2:#4B5A72;
  --tekst-3:#8593A8;
  --lijn:#D8DEE8;
  --lijn-2:#BFCAD9;

  /* Op nacht. */
  --op-nacht:#E7EDF8;
  --op-nacht-2:#A9BCDA;
  --op-nacht-3:#7B8FB2;
  --lijn-nacht:rgba(255,255,255,.14);

  /* Op lucht. Wit haalt 5,2 tegen 1 op dit blauw, de tinten net boven 4,5,
     dus ook de lopende tekst en de labels blijven leesbaar. */
  --op-lucht:#FFFFFF;
  --op-lucht-2:#EDF3FE;
  --op-lucht-3:#EBF1FE;
  --lijn-lucht:rgba(255,255,255,.3);
  --diep-blauw:#FFFFFF;   /* het accent op blauw is wit */

  --display:'Archivo','Archivo Fallback',Helvetica,Arial,sans-serif;
  --sans:'Instrument Sans','IS Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* Schaal. De hero mag groot, want schaal is het goedkoopste luxesignaal. */
  --d1:clamp(2.5rem,6.5vw,5.5rem);
  --d2:clamp(1.85rem,3.9vw,3.25rem);
  --d3:clamp(1.3rem,2.1vw,1.8rem);
  --h4:clamp(1.0625rem,1.35vw,1.1875rem);
  --lead:clamp(1.0625rem,1.3vw,1.3125rem);
  --body:1rem;
  --sm:.9375rem;
  --xs:.8125rem;
  --label:.6875rem;

  --wrap:1440px;
  --gut:clamp(20px,5vw,80px);
  --sec:clamp(72px,8.6vw,150px);
  --meta:clamp(110px,15vw,250px);
  --kier:clamp(24px,3.4vw,64px);

  /* Twee curves voor de hele site. Eén voor binnenkomen, één voor schakelen. */
  --uit:cubic-bezier(.16,1,.3,1);
  --schakel:cubic-bezier(.65,0,.35,1);
}

/* ---------- 3 · Basis ------------------------------------------------------ */

*,*::before,*::after{box-sizing:border-box;}
/* Ook op de wortel afknippen. Alleen op body laat de browser in sommige
   gevallen toch een paar pixels zijwaarts schuiven. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;background:var(--doek);color:var(--tekst);
  font-family:var(--sans);font-size:var(--body);line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,video,svg,picture{display:block;max-width:100%;}
img{height:auto;}
h1,h2,h3,h4,h5{margin:0;font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--tekst);}
p{margin:0;}
ul,ol{margin:0;padding:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
::selection{background:var(--blauw);color:#fff;}
:focus-visible{outline:2px solid var(--blauw);outline-offset:3px;border-radius:2px;}

@media (min-width:901px){
  html{scrollbar-width:thin;scrollbar-color:var(--lijn-2) transparent;}
  ::-webkit-scrollbar{width:9px;}
  ::-webkit-scrollbar-thumb{background:var(--lijn-2);border:3px solid var(--doek);}
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:12px 22px;
  background:var(--blauw);color:#fff;font-size:var(--sm);font-weight:600;}
.skip-link:focus{left:0;}

/* De voortgangslijn bovenaan is de enige vaste blauwe streep op de pagina. */
.uw-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:1200;
  transform:scaleX(var(--sp,0));transform-origin:0 50%;
  background:var(--blauw);pointer-events:none;
}

/* ---------- 4 · Opmaak ----------------------------------------------------- */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);}

/* De marge links van de container, gebruikt door alles wat tot de rand loopt. */
.rand{padding-inline-start:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)));}
.rand-r{padding-inline-end:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)));}

.sec{padding-block:var(--sec);position:relative;}
.sec--nacht{background:var(--nacht);color:var(--op-nacht);}
.sec--lucht{background:var(--lucht);color:var(--op-lucht);}
.sec--wit{background:var(--wit);}

/* Elke sectie is nummer links, inhoud rechts. Dat is het skelet van de site. */
.rij{display:grid;grid-template-columns:var(--meta) minmax(0,1fr);gap:var(--kier);}
/* Het label staat bovenaan de rij, op de hoogte van de eerste regel tekst. */
.rij > .merk{align-self:start;padding-top:.72em;}
@media (max-width:820px){ .rij{grid-template-columns:1fr;gap:20px;} .rij > .merk{padding-top:0;} }

/* ---------- 5 · Typografie ------------------------------------------------- */

.d1{font-family:var(--display);font-weight:800;font-stretch:106%;font-size:var(--d1);line-height:.9;letter-spacing:-.032em;text-wrap:balance;}
.d2{font-family:var(--display);font-weight:800;font-stretch:106%;font-size:var(--d2);line-height:.96;letter-spacing:-.03em;text-wrap:balance;}
.d3{font-family:var(--display);font-weight:700;font-stretch:104%;font-size:var(--d3);line-height:1.06;letter-spacing:-.024em;}
.h4{font-size:var(--h4);font-weight:600;letter-spacing:-.015em;line-height:1.32;}
.lead{font-size:var(--lead);line-height:1.62;color:var(--tekst-2);max-width:60ch;}
.tekst{font-size:var(--body);line-height:1.72;color:var(--tekst-2);max-width:66ch;}
.klein{font-size:var(--sm);line-height:1.62;color:var(--tekst-2);}
.mini{font-size:var(--xs);line-height:1.55;color:var(--tekst-3);}

.d1 em,.d2 em{font-style:italic;}
.cijfer{font-variant-numeric:tabular-nums;}

.sec--nacht .d1,.sec--nacht .d2,.sec--nacht .d3,.sec--nacht .h4{color:#fff;}
.sec--nacht .lead,.sec--nacht .tekst,.sec--nacht .klein{color:var(--op-nacht-2);}
.sec--nacht .mini{color:var(--op-nacht-3);}
.sec--lucht .d1,.sec--lucht .d2,.sec--lucht .d3,.sec--lucht .h4{color:var(--op-lucht);}
.sec--lucht .lead,.sec--lucht .tekst,.sec--lucht .klein{color:var(--op-lucht-2);}
.sec--lucht .mini{color:var(--op-lucht-3);}

/* ---------- 6 · Het motief: de lijn die eindigt in een punt -----------------
   Klein op elk label, groot onder één woord in de kop, lang door de werkwijze,
   en als punt op de knop. Dit is het enige systeemelement van de site.
   ------------------------------------------------------------------------- */

.merk{
  display:inline-flex;align-items:center;gap:12px;
  font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);
}
.merk::before{content:'';width:26px;height:1px;background:currentColor;flex:none;opacity:.65;}
.merk::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--blauw);flex:none;}
.sec--nacht .merk{color:var(--op-nacht-3);}
.sec--lucht .merk{color:var(--op-lucht-3);}
.sec--lucht .merk::after{background:var(--diep-blauw);}

/* De boog onder één woord. Wordt getekend zodra de pagina staat. */
.boog{position:relative;display:inline-block;white-space:nowrap;}
html:not(.js) .boog__punt{transform:translate(-50%,-50%) scale(1);}
.boog svg{
  position:absolute;left:-1%;right:-1%;top:100%;width:102%;height:.34em;
  margin-top:-.04em;overflow:visible;pointer-events:none;
}
.boog svg path{
  fill:none;stroke:var(--blauw);stroke-width:5;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

/* De punt aan het eind van de boog. Als streepdop in de SVG werd hij een
   klodder, want die viewBox wordt niet-uniform uitgerekt. Als eigen element
   is hij altijd perfect rond, en kan hij zijn eigen sprongetje maken. */
.boog__punt{
  position:absolute;left:96.9%;top:calc(100% + .062em);
  width:11px;height:11px;border-radius:50%;background:var(--blauw);
  transform:translate(-50%,-50%) scale(0);
}
.js .boog.is-in .boog__punt{
  animation:puntSpringt .55s cubic-bezier(.34,1.6,.64,1) .88s forwards;
}
@keyframes puntSpringt{
  from{ transform:translate(-50%,-50%) scale(0); }
  to  { transform:translate(-50%,-50%) scale(1); }
}
.js .boog svg{clip-path:inset(-60% 100% -60% -6%);}
.js .boog.is-in svg{animation:boogTeken 1.05s var(--uit) forwards;}
@keyframes boogTeken{to{clip-path:inset(-60% -6% -60% -6%);}}

/* ---------- 7 · Knoppen ---------------------------------------------------- */

.knop{
  display:inline-flex;align-items:center;gap:14px;
  height:56px;padding-inline:28px;border:1px solid transparent;border-radius:0;
  font-size:var(--sm);font-weight:600;letter-spacing:-.005em;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:background-color .3s var(--schakel),border-color .3s var(--schakel),color .3s var(--schakel);
}
.knop i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;display:block;
  transition:transform .35s var(--uit);}
.knop:hover i{transform:translateX(4px);}
/* Ook hier wint display op de klasse van het hidden-attribuut. */
.knop[hidden],.btn[hidden]{display:none;}

.knop--vol{background-color:var(--nacht);color:#fff;border-color:var(--nacht);}
.knop--vol:hover,.knop--vol:focus-visible{background-color:var(--blauw);border-color:var(--blauw);}

.knop--lijn{background-color:transparent;color:var(--tekst);border-color:var(--lijn-2);}
.knop--lijn:hover,.knop--lijn:focus-visible{border-color:var(--nacht);color:#fff;}

.sec--nacht .knop--vol{background-color:var(--blauw);border-color:var(--blauw);color:#fff;}
.sec--nacht .knop--vol:hover{background-color:transparent;border-color:#fff;color:var(--nacht);}
.sec--nacht .knop--lijn{color:#fff;border-color:var(--lijn-nacht);}
.sec--nacht .knop--lijn:hover{border-color:#fff;color:var(--nacht);}
.sec--lucht .knop--vol{background-color:#fff;color:var(--lucht);border-color:#fff;
  background-image:linear-gradient(var(--nacht),var(--nacht));}
.sec--lucht .knop--vol:hover{color:#fff;border-color:var(--nacht);}
.sec--lucht .knop--lijn{color:#fff;border-color:rgba(255,255,255,.42);}
.sec--lucht .knop--lijn:hover{border-color:#fff;color:var(--lucht);}

/* Een tekstlink met de punt erachter, voor alles wat geen knop verdient. */
.link{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--sm);font-weight:600;color:var(--tekst);
  padding-bottom:4px;border-bottom:1px solid var(--lijn-2);
  transition:border-color .3s var(--schakel),color .3s var(--schakel);
}
.link::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--blauw);flex:none;
  transition:transform .35s var(--uit);}
.link:hover{border-color:var(--blauw);color:var(--blauw);}
.link:hover::after{transform:translateX(3px);}
.sec--nacht .link{color:#fff;border-color:var(--lijn-nacht);}
.sec--nacht .link:hover{border-color:#fff;color:#fff;}

/* ---------- 8 · Navigatie --------------------------------------------------
   Vast bovenaan, doorzichtig boven de hero en dicht zodra je scrolt. De
   oproep staat rechts in de balk en blijft daar de hele pagina staan.
   ------------------------------------------------------------------------- */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:1100;
  transition:background-color .4s var(--schakel),border-color .4s var(--schakel);
  border-bottom:1px solid transparent;
}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  height:82px;display:flex;align-items:center;gap:var(--kier);
}
.nav.is-vast{background:rgba(242,245,249,.92);backdrop-filter:blur(14px);border-bottom-color:var(--lijn);}
.nav.op-nacht:not(.is-vast) .nav__merk,
.nav.op-nacht:not(.is-vast) .nav__lijst a{color:#fff;}
.nav.op-nacht:not(.is-vast) .burger span{background:#fff;}
.nav.op-nacht.is-vast{background:rgba(11,28,61,.9);border-bottom-color:var(--lijn-nacht);}
.nav.op-blauw:not(.is-vast) .nav__merk,
.nav.op-blauw:not(.is-vast) .nav__lijst a{color:#fff;}
.nav.op-blauw:not(.is-vast) .nav__merk b span{color:#BAD1FC;}
.nav.op-blauw:not(.is-vast) .burger span{background:#fff;}
.nav.op-blauw:not(.is-vast) .nav__lijst a[aria-current="page"]::after{background:#fff;}
.nav.op-blauw.is-vast{background:rgba(29,79,196,.94);border-bottom-color:rgba(255,255,255,.2);}
.nav.op-blauw.is-vast .nav__merk,
.nav.op-blauw.is-vast .nav__lijst a{color:#fff;}
.nav.op-blauw.is-vast .nav__merk b span{color:#BAD1FC;}
.nav.op-blauw.is-vast .burger span{background:#fff;}
/* De oproep in de balk staat op blauw, dus wit met blauwe letters. */
.nav.op-blauw .nav__lijst a.nav__cta{background-color:#fff;border-color:#fff;color:var(--blauw);
  background-image:linear-gradient(var(--nacht),var(--nacht));}
.nav.op-blauw .nav__lijst a.nav__cta:hover{color:#fff;border-color:var(--nacht);}
.nav.op-nacht.is-vast .nav__merk,
.nav.op-nacht.is-vast .nav__lijst a{color:#fff;}
.nav.op-nacht.is-vast .burger span{background:#fff;}

.nav__merk{display:flex;align-items:center;gap:11px;color:var(--tekst);flex:none;}
.nav__merk svg{width:32px;height:32px;flex:none;}
.nav__merk b{font-size:1rem;font-weight:600;letter-spacing:-.025em;}
.nav__merk b span{color:var(--blauw);}
.nav.op-nacht:not(.is-vast) .nav__merk b span,
.nav.op-nacht.is-vast .nav__merk b span{color:#7EA6F7;}

.nav__lijst{display:none;list-style:none;align-items:center;gap:clamp(18px,2.4vw,38px);margin-left:auto;}
.nav__lijst a{font-size:var(--sm);font-weight:500;color:var(--tekst-2);position:relative;padding-block:6px;
  transition:color .25s var(--schakel);}
.nav__lijst a:hover{color:var(--tekst);}
.nav__lijst a[aria-current="page"]{color:var(--tekst);}
.nav__lijst a[aria-current="page"]::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blauw);
}
.nav__lijst a.nav__cta{margin-left:8px;background-color:var(--blauw);border-color:var(--blauw);color:#fff;
  background-image:linear-gradient(var(--nacht),var(--nacht));background-repeat:no-repeat;
  background-size:0% 100%;background-position:0 50%;}
.nav__lijst a.nav__cta:hover,.nav__lijst a.nav__cta:focus-visible{background-size:100% 100%;border-color:var(--nacht);color:#fff;}
.nav.op-nacht .nav__lijst a.nav__cta{color:#fff;}

.burger{
  margin-left:auto;width:46px;height:46px;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.burger span{display:block;width:22px;height:1.5px;background:var(--tekst);
  transition:transform .35s var(--uit),opacity .2s;}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg);}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg);}

@media (min-width:1025px){
  .nav__lijst{display:flex;}
  .burger{display:none;}
}

.menu{
  position:fixed;inset:0;z-index:1090;background:var(--nacht);
  display:flex;flex-direction:column;justify-content:center;
  padding:100px var(--gut) 40px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--schakel),visibility .4s;
}
.menu.is-open{opacity:1;visibility:visible;}
.menu ul{list-style:none;}
.menu li{border-top:1px solid var(--lijn-nacht);}
.menu li:last-child{border-bottom:1px solid var(--lijn-nacht);}
.menu a{
  display:flex;align-items:baseline;gap:20px;padding:clamp(14px,2.4vw,22px) 0;
  font-family:var(--display);font-weight:800;font-stretch:106%;font-size:clamp(1.9rem,7vw,3rem);line-height:1;color:#fff;
  transition:color .25s var(--schakel);
}
.menu a:hover{color:#7EA6F7;}
.menu a .n{font-family:var(--sans);font-size:var(--label);font-weight:600;letter-spacing:.16em;
  color:var(--op-nacht-3);flex:none;width:26px;}
.menu__voet{margin-top:clamp(28px,5vw,52px);display:flex;flex-wrap:wrap;gap:10px 28px;
  font-size:var(--sm);color:var(--op-nacht-2);overflow-wrap:anywhere;max-width:100%;}
.menu__voet a,.menu__voet span{min-width:0;}
/* De regels hierboven zetten elke link in het menu op schermformaat. In de
   voet horen ze gewoon klein te staan. */
.menu__voet a{font-family:var(--sans);font-weight:500;font-stretch:100%;
  font-size:var(--sm);line-height:1.5;padding:0;color:var(--op-nacht-2);}
.menu__voet a:hover{color:#fff;}

/* Op de telefoon staan bellen en appen al vast onderin het scherm. Het adres
   en het nummer nog een keer in de voet kost alleen ruimte. */
@media (max-width:900px){
  .menu__voet a[href^="mailto"],.menu__voet a[href^="tel"]{display:none;}
}

/* ---------- 9 · Hero ------------------------------------------------------
   Eén blauw vlak over de volle breedte. Bovenaan het woordmerk op formaat,
   daaronder de belofte in witte kapitalen. Verder staat er niets, want dit
   scherm heeft maar één taak: laten zien wie dit is en wat hij belooft.
   ------------------------------------------------------------------------- */

.hero{position:relative;overflow:clip;}

.hero--blauw{
  /* De hero is een scrollbaan. Wat je ziet staat in .hero__vast en blijft
     staan terwijl je erdoorheen scrolt; de voortgang stuurt het openklappen. */
  position:relative;
  height:300svh;
  background:var(--blauw);color:#fff;
  /* De maat van het model. Alles in de laptop staat in modeleenheden; --u is
     de lengte van een eenheid. De behuizing is er 900 breed, de scene 1080,
     en die 180 extra is lege lucht die de hero toch afsnijdt. */
  --lap-breed:min(96vw, 1440px, (100svh - 150px) * 1.20);
  --u:calc(var(--lap-breed) / 900);

  /* De twee hoeken van het model. Dicht sta je er bijna op ooghoogte naar te
     kijken, 89,4 graden, zodat de dichte laptop een dunne streep onder het
     woordmerk is. Openklappen zakt de camera naar 62 graden, zodat je op het dek
     neerkijkt, en zwaait het deksel in 124 graden om zijn achterrand omhoog. */
  --kantel:calc(89.4deg - 23.4deg * var(--open));
  --klap:calc(112deg * var(--open));

  /* Op --open .02 staat het deksel precies in de kijkrichting: daarvoor kijk
     je op de aluminium rug, daarna op het scherm. Met de camera bijna op
     ooghoogte gebeurt dat al bij .02, zodra het deksel loskomt. Safari zet een vlak met
     overflow en afgeronde hoeken in een eigen laag en vergeet dan zowel de
     dieptevolgorde als backface-visibility, en tekent het scherm dus dwars
     door de dichte rug heen. Vandaar dat de wissel hier expliciet staat. */
  --wissel:clamp(0, calc((var(--open) - .012) * 80), 1);

  /* Geborsteld aluminium: licht van boven, wegvallend naar de randen. */
  --alu-top:#F4F8FF;
  --alu-mid:#DCE6F8;
  --alu-laag:#B6C7E6;
  --alu-diep:#9FB4D6;

  --open:0; --toon:0; --weg:0; --verschuif:0px;
}
.hero__vast{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;
  padding-block:clamp(104px,10vw,140px) clamp(48px,5.4vw,80px);
  overflow:hidden;
}
.hero__poster{width:100%;}
.hero__merk,.hero__onder{opacity:calc(1 - var(--weg));}

/* Het woordmerk is een lockup: twee woorden onder elkaar, allebei precies zo
   groot gezet dat ze de kolom van rand tot rand vullen. Omdat "uniek" vijf
   letters heeft en "webdesign" negen, worden dat vanzelf twee heel verschillende
   maten. Dat verschil is het ontwerp. uw2026.js meet de exacte maat; de waarden
   hieronder zijn de benadering voor het geval JavaScript uitblijft. */
.hero__merk{
  display:flex;flex-direction:column;align-items:flex-start;
  font-family:var(--display);font-weight:800;font-stretch:112%;
  line-height:.82;letter-spacing:-.05em;color:#fff;
}
.hero__woord{
  white-space:nowrap;
  font-size:24.5vw;
}
.hero__woord--licht{color:#BAD1FC;font-size:13.6vw;}

/* Daaronder een haarlijn en de belofte klein gezet. Het contrast tussen 340
   pixels en 48 is wat de compositie draagt. */
.hero__onder{
  margin-top:clamp(20px,2.6vw,38px);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(16px,2.4vw,44px);
}
.hero--blauw h1{
  font-family:var(--display);font-weight:800;font-stretch:104%;
  font-size:clamp(1.35rem,3.4vw,3rem);line-height:1;
  letter-spacing:-.026em;text-transform:uppercase;color:#fff;
  max-width:27ch;text-wrap:balance;
}
.hero--blauw .boog svg path{stroke:#fff;}
.hero--blauw .boog__punt{background:#fff;}
.hero__plek{
  font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#EBF1FE;white-space:nowrap;padding-bottom:.35em;
}

/* Onder de 900 staat de belbalk vast onderin. Die hoort niet over de hero
   heen te vallen, dus de hero wordt precies zoveel korter. */
@media (max-width:900px){
  .hero--blauw{height:240svh;--lap-breed:min(100vw, 760px, (100svh - 120px) * 1.25);}
  .hero__vast{height:calc(100svh - 56px);}
}

@media (max-width:700px){
  .hero__onder{display:block;}
  .hero__plek{margin-top:18px;}
  .hero--blauw h1{max-width:none;font-size:clamp(1.25rem,5.6vw,2rem);}
}

/* De dienstenregel onder de hero: één rustige regel, geen carrousel. */
.lineup{
  display:flex;flex-wrap:wrap;gap:8px 0;align-items:center;
  padding-block:clamp(18px,2vw,26px);border-top:1px solid var(--lijn);
  font-size:var(--xs);color:var(--tekst-3);
}
.lineup span{padding-right:clamp(16px,2vw,30px);margin-right:clamp(16px,2vw,30px);
  border-right:1px solid var(--lijn);}
.lineup span:last-child{border-right:0;margin-right:0;padding-right:0;}

/* ---------- 10 · Bewijsband ------------------------------------------------ */

.bewijs{display:grid;gap:1px;background:var(--lijn);border-block:1px solid var(--lijn);}
@media (min-width:640px){ .bewijs{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .bewijs{grid-template-columns:repeat(4,1fr);} }
.bewijs__cel{background:var(--doek);padding:clamp(26px,3.4vw,44px) clamp(20px,2.4vw,32px);}
.bewijs__n{font-family:var(--display);font-weight:800;font-stretch:106%;font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:.95;
  letter-spacing:-.03em;color:var(--tekst);font-variant-numeric:tabular-nums;}
.bewijs__n small{font-family:var(--sans);font-size:.34em;font-weight:500;letter-spacing:0;
  margin-left:.18em;color:var(--tekst-3);}
.bewijs__l{margin-top:12px;font-size:var(--xs);line-height:1.55;color:var(--tekst-2);max-width:24ch;}

/* ---------- 11 · Het werk --------------------------------------------------
   Het langste hoofdstuk van de homepage. Elk project krijgt de volle breedte,
   tekst en beeld wisselen per project van kant zodat er ritme ontstaat.
   ------------------------------------------------------------------------- */

.werk{display:grid;gap:clamp(28px,4vw,72px);align-items:center;}
.werk + .werk{margin-top:clamp(64px,9vw,150px);padding-top:clamp(64px,9vw,150px);
  border-top:1px solid var(--lijn-nacht);}

.werk__tekst > * + *{margin-top:clamp(16px,1.8vw,24px);}
.werk__meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  font-size:var(--label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--op-nacht-3);}
.werk__meta b{color:var(--blauw);font-weight:600;}
.werk h3{font-family:var(--display);font-weight:800;font-stretch:106%;font-size:var(--d2);line-height:1.02;letter-spacing:-.022em;color:#fff;}
.werk__lead{font-size:var(--lead);line-height:1.6;color:var(--op-nacht-2);max-width:46ch;}

.werk__punten{margin-top:clamp(20px,2.4vw,30px);display:grid;gap:0;}
.werk__punten > div{
  display:grid;grid-template-columns:clamp(78px,9vw,118px) minmax(0,1fr);gap:18px;
  padding:14px 0;border-top:1px solid var(--lijn-nacht);align-items:start;
}
.werk__punten > div:last-child{border-bottom:1px solid var(--lijn-nacht);}
.werk__punten dt{
  font-size:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--op-nacht-3);padding-top:3px;
}
.werk__punten dd{margin:0;font-size:var(--sm);line-height:1.6;color:var(--op-nacht-2);}
.werk__punten dd.r{color:#fff;}

.werk__beeld{position:relative;}
/* De site scrolt in zijn eigen venster mee. Het venster is een tikje lager
   dan de schermafbeelding, en het verschil wordt uitgescrold terwijl de rij
   door het beeld komt. Zo staat er geen plaatje maar een site die leeft.
   Het gaat met transform, dus de browser hoeft niets opnieuw te tekenen. */
.werk__beeld .bureau{display:block;position:relative;width:100%;
  aspect-ratio:1200 / 620;overflow:hidden;}
.werk__beeld .bureau img{
  position:absolute;left:0;top:0;width:100%;height:auto;
  transform:translateY(var(--pan,0px)) scale(var(--zoom,1));
  transition:transform .8s var(--uit);
}
/* Twee diensten tonen geen schermafbeelding maar hun eigen werk: het
   huisstijlbeeld moet heel in beeld staan en de film houdt zijn eigen kader.
   Ze schuiven dus niet mee zoals .bureau dat doet. */
.werk__beeld .vlak,.werk__beeld .vlak img{display:block;width:100%;height:auto;}
.werk__beeld .film{
  display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;
  background:var(--nacht);
}
/* De beelden bij de diensten lopen rond af. De rest van de site staat op
   rechte hoeken, dus dit blijft bij het beeld zelf en gaat niet de knoppen,
   de vakken en de kaders in. */
.werk__beeld .vlak img,.werk__beeld .film,.werk__beeld .bureau{
  border-radius:clamp(10px,1.1vw,16px);
}

/* Elk project heeft zijn eigen kleur, van de site zelf. Die zit in het cijfer
   en in een zachte gloed achter het venster. */
.werk__beeld::before{
  content:'';position:absolute;inset:-10% -8%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 52%,
    color-mix(in oklab, var(--merkkleur, #2563EB) 38%, transparent), transparent 72%);
  opacity:.45;
}
.werk__beeld > *{position:relative;z-index:1;}
.werk__meta b{color:var(--merkkleur, var(--blauw));}

@media (min-width:901px){
  /* Het beeld krijgt altijd de brede kolom, ook als het van kant wisselt. */
  .werk{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);}
  .werk:nth-child(even){grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);}
  .werk:nth-child(even) .werk__tekst{order:2;}
  .werk:nth-child(even) .werk__beeld{order:1;}
}
@media (max-width:900px){
  .werk + .werk{margin-top:clamp(72px,12vw,110px);padding-top:clamp(56px,10vw,90px);}
}

/* ---------- 12 · Positionering --------------------------------------------- */

.stel{display:grid;gap:0;}
.stel__regel{
  display:grid;grid-template-columns:clamp(30px,4vw,58px) minmax(0,1fr);gap:var(--kier);
  padding-block:clamp(24px,3vw,38px);border-top:1px solid var(--lijn);align-items:start;
}
.stel__regel:last-child{border-bottom:1px solid var(--lijn);}
.stel__n{font-size:var(--label);font-weight:600;letter-spacing:.14em;color:var(--tekst-3);
  font-variant-numeric:tabular-nums;padding-top:.55em;}
.stel__in{display:grid;gap:clamp(8px,1.4vw,18px);}
.stel__t{font-family:var(--display);font-weight:800;font-stretch:106%;font-size:var(--d3);line-height:1.08;letter-spacing:-.02em;}
.stel__d{font-size:var(--sm);line-height:1.68;color:var(--tekst-2);max-width:62ch;}
@media (min-width:1000px){
  .stel__in{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:var(--kier);align-items:baseline;}
}

/* ---------- 13 · Diensten --------------------------------------------------
   Vijf regels die opengaan bij hover en bij tik. Dicht is het een naam op
   formaat, open verschijnt de uitleg en een voorbeeld uit het eigen werk.
   ------------------------------------------------------------------------- */

.dienst{border-top:1px solid var(--lijn);}
.dienst:last-of-type{border-bottom:1px solid var(--lijn);}
.dienst__knop{
  width:100%;display:grid;grid-template-columns:clamp(30px,4vw,58px) minmax(0,1fr) 34px;
  gap:var(--kier);align-items:center;
  padding-block:clamp(20px,2.6vw,34px);
  background:none;border:0;text-align:left;cursor:pointer;
}
.dienst__n{font-size:var(--label);font-weight:600;letter-spacing:.14em;color:var(--tekst-3);
  font-variant-numeric:tabular-nums;}
.dienst__t{
  font-family:var(--display);font-weight:800;font-stretch:106%;font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.04;
  letter-spacing:-.024em;color:var(--tekst);
  transition:color .3s var(--schakel);
}
.dienst__plus{position:relative;width:16px;height:16px;justify-self:end;flex:none;}
.dienst__plus::before,.dienst__plus::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--tekst-3);
  transition:transform .4s var(--uit),background-color .3s var(--schakel);
}
.dienst__plus::before{width:16px;height:1.5px;transform:translate(-50%,-50%);}
.dienst__plus::after{width:1.5px;height:16px;transform:translate(-50%,-50%);}
.dienst.is-open .dienst__plus::after{transform:translate(-50%,-50%) rotate(90deg);}
.dienst.is-open .dienst__t,
.dienst__knop:hover .dienst__t{color:var(--blauw);}
.dienst.is-open .dienst__plus::before,
.dienst.is-open .dienst__plus::after{background:var(--blauw);}

.dienst__paneel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--uit);}
.dienst.is-open .dienst__paneel{grid-template-rows:1fr;}
.dienst__in{overflow:hidden;}
.dienst__vak{
  display:grid;gap:clamp(16px,2.4vw,34px);
  padding:0 0 clamp(26px,3.4vw,44px) 0;
}
@media (min-width:900px){
  .dienst__vak{grid-template-columns:clamp(30px,4vw,58px) minmax(0,1fr) minmax(0,.72fr);gap:var(--kier);}
  .dienst__vak > .dienst__leeg{display:block;}
}
.dienst__leeg{display:none;}
.dienst__d{font-size:var(--sm);line-height:1.72;color:var(--tekst-2);max-width:58ch;}
.dienst__d + .link{margin-top:20px;}
.dienst__voor{
  border:1px solid var(--lijn);background:var(--wit);padding:16px;
}
.dienst__voor img{width:100%;border-radius:clamp(8px,.8vw,12px);}
.dienst__voor figcaption{margin-top:12px;font-size:var(--xs);color:var(--tekst-3);}

/* ---------- 14 · Werkwijze -------------------------------------------------
   Dezelfde lijn uit het logo, uitgerekt over de sectie. Vier open punten en
   één gevulde, en die laatste heet Live.
   ------------------------------------------------------------------------- */

.stap{display:grid;gap:0;position:relative;}
.stap__item{position:relative;padding-top:clamp(26px,3vw,40px);padding-bottom:clamp(22px,2.6vw,34px);}
.stap__item::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--lijn-lucht);
}
.stap__punt{
  position:absolute;left:0;top:-6px;width:13px;height:13px;border-radius:50%;
  border:1.5px solid #fff;background:var(--lucht);
}
.stap__item:last-child .stap__punt{background:#fff;width:17px;height:17px;top:-8px;}
.stap__n{font-size:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--op-lucht-3);font-variant-numeric:tabular-nums;}
.stap__t{margin-top:12px;font-family:var(--display);font-weight:800;font-stretch:106%;font-size:var(--d3);line-height:1.08;
  letter-spacing:-.02em;color:var(--op-lucht);}
.stap__d{margin-top:12px;font-size:var(--sm);line-height:1.68;color:var(--op-lucht-2);max-width:34ch;}
@media (min-width:900px){
  .stap{grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.4vw,40px);}
  .stap__item{padding-right:clamp(10px,1.6vw,26px);}
}

/* ---------- 15 · Over ------------------------------------------------------ */

.over{display:grid;gap:clamp(28px,4vw,72px);align-items:center;}
@media (min-width:900px){ .over{grid-template-columns:minmax(0,.78fr) minmax(0,1fr);} }
.over__foto img{width:100%;}
/* Het portret is op een lila achtergrond gemaakt. Op een blauwe grond hoort
   die er vanzelf bij, dus alleen een lichte demping van de verzadiging. */
.over__foto img{filter:saturate(.92) contrast(1.03);}
.over__tekst > * + *{margin-top:clamp(16px,1.8vw,26px);}
.over__naam{font-family:var(--display);font-weight:800;font-stretch:106%;font-size:var(--d2);line-height:1;letter-spacing:-.024em;
  color:var(--op-lucht);}
.over__p{font-size:var(--body);line-height:1.75;color:var(--op-lucht-2);max-width:58ch;}
.over__hand{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--lijn-lucht);font-size:var(--xs);color:var(--op-lucht-3);}

/* ---------- 16 · Investering ------------------------------------------------ */

.inv{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn);}
@media (min-width:640px){ .inv{grid-template-columns:repeat(2,1fr);} }
/* Vier tegels naast elkaar past pas als de binnenruimte wat krapper staat. */
@media (min-width:1100px){
  .inv{grid-template-columns:repeat(4,1fr);}
  .inv__cel{padding:clamp(22px,2.4vw,34px);}
  .inv__p{font-size:clamp(1.8rem,2.6vw,2.4rem);}
}
/* Wie via een anker binnenkomt, moet het pakket of de dienst onder de vaste
   balk zien staan en niet erachter. */
.tarief__cel[id],article.werk[id],.vraag__item[id]{scroll-margin-top:clamp(92px,11vh,128px);}

/* De tegels zijn links naar het pakket op de prijzenpagina. */
.inv__cel{
  background:var(--doek);padding:clamp(26px,3.4vw,46px);
  display:flex;flex-direction:column;gap:14px;
  color:inherit;text-decoration:none;position:relative;
  transition:background-color .3s var(--schakel),transform .35s var(--uit),box-shadow .35s var(--uit);
}
.inv__cel:hover{background:var(--wit);transform:scale(1.03);z-index:2;
  box-shadow:0 20px 54px rgba(11,28,61,.14);}
.inv__cel:focus-visible{outline:2px solid var(--blauw);outline-offset:-2px;}
.inv__cel:hover .inv__t{color:var(--blauw);}
/* Een pijlpunt die opkomt, hetzelfde teken als op de knoppen. */
.inv__cel::after{
  content:'';position:absolute;right:clamp(20px,2.4vw,30px);bottom:clamp(20px,2.4vw,30px);
  width:7px;height:7px;border-radius:50%;background:var(--blauw);
  opacity:0;transform:translateX(-5px);
  transition:opacity .3s var(--schakel),transform .35s var(--uit);
}
.inv__cel:hover::after,.inv__cel:focus-visible::after{opacity:1;transform:none;}
.inv__t{transition:color .3s var(--schakel);}
.inv__t{font-size:var(--h4);font-weight:600;letter-spacing:-.015em;}
.inv__p{font-family:var(--display);font-weight:800;font-stretch:106%;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;}
.inv__p small{font-family:var(--sans);font-size:.3em;font-weight:500;letter-spacing:0;color:var(--tekst-3);
  display:block;margin-top:10px;}
.inv__d{font-size:var(--sm);line-height:1.65;color:var(--tekst-2);}

/* ---------- 17 · Afsluiting ------------------------------------------------
   Eén vol blauw vlak per pagina, en dit is het. Eén zin, één knop.
   ------------------------------------------------------------------------- */

.slot{background:var(--blauw);color:#fff;padding-block:clamp(80px,11vw,180px);}
/* Het blauwe vlak is het luidste moment van de pagina en het moment waarop
   iemand belt. Daar mag de kop in kapitalen, want hij is kort en hij hoeft
   niet gelezen te worden maar gehoord. Verder nergens hoofdletters. */
.slot h2{font-family:var(--display);font-weight:800;font-stretch:108%;
  font-size:clamp(2rem,5.4vw,4.6rem);line-height:.92;text-transform:uppercase;
  letter-spacing:-.018em;color:#fff;text-wrap:balance;max-width:15ch;}
.slot p{margin-top:clamp(22px,2.6vw,34px);font-size:var(--lead);line-height:1.6;color:#EDF3FE;max-width:48ch;}
.slot__cta{margin-top:clamp(34px,4vw,54px);display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.slot .knop--vol{background-color:#fff;color:var(--blauw);border-color:#fff;}
.slot .knop--vol:hover{border-color:var(--nacht);color:#fff;}
.slot .knop--lijn{color:#fff;border-color:rgba(255,255,255,.42);}
.slot .knop--lijn:hover{border-color:#fff;color:var(--blauw);}
.slot .merk{color:#EBF1FE;}
.slot .merk::after{background:#fff;}

/* ---------- 18 · Voet -----------------------------------------------------
   Kort. Alleen wat iemand echt nodig heeft, plus de wettelijke gegevens.
   ------------------------------------------------------------------------- */

.voet{background:var(--nacht);color:var(--op-nacht-2);padding-block:clamp(52px,6vw,86px) 30px;}
.voet__boven{display:grid;gap:clamp(30px,4vw,60px);}
@media (min-width:820px){ .voet__boven{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));} }
.voet__merk{display:flex;align-items:center;gap:11px;color:#fff;}
.voet__merk svg{width:32px;height:32px;flex:none;}
.voet__merk b{font-size:1rem;font-weight:600;letter-spacing:-.025em;}
.voet__merk b span{color:#7EA6F7;}
.voet__zin{margin-top:18px;font-size:var(--sm);line-height:1.65;color:var(--op-nacht-2);max-width:34ch;}
.voet h3{font-size:var(--label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--op-nacht-3);margin-bottom:18px;}
.voet ul{list-style:none;display:grid;gap:11px;}
.voet a{font-size:var(--sm);color:var(--op-nacht-2);transition:color .25s var(--schakel);}
.voet a:hover{color:#fff;}
.voet__onder{
  margin-top:clamp(40px,5vw,70px);padding-top:26px;border-top:1px solid var(--lijn-nacht);
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;
  font-size:var(--xs);color:var(--op-nacht-3);
}
.voet__onder a:hover{color:#fff;}

/* ---------- 19 · Formulieren ----------------------------------------------- */

.veld{display:grid;gap:8px;}
.veld label{font-size:var(--label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tekst-3);}
.veld input,.veld select,.veld textarea{
  font-family:var(--sans);font-size:var(--body);color:var(--tekst);
  background:transparent;border:0;border-bottom:1px solid var(--lijn-2);border-radius:0;
  padding:13px 2px;width:100%;
  transition:border-color .3s var(--schakel);
}
.veld input::placeholder,.veld textarea::placeholder{color:var(--tekst-3);}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-bottom-color:var(--blauw);}
.veld textarea{resize:vertical;min-height:130px;line-height:1.65;}

/* ---------- 20 · Beweging --------------------------------------------------
   Tekst en beeld schuiven één keer 24 pixels omhoog zodra ze in beeld komen.
   Zonder JavaScript staat alles direct in eindstand, dat is de .js-poort.
   ------------------------------------------------------------------------- */

.js [data-in]{opacity:0;transform:translateY(24px);}
.js [data-in].is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--uit),transform .7s var(--uit);
  transition-delay:var(--vertraging,0s);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;}
  .js [data-in]{opacity:1;transform:none;}
  .js .boog svg{clip-path:none;}
  .boog__punt{transform:translate(-50%,-50%) scale(1);}
}

/* ---------- 21 · Vragen ----------------------------------------------------
   Open lijst zonder kaartjes. De vraag is de kop, het antwoord staat eronder.
   Geen accordeon hier: wie tot deze sectie scrolt wil lezen, niet klikken.
   ------------------------------------------------------------------------- */

.vraag{display:grid;gap:0;}
/* De vragen staan dicht en klappen open als je erop tikt. Het antwoord blijft
   in de pagina staan, dus zoekmachines lezen het gewoon mee. */
.vraag__item{
  display:grid;gap:clamp(8px,1.4vw,16px);
  padding-block:clamp(22px,2.6vw,34px);border-top:1px solid var(--lijn);
}
.vraag__item:last-child{border-bottom:1px solid var(--lijn);}
.vraag__kop{
  display:flex;align-items:flex-start;gap:var(--kier);justify-content:space-between;
  cursor:pointer;list-style:none;
}
.vraag__kop::-webkit-details-marker{display:none;}
.vraag__kop:hover .vraag__q{color:var(--blauw);}
.vraag__item:focus-within .vraag__kop{outline:none;}
.vraag__kop:focus-visible{outline:2px solid var(--blauw);outline-offset:6px;}
/* Hetzelfde plusje als bij de diensten, dat een kruis wordt als het openstaat. */
.vraag__plus{position:relative;width:16px;height:16px;flex:none;margin-top:.35em;}
.vraag__plus::before,.vraag__plus::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--tekst-3);
  transition:transform .4s var(--uit),background-color .3s var(--schakel);
}
.vraag__plus::before{width:16px;height:1.5px;transform:translate(-50%,-50%);}
.vraag__plus::after{width:1.5px;height:16px;transform:translate(-50%,-50%);}
.vraag__item[open] .vraag__plus::after{transform:translate(-50%,-50%) rotate(90deg);}
.vraag__item[open] .vraag__plus::before,.vraag__kop:hover .vraag__plus::before,
.vraag__kop:hover .vraag__plus::after{background:var(--blauw);}
.vraag__item[open] .vraag__a{animation:vraagIn .4s var(--uit) both;}
@keyframes vraagIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .vraag__item[open] .vraag__a{animation:none;} }
.vraag__q{font-size:var(--h4);font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--tekst);}
.vraag__a{font-size:var(--sm);line-height:1.72;color:var(--tekst-2);max-width:64ch;}
/* Op een breed scherm stonden vraag en antwoord naast elkaar. Nu de vraag
   opengeklapt moet worden, hoort het antwoord eronder: de vraag is de knop en
   loopt over de volle breedte, het antwoord springt in tot waar de tekst
   prettig leest. */
@media (min-width:960px){
  .vraag__a{padding-left:calc(var(--kier) * .5);}
}

/* ---------- 22 · Werkgebied ------------------------------------------------
   Eén regel in plaats van een muur. De links blijven staan voor de
   vindbaarheid, maar ze domineren de pagina niet meer.
   ------------------------------------------------------------------------- */

/* De band met plaatsnamen schuift langzaam door. Het spoor staat er twee keer
   in: de tweede helft is een kopie voor het oog en is voor de voorlezer en het
   toetsenbord verborgen, zodat de lus naadloos rond gaat zonder dat elke naam
   dubbel geteld wordt. Bij aanraken of toetsenbordfocus staat hij stil. */
.band{overflow:hidden;margin-block:clamp(22px,2.8vw,40px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.band__spoor{
  display:flex;align-items:center;width:max-content;
  animation:bandLoopt 46s linear infinite;
}
.band:hover .band__spoor,.band:focus-within .band__spoor{animation-play-state:paused;}
@keyframes bandLoopt{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
.band a{
  font-family:var(--display);font-weight:800;font-stretch:106%;
  font-size:clamp(1.4rem,3.4vw,2.6rem);line-height:1;letter-spacing:-.028em;
  color:var(--op-nacht-2);white-space:nowrap;padding-block:.12em;
  transition:color .25s var(--schakel);
}
.band a:hover,.band a:focus-visible{color:#fff;}
.band i{display:block;width:7px;height:7px;border-radius:50%;background:var(--blauw);
  flex:none;margin-inline:clamp(18px,2.4vw,40px);}
@media (prefers-reduced-motion:reduce){
  .band__spoor{animation:none;}
  .band{overflow-x:auto;scrollbar-width:none;}
  .band::-webkit-scrollbar{display:none;}
}

.gebied{display:flex;flex-wrap:wrap;gap:10px 0;align-items:baseline;font-size:var(--sm);}
.gebied a{
  color:var(--tekst-2);padding-right:16px;margin-right:16px;border-right:1px solid var(--lijn);
  transition:color .25s var(--schakel);
}
.gebied a:last-child{border-right:0;margin-right:0;padding-right:0;}
.gebied a:hover{color:var(--blauw);}

/* ---------- 23 · Cookiemelding en terug naar boven ------------------------- */

.cookie{
  position:fixed;left:var(--gut);right:var(--gut);bottom:22px;z-index:1300;
  max-width:600px;background:var(--nacht);color:var(--op-nacht-2);
  padding:24px 26px;display:grid;gap:16px;
  transform:translateY(140%);opacity:0;visibility:hidden;
  transition:transform .5s var(--uit),opacity .4s var(--schakel),visibility .5s;
}
.cookie.is-on{transform:none;opacity:1;visibility:visible;}
.cookie h3{font-size:var(--label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--op-nacht-3);}
.cookie p{font-size:var(--xs);line-height:1.62;}
.cookie p a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.cookie__knoppen{display:flex;flex-wrap:wrap;gap:10px;}
.cookie button{
  height:44px;padding-inline:20px;border:1px solid var(--lijn-nacht);background:transparent;
  color:#fff;font-size:var(--xs);font-weight:600;cursor:pointer;
  transition:background-color .25s var(--schakel),color .25s var(--schakel);
}
.cookie button:first-child{background:var(--blauw);border-color:var(--blauw);}
.cookie button:first-child:hover{background:#fff;color:var(--nacht);border-color:#fff;}
.cookie button:last-child:hover{background:#fff;color:var(--nacht);border-color:#fff;}

/* Vaste belbalk op de telefoon: de kortste weg naar een gesprek. */
.bel{
  position:fixed;left:0;right:0;bottom:0;z-index:1080;
  display:none;background:var(--nacht);border-top:1px solid var(--lijn-nacht);
  padding-bottom:env(safe-area-inset-bottom);
}
.bel a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  height:56px;font-size:var(--sm);font-weight:600;color:#fff;
}
.bel a + a{border-left:1px solid var(--lijn-nacht);}
.bel a:first-child{background:var(--blauw);}
.bel svg{width:16px;height:16px;flex:none;}
@media (max-width:900px){
  .bel{display:flex;}
  body{padding-bottom:56px;}
  .cookie{bottom:78px;}
}

/* ---------- 24 · Losse hulpklassen ---------------------------------------- */

.kop{display:grid;gap:clamp(14px,1.8vw,22px);}
.kop .lead{margin-top:4px;}
.stapel > * + *{margin-top:clamp(16px,1.8vw,26px);}
.blok{margin-top:clamp(38px,5vw,72px);}
.blok-s{margin-top:clamp(24px,3vw,40px);}
.rand-boven{border-top:1px solid var(--lijn);}
.sec--nacht .rand-boven{border-color:var(--lijn-nacht);}

/* ---------- 25 · Paginakop -------------------------------------------------
   Alle pagina's behalve de homepage openen hetzelfde: label, één grote regel,
   een korte inleiding en waar nuttig een paar harde cijfers.
   ------------------------------------------------------------------------- */

.phero{padding-block:clamp(132px,13vw,190px) clamp(44px,5.4vw,80px);}
.phero h1{font-family:var(--display);font-weight:800;font-stretch:106%;font-size:var(--d1);line-height:.9;letter-spacing:-.032em;
  text-wrap:balance;max-width:16ch;}
.phero__lead{margin-top:clamp(20px,2.4vw,32px);font-size:var(--lead);line-height:1.62;
  color:var(--tekst-2);max-width:54ch;}
.phero__cta{margin-top:clamp(28px,3.4vw,44px);display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.phero__cijfer{
  margin-top:clamp(34px,4.4vw,62px);display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,64px);
  padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--lijn);
}
.phero__cijfer div b{display:block;font-family:var(--display);font-stretch:106%;font-size:clamp(1.9rem,3.2vw,2.7rem);
  line-height:1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.phero__cijfer div span{display:block;margin-top:8px;font-size:var(--xs);color:var(--tekst-3);max-width:22ch;}
.phero--nacht{background:var(--nacht);color:var(--op-nacht);}
.phero--nacht h1{color:#fff;}
.phero--nacht .phero__lead{color:var(--op-nacht-2);}
.phero--nacht .phero__cijfer{border-color:var(--lijn-nacht);}
.phero--nacht .phero__cijfer div b{color:#fff;}
.phero--nacht .phero__cijfer div span{color:var(--op-nacht-3);}

/* ---------- 26 · Komende projecten ----------------------------------------
   Werk dat nog niet live staat, en dat ook eerlijk zegt. Alleen naam, regel
   uitleg en de stand van zaken, zonder beeld dat er nog niet is.
   ------------------------------------------------------------------------- */

.komend{display:grid;gap:0;}
.komend__item{
  display:grid;grid-template-columns:clamp(30px,4vw,58px) minmax(0,1fr);gap:var(--kier);
  padding-block:clamp(22px,2.6vw,34px);border-top:1px solid var(--lijn);align-items:start;
}
.komend__item:last-child{border-bottom:1px solid var(--lijn);}
.komend__n{font-size:var(--label);font-weight:600;letter-spacing:.14em;color:var(--tekst-3);
  font-variant-numeric:tabular-nums;padding-top:.5em;}
.komend__in{display:grid;gap:10px;}
@media (min-width:960px){
  .komend__in{grid-template-columns:minmax(0,.72fr) minmax(0,1fr) 120px;gap:var(--kier);align-items:baseline;}
}
.komend__t{font-family:var(--display);font-weight:800;font-stretch:106%;font-size:var(--d3);line-height:1.08;letter-spacing:-.02em;}
.komend__d{font-size:var(--sm);line-height:1.68;color:var(--tekst-2);}
.komend__s{font-size:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tekst-3);display:inline-flex;align-items:center;gap:9px;white-space:nowrap;}
.komend__s::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--lijn-2);flex:none;}

/* ---------- 27 · Tabel en prijzen ------------------------------------------ */

.tarief{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn);}
@media (min-width:900px){ .tarief{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1160px){ .tarief{grid-template-columns:repeat(3,1fr);} }
/* Vijf pakketten naast elkaar passen pas als de cellen wat krapper staan.
   Daaronder vallen ze terug op drie en dan twee. */
@media (min-width:1300px){
  /* Het middelste vak draagt Meest gekozen en krijgt daarom de meeste ruimte.
     Het stond juist het krapst, want vijf gelijke kolommen met de langste
     tekst in het midden leest als het kleinste pakket. */
  .tarief{grid-template-columns:1fr 1fr 1.28fr 1fr 1fr;}
  .tarief__cel{padding:clamp(20px,1.8vw,28px);gap:13px;}
  .tarief__p{font-size:clamp(1.7rem,2.1vw,2.1rem);}
  .tarief__lijst li{padding:9px 0 9px 20px;}
}
.tarief__cel{
  background:var(--doek);padding:clamp(26px,2.8vw,38px);display:flex;flex-direction:column;gap:16px;
  position:relative;transition:transform .35s var(--uit),box-shadow .35s var(--uit);
}
/* Bij hoveren komt het vak een tikje naar voren. Het raster heeft haarlijnen
   van een pixel, dus het vak moet er ook bovenop komen te liggen. */
.tarief__cel:hover{transform:scale(1.025);z-index:2;box-shadow:0 20px 54px rgba(11,28,61,.14);}
.tarief__cel.is-uit:hover{box-shadow:0 20px 54px rgba(4,12,30,.5);}
.tarief__cel.is-uit{background:var(--nacht);color:var(--op-nacht-2);}
.tarief__cel.is-uit .tarief__t,.tarief__cel.is-uit .tarief__p{color:#fff;}
.tarief__cel.is-uit .tarief__p small,.tarief__cel.is-uit .tarief__d{color:var(--op-nacht-2);}
.tarief__cel.is-uit .tarief__lijst li{color:var(--op-nacht-2);border-color:var(--lijn-nacht);}
.tarief__cel.is-uit .tarief__lijst li::before{background:#7EA6F7;}
.tarief__merk{font-size:var(--label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blauw);}
.tarief__t{font-size:var(--h4);font-weight:600;letter-spacing:-.015em;}
.tarief__p{font-family:var(--display);font-weight:800;font-stretch:106%;font-size:clamp(2rem,3vw,2.7rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;}
.tarief__p small{display:block;margin-top:10px;font-family:var(--sans);font-size:.75rem;font-weight:500;
  letter-spacing:0;color:var(--tekst-3);}
.tarief__d{font-size:var(--sm);line-height:1.62;color:var(--tekst-2);}
.tarief__lijst{list-style:none;display:grid;gap:0;margin-top:auto;}
.tarief__lijst li{position:relative;padding:10px 0 10px 22px;font-size:var(--xs);line-height:1.55;
  color:var(--tekst-2);border-top:1px solid var(--lijn);}
.tarief__lijst li::before{content:'';position:absolute;left:0;top:1.1em;width:9px;height:1.5px;
  background:var(--blauw);}
.tarief__cel .knop{margin-top:18px;}

.opties{display:grid;gap:0;}
.optie{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--kier);align-items:baseline;
  padding-block:clamp(18px,2.2vw,28px);border-top:1px solid var(--lijn);
}
.opties .optie:last-child{border-bottom:1px solid var(--lijn);}
.optie__t{font-size:var(--h4);font-weight:600;letter-spacing:-.015em;}
.optie__d{margin-top:8px;font-size:var(--sm);line-height:1.65;color:var(--tekst-2);max-width:62ch;}
.optie__p{font-family:var(--display);font-weight:800;font-stretch:106%;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1;
  letter-spacing:-.025em;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ---------- 27.5 · Het aanvraagformulier in stappen ------------------------
   Drie vakken achter elkaar in plaats van alles onder elkaar. Boven het
   formulier staat waar je bent, eronder staan vorige en volgende.
   ------------------------------------------------------------------------- */

.trap{margin-bottom:clamp(24px,3vw,36px);}
.trap__n{font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);font-variant-numeric:tabular-nums;}
.trap__n b{color:var(--tekst);font-weight:600;}
.trap__t{margin-top:8px;font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:var(--d3);line-height:1.08;letter-spacing:-.022em;color:var(--tekst);}
.trap__baan{margin-top:clamp(14px,1.6vw,20px);height:1px;background:var(--lijn);position:relative;overflow:hidden;}
.trap__baan i{position:absolute;left:0;top:0;height:100%;width:33.3%;background:var(--blauw);
  transition:width .45s var(--uit);}

.stapvak{border:0;padding:0;margin:0;min-width:0;display:grid;gap:clamp(20px,2.4vw,30px);}
/* display op de klasse wint van het hidden-attribuut, dus dat hier terugzetten. */
.stapvak[hidden]{display:none;}
.formulier__legenda{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.stapvak.is-aan{animation:stapIn .45s var(--uit) both;}
@keyframes stapIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .stapvak.is-aan{animation:none;} }

.trap__voet{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

/* De prijs staat achter de pakketnaam, in dezelfde knop. */
.formulier__keuze--prijs label{gap:8px;}
.formulier__keuze small{font-size:var(--xs);color:var(--tekst-3);font-variant-numeric:tabular-nums;}
.formulier__keuze label:has(input:checked) small{color:inherit;opacity:.72;}

/* ---------- 28 · Contactblok ----------------------------------------------- */

.contact{display:grid;gap:clamp(34px,5vw,80px);}
@media (min-width:960px){ .contact{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);} }
.contact__lijst{list-style:none;display:grid;gap:0;margin-top:clamp(26px,3vw,40px);}
.contact__lijst li{padding-block:16px;border-top:1px solid var(--lijn);}
.contact__lijst li:last-child{border-bottom:1px solid var(--lijn);}
.contact__lijst span{display:block;font-size:var(--label);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tekst-3);margin-bottom:6px;}
.contact__lijst a,.contact__lijst p{font-size:var(--h4);font-weight:500;letter-spacing:-.015em;color:var(--tekst);}
.contact__lijst a:hover{color:var(--blauw);}

.formulier{display:grid;gap:clamp(20px,2.4vw,30px);}
.formulier__rij{display:grid;gap:clamp(20px,2.4vw,30px);}
@media (min-width:640px){ .formulier__rij{grid-template-columns:1fr 1fr;} }
.formulier__hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;}
.formulier__fout{
  display:none;padding:14px 18px;background:#FDECEC;border-left:2px solid #C0392B;
  font-size:var(--sm);color:#8E2A20;
}
.formulier__fout.is-on{display:block;}
.formulier__keuze{display:flex;flex-wrap:wrap;gap:10px;}
/* De keuzeknoppen staan in een .veld en zouden anders het hoofdletterlabel
   erven. Dit zijn knoppen om te lezen, dus gewone tekst. */
.formulier__keuze label{
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;
  border:1px solid var(--lijn-2);cursor:pointer;
  font-size:var(--sm);font-weight:500;letter-spacing:normal;text-transform:none;
  color:var(--tekst-2);
  transition:border-color .25s var(--schakel),color .25s var(--schakel);
}
.formulier__keuze input{position:absolute;opacity:0;width:0;height:0;}
.formulier__keuze label:hover{border-color:var(--tekst-3);}
.formulier__keuze label:has(input:checked){border-color:var(--nacht);color:var(--tekst);}
.formulier__keuze label:has(input:focus-visible){outline:2px solid var(--blauw);outline-offset:2px;}
.formulier__keuze i{width:7px;height:7px;border-radius:50%;background:var(--lijn-2);flex:none;
  transition:background-color .25s var(--schakel);}
.formulier__keuze label:has(input:checked) i{background:var(--blauw);}
.formulier__note{font-size:var(--xs);color:var(--tekst-3);}
.formulier__note a{color:var(--tekst);border-bottom:1px solid var(--lijn-2);}

/* ==========================================================================
   29 · Overgangslaag voor de sjabloonpagina's

   De ruim honderd stads-, branche- en blogpagina's dragen nog de klassen van
   het oude systeem, en hun eigen CSS staat in de head. Die head-CSS staat
   voor dit bestand, dus deze regels winnen bij gelijke specificiteit.

   Twee dingen gebeuren hier. Eerst worden de oude variabelenamen op het
   nieuwe palet gezet, waardoor honderd pagina's in een keer de juiste kleur
   krijgen. Daarna worden de oude componenten plat getrokken: de afgeronde
   hoeken, de schaduwen en de verlopen eruit, de nieuwe typografie erin.
   ========================================================================== */

:root{
  /* Oude namen, nieuwe waarden. */
  --white:var(--wit);
  --bg:var(--doek);
  --navy:var(--nacht);
  --navy-2:var(--nacht-2);
  --navy-3:var(--nacht-2);
  --navy-mid:var(--nacht-2);
  --text:var(--tekst);
  --text-secondary:var(--tekst-2);
  --text-2:var(--tekst-2);
  --text-3:var(--tekst-3);
  --text-muted:var(--tekst-3);
  --blue:var(--blauw);
  --blue-dark:var(--blauw-diep);
  --blue-light:var(--doek);
  --blue-mid:var(--lijn);
  --blue-soft:#7EA6F7;
  --border:var(--lijn);
  --border-dark:var(--lijn-2);
  --border-2:var(--lijn-2);
  --green:#1B7F4B;
  --on-navy:var(--op-nacht);
  --on-navy-2:var(--op-nacht-2);
  --line-d:var(--lijn-nacht);
  --font:var(--sans);
  --radius:0px; --radius-lg:0px; --radius-xl:0px;
  --shadow:none; --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  --ease-out:var(--uit); --ease-state:var(--schakel); --ease:var(--schakel);
  --out:var(--uit); --spring:var(--uit);
  --wrap-oud:var(--wrap);

  /* De oude schaal, opnieuw gedefinieerd. blog.css en uw-pages.css hangen
     hieraan; zonder deze regels vallen koppen terug naar 16 pixels. */
  --t-d1:var(--d2);
  --t-d2:clamp(1.7rem,3vw,2.5rem);
  --t-d3:var(--d3);
  --t-d4:var(--h4);
  --t-lead:var(--lead);
  --t-body:var(--body);
  --t-sm:var(--sm);
  --t-xs:var(--xs);
  --t-label:var(--label);

  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:80px; --s8:112px; --s9:160px;
  --col-gap:24px;
  --spine-col:clamp(200px,22vw,300px);
  --spine-gap:48px;

  --radius-lg:0px;
  --shadow-sm:none;
  --shadow-lg:none;
  --bg-card:var(--wit);
  --transition:.3s var(--schakel);
}

/* ---------- 29.1 · Raster en koppen ---------------------------------------- */

main h1{
  font-family:var(--display);font-stretch:106%;font-weight:800;
  font-size:clamp(2.2rem,5vw,4.2rem);line-height:1;letter-spacing:-.026em;
  color:var(--tekst);text-wrap:balance;
}
main h2{font-family:var(--display);font-stretch:106%;font-weight:800;letter-spacing:-.022em;}

.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);}

.section-label{
  display:inline-flex;align-items:center;gap:12px;
  font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);background:none;border:0;border-radius:0;padding:0;
  margin-bottom:20px;
}
.section-label::before{content:'';width:26px;height:1px;background:currentColor;flex:none;opacity:.65;}
.section-label::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--blauw);flex:none;}

.section-title{
  font-family:var(--display);font-stretch:106%;font-size:var(--d2);font-weight:800;line-height:1.02;
  letter-spacing:-.02em;color:var(--tekst);text-wrap:balance;
}
.blue-text{color:var(--tekst);}

/* ---------- 29.2 · Knoppen uit het oude systeem ----------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:56px;padding-inline:28px;border:1px solid transparent;border-radius:0;
  font-family:var(--sans);font-size:var(--sm);font-weight:600;letter-spacing:-.005em;
  line-height:1;cursor:pointer;white-space:nowrap;box-shadow:none;
  transition:background-color .3s var(--schakel),border-color .3s var(--schakel),color .3s var(--schakel);
}
.btn-primary{background:var(--nacht);color:#fff;border-color:var(--nacht);}
.btn-primary:hover{background:var(--blauw);border-color:var(--blauw);color:#fff;}
.btn-outline{background:transparent;color:var(--tekst);border-color:var(--lijn-2);}
.btn-outline:hover{background:var(--nacht);border-color:var(--nacht);color:#fff;}

/* ---------- 29.3 · Stads- en branchepagina's -------------------------------- */

.city-hero{background:none;padding:clamp(128px,13vw,190px) 0 clamp(44px,5vw,72px);}
.city-hero::before{display:none;}
.city-hero-inner{max-width:min(100%,860px);}

.city-badge{
  display:inline-flex;align-items:center;gap:12px;background:none;border:0;border-radius:0;
  padding:0;margin-bottom:22px;
  font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);
}
.city-badge-dot{width:5px;height:5px;background:var(--blauw);border-radius:50%;animation:none;}

.city-h1{
  font-family:var(--display);font-stretch:106%;font-size:var(--d1);font-weight:800;line-height:.96;
  letter-spacing:-.028em;color:var(--tekst);margin-bottom:26px;text-wrap:balance;
}
/* Het verloop in de kop maakte de tekst paars. De kop is nu gewoon inkt. */
.city-h1 span{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--tekst);
}
.city-sub{font-size:var(--lead);color:var(--tekst-2);line-height:1.62;margin-bottom:clamp(28px,3.4vw,44px);max-width:54ch;}
.city-actions{display:flex;gap:14px;flex-wrap:wrap;}

.city-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--lijn);border-block:1px solid var(--lijn);
  margin-top:clamp(44px,6vw,86px);
}
.city-stat{
  background:var(--doek);border:0;border-radius:0;text-align:left;
  padding:clamp(24px,3vw,40px) clamp(18px,2.2vw,30px);
  min-width:0;
}
@media (max-width:700px){ .city-stats{grid-template-columns:1fr;} }
.city-stat-num{
  font-family:var(--display);font-stretch:106%;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;line-height:.95;
  letter-spacing:-.03em;color:var(--tekst);font-variant-numeric:tabular-nums;
}
.city-stat-label{font-size:var(--xs);color:var(--tekst-2);margin-top:12px;line-height:1.55;}

.city-section{padding-block:var(--sec);}
.city-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--lijn);
  border:1px solid var(--lijn);}
.city-card{background:var(--doek);border:0;border-radius:0;padding:clamp(26px,3vw,44px);}
.city-card-icon{
  width:auto;height:auto;background:none;border-radius:0;margin-bottom:18px;
  display:flex;align-items:center;justify-content:flex-start;color:var(--blauw);
}
.city-card-icon svg{width:22px;height:22px;}
.city-card h3{font-size:var(--h4);font-weight:600;color:var(--tekst);margin-bottom:12px;letter-spacing:-.015em;}
.city-card p{font-size:var(--sm);color:var(--tekst-2);line-height:1.7;}

.city-why{background:var(--lucht);border-radius:0;padding:clamp(34px,5vw,72px) clamp(22px,4vw,64px);}
.city-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;}
/* De koppen en teksten in dit blok dragen op de stadspagina's een inline
   style met de oude kleur erin. Inline wint van een stylesheet, dus hier is
   !important de enige manier om ze op het blauwe vlak leesbaar te krijgen. */
.city-why :is(h2,h3,h4),.city-why .section-title{color:var(--op-lucht) !important;}
.city-why :is(p,li,dd,span){color:var(--op-lucht-2) !important;}
.city-why .section-label{color:var(--op-lucht-3) !important;}
.city-why .section-label::after{background:#fff;}
.city-why a{color:#fff;}
.city-why-list{display:flex;flex-direction:column;gap:0;}
.city-why-item{display:grid;grid-template-columns:22px minmax(0,1fr);gap:16px;
  padding-block:16px;border-top:1px solid var(--lijn-lucht);}
.city-why-item:last-child{border-bottom:1px solid var(--lijn-lucht);}
.city-why-check{
  flex-shrink:0;width:7px;height:7px;background:#fff;border-radius:50%;
  margin-top:.62em;font-size:0;color:transparent;display:block;
}
.city-why-item h4{font-size:var(--h4);font-weight:600;color:var(--op-lucht);margin-bottom:6px;letter-spacing:-.015em;}
.city-why-item p{font-size:var(--sm);color:var(--op-lucht-2);line-height:1.65;}

.city-faq{padding-block:var(--sec);}

.city-cta{
  background:var(--blauw);border-radius:0;text-align:left;color:#fff;
  padding:clamp(48px,7vw,110px) clamp(24px,5vw,90px);margin-bottom:0;
}
.city-cta h2{font-family:var(--display);font-stretch:106%;font-size:clamp(2.2rem,5.4vw,4.4rem);font-weight:800;
  line-height:1;letter-spacing:-.03em;margin-bottom:22px;max-width:18ch;}
.city-cta p{color:#D7E3FD;margin-bottom:clamp(28px,3.4vw,44px);font-size:var(--lead);max-width:48ch;}
.city-cta .btn-primary{background:#fff;color:var(--blauw);border-color:#fff;}
.city-cta .btn-primary:hover{background:var(--nacht);border-color:var(--nacht);color:#fff;}
.city-cta .btn-outline{color:#fff;border-color:rgba(255,255,255,.42);}
.city-cta .btn-outline:hover{background:#fff;border-color:#fff;color:var(--blauw);}

.breadcrumb{font-size:var(--xs);color:var(--tekst-3);margin-bottom:22px;}
.breadcrumb a{color:var(--tekst-2);}
.breadcrumb a:hover{color:var(--blauw);}
.sep{opacity:.5;margin-inline:6px;}

/* ---------- 29.4 · Vragen in het oude systeem ------------------------------- */

.faq-list,.faq-item,.faq-card{background:none;border:0;border-radius:0;box-shadow:none;}
.faq-item{
  display:grid;gap:clamp(8px,1.4vw,16px);
  padding-block:clamp(22px,2.6vw,34px);border-top:1px solid var(--lijn);
}
.faq-item:last-child{border-bottom:1px solid var(--lijn);}
.faq-q{font-size:var(--h4);font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--tekst);}
.faq-a{font-size:var(--sm);line-height:1.72;color:var(--tekst-2);max-width:64ch;}
@media (min-width:960px){
  .faq-item{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:var(--kier);align-items:start;}
}

/* ---------- 29.5 · Kaarten en tabellen uit het oude systeem ----------------- */

.card,.pricing-card,.addon-card,.bart-card,.trust-card,.pkg-card{
  background:var(--wit);border:1px solid var(--lijn);border-radius:0;box-shadow:none;
}
.pricing-card.featured{border-color:var(--nacht);}
.price-amount{font-family:var(--display);font-stretch:106%;font-weight:800;letter-spacing:-.03em;color:var(--tekst);
  font-variant-numeric:tabular-nums;}
.ct-yes{color:var(--blauw);} .ct-no{color:var(--tekst-3);} .ct-partial{color:var(--tekst-2);}

/* ---------- 29.6 · Wat verdwijnt -------------------------------------------- */

/* De knop terug naar boven is overbodig naast de vaste balk en de belbalk. */
.uw-top{display:none !important;}
/* De melding over de naamswijziging heeft zijn werk gedaan. */
.rebrand-slider{display:none !important;}

/* ---------- 29.7 · Binnenkomst van het oude systeem ------------------------- */

.js [data-rise]{opacity:0;transform:translateY(24px);}
.js [data-rise].is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--uit),transform .7s var(--uit);
  transition-delay:var(--vertraging,0s);
}
@media (prefers-reduced-motion:reduce){
  .js [data-rise]{opacity:1;transform:none;}
}

/* ---------- 29.8 · Accentwoorden in oude koppen -----------------------------
   Op de oude pagina's stond in elke kop een woord in blauw of in een verloop.
   Blauw is nu een signaal, dus die woorden worden gewoon inkt. De kop draagt
   zichzelf al op deze schaal.
   ------------------------------------------------------------------------- */

.gradient-text,.blue-text,.hero-title span,.city-h1 span,.section-title span{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--tekst);
}
.sec--nacht .gradient-text,.sec--nacht .blue-text,
.city-cta .gradient-text,.city-cta .blue-text{color:#fff;-webkit-text-fill-color:#fff;}

/* De knipperende cursor en de zwevende bollen in de oude hero horen bij een
   drukker ontwerp. Op elk scherm beweegt hooguit een ding. */
.cursor-blink,.hero-orb,.blog-hero-glow,.port-status-dot,.hero-badge-dot{
  animation:none !important;
}
.hero-orb,.blog-hero-glow{display:none !important;}

/* Oude paginakoppen krijgen de nieuwe schaal en de serif. */
.hero-title,.page-hero h1,.blog-hero-title,.about-hero h1,.port-hero h1{
  font-family:var(--display);font-stretch:106%;font-weight:800;letter-spacing:-.028em;line-height:.96;
  color:var(--tekst);text-wrap:balance;
}
.hero-sub,.page-hero p,.blog-hero-sub{font-size:var(--lead);line-height:1.62;color:var(--tekst-2);}

/* ==========================================================================
   30 · Beweging

   De vorige ronde sneuvelde op drukte, dus alles hier is geordend in plaats
   van verspreid. Per sectie gebeurt er één ding, en dat ene ding is altijd
   hetzelfde motief: iets wordt onthuld van links naar rechts of van onder
   naar boven, en eindigt in een punt.

   Alles start op .js en valt zonder JavaScript direct in eindstand. Wie
   minder beweging heeft aangezet krijgt de eindstand meteen te zien.
   ========================================================================== */

/* ---------- 30.1 · Overgang tussen pagina's --------------------------------
   Ingebouwd in de browser, dus dit kost geen enkele regel JavaScript en het
   loopt op de compositor. Browsers die het niet kennen negeren het.
   ------------------------------------------------------------------------- */

@view-transition{ navigation:auto; }
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.42s; animation-timing-function:cubic-bezier(.65,0,.35,1); }

/* ---------- 30.2 · De kop komt regel voor regel -----------------------------
   Elke visuele regel krijgt een masker en schuift van onderen naar binnen,
   met 85 ms ertussen. Als de laatste regel staat, tekent de boog zich.
   ------------------------------------------------------------------------- */

.js [data-lines]{opacity:0;}
.js [data-lines].is-gesplitst{opacity:1;}
.ln{display:block;overflow:hidden;}
.ln > span{display:block;transform:translateY(108%);}
.js .is-gesplitst .ln > span{animation:lnOmhoog 1.05s var(--uit) var(--ld,0s) forwards;}
@keyframes lnOmhoog{ to{ transform:none; } }
/* Zodra de regels staan mag het masker weg, anders knipt hij de boog af. */
.is-lijnen-klaar .ln{overflow:visible;}

/* ---------- 30.3 · Beeld wordt geschilderd, niet geschoven ------------------ */

.js [data-wipe] picture,
.js [data-wipe] > img{ clip-path:inset(0 100% 0 0); }
.js [data-wipe].is-in picture,
.js [data-wipe].is-in > img{ animation:veegRechts 1.15s var(--uit) var(--vertraging,0s) forwards; }
@keyframes veegRechts{ to{ clip-path:inset(0 0 0 0); } }

/* ---------- 30.4 · Het motief tekent zich bij elke sectie ------------------- */

.js .merk::before{transform:scaleX(0);transform-origin:0 50%;}
.js .merk::after{transform:scale(0);}
.js .merk.is-in::before{transform:none;transition:transform .75s var(--uit) .05s;}
.js .merk.is-in::after{transform:none;transition:transform .45s var(--uit) .55s;}

/* ---------- 30.4b · De belofte wordt getypt --------------------------------
   Elk teken krijgt een eigen span die vanaf het begin zijn plek inneemt en
   alleen nog onzichtbaar is. Daardoor verspringt er niets tijdens het typen.
   Het streepje staat absoluut naast het teken, dus dat telt ook niet mee in
   de breedte.
   ------------------------------------------------------------------------- */

.js [data-typen]{visibility:hidden;}
.js [data-typen].is-klaarzetten{visibility:visible;}
.js [data-typen] .ch{opacity:0;position:relative;}
.js [data-typen] .ch.is-op{opacity:1;}
.js [data-typen] .ch.is-streep::after{
  content:'';position:absolute;left:100%;top:.08em;
  width:.055em;height:.78em;background:currentColor;
  animation:knipper .9s steps(1,end) infinite;
}
/* Dezelfde knipper gebruikt de adresbalk in de laptop. */
@keyframes knipper{ 50%{ opacity:0; } }

/* ---------- 30.5 · Het woordmerk komt van onderen ---------------------------
   Eén veeg omhoog, en de belofte volgt regel voor regel. Dat is de hele
   opening: twee bewegingen in dezelfde richting.
   ------------------------------------------------------------------------- */

/* Let op: een element dat met clip-path verborgen is, heeft voor een
   IntersectionObserver geen zichtbaar vlak en krijgt dus nooit .is-in. Dit
   staat altijd boven de vouw, dus het speelt bij het laden. */
.js .hero__merk{clip-path:inset(0 0 105% 0);animation:merkOmhoog 1.15s var(--uit) .08s forwards;}
@keyframes merkOmhoog{ to{ clip-path:inset(-25% -6% -20% 0); } }

/* ---------- 30.6 · Diepte in het werkhoofdstuk -----------------------------
   Elk schermbeeld loopt een fractie trager mee dan de tekst ernaast. Genoeg
   om diepte te geven, te weinig om op te vallen.
   ------------------------------------------------------------------------- */

.werk__beeld{ will-change:transform; }
.js .werk__beeld{ transform:translate3d(0,var(--diepte,0px),0); }

/* ---------- 30.7 · Knoppen en links ---------------------------------------- */

.knop--vol{
  background-image:linear-gradient(var(--blauw),var(--blauw));
  background-repeat:no-repeat;background-size:0% 100%;background-position:0 50%;
  transition:background-size .5s var(--uit),color .3s var(--schakel),border-color .3s var(--schakel);
}
.knop--vol:hover,.knop--vol:focus-visible{background-size:100% 100%;}

.knop--lijn{
  background-image:linear-gradient(var(--nacht),var(--nacht));
  background-repeat:no-repeat;background-size:0% 100%;background-position:0 50%;
  transition:background-size .5s var(--uit),color .3s var(--schakel),border-color .3s var(--schakel);
}
.knop--lijn:hover,.knop--lijn:focus-visible{background-size:100% 100%;color:#fff;border-color:var(--nacht);}

.sec--nacht .knop--vol{background-image:linear-gradient(#fff,#fff);}
.sec--nacht .knop--vol:hover{color:var(--nacht);}
.sec--nacht .knop--lijn,.slot .knop--lijn{background-image:linear-gradient(#fff,#fff);}
.slot .knop--vol{background-image:linear-gradient(var(--nacht),var(--nacht));}
.slot .knop--vol:hover{color:#fff;}
.sec--lucht .knop--lijn{background-image:linear-gradient(#fff,#fff);}

/* De onderlijn van een link tekent zich van links naar rechts. */
.link{
  border-bottom:0;padding-bottom:5px;
  background-image:linear-gradient(var(--lijn-2),var(--lijn-2)),linear-gradient(var(--blauw),var(--blauw));
  background-repeat:no-repeat;
  background-size:100% 1px,0% 1px;
  background-position:0 100%,0 100%;
  transition:background-size .55s var(--uit),color .3s var(--schakel);
}
.link:hover,.link:focus-visible{background-size:100% 1px,100% 1px;color:var(--blauw);}
.sec--nacht .link{background-image:linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,.24)),linear-gradient(#fff,#fff);}
.sec--nacht .link:hover{color:#fff;}
.sec--lucht .link{color:#fff;background-image:linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,.34)),linear-gradient(#fff,#fff);}
.sec--lucht .link:hover{color:#fff;}

/* ---------- 30.8 · Bewijsband: cel voor cel --------------------------------
   De sectie zelf schuift niet mee, alleen haar cellen. Anders beweegt het
   blok twee keer.
   ------------------------------------------------------------------------- */

.js .bewijs[data-in]{opacity:1;transform:none;}

.js .bewijs__cel{opacity:0;transform:translateY(20px);}
.js .bewijs.is-in .bewijs__cel{
  opacity:1;transform:none;
  transition:opacity .8s var(--uit),transform .8s var(--uit);
}
.js .bewijs.is-in .bewijs__cel:nth-child(1){transition-delay:0s;}
.js .bewijs.is-in .bewijs__cel:nth-child(2){transition-delay:.09s;}
.js .bewijs.is-in .bewijs__cel:nth-child(3){transition-delay:.18s;}
.js .bewijs.is-in .bewijs__cel:nth-child(4){transition-delay:.27s;}

/* ---------- 30.9 · Rust voor wie erom vraagt ------------------------------- */

@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  .js [data-typen]{visibility:visible;}
  .js [data-typen] .ch{opacity:1;}
  .js [data-typen] .ch.is-streep::after{display:none;}
  .js [data-lines]{opacity:1;}
  .ln{overflow:visible;}
  .ln > span{transform:none;animation:none;}
  .js [data-wipe] picture,.js [data-wipe] > img,
  .js .hero__merk{clip-path:none;animation:none;}
  .js .merk::before{transform:none;}
  .js .merk::after{transform:none;}
  .js .werk__beeld{transform:none;}
  .js .bewijs__cel{opacity:1;transform:none;}
}

/* ---------- 29.9 · Twee restanten uit de oude stylesheets -------------------
   home.css en style.css worden nergens meer geladen. Deze twee klassen stonden
   alleen daar en zijn op een handvol pagina's nog in gebruik, dus die krijgen
   hier hun plek in de nieuwe taal.
   ------------------------------------------------------------------------- */

.hero-badge{
  display:inline-flex;align-items:center;gap:12px;
  background:none;border:0;border-radius:0;padding:0;margin-bottom:22px;
  font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);
}
.hero-badge-dot{width:5px;height:5px;background:var(--blauw);border-radius:50%;
  flex:none;animation:none;}

.faq-header{margin-bottom:clamp(28px,3.4vw,48px);}

/* ==========================================================================
   32 · De laptop

   Scrollen klapt hem open. Het model is een echte doos: een behuizing van
   900 bij 566 bij 12 met zes vlakken, en een even breed deksel van 900 bij
   566 bij 8
   dat om zijn achterrand draait. Die dikte is dunner dan bij het apparaat,
   want WebKit tekent de zijkanten niet en laat er dus lucht tussen de twee
   platen zien; hoe dunner de doos, hoe kleiner die kier. Daar staat een camera boven die op het dek
   neerkijkt. Twee hoeken sturen alles, allebei uit --open:

     --kantel   de camera, van 68 graden dicht naar 62 graden open
     --klap     het deksel om de scharnier, van 0 naar 124 graden

   De rest van de hero hangt aan drie andere getallen:
     --toon       de inhoud van het scherm komt op
     --weg        het woordmerk en de belofte gaan weg
     --verschuif  het geheel zakt zodat de open laptop midden in beeld staat

   Elk vlak is een blad zonder 3D-kinderen. Daardoor zijn overflow, afgeronde
   hoeken en gewone tekst binnen zo'n vlak veilig, ook in Safari.

   Alle maten staan in eenheden van het model en worden geschaald met --u, de
   lengte van een modeleenheid. Zo is er geen transform:scale nodig en blijft
   alles op elk scherm even scherp.
   ========================================================================== */

/* ---------- 32.1 · De scene ------------------------------------------------ */

.laptop{
  position:relative;
  /* Alleen de laptop zakt naar het midden van het beeld; het woordmerk blijft
     staan waar het staat en gaat gewoon weg met --weg. */
  transform:translateY(var(--verschuif));
  /* In de bladstroom staat alleen de dichte stand. Dat is wat je van het
     deksel ziet onder de kijkhoek van 89,1 graden, plus de dikte van deksel
     en behuizing samen. Nagemeten in beeld: 34 eenheden in Chrome, 20 in
     Safari; dat verschil is de dikte van de kast die WebKit niet tekent. */
  height:calc(36 * var(--u));
  /* Ruim onder het woordmerk: de staart van de g hangt onder het tekstvak
     uit en mag de laptop niet raken. */
  margin-top:clamp(40px,5.6vw,110px);
}
.laptop__scene{
  position:absolute;left:50%;top:50%;
  width:calc(1080 * var(--u));height:calc(980 * var(--u));
  /* Het midden van de behuizing ligt op 780 van de 980 en dat punt hoort in
     het midden van de ruimte die de laptop in het blad heeft. De veertien
     eenheden eronder houden de dichte streep weg bij de staart van de g; open
     maakt het niets uit, want dan meet de lus opnieuw uit waar hij hoort. */
  margin-left:calc(-540 * var(--u));margin-top:calc(-766 * var(--u));
  perspective:calc(9200 * var(--u));
  /* Lange lens, en het verdwijnpunt vlak boven de laptop. Samen houden die
     twee de dichte stand dun: hoe verder de laptop onder het verdwijnpunt
     ligt en hoe korter de lens, hoe meer het bovenblad in beeld openklapt. */
  perspective-origin:50% 62%;
  pointer-events:none;
}

/* ---------- 32.2 · De rig -------------------------------------------------- */
/* Een kanteling, meer niet. Alles eronder hangt in dezelfde ruimte. */

.laptop__rig{
  position:absolute;left:50%;top:calc(780 * var(--u));
  width:calc(900 * var(--u));height:calc(566 * var(--u));
  margin:calc(-283 * var(--u)) 0 0 calc(-450 * var(--u));
  transform-style:preserve-3d;
  transform:rotateX(var(--kantel));
}
.laptop__kast{position:absolute;inset:0;transform-style:preserve-3d;}
.laptop__deksel{
  position:absolute;top:0;left:50%;
  width:calc(900 * var(--u));height:calc(566 * var(--u));
  margin-left:calc(-450 * var(--u));
  transform-style:preserve-3d;
  transform-origin:50% 0;                     /* de scharnier is de achterrand */
  transform:translateZ(calc(13 * var(--u))) rotateX(var(--klap));
}
/* Elk vlak is een blad: plat, eenzijdig, zonder 3D-kinderen.

   Let op: de vier zijkanten van de kast en van het deksel staan haaks op hun
   ouder, en zulke vlakken tekent WebKit niet. Gemeten, ook op 89,6 en op 80
   graden. In Safari heeft de doos dus geen zichtbare dikte; wat je daar ziet
   is het bovenblad en het deksel. Daarom hangt de dichte streep aan de
   kijkhoek en niet aan de dikte van de kast. */
.lapvlak{position:absolute;pointer-events:none;backface-visibility:hidden;}

/* ---------- 32.3 · De behuizing, 900 bij 566 bij 12 ------------------------ */

.kast__dek{
  left:0;top:0;width:calc(900 * var(--u));height:calc(566 * var(--u));
  transform:translateZ(calc(12 * var(--u)));
  border-radius:calc(18 * var(--u));
  background:
    radial-gradient(120% 74% at 50% -16%, rgba(255,255,255,.95), rgba(255,255,255,0) 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 1px, rgba(255,255,255,0) 1px 4px),
    linear-gradient(176deg,var(--alu-top) 0%,var(--alu-mid) 44%,var(--alu-laag) 80%,var(--alu-diep) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72), inset 0 -2px 6px rgba(30,52,98,.28);
}
.kast__onder{
  left:0;top:0;width:calc(900 * var(--u));height:calc(566 * var(--u));
  transform:rotateX(180deg);
  border-radius:calc(18 * var(--u));background:#8FA4C6;
}
.kast__voor{
  left:0;top:calc(554 * var(--u));width:calc(900 * var(--u));height:calc(12 * var(--u));
  transform-origin:50% 100%;transform:rotateX(-90deg);
  border-radius:0 0 calc(6 * var(--u)) calc(6 * var(--u));
  background:linear-gradient(180deg,#FBFDFF 0 2px,#E3EBF9 3px,#C3D2EC 58%,#9CB1D4 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
.laptop__lip{                       /* het duimgleufje in de voorrand */
  position:absolute;left:50%;top:0;
  width:calc(170 * var(--u));height:calc(12 * var(--u));margin-left:calc(-85 * var(--u));
  background:radial-gradient(90% 200% at 50% -40%, rgba(18,34,66,.60) 0%,
             rgba(18,34,66,.22) 46%, rgba(18,34,66,0) 72%);
  border-radius:0 0 90px 90px/0 0 34px 34px;
}
.kast__achter{
  left:0;top:0;width:calc(900 * var(--u));height:calc(12 * var(--u));
  transform-origin:50% 0;transform:rotateX(90deg);
  background:linear-gradient(180deg,#8FA4C6,#6F86AC);
}
.kast__links,.kast__rechts{
  top:0;width:calc(12 * var(--u));height:calc(566 * var(--u));
  background:linear-gradient(90deg,#96ABCD 0,#D5E1F6 55%,#FAFCFF 100%);
}
.kast__links{left:0;transform-origin:0 50%;transform:rotateY(-90deg);}
.kast__rechts{
  left:calc(888 * var(--u));transform-origin:100% 50%;transform:rotateY(90deg);
  background:linear-gradient(270deg,#96ABCD 0,#D5E1F6 55%,#FAFCFF 100%);
}

/* Wat er op het dek ligt: de scharnierstrook, het toetsenbord, het trackpad.
   Gewone stroom in een plat vlak. */
.laptop__scharnier{
  position:absolute;left:calc(34 * var(--u));right:calc(34 * var(--u));
  top:calc(3 * var(--u));height:calc(25 * var(--u));
  border-radius:calc(3 * var(--u)) calc(3 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  background:linear-gradient(180deg,#0B1424 0%,#2A3A55 42%,#17243A 76%,#0A1120 100%);
  box-shadow:0 2px 3px rgba(20,38,74,.45);
}
.laptop__toetsen{
  position:absolute;left:calc(118 * var(--u));right:calc(118 * var(--u));
  top:calc(80 * var(--u));height:calc(230 * var(--u));
  border-radius:calc(12 * var(--u));
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 calc(38 * var(--u)), #0A1322 calc(38 * var(--u)) calc(44 * var(--u))),
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 calc(43 * var(--u)), #0A1322 calc(43 * var(--u)) calc(49 * var(--u))),
    linear-gradient(180deg,#33445F,#1B2940);
  box-shadow:inset 0 0 0 calc(6 * var(--u)) #0A1322, 0 1px 0 rgba(255,255,255,.7);
}
.laptop__spatie{
  position:absolute;left:50%;bottom:calc(6 * var(--u));
  width:calc(300 * var(--u));height:calc(32 * var(--u));margin-left:calc(-150 * var(--u));
  border-radius:calc(4 * var(--u));
  background:linear-gradient(180deg,#3A4C6B,#2B3B57,#1E2C44);
  box-shadow:0 0 0 calc(6 * var(--u)) #0A1322;
}
.laptop__muis{
  position:absolute;left:50%;top:calc(342 * var(--u));
  width:calc(262 * var(--u));height:calc(166 * var(--u));margin-left:calc(-131 * var(--u));
  border-radius:calc(13 * var(--u));
  background:linear-gradient(180deg,#E7EDFA,#CBD8EF 62%,#B9C9E5);
  box-shadow:inset 0 0 0 1px rgba(74,101,150,.38), inset 0 3px 7px rgba(53,79,129,.22);
}

/* ---------- 32.4 · Het deksel, 900 bij 566 bij 8 --------------------------- */

.laptop__rug{
  left:0;top:0;width:calc(900 * var(--u));height:calc(566 * var(--u));
  transform:translateZ(calc(8 * var(--u)));
  border-radius:calc(18 * var(--u));
  background:
    radial-gradient(80% 60% at 30% 12%, rgba(255,255,255,.92), rgba(255,255,255,0) 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.30) 0 1px, rgba(255,255,255,0) 1px 4px),
    linear-gradient(168deg,#F7FAFF 0%,#DEE8FA 40%,#B4C6E6 78%,#9FB4D6 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.78);
  display:flex;align-items:center;justify-content:center;
  opacity:calc(1 - var(--wissel));
}
.rug__merk{
  width:calc(74 * var(--u));height:calc(74 * var(--u));border-radius:calc(21 * var(--u));
  background:linear-gradient(150deg,rgba(78,124,206,.42),rgba(41,74,140,.34));
  color:rgba(255,255,255,.86);text-align:center;
  font-family:var(--display);font-weight:800;font-stretch:106%;
  font-size:calc(40 * var(--u));line-height:calc(74 * var(--u));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 2px rgba(20,40,84,.35);
}
.dekselrand{background:linear-gradient(180deg,#FAFCFF 0 2px,#DFE9F8 30%,#AFC1E0 100%);}
.dekselrand--voor{
  left:0;top:calc(558 * var(--u));width:calc(900 * var(--u));height:calc(8 * var(--u));
  transform-origin:50% 100%;transform:rotateX(-90deg);
  border-radius:0 0 calc(5 * var(--u)) calc(5 * var(--u));
  box-shadow:inset 0 -1px 0 rgba(28,48,92,.45);
}
.dekselrand--achter{
  left:0;top:0;width:calc(900 * var(--u));height:calc(8 * var(--u));
  transform-origin:50% 0;transform:rotateX(90deg);
  background:linear-gradient(180deg,#7F94B8,#5E7399);
}
.dekselrand--links{
  left:0;top:0;width:calc(8 * var(--u));height:calc(566 * var(--u));
  transform-origin:0 50%;transform:rotateY(-90deg);
  background:linear-gradient(90deg,#A3B7D8 0,#E6EEFB 60%,#FBFDFF 100%);
}
.dekselrand--rechts{
  left:calc(892 * var(--u));top:0;width:calc(8 * var(--u));height:calc(566 * var(--u));
  transform-origin:100% 50%;transform:rotateY(90deg);
  background:linear-gradient(270deg,#A3B7D8 0,#E6EEFB 60%,#FBFDFF 100%);
}

/* Het binnenvlak van het deksel: een gewone stroomcontainer met de browser. */
.laptop__scherm{
  left:0;top:0;width:calc(900 * var(--u));height:calc(566 * var(--u));
  transform:rotateX(180deg);
  border-radius:calc(18 * var(--u));
  background:linear-gradient(162deg,#1A2740 0%,#101C31 52%,#0C1526 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  /* Een dunne rand rondom, zoals bij het apparaat: zeven eenheden is op ware
     grootte een kleine vier millimeter. */
  padding:calc(7 * var(--u));
  display:flex;pointer-events:auto;
  opacity:var(--wissel);
  /* Dit vlak niet weg laten draaien door de motor zelf: Safari zet een vlak
     met inhoud in een eigen laag en tekent dan de achterkant gespiegeld.
     De wissel hierboven bepaalt wanneer je het scherm ziet. */
  backface-visibility:visible;
}
/* Het merk op de kin verdwijnt zodra het beeld tot de rand doorloopt; de
   inhoud staat daar nu. Hij blijft in de opbouw staan voor als de browser
   later toch weer een rand krijgt. */
.scherm__merk{display:none;}
/* De browser zelf. Hij komt op zodra het scherm naar je toe draait. */
.laptop__binnen{
  flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;
  border-radius:calc(11 * var(--u));background:#0B1C3D;
  opacity:var(--toon);
}

/* ---------- 32.5 · De tabbladen --------------------------------------------
   Zes tabbladen naast elkaar, zoals in een echte browser. Ze liggen niet op
   een vast rasterdeel maar op hun eigen inhoud: een korte naam neemt minder
   ruimte dan een lange, en wat er overblijft wordt verdeeld. Daardoor staat
   elke naam er voluit. Nagerekend: zes namen zijn samen 47 keer de
   korpsgrootte breed, met de bolletjes en de ruimte eromheen 797 van de 855
   eenheden die er zijn.

   Elk tabblad heeft zijn eigen kleurtje op de plek van de favicon, want zes
   grijze stipjes leest als een blokkendoos en niet als een browser.
   ------------------------------------------------------------------------- */

.tabs{
  display:flex;gap:calc(2 * var(--u));padding:calc(8 * var(--u)) calc(8 * var(--u)) 0;
  background:#07142A;flex:none;overflow:hidden;
}
.tab{
  /* Groeien en krimpen vanaf de eigen inhoud, niet vanaf een gelijk deel. */
  flex:1 1 auto;min-width:0;
  height:calc(34 * var(--u));padding:0 calc(11 * var(--u));
  border:0;border-radius:calc(9 * var(--u)) calc(9 * var(--u)) 0 0;
  background:#0B1E3E;color:#A8BEE4;
  display:flex;align-items:center;gap:calc(8 * var(--u));
  font-family:var(--sans);font-weight:500;font-size:calc(13 * var(--u));
  letter-spacing:-.006em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  transition:background-color .22s var(--schakel),color .22s var(--schakel);
}
.tab:hover{background:#16305C;color:#F2F7FF;}
/* Het open tabblad staat op dezelfde kleur als de pagina eronder en loopt er
   dus in over, met een streepje bovenop zoals een browser dat doet. */
.tab.is-op{
  background:#0B1C3D;color:#fff;font-weight:600;
  box-shadow:inset 0 calc(3 * var(--u)) 0 #4F8BFF;
}
.tab > i{
  width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:calc(2 * var(--u));
  flex:none;opacity:.7;transition:opacity .22s var(--schakel);
}
.tab.is-op > i{opacity:1;}
/* De favicons, in de kleur van de site zelf. */
.tab:nth-child(1) > i{background:#4C8A3F;}
.tab:nth-child(2) > i{background:#C8862B;}
.tab:nth-child(3) > i{background:#2E8F8A;}
.tab:nth-child(4) > i{background:#B8452F;}
.tab:nth-child(5) > i{background:#2C6B63;}
.tab:nth-child(6) > i{background:#6B3FD4;}

/* ---------- 32.6 · De adresbalk -------------------------------------------- */

.adres{
  display:flex;align-items:center;gap:calc(9 * var(--u));flex:none;
  padding:calc(9 * var(--u)) calc(10 * var(--u));
  background:#0B1C3D;border-bottom:1px solid rgba(140,175,240,.18);
}
.adres > i{
  width:calc(11 * var(--u));height:calc(11 * var(--u));border-radius:50%;
  background:rgba(150,185,245,.16);flex:none;display:block;
}
.adres__url{
  flex:1;min-width:0;height:calc(30 * var(--u));border-radius:calc(15 * var(--u));
  background:#071531;box-shadow:inset 0 0 0 1px rgba(140,175,240,.22);
  display:flex;align-items:center;gap:calc(7 * var(--u));
  padding-inline:calc(14 * var(--u));
  font-family:var(--sans);font-weight:500;font-size:calc(13 * var(--u));
  color:#C3D6F6;white-space:nowrap;overflow:hidden;
}
.adres__url svg{width:.8em;height:.9em;flex:none;opacity:.6;}
.adres__caret{width:1px;height:1em;background:#7EA6F7;flex:none;opacity:0;}
.adres.is-typt .adres__caret{opacity:1;animation:knipper .95s steps(1,end) infinite;}
.adres__open{
  flex:none;height:calc(30 * var(--u));padding:0 calc(16 * var(--u));
  border-radius:calc(15 * var(--u));
  background:linear-gradient(180deg,#3B82F6,#2563EB);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:calc(13 * var(--u));
  line-height:calc(30 * var(--u));
  transition:background-color .22s var(--schakel);
}
.adres__open:hover{background:#fff;color:var(--blauw);}

/* ---------- 32.7 · De site in beeld ---------------------------------------- */

.laptop__view{flex:1;position:relative;overflow:hidden;background:#0B1C3D;}
.site{margin:0;position:absolute;inset:0;}
.site picture,.site img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.js .site{opacity:0;visibility:hidden;transition:opacity .45s var(--schakel),visibility .45s;}
.js .site.is-op{opacity:1;visibility:visible;}

/* De schaduw waar hij op staat, draait mee in de rig. */
.laptop__schaduw{
  position:absolute;left:50%;top:50%;
  width:calc(1280 * var(--u));height:calc(740 * var(--u));
  margin:calc(-370 * var(--u)) 0 0 calc(-640 * var(--u));
  transform:translateZ(calc(-4 * var(--u)));
  background:radial-gradient(52% 48% at 50% 52%, rgba(4,16,44,.55) 0%,
             rgba(4,16,44,.28) 45%, rgba(4,16,44,0) 72%);
  pointer-events:none;
}

/* ---------- 32.8 · Kleiner scherm ------------------------------------------ */

@media (max-width:900px){
  /* Op een telefoon is de laptop klein, dus wordt de browser erin naar
     verhouding groter gezet: anders zijn de namen niet te lezen en de
     tabbladen niet te raken. Ze passen dan niet meer naast elkaar, dus de
     rij schuift. */
  .tabs{overflow-x:auto;scrollbar-width:none;padding:calc(10 * var(--u)) calc(10 * var(--u)) 0;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{
    flex:0 0 auto;height:calc(58 * var(--u));padding:0 calc(16 * var(--u));
    font-size:calc(22 * var(--u));gap:calc(11 * var(--u));
    border-radius:calc(14 * var(--u)) calc(14 * var(--u)) 0 0;
  }
  .tab > i{width:calc(14 * var(--u));height:calc(14 * var(--u));border-radius:calc(3 * var(--u));}
  .tab.is-op{box-shadow:inset 0 calc(5 * var(--u)) 0 #4F8BFF;}
  .adres{padding:calc(12 * var(--u)) calc(14 * var(--u));gap:calc(12 * var(--u));}
  .adres > i{width:calc(15 * var(--u));height:calc(15 * var(--u));}
  .adres__url{height:calc(46 * var(--u));border-radius:calc(23 * var(--u));
    font-size:calc(21 * var(--u));padding-inline:calc(18 * var(--u));}
  .adres__open{display:none;}
}

/* Op de telefoon kost de adresbalk een zesde van het scherm terwijl er niets
   meer in staat: de knop naar de site is hierboven al weggehaald en het adres
   zelf is op die grootte niet te lezen. Zonder die balk loopt de site door tot
   waar hij op een groot scherm ook ophoudt. De tabbladen blijven staan, want
   die schakelen. */
@media (max-width:900px){
  .adres{display:none;}
  .laptop__binnen{border-radius:calc(11 * var(--u));}
}

/* ---------- 32.9 · Rust ---------------------------------------------------
   Wie minder beweging heeft aangezet krijgt de laptop meteen open, zonder
   scrollbaan. De tabbladen blijven gewoon werken.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .hero--blauw{height:auto;--open:1;--toon:1;--weg:0;--verschuif:0px;}
  .hero__vast{position:static;height:auto;}
  /* Open beslaat de doos 846 eenheden, gemeten. Daar ruimte voor maken,
     anders loopt het deksel over de tekst eronder heen. */
  .laptop{height:calc(860 * var(--u));margin-top:clamp(26px,3.4vw,52px);}
  .hero__poster{transform:none;}
}

/* ==========================================================================
   33 · De sturing

   Vijf dingen waar we op sturen, als typografisch tafereel. Zes haltes staan
   op een boog om de kijker heen: eerst de aankondiging, dan de vijf stappen.
   Per stap draait de camera een halte verder en komt het cijfer als een
   massief blok in beeld, opgebouwd uit twaalf vellen.

   Alles hangt aan een getal: --stand, van 0 tot 1. De baan is 460 procent van
   een schermhoogte: een scherm om in te staan en daarna 72 procent per halte.
   Dat is ongeveer een vegende scrolbeweging per stap.

   Binnen zo'n stuk staat de camera de eerste en de laatste 15 procent stil en
   draait hij de rest van de tijd door. Die twee rustjes vallen op een halte
   tegen elkaar aan, dus je staat er ruim 20 procent van een schermhoogte
   stil: lang genoeg om te lezen, kort genoeg om niet te denken dat er niets
   gebeurt. Daarvoor en daarna beweegt hij mee met je vinger.

   Kleefpunten (scroll-snap) deden dat eerst. Die zijn eruit: met zes ankers
   op een schermhoogte ligt elke scrollpositie binnen de aantrekkingskracht
   van een anker, dus trok de browser elke kleine scroll terug en kwam je de
   sectie niet door.

   De diepte wordt met de hand uitgerekend, met sin() en cos() in gewone
   2d-transforms. In deze opbouw levert translateZ in WebKit niets op, de
   vellen vallen dan samen. Zelf projecteren geeft hetzelfde beeld, werkt in
   elke motor gelijk en kent geen grens aan het aantal vlakken.
   ========================================================================== */

.sturing{
  --stand:0;
  --spreiding:30deg;    /* hoek tussen twee haltes op de boog          */
  --straal:1900px;      /* straal van de boog waarlangs de camera rijdt */
  --vlak:#142C58;       /* de voorkant van een cijfer, een vlak in de nacht */
  position:relative;
  background:var(--nacht);color:var(--op-nacht);
}
/* Eerst was dit een baan van vijf schermhoogtes waar het doek aan vastkleefde,
   en stuurde je scrolwiel de camera. Je kwam er dus niet langs zonder de hele
   reeks door te lopen. Nu is het een gewone sectie van een scherm hoog en
   sturen de pijlen de camera. Scrollen doet hier niets meer. */
.sturing__spoor{position:relative;height:100svh;}
.sturing__doek{
  position:relative;height:100svh;overflow:hidden;
  container-type:size;container-name:doek;
}
/* De lucht achter het tafereel, plat geschilderd en dus goedkoop. */
.sturing__lucht{
  position:absolute;inset:-12%;
  background:
    radial-gradient(64% 54% at 54% 38%, #16336B 0%, rgba(11,28,61,0) 70%),
    radial-gradient(120% 62% at 50% 108%, rgba(37,99,235,.16) 0%, rgba(11,28,61,0) 62%);
  transform:translate3d(calc(var(--stand) * -80px),0,0);
}
.sturing__tafereel{position:absolute;inset:0;}

/* Een halte is een plek op de boog. De doos is zo groot als het hele doek,
   zodat het verdwijnpunt midden in beeld ligt. */
.halte{
  position:absolute;inset:0;
  --hoek:calc((var(--i) - var(--stand) * 5) * var(--spreiding));
  --nabij:clamp(0, cos(var(--hoek)), 1);
  --zicht:clamp(0, calc(pow(var(--nabij),6) * 1.7 - .45), 1);
  --lees:clamp(0, calc(pow(var(--nabij),14) * 2 - .75), 1);
  --maat:calc(.6 + .4 * var(--nabij));                            /* dieptekrimp */
  --uitwijk:calc(var(--straal) * sin(var(--hoek)) * var(--maat)); /* zijwaarts   */
  transform:translateX(var(--uitwijk)) scale(var(--maat));
}

/* ---------- 33.1 · Het monument -------------------------------------------
   Een cijfer van twaalf vellen. Het achterste vel bepaalt de maat, de elf
   ervoor schuiven op naar de kijker toe, en het voorste is een open vorm met
   een witte omtrek: dat leest als de voorkant van een massief blok.
   ------------------------------------------------------------------------- */

.halte__monument{
  position:absolute;right:15cqw;bottom:18cqh;
  --draai:calc(var(--hoek) - 24deg);                /* de letter staat schuin */
  --sp:calc(.012em + .05em * pow(var(--nabij),4));  /* dikte van de stapel    */
  transform:translateX(calc(var(--uitwijk) * -.08)) scale(.95)
            scaleX(clamp(.06, cos(var(--draai)), 1));
  font-family:var(--display);font-weight:800;font-stretch:106%;line-height:.8;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  /* Het cijfer mag nooit tegen de tekst aan komen. Wat er tussen het
     tekstblok en de rechterkant overblijft is de maat; twee cijfers zijn
     ongeveer 1,07 keer de korpsgrootte breed, dus daar blijft hij onder. */
  --ruimte:calc(100cqw - 8cqw - min(46cqw, 480px) - 15cqw - 40px);
  font-size:min(58cqh, 42cqw, 540px, calc(var(--ruimte) * .84));
}
.laag{
  display:block;position:absolute;inset:0;white-space:nowrap;
  -webkit-text-stroke-width:.022em;   /* trekt de naad tussen twee vellen dicht */
  color:color-mix(in oklab, var(--kleur) calc(var(--zicht) * 100%), var(--nacht));
  transform:translateX(calc(var(--sp) * -1 * var(--l) * sin(var(--draai))))
            scale(calc(1 - .008 * var(--l)));
}
.laag--achter{position:relative;inset:auto;}   /* draagt de maat van de doos */
.laag:nth-of-type(1){--l:11;--kleur:#152F63;}
.laag:nth-of-type(2){--l:10;--kleur:#183674;}
.laag:nth-of-type(3){--l:9; --kleur:#1A3C84;}
.laag:nth-of-type(4){--l:8; --kleur:#1D4395;}
.laag:nth-of-type(5){--l:7; --kleur:#1F4AA6;}
.laag:nth-of-type(6){--l:6; --kleur:#2251B7;}
.laag:nth-of-type(7){--l:5; --kleur:#2457C7;}
.laag:nth-of-type(8){--l:4; --kleur:#275ED8;}
.laag:nth-of-type(9){--l:3; --kleur:#2965E9;}
.laag:nth-of-type(10){--l:2;--kleur:#4379F1;}
.laag:nth-of-type(11){--l:1;--kleur:#6290F7;}
.laag--kop{                                    /* de voorkant, een open vorm */
  --l:0;
  -webkit-text-stroke-width:clamp(1.4px,.5cqh,3.4px);
  -webkit-text-stroke-color:color-mix(in oklab, var(--wit) calc(var(--zicht) * 100%), var(--nacht));
  color:color-mix(in oklab, var(--vlak) calc(var(--zicht) * 100%), var(--nacht));
}
/* De regel waarop het cijfer staat. */
.halte__grond{
  position:absolute;left:-14%;right:-14%;bottom:-14%;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.7) 26%,
             rgba(255,255,255,.7) 74%,rgba(255,255,255,0));
  opacity:calc(var(--zicht) * .5);
}

/* ---------- 33.2 · De tekst -----------------------------------------------
   Het blok met de echte tekst staat dichter bij de kijker dan het cijfer en
   draait nooit mee: die letters blijven dus vlijmscherp.
   ------------------------------------------------------------------------- */

.halte__blok{
  position:absolute;left:8cqw;bottom:17cqh;width:min(46cqw,480px);
  transform:translateX(calc(var(--uitwijk) * .13)) scale(1.05);
  opacity:var(--lees);
}
.halte__nr{
  margin:0 0 .9em;font-size:var(--label);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:color-mix(in oklab, var(--blauw) 42%, var(--wit));
}
.halte__titel{
  margin:0;font-family:var(--display);font-weight:800;font-stretch:106%;
  font-size:min(8.4cqh, 5.4cqw, 60px);line-height:1;letter-spacing:-.035em;color:#fff;
}
.halte__tekst{
  margin:.85em 0 0;max-width:27em;
  font-size:min(3.2cqh,17px);line-height:1.55;color:var(--op-nacht-2);
}
.halte__blok--opening{
  left:8cqw;bottom:auto;top:50%;width:min(60cqw,820px);
  transform:translateX(calc(var(--uitwijk) * .13)) translateY(-50%) scale(1.05);
}
.halte__kopregel{
  margin:0 0 1.4em;font-size:var(--label);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--op-nacht-3);
}
.halte__kop{
  margin:0;font-family:var(--display);font-weight:800;font-stretch:106%;
  font-size:min(12.4cqh, 7cqw, 78px);line-height:1;letter-spacing:-.035em;color:#fff;
}
.halte__lead{
  margin:1.1em 0 0;max-width:34em;
  font-size:min(3.6cqh,19px);line-height:1.55;color:var(--op-nacht-2);
}

/* De bediening onderin: twee pijltjes en vijf streepjes. Een veeg over het
   touchpad of een klik met het wiel zet ook een stap; dit is dezelfde weg
   voor wie liever klikt of met het toetsenbord werkt. */
.sturing__bediening{
  position:absolute;left:8cqw;bottom:7cqh;
  display:flex;align-items:center;flex-wrap:wrap;gap:clamp(14px,1.6vw,22px);
}

/* Het regeltje boven de pijlen. Het staat er tot je voor het eerst bladert,
   daarna heeft het zijn werk gedaan en zakt het weg. */
.sturing__hint{
  flex-basis:100%;margin-bottom:calc(clamp(14px,1.6vw,22px) * -.2);
  display:inline-flex;align-items:center;gap:12px;
  font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--op-nacht-2);
  transition:opacity .5s var(--schakel),transform .5s var(--uit);
}
.sturing__hint::before{content:'';width:26px;height:1px;background:currentColor;flex:none;opacity:.65;}
.sturing__hint::after{content:'';width:5px;height:5px;border-radius:50%;background:#4F8BFF;flex:none;}
.sturing.is-gebladerd .sturing__hint{opacity:0;transform:translateY(-4px);}
@media (prefers-reduced-motion:reduce){ .sturing__hint{transition:none;} }
/* De pijlen zijn de enige manier om door de vijf te bladeren, dus ze mogen
   gezien worden. Ruim boven de 44 pixels die een vinger nodig heeft, en de
   pijl vooruit staat vol zodat meteen duidelijk is welke kant het op gaat. */
.sturing__pijl{
  width:clamp(54px,5.6cqh,72px);height:clamp(54px,5.6cqh,72px);flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.42);border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;
  transition:background-color .22s var(--schakel),border-color .22s var(--schakel),
             color .22s var(--schakel),opacity .22s var(--schakel);
}
.sturing__pijl svg{width:38%;height:38%;display:block;}
.sturing__pijl[data-stap="1"]{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.62);}
.sturing__pijl:hover{background:#fff;border-color:#fff;color:var(--nacht);}
.sturing__pijl:focus-visible{outline:2px solid #fff;outline-offset:4px;}
.sturing__pijl[disabled]{opacity:.26;cursor:default;}
.sturing__pijl[disabled]:hover{background:transparent;border-color:rgba(255,255,255,.42);color:#fff;}
.sturing__pijl[disabled][data-stap="1"]:hover{background:rgba(255,255,255,.14);}

/* De teller voor de pijlen, zodat meteen te zien is dat er vijf zijn. */
.sturing__teller{
  font-size:var(--xs);font-weight:600;letter-spacing:.18em;color:var(--op-nacht-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;margin-right:4px;
}
.sturing__teller b{color:#fff;font-weight:600;}

/* De wijzer: vijf streepjes, waarvan er een oplicht. Ze zijn ook knoppen, dus
   je kunt er rechtstreeks een kiezen. */
.wijzer{display:flex;gap:9px;align-items:center;}
.wijzer__streep{border:0;padding:12px 0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;}
.wijzer__streep:focus-visible{outline:2px solid #fff;outline-offset:4px;}
.wijzer__streep > i{
  --hoek:calc((var(--i) - var(--stand) * 5) * var(--spreiding));
  --nabij:clamp(0, cos(var(--hoek)), 1);
  --aan:clamp(0, calc(pow(var(--nabij),8) * 1.7 - .62), 1);
  display:block;width:30px;height:2px;transform-origin:left center;
  transform:scaleX(calc(1 + var(--aan) * .95));
  background:color-mix(in oklab, var(--wit) calc(13% + var(--aan) * 74%), transparent);
  transition:background-color .3s var(--schakel);
}
.wijzer__streep:hover > i{background:#fff;}

/* ---------- 33.3 · Kleiner scherm ----------------------------------------- */

@media (max-width:900px){
  .sturing{--straal:1250px;--spreiding:32deg;}
  /* Onderin, boven de belbalk, met de tekst er netjes boven. */
  .sturing__bediening{bottom:calc(2cqh + 56px);gap:14px;}
  /* Het cijfer zakt en krimpt iets, zodat het niet tegen de vaste balk
     bovenin aan loopt terwijl je door de sectie scrolt. */
  .halte__monument{
    right:auto;left:8cqw;bottom:auto;top:14cqh;
    font-size:min(17cqh, 36cqw, 240px);
    --draai:calc(var(--hoek) - 19deg);
    --sp:calc(.012em + .044em * pow(var(--nabij),4));
  }
  /* Beide tekstblokken hangen aan hetzelfde punt als de bediening: de vaste
     belbalk van 56, de knoppen en de regel erboven samen 150, en een kier.
     In cqh rekenen ging mis, want de bediening is deels vast in pixels en
     schaalt dus niet mee. Op een telefoon met de adresbalk in beeld is het
     doek maar 620 hoog en liep de tekst er dan overheen. Het openingsblok
     stond bovendien in het midden en heeft die centrering hier niet nodig. */
  .halte__blok,.halte__blok--opening{
    left:8cqw;right:8cqw;width:auto;
    top:auto;bottom:calc(2cqh + 56px + 150px);
    transform:translateX(calc(var(--uitwijk) * .1));
  }
  .halte__kop{font-size:min(9.6cqh,10.4cqw,52px);}
  .halte__titel{font-size:min(7.4cqh,10cqw,44px);}
  .halte__tekst{font-size:min(2.9cqh,16px);}
  .halte__lead{font-size:min(3cqh,17px);}
}

/* ---------- 33.4 · Rust ---------------------------------------------------
   Alles plat, alles leesbaar, niets beweegt en niets kleeft.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .sturing__spoor{height:auto;}
  .sturing__doek{position:static;height:auto;overflow:visible;
    container-type:normal;padding:var(--sec) var(--gut);}
  .sturing__lucht,.sturing__bediening,.halte__grond{display:none;}
  .sturing__tafereel{position:static;display:block;max-width:820px;margin:0 auto;}
  .halte{position:static;inset:auto;transform:none;display:block;margin:0 0 56px;}
  .halte__blok,.halte__blok--opening{position:static;transform:none;opacity:1;
    width:auto;max-width:62ch;left:auto;right:auto;bottom:auto;top:auto;}
  .halte__monument{position:static;transform:none;font-size:clamp(54px,9vw,92px);
    margin:0 0 .12em;line-height:.9;}
  .laag{display:none;}
  .laag--kop{display:block;position:static;transform:none;
    -webkit-text-stroke-width:1.5px;-webkit-text-stroke-color:var(--op-nacht-3);
    color:var(--nacht);}
  .halte__kop{font-size:clamp(30px,5vw,54px);}
  .halte__titel{font-size:clamp(26px,3.6vw,40px);}
  .halte__tekst{font-size:17px;max-width:62ch;}
  .halte__lead{font-size:19px;}
  .halte--opening{margin-bottom:72px;}
}

/* ==========================================================================
   34 · De opstelling
   --------------------------------------------------------------------------
   Op de portfoliopagina staat elk project als productfoto: een laptop links,
   een tablet rechts erachter en een telefoon ervoor, op een vloer met een
   wand in de kleur van het merk. De drie schermafbeeldingen zijn er meteen,
   er wordt niets ingeladen of opgebouwd terwijl je kijkt.

   Ga je met de muis over een toestel, dan komt dat toestel naar voren en
   wijken de andere twee een stap terug. Zo kun je elk scherm afzonderlijk
   bekijken zonder dat er iets hoeft te klikken.

   De hele opstelling is een container: alles erbinnen staat in cqw, zodat
   het tafereel klopt van 320 pixels breed tot een volle kolom. De kleur komt
   uit --merkkleur op het artikel en wordt met color-mix naar de navy gemengd,
   zodat elke merkkleur, warm of koud, licht of donker, een wand oplevert die
   bij de site past.
   ========================================================================== */

.opstelling{
  container-type:inline-size;
  position:relative;display:block;width:100%;aspect-ratio:10 / 7;
  isolation:isolate;color:inherit;text-decoration:none;outline:none;

  /* De wand, de vloer en het licht komen allemaal uit de merkkleur. Die wordt
     eerst naar de navy toe gehaald en pas daarna weer opgelicht. Zo wordt een
     felle kleur niet snoepachtig als er licht op valt: rood blijft dan een
     diep steenrood in plaats van roze. */
  --merk-diep: color-mix(in oklab, var(--merkkleur, #2563EB) 62%, #0B1C3D);
  --wand:      color-mix(in oklab, var(--merk-diep) 76%, #0B1C3D);
  --wand-diep: color-mix(in oklab, var(--merk-diep) 26%, #05101F);
  --spot:      color-mix(in oklab, var(--merk-diep) 58%, #CFDCF2);
  --gloed:     color-mix(in oklab, var(--merk-diep) 84%, #0B1C3D);
  --vloer-top: color-mix(in oklab, var(--merk-diep) 58%, #2B4876);
  --vloer:     color-mix(in oklab, var(--merk-diep) 40%, #17305A);
  --vloer-diep:color-mix(in oklab, var(--merk-diep) 20%, #0A1830);
  --glans:     color-mix(in oklab, var(--merk-diep) 58%, #4A6C9E);
  --horizon:   color-mix(in oklab, var(--merk-diep) 46%, rgba(255,255,255,.5));
  --donker:rgba(2,6,16,1);
  /* De was over de foto. Zo blijft de sfeer van de klant zichtbaar zonder dat
     het beeld met de pagina gaat vechten. */
  --was: color-mix(in oklab, var(--wand) 34%, transparent);

  /* aluminium, dezelfde tinten als de laptop in de hero */
  --alu-top:#F4F8FF; --alu-mid:#DCE6F8; --alu-laag:#B6C7E6; --alu-diep:#9FB4D6;
}

/* ---------- 34.1 · De wand, de vloer en het licht -------------------------- */

.opstelling__doek{
  position:absolute;inset:-9cqw -7cqw;z-index:0;overflow:hidden;
  /* Geen rand en geen hoeken. Het doek is groter dan het tafereel en dooft naar
     buiten toe uit, zodat de kleur in de pagina overloopt in plaats van er als
     kaart op te liggen. Met farthest-side raakt de nul precies de buitenrand,
     dus er blijft nergens een zichtbare naad staan. */
  -webkit-mask-image:radial-gradient(farthest-side at 50% 48%, #000 0 56%,
    rgba(0,0,0,.88) 74%, rgba(0,0,0,.4) 90%, transparent 100%);
  mask-image:radial-gradient(farthest-side at 50% 48%, #000 0 56%,
    rgba(0,0,0,.88) 74%, rgba(0,0,0,.4) 90%, transparent 100%);
  background:
    /* een spoor korrel, anders gaan de verlopen banden vormen */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E") 0 0 / 20cqw 20cqw,
    linear-gradient(180deg, transparent 0 61%, color-mix(in oklab, var(--vloer-top) 88%, transparent) 61%, var(--vloer) 79%, var(--vloer-diep) 100%),
    radial-gradient(128% 100% at 50% 44%, transparent 44%, var(--wand-diep) 100%),
    radial-gradient(60% 62% at 40% -4%, color-mix(in oklab, var(--spot) 62%, transparent) 0%,
      color-mix(in oklab, var(--spot) 34%, transparent) 28%,
      color-mix(in oklab, var(--gloed) 40%, transparent) 56%, transparent 78%),
    linear-gradient(var(--was), var(--was)),
    var(--sfeer, none) 50% 40% / cover no-repeat,
    var(--wand);
}
/* de naad waar de wand op de vloer staat */
.opstelling__doek::before{
  content:'';position:absolute;left:0;right:0;top:61%;height:.14cqw;
  background:linear-gradient(90deg, transparent, var(--horizon) 20% 80%, transparent);
  opacity:.5;
}
/* het licht dat op de vloer terugkaatst */
.opstelling__doek::after{
  content:'';position:absolute;left:0;right:0;top:61%;bottom:0;
  background:radial-gradient(62% 118% at 44% 0%, var(--glans) 0%,
    color-mix(in oklab, var(--glans) 48%, transparent) 30%, transparent 70%);
  opacity:.78;
}

/* ---------- 34.2 · De toestellen, wat ze delen ----------------------------- */

.toestel{
  position:absolute;display:block;transform-origin:50% 100%;
  transition:transform .55s var(--uit), filter .55s var(--uit), z-index 0s linear .4s;
}
.toestel__beeld{display:block;width:100%;height:auto;object-fit:cover;object-position:top;background:#0A0B0F;}

/* De contactschaduw houdt het toestel op de vloer. */
.toestel__schaduw{
  position:absolute;left:-7%;right:-7%;bottom:-1.9cqw;height:3.8cqw;
  border-radius:50%;z-index:0;transform-origin:50% 50%;filter:blur(.62cqw);
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in oklab, var(--donker) 90%, transparent) 0%,
    color-mix(in oklab, var(--donker) 60%, transparent) 38%,
    color-mix(in oklab, var(--donker) 20%, transparent) 62%, transparent 78%);
  transition:transform .55s var(--uit), filter .55s var(--uit);
}

/* Een behuizing met een dun metalen randje, voor tablet en telefoon. */
.toestel__body{
  display:block;position:relative;z-index:1;overflow:hidden;border:.17cqw solid transparent;
  background:linear-gradient(#0C0D11,#0C0D11) padding-box,
    linear-gradient(165deg,#D3DAE6 0%,#7C8590 38%,#4E555F 62%,#AEB6C2 100%) border-box;
  box-shadow:inset 0 0 0 .13cqw rgba(255,255,255,.05), 0 .2cqw .6cqw rgba(0,0,0,.35);
}
.toestel__body::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.022) 30%, transparent 48%);
}

/* ---------- 34.3 · De laptop ----------------------------------------------
   Het deksel is een dunne aluminium plaat met zwart glas erin. Het dek eronder
   is een echt gekanteld vlak: 24cqw diep, bijna plat gelegd, zodat er van
   bovenaf een smalle wig overblijft in plaats van een blok.
   ------------------------------------------------------------------------- */

.toestel--laptop{left:4cqw;top:12.6cqw;width:60cqw;z-index:2;}
.toestel__deksel{
  display:block;position:relative;z-index:2;padding:.28cqw;
  border-radius:1.5cqw 1.5cqw .7cqw .7cqw;
  background:linear-gradient(180deg, var(--alu-top) 0%, var(--alu-mid) 45%, var(--alu-laag) 100%);
  box-shadow:inset 0 .06cqw 0 #fff, 0 .12cqw .35cqw rgba(0,0,0,.28);
}
.toestel__glas{
  display:block;position:relative;overflow:hidden;padding:.55cqw .55cqw 1.05cqw;
  border-radius:1.25cqw 1.25cqw .45cqw .45cqw;background:#0A0B0F;
}
.toestel__glas::before{
  content:'';position:absolute;z-index:1;top:0;left:50%;width:5.4cqw;height:1.02cqw;
  border-radius:0 0 .45cqw .45cqw;background:#0A0B0F;transform:translateX(-50%);
}
.toestel__glas::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,.018) 34%, transparent 52%);
}
.toestel--laptop .toestel__beeld{aspect-ratio:16 / 10;border-radius:.55cqw .55cqw .15cqw .15cqw;}

.toestel__dek{
  display:block;position:relative;z-index:1;height:6.1cqw;
  perspective:300cqw;perspective-origin:50% 0;
  background:linear-gradient(180deg,#1B222D,#2A323F) no-repeat 50% 0 / 94% .38cqw;
}
.toestel__dek::before{
  content:'';position:absolute;left:0;top:0;width:100%;height:24cqw;
  transform-origin:50% 0;transform:rotateX(78deg);border-radius:0 0 1.4cqw 1.4cqw;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--alu-mid) 60%, #fff), var(--alu-mid)) no-repeat 50% 95% / 32% 36%,
    repeating-linear-gradient(90deg, transparent 0 3.1cqw, rgba(255,255,255,.13) 3.1cqw 3.26cqw) no-repeat 50% 8% / 78% 46%,
    linear-gradient(180deg,#3A414C,#2E343E) no-repeat 50% 8% / 78% 46%,
    linear-gradient(180deg, color-mix(in oklab, var(--alu-laag) 86%, #8FA4C4) 0%, var(--alu-mid) 30%, var(--alu-top) 74%, var(--alu-laag) 100%);
  box-shadow:inset 0 .6cqw 1cqw -.3cqw rgba(10,20,40,.5);
}
/* de voorrand van het dek, rechtop, die geeft de wig zijn dikte */
.toestel__dek::after{
  content:'';position:absolute;left:0;top:0;width:100%;height:.6cqw;
  transform-origin:50% 0;transform:rotateX(78deg) translateY(24cqw) rotateX(-78deg);
  border-radius:0 0 .5cqw .5cqw;
  background:linear-gradient(180deg, color-mix(in oklab, var(--alu-laag) 80%, #7E93B5) 0%,
    var(--alu-diep) 45%, color-mix(in oklab, var(--alu-diep) 48%, #0B1C3D) 100%);
  box-shadow:0 .1cqw .2cqw rgba(0,0,0,.34);
}
.toestel--laptop .toestel__schaduw{left:-8%;right:-8%;height:4.6cqw;bottom:-2.3cqw;}

/* ---------- 34.4 · De tablet en de telefoon -------------------------------- */

.toestel--tablet{left:62cqw;top:9cqw;width:32cqw;z-index:1;}
.toestel--tablet .toestel__body{padding:1.1cqw;border-radius:2.4cqw;}
.toestel--tablet .toestel__beeld{aspect-ratio:680 / 979;border-radius:1cqw;}
.toestel--tablet .toestel__schaduw{left:-9%;right:-9%;height:3cqw;bottom:-1.5cqw;}

.toestel--telefoon{left:55cqw;top:25.2cqw;width:15.5cqw;z-index:3;}
.toestel--telefoon .toestel__body{
  padding:.5cqw;border-radius:2.4cqw;border-width:.16cqw;
  background:linear-gradient(#050608,#050608) padding-box,
    linear-gradient(165deg,#9AA2AE 0%,#4A5058 35%,#2A2F36 62%,#7E8792 100%) border-box;
}
.toestel--telefoon .toestel__beeld{aspect-ratio:640 / 1385;border-radius:1.9cqw;}
.toestel--telefoon .toestel__body::before{
  content:'';position:absolute;z-index:1;top:1.1cqw;left:50%;width:3.6cqw;height:1.05cqw;
  border-radius:1cqw;background:#050608;transform:translateX(-50%);
}
.toestel--telefoon .toestel__schaduw{left:-15%;right:-15%;height:2.5cqw;bottom:-1.25cqw;filter:blur(.5cqw);}

/* ---------- 34.5 · Naar voren halen ---------------------------------------
   Het toestel waar je op staat groeit een fractie, komt omhoog en gaat boven
   de andere twee liggen. Die wijken tegelijk een stap terug en verliezen wat
   licht, zodat het oog vanzelf bij het gekozen scherm blijft.
   ------------------------------------------------------------------------- */

.toestel:hover,
.opstelling:focus-visible .toestel--laptop{
  z-index:10;transform:translateY(-1.2cqw) scale(1.055);
  transition:transform .55s var(--uit), filter .55s var(--uit), z-index 0s;
}
.toestel--telefoon:hover{transform:translateY(-1.5cqw) scale(1.08);}
.toestel:hover .toestel__schaduw,
.opstelling:focus-visible .toestel--laptop .toestel__schaduw{
  transform:translateY(1.15cqw) scale(1.12,1.25);filter:blur(1cqw);
}
.toestel--telefoon:hover .toestel__schaduw{transform:translateY(1.4cqw) scale(1.15,1.3);filter:blur(.78cqw);}

.opstelling:has(.toestel:hover) .toestel:not(:hover),
.opstelling:focus-visible .toestel:not(.toestel--laptop){
  transform:scale(.972);filter:brightness(.88) saturate(.94);
}
.opstelling:focus-visible{
  outline:2px solid color-mix(in oklab, var(--merkkleur, #2563EB) 50%, #fff);
  outline-offset:6px;border-radius:10px;
}

/* ---------- 34.6 · Kleiner scherm ------------------------------------------
   Op een telefoon staat de opstelling onder de tekst en is hij smaller, dus
   krijgt het tafereel iets meer hoogte. Verder blijft alles gelijk: de maten
   staan in cqw en schalen vanzelf mee.
   ------------------------------------------------------------------------- */

@media (max-width:900px){
  .opstelling{aspect-ratio:10 / 7.4;}
  .opstelling__doek{inset:-11cqw -8cqw;}
}

/* ---------- 34.7 · Rust ----------------------------------------------------
   Wie beweging heeft uitgezet krijgt de opstelling stil: het toestel komt nog
   wel bovenop te liggen, maar er wordt niets meer geschoven of geschaald.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .toestel,.toestel__schaduw{transition:none;}
  .toestel:hover,
  .opstelling:focus-visible .toestel--laptop{transform:none;}
  .toestel--telefoon:hover{transform:none;}
  .toestel:hover .toestel__schaduw,
  .opstelling:focus-visible .toestel--laptop .toestel__schaduw{transform:none;filter:blur(.62cqw);}
  .opstelling:has(.toestel:hover) .toestel:not(:hover),
  .opstelling:focus-visible .toestel:not(.toestel--laptop){transform:none;}
}

/* ---------- 34.8 · De sfeer van de klant -----------------------------------
   Achter de toestellen staat geen tekening maar een stuk uit de site van de
   klant zelf: de tuin bij de hovenier, het schap bij de modelbouwwinkel, het
   licht bij de feestverhuur. Zwaar onscherp en naar de navy toe getrokken, dus
   het leest als de ruimte waarin de toestellen staan en niet als een plaatje.
   Elk bestand is honderdtien pixels breed en weegt een halve kilobyte.
   ------------------------------------------------------------------------- */

.opstelling--flier{--sfeer:url(/portfolio-flier-sfeer.webp);}
.opstelling--dejong{--sfeer:url(/portfolio-dejong-sfeer.webp);}
.opstelling--amila{--sfeer:url(/portfolio-amila-sfeer.webp);}
.opstelling--peperkamp{--sfeer:url(/portfolio-peperkamp-sfeer.webp);}
.opstelling--vedie{--sfeer:url(/portfolio-vedie-sfeer.webp);}
.opstelling--thuisfeest{--sfeer:url(/portfolio-thuisfeest-sfeer.webp);}
.opstelling--relevantvisuals{--sfeer:url(/portfolio-relevantvisuals-sfeer.webp);}
.opstelling--gpstrac{--sfeer:url(/portfolio-gpstrac-sfeer.webp);}

/* ==========================================================================
   35 · De blog
   De blog draaide nog op het oude blauw-op-wit met losse stockfoto's. Hij
   gebruikt nu dezelfde vlakken, letters en haarlijnen als de rest van de site.
   Twee delen: de overzichtspagina met de carrousel, en de artikelen zelf.
   De foto's zijn algemeen inkoopbeeld. Ze gaan daarom allemaal door dezelfde
   duotoon, zodat ze als één set lezen in plaats van als losse voorraadplaatjes.
   ========================================================================== */

/* ---------- 35.1 · De duotoon --------------------------------------------- */

.duo{position:relative;overflow:hidden;background:var(--nacht);display:block;}
.duo img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.94);
  transition:transform .8s var(--uit),filter .5s var(--schakel);}
.duo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(196deg,var(--blauw) 0%,var(--nacht) 72%);
  mix-blend-mode:color;opacity:.9;
  transition:opacity .5s var(--schakel);
}
.duo::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 42%,rgba(11,28,61,.42) 100%);
}
a:hover .duo img,a:focus-visible .duo img{transform:scale(1.045);}
a:hover .duo::after{opacity:.72;}

/* ---------- 35.2 · De kaart ------------------------------------------------
   Eén kaart voor de carrousel, voor de verwante artikelen onder een post en
   voor alles wat later nog een lijst met artikelen wil tonen.
   ------------------------------------------------------------------------- */

.kaart,.blog-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--wit);border:1px solid var(--lijn);border-radius:0;
  color:var(--tekst);text-decoration:none;overflow:hidden;
  transition:border-color .35s var(--schakel),transform .5s var(--uit);
}
.kaart:hover,.blog-card:hover,
.kaart:focus-visible,.blog-card:focus-visible{border-color:var(--nacht);transform:translateY(-4px);}
.kaart:focus-visible,.blog-card:focus-visible{outline:2px solid var(--blauw);outline-offset:4px;}

.kaart__beeld,.blog-card-image{
  position:relative;overflow:hidden;background:var(--nacht);
  aspect-ratio:16 / 10;flex:none;display:block;border-radius:0;
}
.kaart__beeld img,.blog-card-image img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.94);
  transition:transform .8s var(--uit);
}
.kaart__beeld::after,.blog-card-image::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(196deg,var(--blauw) 0%,var(--nacht) 72%);
  mix-blend-mode:color;opacity:.9;transition:opacity .5s var(--schakel);
}
.kaart:hover .kaart__beeld img,.blog-card:hover .blog-card-image img{transform:scale(1.05);}
.kaart:hover .kaart__beeld::after,.blog-card:hover .blog-card-image::after{opacity:.7;}

/* Het onderwerp staat als label op het beeld, op de haarlijn van de kaart. */
.kaart__cat,.blog-card-cat,.blog-card-badge{
  position:absolute;left:0;bottom:0;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  height:30px;padding-inline:14px;background:var(--nacht);color:#fff;
  font-size:var(--label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border-radius:0;border:0;
}
.kaart__cat::before,.blog-card-cat::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--blauw);flex:none;}
.blog-card-dot{display:none;}

.kaart__in,.blog-card-body{
  display:flex;flex-direction:column;gap:12px;flex:1 1 auto;
  padding:clamp(20px,2vw,28px);
}
.kaart__t,.blog-card-title{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(1.15rem,1.55vw,1.4rem);line-height:1.12;letter-spacing:-.022em;
  color:var(--tekst);text-wrap:balance;
}
.kaart__x,.blog-card-excerpt{
  font-size:var(--sm);line-height:1.62;color:var(--tekst-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.kaart__voet,.blog-card-foot{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--lijn);
  display:flex;align-items:center;gap:10px;
  font-size:var(--xs);color:var(--tekst-3);font-variant-numeric:tabular-nums;
}
.kaart__voet .punt,.blog-card-foot .punt{width:3px;height:3px;border-radius:50%;
  background:var(--lijn-2);flex:none;}
.kaart__pijl,.blog-card-arrow{
  margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--blauw);flex:none;
  transition:transform .35s var(--uit);
}
.kaart:hover .kaart__pijl,.blog-card:hover .blog-card-arrow{transform:translateX(5px);}
.blog-card-arrow svg{display:none;}

/* ---------- 35.3 · Zoeken en filteren -------------------------------------- */

.zoek{position:relative;display:flex;align-items:center;max-width:520px;
  border-bottom:1px solid var(--lijn-2);transition:border-color .3s var(--schakel);}
.zoek:focus-within{border-color:var(--nacht);}
.zoek svg{flex:none;color:var(--tekst-3);}
.zoek input{
  flex:1 1 auto;min-width:0;height:54px;padding:0 12px;border:0;background:transparent;
  font:inherit;font-size:var(--body);color:var(--tekst);
}
.zoek input::placeholder{color:var(--tekst-3);}
.zoek input:focus{outline:none;}
.zoek button{
  flex:none;width:32px;height:32px;border:0;background:transparent;cursor:pointer;
  color:var(--tekst-3);font-size:1.3rem;line-height:1;
}
.zoek button:hover{color:var(--tekst);}

.filters{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;}
.filter{
  border:0;background:transparent;cursor:pointer;padding:6px 0;
  font:inherit;font-size:var(--label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tekst-3);border-bottom:1px solid transparent;
  display:inline-flex;align-items:center;gap:8px;
  transition:color .3s var(--schakel),border-color .3s var(--schakel);
}
.filter:hover{color:var(--tekst);}
.filter span{font-size:.9em;opacity:.6;font-variant-numeric:tabular-nums;letter-spacing:.06em;}
.filter.is-aan{color:var(--tekst);border-bottom-color:var(--blauw);}
.sec--nacht .filter{color:var(--op-nacht-3);}
.sec--nacht .filter:hover{color:#fff;}
.sec--nacht .filter.is-aan{color:#fff;border-bottom-color:#fff;}

/* ---------- 35.4 · De carrousel --------------------------------------------
   Drie artikelen in beeld, en verder terug in de tijd door naar rechts te
   schuiven. Het spoor bevat alle artikelen, dus elke link blijft vindbaar
   voor een zoekmachine en voor het toetsenbord.
   ------------------------------------------------------------------------- */

.carrousel{position:relative;}
.carrousel__kop{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--kier);
  flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px);
}
.carrousel__stuur{display:flex;align-items:center;gap:10px;flex:none;}
.carrousel__n{
  font-size:var(--label);font-weight:600;letter-spacing:.16em;color:var(--op-nacht-3);
  font-variant-numeric:tabular-nums;margin-right:8px;white-space:nowrap;
}
.carrousel__knop{
  width:52px;height:52px;flex:none;cursor:pointer;border-radius:0;
  background:transparent;border:1px solid var(--lijn-nacht);color:#fff;
  display:grid;place-items:center;
  transition:background-color .3s var(--schakel),border-color .3s var(--schakel),color .3s var(--schakel);
}
.carrousel__knop:hover:not(:disabled){background:#fff;border-color:#fff;color:var(--nacht);}
.carrousel__knop:disabled{opacity:.3;cursor:default;}
.carrousel__knop svg{width:18px;height:18px;}

/* Het spoor loopt tot de rechterrand van het scherm door, zodat de vierde
   kaart half in beeld staat en zichtbaar is dat er meer achter zit. */
.carrousel__spoor{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:var(--kier);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carrousel__spoor::-webkit-scrollbar{display:none;}
.carrousel__spoor > *{scroll-snap-align:start;}
@media (prefers-reduced-motion:reduce){ .carrousel__spoor{scroll-behavior:auto;} }

/* Drie in beeld, en een strook van de vierde. */
@media (min-width:1101px){ .carrousel__spoor{grid-auto-columns:calc((100% - 2 * var(--kier)) / 3);} }
@media (max-width:1100px) and (min-width:721px){ .carrousel__spoor{grid-auto-columns:calc((100% - var(--kier)) / 2);} }
@media (max-width:720px){
  /* Nieuwste eerst nam een hele regel in voor drie woorden die de volgorde
     herhalen die je toch al ziet. Weg dus; de teller past dan naast de pijlen. */
  .carrousel__kop > .merk{display:none;}
  .carrousel__stuur{margin-left:auto;}
  /* Iets smaller, zodat de volgende kaart duidelijker meekijkt. */
  .carrousel__spoor{grid-auto-columns:78%;}
}

/* De voortgangslijn onder het spoor: dezelfde haarlijn als overal. */
.carrousel__baan{position:relative;height:1px;margin-top:clamp(22px,2.6vw,34px);
  background:var(--lijn-nacht);overflow:hidden;}
.carrousel__baan i{position:absolute;left:0;top:0;height:100%;width:20%;
  background:var(--blauw);transform-origin:0 50%;transition:transform .2s linear,width .2s linear;}

.leeg{padding-block:clamp(40px,6vw,80px);font-size:var(--lead);color:var(--op-nacht-2);}
.leeg button{border:0;background:transparent;padding:0;font:inherit;color:#fff;cursor:pointer;
  border-bottom:1px solid currentColor;}

/* ==========================================================================
   35.6 · Het artikel
   De artikelpagina's dragen nog de oude klassenamen. Ze krijgen hier de
   vormtaal van de site, zodat de 81 bestanden zelf niet open hoeven.
   ========================================================================== */

.section{padding-block:var(--sec);position:relative;}

.post-hero{padding-block:clamp(120px,12vw,176px) clamp(28px,3.4vw,48px);background:var(--wit);}
.post-hero > .container{display:grid;gap:clamp(16px,1.8vw,24px);}

.post-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:var(--xs);color:var(--tekst-3);}
.post-breadcrumb a{color:var(--tekst-3);text-decoration:none;transition:color .3s var(--schakel);}
.post-breadcrumb a:hover{color:var(--tekst);}
.post-breadcrumb .sep{opacity:.5;}

.post-category{
  display:inline-flex;align-items:center;gap:12px;width:fit-content;
  font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);background:transparent;padding:0;border-radius:0;
}
.post-category::before{content:'';width:26px;height:1px;background:currentColor;flex:none;opacity:.65;}
.post-category::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--blauw);flex:none;}

.post-title{
  font-family:var(--display);font-weight:800;font-stretch:106%;
  font-size:var(--d2);line-height:.98;letter-spacing:-.03em;color:var(--tekst);
  text-wrap:balance;max-width:22ch;
}

.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding-top:clamp(14px,1.8vw,22px);border-top:1px solid var(--lijn);
  font-size:var(--xs);color:var(--tekst-3);font-variant-numeric:tabular-nums;
}
.post-meta > span:not(.post-meta-author),.post-meta time{color:var(--tekst-3);}
.post-meta-author{display:inline-flex;align-items:center;gap:10px;color:var(--tekst);font-weight:600;}
.post-meta-avatar{
  width:26px;height:26px;border-radius:50%;background:var(--nacht);color:#fff;
  display:grid;place-items:center;font-size:.6875rem;font-weight:700;letter-spacing:0;flex:none;
}

/* Het beeld loopt tot beide randen door, als vlak onder de kop. */
.post-hero-image{
  margin:0;position:relative;overflow:hidden;background:var(--nacht);
  aspect-ratio:2.6 / 1;
}
.post-hero-image img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.94);}
.post-hero-image::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(196deg,var(--blauw) 0%,var(--nacht) 72%);
  mix-blend-mode:color;opacity:.9;
}

.post-body{padding-block:clamp(48px,6vw,96px);background:var(--wit);}
.post-body > .container{display:grid;gap:clamp(28px,3.4vw,48px);}

/* De samenvatting en de inhoudsopgave staan naast de lopende tekst in dezelfde
   kolom, maar krijgen een blauwe kantlijn zodat ze te overslaan zijn. */
.post-tldr{
  max-width:74ch;padding:clamp(20px,2.2vw,28px);border-radius:0;
  background:var(--doek);border-left:2px solid var(--blauw);
}
.post-tldr h4{
  font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);margin-bottom:10px;
}
.post-tldr p{font-size:var(--body);line-height:1.68;color:var(--tekst-2);margin:0;}

.post-toc{max-width:74ch;border:1px solid var(--lijn);border-radius:0;background:var(--wit);}
.post-toc summary{
  display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding:clamp(14px,1.6vw,20px);
  font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tekst);
}
.post-toc summary::-webkit-details-marker{display:none;}
.post-toc summary svg{color:var(--tekst-3);flex:none;}
.post-toc[open] summary{border-bottom:1px solid var(--lijn);}
.post-toc-list{
  list-style:none;counter-reset:toc;margin:0;
  padding:clamp(12px,1.4vw,18px) clamp(14px,1.6vw,20px);display:grid;gap:9px;
}
.post-toc-list li{counter-increment:toc;}
.post-toc-list a{
  display:inline-flex;gap:12px;align-items:baseline;
  font-size:var(--sm);line-height:1.5;color:var(--tekst-2);text-decoration:none;
  transition:color .3s var(--schakel);
}
.post-toc-list a::before{
  content:counter(toc,decimal-leading-zero);flex:none;
  font-size:var(--label);font-weight:600;letter-spacing:.1em;color:var(--tekst-3);
  font-variant-numeric:tabular-nums;
}
.post-toc-list a:hover{color:var(--tekst);}

/* ---------- 35.7 · De lopende tekst ---------------------------------------- */

.post-content{max-width:68ch;font-size:var(--lead);line-height:1.72;color:var(--tekst-2);}
.post-content > * + *{margin-top:1.15em;}
.post-content h2{
  font-family:var(--display);font-weight:800;font-stretch:106%;
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.04;letter-spacing:-.028em;
  color:var(--tekst);margin-top:1.9em;text-wrap:balance;
  padding-top:.7em;border-top:1px solid var(--lijn);
}
.post-content h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.post-content h3{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.12;letter-spacing:-.022em;
  color:var(--tekst);margin-top:1.6em;
}
.post-content h4{font-size:var(--h4);font-weight:600;color:var(--tekst);margin-top:1.5em;}
.post-content p{margin-inline:0;}
.post-content strong,.post-content b{color:var(--tekst);font-weight:600;}
.post-content a{
  color:var(--tekst);text-decoration:none;
  border-bottom:1px solid var(--blauw);
  transition:background-color .3s var(--schakel),color .3s var(--schakel);
}
.post-content a:hover{background:var(--blauw);color:#fff;border-color:var(--blauw);}
.post-content ul,.post-content ol{padding-left:0;list-style:none;display:grid;gap:.6em;}
.post-content li{position:relative;padding-left:26px;}
.post-content ul > li::before{
  content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--blauw);
}
.post-content ol{counter-reset:stap;}
.post-content ol > li{counter-increment:stap;}
.post-content ol > li::before{
  content:counter(stap,decimal-leading-zero);position:absolute;left:0;top:.16em;
  font-size:var(--label);font-weight:600;letter-spacing:.08em;color:var(--tekst-3);
  font-variant-numeric:tabular-nums;
}
.post-content blockquote{
  margin-block:1.7em;padding:0 0 0 clamp(20px,2.4vw,32px);border-left:2px solid var(--blauw);
}
.post-content blockquote p{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.22;letter-spacing:-.022em;color:var(--tekst);
}
.post-content img{display:block;width:100%;height:auto;margin-block:1.7em;border-radius:0;}
.post-content hr{border:0;border-top:1px solid var(--lijn);margin-block:2.2em;}
.post-content table{width:100%;border-collapse:collapse;font-size:var(--sm);margin-block:1.7em;}
.post-content th,.post-content td{padding:14px 16px;border-bottom:1px solid var(--lijn);text-align:left;}
.post-content th{font-size:var(--label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tekst-3);border-bottom-color:var(--lijn-2);}
.post-content code{font-size:.9em;background:var(--doek);padding:2px 6px;}

/* Het kader midden in een artikel: een tip of een waarschuwing. */
.post-callout{
  margin-block:1.9em;padding:clamp(20px,2.2vw,30px);
  background:var(--nacht);color:var(--op-nacht-2);border-radius:0;
}
.post-callout h4{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:var(--d3);line-height:1.1;letter-spacing:-.022em;color:#fff;margin:0 0 10px;
}
.post-callout p{font-size:var(--body);line-height:1.68;color:var(--op-nacht-2);margin:0;}
.post-callout a{color:#fff;border-bottom-color:rgba(255,255,255,.5);}
.post-callout a:hover{background:#fff;color:var(--nacht);}

/* ---------- 35.8 · Onder het artikel --------------------------------------- */

.post-share{
  max-width:68ch;display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--lijn);
}
.post-share-label{font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);}
.post-share-links{display:flex;gap:8px;}
.post-share-btn{
  width:44px;height:44px;display:grid;place-items:center;border-radius:0;
  border:1px solid var(--lijn);background:transparent;color:var(--tekst-2);cursor:pointer;
  transition:background-color .3s var(--schakel),border-color .3s var(--schakel),color .3s var(--schakel);
}
.post-share-btn:hover{background:var(--nacht);border-color:var(--nacht);color:#fff;}

.post-author-box{
  max-width:68ch;display:flex;gap:clamp(18px,2vw,26px);align-items:flex-start;
  padding:clamp(22px,2.4vw,32px);background:var(--doek);border-radius:0;
}
.post-author-box img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;}
.post-author-box h3,.post-author-box h4{
  font-family:var(--display);font-weight:700;font-stretch:104%;font-size:var(--d3);
  line-height:1.1;letter-spacing:-.022em;color:var(--tekst);margin-bottom:8px;
}
.post-author-box p{font-size:var(--sm);line-height:1.66;color:var(--tekst-2);margin:0;}

.post-services{
  max-width:68ch;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--lijn);
}
.post-services-label{font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tekst-3);width:100%;}
.post-services a{
  font-size:var(--sm);font-weight:600;color:var(--tekst);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid var(--lijn-2);
  transition:border-color .3s var(--schakel);
}
.post-services a:hover{border-color:var(--nacht);}

.post-nav{
  display:grid;gap:0;border-top:1px solid var(--lijn);
}
@media (min-width:820px){ .post-nav{grid-template-columns:1fr 1fr;} }
.post-nav-link{
  display:grid;gap:8px;padding:clamp(22px,2.6vw,34px) 0;text-decoration:none;color:var(--tekst);
  border-bottom:1px solid var(--lijn);
}
@media (min-width:820px){
  .post-nav-next{text-align:right;padding-left:var(--kier);border-left:1px solid var(--lijn);}
  .post-nav-prev{padding-right:var(--kier);}
}
.post-nav-label{
  font-size:var(--label);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tekst-3);
}
.post-nav-title{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.14;letter-spacing:-.02em;
  transition:color .3s var(--schakel);
}
.post-nav-link:hover .post-nav-title{color:var(--blauw);}

.post-related{padding-block:clamp(48px,6vw,96px);background:var(--doek);}
.post-related-title,.blog-section-title{
  font-family:var(--display);font-weight:800;font-stretch:106%;font-size:var(--d3);
  line-height:1.06;letter-spacing:-.024em;color:var(--tekst);margin-bottom:clamp(22px,2.6vw,36px);
}
.blog-section-sub{font-size:var(--sm);line-height:1.62;color:var(--tekst-2);max-width:60ch;
  margin-top:-.6em;margin-bottom:clamp(22px,2.6vw,36px);}
.post-related .blog-grid{
  display:grid;gap:var(--kier);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
}

.post-cta{
  max-width:68ch;background:var(--lucht);color:var(--op-lucht);border-radius:0;
  padding:clamp(26px,3vw,42px);
}
.post-cta h2,.post-cta h3{
  font-family:var(--display);font-weight:800;font-stretch:106%;font-size:var(--d3);
  line-height:1.06;letter-spacing:-.024em;color:#fff;text-wrap:balance;margin:0;}
.post-cta p{font-size:var(--body);line-height:1.66;color:var(--op-lucht-2);
  margin-top:clamp(10px,1.2vw,14px);}
.post-cta .btn,.post-cta .knop{margin-top:clamp(20px,2.4vw,30px);
  background:#fff;color:var(--lucht);border-color:#fff;}
.post-cta .btn:hover,.post-cta .knop:hover{background:var(--nacht);border-color:var(--nacht);color:#fff;}
.post-cta .btn svg{width:15px;height:15px;}

.post-services ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 20px;padding:0;margin:0;}

/* De oproepbalk onder de overzichtspagina gebruikt hetzelfde blauwe vlak. */
.blog-cta-banner{background:var(--lucht);color:var(--op-lucht);border-radius:0;border:0;
  padding:clamp(34px,4vw,60px);}
.blog-cta-banner h2,.blog-cta-banner h3{
  font-family:var(--display);font-weight:800;font-stretch:106%;font-size:var(--d3);
  line-height:1.06;letter-spacing:-.024em;color:#fff;}
.blog-cta-banner p{font-size:var(--sm);line-height:1.62;color:var(--op-lucht-2);margin-top:10px;}

/* ---------- 35.9 · Wat het oude systeem nog uitzette ------------------------
   De blog laadde blog.css en uw-pages.css niet meer. Deze regels blijven
   staan voor de klassen die in de 81 artikelen nog in de opmaak staan.
   ------------------------------------------------------------------------- */

.blog-hero-glow,.blog-card-dot,.blog-loadmore{display:none;}

/* Vanaf het brede scherm staat de inhoudsopgave in de kantlijn en loopt hij
   mee met de tekst, precies zoals elk ander label op de site links staat. */
@media (min-width:1120px){
  /* Alleen wanneer er ook echt een inhoudsopgave staat. De stads- en
     gidspagina's gebruiken dezelfde klassen zonder die opgave, en die houden
     hun enkele kolom. */
  .post-body > .container:has(> .post-toc){
    display:grid;grid-template-columns:clamp(200px,20vw,280px) minmax(0,1fr);
    column-gap:var(--kier);align-items:start;
  }
  .post-body > .container:has(> .post-toc) > *{grid-column:2;}
  /* Twee klassen in de aanhef, anders wint de regel hierboven. */
  .post-body > .container > .post-toc{
    grid-column:1;grid-row:1 / span 20;position:sticky;top:104px;align-self:start;
    border:0;border-left:1px solid var(--lijn);background:transparent;max-width:none;
  }
  .post-toc summary{padding:0 0 14px 20px;}
  .post-toc[open] summary{border-bottom:0;}
  .post-toc-list{padding:0 0 0 20px;}
}

/* Op de telefoon schuift de onderwerpenrij opzij in plaats van door te lopen
   over zes regels. De carrousel eronder blijft dan het eerste wat je ziet. */
@media (max-width:900px){
  /* Om en om links en rechts werkt alleen naast elkaar. Onder elkaar hoort het
     beeld altijd eerst, anders begint de ene dienst met een kop en de andere
     met een plaatje. */
  .werk__beeld{order:-1!important;}
}

@media (max-width:720px){
  .filters{
    flex-wrap:nowrap;overflow-x:auto;gap:22px;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  }
  .filters::-webkit-scrollbar{display:none;}
  .filter{white-space:nowrap;flex:none;}
}

@media (max-width:820px){
  .post-title{max-width:none;}
  .post-hero-image{aspect-ratio:16 / 10;}
  .carrousel__kop{align-items:flex-start;}
}

/* ==========================================================================
   36 · De telefoon
   Gemeten op 390 bij 844: geen enkele pagina scrolt zijwaarts, maar de labels
   stonden overal op elf pixels en een stuk of wat raakvlakken bleven onder de
   veertig. Dit blok zet dat recht, en alleen daar waar het nodig is.
   ========================================================================== */

@media (max-width:720px){
  /* Alle labels op de site hangen aan dit ene getal: de streepjes boven een
     sectie, de projectregels, de categorie op een kaart, de stapteller. Elf
     pixels in kapitalen met veel letterruimte leest op een telefoon slecht. */
  :root{ --label:.75rem; --xs:.875rem; }

  /* Een tekstlink met de punt erachter staat vaak alleen in een regel. Op een
     vinger van elf millimeter moet daar meer omheen zitten dan vier pixels. */
  .link{padding-block:11px 9px;}

  /* De voet is een lijst van twintig links onder elkaar. Ze stonden elf
     pixels uit elkaar en waren zelf negentien hoog; samen te krap om er een
     te raken zonder te missen. */
  .voet ul{gap:0;}
  .voet li a{display:inline-block;padding-block:11px;}

  /* De onderwerpen boven de blogcarrousel en de streepjes onder de sturing. */
  .filter{padding:12px 0;}
  .wijzer__streep{padding:16px 7px;}

  /* Het kleine bijschrift onder een bedrag stond op 9,6 pixels. */
  .inv__p small,.tarief__p small{font-size:.8125rem;}

  /* Het telwoord achter een onderwerp kromp mee met de knop zelf. */
  .filter span{font-size:1em;}
  .filter{min-width:44px;justify-content:center;}

  /* Het woordmerk in de balk en in de voet is ook een link naar de homepage. */
  .nav__merk,.voet__merk{padding-block:6px;}
  .voet__onder a{display:inline-block;padding-block:10px;}

  /* De tabbladen in de laptop blijven klein: dat is nagebootste browserrand,
     geen inhoud, en groter maken kost het scherm van de klant zijn hoogte. */
}

/* ==========================================================================
   37 · Werkgebied en branches
   De voet wees naar drie van de zeventien plaatsen en drie branches, alsof dat
   alles was. Die kolom is er nu uit en er staat een pagina waar het compleet
   op staat, zodat elke onderliggende pagina van hieruit bereikbaar is.
   ========================================================================== */

.plaatsen{
  margin-top:clamp(26px,3vw,40px);
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid var(--lijn-nacht);
}
.plaatsen a{
  flex:1 1 auto;min-width:clamp(140px,22%,220px);
  padding:clamp(16px,1.8vw,22px) 4px;
  border-bottom:1px solid var(--lijn-nacht);
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.1;letter-spacing:-.02em;
  color:var(--op-nacht-2);display:flex;align-items:center;gap:12px;
  transition:color .25s var(--schakel);
}
.plaatsen a::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--blauw);flex:none;transition:transform .3s var(--uit);}
.plaatsen a:hover{color:#fff;}
.plaatsen a:hover::before{transform:scale(1.6);}

.kaartjes{
  margin-top:clamp(26px,3vw,40px);
  display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn);
}
@media (min-width:820px){ .kaartjes{grid-template-columns:repeat(3,1fr);} }
.kaartje{
  background:var(--doek);padding:clamp(22px,2.4vw,32px);
  display:grid;gap:10px;align-content:start;color:var(--tekst);
  transition:background-color .3s var(--schakel);
}
.kaartje:hover{background:var(--wit);}
.kaartje__t{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:var(--d3);line-height:1.08;letter-spacing:-.022em;
}
.kaartje__d{font-size:var(--sm);line-height:1.62;color:var(--tekst-2);}


/* Het groter worden bij hoveren is versiering; wie minder beweging heeft
   aangezet houdt gewoon de kleurwissel. */
@media (prefers-reduced-motion:reduce){
  .tarief__cel:hover,.inv__cel:hover{transform:none;}
}