/* ============================================================
   SKIN: WERK — "DE GALERIE"
   Sfeer: licht, veel lucht, redactioneel. Het werk krijgt de show.
   Display-font: Bricolage Grotesque — eigenzinnige schreefloze met
   karakter. Bewust géén elegante serif: die hoek is al bezet door
   de sites van Amber, Zadrak en Zanzibar, en deze site moet daar
   juist niet op lijken.
   ============================================================ */

body[data-skin="galerie"] {
  --pg-bg:   #f6f6f7;
  --pg-fg:   #16161a;
  --pg-mut:  #6c6c76;
  --pg-lijn: #e2e2e6;
  --display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --sk: rgba(22, 22, 26, .13);
  background: var(--pg-bg);
  color: var(--pg-fg);
}

/* ---------- KOP: EEN INHOUDSOPGAVE ----------
   Brutalisme met een swiss raster. Geen accentkleur in de kop, want
   dat ene woord in roze is precies het sjabloontrucje dat je overal
   ziet. Hier doet de opmaak het werk: een bovenbalk met harde lijnen,
   de titel enorm en over de volle breedte, en daaronder de vijf vakken
   als genummerde regels waar je op kunt klikken. Alles in ink. */
.wk-kop {
  padding: calc(var(--nav-h) + clamp(34px, 5vw, 64px)) var(--pad-x) clamp(30px, 4vw, 56px);
}

/* de bovenbalk: waar je bent, wat het is, wanneer */
.wk-balk {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--ink);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}

.wk-kop h1 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  /* zo groot dat het de bladspiegel vult; dat is het hele idee */
  font-size: clamp(2.8rem, 12.5vw, 11rem);
  line-height: .84;
  letter-spacing: -.055em;
  text-transform: uppercase;
  color: var(--ink);
  margin: clamp(18px, 2.6vw, 34px) 0 clamp(20px, 3vw, 40px);
}
.wk-kop h1 span { display: block; }

/* onderste helft: tekst links, inhoudsopgave rechts */
.wk-onder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  border-top: 3px solid var(--ink);
  padding-top: clamp(20px, 2.6vw, 32px);
}
.wk-lead {
  font-size: var(--t-lead);
  line-height: 1.9;
  color: var(--pg-mut);
  max-width: 46ch;
  margin: 0;
}

/* de inhoudsopgave: genummerde regels met een dunne lijn ertussen */
.wk-index { display: flex; flex-direction: column; }
.wk-index a {
  display: grid;
  grid-template-columns: clamp(38px, 4vw, 54px) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 14px;
  padding: clamp(9px, 1.2vw, 14px) 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(.94rem, 1.9vw, 1.28rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  transition: padding-left var(--snel), background var(--snel), color var(--snel);
}
.wk-index a:first-child { border-top: 1px solid var(--ink); }
.wk-index a b {
  font-weight: 700;
  font-size: var(--t-label);
  letter-spacing: .16em;
  color: var(--roze);
}
/* het pijltje verschijnt pas als je de regel aanwijst */
.wk-index a::after {
  content: "\2192";
  opacity: 0;
  transition: opacity var(--snel), transform var(--snel);
  transform: translateX(-6px);
}
.wk-index a:hover {
  background: var(--ink);
  color: #fff;
  padding-left: 12px;
}
.wk-index a:hover b { color: var(--geel); }
.wk-index a:hover::after { opacity: 1; transform: translateX(0); }

@media (max-width: 760px) {
  .wk-onder { grid-template-columns: 1fr; }
}

/* ---------- VAK-KOPPEN ---------- */
.vak-kop {
  padding: clamp(52px, 8vw, 100px) var(--pad-x) 0;
  scroll-margin-top: calc(var(--nav-h) + 10px);
}
.vak-kop h2 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 18px 0 0;
}
.vak-kop h2 em { font-style: normal; color: var(--roze); }
.vak-lead {
  font-size: var(--t-lead);
  line-height: 1.9;
  color: var(--pg-mut);
  max-width: 58ch;
  margin: 20px 0 0;
}

/* ---------- WORD DE VIERDE ---------- */
.vierde { padding: clamp(40px, 6vw, 72px) var(--pad-x) 0; }
.vierde-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  background: var(--ink);
  color: #fff;
  border-radius: var(--ronding);
  padding: clamp(26px, 3.6vw, 44px);
}
.vierde h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-l);
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: 8px;
}
.vierde p { font-size: var(--t-body); color: #a8a8b2; line-height: 1.7; }
.vierde-acties { display: flex; gap: 11px; flex-wrap: wrap; }

/* ---------- VORMGEVING ---------- */
.vg { padding: clamp(34px, 5vw, 56px) var(--pad-x) 0; }
.vg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;   /* alle kaarten even hoog, ook de meetlat */
}
.vg-kaart {
  background: #fff;
  border: 1px solid var(--pg-lijn);
  border-radius: var(--ronding);
  overflow: hidden;
  box-shadow: var(--schaduw-3);
  transition: transform var(--snel), box-shadow var(--snel);
  display: flex;
  flex-direction: column;
}
.vg-kaart:hover {
  transform: translateY(-6px) rotate(-.4deg);
  box-shadow: var(--schaduw-3);
}
.vg-kaart img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: top;
  display: block;
}
/* De meetlat is extreem hoog en smal. Het kaartje houdt dezelfde maat
   als de rest van de rij; de lat zelf staat er compleet in, gecentreerd
   op een zacht vlak, zodat de rij netjes blijft. */
