@charset "UTF-8";
/* ============================================================
   Lumar District — stijl.css
   Eén stylesheet, geen build-stap. Volgorde: tokens, basis, layout,
   typografie, componenten, pagina-eigen blokken, beweging.

   Het merk in het kort: bot-papier als ondergrond, ossenbloed als inkt,
   vlam als accent. Kaarten staan een halve graad scheef — dat is opzet,
   het geeft de pagina de hand van een drukker in plaats van een template.
   ============================================================ */

/* ---- Variabele fonts, zelf gehost (geen Google-CDN, geen consent nodig) ---- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2-variations');
  font-weight: 300 900; font-style: normal; font-display: swap;
  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: 'Fraunces';
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2-variations');
  font-weight: 300 900; font-style: normal; font-display: swap;
  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';
  src: url('../fonts/archivo-latin.woff2') format('woff2-variations');
  font-weight: 100 900; font-stretch: 75% 125%; font-style: normal; font-display: swap;
  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';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 900; font-stretch: 75% 125%; font-style: normal; font-display: swap;
  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;
}

/* ============================================================
   1 · TOKENS
   ============================================================ */
:root {
  /* Kleur */
  --bot:            #EDE4D6;   /* papier — de ondergrond van de site */
  --bot-kaart:      #E4D8C6;   /* kaart op papier */
  --bot-decor:      #DFD2BE;   /* vlek op papier */
  --bot-decor-diep: #DCCDB6;   /* vlek op een kaart */
  --ossenbloed:     #4C171C;   /* inkt, en de donkere secties */
  --ossenbloed-op:  #5D242A;   /* vlek op ossenbloed */
  --vlam:           #CA5538;   /* accent: knoppen, cijfers, cursief */
  --vlam-op:        #D4694C;   /* vlek op vlam */
  --vlam-diep:      #830B11;   /* bovenlabel op papier */
  --inkt-zacht:     #6D5A55;   /* lopende tekst op papier */
  --zand-zacht:     #C9ACA4;   /* lopende tekst op ossenbloed */

  /* Typografie */
  --serif:  'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:   'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Ritme */
  --balk:      1200px;
  --marge:     clamp(20px, 4vw, 44px);
  --sectie:    clamp(48px, 7vw, 90px);
  --sectie-kl: clamp(36px, 5vw, 64px);

  /* Vorm */
  --rond-pil:   999px;
  --rond-groot: 24px;
  --rond:       22px;
  --rond-klein: 18px;
  --rond-veld:  12px;

  /* Beweging — één curve voor de hele site */
  --veer: cubic-bezier(.2, 0, 0, 1);
  --vlot: .18s var(--veer);
  --traag: .25s var(--veer);

  /* Kleuren die per ondergrond omslaan. Zie de blokken bij .grond-donker:
     daar worden deze drie opnieuw gezet en erven alle kinderen mee. */
  --sterk:       var(--ossenbloed);  /* nadruk (<b>) in lopende tekst */
  --label-kleur: var(--vlam-diep);   /* bovenlabel boven een kop */
  --label-zacht: var(--inkt-zacht);  /* klein label, bv. bij een stap */
  --kop-accent:  var(--vlam);        /* cursief accentwoord in een kop */

  /* Diepte */
  --schaduw-kaart: 0 20px 50px rgba(76, 23, 28, .16);
  --schaduw-pil:   0 10px 24px rgba(76, 23, 28, .12);
  --schaduw-kop:   0 10px 30px rgba(76, 23, 28, .08);
}

/* ============================================================
   2 · BASIS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anker-doelen mogen niet onder de sticky kop verdwijnen. */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bot);
  color: var(--ossenbloed);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* de decoratieve vlekken steken bewust buiten beeld */
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; }
a:hover { color: var(--vlam); }

::selection { background: var(--vlam); color: var(--bot); }

/* Eén zichtbare focusring voor de hele site — nooit weghalen. */
:focus-visible {
  outline: 2px solid var(--vlam);
  outline-offset: 3px;
  border-radius: 4px;
}
.grond-donker :focus-visible,
.grond-vlam   :focus-visible { outline-color: var(--bot); }

/* Sla-over-link: alleen zichtbaar bij toetsenbordfocus. */
.overslaan {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--ossenbloed); color: var(--bot);
  padding: 12px 20px; border-radius: var(--rond-pil);
  font-weight: 600; text-decoration: none;
  transition: top var(--vlot);
}
.overslaan:focus { top: 12px; color: var(--bot); }

.verborgen-visueel {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ============================================================
   3 · LAYOUT
   ============================================================ */
.balk {
  max-width: var(--balk);
  margin-inline: auto;
  padding-inline: var(--marge);
  /* Een .vlek is absoluut gepositioneerd en zou anders óver de tekst vallen:
     gepositioneerde elementen tekenen boven niet-gepositioneerde, ongeacht
     de volgorde in de HTML. Deze regel zet de inhoud er weer bovenop. */
  position: relative;
  z-index: 1;
}

.sectie      { padding-block: var(--sectie); }
.sectie--kl  { padding-block: var(--sectie-kl); }
.sectie--top { padding-block: var(--sectie) clamp(16px, 3vw, 32px); }
.sectie--eind{ padding-block: var(--sectie-kl) clamp(56px, 8vw, 100px); }

/* Ondergronden. Ze zetten meteen de juiste tekstkleuren, zodat een blok
   nooit half licht en half donker is. */
.grond-donker { background: var(--ossenbloed); color: var(--bot); }
.grond-vlam   { background: var(--vlam);       color: var(--bot); }
.grond-donker .zacht { color: var(--zand-zacht); }
.grond-vlam   .zacht { color: rgba(237, 228, 214, .85); }
.zacht        { color: var(--inkt-zacht); }

/* Elke donkere ondergrond draait de accentkleuren om. Eén blok, en daarmee
   geldt het overal: kaarten, secties, stapregels en alles wat erin staat.
   Zo kan een bovenlabel of vetgedrukt woord nooit in de achtergrond vallen —
   ook niet in een donkere kaart die op een lichte sectie ligt. */
.grond-donker,
.kaart--donker,
.stapregel--donker {
  --sterk: var(--bot);
  --label-kleur: var(--vlam);
  --label-zacht: var(--zand-zacht);
  --kop-accent: var(--vlam);
}
.grond-vlam, .kaart--vlam {
  --sterk: var(--bot);
  --label-kleur: var(--bot);
  --label-zacht: rgba(237, 228, 214, .85);
  /* Op vlam zou een vlam-gekleurd accentwoord onzichtbaar zijn. Ossenbloed
     houdt het accent een accent en haalt 3,4:1 — genoeg voor koptekst. */
  --kop-accent: var(--ossenbloed);
}

.grond-donker, .grond-vlam { position: relative; overflow: hidden; }

/* Twee kolommen die vanzelf onder elkaar vallen. De minmax bepaalt wanneer. */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.duo--breed  { grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); }
.duo--top    { align-items: start; }
.duo--ruim   { gap: clamp(32px, 5vw, 72px); }

/* Kaartenraster. --min stelt per blok in hoe smal een kaart mag worden. */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 300px), 100%), 1fr));
  gap: var(--gat, clamp(16px, 2.4vw, 26px));
}
.raster--start { align-items: start; align-content: start; }

.kop-blok { max-width: 640px; }
.kop-blok--rij {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 18px; max-width: none;
}

