/* =============================================================
   BACKLEBEE · concept V3
   Gebouwd op de referenties van Hans & Bernd:
   construction-five-sand.vercel.app (rust, vormen, knoppen)
   + Animalsave (bento-blokstructuur, foto-in-foto uitsparing)
   Accent: oranje op verzoek ("het Nederlandse tintje"),
   licht en helder met donkere tekst — zoals de lime in de referentie.
   ============================================================= */

:root {
  color-scheme: only light;

  --paper:  #FFFFFF;
  --sand:   #F5F1EA;
  --peach:  #FFE7D6;
  --ink:    #16150F;
  --slate:  #5C5A52;
  --mute:   #8E8A80;
  --line:   #E7E2D8;
  --orange: #FF7A2F;      /* knoppen/cirkels · altijd met donkere tekst */
  --orange-ink: #B4460E;  /* voor tekstlinks op licht */

  --r-card: 30px;
  --r-cut: 30px;
  --pill: 999px;

  --sans: 'Switzer', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.22,1,.36,1);
  --shadow: 0 2px 6px rgba(22,21,15,.04), 0 18px 44px rgba(22,21,15,.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans);
  background: var(--paper); color: var(--ink);
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 8px; }

/* De clamp is de TOTALE zijruimte, niet per kant. Op 24 px hield de tekst op
   een telefoon dus 12 px over — terwijl de foto's op 23 px stonden, want die
   zitten in een kaart met eigen binnenmarge. Josh zag dat verschil: "de meeste
   websites hebben de tekst niet zo ver naar de zijkant lopen." Ondergrens naar
   40 (20 per kant) en 6vw in plaats van 5vw, zodat het op tablet meegroeit in
   plaats van tot 768 px op de ondergrens te blijven plakken. */
.in { width: min(1240px, 100% - clamp(40px, 6vw, 80px)); margin-inline: auto; }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.035em; line-height: .98; }
h1 { font-size: clamp(46px, 7.4vw, 92px); }
h2 { font-size: clamp(36px, 5.4vw, 66px); }
h3 { font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -.02em; line-height: 1.2; }
p { margin: 0; color: var(--slate); }
.lead { font-size: clamp(16.5px, 1.25vw, 18.5px); max-width: 48ch; }

/* pill-badge als eyebrow (referentie-patroon) */
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: var(--pill);
  padding: 8px 18px; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
  background: var(--paper);
  /* inline-flex sluit om zijn tekst, maar als flexkind rekt hij alsnog uit —
     op de homepage liep de badge daardoor over de volle kolombreedte, op de
     contactpagina niet. align-self houdt hem overal even breed als zijn tekst. */
  align-self: start;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--orange); }
.badge.on-dark { background: transparent; border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.82); }

/* ---------- knoppen: pill met cirkel-pijl (referentie-patroon) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 26px;
  border-radius: var(--pill); border: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
  font-size: 15.5px; font-weight: 600; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .2s;
}
.btn .circ {
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--orange); color: var(--ink);
  display: grid; place-items: center; flex-shrink: 0;
  transition: transform .35s var(--ease);
}
.btn .circ svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:hover .circ { transform: rotate(45deg); }
.btn.solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.solid .circ { background: var(--orange); color: var(--ink); }
.btn.on-dark { background: transparent; border-color: rgba(255,255,255,.24); color: #fff; }
.tlink { font-weight: 600; border-bottom: 2px solid var(--orange); padding-bottom: 3px; }

/* ---------- zwevende pill-nav ---------- */
nav.top { position: sticky; top: 14px; z-index: 80; margin-bottom: -78px; }
nav.top .bar {
  width: min(1240px, 100% - clamp(24px, 5vw, 80px)); margin-inline: auto;
  /* Een backdrop-filter op een plakkende balk laat de compositor bij elke
     scrollframe de achtergrond opnieuw vervagen — de klassieke oorzaak van
     schokkerig scrollen. Bij 90% dekking zag je er sowieso bijna niets van.
     Op 96% dekking en een blur van 6 px is het beeld vrijwel gelijk en is de
     rekenlast per frame een fractie. */
  background: rgba(255,255,255,.96); backdrop-filter: saturate(1.3) blur(6px);
  border: 1px solid var(--line); border-radius: var(--pill);
  display: flex; align-items: center; gap: 28px;
  padding: 10px 10px 10px 26px; box-shadow: var(--shadow);
}
.wordmark { font-weight: 700; font-size: 20px; letter-spacing: -.03em; display: inline-flex; align-items: center; }
.wordmark .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--orange); margin-right: 9px; }
.wordmark b { color: var(--orange-ink); font-weight: 700; }
nav .sp { flex: 1; }
nav .nl { font-size: 15px; font-weight: 500; color: var(--slate); transition: color .2s; white-space: nowrap; }
nav .nl:hover { color: var(--ink); }
nav.top .bar > .btn { white-space: nowrap; flex-shrink: 0; }
/* De menuknop had het teken ☰ als tekst. Josh, 5 aug: "die streepjes zijn
   blauw, ik zou niet begrijpen waarom." Oorzaak: ☰ (U+2630) zit in de
   emoji-fonts van Windows en iOS, en die tekenen hem in hun eigen kleur — een
   `color`-regel doet daar niets tegen. Hetzelfde gold voor het kruisje in het
   geopende menu. Dus geen teken meer maar drie streepjes die we zelf tekenen;
   dan is de kleur van ons en klopt hij op elk toestel.
   De streepjes vouwen bij openen tot een kruis. `aria-expanded` stuurt dat aan,
   zodat de vorm en wat een schermlezer zegt niet uit elkaar kunnen lopen. */
#menuBtn {
  display: none; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  cursor: pointer; flex-shrink: 0; padding: 0;
}
#menuBtn .bars {
  position: relative; width: 17px; height: 2px; border-radius: 2px;
  background: currentColor; transition: background .18s;
}
#menuBtn .bars::before, #menuBtn .bars::after {
  content: ""; position: absolute; left: 0;
  width: 17px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .28s var(--ease);
}
#menuBtn .bars::before { top: -6px; }
#menuBtn .bars::after  { top: 6px; }
#menuBtn[aria-expanded="true"] .bars { background: transparent; }
#menuBtn[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
#menuBtn[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  #menuBtn .bars, #menuBtn .bars::before, #menuBtn .bars::after { transition: none; }
}

