/* Dekker Mastering — huisstijl, klantgerichte pagina's.
   Eén bestand zodat kleur, typografie en ritme overal gelijk zijn. */

:root{
  --bg:#0d0e0f;
  --bg-alt:#131415;
  --surface:#1c1e22;
  --surface-2:#2b2e33;
  --text:#ffffff;
  --dim:#d8dbdf;
  --faint:#9ba0a8;
  --putty:#c9c4b3;
  --copper:#b8563a;
  --teal:#4f8f89;
  --radius:4px;
  --t:180ms ease-out;
  --maxw:820px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.65;
}

/* HIER STOND `-webkit-font-smoothing: antialiased`, EN DAT IS ERUIT.
   ---------------------------------------------------------------------
   Die regel zet Safari en Chrome op macOS en iOS over van subpixel- naar
   grijswaarden-antialiasing, en dat tekent letters DUNNER. Op Windows doet
   hij niets — vandaar dat de site daar zwaarder oogde dan op een iPad,
   terwijl het om precies dezelfde kleuren ging.

   Op een lichte achtergrond oogt die regel netter; daar komt zijn
   populariteit vandaan. Op een donkere doet hij het omgekeerde: witte
   letters op bijna-zwart verliezen massa, en dat leest als te weinig
   contrast. Gemeten is het contrast 13,9 op 1 — ruim AAA. Het probleem
   zat niet in de kleur maar in hoeveel inkt er stond.

   Zonder deze regel valt de browser terug op zijn eigen standaard, en dat
   is op Apple-apparaten subpixel-antialiasing. */

a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- header ---------- */
header{
  border-bottom:1px solid var(--surface-2);
  background:var(--bg-alt);
  position:sticky;top:0;z-index:20;
}
.nav{
  max-width:var(--maxw);margin:0 auto;padding:0 22px;
  display:flex;align-items:center;gap:26px;height:60px;
}
.brand{
  font-family:'Archivo',sans-serif;font-weight:800;
  letter-spacing:.14em;font-size:14.5px;color:var(--text);
  /* Nooit halverwege afbreken. Tussen 640 en 900 px stond er anders
     "DEKKER / MASTERING" onder elkaar in een balk van 60 pixels hoog. */
  white-space:nowrap;
}
.brand:hover{text-decoration:none}
.nav .spacer{flex:1}
.nav .link{
  color:var(--faint);font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  transition:color var(--t);
  /* Een menu-item breekt niet middenin. Zonder deze regel stond er tussen
     ongeveer 700 en 900 pixels "OVER / MIJ" onder elkaar, met "MIJN /
     ORDERS" ernaast — twee items van twee regels naast één van één, en dat
     leest als een fout. De ruimte ertussen mag krimpen, het woord niet. */
  white-space:nowrap;
}

/* "Je staat hier."
   Het streepje krijgt élk item, ook als het onzichtbaar is. Zou alleen het
   huidige item er een krijgen, dan is dat item vier pixels hoger dan de
   rest en verspringt de hele balk zodra je een pagina verder klikt. */
.nav .link::after{
  content:'';display:block;height:1px;margin-top:3px;
  background:transparent;transition:background var(--t);
}
.nav .link.hier{color:var(--text)}
.nav .link.hier::after{background:var(--copper)}
.nav .link:hover{color:var(--teal);text-decoration:none}

/* De knop van het uitklapmenu is een <button> en geen <a>: hij gaat niet
   naar een pagina, hij opent een keuze. Daarom staan de regels hierboven
   op `.link` en niet meer op `a.link` — dan gelden ze voor allebei en
   staat de maat op één plek. Alleen het knopeigen gedrag moet eraf. */
.nav button.link{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;line-height:inherit;
  display:block;text-align:left;
}
.nav button.link:hover{background:none}
/* De flexindeling zit hierbinnen en niet op de knop zelf, zodat het
   ::after-streepje van `.hier` een lijn onder de knop blijft in plaats van
   een item ernaast te worden. */
.dm-meer-in{display:inline-flex;align-items:center;gap:6px}

/* ---------- het uitklapmenu ----------
   Zelfde vorm als de taalkiezer ernaast (zie site-account.js): een paneel
   dat onder de knop hangt, opent op hover, op toetsenbordfocus en op een
   klik. Die drie samen, en niet alleen hover: op een telefoon bestaat
   hover niet, en een menu dat je met de tab-toets niet open krijgt sluit
   iedereen buiten die geen muis gebruikt. */