/* ============================================================
   4 · TYPOGRAFIE
   ============================================================ */
.label {
  margin: 0;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--label-kleur);
}
.label--klein { font-size: .72rem; letter-spacing: .16em; color: var(--label-zacht); }

/* Fraunces op 530: net iets steviger dan book, zonder vet te worden. */
.titel-xl, .titel-l, .titel-m, .titel-s {
  font-family: var(--serif);
  font-weight: 530;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.titel-xl { margin: .35em 0 0; font-size: clamp(2.6rem, 5.4vw, 4.3rem); line-height: 1.02; }
.titel-l  { margin: .3em 0 0;  font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.03; letter-spacing: -.01em; }
.titel-m  { margin: 0;         font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.08; letter-spacing: -.01em; }
.titel-s  { margin: 0;         font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.06; letter-spacing: 0; }

/* De homepage-h1 mag een maat groter dan de rest. */
.titel-xl--home { font-size: clamp(2.8rem, 5.8vw, 4.7rem); line-height: 1; }

/* Cursief in een titel is altijd het accentwoord. De kleur loopt via een
   token, zodat het woord op een vlam-ondergrond niet in de achtergrond valt. */
.titel-xl em, .titel-l em, .titel-m em, .titel-s em {
  font-style: italic; font-weight: 500; color: var(--kop-accent);
}

.lood {
  margin: 1.2em 0 0;
  max-width: 52ch;
  font-size: 1.08rem; line-height: 1.65;
  color: var(--inkt-zacht);
}
.grond-donker .lood, .grond-vlam .lood { color: var(--zand-zacht); }
.grond-vlam   .lood { color: rgba(237, 228, 214, .9); }

.tekst      { margin: 1em 0 0; line-height: 1.65; color: var(--inkt-zacht); max-width: 54ch; }
.tekst + .tekst { margin-top: .9em; }
.grond-donker .tekst, .grond-vlam .tekst { color: var(--zand-zacht); }

/* Nadruk in lopende tekst, waar die tekst ook staat. */
.tekst b, .tekst strong,
.kaart__tekst b, .kaart__tekst strong,
.stapregel__tekst b, .stapregel__tekst strong,
.punt-regel__tekst b, .punt-regel__tekst strong,
.belofte p b { color: var(--sterk); font-weight: 600; }

.cijfers { font-variant-numeric: tabular-nums; }

/* Tekstlink met accentonderstreping. */
.pijl-link {
  display: inline-block;
  font-weight: 600;
  color: var(--vlam-diep);
  text-decoration-color: var(--vlam);
  text-underline-offset: 4px;
}
.grond-donker .pijl-link { color: var(--bot); text-underline-offset: 5px; }
.pijl-link:hover { color: var(--vlam); }

/* De streep die zichzelf onder de kop trekt. Achtergrond i.p.v. border,
   zodat hij achter de letters langs loopt en netjes afbreekt bij een regeleinde. */
.streep {
  background-image: linear-gradient(var(--vlam), var(--vlam));
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 0% .09em;
}

/* ============================================================
   5 · KNOPPEN
   ============================================================ */
.knop {
  display: inline-block;
  border: 1.5px solid transparent;
  border-radius: var(--rond-pil);
  padding: 14px 24px;
  font: inherit; font-weight: 600; font-size: 1.02rem;
  line-height: 1.2;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background var(--vlot), color var(--vlot), border-color var(--vlot);
}
.knop--vlam       { background: var(--vlam);       color: var(--bot); }
.knop--vlam:hover { background: var(--ossenbloed); color: var(--bot); }

.knop--bot        { background: var(--bot);        color: var(--ossenbloed); }
.knop--bot:hover  { background: var(--ossenbloed); color: var(--bot); }

.knop--donker       { background: var(--ossenbloed); color: var(--bot); }
.knop--donker:hover { background: var(--bot);        color: var(--ossenbloed); }

.knop--rand         { border-color: rgba(76, 23, 28, .35); color: var(--ossenbloed); }
.knop--rand:hover   { border-color: var(--vlam); color: var(--vlam); }

/* Op een donkere of vlam-ondergrond wisselt de vlam-knop van hover-kleur,
   anders verdwijnt hij in de achtergrond. */
.grond-donker .knop--vlam:hover,
.grond-vlam   .knop--vlam:hover { background: var(--bot); color: var(--ossenbloed); }

.knop-rij { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2em; }

/* ============================================================
   6 · KAARTEN
   ============================================================ */
.kaart {
  position: relative;
  background: var(--bot-kaart);
  border-radius: var(--rond);
  padding: clamp(24px, 3vw, 34px);
  transition: transform var(--traag);
}
.kaart--groot  { border-radius: var(--rond-groot); padding: clamp(28px, 3.4vw, 42px); }
.kaart--klein  { border-radius: var(--rond-klein); padding: 20px 22px; }
.kaart--donker { background: var(--ossenbloed); color: var(--bot); overflow: hidden; }
.kaart--donker .zacht,
.kaart--donker .tekst { color: var(--zand-zacht); }
.kaart--vlam   { background: var(--vlam); color: var(--bot); overflow: hidden; }

/* De scheve stand. Elke kaart in een rij krijgt een eigen hoek via nth-child,
   zodat een raster niet als één blok oogt. Bij hover komt hij recht. */
.kaart--scheef:nth-child(4n+1) { transform: rotate(calc(var(--kier, .55deg) * -1)); }
.kaart--scheef:nth-child(4n+2) { transform: rotate(calc(var(--kier, .55deg) *  .9)); }
.kaart--scheef:nth-child(4n+3) { transform: rotate(calc(var(--kier, .55deg) * -.75)); }
.kaart--scheef:nth-child(4n)   { transform: rotate(var(--kier, .55deg)); }
.kaart--scheef:hover { transform: rotate(0deg) translateY(-4px); }

/* De cijferkaarten mogen schever staan dan de tekstkaarten: er staat weinig
   in, dus de scheefstand moet het werk doen. */
.raster--los { --kier: 1.15deg; }

.kaart__nr {
  margin: 0;
  font-family: var(--serif); font-style: italic;
  font-size: 2rem; line-height: 1;
  color: var(--vlam);
}
.kaart__titel { margin: .6em 0 0; font-weight: 600; font-size: 1.1rem; }
.kaart__tekst { margin: .5em 0 0; font-size: .94rem; line-height: 1.65; color: var(--inkt-zacht); }
.kaart--donker .kaart__tekst { color: var(--zand-zacht); }

/* ============================================================
   7 · DECORATIE — vlekken en stempels
   ============================================================ */
/* De vlek is het merkelement als masker: één vlak in een merkkleur, in de
   vorm van de lus of het beeldmerk. Puur decoratief, dus aria-hidden. */
.vlek {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: var(--vlek-kleur, var(--bot-decor));
  -webkit-mask-image: var(--vlek-vorm);
          mask-image: var(--vlek-vorm);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
.vlek--lus      { --vlek-vorm: url('../merk/lumar-element-lus.svg'); aspect-ratio: 564 / 482; }
.vlek--beeldmerk{ --vlek-vorm: url('../merk/lumar-beeldmerk-mono-bot.svg'); aspect-ratio: 721 / 859; }

/* Standaardplekken, zodat een sectie alleen nog de kleur hoeft te kiezen. */
.vlek--rechtsonder { right: -90px;  bottom: -120px; width: 560px; }
.vlek--rechtsboven { right: -60px;  top: -70px;     width: 280px; }
.vlek--linksonder  { left: -180px;  bottom: -140px; width: 520px; }
.vlek--op-donker   { --vlek-kleur: var(--ossenbloed-op); }
.vlek--op-vlam     { --vlek-kleur: var(--vlam-op); }
.vlek--op-kaart    { --vlek-kleur: var(--bot-decor-diep); }

/* Op smalle schermen kosten de grote vlekken alleen maar geheugen. */
@media (max-width: 700px) {
  .vlek--rechtsonder, .vlek--linksonder { width: 340px; }
}

/* Het stempel: een schuin pilletje dat over de rand van een beeld valt. */
.stempel {
  display: inline-block;
  border-radius: var(--rond-pil);
  padding: 9px 15px;
  font-size: .78rem; font-weight: 600;
  white-space: nowrap;
}
.stempel--donker { background: var(--ossenbloed); color: var(--bot); }
.stempel--vlam   { background: var(--vlam);       color: var(--bot); }
.stempel--rand   {
  background: var(--bot); color: var(--vlam-diep);
  border: 1.5px solid var(--vlam); font-weight: 700;
  box-shadow: var(--schaduw-pil);
}
.stempel--bot    { background: var(--bot); color: var(--vlam-diep); font-weight: 700; }

/* Zwevende stempels rondom een mockup. */
.stempel-plek { position: absolute; z-index: 2; }

/* Het play-element als opsommingsteken. Als masker, zodat het meekleurt. */
.punt {
  flex: none;
  display: inline-block;
  width: var(--punt-maat, 14px);
  aspect-ratio: 498 / 463;
  background: currentColor;
  -webkit-mask: url('../merk/lumar-element-play.svg') no-repeat center / contain;
          mask: url('../merk/lumar-element-play.svg') no-repeat center / contain;
}
.punt--vlam { color: var(--vlam); }

/* Regel met een punt ervoor. */
.punt-regel { display: flex; align-items: flex-start; gap: 12px; }
.punt-regel .punt { margin-top: .45em; }
.punt-regel--mid  { align-items: center; }
.punt-regel--mid .punt { margin-top: 0; }
.punt-regel__titel { margin: 0; font-weight: 600; }
.punt-regel__tekst { margin: .3em 0 0; font-size: .92rem; line-height: 1.55; color: var(--inkt-zacht); }
.grond-donker .punt-regel__tekst { color: var(--zand-zacht); }

/* ============================================================
   8 · KOP & NAVIGATIE
   ============================================================ */
.site-kop {
  position: sticky; top: 0; z-index: 60;
  background: rgba(237, 228, 214, .94);
  box-shadow: var(--schaduw-kop);
}
@supports (backdrop-filter: blur(8px)) {
  .site-kop { backdrop-filter: blur(8px); }
}

.site-kop__balk {
  max-width: var(--balk);
  margin-inline: auto;
  padding: 14px var(--marge);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.site-kop__merk { display: flex; align-items: center; flex: none; }
.site-kop__merk img { height: 46px; width: auto; }

.hoofdmenu {
  display: flex; align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  font-size: .95rem; font-weight: 500;
}
/* Negen items plus de knop moeten binnen --balk passen: labels breken niet
   af, en onder 1150px neemt de menuknop het over (zelfde grens in site.js). */
.hoofdmenu a { padding: 6px 0; text-decoration: none; white-space: nowrap; }
.hoofdmenu a:hover { color: var(--vlam); }
/* De actieve pagina is oranje en zwaarder — geen onderstreping, die botst
   met de scheve kaarten eronder. */
.hoofdmenu a[aria-current="page"],
.hoofdmenu a[aria-current="true"] { color: var(--vlam); font-weight: 600; }
.hoofdmenu .knop { font-size: .95rem; padding: 11px 20px; }
.hoofdmenu .knop[aria-current="page"] { background: var(--ossenbloed); color: var(--bot); }

/* De schakelaar bestaat alleen als JS draait; zonder JS blijft het menu
   gewoon staan en wrapt het. */
.menu-knop { display: none; }

@media (max-width: 1150px) {
  html.js .menu-knop {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 9px;
    background: none; border: 1.5px solid rgba(76, 23, 28, .35);
    border-radius: var(--rond-pil);
    padding: 9px 16px 9px 14px;
    font: inherit; font-size: .9rem; font-weight: 600;
    color: var(--ossenbloed); cursor: pointer;
  }
  .menu-knop__streepjes { display: block; width: 18px; height: 12px; position: relative; }
  .menu-knop__streepjes::before,
  .menu-knop__streepjes::after,
  .menu-knop__streepjes span {
    content: ''; position: absolute; left: 0; right: 0; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform var(--vlot), opacity var(--vlot);
  }
  .menu-knop__streepjes::before { top: 0; }
  .menu-knop__streepjes span    { top: 5px; }
  .menu-knop__streepjes::after  { bottom: 0; }
  .menu-knop[aria-expanded="true"] .menu-knop__streepjes::before { transform: translateY(5px) rotate(45deg); }
  .menu-knop[aria-expanded="true"] .menu-knop__streepjes span    { opacity: 0; }
  .menu-knop[aria-expanded="true"] .menu-knop__streepjes::after  { transform: translateY(-5px) rotate(-45deg); }

  html.js .hoofdmenu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: var(--bot);
    box-shadow: 0 18px 40px rgba(76, 23, 28, .16);
    padding: 8px var(--marge) 20px;
    font-size: 1.05rem;
  }
  html.js .hoofdmenu[hidden] { display: none; }
  html.js .hoofdmenu a {
    padding: 14px 2px;
    border-bottom: 1px solid rgba(76, 23, 28, .12);
  }
  html.js .hoofdmenu .knop {
    margin-top: 16px; border-bottom: none;
    padding: 14px 24px; font-size: 1rem;
  }
  /* Zonder JS: laat het menu netjes afbreken in plaats van overlopen. */
  html:not(.js) .hoofdmenu { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
}

/* ============================================================
   9 · VOET
   ============================================================ */
.site-voet { background: var(--ossenbloed); color: var(--bot); }
.site-voet__balk {
  max-width: var(--balk); margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) var(--marge) 30px;
}
.site-voet__boven {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-start;
  gap: 36px;
}
.site-voet__merk img { width: 240px; }
.site-voet__over {
  margin: 1.4em 0 0; max-width: 34ch;
  font-size: .92rem; line-height: 1.6; color: var(--zand-zacht);
}
.site-voet__kolommen { display: flex; flex-wrap: wrap; gap: clamp(36px, 6vw, 90px); }
.site-voet__kolom { display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.site-voet__kolom p:first-child {
  margin: 0 0 4px;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--vlam);
}
.site-voet__kolom a { text-decoration: none; }
.site-voet__kolom a:hover { color: var(--vlam); }
.site-voet__onder {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 10px;
  margin-top: clamp(36px, 5vw, 56px);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(237, 228, 214, .55);
}
.site-voet__onder a { text-decoration: none; }

/* ============================================================
   10 · LOOPBAND
   ============================================================ */
.band {
  background: var(--vlam);
  overflow: hidden;
  padding: 14px 0;
  transform: rotate(-.6deg) scale(1.02);
}
.band__spoor { display: flex; width: max-content; animation: loopBand 30s linear infinite; }
.band__set {
  display: flex; align-items: center;
  gap: 34px; padding-right: 34px;
  white-space: nowrap;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--bot);
}
.band .punt { --punt-maat: 12px; }
/* Bij hover stopt de band, zodat je de tekst kunt lezen. */
.band:hover .band__spoor { animation-play-state: paused; }

/* ============================================================
   11 · FORMULIER
   ============================================================ */
.formulier {
  background: var(--bot-kaart);
  border-radius: var(--rond-groot);
  padding: clamp(26px, 3.4vw, 42px);
  display: flex; flex-direction: column; gap: 18px;
}
.formulier__rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
.veld { display: flex; flex-direction: column; gap: 8px; }
.veld__label {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--inkt-zacht);
}
.veld input, .veld textarea, .veld select {
  width: 100%;
  border: 1.5px solid transparent;
  border-radius: var(--rond-veld);
  background: var(--bot);
  padding: 13px 15px;
  font: inherit; font-size: 1rem;
  color: var(--ossenbloed);
  transition: box-shadow var(--vlot), border-color var(--vlot);
}
.veld textarea { resize: vertical; min-height: 6em; }
.veld select {
  appearance: none;
  /* Pijltje als achtergrond, zodat de select in elke browser hetzelfde oogt. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234C171C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 40px;
}
.veld input::placeholder, .veld textarea::placeholder { color: rgba(76, 23, 28, .42); }
.veld input:focus, .veld textarea:focus, .veld select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--vlam);
}
.veld--fout input, .veld--fout textarea, .veld--fout select { border-color: var(--vlam-diep); }
.veld__fout {
  margin: 0; font-size: .85rem; font-weight: 500;
  color: var(--vlam-diep); letter-spacing: 0; text-transform: none;
}
.formulier .knop { align-self: flex-start; }

/* De honeypot moet voor mensen onzichtbaar zijn maar voor bots invulbaar
   blijven — dus niet display:none. */
.lokveld {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.melding-fout {
  background: rgba(131, 11, 17, .09);
  border-left: 3px solid var(--vlam-diep);
  border-radius: 0 var(--rond-veld) var(--rond-veld) 0;
  padding: 14px 16px;
  font-size: .95rem;
  color: var(--vlam-diep);
}

/* ============================================================
   12 · MOCKUPS
   ============================================================ */
.mok-plek { position: relative; }
.mok-plek--telefoon { min-height: 540px; }
.mok-plek--venster  { min-height: 400px; }
.mok-plek--case     { min-height: 460px; }

/* Telefoon met een advertentie erin. */
.telefoon {
  position: relative;
  width: min(300px, 78%); margin-inline: auto;
  transform: rotate(2deg);
}
.telefoon__romp {
  background: var(--ossenbloed);
  border-radius: 38px; padding: 12px;
  box-shadow: 0 24px 60px rgba(76, 23, 28, .22);
}
.telefoon__scherm { background: var(--bot); border-radius: 28px; overflow: hidden; }
.telefoon__luidspreker { display: flex; justify-content: center; padding: 10px 0 4px; }
.telefoon__luidspreker span {
  display: block; width: 74px; height: 7px;
  border-radius: var(--rond-pil); background: rgba(76, 23, 28, .18);
}
.telefoon__inhoud { padding: 12px 14px 16px; }

.post__kop { display: flex; align-items: center; gap: 9px; }
.post__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ossenbloed); color: var(--bot);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
}
.post__naam { margin: 0; font-size: .78rem; font-weight: 700; line-height: 1.25; }
.post__meta { margin: 0; font-size: .66rem; color: var(--inkt-zacht); line-height: 1.25; }
.post__beeld {
  position: relative; overflow: hidden;
  margin-top: 11px; padding: 16px;
  background: var(--vlam); border-radius: 10px;
  aspect-ratio: 4 / 4.6;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.post__oplabel {
  position: relative; margin: 0;
  font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bot);
}
.post__kreet {
  position: relative; margin: .25em 0 0;
  font-family: var(--serif); font-weight: 500;
  font-size: 1.55rem; line-height: 1.05; color: var(--bot);
}
/* Een echte advertentiecreative in het telefoonscherm. */
.post__creative {
  width: 100%;
  margin-top: 11px;
  border-radius: 10px;
  display: block;
}
.post__knop {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ossenbloed); color: var(--bot);
  border-radius: 10px; margin-top: 8px; padding: 11px 13px;
  font-size: .78rem; font-weight: 600;
}
.post__stats { margin: 10px 2px 0; font-size: .68rem; color: var(--inkt-zacht); }