/* uitklapmenu onder de pill (alleen mobiel/tablet) */
nav.top .menu {
  width: min(1240px, 100% - clamp(24px, 5vw, 80px)); margin: 10px auto 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: 26px;
  box-shadow: var(--shadow); padding: 10px; display: grid; gap: 2px;
}
nav.top .menu[hidden] { display: none; }
nav.top .menu a {
  padding: 13px 18px; border-radius: 18px; font-size: 16px; font-weight: 500; color: var(--slate);
}
nav.top .menu a:hover { background: var(--sand); color: var(--ink); }
nav.top .menu a.hl { background: var(--ink); color: #fff; font-weight: 600; margin-top: 6px; }

/* ---------- de uitsparing (inverted corner) ----------
   .inlet = vlak in paginakleur dat een hap uit de foto neemt
   .cut   = kwartcirkel die de buitenhoek concaaf maakt        */
/* 31px i.p.v. 30: de rechte randen van de clip vallen zo 1px buiten de foto,
   anders schemert die door de anti-aliasing als een dun lijntje door */
.cut {
  position: absolute; width: 31px; height: 31px;
  background: var(--bg, var(--paper));
  clip-path: path("M 31 0 Q 31 31 0 31 L 31 31 Z");
}
.inlet { position: absolute; background: var(--bg, var(--paper)); }

/* variant A · foto met knop-inham rechtsonder */
.shot { position: relative; --cw: 106px; --ch: 100px; }
.shot > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); }
/* 1px over de fotorand heen, anders schijnt de afgeronde hoek erdoor */
.shot .inlet { right: -1px; bottom: -1px; width: calc(var(--cw) + 1px); height: calc(var(--ch) + 1px); border-radius: var(--r-cut) 0 var(--r-card) 0; }
/* 1px overlap met de inlet, zodat de rechte clip-randen op wit vallen */
.shot .cut.above { right: -1px; bottom: calc(var(--ch) - 1px); }
.shot .cut.beside { right: calc(var(--cw) - 1px); bottom: -1px; }
.shot .go {
  position: absolute; right: 16px; bottom: 14px;
  width: 72px; height: 72px; border-radius: 999px;
  background: var(--orange); color: var(--ink);
  display: grid; place-items: center;
  transition: transform .35s var(--ease);
}
.shot .go svg { width: 24px; height: 24px; }
.shot:hover .go { transform: rotate(45deg); }

/* variant B · foto in foto */
.stack { position: relative; --cw: 210px; --ch: 148px; }
.stack > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); }
.stack .inlet { right: -1px; bottom: -1px; width: calc(var(--cw) + 1px); height: calc(var(--ch) + 1px); border-radius: var(--r-cut) 0 var(--r-card) 0; }
.stack .cut.above { right: -1px; bottom: calc(var(--ch) - 1px); }
.stack .cut.beside { right: calc(var(--cw) - 1px); bottom: -1px; }
.stack .small {
  position: absolute; right: 0; bottom: 0;
  width: calc(var(--cw) - 16px); height: calc(var(--ch) - 16px);
  object-fit: cover; border-radius: 22px;
}

/* variant C · portret met uitsparing RECHTSBOVEN + naamplaatje onderin */
.person { position: relative; --cw: 92px; --ch: 86px; }
.person > .ph {
  height: 400px; border-radius: var(--r-card); overflow: hidden;
  background: linear-gradient(160deg, #2B2A24, #16150F);
  display: grid; place-items: center;
}
.person > .ph img { width: 100%; height: 100%; object-fit: cover; }
.person > .ph .initials { font-size: 62px; font-weight: 700; color: var(--orange); letter-spacing: -.04em; }
.person .inlet { right: -1px; top: -1px; width: calc(var(--cw) + 1px); height: calc(var(--ch) + 1px); border-radius: 0 var(--r-card) 0 var(--r-cut); }
.person .cut { clip-path: path("M 31 31 Q 31 0 0 0 L 31 0 Z"); }
.person .cut.below { right: -1px; top: calc(var(--ch) - 1px); }
.person .cut.left  { right: calc(var(--cw) - 1px); top: -1px; }
.person .go {
  position: absolute; right: 12px; top: 10px;
  width: 62px; height: 62px; border-radius: 999px;
  background: var(--orange); color: var(--ink);
  display: grid; place-items: center; transition: transform .35s var(--ease);
}
.person .go svg { width: 21px; height: 21px; }
.person:hover .go { transform: rotate(45deg); }
.person .plate {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.3); border-radius: 18px;
  padding: 14px 18px; text-align: center; color: #fff;
}
.person .plate .role { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.person .plate .nm { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; }
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ---------- hero ---------- */
.hero { padding: 104px 0 clamp(40px, 5vw, 72px); }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 18px; align-items: stretch; }
.hero-copy {
  background: var(--sand); border-radius: var(--r-card);
  padding: clamp(36px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  min-height: 520px;
}
.hero-copy .row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 4px; }
.hero-photo { position: relative; min-height: 520px; --bg: var(--paper); }
.hero-photo > img { min-height: 520px; }
/* de foto zakt rustig op z'n plek */
.hero-photo > img { transform: scale(1.06); transition: transform 1.6s var(--ease); }
.hero-photo.in-view > img { transform: none; }

/* stat-cirkel die over de rand valt */
.stat-badge {
  position: absolute; left: -34px; bottom: 56px; z-index: 3;
  width: 132px; height: 132px; border-radius: 999px;
  background: var(--orange); color: var(--ink);
  display: grid; place-items: center; text-align: center;
  box-shadow: 0 0 0 10px var(--paper);
}
.stat-badge .n { font-size: 38px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.stat-badge .s { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }

/* ---------- secties ---------- */
section.blk { padding: clamp(64px, 8vw, 118px) 0; }
section.blk.sand { background: var(--sand); }
/* kop links / tekst rechts (referentie-patroon) */
.head-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; margin-bottom: clamp(34px, 4vw, 56px); }
.head-split .right { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; padding-top: 8px; }
.head-split .kicker { font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; color: var(--ink); line-height: 1.4; letter-spacing: -.01em; }

/* service-kaarten met notch */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 14px 14px 26px;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card .shot { --bg: var(--paper); height: 220px; }
.card .shot > img { height: 220px; }
.card .body { padding: 0 12px; display: flex; flex-direction: column; gap: 9px; }
.card .body p { font-size: 15.5px; }
section.sand .card { background: var(--paper); }
section.sand .card .shot { --bg: var(--paper); }

/* stappen */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 28px 26px 30px;
  display: flex; flex-direction: column; gap: 10px; min-height: 220px;
}
.step .n {
  width: 44px; height: 44px; border-radius: 999px; background: var(--peach); color: var(--orange-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 15px; margin-bottom: 6px;
}
.step p { font-size: 15px; }

/* donkere sectie */
.dark-wrap {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  background: var(--ink); color: #fff;
  padding: clamp(44px, 5.5vw, 84px);
}
.dark-wrap::before {
  content: ""; position: absolute; inset: 0;
  background: url('/assets/img/walnut-drawer.webp') center/cover no-repeat;
  opacity: .16; filter: grayscale(.9) contrast(1.1);
}
.dark-wrap > * { position: relative; }
.dark-wrap h2 { color: #fff; max-width: 15ch; }
.dark-wrap p { color: rgba(255,255,255,.72); }
.dark-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
/* De vier punten onder "Results" stonden op 15,5 px in 80% wit, naast een kop
   van 66 px. Josh: "die vallen een beetje weg op de achtergrond." Het zíjn de
   beloftes van die sectie, dus ze mogen gelezen worden: groter, witter, en een
   stip die meegroeit. */
.checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 15px; }
.checks li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 17.5px; line-height: 1.45; color: rgba(255,255,255,.94);
}
.checks li::before { content: ""; flex-shrink: 0; width: 9px; height: 9px; margin-top: 9px; border-radius: 999px; background: var(--orange); }
@media (max-width: 620px) { .checks li { font-size: 16.5px; gap: 12px; } }