.vg-hoog img {
  object-fit: contain;
  background: #f7f4ee;
  padding: 14px 0;
}
.vg-kaart figcaption {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--pg-lijn);
  flex: 1;   /* vult de rest, zodat de rij onderaan gelijk eindigt */
}
.vg-kaart strong {
  font-family: var(--mono);
  font-size: var(--t-klein);
  font-weight: 700;
}
.vg-kaart span {
  font-family: var(--mono);
  font-size: var(--t-label);
  line-height: 1.65;
  color: var(--pg-mut);
}
.vg-meer {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: 1.8;
  color: var(--pg-mut);
  margin-top: 26px;
}
.vg-meer a { color: var(--ink); border-bottom: 2px solid var(--roze); font-weight: 700; }
.vg-meer a:hover { color: var(--roze); }

/* ---------- MARKETING ---------- */
.mk { padding: clamp(34px, 5vw, 56px) var(--pad-x) 0; }
.mk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.mk-kaart {
  background: #fff;
  border: 1px solid var(--pg-lijn);
  border-radius: var(--ronding);
  padding: clamp(22px, 2.6vw, 30px);
  transition: transform var(--snel), border-color var(--snel);
}
.mk-kaart:hover { transform: translateY(-4px); border-color: var(--roze); }
.mk-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--geel-diep);
  border: 1px solid #eadfb4;
  background: #fdf7e2;
  border-radius: var(--ronding);
  padding: 5px 12px;
  margin-bottom: 13px;
}
.mk-kaart h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-m);
  letter-spacing: -.025em;
  line-height: 1.1;
  margin-bottom: 10px;
}
.mk-kaart p {
  font-family: var(--mono);
  font-size: var(--t-klein);
  line-height: 1.75;
  color: var(--pg-mut);
}
/* de kaart mét beeld */
.mk-beeld {
  padding: 0;
  overflow: hidden;
}
.mk-beeld img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid var(--pg-lijn);
}
.mk-beeld .mk-txt { padding: clamp(20px, 2.4vw, 26px); }

/* ---------- PROJECTMANAGEMENT ---------- */
.pm { padding: clamp(34px, 5vw, 56px) var(--pad-x) 0; }
.pm-kaart {
  background: #fff;
  border: 1px solid var(--pg-lijn);
  border-left: 5px solid var(--roze);
  border-radius: var(--ronding);
  padding: clamp(26px, 3.4vw, 44px);
  max-width: 860px;
}
.pm-kaart h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-l);
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 12px 0 14px;
}
.pm-kaart > p {
  font-size: var(--t-body);
  line-height: 1.9;
  color: #3a3a44;
  max-width: 66ch;
  margin-bottom: 20px;
}
.pm-kaart .case-punten { margin: 0; }

/* ---------- CASE ---------- */
.case {
  padding: clamp(46px, 7vw, 96px) var(--pad-x);
  border-top: 1px solid var(--pg-lijn);
  position: relative;
}

/* Twee gelijke kolommen: tekst en mockup naast elkaar.
   (Er stond hier eerst een smalle kolom voor de casenummers.
   Die nummers zijn eruit, dus die kolom moest mee.) */
.case-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

/* Bij de middelste case wisselen tekst en beeld van kant. Expliciet
   geplaatst, want met 'order' belandde de mockup in de verkeerde kolom. */
.case-om .case-beeld { grid-column: 1; grid-row: 1; }
.case-om .case-txt   { grid-column: 2; grid-row: 1; }

.case-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pg-mut);
  border: 1px solid var(--pg-lijn);
  background: #fff;
  border-radius: var(--ronding);
  padding: 6px 14px;
}
.case-txt > h3 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  font-size: var(--t-l);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 16px 0 16px;
}
.case-intro {
  font-size: var(--t-lead);
  line-height: 1.85;
  color: #3a3a44;
  max-width: 52ch;
  margin-bottom: 30px;
}

.case-blok { margin-bottom: 24px; }
.case-blok h3 {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--roze);
  margin-bottom: 9px;
}
.case-blok p {
  font-size: var(--t-body);
  line-height: 1.85;
  color: var(--pg-mut);
  max-width: 54ch;
}

.case-punten {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 26px 0;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--pg-lijn);
  border-radius: var(--ronding);
}
.case-punten li {
  position: relative;
  padding-left: 24px;
  font-family: var(--mono);
  font-size: var(--t-klein);
  line-height: 1.65;
  color: #3a3a44;
}
.case-punten li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--geel);
  font-weight: 700;
}

.case-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--t-klein);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  border-bottom: 2px solid var(--roze);
  padding-bottom: 3px;
  transition: color var(--snel), gap var(--snel);
}
.case-link:hover { color: var(--roze); gap: 13px; }
.case-link-uit {
  border-bottom-color: var(--pg-lijn);
  color: var(--pg-mut);
  font-weight: 400;
  cursor: default;
}

/* ---------- MOCKUPS ----------
   Voorproefjes van de klantsites, opgebouwd uit CSS en verpakt in een
   browservenster: tabblad met favicon, adresbalk, en de site eronder.
   Geen screenshots: die verouderen, wegen zwaar, en pijlen kunnen er
   nooit precies op wijzen. Dit blijft scherp op elk scherm. */
.case-beeld { position: sticky; top: calc(var(--nav-h) + 28px); }

.browser {
  border-radius: var(--ronding);
  overflow: hidden;
  border: 1px solid var(--pg-lijn);
  background: #dfdfe4;
  box-shadow: var(--schaduw-3);
  transition: transform var(--traag), box-shadow var(--traag);
}
.case-beeld:hover .browser {
  transform: translateY(-6px);
  box-shadow: var(--schaduw-3);
}