/* Browservenster met een landingspagina erin. */
.venster {
  position: relative;
  width: min(420px, 92%); margin-inline: auto;
  transform: rotate(1.5deg);
}
.venster__romp {
  background: var(--ossenbloed);
  border-radius: 18px; padding: 10px;
  box-shadow: 0 24px 60px rgba(76, 23, 28, .22);
}
.venster__knopjes { display: flex; gap: 6px; padding: 2px 4px 8px; }
.venster__knopjes span { width: 9px; height: 9px; border-radius: 50%; background: var(--zand-zacht); }
.venster__knopjes span:first-child { background: var(--vlam); }
.venster__pagina { background: var(--bot); border-radius: 10px; overflow: hidden; }
.venster__nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
}
.venster__merk { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.venster__cta {
  margin: 0; font-size: .62rem; font-weight: 600;
  background: var(--vlam); color: var(--bot);
  padding: 5px 10px; border-radius: var(--rond-pil);
}
.venster__hero {
  position: relative; overflow: hidden;
  background: var(--vlam); padding: 26px 18px 22px;
}
.venster__raster {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 12px 16px 16px;
}
.venster__raster div { background: var(--bot-kaart); border-radius: 8px; aspect-ratio: 1 / .8; }

/* ---- Case-beeld: het échte werk, in een browser- en telefoonlijst ----
   Desktop-schermafdruk in het venster, de mobiele versie ervoor. Geen
   getekende mockup: dit is de site zoals hij live staat. */
.werkbeeld { position: relative; padding-bottom: 8%; }
.werkbeeld .venster { width: 100%; margin: 0; transform: rotate(-1.2deg); }
.werkbeeld .venster__pagina { border-radius: 8px; }
.werkbeeld .venster__pagina img { width: 100%; display: block; }

.werkbeeld__mobiel {
  position: absolute; right: -2%; bottom: 0;
  width: 27%; min-width: 96px;
  background: var(--ossenbloed);
  border-radius: 18px; padding: 6px;
  box-shadow: 0 18px 44px rgba(76, 23, 28, .28);
  transform: rotate(3deg);
}
.werkbeeld__mobiel img { width: 100%; border-radius: 13px; display: block; }
/* De telefoon staat altíjd rechtsonder: in beide schermafdrukken zit de kop
   links, en die moet leesbaar blijven. Alleen de kanteling spiegelt mee. */
.werkbeeld--links .venster { transform: rotate(1.2deg); }
.werkbeeld--links .werkbeeld__mobiel { transform: rotate(-3deg); }

@media (max-width: 620px) {
  .werkbeeld__mobiel { width: 30%; right: 0; }
}

/* Strip met echte advertentiecreatives onder een case. Op smal scherm schuift
   hij horizontaal door, zodat de beelden groot genoeg blijven om iets te zien. */
.creatives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 45%), 1fr));
  gap: clamp(12px, 1.8vw, 20px);
  margin-top: clamp(14px, 2vw, 20px);
}
.creative { margin: 0; }
.creative img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(76, 23, 28, .12);
  transition: transform var(--traag);
}
.creative:nth-child(odd)  img { transform: rotate(-.7deg); }
.creative:nth-child(even) img { transform: rotate(.7deg); }
.creative img:hover { transform: rotate(0deg) translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .creative:nth-child(odd)  img:hover { transform: rotate(-.7deg); }
  .creative:nth-child(even) img:hover { transform: rotate(.7deg); }
}

