/* ══════════════════════════════════════════════════════════════
   MAHOWA — landing page
   Licht, warm, minimaal. Typografie draagt de pagina.
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --ivory:      #F6F2EC;
  --ivory-hi:   #FBF9F5;
  --sand:       #EDE6DA;
  --sand-deep:  #E3D9C9;
  --oak:        #C9A87C;
  /* Eik als tekst ("je bespaart ..."): donker genoeg om te lezen, 6,6:1 op ivoor. */
  --oak-donker: #6B5028;
  --ink:        #211E1A;
  /* Tekst in drie tinten, en elke tint heeft een taak (19 september 2026):
       --ink    rol A, B, E, F: titels, productnamen, prijzen, knoppen   15:1
       --ink-2  rol C: lopende tekst, namen in tabellen, labels          11:1
       --ink-3  rol D: bijzaak die je mag missen, nooit iets wat telt     7:1
     De verhoudingen gelden op ivoor; op zand liggen ze iets lager en
     blijven ze boven 6:1. Eerder stond inkt 3 op 5:1 en stond bijna alles
     in een dunne letter; samen las dat als grijs op beige. */
  --ink-2:      #3A352E;
  --ink-3:      #595248;
  --line:       rgba(33, 30, 26, .16);
  --line-soft:  rgba(33, 30, 26, .08);
  /* Een rand die iets bedient: de tweede knop, de onderlijn van een link.
     Zichtbaar genoeg om te zien dat je erop kan klikken. */
  --lijn-sterk: rgba(33, 30, 26, .36);

  --font-display: "Jost", "Futura", "Century Gothic", sans-serif;
  --font-body: "Inter", "Helvetica Neue", -apple-system, "Segoe UI", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1340px;
  --section-y: clamp(76px, 11vw, 168px);
  --header-h: 76px;

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Eén ronding voor het hele scherm: fotokaders, knoppen,
     invulvelden en keuzevakken. Nergens een scherpe hoek. */
  --beeldronding: 4px;
  /* Op 4 px was de ronding er wel, maar zag je haar niet: alles oogde
     hoekig. 7 px is genoeg om zacht te lezen en te weinig om speels te
     worden — dit blijft een winkel in massief eiken, geen app. */
  --vormronding: 7px;
}

@media (min-width: 900px) { :root { --header-h: 88px; } }

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Componenten met een eigen display (flex, grid) overrulen anders het
   hidden-attribuut — dan blijft "verborgen" inhoud gewoon staan. */
[hidden] { display: none !important; }

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--ivory);
  padding: 10px 18px; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ── Layout helpers ─────────────────────────────────────────── */
.u-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--flush { padding-bottom: 0; }
.section--sand { background: var(--sand); }
.section--dim { background: var(--ivory-hi); }

.measure { max-width: 62ch; }
.measure--center { margin-inline: auto; text-align: center; }
.measure p + p { margin-top: 1.1em; }

/* ── Typografie ─────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: clamp(18px, 2.4vw, 30px);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  /* De titel is nu één korte regel: "Find your piece." Daardoor mag ze
     groter dan vroeger. De bovengrens is gemeten op de linkerkolom van de
     hero (644 px bij een venster van 1280), met marge voor het geval Jost
     niet laadt en een vervangend lettertype breder uitvalt. */
  font-size: clamp(2.8rem, 6.4vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -.018em;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.95rem, 4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.012em;
}

.statement {
  /* Verdeelt een gecentreerde kop over even lange regels, zodat er geen
     los woord onderaan blijft hangen. Browsers die het niet kennen breken
     gewoon zoals vroeger. */
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -.018em;
  text-align: center;
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: clamp(28px, 4vw, 56px);
}

.lead {
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink-2);
}

p { color: var(--ink-2); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.02rem;
  /* De afstand staat in een variabele omdat de A zonder dwarsbalk geen
     letter is maar een vlak: letter-spacing wordt daar niet achter gezet,
     dus die haalt hem hier op als marge. Anders plakt de A tegen de H. */
  --wm-spatie: .38em;
  letter-spacing: var(--wm-spatie);
  text-indent: var(--wm-spatie);
  color: var(--kopmerk, var(--ink));
  white-space: nowrap;
}
.wordmark--lg { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }

.section-head { margin-bottom: clamp(40px, 6vw, 76px); }
.section-head .h2 { margin-bottom: clamp(20px, 2.6vw, 34px); }
.section-head--row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: clamp(26px, 3vw, 40px);
}
.section-head--row .eyebrow { margin-bottom: 0; }