/* bovenbalk: knopjes + tabblad */
.br-top {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 9px 12px 0;
  font-family: var(--mono);
}
.br-dots {
  display: flex;
  gap: 6px;
  padding-bottom: 12px;
}
.br-dots i {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: block;
}
.br-dots i:nth-child(1) { background: #ff5f57; }
.br-dots i:nth-child(2) { background: #febc2e; }
.br-dots i:nth-child(3) { background: #28c840; }

.br-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f2f2f4;
  border-radius: var(--ronding);
  padding: 8px 16px;
  font-size: var(--t-label);
  font-weight: 500;
  color: #45454e;
  white-space: nowrap;
  overflow: hidden;
  max-width: 70%;
}
/* de échte favicons van de klantsites */
.br-fav {
  width: 16px; height: 16px;
  border-radius: var(--ronding);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.br-plus {
  padding-bottom: 10px;
  font-size: var(--t-body);
  color: #85858f;
}

/* adresbalk */
.br-url {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f2f2f4;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .04em;
  color: #5a5a64;
}
.br-slot { color: #9a9aa4; }

/* de echte site in het venster: screenshot, lokaal geschoten met
   headless Edge — geen verouderde livegrab, gewoon een vers plaatje
   dat opnieuw te maken is zodra de klantsite verandert */
.mock-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* ---------- NOTITIES ----------
   Code-commentaar op de mockups: een chip met // en een pijl die
   aanwijst wélke keuze bedoeld wordt. Het waarom, in één regel. */
.notitie {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 2px;
  max-width: 250px;
  pointer-events: none;
}
.notitie code {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.5;
  color: #f2f2f4;
  background: var(--ink);
  border-radius: var(--ronding);
  padding: 8px 12px;
  box-shadow: var(--schaduw-1);
}
.notitie code i {
  font-style: normal;
  font-weight: 700;
  color: var(--roze);
}
.pijl {
  width: 52px;
  height: 38px;
  flex-shrink: 0;
  /* roze: leesbaar op de donkere én de lichte mockups */
  stroke: var(--roze);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(22,22,26,.35));
}

/* pijl wijst omlaag-links: chip hangt rechtsboven het doel */
.not-1 {
  top: 16%;
  right: -12px;
  align-items: flex-start;
  transform: rotate(1.5deg);
}
.not-1 .pijl { margin-top: 26px; }

/* pijl wijst omhoog-links: chip hangt onder het doel */
.not-2 {
  bottom: -18px;
  left: 12%;
  align-items: flex-end;
  transform: rotate(-1.5deg);
}
.not-2 .pijl { margin-bottom: 22px; }

/* ----- per case op maat: elke pijl wijst naar iets dat écht
   op de screenshot staat ----- */

/* Zadrak: bovenste naar de lucht rond de naam, onderste naar de
   demo-speler onderin */
.beeld-zadrak .not-1 { top: 24%; }

/* Amber: bovenste omhoog naar de 'Book your experience'-knop in de
   menubalk, onderste omhoog naar de sierletters van 'Private dining' */
.beeld-amber .not-1 {
  top: 19%;
  right: 2%;
  align-items: flex-end;
}
.beeld-amber .not-1 .pijl { margin-top: 0; margin-bottom: 18px; }
.beeld-amber .not-2 {
  bottom: auto;
  top: 58%;
  left: 22%;
}

/* Zanzibar: bovenste omlaag naar de 20/80-strip onderin het beeld,
   onderste omhoog naar het eilandklokje */
.beeld-zanzi .not-1 { top: 64%; max-width: 230px; }
.beeld-zanzi .not-2 { left: 2%; }

/* ---------- TUSSENSTUK ---------- */
.wk-tussen {
  padding: clamp(60px, 9vw, 120px) var(--pad-x);
  background: var(--ink);
  color: #fff;
}
.tussen-in { max-width: 62ch; }
.wk-tussen h2 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 20px 0 24px;
}
.wk-tussen h2 em { font-style: normal; color: var(--geel); }
.wk-tussen p {
  font-size: var(--t-lead);
  line-height: 1.9;
  color: #b0b0bb;
  margin-bottom: 16px;
}
.tussen-klein { font-size: var(--t-body) !important; color: #8b8b95 !important; }
.tussen-klein a { color: #fff; border-bottom: 1px solid var(--roze); }
.tussen-klein a:hover { color: var(--roze); }

/* ---------- CTA ---------- */
.wk-cta { padding: clamp(60px, 9vw, 120px) var(--pad-x); }
.cta-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--pg-lijn);
  border-radius: var(--ronding);
  padding: clamp(30px, 4.6vw, 56px);
  position: relative;
  overflow: hidden;
}
.cta-in::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--roze) 64%, var(--geel) 64%);
}
.wk-cta h2 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  font-size: var(--t-l);
  line-height: 1;
  letter-spacing: -.035em;
  margin-bottom: 12px;
}
.wk-cta p { font-size: var(--t-body); color: var(--pg-mut); line-height: 1.8; }
.cta-acties { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .vg-grid { grid-template-columns: repeat(2, 1fr); }
  .mk-grid { grid-template-columns: 1fr; }
  /* onder elkaar: tekst eerst, dan de mockup */
  .case-in { grid-template-columns: 1fr; }
  .case-beeld { grid-column: 1; position: static; }
  .case-om .case-beeld { grid-column: 1; grid-row: auto; }
  .case-om .case-txt   { grid-column: 1; grid-row: auto; }

  /* op smallere schermen worden de notities een lijstje onder het
     venster: zwevende pijlen wijzen daar toch nergens meer heen */
  .notitie {
    position: static;
    transform: none;
    max-width: none;
    margin-top: 10px;
    pointer-events: auto;
  }
  .not-1 { margin-top: 14px; }
  .pijl { display: none; }
}