/* Wat we voor deze klant deden — een rijtje kleine merken boven de casekop. */
.case-diensten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.2em; }
.case-dienst {
  border: 1.5px solid rgba(76, 23, 28, .22);
  border-radius: var(--rond-pil);
  padding: 6px 13px;
  font-size: .74rem; font-weight: 600;
  color: var(--inkt-zacht);
}
.case-dienst--nu { border-color: var(--vlam); color: var(--vlam-diep); }

/* Twee advertentiekaarten die elkaar overlappen — het case-beeld. */
.duo-beeld { position: relative; min-height: 460px; }
.duo-beeld__groot {
  position: relative; width: 72%; aspect-ratio: 4 / 5;
  border-radius: 20px; overflow: hidden;
  padding: 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--schaduw-kaart);
  transform: rotate(-2deg);
}
/* De kleine kaart valt over de hoek van de grote. Hij steekt bewust een
   stukje buiten de kolom, zodat de overlap een hoek blijft en niet de halve
   kaart bedekt. */
.duo-beeld__klein {
  position: absolute; right: -3%; bottom: 0;
  width: 48%; aspect-ratio: 1 / 1;
  border-radius: var(--rond-klein);
  padding: 20px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  box-shadow: 0 20px 50px rgba(76, 23, 28, .2);
  transform: rotate(3deg);
}
/* Gespiegelde variant: groot beeld rechts, klein links. */
.duo-beeld--gespiegeld .duo-beeld__groot { margin-left: auto; transform: rotate(2deg); }
.duo-beeld--gespiegeld .duo-beeld__klein { right: auto; left: -3%; bottom: 6px; transform: rotate(-3deg); }