/* ── Knoppen ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 30px;
  border: 1px solid var(--ink);
  border-radius: var(--vormronding);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--solid { background: var(--ink); color: var(--ivory); }
.btn--solid:hover { background: #000; border-color: #000; }
/* De tweede knop: zelfde vorm, lichtere rand. Naast een volle knop is
   meteen duidelijk welke de hoofdweg is. */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--lijn-sterk); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--sm { padding: 13px 22px; font-size: .72rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Dicht, niet doorschijnend. Met 88 % en een waas eroverheen schemerde
   de tekst van de pagina er bij het scrollen wazig doorheen: op een
   telefoon leest dat als een kapotte balk, niet als glas. */
.site-header.is-stuck {
  background: var(--ivory);
  border-bottom-color: var(--line-soft);
}

.site-header__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.nav { display: none; gap: clamp(20px, 2.4vw, 38px); }
.nav a {
  font-size: .92rem; letter-spacing: .01em; color: var(--kopmerk, var(--ink));
  position: relative; padding-block: 4px;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--kopmerk, var(--ink)); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav a:hover { color: var(--kopmerk, var(--ink)); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.header-tools { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); }

/* ── Taal bovenaan ──────────────────────────────────────────────
   Onderaan in de voet vond niemand ze. Breed scherm: NL EN FR naast het
   account. Telefoon: één knop naast de burger die een lijstje opent — zie
   taalkop() en taalmenu() in build_site.py.
   De kleur komt van --kopmerk, net als het woordmerk: wit zolang de kop
   over de foto ligt, inkt daarna. De andere talen zijn gedimd in plaats
   van grijs, zodat dat op beide ondergronden klopt. */
/* De letterafstand staat ook achter de laatste letter. Links evenveel extra
   opvulling, anders staan de codes en hun streepje scheef. */
.taalkop { --tk: 5px; display: none; align-items: center; gap: 2px; margin-right: 4px; }
.taalkop a, .taalkop span {
  position: relative;
  padding: 8px var(--tk) 8px calc(var(--tk) + .16em);
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .16em; line-height: 1;
  color: var(--kopmerk, var(--ink));
}
/* De andere talen gedimd, niet verdwenen: 62 % las als uitgeschakeld. */
.taalkop a { opacity: .74; transition: opacity .3s var(--ease); }
.taalkop a:hover, .taalkop a:focus-visible { opacity: 1; }
.taalkop span::after {
  content: ""; position: absolute; left: calc(var(--tk) + .16em); right: calc(var(--tk) + .16em);
  bottom: 3px; height: 1px; background: currentColor;
}

.kop-links { display: flex; align-items: center; gap: 2px; }

.taalmenu { position: relative; }
.taalmenu > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 8px;
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em;
  color: var(--kopmerk, var(--ink));
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
.taalmenu > summary::-webkit-details-marker { display: none; }
.taalmenu > summary::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .25s var(--ease), margin .25s var(--ease);
}
.taalmenu[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.taalmenu__lijst {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
  min-width: 168px; padding: 6px 0;
  display: flex; flex-direction: column;
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: var(--vormronding);
  box-shadow: 0 14px 34px rgba(33, 29, 24, .12);
}
.taalmenu__lijst a, .taalmenu__lijst span {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 0 16px;
  font-size: .92rem; color: var(--ink-2);
}
.taalmenu__lijst a:active { background: var(--line-soft); }
.taalmenu__lijst span { color: var(--ink); }
.taalmenu__lijst span::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

.header-cta { display: none; }

.burger {
  width: 40px; height: 40px; margin-right: -8px;
  display: grid; place-content: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
}
.burger span {
  display: block; width: 22px; height: 1px; background: var(--kopmerk, var(--ink));
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (min-width: 900px) {
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
  .burger { display: none; }
  .kop-links { display: none; }
  .taalkop { display: flex; }
}

/* Een menukeuze over twee regels leest als twee keuzes. Tussen 900 en
   1200 px is het met de taalkeuze erbij krap — in het Frans ("À propos de
   MAHOWA") brak de kop af — dus daar iets minder lucht tussen de links. */
.nav a { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1199px) {
  .nav { gap: 16px; }
  .header-tools { gap: 10px; }
  .taalkop { --tk: 4px; margin-right: 0; }
}

/* ── Mobiel menu ────────────────────────────────────────────── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ivory);
  padding: calc(var(--header-h) + 24px) var(--gutter) 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px;
  /* Tien keuzes plus een knop passen op een korte telefoon niet altijd. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Staat de demobalk aan, dan schuift alles nog een balk naar beneden. */
body.heeft-meldbalk .mobile-menu {
  padding-top: calc(var(--meld-h) + var(--header-h) + 24px);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; }
/* De grote regels: de directe keuzes en de twee laden. Niet álle links
   meer — de links ín een lade zijn een niveau lager en horen kleiner. */
.mobile-menu nav > a,
.mobile-menu nav > details > summary {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.35;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--line-soft);
  padding-block: 10px;
}

/* ── De laden Shop en Meer op de telefoon ──────────────────────
   Het pijltje is geen teken uit een lettertype maar twee randen van een
   leeg vierkant, een halve slag gedraaid: dat staat op elk toestel gelijk
   en draait mee als de lade opengaat. */
.mobile-menu nav > details > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; cursor: pointer; list-style: none;
}
.mobile-menu nav > details > summary::-webkit-details-marker { display: none; }
.mobile-menu nav > details > summary::after {
  content: ""; flex: none;
  width: .38em; height: .38em; margin-right: .2em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.mobile-menu nav > details[open] > summary::after { transform: rotate(-135deg); }

.mnav__sub { display: flex; flex-direction: column; padding: 4px 0 16px; }
.mnav__sub a {
  font-size: 1.1rem; line-height: 1.5; color: var(--ink-2);
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mnav__sub a:last-child { border-bottom: 0; }
.mobile-menu .btn { align-self: flex-start; }

/* ── Het openingsscherm ─────────────────────────────────────
   De opening van de homepagina staat verderop bij .hero2: links de
   boodschap, rechts de plank. Hier stond de vorige: een foto over de volle
   breedte, de tekst eronder en een witte kopbalk daaroverheen
   (.beeldhero, .hero__copy, .hero__grid, body.has-hero, .facts). Die
   klassen staan op geen enkele pagina meer. */

/* ── Media wrappers ─────────────────────────────────────────── */
/* <picture> is standaard inline: zonder display:block heeft een
   percentage-hoogte op de <img> geen houvast en vult de foto het
   kader niet. */
.media, .bleed { }
.media picture, .bleed picture,
.gallery__item picture { display: block; width: 100%; height: 100%; }

.media { overflow: hidden; background: var(--sand-deep); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--8x5 { aspect-ratio: 8 / 5; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--2x5 { aspect-ratio: 2 / 5; }
.media--auto { aspect-ratio: auto; }
.media--auto img { height: auto; }
/* bijsturen waar het onderwerp niet in het midden van de foto zit */
.media--low img { object-position: 50% 82%; }

/* Uitgeknipte opname (PNG/WebP met doorzichtigheid). Het kader krijgt geen
   vlak meer: het stuk staat op de paginakleur zelf. Bijsnijden mag hier
   niet — met `cover` valt er een stuk van de rand weg, en juist die rand
   is het onderwerp. */
.media--vrij { background: transparent; }
.media--vrij img { object-fit: contain; }

@media (hover: hover) {
  .block:hover .media img,
  .gallery__item:hover img,
  .proof:hover .media img { transform: scale(1.035); }
}

.bleed { width: 100%; margin-top: clamp(40px, 6vw, 76px); }
.bleed img { width: 100%; height: clamp(280px, 52vh, 640px); object-fit: cover; }
.bleed--tall img { height: clamp(300px, 58vh, 700px); object-position: 50% 55%; }

/* ── Blokken (3-up) ─────────────────────────────────────────── */
.blocks { display: grid; gap: clamp(28px, 3.4vw, 44px); }
@media (min-width: 860px) { .blocks { grid-template-columns: repeat(3, 1fr); } }

.block__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.05rem; letter-spacing: .01em;
  margin-top: 22px;
}
.block__text { font-size: .95rem; color: var(--ink-3); margin-top: 6px; }

/* ── Split-secties ──────────────────────────────────────────── */
.split { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__text { order: 2; }
  .split--narrowmedia { grid-template-columns: .68fr 1fr; align-items: start; }
}
.split__text > p { margin-top: 1.1em; max-width: 52ch; }
.split__text .h2 + p { margin-top: clamp(20px, 2.4vw, 30px); }
.split__text .btn { margin-top: clamp(28px, 3.4vw, 40px); }

/* Specificaties */
.specs {
  margin-top: clamp(30px, 3.6vw, 44px);
  border-top: 1px solid var(--line);
}
.specs > div {
  display: grid; gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 600px) {
  .specs > div { grid-template-columns: 9rem 1fr; gap: 24px; align-items: baseline; }
}
.specs dt {
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.specs dd { margin: 0; font-size: .97rem; color: var(--ink-2); }

/* Rand-profielen */
.edges { display: flex; gap: clamp(24px, 4vw, 48px); margin-top: clamp(28px, 3.4vw, 40px); }
.edge { flex: 0 1 220px; color: var(--ink-2); }
.edge svg { width: 100%; height: auto; color: var(--ink); }
.edge span {
  display: block; margin-top: 10px;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

/* ── Macro-raster (het hout) ────────────────────────────────── */
.macro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  align-items: start;
}
@media (min-width: 760px) {
  /* Twee gelijke kaders naast het citaat. Vroeger stonden hier vier
     kolommen met kaders van verschillende hoogte; met align-items:end
     gaf dat een trap met een gat linksboven. */
  .macro { grid-template-columns: repeat(3, 1fr); align-items: end; }
}
.macro__item figcaption {
  margin-top: 12px;
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.macro__quote { display: flex; align-items: flex-end; height: 100%; }
.macro__quote p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.4;
  letter-spacing: -.005em; color: var(--ink);
}
@media (max-width: 759px) {
  /* op twee kolommen even hoge kaders, anders ontstaan er gaten */
  .macro__item .media { aspect-ratio: 4 / 5; }
  .macro__quote { margin-top: 8px; }
}

/* ── Statement-sectie ───────────────────────────────────────── */
.section--statement { text-align: center; }
.section--statement .measure { margin-inline: auto; }
.triple {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 3vw, 44px);
  margin-top: clamp(34px, 4.4vw, 56px);
}
.triple li {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  position: relative;
}
.triple li + li::before {
  content: "·"; position: absolute; left: calc(clamp(16px, 3vw, 44px) / -2 - 3px);
  color: var(--line);
}

/* ── Stappen ────────────────────────────────────────────────── */
.steps {
  display: grid; gap: 0;
  margin-top: clamp(44px, 6vw, 82px);
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.steps li {
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 860px) {
  .steps li {
    border-bottom: 0; border-left: 1px solid var(--line-soft);
    padding-inline: clamp(16px, 1.8vw, 26px);
  }
  .steps li:first-child { border-left: 0; padding-left: 0; }
}
.steps__n {
  display: block;
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .2em; color: var(--ink-3); margin-bottom: 14px;
}
.steps h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.02rem; letter-spacing: .02em; margin-bottom: 8px;
}
.steps p { font-size: .93rem; color: var(--ink-3); line-height: 1.6; }

/* ── Foto voor verzending ───────────────────────────────────── */
.proof figcaption {
  margin-top: 14px;
  font-size: .86rem; color: var(--ink-3); letter-spacing: .01em;
}

/* ── Twee kolommen ──────────────────────────────────────────── */
.two-col { display: grid; gap: clamp(26px, 4vw, 72px); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } }
.two-col .measure p + p { margin-top: 1.1em; }
.story__place { margin-top: 1.6em; color: var(--ink-3); font-size: .95rem; }

.excl__tag {
  margin-top: clamp(24px, 3vw, 34px);
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}

/* ── Galerij ────────────────────────────────────────────────── */
.gallery {
  display: flex; align-items: flex-start; gap: clamp(12px, 1.6vw, 22px);
  overflow-x: auto; overflow-y: hidden;
  /* laat de strip links uitlijnen met de tekstkolom, ook boven 1340px */
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-bottom: clamp(60px, 8vw, 110px);
  /* zonder scroll-padding schuift snapping de eerste foto onder de linkermarge */
  scroll-padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.gallery::-webkit-scrollbar { height: 3px; }
.gallery::-webkit-scrollbar-thumb { background: var(--line); }
.gallery__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--sand-deep);
}
.gallery__item img {
  height: clamp(240px, 40vh, 420px); width: auto;
  object-fit: cover; transition: transform 1.1s var(--ease);
}
.gallery__hint { font-size: .78rem; color: var(--ink-3); letter-spacing: .04em; }

/* ── Formulier ──────────────────────────────────────────────── */
.form { margin-top: clamp(12px, 2vw, 24px); max-width: 860px; }
.form__row { display: grid; gap: clamp(18px, 2.2vw, 28px); }
@media (min-width: 700px) {
  .form__row { grid-template-columns: 1fr 1fr; }
  .form__row--3 { grid-template-columns: repeat(3, 1fr); }
}
.field { margin-bottom: clamp(18px, 2.2vw, 28px); }
.form__row .field { margin-bottom: 0; }
.form__row + .form__row, .form__row + .field { margin-top: clamp(18px, 2.2vw, 28px); }

.field label {
  display: block;
  font-family: var(--font-display); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 9px;
}
.field .opt { letter-spacing: .06em; text-transform: none; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  /* Vroeger stond hier enkel een onderlijn op een doorzichtig vlak. Een leeg
     veld leek daardoor een gat in de bladspiegel in plaats van iets waar je
     in kan typen. Nu heeft elk veld een eigen, rustig vlak. */
  background-color: var(--ivory-hi);
  border: 1px solid var(--line-soft);
  border-radius: var(--vormronding);
  padding: 12px 14px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 400;
  color: var(--ink);
  transition: border-color .3s var(--ease);
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.field textarea { resize: vertical; line-height: 1.65; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink);
}
/* opacity: 1 nodig voor Firefox, dat placeholders standaard vervaagt */
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field.is-invalid input, .field.is-invalid select { border-color: #9A4A32; }

.field__err { margin-top: 7px; font-size: .82rem; color: #9A4A32; }
.field__note { margin-top: 9px; font-size: .86rem; color: var(--ink-3); }
/* Een bestandsveld ziet er in elke browser anders uit — en nergens zoals de
   rest van deze site. Het echte veld ligt onzichtbaar over de hele rij, zodat
   een klik overal werkt en het toetsenbord er gewoon bij kan. */
.filepick {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px;
}
.filepick__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.filepick__btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line); border-radius: var(--vormronding);
  background: var(--ivory-hi);
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.filepick:hover .filepick__btn { border-color: var(--ink-3); }
.filepick__name { font-size: .88rem; color: var(--ink-3); }
.filepick.has-file .filepick__name { color: var(--ink-2); }
.filepick__input:focus-visible ~ .filepick__btn {
  outline: 2px solid var(--ink); outline-offset: 3px;
}

.form__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
  margin-top: clamp(26px, 3.2vw, 38px);
}
.form__privacy { font-size: .82rem; color: var(--ink-3); max-width: 38ch; }
.form__status { margin-top: 20px; font-size: .95rem; color: var(--ink); }
.form__status:empty { margin-top: 0; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--ivory);
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(52px, 7vw, 96px) clamp(28px, 3vw, 40px);
}
.site-footer__top { display: grid; gap: clamp(36px, 5vw, 64px); }
@media (min-width: 860px) { .site-footer__top { grid-template-columns: 1fr 1.1fr; } }
.site-footer__tag { margin-top: 18px; max-width: 34ch; font-size: .95rem; color: var(--ink-3); }

.site-footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (min-width: 560px) { .site-footer__nav { grid-template-columns: repeat(3, 1fr); } }
.site-footer__h {
  font-family: var(--font-display); font-weight: 500; font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 16px;
}
.site-footer__nav li + li { margin-top: 9px; }
.site-footer__nav a {
  font-size: .95rem; color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.site-footer__nav a:hover { color: var(--ink); border-bottom-color: var(--line); }

.site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(46px, 6vw, 80px);
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem; letter-spacing: .06em; color: var(--ink-3);
}
.site-footer__bottom p { color: inherit; }