.dm-meer{position:relative;display:inline-flex;align-items:center;flex:none}
.dm-meer .dm-caret{
  width:0;height:0;flex:none;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;opacity:.7;
  transition:transform var(--t);
}
.dm-meer.open .dm-caret{transform:rotate(180deg)}
.dm-sub{
  /* Rechts verankerd, niet links: "Meer" is het laatste item in de balk,
     en een paneel dat naar rechts openklapt valt dan op een telefoon
     buiten beeld (op 320px stond hij 80px uit het scherm — nagemeten).
     Zelfde verankering als de taalkiezer ernaast. */
  position:absolute;top:100%;right:0;padding-top:10px;
  min-width:172px;z-index:120;text-align:left;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity 140ms ease-out,transform 140ms ease-out,visibility 140ms;
}
/* ÉÉN stand, en die staat in `.open`. Geen `:hover` en geen
   `:focus-within` erbij, en dat is met opzet — beide heb ik geprobeerd en
   beide gingen aantoonbaar mis:
     `:focus-within` — Escape sloot het paneel en gaf de focus terug aan de
       knop, zoals het hoort, waarna deze regel het meteen weer opende.
     `:hover` — op een aanraakscherm blijft hover na een tik hangen, dus
       een tweede tik sloot het paneel niet meer. En met de muis nog op de
       knop deed Escape hetzelfde als hierboven.
   In beide gevallen zei `aria-expanded` "dicht" terwijl het openstond, en
   een knop die liegt tegen voorleessoftware is erger dan een knop die een
   klik vraagt. Nu is de zichtbare stand altijd gelijk aan wat de knop
   zegt, want er is maar één ding dat hem zet: site-account.js.
   Toetsenbord werkt zonder hover: het is een <button>, dus Enter en de
   spatiebalk geven een klik. */
.dm-meer.open .dm-sub{opacity:1;visibility:visible;transform:translateY(0)}
.dm-sub-in{
  background:var(--surface);border:1px solid var(--surface-2);
  border-radius:var(--radius);padding:6px 0;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.dm-sub a{
  display:block;color:var(--dim);text-decoration:none;
  font-family:'Inter',system-ui,sans-serif;
  font-size:13.5px;letter-spacing:0;text-transform:none;
  padding:8px 15px;white-space:nowrap;
  transition:color 140ms ease-out,background 140ms ease-out;
}
.dm-sub a:hover{color:var(--text);background:var(--bg-alt);text-decoration:none}
/* Waar je nú staat, met hetzelfde vinkje als in de taalkiezer. */
.dm-sub a.nu{color:var(--teal)}
.dm-sub a.nu::after{content:' \2713'}

/* ---------------------------------------------------------------------
   DE BALK OP EEN TELEFOON
   ---------------------------------------------------------------------
   Op 390px stond alles op één rij te dringen: het merk brak middenin
   ("DEKKER / MASTERING"), "OVER MIJ" brak op de spatie, en de accountknop
   werd het scherm af geduwd. Op 360px stak hij er zeven pixels buiten, en
   dan kun je de pagina zijwaarts slepen.

   Twee rijen in plaats van één. Bovenin het merk en de accountknop, want
   dat zijn de twee dingen die je op een telefoon zoekt: waar ben ik en wie
   ben ik. Daaronder de menu-items op een eigen regel, waar ze de volle
   breedte hebben en niet meer hoeven te breken.

   Zonder JavaScript en zonder hamburger: de vier items passen op één regel
   zodra ze die regel voor zich alleen hebben.

   De volgorde komt van `order`, niet van de bron. De accountknop wordt door
   /site-account.js achteraan de balk gehangen — die weet niets van deze
   indeling en hoeft dat ook niet te weten.
*/
/* 820 en niet 640. Op één regel past de balk in het Nederlands tot
   ongeveer 800 pixels: "OVER MIJ · WERKWIJZE · MIJN ORDERS" naast het
   woordmerk, de taalkiezer en de inlogknop liep op 768 het scherm uit.
   Engels paste daar nog wel — maar een indeling die per taal omslaat is
   een indeling die je in één taal niet nameet. Nu breken ze allebei op
   hetzelfde punt, ruim vóór het krap wordt. */
@media(max-width:820px){
  .nav{
    flex-wrap:wrap;height:auto;padding:11px 16px 12px;
    gap:0 14px;row-gap:11px;
  }
  /* De vrije ruimte van de eerste regel zit hier, achter het merk. Niet
     als `margin-left:auto` op de knop erna, want dan hangt de opmaak af
     van wélke knop er als eerste staat — en dat verschilt per pagina:
     de taalkiezer is er alleen als de pagina in twee talen bestaat. */
  .brand{order:1;margin-right:auto;white-space:nowrap;font-size:13px;letter-spacing:.11em}
  .nav .dm-taal{order:2}
  .nav .dm-acct{order:3}
  /* De spacer duwt op een breed scherm alles naar rechts. Hier is hij de
     regelovergang: een item van volle breedte en nul hoogte breekt de rij. */
  .nav .spacer{order:4;flex:0 0 100%;height:0}
  .nav .link{order:5;white-space:nowrap;font-size:12px;letter-spacing:.05em}
  /* Het uitklapmenu is een omhulsel om zijn knop, en het omhulsel is hier
     het flex-item — niet de knop erin. Zonder deze regel stond "Meer" op de
     eerste regel links van het woordmerk in plaats van bij de andere
     menu-items op de tweede. Gezien op een schermafdruk, niet bedacht. */
  .nav .dm-meer{order:5}
}

/* Onder 380px is ook die tweede regel krap zodra er een vierde item bij
   komt. Alleen de letterafstand eraf — de woorden zelf blijven heel. */
@media(max-width:380px){
  .nav{gap:0 11px;padding:11px 13px 12px}
  .nav .link{font-size:11.5px;letter-spacing:.02em}
}

main{max-width:var(--maxw);margin:0 auto;padding:38px 22px 90px}

/* ---------- typografie ---------- */
h1{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:34px;line-height:1.2;letter-spacing:.01em;margin-bottom:6px;
}
h2{
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:23px;line-height:1.3;margin-bottom:12px;
}
.section-label{
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--putty);margin-bottom:12px;
}
p{margin-bottom:15px;color:var(--dim)}
p:last-child{margin-bottom:0}
.lead{font-size:17px;color:var(--dim)}
.muted{color:var(--faint);font-size:13.5px}
.mono{font-family:'IBM Plex Mono',monospace}