/* De kop van de grote kaart moet leesbaar blijven: hij houdt afstand van de
   kant waar de kleine kaart overheen valt. */
.duo-beeld__tekst { position: relative; z-index: 1; max-width: 68%; }
.duo-beeld--gespiegeld .duo-beeld__tekst { margin-left: auto; }

.duo-beeld__oplabel {
  margin: 0;
  font-size: .62rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.duo-beeld__kreet {
  margin: .3em 0 0;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.06;
}
.duo-beeld__klein p:first-child {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.1;
}
.duo-beeld__pil {
  margin: 0; align-self: flex-start;
  border-radius: var(--rond-pil); padding: 8px 14px;
  font-size: .72rem; font-weight: 600;
}

@media (max-width: 620px) {
  .duo-beeld, .mok-plek--case { min-height: 380px; }
  .duo-beeld__groot { width: 78%; }
  .duo-beeld__klein { width: 52%; }

  /* De stempels hangen bewust buiten de mockup. Op een smal scherm is daar
     geen ruimte voor, dus krimpen mockup én stempel mee — anders vallen ze
     half buiten beeld en snijdt overflow-x ze af. */
  .telefoon { width: min(255px, 66%); }
  .venster  { width: min(300px, 80%); }
  .stempel  { font-size: .72rem; padding: 8px 12px; }
  .mok-plek--telefoon { min-height: 460px; }
  .mok-plek--venster  { min-height: 340px; }
}

/* ---- Sfeerband --------------------------------------------------------
   Eén beeld over de volle breedte, als adempauze tussen de kaartrasters.
   Standaard staat er een foto; bestaat er een stille video, dan schuift die
   eroverheen zodra site.js hem mag starten. De video is dus verrijking:
   zonder JS, bij reduced motion of op een smal scherm blijft de foto staan
   en wordt er geen byte video geladen. */
.beeldband {
  position: relative;
  overflow: hidden;
  background: var(--ossenbloed);
}
.beeldband__media { position: relative; aspect-ratio: 16 / 6.4; }
.beeldband__media img,
.beeldband__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Pas zichtbaar als hij écht speelt; anders zie je een zwart vlak flitsen. */
.beeldband__video { opacity: 0; transition: opacity .8s var(--veer); }
.beeldband__video.is-aan { opacity: 1; }

/* Leesverloop in ossenbloed, niet in zwart: zo hoort de band bij de site en
   vergrijzen de warme tinten in het beeld niet. Twee verlopen over elkaar:
   het beeld is licht crèmekleurig papier, dus één zacht verloop van onderaf
   is niet genoeg om botkleurige tekst leesbaar te houden. Het horizontale
   verloop verankert de tekstkolom links en laat het beeld rechtsboven open. */
.beeldband__over {
  position: absolute; inset: 0;
  /* Grid met de inhoud onderin. Let op de width:100% hieronder: die is geen
     franje maar de kern. In een grid- of flexcontainer maakt de
     margin-inline:auto van .balk er een shrink-to-fit item van dat zichzelf
     midden in het beeld centreert — de bandtekst stond daardoor 271px naar
     binnen, los van het paginastramien. Met een expliciete breedte doet .balk
     weer gewoon zijn werk: max-width 1200, marge erlangs, en de tekst begint
     op exact dezelfde x als elke kop en alinea op de rest van de pagina. */
  display: grid; align-content: end;
  padding-block: clamp(22px, 4vw, 46px);
  background:
    linear-gradient(to top,
      rgba(76, 23, 28, .92) 0%,
      rgba(76, 23, 28, .55) 45%,
      rgba(76, 23, 28, .14) 78%,
      rgba(76, 23, 28, .04) 100%),
    linear-gradient(to right,
      rgba(76, 23, 28, .74) 0%,
      rgba(76, 23, 28, .26) 55%,
      rgba(76, 23, 28, 0)   85%);
  color: var(--bot);
  /* Elders op een donkere ondergrond is het bovenlabel vlam. Hier niet: dat
     haalt 3,4:1 op een egale kleur, en over een foto met lichte plekken is
     het gewoon niet te lezen. Bot wint het hier van het accent. */
  --label-kleur: var(--bot);
  --kop-accent: var(--vlam);
}
.beeldband__over > .balk { width: 100%; }
/* De kop draagt in de HTML óók .titel-m, zodat hij dezelfde maat, hetzelfde
   gewicht (530) en dezelfde negatieve letterspatiëring krijgt als elke andere
   kop op de site — hij stond hier op 500 zonder spatiëring en liep daardoor
   net iets losser dan de rest. Hieronder staat alleen wat bandeigen is; het
   cursieve accentwoord loopt via .titel-m em, en dus via --kop-accent. */
.beeldband__kreet { margin: .3em 0 0; max-width: 21ch; }
.beeldband__voet {
  margin: .9em 0 0;
  font-size: .95rem; line-height: 1.6;
  /* Zand-zacht is gemaakt voor een egale ossenbloed-ondergrond; over beeld
     is het te dof. Bijna bot dus, met net genoeg rust om onder de kop te
     blijven staan. */
  color: rgba(237, 228, 214, .9); max-width: 48ch;
}

@media (max-width: 700px) {
  /* Staand scherm: liever hoger beeld dan een streepje panorama. */
  .beeldband__media { aspect-ratio: 4 / 3.4; }
  /* De onderregel valt hier weg, dus de kop mag de vrijgekomen breedte hebben. */
  .beeldband__kreet { max-width: 20ch; }
  .beeldband__voet  { display: none; }
}

/* ============================================================
   13 · PAGINA-EIGEN BLOKKEN
   ============================================================ */

/* Cijferkaarten (homepage). */
.cijfer-kaart__getal {
  margin: 0;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.4rem, 3.8vw, 3.2rem); line-height: 1;
  color: var(--vlam);
  font-variant-numeric: tabular-nums;
}
.cijfer-kaart__label {
  margin: .6em 0 0;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--inkt-zacht);
}