/* backlabel-blok */
.label-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.label-card .rp { font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--ink); background: var(--sand); border-radius: 16px; padding: 16px 18px; }
.label-card .rp b { color: var(--orange-ink); }

/* portal */
.portal-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 4vw, 56px); align-items: center; }

/* CTA */
.cta {
  background: var(--sand); border-radius: var(--r-card);
  padding: clamp(48px, 6vw, 90px); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.cta h2 { max-width: 16ch; }
.cta .row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* footer */
footer.site { padding: clamp(56px, 6vw, 90px) 0 44px; border-top: 1px solid var(--line); margin-top: clamp(60px, 6vw, 96px); }
footer .cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 32px; }
footer .fh { font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); margin-bottom: 16px; }
footer a { display: block; font-size: 15px; color: var(--slate); padding: 6px 0; }
footer a:hover { color: var(--orange-ink); }
footer .legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--mute); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ---------- subpagina's ---------- */
.page-hero { padding: 118px 0 clamp(36px, 4vw, 56px); }
.page-hero .wrap {
  background: var(--sand); border-radius: var(--r-card);
  padding: clamp(38px, 4.4vw, 68px);
  display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
}
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { font-size: clamp(17px, 1.35vw, 19.5px); max-width: 52ch; }

/* accordeon · details achter een klik, zoals gevraagd in de meeting */
.acc { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--paper); }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:last-child { border-bottom: none; }
.acc summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 18px;
  padding: 22px clamp(20px, 2.4vw, 30px);
  font-size: clamp(16px, 1.3vw, 18px); font-weight: 600; letter-spacing: -.01em;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary .plus {
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  background: var(--peach); color: var(--orange-ink);
  display: grid; place-items: center; font-size: 19px; font-weight: 500;
  transition: transform .3s var(--ease), background .2s;
}
.acc details[open] summary .plus { transform: rotate(45deg); background: var(--orange); color: var(--ink); }
.acc .body { padding: 0 clamp(20px, 2.4vw, 30px) 24px; color: var(--slate); font-size: 15.5px; max-width: 68ch; }
.acc .body ul { margin: 10px 0 0; padding-left: 20px; }
.acc .body li { margin-bottom: 7px; }

/* twee kolommen: tekst + accordeon/beeld */
.two { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.two.even { grid-template-columns: 1fr 1fr; align-items: center; }
/* gespiegeld: de kop naar rechts, de inhoud naar links. Alleen op breed —
   onder elkaar hoort de kop natuurlijk gewoon eerst te komen. */
@media (min-width: 861px) {
  .two.gespiegeld { grid-template-columns: 1.18fr .82fr; }
  .two.gespiegeld > :first-child { order: 2; }
  .two.gespiegeld > :last-child { order: 1; }
}

/* quote-blok */
.quote {
  background: var(--sand); border-radius: var(--r-card);
  padding: clamp(34px, 4vw, 60px);
  font-size: clamp(21px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.025em;
  line-height: 1.25; color: var(--ink);
}
/* Alleen de accent-span oranje, niet de bouwspans eromheen. Stond op
   `.quote span` en dat kleurde ook .q-tekst, waardoor op /eu-regulation/ de
   HELE zin oranje werd en de nadruk op "meets the definition set for that
   category" wegviel. Op /purpose/ staat een kale <span> zonder omhulsel, dus
   die blijft gewoon werken. Gezien 6-8-2026. */
.quote span:not(.q-mark):not(.q-label):not(.q-tekst):not(.by) { color: var(--orange-ink); }
.quote .by { display: block; margin-top: 18px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--mute); }

/* formulier */
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(26px, 3vw, 40px); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
label.f { display: block; font-size: 13.5px; font-weight: 600; color: var(--slate); margin-bottom: 14px; }
label.f span.req { color: var(--orange-ink); }
label.f input, label.f select, label.f textarea {
  display: block; width: 100%; margin-top: 6px;
  padding: 13px 16px; font-size: 15.5px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink);
}
label.f textarea { resize: vertical; }
/* Zelfde chevron als bij de kaart-keuzelijst, zodat de twee keuzelijsten op de
   contactpagina er niet als twee verschillende componenten uitzien. */
label.f select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316150F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 15px;
}
label.f input:focus, label.f select:focus, label.f textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,47,.18); }
.form-note { font-size: 13.5px; color: var(--mute); margin-top: 12px; }
.ok-note { background: var(--peach); border-radius: 18px; padding: 20px 24px; font-weight: 600; }

/* contactkaarten */
.contact-cards { display: grid; gap: 16px; }
.ccard { background: var(--sand); border-radius: var(--r-card); padding: 28px 30px; display: flex; flex-direction: column; gap: 8px; }
.ccard h3 { font-size: 19px; }
.ccard p { font-size: 15.5px; }