/* ── Reveal-animatie ────────────────────────────────────────── */
/* Alleen verbergen wanneer JavaScript draait (.js-ready wordt in de <head>
   gezet); zonder JS is de volledige pagina meteen leesbaar. */
.js-ready .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js-ready .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal { opacity: 1; transform: none; transition: none; }
  .media img, .gallery__item img { transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   Aanraking en respons

   Op een telefoon bestaat hover niet. Zonder een zichtbaar
   antwoord op je vinger voelt een knop dood aan — je drukt nog
   eens, en dan twijfel je aan de winkel. Elke bedienbare zone
   krijgt daarom een eigen, korte reactie op indrukken.
   ══════════════════════════════════════════════════════════════ */

/* De blauwe systeemflits van de browser vervangen we door iets
   dat bij het merk past. */
a, button, input, select, textarea, summary, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

.btn {
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .14s var(--ease);
}
.btn:active { transform: scale(.982); }

.icon-btn { transition: color .3s var(--ease), transform .14s var(--ease); }
.icon-btn:active { transform: scale(.9); }

.burger:active { transform: scale(.92); }
.crumbs a:active, .link:active { opacity: .6; }

/* Raakvlakken van minstens 44 px op een telefoon — kleiner dan
   dat mis je met een duim. */
@media (max-width: 760px) {
  .icon-btn { min-width: 44px; min-height: 44px; }
  .crumbs a { padding: 4px 0; }
}

/* ── Gespreid verschijnen ────────────────────────────────────
   Een rij kaarten die in één klap verschijnt, leest als een
   scherm dat aanspringt. Een kort verschil per kaart leest als
   iets dat zich ontvouwt. Meer dan een tiende seconde per stap
   wordt ongeduldig. */
@media (prefers-reduced-motion: no-preference) {
  .js-ready .reveal .collection,
  .js-ready .reveal .pcard,
  .js-ready .reveal .rcard,
  .js-ready .reveal .tier,
  .js-ready .reveal .routes li,
  .js-ready .reveal .pillars li {
    transition: opacity .75s var(--ease), transform .75s var(--ease);
  }
  .js-ready .reveal:not(.is-in) .collection,
  .js-ready .reveal:not(.is-in) .pcard,
  .js-ready .reveal:not(.is-in) .rcard,
  .js-ready .reveal:not(.is-in) .tier,
  .js-ready .reveal:not(.is-in) .routes li,
  .js-ready .reveal:not(.is-in) .pillars li {
    opacity: 0; transform: translateY(12px);
  }

  .js-ready .reveal.is-in > *:nth-child(2) { transition-delay: .08s; }
  .js-ready .reveal.is-in > *:nth-child(3) { transition-delay: .16s; }
  .js-ready .reveal.is-in > *:nth-child(4) { transition-delay: .24s; }
  .js-ready .reveal.is-in > *:nth-child(5) { transition-delay: .32s; }
  .js-ready .reveal.is-in > *:nth-child(6) { transition-delay: .40s; }
}

/* ── Teller in de winkelmand ─────────────────────────────────
   Het enige moment waarop de site je feliciteert: er is iets
   bijgekomen. Eén korte stoot, geen feestje. */
@keyframes cartBump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}
.cart-count.is-bump { animation: cartBump .44s var(--ease); }
@media (prefers-reduced-motion: reduce) { .cart-count.is-bump { animation: none; } }

/* Raakvlakken die net te klein waren voor een duim. */
@media (max-width: 899px) {
  .burger { width: 44px; height: 44px; margin-right: -10px; }
  .wordmark { padding-block: 8px; }
}

/* Invulvelden op een telefoon: 44 px hoog, en tekst van 16 px zodat
   iOS niet inzoomt zodra je in een veld tikt. */
@media (max-width: 760px) {
  .field input, .field select, .field textarea { min-height: 44px; font-size: 16px; }
}

@media (max-width: 760px) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 44px; padding-block: 0; }
}


/* ══════════════════════════════════════════════════════════════
   De band die zegt waar je naar zocht

   De enige donkere vlakte van de site. Ze staat op de plek waar een
   bezoeker beslist of dit zijn winkel is, en ze is donker omdat een
   pagina zonder één zwaar vlak nergens een midden heeft.
   ══════════════════════════════════════════════════════════════ */
/* Het manifest staat gecentreerd. Links uitgelijnd liet dit blok de halve
   pagina leeg, en juist hier staat geen beeld dat die helft vult — het is
   alleen tekst op zwart. Gecentreerd draagt de zwarte band de tekst in
   plaats van hem in een hoek te duwen.

   De regelbreedte gaat daarbij omlaag van 58 naar 52 tekens: een
   gecentreerde alinea is aan beide kanten rafelig, en hoe langer de regel
   hoe onrustiger dat leest. Korter maakt het midden bewust in plaats van
   toevallig. */
.manifest {
  background: var(--ink);
  color: var(--ivory);
  padding-block: clamp(64px, 9vw, 132px);
  text-align: center;
}
.manifest__eyebrow {
  font-family: var(--font-display); font-size: .72rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(246, 242, 236, .62);
  margin-bottom: clamp(22px, 3vw, 34px);
}
.manifest__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.08;
  letter-spacing: -.018em; color: var(--ivory);
  margin-bottom: clamp(30px, 4vw, 50px);
}
.manifest__body { max-width: 52ch; margin-inline: auto; }
.manifest__body p {
  color: rgba(246, 242, 236, .82);
  font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.7;
}
.manifest__body p + p { margin-top: 1.15em; }