/* Genummerde stappen op een donkere ondergrond. */
.stap__nr {
  margin: 0;
  font-family: var(--serif); font-style: italic;
  font-size: 2.3rem; line-height: 1; color: var(--vlam);
}
.stap__titel { margin: .5em 0 0; font-weight: 600; font-size: 1.06rem; }
.stap__tekst { margin: .4em 0 0; font-size: .93rem; line-height: 1.6; color: var(--zand-zacht); }
.sectie--licht .stap__tekst { color: var(--inkt-zacht); }

/* Brede stapregels (werkwijze): nummer links, uitleg rechts. */
.stapregel {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
  background: var(--bot-kaart);
  border-radius: var(--rond);
  padding: clamp(24px, 3.4vw, 40px);
}
.stapregel--donker { background: var(--ossenbloed); color: var(--bot); position: relative; overflow: hidden; }
.stapregel__nr {
  margin: 0; font-family: var(--serif); font-style: italic;
  font-size: 2.4rem; line-height: 1; color: var(--vlam);
}
.stapregel__wanneer {
  margin: .4em 0 0;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--inkt-zacht);
}
.stapregel--donker .stapregel__wanneer { color: var(--zand-zacht); }
.stapregel__titel { margin: 0; font-weight: 600; font-size: 1.15rem; }
.stapregel__tekst { margin: .5em 0 0; line-height: 1.65; color: var(--inkt-zacht); max-width: 64ch; }
.stapregel--donker .stapregel__tekst { color: var(--zand-zacht); }
.stapregel > *:not(.vlek) { position: relative; z-index: 1; }

@media (max-width: 560px) {
  .stapregel { grid-template-columns: 1fr; gap: 14px; }
}

/* Prijspaneel. */
.prijs {
  position: relative; margin: .4em 0 0;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3.2rem, 5.4vw, 4.4rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prijs--home { font-size: clamp(3.6rem, 6vw, 4.8rem); }
.prijs small {
  font-size: .3em; font-family: var(--sans); font-weight: 500;
  letter-spacing: .02em; color: var(--zand-zacht);
}
.prijs-kop {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.prijs-lijst {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 1.6em; font-size: .92rem;
}
.prijs-lijst li { display: flex; align-items: center; gap: 10px; }
.prijs-lijst .punt { --punt-maat: 12px; color: var(--vlam); }

/* Werkkaart op de homepage: schermafdruk boven, korte samenvatting eronder. */
.werkkaart { display: block; text-decoration: none; color: inherit; }
.werkkaart:hover { color: inherit; }
.werkkaart__beeld {
  display: block; overflow: hidden;
  border-radius: 12px;
  /* Eén verhouding voor elke kaart, ook al is de ene een staande
     advertentie en de andere een liggende schermafdruk. Zo blijven de
     koppen eronder op dezelfde hoogte staan. */
  aspect-ratio: 4 / 3;
  background: var(--ossenbloed);
  box-shadow: 0 10px 26px rgba(76, 23, 28, .14);
}
.werkkaart__beeld img {
  width: 100%; height: 100%;
  /* Linksboven verankeren: bij een schermafdruk blijft de kop dan heel,
     bij een staande advertentie zie je de bovenste helft met de kop erin. */
  object-fit: cover; object-position: left top;
  transition: transform .4s var(--veer);
}
.werkkaart:hover .werkkaart__beeld img { transform: scale(1.03); }
.werkkaart__naam {
  display: block; margin-top: .35em;
  font-family: var(--serif); font-weight: 530;
  font-size: 1.6rem; line-height: 1.1;
}
.werkkaart__wat {
  display: block; margin-top: .2em;
  font-size: .92rem; color: var(--inkt-zacht);
}
.werkkaart .kaart__tekst { margin-top: .7em; }
.werkkaart:hover .pijl-link { color: var(--vlam); }

/* Reviewkaart. */
.review { display: flex; flex-direction: column; gap: 16px; }
.review__aanhaling {
  margin: 0; font-family: var(--serif);
  font-size: 3.2rem; line-height: .4; color: var(--vlam);
}
.review blockquote {
  margin: 0; flex: 1;
  font-family: var(--serif); font-size: 1.22rem; line-height: 1.4;
}
.review figcaption { font-size: .85rem; color: var(--inkt-zacht); }
.review figcaption b { color: var(--sterk); font-weight: 600; }

/* Casekop en -cijfers. */
.case-tag {
  margin: 0; display: inline-block;
  border: 1.5px solid rgba(76, 23, 28, .3);
  border-radius: var(--rond-pil);
  padding: 7px 14px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--inkt-zacht);
}
.case-titel {
  margin: .5em 0 0;
  font-family: var(--serif); font-weight: 530;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.05;
}
.case-cijfers { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); margin-top: 1.6em; }
.case-cijfers__getal {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: 2.1rem; line-height: 1; color: var(--vlam);
  font-variant-numeric: tabular-nums;
}
.case-cijfers__label {
  margin: .45em 0 0;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--inkt-zacht);
}
.case-quote {
  margin: 1.6em 0 0;
  font-family: var(--serif); font-style: italic;
  font-size: 1.1rem; line-height: 1.5;
}
.case-quote span {
  font-family: var(--sans); font-style: normal;
  font-size: .85rem; color: var(--inkt-zacht);
}

/* Titel van een case die een eigen pagina heeft. */
.case-titel__link { color: inherit; text-decoration: none; }
.case-titel__link:hover { color: var(--vlam); }

/* Uitklapblok op /cases voor een case zonder eigen pagina. Native <details>,
   dus zonder JS gewoon werkend; alleen het standaarddriehoekje gaat weg. */
.uitklap {
  margin-top: 1.4em;
  background: var(--bot-kaart);
  border-radius: var(--rond-klein);
}
.uitklap__knop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-weight: 600; font-size: .98rem;
  color: var(--ossenbloed);
  cursor: pointer; list-style: none;
}
.uitklap__knop::-webkit-details-marker { display: none; }
.uitklap__knop:hover { color: var(--vlam); }
.uitklap__knop:focus-visible { outline: 2px solid var(--vlam); outline-offset: 2px; border-radius: var(--rond-klein); }
.uitklap__teken {
  flex: none;
  font-family: var(--serif); font-size: 1.4rem; line-height: 1;
  color: var(--vlam);
  transition: transform var(--vlot);
}
.uitklap[open] .uitklap__teken { transform: rotate(45deg); }
.uitklap__inhoud { padding: 0 20px 20px; }
.uitklap__inhoud .tekst:first-child { margin-top: 0; }