/* ---------- motion ---------- */
.rise { opacity: 0; transform: translateY(24px); }
.rise.in-view { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.hero .rise { transition-delay: var(--d, 0s); }

/* A2 · beelden zetten iets aan bij binnenkomst (akkoord Josh 3 aug).
   Alleen foto's: tekst die schaalt voelt goedkoop, beeld dat aanzet voelt duurder.
   We schalen het hele blok, niet de <img>, anders lopen de uitsparingen tijdens
   de beweging niet meer gelijk met de foto. De hero heeft z'n eigen zakbeweging
   en blijft daarom buiten schot. */
.rise .shot, .rise .stack, .rise .person {
  transform: scale(.94);
  transition: transform .8s var(--ease);
}
.rise.in-view .shot, .rise.in-view .stack, .rise.in-view .person { transform: none; }
.rise.shot:not(.hero-photo), .rise.stack, .rise.person { transform: translateY(24px) scale(.94); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
  .rise .shot, .rise .stack, .rise .person,
  .rise.shot, .rise.stack, .rise.person { transform: none; transition: none; }
  .hero-photo > img { transform: none; transition: none; }
  .card:hover, .btn:hover, .shot:hover .go { transform: none; }
  nav.top .bar { transition: none; }
}

/* A6 · de zwevende balk wordt compacter zodra je scrolt (akkoord Josh 3 aug)
   Alléén op het bureaublad. Daar staat een volle balk met vijf links en een
   knop, en is krimpen winst. Onder de 940 px is de balk al teruggebracht tot
   een woordmerk en een menuknop; nóg kleiner maken levert een paar pixels op
   en kost de knop zijn duimformaat. Josh, 5 aug: "op de telefoon mag die
   gewoon origineel zijn." */
@media (min-width: 941px) {
  nav.top .bar { transition: padding .3s var(--ease), box-shadow .3s var(--ease); }
  nav.top .bar .btn, nav.top .bar .circ, nav.top #menuBtn { transition: all .3s var(--ease); }
  nav.top.shrunk .bar {
    padding: 5px 5px 5px 20px;
    box-shadow: 0 4px 10px rgba(22,21,15,.06), 0 20px 50px rgba(22,21,15,.12);
  }
  nav.top.shrunk .bar .btn { padding: 6px 6px 6px 20px; font-size: 14.5px; }
  nav.top.shrunk .bar .circ { width: 36px; height: 36px; }
  nav.top.shrunk #menuBtn { width: 38px; height: 38px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .hero-grid, .head-split, .dark-grid, .portal-grid { grid-template-columns: 1fr; }
  .hero-copy, .hero-photo, .hero-photo > img { min-height: 0; }
  .hero-photo { min-height: 420px; }
  .hero-photo > img { min-height: 420px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
  .stat-badge { left: auto; right: 20px; bottom: -30px; }
  footer .cols { grid-template-columns: 1fr 1fr; }
}
/* nav klapt al bij 940px in: op tablet (768–900) breken de labels anders af */
@media (max-width: 940px) {
  nav .nl { display: none; }
  nav.top .bar > .btn { display: none; }   /* hamburger volstaat */
  #menuBtn { display: grid; place-items: center; }
  nav.top .bar { padding: 8px 8px 8px 20px; }
}
@media (min-width: 941px) {
  nav.top .menu { display: none; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  /* eyebrows moeten op 320px nog op één regel: een pill van twee regels
     ziet er rommelig uit */
  .badge { padding: 7px 15px; font-size: 11px; letter-spacing: .09em; gap: 8px; }
  .cards, .steps, .people { grid-template-columns: 1fr; }
  /* min-height: 220px houdt vier stapblokken naast elkaar even hoog — anders
     krijg je een rafelige onderrand. Onder elkaar op een telefoon is het
     90 px lucht per blok, vijf keer achter elkaar. Josh: "heel veel witruimte
     onder de tekst." Hier dus loslaten. */
  .step { min-height: 0; padding: 24px 22px 26px; }
  .stack { --cw: 150px; --ch: 108px; }
  footer .cols { grid-template-columns: 1fr; }
  .hero { padding-top: 92px; }
}

/* responsive · subpagina's */
@media (max-width: 1040px) {
  .two, .two.even { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .fgrid { grid-template-columns: 1fr; }
  .page-hero { padding-top: 100px; }
}

/* contact: formulier breder dan de zijkaarten (class, geen inline stijl —
   anders wint hij van de mobiele media query) */
.two.form-split { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 1040px) { .two.form-split { grid-template-columns: 1fr; } }

/* =============================================================
   Onderdelen uit LANDING PAGE.docx (Hans, 3 aug 2026)
   ============================================================= */

/* ---------- statement-blok (bv. de 80%-uitspraak) ---------- */
/* Het getal was 92 px en de zin ernaast 23, en die zin stopte na 34 tekens.
   Daardoor stond alles op de linkerhelft geplakt met een lege rechterhelft
   eronder een streep over de volle breedte — Josh: "dat ziet er weird uit."
   Nu een kleiner getal en een grotere zin die wél doorloopt. */
.statement {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(28px, 3.2vw, 46px) 0; display: grid; gap: clamp(22px, 3.5vw, 50px);
  grid-template-columns: auto minmax(0, 1fr); align-items: center;
}
.statement .big {
  font-size: clamp(46px, 5.6vw, 76px); font-weight: 700; letter-spacing: -.045em;
  line-height: .9; color: var(--orange-ink);
}
/* 34ch en niet 30: bij 30 viel het laatste woord van de zin alleen op een regel. */
.statement p { font-size: clamp(19px, 2vw, 28px); font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1.25; max-width: 34ch; }
/* De conclusie onder het cijfer. Dit was tot 6-8-2026 de kop van de pagina
   ("Bad data. Broken logistics."); Hans wilde hem hier hebben, als gevolgtrekking
   onder het percentage in plaats van als openingszin. Oranje omdat hij hetzelfde
   zegt als het getal ernaast, alleen in woorden. */
.statement .gevolg { margin-top: .5em; color: var(--orange-ink); font-size: clamp(17px, 1.7vw, 24px); }
@media (max-width: 700px) { .statement { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- verordeningskaarten ----------
   Waren twee lappen tekst naast elkaar. Josh: "ik vind het alleen maar tekst."
   Nu tekst op tweederde met een beeld ernaast dat de volle hoogte van de kaart
   pakt — dezelfde verhouding als het voorbeeld dat hij stuurde. */
.regcards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Stond op 2fr 1fr, dus precies een derde. Rekenkundig klopte dat, maar het
   oogde smal en dat kwam ergens anders vandaan: het vak is 204 x 366, een
   staande strook, en collector-2.webp is een LIGGENDE foto (1536x1024). Met
   object-fit: cover viel daar 63% van de breedte weg. Op 3fr 2fr wordt het vak
   minder extreem staand en blijft er meer van de foto over. */
.regcard { display: grid; grid-template-columns: 3fr 2fr; gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
.rc-tekst { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.6vw, 34px); }
.rc-beeld { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1040px) {
  .regcard { grid-template-columns: 1fr; }
  .rc-beeld { height: 180px; order: -1; }
}
.regcard { background: var(--sand); border-radius: var(--r-card); }
/* Stond in JetBrains Mono, en dat is op déze pagina de enige twee plekken waar
   die letter voorkomt — dan leest hij als een ongelukje in plaats van als een
   keuze. Josh: "dat lettertype lijkt een beetje off." Nu Switzer met dezelfde
   spatiëring: het blijft een label, maar hoort erbij. */
.regcard .no { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--orange-ink); text-transform: uppercase; }
.regcard h3 { font-size: clamp(21px, 2vw, 27px); }
.regcard p { font-size: 15.5px; }
.regcard .since { margin-top: auto; padding-top: 14px; font-size: 12.5px; color: var(--mute); letter-spacing: .01em; }
@media (max-width: 820px) { .regcards { grid-template-columns: 1fr; } }

/* ---------- ambassadeur / producent aan het woord ---------- */
.amb {
  background: var(--peach); border-radius: var(--r-card);
  padding: clamp(28px, 3.4vw, 52px);
  display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(26px, 3vw, 48px); align-items: center;
}
.amb blockquote { margin: 0; font-size: clamp(24px, 2.9vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.amb .who { margin-top: 18px; font-size: 15px; color: var(--slate); }
.amb .who b { color: var(--ink); font-weight: 600; }
.route { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.route .pin {
  width: 62px; height: 62px; border-radius: 999px; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .06em;
  flex-shrink: 0;
}
.route .pin.eu { background: var(--orange); color: var(--ink); }
.route .line { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 7px, transparent 7px 14px); opacity: .35; }
.labelmock {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 20px; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: var(--slate);
}
.labelmock b { color: var(--ink); font-weight: 500; }
.labelmock .rp { color: var(--orange-ink); }
@media (max-width: 900px) { .amb { grid-template-columns: 1fr; } }

/* ---------- oprichter ---------- */
.founder { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(26px, 3.4vw, 56px); align-items: center; }
/* Het stadsmotto onder de Rotterdam-alinea. Stond eerst als los wapentje naast
   Hans' naam en las daar als een sticker: klein, volkleurig, zonder verband met
   de zin ernaast, op een verder zwart-witte pagina. Hier hoort het wél — de
   alinea eindigt op "That's the Rotterdam way" — en het krijgt de vorm die de
   Rotterdamse uitdrukking een paar regels hoger ook heeft: origineel plus
   vertaling. */
.motto {
  display: flex; align-items: center; gap: 18px;
  margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
}
.motto img { width: 56px; height: auto; flex-shrink: 0; }
.motto figcaption { display: grid; gap: 3px; }
.motto b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.motto span {
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--mute);
  /* Deze regel is lang en staat in een mono-letter, die niet meegeeft. Zonder
     dit duwde hij op een telefoon tegen de schermrand. */
  overflow-wrap: anywhere; text-wrap: pretty;
}
@media (max-width: 620px) {
  .motto { gap: 14px; }
  .motto img { width: 46px; }
  .motto span { font-size: 11px; }
}

/* voetnoot onder de dienstenkaarten — Hans' "(i) your data will never be
   shared with others." Hoort bij de eerste kaart, maar geldt voor het blok. */
.voetnoot {
  margin: 26px 0 0; font-size: 14px; color: var(--slate);
  display: flex; align-items: baseline; gap: 8px;
}
.vn { font-family: var(--mono); font-size: 11.5px; color: var(--orange-ink); }
sup.vn { top: -.4em; position: relative; }

/* hulplijn in stap 2 van "How do we work". Bewust een tekstlink en geen volle
   knop: vijf blokken met elk een massieve knop trekt de aandacht weg van de
   stappen, en dit is een uitweg, geen hoofdactie. */
.step-hulp {
  margin-top: auto; padding-top: 14px;
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 14.5px; font-weight: 600; color: var(--orange-ink);
  border-bottom: 2px solid var(--orange); padding-bottom: 2px;
  transition: gap .25s var(--ease);
}
.step-hulp svg { width: 14px; height: 14px; }
.step-hulp:hover { gap: 11px; }

/* de twee wegen op de purpose-pagina. Hans: "de two choices wat duidelijker
   maken … 1 en 2 getal erbij of het woordje OR tussen de kaders." Zonder
   nummer en zonder scharnier lees je twee losse opmerkingen. */
.keuzes { display: grid; gap: 16px; align-items: stretch; }
.keuze .body { display: flex; flex-direction: column; gap: 14px; }
.keuze-n {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
  background: var(--peach); color: var(--orange-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.keuze-of {
  display: grid; place-items: center; position: relative;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .18em; color: var(--ink);
}
/* Het vlak achter OR moet de kleur van de sectie hebben, anders staat er een
   wit blokje op zand. currentColor van de sectie kan niet, dus erven we de
   achtergrond via een variabele die de sectie zelf zet. */
.keuze-of span {
  background: var(--vlak, var(--paper)); padding: 6px 14px;
  position: relative; z-index: 1;
}
.keuze-of::before {
  content: ""; position: absolute; background: var(--line);
  left: 50%; top: 0; bottom: 0; width: 1px;
}
@media (max-width: 700px) {
  /* onder elkaar draait het scharnier mee: de lijn wordt horizontaal */
  .keuze-of { padding: 2px 0; }
  .keuze-of::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
}
@media (min-width: 701px) {
  .keuzes { grid-template-columns: 1fr auto 1fr; gap: 0; }
  .keuze-of { padding: 0 6px; }
}
.linkedin { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; margin-top: 22px; }
.linkedin svg { width: 22px; height: 22px; flex-shrink: 0; }
@media (max-width: 900px) { .founder { grid-template-columns: 1fr; } }

/* twee keuzekaarten naast elkaar, maar niet op mobiel (class i.p.v. inline
   stijl, anders wint hij van de mobiele media query) */
@media (min-width: 701px) { .cards.duo { grid-template-columns: 1fr 1fr; } }

/* ---------- belafspraak plannen ---------- */
.plan {
  background: var(--sand); border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 44px);
  /* Smaller dan de rest van de pagina. Over de volle 1240 px stond alles zo ver
     uit elkaar dat een dag en zijn tijden niets meer met elkaar te maken leken
     te hebben. */
  max-width: 1000px; margin-inline: auto;
}

/* ---------- wereldkaart bij de belafspraak ----------
   Stippenraster i.p.v. een atlas-SVG: past bij de vormentaal van de site en
   weegt 16 kB in plaats van 200. Equirectangular, dus lon/lat -> x/y is één
   deling en een speld zetten kost niets. Zie PRD-CALL-PLANNER.md.

   De kaart zit in een eigen .mapwrap zonder padding. De spelden staan op een
   percentage van hun ouder, dus zodra daar padding omheen zit, staan ze
   stelselmatig een halve centimeter naast de goede plek. */
.worldmap {
  margin: 0 0 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  padding: 14px; overflow: hidden;
}
/* Lang indrukken op een canvas start op iOS de tekstselectie plus het
   deelmenu ("Copy · Find Selection") — precies het gebaar waarmee je op een
   kaart wilt aanwijzen. Allebei de regels zijn nodig: de eerste stopt de
   selectie, de tweede het menu. */
.mapwrap {
  position: relative; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.mapdoek { position: relative; }
.worldmap canvas { display: block; width: 100%; height: auto; border-radius: 10px; }

/* de balk onder de kaart: dezelfde keuze zonder muis, en op een telefoon de
   hoofdweg — daar bestaat aanwijzen niet */
.mapbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 2px 2px; font-size: 13.5px; color: var(--slate);
}
.mapbar label { font-weight: 600; color: var(--ink); }
/* De opengeklapte lijst tekent het besturingssysteem; daar kunnen we niets aan
   doen. Het dichte knopje is wél van ons, en dat las als systeemelement. Nu
   dezelfde vormtaal als de knoppen: pill, eigen chevron, en hoog genoeg om met
   een duim te raken (44 px). */
.mapbar select {
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--pill);
  padding: 10px 40px 10px 18px; cursor: pointer; max-width: 100%; min-height: 44px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316150F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}
.mapbar select:hover { border-color: var(--ink); }
.mapbar select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,47,.18); }
.mapbar .hint { font-family: var(--mono); font-size: 11.5px; color: var(--mute); }
@media (hover: none) { .mapbar .hint { display: none; } }
.worldmap.kaartloos .mapbar { margin-top: 0; }

/* --- het blokje linksonder in de kaart ---
   Staat er altijd, ook zonder muis: dan toont hij de plek die je gekozen hebt.
   Was eerst een blokje dat de muis volgde — dat stond per definitie bovenop het
   gebied dat net oplichtte — en daarna een balk over de volle breedte, wat veel
   te veel ruimte is voor drie woorden.

   De volgorde is tijd, UTC, stad. De eerste twee zijn altijd even breed; de
   stadsnaam wisselt van lengte en staat daarom achteraan, zodat het blokje
   alleen naar rechts groeit en niet zit te verspringen. */
.kaartchip {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: baseline; gap: 9px;
  margin: 0; padding: 7px 13px;
  background: var(--ink); color: #fff; border-radius: 12px;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(22,21,15,.18);
}
.kaartchip b {
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kaartchip span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: rgba(255,255,255,.6);
}
.kaartchip em {
  font-style: normal; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.9);
}
.pin {
  position: absolute; width: 12px; height: 12px; border-radius: 999px;
  margin: -6px 0 0 -6px; pointer-events: none; z-index: 2;
  transition: left .45s var(--ease), top .45s var(--ease);
}
.pin::after {                       /* rustige puls, zodat je hem vindt */
  content: ""; position: absolute; inset: -7px; border-radius: 999px;
  border: 2px solid currentColor; opacity: .35;
  animation: pinpuls 2.4s ease-out infinite;
}
@keyframes pinpuls { 0% { transform: scale(.55); opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } }
.pin.rotterdam { background: var(--orange); color: var(--orange); }
/* witte rand om de bezoekersspeld: zonder die rand verdwijnt hij in de
   zwarte stippen van het gebied waar hij nu juist in staat */
.pin.bezoeker  { background: var(--ink); color: var(--ink); box-shadow: 0 0 0 2.5px var(--paper); }
.pin .naam {
  position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 8px; color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .pin { transition: none; }
  .pin::after { animation: none; }
}
/* ---------- de kaart op een telefoon ----------
   Gekozen op 5 augustus, na zes varianten naast elkaar (PRD-MOBIEL-RONDE.md §5).

   Wat er speelde: de kaart zat in drie geneste kaders en was daardoor 284 px
   breed, met een raster van 180 kolommen — een vak van 1,6 px. Josh: "je
   wereldkaart is heel klein op de telefoon, echt heel klein."

   Twee ingrepen, waarvan de tweede de grootste is:
   · edge-to-edge → 284 wordt 390 px (+37 %). Meer bestaat er niet: de wereld is
     360° breed, dus schermvullend openen wint alleen hoogte en die kan een
     equirectangulaire kaart niet gebruiken.
   · het raster halveren (4° in plaats van 2°) → een vak wordt 4,3 px. Dát maakt
     hem leesbaar. Zie het `smal`-blok in contact/index.html.

   En de afwerking, ook uit Josh' woorden: geen randlijnen ("er lijkt een lijn te
   staan … als we die weghalen ziet het er meer native uit"), het label weg omdat
   stap 1 al "Where are you?" als kop heeft, en het tijdblokje onder de kaart in
   plaats van erover — het lag op Zuid-Amerika. */
@media (max-width: 700px) {
  /* 100vw met een negatieve marge naar het midden van het scherm: de enige
     manier die niet afhangt van hoe diep de kaart genest zit. Let op dat er
     geen inline `style="margin:…"` op de figure staat — die wint van deze
     regel en schuift de kaart 151 px het scherm uit. */
  .worldmap {
    width: 100vw; margin-left: 50%; transform: translateX(-50%);
    border: 0; border-radius: 0;
    background: var(--paper);
    /* Zonder deze padding plakt de keuzelijst tegen de bovenrand van het witte
       vlak: gemeten 0 px erboven tegen 14 px eronder. Josh: "te weinig
       witruimte boven de selector bar … ongeveer evenveel als tussen de eerste
       pixels van de kaart en de selector bar." Dus exact die 14 px. */
    padding: 14px 0 0;
    /* Aanwijzen bestaat hier niet, dus de keuzelijst is het gereedschap en
       staat bovenaan; de kaart blijft eronder als beeld. */
    display: flex; flex-direction: column-reverse;
  }
  .worldmap canvas { border-radius: 0; }
  .mapbar { font-size: 12.5px; gap: 8px; margin: 0 20px 14px; }
  .mapbar label { display: none; }
  .mapbar select { width: 100%; }
  .pin .naam { font-size: 10px; padding: 1px 6px; }
  /* Geen zwevend label meer maar een regel die bij de kaart hoort. */
  .kaartchip {
    position: static; margin: 12px 20px 16px; box-shadow: none;
    padding: 6px 11px; gap: 7px; border-radius: 10px; align-self: flex-start;
  }
  .kaartchip b { font-size: 14px; }
  .kaartchip span { font-size: 9.5px; }
  .kaartchip em { font-size: 12px; }
}

/* ---------- eigen keuzelijst ----------
   Josh: "de drop-down ziet er een beetje ouderwets uit." Een opengeklapte
   <select> tekent het besturingssysteem, dus daar hielp opmaak niet. Het
   echte select blijft staan als bron van waarheid; dit is de schil eromheen.
   Zie assets/keuzelijst.js — daar staat ook waarom dit op een telefoon
   bewust NIET gebeurt. */
.kl { position: relative; }
.kl.kl-actief > select {
  /* Weg uit beeld, maar niet uit het formulier en niet uit de a11y-boom van
     de browser: display:none zou de waarde niet meer meesturen. */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.kl-knop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin-top: 6px; padding: 12px 16px; min-height: 48px;
  font: inherit; font-size: 15.5px; font-weight: 500; text-align: left;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.kl-knop:hover { border-color: var(--ink); }
.kl-knop svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--slate); transition: transform .25s var(--ease); }
.kl-open .kl-knop { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,122,47,.18); }
.kl-open .kl-knop svg { transform: rotate(180deg); }
.kl-knop.kl-leeg .kl-tekst { color: var(--mute); }
.kl-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kl-paneel {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 6px; overflow: hidden;
}
.kl-omhoog .kl-paneel { top: auto; bottom: calc(100% + 6px); }
.kl-zoek {
  display: block; width: 100%; margin: 2px 2px 6px; padding: 9px 12px;
  font: inherit; font-size: 14.5px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; background: var(--sand);
}
.kl-zoek:focus { outline: none; border-color: var(--orange); background: var(--paper); }
.kl-lijst {
  list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto;
  overscroll-behavior: contain;
}
.kl-optie {
  padding: 9px 12px; border-radius: 10px; font-size: 15px; cursor: pointer;
  color: var(--ink); scroll-margin: 4px;
}
.kl-optie.aan { background: var(--sand); }
.kl-optie[aria-disabled="true"] { color: var(--mute); cursor: default; }
.kl-groep {
  padding: 12px 12px 5px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
}
.kl-lijst.kl-niets::after {
  content: "Nothing matches."; display: block; padding: 12px;
  font-size: 14.5px; color: var(--mute);
}

/* In de kaartbalk staat de keuzelijst niet onder een label maar in een rij;
   daar hoort hij dezelfde pilvorm te hebben als de knoppen. */
.mapbar .kl { flex: 1; min-width: 200px; }
.mapbar .kl-knop { margin-top: 0; border-radius: var(--pill); padding: 11px 18px; }
.mapbar .kl-paneel { border-radius: 18px; }

/* ---------- stapkoppen ----------
   Waren 12 px kapitaal in gedempt grijs met een bolletje van 22 px. Josh:
   "ik kan bijna niet zien dat het eentje was, dat het stappen zijn." Een stap
   is de belangrijkste tekst op zijn stuk van de pagina, dus die leest nu als
   een kop. */
.stap {
  display: flex; align-items: center; gap: 13px;
  margin: 38px 0 16px; flex-wrap: wrap;
}
.stap:first-of-type { margin-top: 0; }
.stap .n {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}
.stap .t { font-size: 20px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
.stap .hulp { margin-left: auto; font-size: 13px; color: var(--slate); }

/* ---------- dagen ---------- */
/* Tien werkdagen op één regel. Met auto-fit paste er negen en viel de tiende
   naar een tweede regel — één eenzaam blokje onder een volle rij. */
.days { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.day {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid var(--line); background: var(--paper); border-radius: 16px; padding: 12px 6px;
  cursor: pointer; font-family: inherit; color: inherit;
  transition: transform .15s var(--ease), border-color .15s, background .15s;
}
.day:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--ink); }
.day:disabled { opacity: .38; cursor: not-allowed; }
.day .dw { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.day .dn { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.day .mo { font-size: 11.5px; color: var(--mute); }
.day.sel { background: var(--ink); border-color: var(--ink); color: #fff; }
.day.sel .dw, .day.sel .mo { color: rgba(255,255,255,.66); }

/* ---------- tijden, per dag onder elkaar ----------
   Stonden als één lange rij pillen achter elkaar. Die was breed, de tijden
   waren klein, en je zag niet bij welke dag ze hoorden. */
/* Het aantal kolommen komt uit JS (--kolommen) en is nooit minder dan twee:
   één dag over de volle breedte oogt als een tabel, niet als een keuze. */
.dagen { display: grid; grid-template-columns: repeat(var(--kolommen, 2), minmax(0, 1fr)); gap: 14px; }
.geen-dag { font-size: 14.5px; color: var(--mute); margin: 0; }
.dagkolom { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 13px 13px 14px; }
.dk-kop { display: flex; align-items: baseline; gap: 7px; margin-bottom: 10px; }
.dk-kop b { font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; }
.dk-kop span { font-size: 13px; color: var(--mute); }
.dk-kop em {
  margin-left: auto; font-style: normal; font-family: var(--mono);
  font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums;
}
.slot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  border: 1px solid var(--line); background: var(--paper); border-radius: 12px;
  padding: 9px 13px; margin-bottom: 7px;
  font-family: inherit; color: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.slot:last-child { margin-bottom: 0; }
.slot:hover { border-color: var(--ink); }
.slot .s-rot { font-size: 17px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* Dit merkje verschijnt alleen als een moment bij de bezoeker op een ándere
   dag valt: 08:00 bij ons is in Vancouver 23:00 de dag ervóór. Dat is precies
   het soort ding waar je overheen leest en waar je vervolgens een afspraak op
   de verkeerde dag aan overhoudt. Dus geen grijs muizenschrift maar oranje en
   halfvet — dit is een waarschuwing, geen bijschrift. */
.slot .s-eigen {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  color: var(--orange-ink); letter-spacing: .03em;
}
/* op een aangeklikt (zwart) tijdvak moet het licht zijn, anders lees je niets */
.slot.sel .s-eigen { color: #FFB988; }
.slot.sel { background: var(--ink); border-color: var(--ink); color: #fff; }


/* ---------- gekozen momenten ----------
   Drie regels over de volle breedte die alle drie dezelfde datum herhaalden.
   Nu per dag gegroepeerd, en de volgnummers zijn inkt in plaats van fel oranje:
   dat cijfer is een detail, geen alarm. */
/* Zelfde raster als de tijdkolommen erboven: per dag een kaartje. Als brede
   regels stond de dagnaam links naast de pillen, en dan lijnt een naam van twee
   regels nergens meer mee uit. */
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(var(--kolommen, 2), minmax(0, 1fr)); }
.picks li.pd {
  display: block;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 13px 14px 14px;
}
.picks li.empty { grid-column: 1 / -1; }
.pd-dag { display: flex; align-items: baseline; gap: 7px; margin-bottom: 10px; }
.pd-dag b { font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; }
.pd-dag > span { font-size: 13px; color: var(--mute); }
.pd-tijden { display: grid; gap: 7px; }
.pt {
  /* Het kruisje zat in een kolom die alle overgebleven ruimte pakte, waardoor
     het als een enorm breed vlak midden in de pil stond. Nu duwt de lege kolom
     het naar rechts en is het kruisje zelf zo groot als een kruisje. */
  display: grid; grid-template-columns: 22px auto auto 1fr 20px; align-items: center; gap: 9px;
  background: var(--sand); border-radius: 12px; padding: 7px 9px 7px 8px;
}
.pt-n {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.pt b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pt small { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--orange-ink); justify-self: start; }
.pt-weg {
  grid-column: 5; justify-self: end;
  width: 20px; height: 20px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--mute);
  /* Zelfde reden als bij de menuknop: zonder eigen lettertype kan het kruisje
     in een emoji-font belanden en dan gaat `color` er niet meer over. */
  font-family: var(--sans); font-size: 12px; line-height: 1; padding: 0; border-radius: 999px;
}
.pt-weg:hover { color: var(--ink); background: var(--line); }
.picks .empty {
  color: var(--mute); font-size: 14.5px; border: 1px dashed var(--line);
  border-radius: 16px; padding: 16px; background: transparent;
}

@media (max-width: 860px) {
  /* tien dagblokjes van 60 px worden onleesbaar; twee rijen van vijf leest beter */
  .days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dagen, .picks { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  .stap { margin: 30px 0 13px; gap: 11px; }
  .stap .t { font-size: 18px; }
  .stap .hulp { margin-left: 43px; width: 100%; }
  .days { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 7px; }
  .day { padding: 10px 4px; border-radius: 13px; }
  .day .dn { font-size: 21px; }
  .dagen, .picks { grid-template-columns: 1fr; }
  .days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pd-dag { min-width: 0; flex: 1 0 100%; }
}

/* drie stappen i.p.v. vier (onboarding uit het document) */
@media (min-width: 1041px) { .steps.three { grid-template-columns: repeat(3, 1fr); } }
/* twee kaarten naast elkaar in het personenraster */
@media (min-width: 1041px) { .people.duo { grid-template-columns: 1fr 1fr; } }

/* ankers niet onder de zwevende nav laten vallen */
[id] { scroll-margin-top: 110px; }

/* Zijn eigen lijsten uit het juli-document hebben vier en vijf punten. Die
   houden we heel, dus twee extra rastervarianten. */
@media (min-width: 1041px) { .cards.four { grid-template-columns: repeat(4, 1fr); } }
.steps.auto { grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); }
.card .body.only-text { padding-top: 2px; }

/* =============================================================
   DE QUOTE OP /eu-regulation/ — vijf vormen om uit te kiezen
   Met ?quote=1 t/m 5. Zonder parameter de huidige: zandkleurig
   blok, tekst over de volle breedte. Josh vond die "meh".
   Zodra hij kiest blijft er één over en gaat de rest eruit.
   ============================================================= */
.quote .q-mark, .quote .q-label { display: none; }
.quote .q-tekst { display: block; }

/* 1 · Redactioneel — geen vlak, alleen een oranje streep en grote letter.
      De rust van de pagina blijft; de quote wordt een adempauze. */
.quote.q1 {
  background: none; padding: 0 0 0 clamp(20px, 3vw, 34px);
  border-left: 3px solid var(--orange);
  font-size: clamp(24px, 3vw, 40px); max-width: 20ch;
}
.quote.q1 .by { margin-top: 22px; }

/* 2 · Met aanhalingsteken — het teken doet het werk, de tekst blijft rustig. */
.quote.q2 {
  background: none; padding: 0;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.5vw, 32px);
  align-items: start; font-size: clamp(20px, 2.1vw, 27px);
}
.quote.q2 .q-mark {
  display: block; font-size: clamp(80px, 11vw, 150px); line-height: .74;
  color: var(--orange); font-weight: 700;
}
.quote.q2 .by { grid-column: 2; }

/* 3 · Donker blok — geeft de pagina één donkere beat, zoals de CTA onderaan. */
.quote.q3 {
  background: var(--ink); color: #fff;
  padding: clamp(38px, 5vw, 72px) clamp(30px, 5vw, 72px);
}
.quote.q3 span:not(.by):not(.q-mark):not(.q-label):not(.q-tekst) { color: var(--orange); }
.quote.q3 .by { color: rgba(255,255,255,.6); }

/* 4 · Als wetsartikel — klein label links, tekst rechts. Leest als een citaat
      uit een verordening in plaats van als een uitspraak. */
.quote.q4 {
  background: none; padding: clamp(26px, 3vw, 38px) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 150px 1fr; gap: clamp(20px, 3vw, 44px);
  align-items: start; font-size: clamp(19px, 1.9vw, 25px);
}
.quote.q4 .q-label {
  display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange-ink); font-weight: 500; padding-top: 7px;
}
.quote.q4 .by { grid-column: 2; }
@media (max-width: 700px) { .quote.q4 { grid-template-columns: 1fr; gap: 10px; } .quote.q4 .by { grid-column: 1; } }

/* 5 · Smal en gecentreerd — de stilste. Werkt als je hem als pauze wilt. */
.quote.q5 {
  background: none; padding: clamp(30px, 4vw, 54px) 0;
  max-width: 30ch; margin-inline: auto; text-align: center;
  font-size: clamp(21px, 2.2vw, 29px);
}
.quote.q5 .by { margin-top: 20px; }

/* =============================================================
   Ronde twee, 6 augustus. Josh over het zandvlak: "die kan sowieso
   minder en misschien hoeft hij helemaal niet in een blok."
   De eerste vijf gingen de verkeerde kant op: q1 maakte hem juist
   groter. Deze drie zijn alle drie kleiner dan het origineel
   (30px) en gaan van "uitspraak" naar "citaat uit een wettekst".
   Kiezen met ?quote=a, b of c.
   ============================================================= */

/* A · Wetsartikel. Geen vlak, twee haarlijnen, en de bron staat in het
      label links in plaats van eronder. Dit ís een wetsartikel, dus laat
      het er ook zo uitzien in plaats van als een marketingquote. */
.quote.qa {
  background: none; border-radius: 0;
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(140px, 22%) 1fr;
  gap: clamp(18px, 3vw, 40px); align-items: start;
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 500;
  letter-spacing: -.01em; line-height: 1.45;
}
.quote.qa .q-label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange-ink); font-weight: 500;
  padding-top: 4px;
}
.quote.qa .by {
  grid-column: 1; grid-row: 2; margin: 8px 0 0;
  font-size: 12px; line-height: 1.4;
}
.quote.qa .q-tekst { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 700px) {
  .quote.qa { grid-template-columns: 1fr; gap: 8px; }
  .quote.qa .by { grid-column: 1; grid-row: 3; margin-top: 12px; }
  .quote.qa .q-tekst { grid-column: 1; grid-row: 2; }
}

/* B · Ingesprongen citaat. Helemaal geen blok, alleen een dunne oranje
      streep. De rustigste van de drie: de zin loopt gewoon mee in de
      pagina in plaats van hem te onderbreken. */
.quote.qb {
  background: none; border-radius: 0;
  padding: 0 0 0 clamp(18px, 2.4vw, 28px);
  border-left: 2px solid var(--orange);
  max-width: 62ch;
  font-size: clamp(17px, 1.55vw, 22px); font-weight: 500;
  letter-spacing: -.01em; line-height: 1.5;
}
.quote.qb .q-label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange-ink); font-weight: 500;
  margin-bottom: 10px;
}
.quote.qb .by { margin-top: 12px; font-size: 12.5px; }