/* ---------- kaarten ---------- */
.card{
  background:var(--surface);border:1px solid var(--surface-2);
  border-radius:var(--radius);padding:24px;margin-bottom:20px;
}
.card h2{font-size:19px}

/* ---------- formulieren ---------- */
.field{margin-bottom:20px}
label{
  display:block;font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--putty);margin-bottom:7px;
}
label .opt{text-transform:none;letter-spacing:0;color:var(--faint);font-size:11.5px}
input[type=text],input[type=email],textarea,select{
  width:100%;background:var(--bg);color:var(--text);
  border:1px solid var(--surface-2);border-radius:var(--radius);
  padding:13px 14px;font-family:inherit;font-size:16px;line-height:1.5;
  transition:border-color var(--t);
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--teal)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{resize:vertical;min-height:96px}
.hint{color:var(--faint);font-size:12.5px;margin-top:6px;line-height:1.5}

button{
  background:var(--copper);color:#fff;border:none;border-radius:var(--radius);
  padding:14px 26px;font-family:'Inter',sans-serif;font-size:16px;font-weight:500;
  cursor:pointer;transition:background var(--t),opacity var(--t);
}
button:hover:not(:disabled){background:#c9603f;text-decoration:none}
button:disabled{opacity:.4;cursor:default}
button.wide{width:100%}
button.ghost{background:transparent;border:1px solid var(--surface-2);color:var(--dim)}
button.ghost:hover:not(:disabled){background:var(--surface-2)}
button.small{padding:9px 16px;font-size:14px}
/* Tekstlink met knopgewicht: gebruikt waar een volle knop te zwaar is
   maar een gewone link te makkelijk over het hoofd wordt gezien. */
.btn-inline{
  display:inline-block;color:var(--teal);font-size:14.5px;font-weight:500;
}
.btn-inline:hover{text-decoration:underline}

.msg{
  margin-top:16px;padding:13px 15px;border-radius:var(--radius);
  font-size:14.5px;line-height:1.55;display:none;
}
.msg.ok{display:block;background:rgba(79,143,137,.12);border:1px solid var(--teal);color:var(--dim)}
.msg.err{display:block;background:rgba(184,86,58,.1);border:1px solid var(--copper);color:var(--dim)}

/* ---------- voortgangsbalk ---------- */
.steps{display:flex;align-items:flex-start;margin:4px 0 22px;position:relative}
.step{flex:1;text-align:center;position:relative;padding-top:26px}
.step::before{
  content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--surface-2);z-index:2;
}
.step::after{
  content:'';position:absolute;top:11px;left:-50%;width:100%;height:1.5px;
  background:var(--surface-2);z-index:1;
}
.step:first-child::after{display:none}
.step.done::before{background:var(--teal);border-color:var(--teal)}
.step.done::after{background:var(--teal)}
.step.now::before{
  background:var(--copper);border-color:var(--copper);
  box-shadow:0 0 0 4px rgba(184,86,58,.22);
}
.step .lbl{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  line-height:1.35;padding:0 4px;
}
.step.now .lbl{color:var(--text)}
.step.done .lbl{color:var(--dim)}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--surface-2);
  padding:28px 22px;margin-top:40px;
}
.foot-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--faint);
}
.foot-inner a{color:var(--faint)}
.foot-links{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.foot-sep{opacity:.45}
/* De belofte herhaald in de footer: subtiel, in putty, zodat hij
   opvalt zonder de aandacht te vragen die de CTA erboven nodig heeft. */
.foot-claim{color:var(--putty)}

@media(max-width:640px){
  h1{font-size:27px}
  h2{font-size:20px}
  main{padding:26px 18px 70px}
  .nav{gap:16px;padding:0 18px}
  .step .lbl{font-size:11px;letter-spacing:.05em}
}


/* ============================================================
   Vendor-band: langzaam scrollende logostrip boven de footer.
   ============================================================
   De strip bestaat uit twee identieke rijen die als één geheel
   naar links schuiven. Zodra de eerste rij volledig uit beeld is
   springt de animatie terug naar nul — omdat de tweede rij dan
   precies staat waar de eerste begon, is die sprong onzichtbaar
   en lijkt het een oneindige band.

   Vandaar ook dat elk logo tweemaal in de HTML staat: dat is geen
   duplicaat maar de tweede helft van de lus. */

.vendors{
  border-top:1px solid var(--surface-2);
  padding:26px 0 24px;
  overflow:hidden;
  position:relative;
}

/* Uitdovende randen links en rechts, zodat logo's het beeld in en
   uit glijden in plaats van er hard tegenaan te lopen. */
.vendors::before,
.vendors::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;
  pointer-events:none;
}
.vendors::before{left:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(13,14,15,0) 100%)}
.vendors::after{right:0;background:linear-gradient(270deg,var(--bg) 0%,rgba(13,14,15,0) 100%)}