/* Slotblok met een CTA. */
.slot {
  position: relative; overflow: hidden;
  border-radius: 26px;
  padding: clamp(32px, 5vw, 60px);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 24px;
}
.slot > *:not(.vlek) { position: relative; z-index: 1; }
.slot__tekst { max-width: 54ch; }
.slot__tekst p { margin: .8em 0 0; line-height: 1.6; }

/* Smalle strook: partnervermelding. */
.strook {
  position: relative; overflow: hidden;
  background: var(--bot-kaart);
  border-radius: var(--rond);
  padding: clamp(24px, 3.4vw, 36px) clamp(24px, 3.4vw, 40px);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 16px;
}
.strook > *:not(.vlek) { position: relative; z-index: 1; }
.strook p { margin: 0; font-size: 1.02rem; line-height: 1.6; max-width: 56ch; }

/* Uitklapbare vragen. Zonder JS staat elk antwoord open — geen dode knoppen. */
.vragen { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(22px, 3vw, 32px); }
.vraag { background: var(--bot-kaart); border-radius: var(--rond-klein); overflow: hidden; }
.vraag__knop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; width: 100%;
  border: none; background: transparent;
  padding: 20px 22px;
  font: inherit; font-weight: 600; font-size: 1.02rem;
  color: var(--ossenbloed); text-align: left; cursor: pointer;
}
.vraag__teken {
  flex: none;
  font-family: var(--serif); font-size: 1.5rem; line-height: 1;
  color: var(--vlam);
  transition: transform var(--vlot);
}
.vraag__knop[aria-expanded="true"] .vraag__teken { transform: rotate(45deg); }
.vraag__antwoord { margin: 0; padding: 0 22px 22px; line-height: 1.65; color: var(--inkt-zacht); max-width: 64ch; }
html.js .vraag__antwoord[hidden] { display: none; }

/* Teamkaart met portret. */
.team-foto {
  width: 100%; aspect-ratio: 4 / 4.4;
  border-radius: 16px; overflow: hidden;
  background: var(--ossenbloed);
  position: relative;
}
.team-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Nog geen foto? Dan het beeldmerk als vlak, in plaats van een grijs gat. */
.team-foto--leeg::after {
  content: '';
  position: absolute; inset: 12%;
  background: var(--ossenbloed-op);
  -webkit-mask: url('../merk/lumar-beeldmerk-mono-bot.svg') no-repeat center / contain;
          mask: url('../merk/lumar-beeldmerk-mono-bot.svg') no-repeat center / contain;
}
.team-naam {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 18px; flex-wrap: wrap;
}
.team-naam h2 { margin: 0; font-family: var(--serif); font-weight: 530; font-size: 1.7rem; line-height: 1.1; }
.team-naam p  { margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--vlam-diep); }

/* Drie kernwoorden op donker. */
.woord { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--vlam); }
.woord + p { margin: .5em 0 0; line-height: 1.65; color: var(--zand-zacht); }

/* Genummerde belofte-regels (contact). */
.belofte { display: flex; gap: 14px; align-items: flex-start; }
.belofte__nr {
  flex: none; margin: 0;
  font-family: var(--serif); font-style: italic;
  font-size: 1.4rem; line-height: 1; color: var(--vlam);
}
.belofte p { margin: 0; line-height: 1.6; color: var(--inkt-zacht); max-width: 44ch; }

/* Kruimelpad: klein, rustig, direct onder de kop. */
.kruimels {
  font-size: .8rem;
  color: var(--inkt-zacht);
  padding-block: 14px 0;
}
.kruimels .balk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kruimels a { text-decoration: none; }
.kruimels a:hover { color: var(--vlam); text-decoration: underline; }
.kruimels span[aria-hidden] { color: rgba(76, 23, 28, .3); }
.kruimels [aria-current] { color: var(--ossenbloed); font-weight: 600; }

/* Verwante pagina's onderaan. */
.verder { border-top: 1px solid rgba(76, 23, 28, .12); }
.verder__kaart {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--bot-kaart);
  border-radius: var(--rond-klein);
  padding: 22px 24px;
  transition: transform var(--traag), background var(--vlot);
}
.verder__kaart:hover { transform: translateY(-3px); background: var(--bot-decor); color: inherit; }
.verder__titel {
  font-family: var(--serif); font-weight: 530;
  font-size: 1.25rem; line-height: 1.15;
}
.verder__tekst {
  margin-top: .45em;
  font-size: .9rem; line-height: 1.55;
  color: var(--inkt-zacht);
}
.verder__pijl { margin-top: .8em; color: var(--vlam); font-weight: 600; }

/* Lokale strook: waar we vandaan komen en waar we werken. */
.lokaal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.lokaal__plaatsen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1em; }
.lokaal__plaats {
  border: 1.5px solid rgba(76, 23, 28, .22);
  border-radius: var(--rond-pil);
  padding: 6px 14px;
  font-size: .82rem; color: var(--inkt-zacht);
}
.nap { font-style: normal; line-height: 1.8; }
.nap a { font-weight: 600; }

/* Eenvoudige tekstpagina (privacy, 404). */
.proza { max-width: 68ch; }
.proza h2 { margin: 2em 0 0; font-family: var(--serif); font-weight: 530; font-size: 1.5rem; line-height: 1.2; }
.proza p, .proza li { margin: .8em 0 0; line-height: 1.7; color: var(--inkt-zacht); }
.proza ul { margin-top: .4em; }
.proza li { padding-left: 1.2em; position: relative; }
.proza li::before { content: '—'; position: absolute; left: 0; color: var(--vlam); }
.proza a { color: var(--vlam-diep); font-weight: 500; }

/* ============================================================
   13b · BLOG & ARTIKELEN
   ============================================================ */

/* Kaart op de blogindex: de hele kaart is de link, zoals de werkkaarten. */
.blogkaart {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.blogkaart:hover { color: inherit; }
.blogkaart__titel {
  margin: .55em 0 0;
  font-family: var(--serif); font-weight: 530;
  font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.15;
}
.blogkaart__tekst { margin: .6em 0 0; font-size: .93rem; line-height: 1.6; color: var(--inkt-zacht); }
.blogkaart .pijl-link { margin-top: auto; padding-top: 1.2em; }

/* Metaregel boven een artikel en op de kaarten: onderwerp · datum · leestijd. */
.artikel-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 0; font-size: .8rem; color: var(--inkt-zacht);
}
.artikel-meta b {
  color: var(--label-kleur); font-weight: 700;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}

/* De lopende tekst van een artikel leunt op .proza; dit vult alleen aan. */
.artikel .proza { max-width: 72ch; }
.artikel .proza h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
.artikel .proza h3 { margin: 1.6em 0 0; font-size: 1.08rem; font-weight: 600; }
.artikel .proza b, .artikel .proza strong { color: var(--sterk); font-weight: 600; }

/* Tussentijdse verwijzing in een artikel: valt op zonder te onderbreken. */
.artikel-noot {
  margin: 1.8em 0 0;
  border-radius: var(--rond-klein);
  background: var(--bot-kaart);
  padding: 18px 22px;
  font-size: .95rem; line-height: 1.6;
}
.artikel-noot p { margin: 0; color: var(--inkt-zacht); }

/* ---- Vergelijkingstabel ------------------------------------------------
   Bewust een échte <table>: dit is tabeldata, en een schermlezer moet bij
   elke cel de juiste kolomkop kunnen noemen. Op een smal scherm schuift hij
   horizontaal door in plaats van de kolommen dood te knijpen. */