@media (max-width: 620px) {
  .case-in { gap: 18px; }
  .cta-acties .btn { flex: 1; }
  .vg-grid { grid-template-columns: 1fr; }
  .vierde-acties { width: 100%; }
  .vierde-acties .btn { flex: 1; }
}

/* ============================================================
   GRAFISCH ACCENT: GLAS, MAAR DAN ECHT

   Hier stonden zachte pastelvlekken met melkwitte doorschijnende
   kaartjes erop. Dat is precies de standaardlook die je overal ziet
   bij automatisch gemaakte websites, en het paste niet bij de rest
   van deze site: die is hard, contrastrijk en in blokken.

   Glas werkt alleen als er iets achter zit dat het waard is om
   doorheen te kijken. Dus geen gekleurde waas meer, maar glas over
   de enige plek waar echt iets ligt: de schermafdrukken van het werk.
   De rest wordt hard: witte vlakken, dikke lijnen, ink en roze.
   ============================================================ */
body[data-skin="galerie"] main,
body[data-skin="galerie"] .nav,
body[data-skin="galerie"] .ft { position: relative; z-index: 1; }

/* ---------- de kaarten: dicht, hard, met een verspringende lijn ---------- */
.vg-kaart,
.mk-kaart,
.pm-kaart {
  position: relative;
  background: #fff;
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  box-shadow: none;
  transition: transform var(--snel);
}
.vg-kaart::after,
.mk-kaart::after,
.pm-kaart::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--lijn-dik) solid var(--roze);
  border-radius: var(--ronding);
  transform: translate(var(--vspr), var(--vspr));
  transition: transform var(--snel);
}
.vg-kaart:hover,
.mk-kaart:hover,
.pm-kaart:hover { transform: translate(3px, 3px); }
.vg-kaart:hover::after,
.mk-kaart:hover::after,
.pm-kaart:hover::after { transform: translate(0, 0); }

.vg-kaart figcaption {
  background: #fff;
  border-top: var(--lijn-dik) solid var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- de subnavigatie: knoppen, geen pillen ---------- */
.wk-subnav a {
  background: #fff;
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--snel), color var(--snel);
}
.wk-subnav a:hover { background: var(--ink); color: #fff; }

/* ---------- de puntenlijst bij een case ---------- */
.case-punten {
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--ronding);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.case-punten li { color: #e2e2e8; }
.case-punten li::before { color: var(--geel); }

/* ---------- HIER hoort het glas wél ----------
   Een matte strook over de schermafdruk heen met het adres erop.
   Daar zit een echte foto achter, dus daar zie je het glas ook echt
   werken in plaats van dat het een wit kaartje is. */
.mockup { position: relative; }
.mockup-glas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px clamp(14px, 2vw, 20px);
  background: rgba(255, 255, 255, .34);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-top: 1px solid rgba(255, 255, 255, .5);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.mockup-glas i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--geel);
  flex-shrink: 0;
}

@supports not (backdrop-filter: blur(1px)) {
  .mockup-glas { background: rgba(22, 22, 26, .74); }
}

/* ══════════════════════════════════════════════════════════════
   TRAINING
   Verhuisd van de homepage hierheen, en meegekleurd met deze
   pagina: lichte achtergrond, donkere letters. De prijskaart is
   juist wél donker, zodat het bedrag eruit springt.
   ══════════════════════════════════════════════════════════════ */
.zelf { padding: clamp(34px, 5vw, 56px) var(--pad-x) clamp(30px, 4vw, 50px); }

.zelf-in {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

.zelf-txt p {
  font-size: var(--t-body);
  color: var(--pg-mut);
  line-height: 1.9;
  max-width: 56ch;
  margin-bottom: 16px;
}
.zelf-txt p strong { color: var(--pg-fg); }
.zelf-txt .btn { margin-top: 12px; }

/* de prijskaart: donker vlak in een lichte pagina */
.zelf-kaart {
  position: relative;
  grid-row: span 2;
  padding: clamp(24px, 3vw, 34px);
  background: var(--ink);
  color: #fff;
  border-radius: var(--ronding);
  box-shadow: var(--schaduw-2);
  overflow: hidden;
}
.zelf-kaart::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--roze) 62%, var(--geel) 62%);
}
.zk-badge {
  display: inline-block;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--roze);
  border: 1px solid rgba(255, 79, 139, .4);
  border-radius: var(--ronding);
  padding: 5px 13px;
  margin-bottom: 15px;
}
.zk-top h3 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 48;
  font-size: var(--t-l);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.zk-lijst {
  margin: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.zk-lijst li {
  position: relative;
  padding-left: 26px;
  font-size: var(--t-klein);
  color: #d2d2da;
  line-height: 1.6;
}
.zk-lijst li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--geel);
  font-weight: 700;
}
.zk-prijs {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zk-label {
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9a9aa6;
  font-weight: 700;
}
.zk-bedrag {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-l);
  color: var(--geel);
  line-height: 1;
}
.zk-sub { font-size: var(--t-klein); color: #9a9aa6; }
@media (max-width: 900px) {
  .zelf-in { grid-template-columns: 1fr; }
  .zelf-kaart { grid-row: auto; }
}

/* ══════════════════════════════════════════════════════════════
   ZO WERKEN WE SAMEN
   Verhuisd van de homepage en meegekleurd met deze pagina: lichte
   achtergrond, donkere letters, dunne lijnen tussen de stappen.
   Bij stap 5 splitst het pad zich in twee vakjes.
   ══════════════════════════════════════════════════════════════ */
.werkwijze {
  padding: clamp(52px, 8vw, 100px) var(--pad-x) clamp(20px, 3vw, 40px);
}
.werkwijze h2 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 18px 0 0;
}
.werkwijze h2 em { font-style: normal; color: var(--roze); }
.werkwijze .lead {
  font-size: var(--t-lead);
  line-height: 1.9;
  color: var(--pg-mut);
  max-width: 58ch;
  margin: 20px 0 0;
}