/* C · Documentfragment. Wel een blok, maar een ander soort: geen gevuld
      zandvlak over de volle breedte, maar een omlijnde kaart op papier,
      smaller dan de tekstkolom, met het artikelnummer als chip erboven.
      Leest als een uitsnede uit het document zelf. */
.quote.qc {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(24px, 2.8vw, 34px);
  max-width: 68ch;
  font-size: clamp(17px, 1.55vw, 22px); font-weight: 500;
  letter-spacing: -.01em; line-height: 1.5;
}
.quote.qc .q-label {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink);
  font-weight: 500; background: var(--sand); border-radius: 999px;
  padding: 5px 11px; margin-bottom: 14px;
}
.quote.qc .by { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; }

/* =============================================================
   Ronde drie. Josh: "dat dikgedrukte dat er origineel stond vind ik
   wel mooi. Alleen misschien hoeft het niet in zo'n soort blokje,
   maar een ander soort. En wat minder witruimte erboven en onder."
   Dus: vet blijft, het gevulde zandvlak gaat eruit, en de sectie
   eromheen wordt krapper. Kiezen met ?quote=d, e of f.
   ============================================================= */

/* De sectie die alleen dit blok bevat kreeg 118 px boven en onder, en de
   sectie ervoor nog eens 118 px. Dat is tot 236 px lucht boven een enkele
   zin. Deze klasse halveert dat ruim. */