.vergelijk-plek {
  overflow-x: auto;
  border-radius: var(--rond);
  margin-top: clamp(26px, 3.5vw, 40px);
  /* Zonder dit knipt de border-radius de focusring van een link erin af. */
  -webkit-overflow-scrolling: touch;
}
.vergelijk {
  width: 100%; min-width: 640px;
  border-collapse: collapse;
  background: var(--bot-kaart);
  font-size: .95rem;
}
.vergelijk th,
.vergelijk td {
  padding: 16px clamp(14px, 2vw, 22px);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(76, 23, 28, .12);
}
.vergelijk thead th {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--inkt-zacht);
}
.vergelijk tbody th { font-weight: 600; color: var(--ossenbloed); }
.vergelijk td { color: var(--inkt-zacht); }
.vergelijk tr:last-child th,
.vergelijk tr:last-child td { border-bottom: none; }

/* De eigen kolom staat eruit — dat is waar de pagina over gaat. */
.vergelijk__wij {
  background: var(--ossenbloed);
  border-bottom-color: rgba(237, 228, 214, .16);
}
.vergelijk thead .vergelijk__wij { color: var(--vlam); }
.vergelijk tbody .vergelijk__wij { color: var(--bot); font-weight: 600; }

/* ---- Wel/niet-lijst ----------------------------------------------------
   Het teken vóór de regel doet het werk; de betekenis staat in de tekst
   zelf, zodat de kleur nooit de enige drager is. */
.welniet {
  margin: 1.1em 0 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
}
/* Het teken staat absoluut, niet als flex-item. In een flex-container wordt
   elk element een eigen item, en dan valt een <a> middenin de regel uit de
   zin — inline tekst met een link erin moet gewoon inline blijven lopen. */
.welniet li {
  position: relative; padding-left: 32px;
  font-size: .95rem; line-height: 1.6; color: var(--inkt-zacht);
}
.welniet__teken {
  position: absolute; left: 0; top: .12em;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; line-height: 1;
}
.welniet--wel  .welniet__teken { background: var(--vlam); color: var(--bot); }
.welniet--niet .welniet__teken { background: rgba(76, 23, 28, .14); color: var(--ossenbloed); }
.kaart--donker .welniet li { color: var(--zand-zacht); }
.kaart--donker .welniet--niet .welniet__teken { background: rgba(237, 228, 214, .18); color: var(--bot); }

/* ============================================================
   14 · BEWEGING
   ============================================================ */
@keyframes rijIn     { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@keyframes stempelIn { 0% { opacity: 0; transform: scale(.9); } 70% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lijnTeken { from { background-size: 0% .09em; } to { background-size: 100% .09em; } }
@keyframes loopBand  { to { transform: translateX(-50%); } }

/* De hero-elementen komen in volgorde binnen. Alleen boven de vouw, dus
   zonder observer — ze staan er toch al bij het laden. */
.rij-in    { animation: rijIn .45s var(--veer) both; }
.rij-in--1 { animation-delay: .10s; }
.rij-in--2 { animation-delay: .20s; }
.rij-in--3 { animation-delay: .30s; }
.rij-in--4 { animation-delay: .38s; }
.streep--teken { animation: lijnTeken .5s .75s var(--veer) forwards; }
.stempel-in    { animation: stempelIn .4s var(--veer) both; }
.stempel-in--1 { animation-delay: .55s; }
.stempel-in--2 { animation-delay: .68s; }
.stempel-in--3 { animation-delay: .80s; }

/* Alles onder de vouw komt binnen zodra het in beeld schuift. Het startpunt
   wordt pas gezet als JS draait, anders blijft de pagina zonder JS leeg. */
html.js .onthul { opacity: 0; transform: translateY(1.2em); }
html.js .onthul--zichtbaar {
  opacity: 1; transform: none;
  transition: opacity .55s var(--veer), transform .55s var(--veer);
}

/* "Reduced motion" gaat over béweging, niet over vormgeving. De scheve stand
   van de kaarten blijft dus staan — die beweegt niet. Wat weggaat: animaties,
   overgangen, de eindeloos schuivende loopband en het onthullen bij scrollen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* De band schuift niet meer; toon dan gewoon de eerste set. */
  .band__spoor { animation: none; transform: none; }

  /* site.js start de sfeervideo hier al niet, maar mocht hij toch in het
     document staan: weg ermee, dan blijft de foto over. */
  .beeldband__video { display: none; }

  /* Hover mag de kaart niet meer laten opveren of rechtdraaien. */
  .kaart--scheef:nth-child(4n+1):hover { transform: rotate(calc(var(--kier, .55deg) * -1)); }
  .kaart--scheef:nth-child(4n+2):hover { transform: rotate(calc(var(--kier, .55deg) *  .9)); }
  .kaart--scheef:nth-child(4n+3):hover { transform: rotate(calc(var(--kier, .55deg) * -.75)); }
  .kaart--scheef:nth-child(4n):hover   { transform: rotate(var(--kier, .55deg)); }

  /* De streep onder de kop staat er meteen, in plaats van getekend te worden. */
  .streep { background-size: 100% .09em; }

  /* Niets verstopt houden achter een scroll-animatie die niet komt. */
  html.js .onthul { opacity: 1; transform: none; }
}

/* ============================================================
   15 · PRINT
   ============================================================ */
@media print {
  .site-kop, .site-voet, .band, .vlek, .knop-rij, .menu-knop { display: none !important; }
  body { background: #fff; color: #000; }
  .kaart, .stapregel { break-inside: avoid; border: 1px solid #ccc; }
}

/* ============================================================
   19 · COOKIEKEUZE
   Kaartje linksonder in de huisstijl: ossenbloed, een halve graad scheef,
   twee gelijke knoppen (weigeren is even makkelijk als toestaan). Niet
   blokkerend: de pagina blijft gewoon te lezen en te scrollen.
   ============================================================ */
.cookies {
  position: fixed; z-index: 70;
  left: var(--marge); bottom: 20px;
  width: min(430px, calc(100% - 2 * var(--marge)));
  background: var(--ossenbloed); color: var(--bot);
  border-radius: var(--rond);
  padding: 22px 24px 24px;
  box-shadow: var(--schaduw-kaart);
  transform: rotate(-.4deg);
  animation: cookiesIn .4s var(--veer) both;
}
.cookies[hidden] { display: none; }
.cookies__titel {
  margin: 0;
  font-family: var(--serif); font-weight: 530;
  font-size: 1.4rem; line-height: 1.15;
}
.cookies__tekst { margin: .6em 0 0; font-size: .92rem; line-height: 1.55; color: var(--zand-zacht); }
.cookies__tekst a { color: var(--bot); }
.cookies__tekst a:hover { color: var(--vlam-op); }
.cookies__knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.1em; }
.cookies .knop { padding: 11px 20px; font-size: .95rem; }
.cookies :focus-visible { outline-color: var(--bot); }

@keyframes cookiesIn {
  from { opacity: 0; transform: translateY(18px) rotate(-.4deg); }
  to   { opacity: 1; transform: rotate(-.4deg); }
}
@media (max-width: 560px) {
  .cookies { left: 12px; bottom: 12px; width: calc(100% - 24px); padding: 18px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cookies { animation: none; }
}
@media print {
  .cookies { display: none; }
}