.ww-lijst {
  margin-top: clamp(34px, 4.5vw, 54px);
  display: flex;
  flex-direction: column;
  list-style: none;
}

.ww {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(22px, 2.8vw, 32px) 0;
  border-top: 1px solid var(--pg-lijn);
}
.ww:last-child { border-bottom: 1px solid var(--pg-lijn); }

.ww-nr {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  font-size: var(--t-xl);
  line-height: .9;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--roze);
}
.ww h3 {
  font-size: var(--t-m);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 9px;
}
.ww p {
  font-size: var(--t-body);
  color: var(--pg-mut);
  line-height: 1.85;
  max-width: 62ch;
}

/* bij de laatste stap gaat het pad uit elkaar: een site of app gaat
   live, marketing gaat draaien */
.ww-takken {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0 4px;
}
.ww-tak {
  padding: clamp(16px, 2vw, 22px);
  background: #fff;
  border-radius: var(--ronding);
  border-left: 4px solid var(--roze);
  box-shadow: var(--schaduw-1);
}
.ww-tak:nth-child(2) { border-left-color: var(--geel); }
.ww-tak-kop {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 32;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  letter-spacing: -.02em;
  color: var(--pg-fg);
  margin-bottom: 7px;
}
.ww-tak p {
  font-size: var(--t-klein);
  line-height: 1.7;
  color: var(--pg-mut);
}

@media (max-width: 760px) {
  .ww-takken { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ww { grid-template-columns: 1fr; gap: 10px; }
  .ww-nr { -webkit-text-stroke: 1px var(--roze); }
}

/* ---------- HET GLAS ZIT IN DE BROWSERBALK ----------
   De balk en de adresregel liggen nu óver de schermafdruk heen in
   plaats van erboven. Ze zijn matglas, dus je ziet de site erdoorheen
   schemeren. Dat is glas met iets erachter, en daarmee doet het effect
   eindelijk wat het hoort te doen. */
.browser {
  position: relative;
  background: #16161a;
  border: none;
}
.browser .mock-shot { display: block; width: 100%; height: auto; }

.br-top,
.br-url {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
.br-top {
  top: 0;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.br-url {
  /* precies onder de tabbalk, dus even hoog als die is */
  top: 40px;
  background: rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .5);
}
.br-dots { padding-bottom: 0; }
.br-tab {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  border: none;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .5);
}
.br-plus { color: rgba(255, 255, 255, .8); }
.br-slot { color: var(--geel); }

/* de afdruk krijgt bovenaan wat ruimte, anders valt het glas over de
   kop van de site die je laat zien */
.browser .mock-shot { margin-top: 0; }

@supports not (backdrop-filter: blur(1px)) {
  .br-top { background: rgba(22, 22, 26, .82); }
  .br-url { background: rgba(22, 22, 26, .74); }
}

/* ---------- HOOFDSTUKTITELS ----------
   Elk vak begon met hetzelfde labeltje en dezelfde kop, waardoor de
   pagina één lange rij werd. Nu is het een echte hoofdstuktitel: een
   dikke lijn over de volle breedte, een groot nummer in de marge en de
   kop daarnaast. Zo weet je bij elk blok meteen waar je bent. */
.vak-kop {
  padding: clamp(64px, 9vw, 120px) var(--pad-x) 0;
  scroll-margin-top: calc(var(--nav-h) + 10px);
}
.vak-kop > .wrap {
  display: grid;
  grid-template-columns: clamp(70px, 9vw, 130px) minmax(0, 1fr);
  gap: 0 clamp(18px, 2.6vw, 40px);
  border-top: 3px solid var(--ink);
  padding-top: clamp(20px, 2.6vw, 32px);
}
.vak-nr {
  grid-column: 1;
  grid-row: 1 / span 3;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  line-height: .82;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--roze);
}
.vak-kop .label   { grid-column: 2; }
.vak-kop h2       { grid-column: 2; margin-top: 10px; }
.vak-kop .vak-lead { grid-column: 2; }

/* het spiegelen van de even blokken werkte tegen dit raster in */
.vak-kop:nth-of-type(even) > .wrap {
  display: grid;
  align-items: start;
  text-align: left;
}
.vak-kop:nth-of-type(even) .vak-lead { margin-left: 0; }

@media (max-width: 620px) {
  .vak-kop > .wrap { grid-template-columns: 54px minmax(0, 1fr); }
  .vak-nr { -webkit-text-stroke: 1.5px var(--roze); }
}

/* ══════════════════════════════════════════════════════════════
   MIX & MATCH
   Middelen van de andere pagina's, hier door elkaar gebruikt: het
   harde kleurblok van de home, het plakband van de werkkaarten, en
   de gescheurde rand van het lab. Zo krijgt de pagina ritme zonder
   dat het een nieuwe stijl wordt.
   ══════════════════════════════════════════════════════════════ */

/* het vormgevingsvak wordt één zwart blok: dat breekt de witte pagina
   halverwege open en zet het werk zelf in de schijnwerpers */
.vak-kop#vormgeving,
.vg {
  background: var(--ink);
  color: #fff;
}
.vak-kop#vormgeving > .wrap { border-top-color: #fff; }
.vak-kop#vormgeving .wk-balk,
.vak-kop#vormgeving h2 { color: #fff; }
.vak-kop#vormgeving .vak-lead { color: #b6b6c0; }
.vak-kop#vormgeving .label { color: #b6b6c0; }
.vak-kop#vormgeving .vak-nr { -webkit-text-stroke-color: var(--geel); }