/* Gemeten op 1440: met de gewone .blk stond er 254 px lucht boven het blok en
   230 eronder, want de sectie ernaast geeft er zelf ook 115 px bij. Op deze
   waarde wordt dat 176 en 152. Verder omlaag kan, maar dan komt de quote
   dichter op de kaarten te zitten dan de rest van het paginaritme. */
section.blk.krap { padding: clamp(20px, 2.4vw, 36px) 0; }

/* D · Vet zonder vlak. Twee haarlijnen, verder niets. Het gewicht van het
      origineel blijft, de bak eromheen verdwijnt. */
.quote.qd {
  background: none; border-radius: 0;
  padding: clamp(26px, 3vw, 40px) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: clamp(20px, 2vw, 26px); font-weight: 600;
  letter-spacing: -.022em; line-height: 1.3;
  max-width: 46ch;
}
.quote.qd .by { margin-top: 14px; font-size: 13px; }

/* E · Vet in een omlijnde kaart. Wel een blok, maar een ander soort: een lijn
      in plaats van een vulling, en smaller dan de kolom. */
.quote.qe {
  background: none; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(26px, 3vw, 40px);
  font-size: clamp(20px, 2vw, 26px); font-weight: 600;
  letter-spacing: -.022em; line-height: 1.3;
  max-width: 52ch;
}
.quote.qe .by { margin-top: 14px; font-size: 13px; }

/* F · Vet met een oranje streep links. Geen kader, alleen een markering dat
      dit een citaat is. Van de drie de minst omkaderde. */
.quote.qf {
  background: none; border-radius: 0;
  padding: clamp(4px, 1vw, 8px) 0 clamp(4px, 1vw, 8px) clamp(20px, 2.6vw, 30px);
  border-left: 3px solid var(--orange);
  font-size: clamp(20px, 2vw, 26px); font-weight: 600;
  letter-spacing: -.022em; line-height: 1.3;
  max-width: 46ch;
}
.quote.qf .by { margin-top: 14px; font-size: 13px; }