.manifest__close {
  max-width: 52ch; margin-inline: auto;
  margin-top: clamp(34px, 4.4vw, 56px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid rgba(246, 242, 236, .28);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.24;
  letter-spacing: -.01em; color: var(--ivory);
}

/* De twee knoppen in de hero pasten net wel of net niet naast elkaar —
   afhankelijk van het scherm sprong de tweede naar een nieuwe regel. Nu
   staan ze bewust onder elkaar, even breed. Rustiger, en op elk scherm
   hetzelfde. */

/* ══════════════════════════════════════════════════════════════
   Beeldkaders — een nauwelijks zichtbare ronding

   Niet als versiering: een kaart met een haarscherpe hoek leest als
   een uitsnede, met een lichte ronding als een object. Klein genoeg
   om niet op te vallen, groot genoeg om te voelen.
   ══════════════════════════════════════════════════════════════ */

.media,
.pcard__media,
.collection__media,
.rcard__media,
.piece-card__media,
.pdp__main,
.piece__main,
.ex-main,
.contact-aside__media,
.split__media .media,
.insp figure,
.piece__view {
  border-radius: var(--beeldronding);
  overflow: hidden;
}

/* De heldfoto en volle-breedte banden blijven recht: daar zou een
   ronding op de schermrand juist opvallen. */
.section--sand .media--full,
.workshop-wide { border-radius: 0; }

/* De knoppen en de resterende bedienbare vlakken krijgen dezelfde hoek als
   alles daarboven — geen scherpe rechthoeken meer op de site. */
.btn,
.chip,
.mount,
.choice,
.stepper,
.filepick__btn,
.piece__view,
.catalog__sort select,
.field input,
.field select,
.field textarea { border-radius: var(--vormronding); }

/* De vlakken die een eigen kader tekenen. Opgezocht door de stylesheets af
   te lopen op regels die een achtergrond of omtrek zetten zonder ronding. */
.nav__menu,
.mount__img,
.mount-item,
.mount-item__img,
.mount-preview li,
.summary__done,
.notice,
.cart-sum,
.checkout-sum,
.checkout-result pre,
.tier,
.nosize,
.pdp__noscript,
.ex-edition,
.ex-sold,
.ex-plate,
.piece-card__stamp,
.search__thumb--empty,
.gallery__item,
.insp--6 picture,
.ways--shop .collection--dark { border-radius: var(--vormronding); }

/* Het uitklapmenu vult zijn regels bij hover over de volle breedte; zonder
   dit loopt die vulling over de afgeronde hoek heen. */
.nav__menu { overflow: hidden; }

/* Twee vlakken liggen tegen de schermrand. Daar wordt alleen de kant
   afgerond die vrij ligt — een ronding op de schermrand valt juist op. */
.buybar { border-radius: var(--vormronding) var(--vormronding) 0 0; }
.panel__box { border-radius: var(--vormronding) 0 0 var(--vormronding); }

/* De ronding zit al op de rij; de knoppen erin mogen hem niet doorbreken. */
.stepper button:first-child {
  border-start-start-radius: var(--vormronding);
  border-end-start-radius: var(--vormronding);
}
.stepper button:last-child {
  border-start-end-radius: var(--vormronding);
  border-end-end-radius: var(--vormronding);
}

/* ══════════════════════════════════════════════════════════════
   Beweging

   De regel voor dit blok: je mag merken dat er iets gebeurt, maar je
   mag er niet naar hoeven kijken. Alles duurt lang genoeg om rustig te
   ogen en kort genoeg om niet in de weg te lopen, en alles staat uit
   voor wie minder beweging heeft gevraagd.
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* ── Foto's zakken op hun plek als hun blok verschijnt ────────
     Alleen de grote, redactionele beelden. Productkaarten hebben hun
     eigen beweging bij hover; die twee door elkaar heen laten lopen
     maakt het onrustig. */
  .js-ready .reveal .media img,
  .js-ready .reveal .bleed img {
    transition: transform 1.3s var(--ease);
  }
  .js-ready .reveal:not(.is-in) .media img,
  .js-ready .reveal:not(.is-in) .bleed img { transform: scale(1.045); }

  /* ── Stukken komen één voor één in het raster ─────────────────
     Met een animatie en niet met .reveal: de kaarten worden door
     pieces.js gemaakt, ook opnieuw na het filteren. Zo krijgt elke
     nieuwe lijst dezelfde rustige opbouw, en kan er nooit een kaart
     onzichtbaar blijven staan als er iets misgaat met de waarnemer. */
  /* `backwards` en niet `both`: tijdens de wachttijd geldt de beginstand, maar
     zodra de animatie klaar is valt de kaart terug op zijn gewone opmaak. Een
     kaart kan dus nooit blijven hangen op wat de animatie hem oplegde. */
  .js-ready .piece-card { animation: kaart-op .72s var(--ease) backwards; }
  .js-ready .piece-card:nth-child(2) { animation-delay: .07s; }
  .js-ready .piece-card:nth-child(3) { animation-delay: .14s; }
  .js-ready .piece-card:nth-child(4) { animation-delay: .21s; }
  .js-ready .piece-card:nth-child(5) { animation-delay: .28s; }
  .js-ready .piece-card:nth-child(6) { animation-delay: .35s; }
  .js-ready .piece-card:nth-child(n+7) { animation-delay: .42s; }
  @keyframes kaart-op {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  /* ── De inspiratiebeelden ook gespreid ────────────────────────── */
  .js-ready .reveal .insp figure {
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .js-ready .reveal:not(.is-in) .insp figure { opacity: 0; transform: translateY(14px); }
  .js-ready .reveal.is-in .insp figure:nth-child(2) { transition-delay: .06s; }
  .js-ready .reveal.is-in .insp figure:nth-child(3) { transition-delay: .12s; }
  .js-ready .reveal.is-in .insp figure:nth-child(4) { transition-delay: .18s; }
  .js-ready .reveal.is-in .insp figure:nth-child(5) { transition-delay: .24s; }
  .js-ready .reveal.is-in .insp figure:nth-child(6) { transition-delay: .30s; }
  .js-ready .reveal.is-in .insp figure:nth-child(7) { transition-delay: .36s; }
  .js-ready .reveal.is-in .insp figure:nth-child(8) { transition-delay: .42s; }
}

/* ══ Demobalk ══════════════════════════════════════════════════════
   Staat alleen op de pagina zolang DEMO in build_site.py aan staat.

   Bewust niet in de kleuren van het merk: dit is een mededeling van de
   makers, geen onderdeel van de winkel. Zou hij in ivoor en inkt staan,
   dan leest een bezoeker hem als een gewone banner en kijkt er overheen.

   De kopbalk staat vast bovenaan (position: fixed), dus die moet mee naar
   beneden en de pagina krijgt er evenveel ruimte bij. Alles hangt aan één
   maat, zodat er niets uit de pas loopt. */
:root { --meld-h: 38px; }
@media (max-width: 560px) { :root { --meld-h: 62px; } }

.meldbalk {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0 10px;
  height: var(--meld-h); padding: 0 16px;
  margin: 0;
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  text-align: center; line-height: 1.35;
}

/* De campagne. Merkinkt, geen alarmkleur: deze balk nodigt uit. */
.meldbalk--build {
  background: var(--ink); color: var(--ivory);
}

/* De actie (tot 10 % op de eerste bestelling). Hier stond geen eigen vlak:
   bovenaan de pagina zag je dat niet, want daar ligt het ivoor van de
   pagina eronder. Maar de balk staat vast en de pagina schuift, dus bij
   het scrollen liep de tekst er zichtbaar onder door. Nu dicht ivoor, en
   een haarlijn naar de kopbalk eronder. Safari op de iPhone neemt die
   kleur ook over voor de strook achter de klok. */
.meldbalk--actie {
  background: var(--ivory);
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-soft);
  /* Stiller dan de campagnebalk: dit is een voordeel, geen uitroep. Kleiner,
     minder spatiëring en geen hoofdletters — anders vecht de balk met het
     woordmerk eronder om dezelfde aandacht. */
  font-size: .8rem;
  letter-spacing: .03em;
  text-transform: none;
}
.meldbalk--actie .meldbalk__knop { color: var(--ink); }
.meldbalk--build .meldbalk__link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 0 16px; margin: 0 -16px;
  border: 0;
  transition: background-color .35s var(--ease);
}
.meldbalk--build .meldbalk__link:hover { background: #000; }
.meldbalk--build .meldbalk__link:focus-visible { outline-offset: -3px; }

/* De demoversie. Blijft rood: een waarschuwing hoort te storen. */
.meldbalk--demo { background: #7C2D2D; color: #FDF6F2; }
.meldbalk--demo .meldbalk__link {
  color: inherit;
  border-bottom: 1px solid rgba(253, 246, 242, .55);
  padding-bottom: 1px;
  transition: border-color .3s var(--ease);
}
.meldbalk--demo .meldbalk__link:hover,
.meldbalk--demo .meldbalk__link:focus-visible { border-bottom-color: #FDF6F2; }

body.heeft-meldbalk { padding-top: var(--meld-h); }
body.heeft-meldbalk .site-header { top: var(--meld-h); }

/* Hoeveel er bovenaan vast staat: de kopbalk, en de meldbalk erboven als
   die er is. Alles wat blijft plakken (de foto naast de configurator, het
   overzicht bij het afrekenen, de filters) en elke sprong naar een anker
   rekent hiermee. Eerst stond daar alleen --header-h: sinds de actiebalk
   er altijd staat, schoof alles 38 px onder de kopbalk. */
:root { --kop-vast: var(--header-h); }
body.heeft-meldbalk { --kop-vast: calc(var(--header-h) + var(--meld-h)); }

/* Een link naar #configurator of #onderzoek zet het doel onder de vaste
   balken, niet erachter. */
[id] { scroll-margin-top: calc(var(--kop-vast) + 16px); }
/* De correctie op de fotohoogte staat bij .opening: het beeld heeft geen
   eigen hoogte meer, het krijgt wat de tekst overlaat. */

/* ══ De kopbalk op een telefoon ════════════════════════════════════
   Drie vaste plekken: de menuknop links, het woordmerk in het midden,
   de gereedschappen rechts. Met flexbox zou het woordmerk meeschuiven
   met de breedte van wat ernaast staat — één icoon minder en het staat
   scheef. Een raster van drie kolommen houdt het midden het midden,
   wat er links en rechts ook gebeurt. */
@media (max-width: 899px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
  }
  .kop-links { justify-self: start; }
  .burger { margin-right: 0; margin-left: -8px; }
  .wordmark { justify-self: center; }
  .header-tools { justify-self: end; }

  /* De letterafstand van het woordmerk is op een smal scherm te breed:
     met het raster eromheen komt hij anders tegen de knoppen aan. */
  .wordmark { font-size: .95rem; --wm-spatie: .28em; }
}

/* Onder 380 px is er voor drie kolommen én ruime letterafstand geen
   plaats meer. Het merk blijft leesbaar, de knoppen blijven raakbaar. */
@media (max-width: 380px) {
  .wordmark { font-size: .86rem; --wm-spatie: .2em; }
  .header-tools { gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════
   Het merk: MAHOWA met een A zonder dwarsbalk

   De A bestaat niet in Jost. De Griekse lambda ziet er precies zo uit,
   maar zit niet in de subset die Google Fonts van Jost levert — die zou
   terugvallen op een ander lettertype. Dus staat hier de echte A van
   Jost met alleen de dwarsbalk eruit: in het lettertype is die balk een
   losse contour, dus dit is een exacte uitsnede en geen natekening.

   WAAROM HET MERK ALTIJD IN DE DISPLAYLETTER STAAT
   Deze vorm is uit Jost gesneden en past dus alleen bij Jost. Zou het
   woord midden in een zin in Inter staan, dan stond er een Jost-A tussen
   Inter-letters — en dat zie je meteen: Inter heeft een vlakke top en
   zwaardere schuine streken, Jost een punt. Vandaar dat .merk zelf de
   displayletter zet. In koppen verandert er niets, want die staan er al
   in; in lopende tekst valt de merknaam nu op als merknaam.

   De maten komen uit de font: de A is 660 van de 1000 eenheden breed en
   haar punt reikt tot 735. Vandaar .66em en .735em — zo houdt de letter
   dezelfde loopbreedte als een echte A.
   ══════════════════════════════════════════════════════════════ */
:root { --wm-a: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20660%20735%27%3E%3Cpath%20d%3D%27M330%20193%20450%20475%20458%20495%20560%20735H655L330%200L5%20735H100L204%20489L212%20471Z%27%2F%3E%3C%2Fsvg%3E"); }

.merk { font-family: var(--font-display); }

.wm-a {
  display: inline-block;
  width: .66em;
  height: .735em;
  /* De onderkant van het vlak moet op de basislijn vallen.
     overflow:hidden is daarvoor nodig, niet voor het verbergen: een
     inline-block lijnt normaal uit op de basislijn van zijn laatste
     regel — en sinds de echte letter erin staat, is dat een regel
     bovenin het vlak, waardoor de A als superscript omhoog schoof.
     Met overflow anders dan visible neemt de browser weer de
     onderrand, en dat is precies de basislijn. */
  overflow: hidden;
  vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: var(--wm-a) no-repeat center / 100% 100%;
          mask: var(--wm-a) no-repeat center / 100% 100%;
  /* De letterafstand die achter een gewone letter zou komen; letter-spacing
     wordt niet achter een ingevoegd vlak gezet. Buiten het woordmerk is de
     variabele leeg en is dit 0. */
  margin-right: var(--wm-spatie, 0);
}

/* De echte letter, onzichtbaar maar wel aanwezig: zo blijft het woord
   kopieerbaar en voorleesbaar. Nul als lettergrootte en niet de gewone
   verstopmanier met position:absolute — die maakte er bij het kopiëren
   een eigen regel van, en dan komt er "M / A / HOW / A" uit. */
.wm-a > span { font-size: 0; }

/* Een knop die bewust uit staat: zichtbaar, maar niet klikbaar. */
.btn.is-uit { opacity: .45; cursor: not-allowed; }


/* ══════════════════════════════════════════════════════════════
   DE STELLING EN DE RESEARCH DIVISION

   Twee lagen, uit de richting van september 2026. De eerste is het merk
   zelf: kort, droog, zonder omhaal — "Geen MDF. Geen fineer. Geen
   bullshit." De tweede is een verhaal dat ernaast loopt: een overdreven
   ernstig instituut dat gewone interieurproblemen onderzoekt.

   DE VERHOUDING
   Het ontwerp blijft een winkel in massief eiken. De grap zit in de
   woorden, niet in de vorm: geen laboratoriumtekeningen, geen
   schermletter, geen knipperende lampjes. Een onderzoeksrapport is hier
   een nette kaart met haarlijnen, zoals een technisch blad van een
   architectenbureau.

   U EN JE
   Het merk zegt "je", zoals de rest van de site. Het instituut zegt "u":
   een dienst die je toiletpapier onderzoekt, spreekt je niet met je
   voornaam aan. Die twee stemmen staan nooit in dezelfde zin. In het
   Frans is het overal "vous", in het Engels "you".
   ══════════════════════════════════════════════════════════════ */

/* ── De opening ─────────────────────────────────────────────── */

/* Het woordmerk zelf, zoals in de kopbalk en de voet — niet nagetekend.
   Zonder de inspringing van .wordmark: die zet het merk in de kopbalk
   optisch in het midden, maar hier moet het links op een lijn staan met
   de titel eronder. */
.stelling__merk {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  text-indent: 0;
  /* De kopbalk zet .wordmark op een telefoon in het midden met
     justify-self. Nieuwere browsers passen dat ook op een gewoon blok toe,
     en dan stond het merk hier gecentreerd boven een linkse titel. */
  justify-self: start;
  margin-bottom: clamp(12px, 1.6vw, 20px);
}

.stelling__kop { text-wrap: balance; }

/* Drie keer "geen", en de laatste in het zwart. De eerste twee zijn
   feiten, de derde is het merk. Grijs is --ink-3, dat haalt 4,5:1 op
   ivoor. */
.stelling__nee {
  margin-top: clamp(12px, 1.6vw, 22px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.95rem);
  line-height: 1.22;
  letter-spacing: -.005em;
  color: var(--ink-2);
  text-wrap: balance;
}
.stelling__nee span { color: var(--ink); }

.stelling__lead { color: var(--ink); }

/* Wat je koopt, wat het kost en wanneer het er is — als gewone zin, in
   letters die je zonder bril leest. Hier stond een strook in kleine
   kapitalen van 11 px met "BE & NL": mooi, maar precies de regel die een
   koper van zestig moet kunnen lezen zonder in te zoomen. */
.stelling__feiten {
  margin-top: clamp(14px, 1.8vw, 22px);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.stelling__feiten strong { font-weight: 400; color: var(--ink); }

@media (max-width: 599px) {
  .stelling__nee { font-size: 1.28rem; }
}

/* Smal en laag, zoals een iPhone SE. Hier moet de knop nog op het eerste
   scherm; de ruimte komt uit de tekst, de foto houdt haar ondergrens. */
@media (max-width: 480px) and (max-height: 700px) {
  .stelling__merk { margin-bottom: 8px; }
  .stelling__nee { font-size: 1.1rem; margin-top: 8px; }
  .stelling__lead br { display: none; }
  .stelling__feiten { font-size: .95rem; margin-top: 10px; }
}

/* ── Een link als label ─────────────────────────────────────────
   De tweede weg naast een knop: een label met een pijl. Zo blijft er een
   knop per blok en is er geen twijfel over wat de hoofdweg is. 44 px hoog,
   zoals elk ander tikdoel.

   De lijn staat onder een binnenste span en is een rand, geen
   onderstreping: de A van het woordmerk is een ingevoegd vlak, en een
   onderstreping loopt daar niet onder door — dan brak de lijn op drie
   plaatsen. */
.pijllink {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .2em;
  --wm-spatie: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
.pijllink__tekst {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  transition: border-color .3s var(--ease);
}
.pijllink:hover .pijllink__tekst { border-bottom-color: var(--ink); }
/* Dezelfde ruimte onder de pijl als onder de tekst, anders staat hij lager. */
.pijllink > [aria-hidden] { padding-bottom: 5px; }

/* ── MAHOWA Research Division ───────────────────────────────── */

/* De naam van het instituut, als briefhoofd: links de naam, rechts de
   leuze, een haarlijn eronder. */
.onderzoek__instituut {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 6px 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(34px, 5vw, 68px);
}
.onderzoek__naam {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .76rem;
  letter-spacing: .26em;
  --wm-spatie: .26em;
  text-transform: uppercase;
  color: var(--ink);
}
.onderzoek__sinds { font-size: .86rem; color: var(--ink-3); text-wrap: balance; }

/* Op een telefoon: vraag, rapport, knop — in die volgorde lees je het
   ook. Op een breed scherm staat het rapport ernaast en blijft de knop
   onder de vraag. De volgorde in de bron is die van de telefoon, dus een
   schermlezer hoort hetzelfde verhaal. */
.onderzoek__grid {
  display: grid;
  gap: clamp(28px, 4vw, 40px);
  grid-template-areas: "kop" "dossier" "knop";
}
.onderzoek__kop { grid-area: kop; }
.onderzoek__grid > .dossier { grid-area: dossier; }
/* Het rapport zo hoog als wat erin staat. Uitgerekt tot de kolom ernaast
   bleef er onderaan een lege kaart over als er geen foto in zat. */
.onderzoek__grid > .dossier { align-self: start; }
.onderzoek__knop { grid-area: knop; }

@media (min-width: 960px) {
  .onderzoek__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "kop dossier" "knop dossier";
    column-gap: clamp(48px, 6vw, 104px);
    row-gap: 34px;
  }
}

.onderzoek__kop .h2 { max-width: 15ch; text-wrap: balance; }
.onderzoek__tekst {
  margin-top: clamp(16px, 2vw, 24px);
  max-width: 40ch;
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
}

@media (max-width: 599px) {
  .onderzoek__knop .btn { width: 100%; }
}

/* De kleinere dossiers onder het grote: twee naast elkaar, elk met zijn
   eigen afdeling en nummer. */
.onderzoek__rij {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(40px, 5.4vw, 72px);
}
@media (min-width: 760px) {
  .onderzoek__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* De merkregel onder een rapport: het woordmerk en de drie keer "geen". */
.merkregel {
  margin-top: clamp(34px, 4.6vw, 60px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.4;
  color: var(--ink-3);
  text-wrap: balance;
}
.merkregel .wordmark { font-size: 1em; text-indent: 0; margin-right: .5em; }
.merkregel strong { font-weight: 400; color: var(--ink); }

/* ── Het rapport ────────────────────────────────────────────── */

.dossier {
  background: var(--ivory-hi);
  border: 1px solid var(--line);
  border-radius: var(--beeldronding);
}

.dossier__kop {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  padding: 14px clamp(16px, 2.2vw, 24px);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.dossier__kop p { color: var(--ink); }
.dossier__kop .dossier__code { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* De foto als afdruk in het rapport: een witte rand eromheen, zoals een
   plaat in een technisch dossier, en dezelfde lichte ronding als elk
   ander beeld op de site. */
.dossier__fig {
  padding: clamp(14px, 2.4vw, 26px) clamp(14px, 2.4vw, 26px) 12px;
  background: #FFF;
  border-bottom: 1px solid var(--line-soft);
}
.dossier__fig img {
  width: 100%; height: auto;
  border-radius: var(--beeldronding);
  background: var(--sand);
}
.dossier__fig figcaption {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dossier__feiten > div {
  display: grid;
  grid-template-columns: 7.4em minmax(0, 1fr);
  gap: 14px;
  padding: 13px clamp(16px, 2.2vw, 24px);
  border-bottom: 1px solid var(--line-soft);
}
.dossier__feiten > div:last-child { border-bottom: 0; }
.dossier__feiten dt {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: .42em;
}
.dossier__feiten dd { margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.5; }

@media (max-width: 599px) {
  .dossier__feiten > div { grid-template-columns: 6.2em minmax(0, 1fr); gap: 10px; }
}

/* Een stip voor de status: het enige "systeem" in het blok, en stil. */
.dossier__status dd::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--ink);
  vertical-align: .12em;
}

/* Een kort dossier: geen foto, een stelling en een weg verder. */
.dossier--kort { display: flex; flex-direction: column; }
.dossier__lijf {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.8vw, 34px) clamp(16px, 2.2vw, 24px) clamp(14px, 1.8vw, 20px);
}
.dossier__vraag {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.3vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: -.008em;
  color: var(--ink);
  text-wrap: balance;
}
/* De maten van de Belgische muur: getallen, dus even breed onder elkaar. */
.dossier__maten {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dossier__zin { margin-top: 16px; color: var(--ink-2); }
.dossier__zin + .dossier__zin { margin-top: 4px; }
.dossier__voet { margin-top: auto; padding-top: 18px; }

/* ── Technische gegevens bij een product ────────────────────────
   Dezelfde vorm als de feiten in een rapport, maar zonder kaart eromheen:
   dit is geen verhaal, dit is wat je koopt. */
.spec { margin-top: clamp(18px, 2.4vw, 26px); border-top: 1px solid var(--line-soft); }
.spec__titel {
  padding-top: 14px;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.spec dl > div {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.spec dt {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Deze labels zeggen wat de waarde ernaast is. Dus donkerder dan de
     sierlabels elders: wie slecht ziet, moet "Dikte" kunnen lezen. */
  color: var(--ink-2);
  padding-top: .45em;
}
.spec dd { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.5; font-weight: 500; }
@media (max-width: 599px) {
  .spec dl > div { grid-template-columns: 7.8em minmax(0, 1fr); gap: 10px; }
}

/* De ene zin met karakter onder de productnaam. */
.pdp__lijn {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.3;
  color: var(--ink);
}

/* ── De Belgische muurstudie ─────────────────────────────────── */
.muurstudie__maten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(26px, 3.6vw, 44px);
}
.muurstudie__maten li {
  padding: clamp(16px, 2.4vw, 28px) 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5.2vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.muurstudie__maten li + li { border-left: 1px solid var(--line-soft); padding-left: clamp(12px, 2.4vw, 32px); }
.muurstudie__maten span { font-size: .42em; letter-spacing: 0; color: var(--ink-3); margin-left: .18em; }
.muurstudie__uitslag {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}

/* ── Vragen van het instituut (Over MAHOWA) ─────────────────── */
.vragenlijst { counter-reset: vraag; border-top: 1px solid var(--line); }
.vragenlijst li {
  counter-increment: vraag;
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr);
  gap: 12px;
  padding: clamp(16px, 2.2vw, 24px) 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.3;
  color: var(--ink);
}
.vragenlijst li::before {
  content: "V" counter(vraag, decimal-leading-zero);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--ink-3);
  padding-top: .7em;
}

/* ── Field reports ──────────────────────────────────────────── */
.klantfoto__rapport {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.klantfoto__rapport span:last-child { color: var(--ink); }
/* "V" van vraag; in het Engels en Frans is dat een Q. */
.vragenlijst:lang(en) li::before,
.vragenlijst:lang(fr) li::before { content: "Q" counter(vraag, decimal-leading-zero); }

/* De MDF Detection Unit: een meting in een regel, bij elk product. */
.meting {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  margin-top: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.meting span:last-child { color: var(--ink); }

/* Onder de vanafprijs staat al een lijn; de technische gegevens beginnen
   daar, niet met een tweede lijn er vlak onder. */
.pdp__from + .spec { border-top: 0; margin-top: 0; }

/* De planken per plek in de shop: drie naast elkaar, en liggende beelden,
   want zo zijn die foto's gemaakt. */
/* Twee klassen: shop.css komt na dit bestand en zet .pgrid zelf op
   auto-fill; met een enkele klasse won dat hier. */
@media (min-width: 900px) { .pgrid.pgrid--plek { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pgrid--plek .pcard__media { aspect-ratio: 4 / 3; }

/* De voetregel van een dossier: het merk en het adres. Een schermafdruk
   van alleen dit kaartje vertelt dan nog van wie het is. */
.dossier__voetregel {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  padding: 11px clamp(16px, 2.2vw, 24px);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .2em;
  --wm-spatie: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}


/* ══════════════════════════════════════════════════════════════
   KOPEN MOET SIMPEL ZIJN (16 september 2026)

   De onderdelen die de weg naar een plank korter maken: een kaart per
   productlijn, vier maten met hun prijs erbij, de redenen op een rij, het
   blok over maatwerk, een strook met wat een koper zeker wil weten, en
   een balk onderaan het scherm op een telefoon.

   Allemaal in dezelfde taal als de rest: ivoor, inkt, haarlijnen, Jost
   voor labels. Geen nieuwe kleuren, geen tweede ontwerp.
   ══════════════════════════════════════════════════════════════ */

/* ── Kies je product ───────────────────────────────────────────
   Vier kaarten, één per productlijn. De hele kaart is de link: een
   bezoeker mikt op de foto, niet op drie woorden eronder. */
/* Vier kaarten, altijd twee naast elkaar en vier op een breed scherm. Met
   auto-fill stonden ze op een telefoon onder elkaar: vier schermen scrollen
   om te zien wat er te koop is, terwijl het hele aanbod in een half scherm
   past. Op een tussenmaat bleef er een losse kaart op een tweede rij. */
.kiezen {
  display: grid;
  gap: clamp(14px, 2.6vw, 32px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1040px) { .kiezen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kies { display: flex; flex-direction: column; }
.kies__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--beeldronding);
  background: var(--sand-deep);
}
/* Zonder deze regel houdt <picture> zijn eigen hoogte (inline, dus geen) en
   heeft height:100% op de foto niets om zich aan te meten: de foto valt terug
   op haar eigen verhouding en laat onderin een lege strook staan. */
.kies__media picture { display: block; width: 100%; height: 100%; }
/* Een plek waar we (nog) geen foto van hebben. De naam staat in het vlak,
   zoals bij MEER: dat is eerlijker dan een foto van iets anders erbij
   zoeken, en het valt niet uit de rij. */
.kies__media--vlak {
  display: flex; align-items: flex-end;
  padding: clamp(16px, 2.2vw, 24px);
}
.kies__media--vlak > span {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: 1.1; color: var(--ink-3);
}
.kies__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
@media (hover: hover) { .kies:hover .kies__media img { transform: scale(1.04); } }
.kies__naam {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.12rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}
/* De bestemming, met een pijl: zo is te zien dat het ergens heen gaat. */
.kies__naar {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.kies:hover .kies__naar { color: var(--ink); }

/* Een kaart is een klein product: donkere naam, één zin, de prijs waar
   er een is, en de weg met een pijl die meebeweegt. */
.kies__naam { font-weight: 500; color: var(--ink); }
.kies__uitleg {
  margin-top: 6px;
  font-size: .92rem; line-height: 1.5; color: var(--ink-2);
}
.kies__prijs {
  margin-top: 8px;
  font-size: 1rem; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kies .kies__naar {
  margin-top: 12px;
  color: var(--ink); font-weight: 500;
}
.kies__naar [aria-hidden] { display: inline-block; transition: transform .3s var(--ease); }
.kies:hover .kies__naar [aria-hidden] { transform: translateX(4px); }

/* De regel onder een paginatitel: wat eerst de titel was ("Hetzelfde
   hout. Drie manieren om te kiezen."). De naam van de pagina staat nu
   erboven, groot; dit zegt waar ze over gaat. */
.titel-onder {
  margin: clamp(10px, 1.4vw, 16px) 0 0;
  max-width: 32ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.25;
  color: var(--ink-2);
  text-wrap: balance;
}

/* ── Vier maten met hun prijs ──────────────────────────────────
   Het bedrag komt uit de prijskern (shop.js vult data-maatprijs), nooit
   met de hand: een prijs die met de hand in een pagina staat, klopt op
   een dag niet meer. */
.maatkaarten {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr));
  margin-top: clamp(26px, 3.2vw, 40px);
}
.maatkaart {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--vormronding);
  background: var(--ivory-hi);
  transition: border-color .3s var(--ease);
}
.maatkaart:hover { border-color: var(--ink); }
.maatkaart__maat { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.maatkaart__prijs { font-size: 1.1rem; color: var(--ink); }
.maatkaart__noot { font-size: .8rem; color: var(--ink-3); }

/* ── Waarom MAHOWA: de redenen op een rij ─────────────────────
   Heet bewust 'reden' en niet 'voordeel': die naam was al bezet door de
   prijsvergelijkingstabel in shop.css, en die zet onder 620 px een
   min-width van 460 px op .voordeel om zichzelf te laten schuiven. Met de
   oude naam duwde dit blok de hele telefoonpagina 90 px breed. */
.redenen {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.reden { padding-top: 16px; border-top: 1px solid var(--line); }
.reden__kop {
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.reden__tekst { margin-top: 10px; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }

/* ── Wat een koper zeker wil weten ─────────────────────────────
   Vier feiten, geen keurmerken van een vreemde: alles hier is na te gaan
   op deze site. */
.zeker {
  display: grid;
  gap: 10px clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  margin: 0;
  padding: clamp(16px, 2vw, 22px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.zeker li { display: flex; align-items: baseline; gap: 8px; }
.zeker li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); flex: none; transform: translateY(-2px); }

/* ── De koopbalk op een telefoon, ook buiten een productpagina ──
   Zelfde vorm als .buybar bij een product: prijs links, knop rechts. */
.buybar--cta .buybar__price span { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ── Op maat ───────────────────────────────────────────────────
   De maten van de muurstudie, maar nu met de vraag die een koper stelt:
   past mijn maat erbij? */
.opmaat__kop .h2 { text-wrap: balance; }
.opmaat__prijs {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ── Meer nodig: één plank of een set ─────────────────────────── */
.setkeuze { margin-top: clamp(22px, 3vw, 30px); border-top: 1px solid var(--line-soft); }
.setkeuze__titel {
  padding-top: 14px;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.setkeuze__rij {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  margin-top: 12px;
}
.setkeuze__kaart {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--vormronding);
  font-size: .9rem;
  color: var(--ink);
  background: none;
  text-align: left;
  cursor: pointer;
}
.setkeuze__kaart[aria-pressed="true"] { border-color: var(--ink); background: var(--ivory-hi); }
.setkeuze__kaart span { display: block; }
.setkeuze__aantal { font-family: var(--font-display); font-size: .98rem; }
.setkeuze__bedrag { margin-top: 4px; color: var(--ink-2); font-size: .86rem; }
.setkeuze__winst { margin-top: 2px; color: var(--oak-donker); font-size: .84rem; font-weight: 500; }
.setkeuze__voet { margin-top: 10px; font-size: .84rem; color: var(--ink-3); }

/* ── Levering: de verwachte dagen, als datum ──────────────────── */
.levervenster { margin-top: 4px; font-size: .92rem; color: var(--ink-2); }
.levervenster strong { font-weight: 400; color: var(--ink); }

/* De muurmaten staan bij "op maat" in een halve kolom en niet over de
   volle breedte: dan passen 1146 en 863 niet naast elkaar. */
.opmaat .muurstudie__maten li { font-size: clamp(1.25rem, 2.4vw, 2rem); padding-block: clamp(12px, 1.6vw, 18px); }
.opmaat .muurstudie__maten li + li { padding-left: clamp(10px, 1.4vw, 18px); }


/* ══ DE HANDTEKENING ══════════════════════════════════════════════
   Een etiket zoals op een werkstuk in een atelier: merk, nummer, maten,
   materiaal, herkomst. Vier regels, een haarlijn erboven, verder niets.

   WAAROM DIT BESTAAT
   Een bezoeker die drie keer een MAHOWA-foto voorbij ziet komen, moet de
   vierde keer weten van wie ze is — ook zonder logo. Dat lukt niet met een
   kleur of een ronde hoek; wel met een vaste manier om een stuk te
   beschrijven.

   Het is een handtekening, geen versiering: hooguit een paar per pagina.
   ════════════════════════════════════════════════════════════════ */
.objectlabel {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--ink);
  display: grid;
  gap: 2px;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-3);
}
.objectlabel__merk { color: var(--ink); }
.objectlabel__maat { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.objectlabel--licht { border-top-color: var(--ivory); color: rgba(250, 248, 244, .68); }
.objectlabel--licht .objectlabel__merk { color: var(--ivory); }
.objectlabel--licht .objectlabel__maat { color: rgba(250, 248, 244, .84); }

/* ── De maatlijn ─────────────────────────────────────────────────
   Zoals op een tekening: een lijn met een streepje aan elke kant en het
   getal erboven. Ze staat onder een foto of onder de configurator en zegt
   wat er te zien is — geen decoratie, maar de maat zelf. */
.maatlijn {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.maatlijn__balk {
  position: relative;
  height: 1px;
  background: var(--line);
}
.maatlijn__balk::before,
.maatlijn__balk::after {
  content: '';
  position: absolute; top: -4px;
  width: 1px; height: 9px;
  background: var(--ink-3);
}
.maatlijn__balk::before { left: 0; }
.maatlijn__balk::after { right: 0; }
.maatlijn__rij { display: flex; justify-content: space-between; gap: 12px; }

/* ── Vier feiten, genummerd ──────────────────────────────────────
   In plaats van een boompje, een vrachtwagen, een vlag en een schild: een
   nummer en een zin. Pictogrammen van een winkelwagen-sjabloon zien er bij
   elke webshop hetzelfde uit; dit niet. */
.feiten {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.feit { padding-top: 14px; border-top: 1px solid var(--line); }
.feit__nr {
  display: block;
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.feit__kop {
  display: block; margin-top: 6px;
  font-family: var(--font-display);
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
}
.feit__tekst {
  display: block; margin-top: 8px;
  font-size: .94rem; line-height: 1.6; color: var(--ink-2);
}

/* ── 40 mm ───────────────────────────────────────────────────────
   "40 mm" is een getal tot je het ziet. Daarom groot in beeld, met een
   foto van de kant ernaast en de maatlijn eronder: het verschil tussen
   massief eiken van 40 mm en een paneel met een houtprint erop is precies
   wat deze winkel verkoopt. */
.dikteblok {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  align-items: center;
}
@media (min-width: 900px) { .dikteblok { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.dikteblok__getal {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dikteblok__onder {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}
.dikteblok__tekst { margin: clamp(14px, 2vw, 20px) 0 0; max-width: 46ch; color: var(--ink-2); }
.dikteblok__beeld {
  overflow: hidden;
  border-radius: var(--beeldronding);
  background: var(--sand-deep);
}
.dikteblok__beeld picture { display: block; }
.dikteblok__beeld img { width: 100%; height: auto; display: block; }

/* ── Het materiaal van dichtbij ──────────────────────────────────
   Nerf, knoest, kopse kant, rand. Vier foto's op een rij, elk met één
   woord eronder. Wie eiken koopt, koopt dit. */
.macros {
  display: grid;
  gap: clamp(12px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.macro__beeld {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--beeldronding); background: var(--sand-deep);
}
.macro__beeld picture { display: block; width: 100%; height: 100%; }
.macro__beeld img { width: 100%; height: 100%; object-fit: cover; }
.macro__naam {
  display: block; margin-top: 10px;
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}

/* De slotregel van het merk, onderaan elke pagina. Groot genoeg om te
   blijven hangen, rustig genoeg om geen reclame te zijn. */
.site-footer__merk {
  margin: clamp(30px, 5vw, 52px) 0 0;
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  color: var(--ink);
}


/* ── De opening komt binnen ──────────────────────────────────────
   Eén beweging voor de foto, één voor de tekst, en klaar. De knop doet
   niet mee: die moet meteen bruikbaar zijn, ook als de rest nog beweegt.
   ──────────────────────────────────────────────────────────────── */
@keyframes mahowa-hero-beeld {
  from { transform: scale(1.02); }
  to   { transform: scale(1); }
}
@keyframes mahowa-hero-tekst {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.js-ready .opening--hero .hero2__beeld img {
  animation: mahowa-hero-beeld 800ms var(--ease) both;
}
.js-ready .opening--hero .hero2__tekst > * {
  animation: mahowa-hero-tekst 600ms var(--ease) both;
}
.js-ready .opening--hero .hero2__tekst > *:nth-child(2) { animation-delay: 70ms; }
.js-ready .opening--hero .hero2__tekst > *:nth-child(3) { animation-delay: 140ms; }
.js-ready .opening--hero .hero2__tekst > *:nth-child(n+4) { animation-delay: 200ms; }
/* De knoppen doen niet mee: die moeten vanaf de eerste seconde bruikbaar
   zijn, ook als de rest nog beweegt. */
.js-ready .opening--hero .hero2__knoppen { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .js-ready .opening--hero .hero2__beeld img,
  .js-ready .opening--hero .hero2__tekst > * { animation: none; }
}


/* == DE OPENING ===================================================
   Links de woorden, rechts de plank. De foto staat er heel: ze is bijna
   vierkant (956 x 998) en krijgt de hoogte van het eerste scherm; de
   breedte volgt daaruit. Eerder werd ze liggend bijgesneden en viel de
   vaas bovenaan half weg.

   Eén sterke regel (de kop), één rustige (geen MDF), een haarlijn, en dan
   het koopblok: prijs, feiten, knoppen. Het merk staat op de foto, bij
   het product, en niet nog eens onder het logo.
   ================================================================ */
.opening--hero {
  padding: clamp(18px, 3vw, 36px) 0 clamp(28px, 4vw, 48px);
}
.hero2 { display: grid; gap: clamp(26px, 4vw, 56px); align-items: center; }

/* Rol A: de sterkste regel van de site. */
.hero2__kop {
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink);
}
/* Kleiner dan de kop: dit bevestigt, het concurreert niet. */
.hero2__nee {
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
}

/* Het koopblok begint onder een haarlijn: hierboven staat wat MAHOWA is,
   hieronder wat het kost en hoe je het krijgt. */
.hero2__prijsrij {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 20px;
  margin-top: clamp(22px, 3vw, 34px);
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
}
.hero2__prijs {
  margin: 0;
  font-size: clamp(1.12rem, 1.6vw, 1.28rem);
  color: var(--ink);
}
.hero2__prijs strong { font-weight: 500; font-size: 1.14em; }

/* "Prijsdetails" staat naast de prijs. De uitleg klapt open als een klein
   kaartje eronder, en duwt niets opzij. */
.hero2__details { position: static; }
.hero2__details summary {
  display: inline-block; cursor: pointer; list-style: none;
  padding: 11px 0;
  font-size: .86rem; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--lijn-sterk);
  text-underline-offset: 3px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.hero2__details summary:hover { color: var(--ink); text-decoration-color: var(--ink); }
.hero2__details summary::-webkit-details-marker { display: none; }
.hero2__details summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero2__details p {
  position: absolute; left: 0; top: calc(100% - 4px); z-index: 6;
  width: min(38ch, 100%);
  margin: 0; padding: 12px 14px;
  background: var(--ivory-hi);
  border: 1px solid var(--line);
  border-radius: var(--vormronding);
  box-shadow: 0 12px 30px rgba(33, 30, 26, .1);
  font-size: .88rem; line-height: 1.55; color: var(--ink-2);
}

/* Maat, herkomst, levering: één regel in kleine kapitalen. Breekt hij toch
   af, dan begint de nieuwe regel niet met een punt (het punt van het
   eerste item op een regel valt buiten de lijst en wordt weggeknipt). */
.hero2__feiten {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; column-gap: 1.5em; row-gap: 4px;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.6; color: var(--ink-2);
}
.hero2__feiten li { position: relative; margin-left: -1.5em; padding-left: 1.5em; }
.hero2__feiten li::before {
  content: "\00B7"; position: absolute; left: .6em; color: var(--ink-3);
}

.hero2__knoppen { margin-top: clamp(22px, 2.8vw, 30px); }
/* De eerste knop krijgt een pijl: dit is de weg. De tweede niet. */
.hero2__knoppen .btn--solid::after {
  content: "\2192"; margin-left: .7em; font-size: 1.1em; line-height: 0;
  transition: transform .3s var(--ease);
}
.hero2__knoppen .btn--solid:hover::after { transform: translateX(3px); }

.hero2__beeld { position: relative; margin: 0; }
.hero2__beeld picture {
  display: block; overflow: hidden;
  border-radius: var(--beeldronding);
  background: var(--sand-deep);
}
.hero2__beeld img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Het etiket als plaatje op de foto, op een eigen ivoren vlak: zo is het
   op elke uitsnede te lezen. */
.hero2__label {
  position: absolute; left: 14px; bottom: 14px;
  max-width: calc(100% - 28px);
  margin: 0; padding: 8px 12px 7px;
  border-top: 0;
  display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 1px;
  background: rgba(251, 249, 245, .92);
  border-radius: 3px;
  color: var(--ink-2);
}
@supports (backdrop-filter: blur(6px)) {
  .hero2__label { background: rgba(251, 249, 245, .82); backdrop-filter: blur(6px); }
}

/* Een groot scherm: de foto zo hoog als het eerste scherm na de kopbalk
   toelaat, nooit breder dan 46 % van het venster; de tekst neemt de rest. */
/* De breedte van de foto is de kleinste van drie: 55 % van de kolom (de
   tekst houdt altijd 45 %), wat de hoogte van het scherm toelaat na de
   kopbalk en wat marge, en 800 px. De hoogte volgt uit de verhouding van
   de foto, zodat er niets van af gaat. */
@media (min-width: 900px) {
  .hero2 {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(40px, 4.5vw, 80px);
  }
  .hero2__beeld {
    --b: min(calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) * .55),
             calc((100svh - var(--kop-vast, 88px) - 110px) * .958),
             800px);
  }
  .hero2__beeld picture { width: var(--b); height: calc(var(--b) / .958); }
  .hero2__knoppen .btn { padding-inline: 24px; }
}

/* Op een telefoon een eigen volgorde: de kop, geen MDF, de plank, dan
   prijs, feiten en knop. .hero2__tekst doet dan niet mee als vak
   (display: contents), zodat de foto tussen de tekstregels kan staan. De
   foto is daar liggend bijgesneden (16:10), zodat de knop binnen het
   eerste scherm valt. */
@media (max-width: 899px) {
  .opening--hero { min-height: 0; padding-top: 18px; }
  .hero2 { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero2__tekst { display: contents; }
  .hero2__kop      { order: 1; }
  .hero2__nee      { order: 2; }
  .hero2__beeld    { order: 3; margin-top: 18px; }
  .hero2__prijsrij { order: 4; margin-top: 14px; padding-top: 0; border-top: 0; }
  .hero2__feiten   { order: 5; margin-top: 4px; }
  .hero2__knoppen  { order: 6; margin-top: 18px; }
  .hero2__beeld picture { aspect-ratio: 16 / 10; }
  .hero2__beeld img { object-position: 50% 40%; }
  .hero2__label { left: 10px; bottom: 10px; padding: 6px 10px 5px; }
}
@media (max-width: 599px) {
  .hero2__kop { font-size: clamp(2.05rem, 9.2vw, 2.6rem); }
  .hero2__nee { font-size: 1.1rem; }
  .hero2__feiten { font-size: .7rem; letter-spacing: .1em; }
  /* Op een telefoon past het etiket op één regel zonder het materiaal:
     dat staat al in de kop, en zo bedekt het de onderste plank niet. */
  .hero2__label span:last-child { display: none; }
}

/* Op een smal scherm alleen de korting: de hele zin kostte twee regels,
   en een meldbalk van twee regels duwt het product naar beneden. */
@media (max-width: 660px) { .meldbalk__ook { display: none; } }

/* Op een telefoon staan de kaarten twee naast elkaar en is er minder dan
   170 px breed. Iets minder spatie, anders valt "tot op de centimeter" uit
   elkaar. De pijl hangt met een vaste spatie aan het laatste woord. */
@media (max-width: 480px) {
  .kies__naar { font-size: .74rem; letter-spacing: .1em; }
  .kies__naam { font-size: 1.02rem; }
}

/* ══ TOESTEMMING VOOR COOKIES ═════════════════════════════════════
   Een kaart rechtsonder, geen muur over de winkel: de site blijft te
   gebruiken zolang de vraag er staat, en scrollen of wegkijken is geen
   antwoord. Op een telefoon een strook onderaan.

   Weigeren en accepteren hebben dezelfde vorm en hetzelfde gewicht. Dat
   is geen smaak: een nee die kleiner, lichter of een klik verder staat
   dan de ja, is geen vrije keuze.
   ══════════════════════════════════════════════════════════════ */
/* Rechts en niet links: links in de opening staan de prijs en de knop
   "Kies je plank". Een kaart daarover verstopt precies wat de bezoeker van
   een advertentie als eerste moet zien; rechts ligt ze over de rand van de
   foto. */
.keuze {
  position: fixed; z-index: 150;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100vw - 32px));
  padding: 22px 22px 14px;
  background: var(--ivory-hi);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--vormronding);
  box-shadow: 0 18px 48px rgba(33, 30, 26, .14), 0 2px 6px rgba(33, 30, 26, .06);
}
.keuze[hidden] { display: none; }
.keuze__kop {
  font-family: var(--font-display); font-weight: 400;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink);
}
.keuze__tekst {
  margin-top: 10px;
  font-size: .9rem; line-height: 1.58; color: var(--ink-2);
}
.keuze__knoppen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 18px;
}
.keuze__knoppen .btn { width: 100%; justify-content: center; }
/* De derde weg: geen knop maar een woord, 44 px hoog zoals elk tikdoel. */
.keuze__zelf {
  display: block; margin: 4px auto 0; min-height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .86rem; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.keuze__zelf:hover { color: var(--ink); }

/* Zolang de vraag er staat, ligt de koopbalk eronder en niet ernaast:
   twee balken onderaan een telefoon is er een te veel. */
body.keuze-open .buybar { visibility: hidden; }

@media (max-width: 599px) {
  .keuze {
    left: 0; right: 0; bottom: 0; width: auto;
    padding: 18px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0; border-radius: 12px 12px 0 0;
  }
  .keuze__tekst { font-size: .86rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .keuze:not([hidden]) { animation: mahowa-keuze-in 420ms var(--ease) both; }
}
@keyframes mahowa-keuze-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── Het instellingenscherm ─────────────────────────────────────
   Een echte <dialog>: de browser houdt de focus erin, Escape sluit, en de
   pagina erachter is zolang niet te bedienen. */
.keuzes {
  width: min(560px, calc(100vw - 24px));
  max-width: none; padding: 0; border: 0;
  background: var(--ivory-hi); color: var(--ink);
  border-radius: var(--vormronding);
  box-shadow: 0 30px 80px rgba(33, 30, 26, .28);
}
.keuzes::backdrop { background: rgba(33, 30, 26, .42); }
.keuzes__binnen {
  max-height: min(88vh, 780px); overflow-y: auto;
  padding: clamp(22px, 3.4vw, 34px);
}
.keuzes__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.keuzes__kop {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.2;
}
.keuzes__sluit { margin-right: -10px; }
.keuzes__intro { margin-top: 10px; font-size: .92rem; line-height: 1.6; color: var(--ink-2); }
.keuzes__rij {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 8px 20px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.keuzes__naam {
  font-family: var(--font-display); font-weight: 400;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
}
.keuzes__vast {
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
.keuzes__uitleg { grid-column: 1 / -1; font-size: .88rem; line-height: 1.6; color: var(--ink-2); }
.keuzes__noot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: .82rem; line-height: 1.6; color: var(--ink-3);
}
.keuzes__id { margin-top: 10px; font-size: .82rem; line-height: 1.6; color: var(--ink-3); }
.keuzes__id[hidden] { display: none; }
.keuzes__id code { font-size: .78rem; word-break: break-all; color: var(--ink-2); }
.keuzes__knoppen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 24px;
}
.keuzes__knoppen .btn { width: 100%; justify-content: center; }
.keuzes__knoppen [data-keuze="bewaar"] { grid-column: 1 / -1; }

/* De schakelaar: een echt aankruisvak, alleen anders getekend. Zo werkt
   hij met het toetsenbord, met een schermlezer (role="switch") en zonder
   een regel JavaScript. */
.schakel { position: relative; display: inline-flex; width: 52px; height: 44px; align-items: center; cursor: pointer; }
.schakel input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.schakel__baan {
  position: relative; width: 44px; height: 24px; border-radius: 12px;
  background: var(--sand-deep); border: 1px solid var(--line);
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.schakel__baan::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FFF; box-shadow: 0 1px 3px rgba(33, 30, 26, .25);
  transition: transform .25s var(--ease);
}
.schakel input:checked + .schakel__baan { background: var(--ink); border-color: var(--ink); }
.schakel input:checked + .schakel__baan::after { transform: translateX(20px); }
.schakel input:focus-visible + .schakel__baan { outline: 2px solid var(--ink); outline-offset: 3px; }

/* De link in de voet is een knop (hij opent iets, hij gaat nergens heen),
   maar ziet eruit als de links ernaast. */
.voetknop {
  padding: 0; background: none; border: 0; border-bottom: 1px solid transparent;
  font: inherit; font-size: .95rem; color: var(--ink-2); cursor: pointer; text-align: left;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.voetknop:hover { color: var(--ink); border-bottom-color: var(--line); }

/* Een knop die in een lopende tekst staat en eruitziet als een link: hij
   opent de cookie-instellingen, hij gaat nergens heen. */
.linkknop {
  padding: 0 0 1px; background-color: transparent; border: 0;
  font: inherit; cursor: pointer; text-align: left;
}
/* Op een smalle telefoon passen "Alles weigeren" en "Alles accepteren" niet
   naast elkaar zonder af te breken; dan onder elkaar, alle drie even breed. */
@media (max-width: 480px) {
  .keuzes__knoppen { grid-template-columns: 1fr; }
}

/* Onder de regel onder een titel komt de tekst niet meteen tegen de regel
   aan: op /ons-hout/ stond de eerste alinea er strak onder. */
.titel-onder + .measure,
.titel-onder + .lead { margin-top: clamp(18px, 2.4vw, 28px); }

/* ── Drie manieren om te kiezen ───────────────────────────────────
   Standard, Select en Objects staan op /shop/ als drie hoofdstukken onder
   elkaar. Op de startpagina moeten ze naast elkaar passen zonder dat het
   drie knoppen worden: het verschil tussen de drie is een verhaal van twee
   zinnen, en juist dat verhaal is de reden dat iemand blijft lezen.

   Hier stond een raster met vijf productkaarten ("Drie objecten, één
   materiaal"). Dat toonde dezelfde dingen als de keuzeblok erboven, alleen
   kleiner — twee keer hetzelfde aanbod op één pagina. Weggehaald op
   24 september 2026.

   De beelden zijn dezelfde drie als op /shop/, en ze staan in `contain` op
   een zandvlak: het zijn drie verschillende opnamen (studio, los stuk,
   object) en die snijden tot één formaat maakt er drie halve planken van. */
.drieweg {
  display: grid; gap: clamp(24px, 3vw, 44px);
  grid-template-columns: 1fr;
  margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; list-style: none;
}
@media (min-width: 760px) { .drieweg { grid-template-columns: repeat(3, 1fr); } }

.drieweg__link {
  display: grid; gap: 8px; height: 100%;
  align-content: start; color: inherit; text-decoration: none;
}
.drieweg__beeld {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  margin-bottom: 8px;
  border-radius: var(--beeldronding);
  /* Wit en niet zand: twee van de drie beelden zijn PNG zonder achtergrond
     en nemen de kleur van de tegel aan, maar de studio-opname van Standard
     staat op wit. Op zand werd dat een zichtbaar kader om één van de drie. */
  background: #fff;
}
/* Zonder deze regel houdt <picture> zijn eigen hoogte (inline, dus geen) en
   heeft height:100% op de foto niets om zich aan te meten. */
.drieweg__beeld picture { display: block; width: 100%; height: 100%; }
.drieweg__beeld img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .45s var(--ease);
}
.drieweg__kop { display: flex; align-items: baseline; gap: 10px; }
.drieweg__nr {
  font-family: var(--font-display); font-size: .78rem;
  letter-spacing: .14em; color: var(--ink-3);
}
.drieweg__naam { font-family: var(--font-display); font-size: 1.22rem; }
.drieweg__belofte { color: var(--ink-2); }
.drieweg__tekst { font-size: .93rem; line-height: 1.65; color: var(--ink-3); }
.drieweg__voet > span:first-child { flex: 1 1 auto; }
.drieweg__voet {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: .9rem;
}
.drieweg__pijl { display: inline-block; transition: transform .3s var(--ease); }

@media (hover: hover) {
  .drieweg__link:hover .drieweg__beeld img { transform: scale(1.04); }
  .drieweg__link:hover .drieweg__pijl { transform: translateX(4px); }
  .drieweg__link:hover .drieweg__naam { text-decoration: underline; text-underline-offset: 3px; }
}

/* ── OBJECTS ──────────────────────────────────────────────────────
   Van Standard en Select bestaan er zoveel als iemand er bestelt. Van een
   Object bestaat er één. Dat is het enige echte verschil tussen die regel
   en de rest van het aanbod, en in een menu zag je het niet: "Objects" viel
   niet op tussen de twee andere.

   Kapitalen met wat lucht tussen de letters zetten de naam apart. 1/1 zegt
   er in drie tekens bij waarom — dat is de oplage en geen etiket. */
.objects { letter-spacing: .08em; }
.objects__eenmalig {
  display: inline-block;
  margin-left: .5em; padding: .1em .45em;
  border: 1px solid var(--lijn-sterk);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .6em; line-height: 1.7; letter-spacing: .04em;
  color: var(--ink-2);
  vertical-align: .14em;
  white-space: nowrap;
}
/* In de lade op de telefoon staat de naam al klein; daar mag het merkje
   niet groter worden dan de regel zelf. */
.mnav__sub .objects__eenmalig { font-size: .66em; vertical-align: .1em; }