/* gescheurde onderrand, net als in het lab */
.vg {
  padding-bottom: clamp(60px, 8vw, 110px);
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - 16px),
    89% 100%, 76% calc(100% - 12px), 61% 100%,
    47% calc(100% - 13px), 32% 100%, 17% calc(100% - 10px), 0 100%
  );
}

/* de kaarten in dat zwarte vak: wit vlak met geel eromheen */
.vg .vg-kaart { border-color: #fff; }
.vg .vg-kaart::after { border-color: var(--geel); }

/* plakband bovenop, zoals bij de drie werken op de homepage */
.vg-kaart { overflow: visible; }
.vg-kaart::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -11px;
  left: 50%;
  width: clamp(56px, 7vw, 84px);
  height: 22px;
  background: rgba(255, 210, 63, .85);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .45);
  transform: translateX(-50%) rotate(-5deg);
}
.vg-kaart:nth-child(2)::before { transform: translateX(-50%) rotate(4deg);  left: 36%; }
.vg-kaart:nth-child(3)::before { transform: translateX(-50%) rotate(-3deg); left: 64%; }
.vg-kaart:nth-child(4)::before { transform: translateX(-50%) rotate(6deg);  left: 44%; }

/* ---------- DE TWEE MARKETINGKAARTEN EVEN GROOT ----------
   Ze stonden op align-items: start, waardoor elke kaart net zo hoog
   werd als zijn eigen inhoud. Nu rekken ze allebei tot dezelfde hoogte
   en krijgen de beelden hetzelfde bijsnijdformaat. */
.mk-grid { align-items: stretch; }
.mk-kaart { display: flex; flex-direction: column; }
.mk-beeld img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: var(--lijn-dik) solid var(--ink);
}
.mk-beeld .mk-txt { flex: 1; }

/* ---------- HET GLASPANEEL OVER HET AFGESCHERMDE PLAN ----------
   Het plan is al onleesbaar gemaakt in het bestand zelf. Dit paneel
   vertelt de bezoeker waaróm het wazig is, zodat het niet overkomt als
   een mislukte foto. Matglas, want er ligt echt iets achter. */
.mk-beeld { position: relative; }
.mk-glas {
  position: absolute;
  top: clamp(14px, 2vw, 22px);
  left: clamp(14px, 2vw, 22px);
  z-index: 2;
  padding: 9px 14px;
  background: rgba(255, 255, 255, .3);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--ronding);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

@supports not (backdrop-filter: blur(1px)) {
  .mk-glas { background: rgba(255, 255, 255, .88); }
}

/* de nieuwe vakken hebben twee kaarten naast elkaar */
.pm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.pm-grid .pm-kaart { display: flex; flex-direction: column; }
.pm-grid .pm-kaart p { flex: 1; }

@media (max-width: 900px) {
  .pm-grid { grid-template-columns: 1fr; }
}

/* ---------- DE KOP AANTREKKELIJKER ----------
   De titel was groot maar vlak. Nu snijdt er een roze balk dwars door
   de bladspiegel, precies tussen de twee regels, en de tweede regel
   staat ingesprongen. Dat geeft de kop beweging zonder dat er een
   accentkleurtje in een woord hoeft. */
.wk-kop h1 {
  position: relative;
}
.wk-kop h1 span:nth-child(2) {
  padding-left: clamp(30px, 8vw, 130px);
}
/* de balk loopt van de linkerrand tot achter de eerste regel door */
.wk-kop h1::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(26px, 7vw, 112px);
  height: clamp(10px, 1.6vw, 22px);
  background: var(--roze);
  transform: translateY(-50%);
}

/* het chevronteken in de index en bij de hoofdstukken */
.wk-index a b,
.vak-nr {
  font-family: var(--mono);
  letter-spacing: -.04em;
}
.vak-nr {
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  -webkit-text-stroke: 0;
  color: var(--roze);
  line-height: 1;
  padding-top: .18em;
}
.vak-kop#vormgeving .vak-nr { color: var(--geel); }

/* de bovenbalk krijgt een klein levend detail: het jaartal telt mee */
.wk-balk span:last-child { font-variant-numeric: tabular-nums; }

/* ---------- HET RASTER ACHTER DE KOP ----------
   Brutalistische poster: de letters staan op een zichtbaar grid, met
   een paar vakjes gevuld in roze en geel. Het raster is decoratie, dus
   het wordt door de opmaak gemaakt en niet door losse elementen. */
.kop-doos { position: relative; }
.kop-doos .kop-raster {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* de gevulde vakjes */
    linear-gradient(var(--roze), var(--roze)),
    linear-gradient(var(--geel), var(--geel)),
    linear-gradient(var(--roze), var(--roze)),
    /* de lijnen van het grid */
    repeating-linear-gradient(90deg,
      rgba(22, 22, 26, .13) 0 1px, transparent 1px calc(100% / 14)),
    repeating-linear-gradient(180deg,
      rgba(22, 22, 26, .13) 0 1px, transparent 1px 25%);
  background-repeat: no-repeat;
  background-size:
    calc(100% / 14) 25%,
    calc(100% / 14) 25%,
    calc(100% / 14) 25%,
    100% 100%,
    100% 100%;
  background-position:
    calc(100% / 14 * 7) 0,
    calc(100% / 14 * 8) 25%,
    calc(100% / 14 * 2) 75%,
    0 0,
    0 0;
}
.kop-doos h1 { position: relative; z-index: 1; }