.vendors-label{
  text-align:center;margin:0 auto 18px;padding:0 22px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}

.vendor-track{
  display:flex;align-items:center;gap:64px;width:max-content;
  animation:vendor-scroll 78s linear infinite;
}
.vendors:hover .vendor-track{animation-play-state:paused}

.vendor-track img{
  height:30px;width:auto;display:block;flex:none;
  opacity:.72;transition:opacity var(--t);
  /* Vaste hoogte voor breedbeeldlogo's, iets ruimer voor vierkante:
     anders oogt een vierkant logo optisch een stuk kleiner. */
}
.vendor-track img.square{height:42px}
/* Burl staat in de bron als beeldmerk binnen een kader, waardoor de naam
   optisch veel kleiner uitvalt dan de andere woordmerken. Vandaar de
   afwijkende hoogte: het gaat om gelijk ogen, niet om gelijk meten. */
.vendor-track img.big{height:90px}
/* Bryston is een uitgesneden contourlogo met een verhouding van bijna 7:1.
   Op gelijke hoogte wordt het onevenredig breed en trekt het de rij uit
   elkaar; iets lager houdt het ritme intact. */
.vendor-track img.wide{height:22px}
.vendor-track img:hover{opacity:1}

@keyframes vendor-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Wie bewegende beelden liever niet ziet, krijgt een stilstaande rij.
   De logo's blijven leesbaar, alleen de beweging vervalt. */
@media (prefers-reduced-motion: reduce){
  .vendor-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:40px}
  .vendors::before,.vendors::after{display:none}
}

@media(max-width:640px){
  .vendor-track{gap:44px}
  .vendor-track img{height:24px}
  .vendor-track img.square{height:34px}
  .vendor-track img.big{height:72px}
  .vendor-track img.wide{height:18px}
  .vendors::before,.vendors::after{width:50px}
}