/* op het zwarte vormgevingsvak zouden de lijnen wegvallen */
@media (max-width: 620px) {
  .kop-doos .kop-raster { opacity: .7; }
}

/* ══════════════════════════════════════════════════════════════
   DE SHOWREEL
   Vol in beeld, met een grote roze knop erop. Klik en hij speelt in
   een lus door; klik nog eens, of op het kruisje, en hij stopt weer
   op het startbeeld.
   ══════════════════════════════════════════════════════════════ */
.reel { padding: clamp(34px, 5vw, 60px) var(--pad-x) 0; }

.reel-doos {
  position: relative;
  overflow: hidden;
  border-radius: var(--ronding);
  background: var(--ink);
  box-shadow: var(--schaduw-3);
  /* de verspringende lijn, zoals overal op deze site */
  outline: var(--lijn-dik) solid var(--ink);
  outline-offset: 0;
}
.reel-doos::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--lijn-dik) solid var(--roze);
  border-radius: var(--ronding);
  transform: translate(var(--vspr), var(--vspr));
  transition: transform var(--snel);
  z-index: 4;
}
.reel-doos:hover::after { transform: translate(0, 0); }

.reel-doos video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  cursor: pointer;
}
/* ---------- HET STARTBEELD: ZO BRUTAAL MOGELIJK ----------
   Alles wat een nette pagina niet doet: de titel als behang schuin over
   het vlak, twee banden die tegen elkaar in schuiven, tekst rechtop
   langs beide randen, elke regel in een eigen blok scheef op elkaar
   gestapeld, en een afspeelknop die veel te groot is en het kader uit
   loopt. De knop blijft wel gewoon een afspeelknop: ronde vorm, driehoek
   erin, want anders weet niemand waar hij op moet klikken. */
.reel-knop {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--ink);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: opacity .4s var(--ease);
}

/* de titel eindeloos herhaald, schuin, heel flauw */
.reel-behang {
  position: absolute;
  inset: -30%;
  z-index: 0;
  transform: rotate(-14deg);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .055);
  white-space: pre-wrap;
  word-break: break-all;
  pointer-events: none;
}
.reel-behang::before {
  content: "DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK DIT DOE IK";
}

/* twee banden, tegen elkaar in */
.reel-band {
  position: absolute;
  left: 0;
  z-index: 4;
  width: max-content;
  padding: 7px 0;
  font-family: var(--mono);
  font-size: clamp(.58rem, 1vw, .74rem);
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.reel-band-boven {
  top: 0;
  color: var(--ink);
  background: var(--geel);
  animation: reelheen 20s linear infinite;
}
.reel-band-onder {
  bottom: 0;
  color: #fff;
  background: var(--roze-diep);
  animation: reelterug 24s linear infinite;
}
@keyframes reelheen  { from { transform: translateX(0); }      to { transform: translateX(-33.33%); } }
@keyframes reelterug { from { transform: translateX(-33.33%); } to { transform: translateX(0); } }

/* Rechtop langs de randen, en met opzet veel te groot: de linkerregel
   is net zo zwaar als de kop en loopt van boven tot onder door. Dat is
   het absurde eraan, en het duwt je blik naar de knop toe. */
.reel-staand {
  position: absolute;
  writing-mode: vertical-rl;
  z-index: 4;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  text-transform: uppercase;
}
.reel-staand-links {
  left: clamp(8px, 1.4vw, 18px);
  top: clamp(34px, 4.4vw, 52px);
  bottom: clamp(34px, 4.4vw, 52px);
  font-size: clamp(1.1rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--geel);
  overflow: hidden;
}
.reel-staand-rechts {
  right: clamp(10px, 1.6vw, 20px);
  bottom: clamp(38px, 5vw, 60px);
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: clamp(.56rem, 1vw, .72rem);
  font-weight: 700;
  letter-spacing: .28em;
  color: rgba(255, 255, 255, .55);
}

/* de knop: veel te groot, half het kader uit, maar wel herkenbaar */
.reel-bal {
  position: absolute;
  right: clamp(14px, 3vw, 54px);
  top: 50%;
  width: clamp(200px, 34vw, 420px);
  height: clamp(200px, 34vw, 420px);
  transform: translateY(-50%);
  background: var(--roze);
  border-radius: 50%;
  border: clamp(5px, .8vw, 12px) solid var(--ink);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 16px);
  box-shadow: var(--schaduw-3);
  transition: transform .32s var(--ease), background .32s var(--ease);
}

/* de driehoek, met een ring eromheen zodat het een echte knop wordt */
.reel-driehoek {
  position: relative;
  width: clamp(74px, 12vw, 150px);
  height: clamp(74px, 12vw, 150px);
  border: clamp(4px, .6vw, 8px) solid var(--ink);
  border-radius: 50%;
  flex-shrink: 0;
}
.reel-driehoek::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: clamp(17px, 2.7vw, 34px) 0 clamp(17px, 2.7vw, 34px) clamp(28px, 4.4vw, 55px);
  border-color: transparent transparent transparent var(--ink);
}

/* en het woord erbij, want dan hoeft niemand te raden */
.reel-woord {
  font-family: var(--mono);
  font-size: clamp(.68rem, 1.5vw, 1rem);
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink);
  padding-left: .34em;
}
/* blijft roze, ook als je hem aanwijst: alleen iets dieper en groter */
.reel-knop:hover .reel-bal {
  transform: translateY(-50%) scale(1.06) rotate(-4deg);
  background: var(--roze-diep);
}

/* de tekstblokken mogen de knop niet overlappen nu hij helemaal in beeld staat */
.reel-woorden { max-width: 46%; }

/* de regels: elk een eigen blok, scheef op elkaar */
/* ruim rechts van de staande tekst, die is nu veel breder geworden */
.reel-woorden {
  position: absolute;
  left: clamp(74px, 9vw, 130px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  max-width: 56%;
}
.reel-regel {
  display: block;
  padding: 4px 14px 7px;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  font-size: clamp(1.3rem, 3.8vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.reel-r1 { background: #fff;          color: var(--ink); transform: rotate(-1.4deg); }
.reel-r2 { background: var(--geel);   color: var(--ink); transform: rotate(1.2deg) translateX(16px); }
.reel-r3 { background: var(--ink);    color: #fff; box-shadow: 0 0 0 3px #fff; transform: rotate(-.8deg); }

@media (prefers-reduced-motion: reduce) {
  .reel-band { animation: none; }
}



/* De stopknop: hetzelfde middel als de afspeelknop, maar dan met een
   vierkant in plaats van een driehoek en het woord erbij. Zo hoeft
   niemand te raden wat er gebeurt als je erop drukt. */
.reel-stop {
  position: absolute;
  top: clamp(12px, 1.8vw, 22px);
  right: clamp(12px, 1.8vw, 22px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--geel);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  cursor: pointer;
  box-shadow: var(--schaduw-2);
  transition: transform var(--snel), background var(--snel);
}
/* het hidden-kenmerk verliest het van display:flex, dus dat zetten we
   hier expliciet terug: anders staat de stopknop er ook als hij stil is */
.reel-stop[hidden] { display: none; }

.reel-vierkant {
  width: 14px;
  height: 14px;
  background: var(--ink);
  flex-shrink: 0;
}
.reel-stop:hover {
  transform: translate(-2px, 2px);
  background: var(--roze);
  color: #fff;
}
.reel-stop:hover .reel-vierkant { background: #fff; }

/* ---------- HET RASTER ACHTER DE KOP ----------
   Brutalistische poster: de letters staan op een zichtbaar grid, met
   een paar vakjes gevuld in roze en geel. */
.kop-doos { position: relative; }
.kop-doos .kop-raster {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--roze), var(--roze)),
    linear-gradient(var(--geel), var(--geel)),
    linear-gradient(var(--roze), var(--roze)),
    repeating-linear-gradient(90deg,
      rgba(22, 22, 26, .13) 0 1px, transparent 1px calc(100% / 14)),
    repeating-linear-gradient(180deg,
      rgba(22, 22, 26, .13) 0 1px, transparent 1px 25%);
  background-repeat: no-repeat;
  background-size:
    calc(100% / 14) 25%,
    calc(100% / 14) 25%,
    calc(100% / 14) 25%,
    100% 100%,
    100% 100%;
  background-position:
    calc(100% / 14 * 7) 0,
    calc(100% / 14 * 8) 25%,
    calc(100% / 14 * 2) 75%,
    0 0,
    0 0;
}
.kop-doos h1 { position: relative; z-index: 1; }
@media (max-width: 620px) {
  .kop-doos .kop-raster { opacity: .7; }
}

/* zodra hij speelt gaat het hele dekvlak weg, zodat je de film ziet */
.reel-doos.speelt .reel-knop {
  opacity: 0;
  pointer-events: none;
}

/* ---------- HET STARTBEELD OP EEN TELEFOON ----------
   Een liggend vak van 16:9 is op een telefoon maar 189px hoog, en daar
   past deze opbouw niet in: de tekst viel over de staande tekst en over
   de knop, en de knop liep het beeld uit. Op smalle schermen wordt het
   vak daarom staand, alles onder elkaar, en de film past er met zwarte
   randen in zodat er niets van wordt afgesneden. */
@media (max-width: 700px) {
  /* staand vak voor het startbeeld, want daar moet veel in passen */
  .reel-doos video {
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: var(--ink);
  }
  /* zodra hij speelt gaat het vak terug naar liggend, dan heeft de film
     geen zwarte balken meer boven en onder */
  .reel-doos.speelt video {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .reel-knop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(18px, 5vw, 30px);
    padding: 40px 20px 40px clamp(42px, 12vw, 58px);
  }

  /* de staande tekst blijft, maar smaller en langs de hele rand */
  .reel-staand-links {
    top: 34px;
    bottom: 34px;
    left: 10px;
    font-size: clamp(.92rem, 4.4vw, 1.3rem);
  }
  .reel-staand-rechts { display: none; }

  /* de regels komen bovenaan, in het volle blok */
  .reel-woorden {
    position: static;
    transform: none;
    max-width: 100%;
    left: auto;
  }
  .reel-regel { font-size: clamp(1.15rem, 6.4vw, 1.9rem); }

  /* de knop staat eronder, helemaal in beeld */
  .reel-bal {
    position: static;
    transform: none;
    width: clamp(150px, 46vw, 210px);
    height: clamp(150px, 46vw, 210px);
    align-self: center;
  }
  .reel-knop:hover .reel-bal { transform: scale(1.05) rotate(-4deg); }
  .reel-driehoek { width: clamp(56px, 17vw, 78px); height: clamp(56px, 17vw, 78px); }
  .reel-driehoek::before {
    border-width: clamp(13px, 4vw, 18px) 0 clamp(13px, 4vw, 18px) clamp(21px, 6.4vw, 29px);
  }

  .reel-stop { top: 10px; right: 10px; padding: 9px 14px 9px 11px; }
}

/* ---------- AANTIKBARE LINKS OP EEN TELEFOON ----------
   De links naar de sites van klanten waren 27px hoog. Met een vinger
   mik je daar makkelijk naast; 44px is de maat die je nodig hebt. */
@media (max-width: 700px) {
  .case-link,
  .vierde-in a,
  .wk-cta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}