/* ======================================================================
   Merkfundatie v6 · home.css · alleen op de homepage (meta home="1" in
   _src/index.html; _build.py laadt dit bestand na knoppen.css).
   De secties uit de keuzeronde van 28-09, elk onder een eigen klasse
   (.h-hero, .h-brief, .h-intro, .h-waarom, .h-werk, .h-zaak, .h-maken, .h-ervaringen, .h-begin).
   Bron per sectie: concepts/v6-lab/port/<sectie>/section.css of (ronde 29-09) het gekozen optie-
   anker in concepts/v6-lab/home-opties/. Alle lichte vlakken staan op --paper (regel eigenaar 29-09).
   De voet (.h-voet) staat op elke pagina en zit daarom in knoppen.css.
   Onderaan: afstemming tussen de secties (ritme), na het samenvoegen.
   ====================================================================== */


/* ######################################################################
   1 · HERO · optie O "Binnenbad als een salon" (keuze eigenaar 28-09, uit v6-lab/home-opties/01d-hero-foto.html)
   levend beeld: daglicht, water, warme panelen, blauw uur met lampjes; Unsplash-foto tijdelijk
   ###################################################################### */
/* ======================================================================
   Eén stil beeld dat leeft. Beeld: een klassiek binnenbad met rozige
   wandpanelen, zuilen en een glazen wand naar de tuin, gespiegeld in het
   water. De foto staat op volle kracht (zoals op 01d): lichte tekst op een
   lichte nachtblauwe sluier bovenin, waar het plafond al donker is.
   Cyclus van 64 s: daglicht door de glazen wand schuift over de zuilen en
   in banen over de vloer; de rozige panelen kleuren warmer naar de late
   middag; dan het blauwe uur: de tuin wordt blauw, de lampjes in het
   plafond, het lichtlijstje en hun spiegeling in het water gaan aan.
   Daarna spoelt hij zacht terug. Doorlopend en heel rustig (Motion): het
   water glinstert en de spiegeling deint. Beweging: home.js (stil bij
   reduced motion). Alles hangt onder .h-hero.

   Twee opbouwen:
   - breed (liggend scherm): het beeld vult de hero; kop, zin en knop staan
     samen in het midden (14-10, .is-mid; eerder bovenin op het plafond). Onderaan
     loopt de foto kort over in het beige van de brief.
   - smal (telefoon, staand scherm): de kop op het plafond van een staande
     uitsnede; zin en knop eronder op nachtblauw, waar het water in overloopt.

   De levende lagen liggen in .h-hero-fx, een vak met de maat van de hele
   foto (4:3). Breed valt dat samen met het podium; op de telefoon toont
   het podium een staande uitsnede (3:4, 21,875 % tot 78,125 % van de
   breedte) en schuift .h-hero-fx mee (links -38,89 %, breedte 177,78 %).
   Zo blijven alle plekken hieronder in procenten van de hele foto kloppen:
   - hero-salon-licht.webp: twee maskers uit de foto zelf, boven elkaar in één
     bestand (één verzoek): boven de lampjes in het plafond, hun spiegeling in
     het water en het lichtlijstje langs het plafond; onder de tuin achter het
     glas en in de spiegeling (zonder de zuilen), die bij het blauwe uur blauw wordt
   - --glass: de glazen wand met de zuilen, en recht eronder zijn spiegeling
   - --pool: het water; --mirror: de spiegeling van de glazen wand erin
   - --deck: de marmeren vloer langs het bad; --walls: de rozige wanden
   - verdwijnpunt (50 %, 48 %): daar komen de lichtbanen op de vloer vandaan
   ====================================================================== */
/* 14-10: de foto is nu de brasserie (stil beeld). De regels voor .h-hero-fx, de lagen en de pauzeknop hieronder horen bij
   het binnenbad en doen niets zolang die markup ontbreekt (home.js stopt de hero-module dan ook); ze blijven staan zolang
   het binnenbad terug kan komen (oude markup: v6-lab/index-hero-binnenbad-14-10.html.bak). */
.h-hero{
  --bar:72px;--ar:1.7778;--px:.5;--py:.5;   /* 14-10: brasserie, breed 16:9 en gecentreerd (was 4:3, bovenaan, bij het binnenbad) */
  --sc:22,32,48;
  --glass:polygon(24.8% 31.5%,75.2% 31.5%,75.2% 80%,24.8% 80%);
  --pool:polygon(31% 58.5%,69% 58.5%,100% 75%,100% 100%,0 100%,0 75%);
  --mirror:polygon(31% 58.5%,69% 58.5%,75.2% 61.8%,75.2% 80%,24.8% 80%,24.8% 61.8%);
  --deck:polygon(0 62%,24.8% 55.2%,75.2% 55.2%,100% 62%,100% 75%,69% 58.5%,31% 58.5%,0 75%);
  --walls:polygon(0 13.5%,24.8% 30.5%,24.8% 55.2%,0 62%,0 13.5%,100% 13.5%,100% 62%,75.2% 55.2%,75.2% 30.5%,100% 13.5%);
  position:relative;height:clamp(520px,calc(100svh - var(--bar)),920px);overflow:hidden;   /* min. 520 (was 620): op een lage laptop past de hele hero in beeld */
  container-type:size;background:var(--ink);isolation:isolate;color:var(--on-ink)}

/* ---------- podium met foto en lagen ---------- */
.h-hero-stage{position:absolute;z-index:0;
  --sw:max(100cqw,calc(100cqh * var(--ar)));--sh:max(100cqh,calc(100cqw / var(--ar)));
  width:var(--sw);height:var(--sh);
  left:calc((100cqw - var(--sw)) * var(--px));top:calc((100cqh - var(--sh)) * var(--py))}
.h-hero-stage picture{display:contents}
.h-hero-ph{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;object-fit:cover}
.h-hero-fx{position:absolute;top:0;bottom:0;left:0;width:100%;pointer-events:none}
.h-hero-ly{position:absolute;inset:0;pointer-events:none}
.h-hero-mul{mix-blend-mode:multiply}
.h-hero-sl{mix-blend-mode:soft-light}
.h-hero-scr{mix-blend-mode:screen}

/* de middag kleurt warmer: heel licht over alles, sterker op de rozige wandpanelen */
.h-hero-warm{background:#f0a055;opacity:.05}
.h-hero-wall{clip-path:var(--walls);opacity:.12;
  background:linear-gradient(90deg,#f39a5c 0,#ffa968 24.8%,#ffa968 75.2%,#f39a5c 100%)}
/* daglicht op de vloer: een brede, zachte baan zonlicht vanuit de glazen wand over het marmer langs het bad.
   Hij draait om het verdwijnpunt: 's middags op de rechtervloer, naar de late middag op de linker (zon schuift mee) */
.h-hero-floor{clip-path:var(--deck);opacity:.1}
.h-hero-rays{position:absolute;left:-20%;width:140%;top:-45.33%;height:186.67%;will-change:transform;
  background:conic-gradient(from 160deg at 50% 50%,rgba(255,222,176,0) 0deg,rgba(255,222,176,.75) 9deg,rgba(255,226,182,.95) 20deg,rgba(255,222,176,.75) 31deg,rgba(255,222,176,0) 40deg,rgba(255,222,176,0) 360deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 5%,rgba(0,0,0,.6) 35%,transparent 85%);mask-image:radial-gradient(closest-side,#000 5%,rgba(0,0,0,.6) 35%,transparent 85%)}
/* en een warme baan zonlicht die over de zuilen schuift; recht eronder dezelfde baan in de spiegeling */
.h-hero-sun{clip-path:var(--glass);opacity:.3}
.h-hero-sweep{position:absolute;top:0;bottom:0;left:0;width:34%;will-change:transform;
  background:linear-gradient(90deg,rgba(255,214,150,0) 0,rgba(255,214,150,.75) 30%,rgba(255,226,176,.95) 50%,rgba(255,214,150,.75) 70%,rgba(255,214,150,0) 100%)}
/* water: fijne glinsteringen op het bad (plat, in perspectief) en een trage deining in de spiegeling */
.h-hero-water{clip-path:var(--pool);opacity:.18}
.h-hero-rip{position:absolute;left:-4%;right:-4%;top:57%;bottom:-3%;will-change:transform}
.h-hero-mirror{clip-path:var(--mirror);opacity:.3}
.h-hero-rip2{position:absolute;left:18%;width:64%;top:58%;height:23%;will-change:transform}
.h-hero-rip svg,.h-hero-rip2 svg{display:block;width:100%;height:100%}
.h-hero-rip svg{filter:blur(.6px)}
.h-hero-rip2 svg{filter:blur(1.2px)}
/* het blauwe uur: alles wat donkerder, de tuin achter het glas (en zijn spiegeling) blauw; de zuilen blijven licht */
.h-hero-dusk{background:#2c3852;opacity:0}
.h-hero-night{background:#1f2d57;opacity:0;
  -webkit-mask:url(img/home/hero-salon-licht.webp) 0 100%/100% 200% no-repeat;mask:url(img/home/hero-salon-licht.webp) 0 100%/100% 200% no-repeat}
/* de lampen: alleen waar de foto al licht heeft (masker); in het water iets koeler */
.h-hero-lamps{opacity:0;background:#ffc88e;
  -webkit-mask:url(img/home/hero-salon-licht.webp) 0 0/100% 200% no-repeat;mask:url(img/home/hero-salon-licht.webp) 0 0/100% 200% no-repeat}
.h-hero-lamps::after{content:"";position:absolute;inset:0;clip-path:var(--pool);background:#c6efe6;opacity:.45}

/* ---------- sluier: nachtblauw en licht, alleen bovenin waar de tekst staat; onderaan kort naar het beige ---------- */
.h-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(to bottom,rgba(var(--sc),.62) 0,rgba(var(--sc),.52) 24%,rgba(var(--sc),.3) 42%,rgba(var(--sc),.1) 52%,rgba(var(--sc),0) 60%),
  linear-gradient(to top,var(--paper) 0,rgba(244,236,223,.72) 3%,rgba(244,236,223,.32) 7%,rgba(244,236,223,.08) 11%,rgba(244,236,223,0) 14%)}

/* ---------- tekst: licht, samen bovenin ---------- */
.h-hero-top{position:relative;z-index:3;padding-top:clamp(28px,6.5cqh,64px);text-align:center}   /* boven de ovale verdieping van .h-hero-foot */
.h-hero-h{margin:0;font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.01em;line-height:.92;
  font-size:clamp(2.3rem,.6rem + 4.7vw,6rem);color:var(--on-ink);text-wrap:balance}
.h-hero-h .ln{display:block}
.h-hero-foot{position:relative;z-index:2;margin-top:clamp(14px,2.6cqh,28px);text-align:center}
/* zin en knoppen staan op de rand van het plafond, waar het lichtlijstje en de bovenkant van het glas licht zijn:
   daar een zachte, ovale verdieping van dezelfde sluier, precies achter dit blok (gemeten: link ≥ 4,5:1 in elke stand) */
.h-hero-foot::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(1180px,96%);height:calc(100% + 150px);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--sc),.5),rgba(var(--sc),.4) 45%,rgba(var(--sc),.16) 75%,rgba(var(--sc),0))}
.h-hero-lead{margin:0 auto;max-width:36em;font-size:clamp(1rem,.95rem + .25vw,1.15rem);line-height:1.55;color:var(--on-ink);text-wrap:pretty}
.h-hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 26px;margin:18px 0 0}
.h-hero .tl{color:var(--on-ink);text-decoration-color:rgba(244,238,228,.5);display:inline-flex;align-items:center;gap:.4em;min-height:44px}
.h-hero .tl:hover,.h-hero .tl:focus-visible{text-decoration-color:currentColor}
.h-hero :focus-visible{outline:2px solid var(--on-ink);outline-offset:3px}

/* ---------- pauzeknop (WCAG 2.2.2): klein en rustig, een donker glaasje op de foto ---------- */
.h-hero-pause{position:absolute;z-index:3;right:var(--m);top:18px;width:44px;height:44px;border:0;padding:0;border-radius:50%;
  background:rgba(var(--sc),.5);box-shadow:inset 0 0 0 1px rgba(244,238,228,.55);color:var(--on-ink);display:grid;place-items:center;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.h-hero-pause[hidden]{display:none}
.h-hero-pause:hover{background:rgba(var(--sc),.78);box-shadow:inset 0 0 0 1px var(--on-ink)}
.h-hero-pause:focus-visible{background:rgba(var(--sc),.78);box-shadow:inset 0 0 0 1px var(--on-ink)}
.h-hero-pause::before{content:"";box-sizing:border-box;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.h-hero-pause[aria-pressed="true"]::before{width:0;height:0;border-right:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}

/* ---------- smal: de kop op het beeld, zin en knop eronder op nachtblauw ---------- */
@media (max-width:699px),(max-aspect-ratio:4/5){
  .h-hero{height:auto;container-type:normal;display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-areas:"stage" "foot";padding:0;background:var(--ink)}
  .h-hero-stage{grid-area:stage;position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:var(--ar)}
  .h-hero-top{grid-area:stage;align-self:start;padding-top:clamp(24px,6vw,40px)}
  .h-hero-scrim{grid-area:stage;position:relative;inset:auto;background:
    linear-gradient(to bottom,rgba(var(--sc),.62) 0,rgba(var(--sc),.46) 16%,rgba(var(--sc),.18) 28%,rgba(var(--sc),0) 36%),
    linear-gradient(to top,var(--ink) 0,rgba(var(--sc),.7) 5%,rgba(var(--sc),.25) 12%,rgba(var(--sc),0) 20%)}
  .h-hero-foot{grid-area:foot;margin-top:clamp(14px,4vw,24px)}
  .h-hero-foot::before{display:none}
  .h-hero-foot .tl{margin-bottom:-12px}
  .h-hero-pause{grid-area:stage;position:relative;top:auto;right:auto;align-self:end;justify-self:end;margin:0 var(--m) 14px}
}
/* telefoon: de staande uitsnede (21,875 % tot 78,125 % van de brede foto, volle hoogte, hero-salon-m-*);
   de lagen rekenen terug naar de hele foto: 21,875 / 56,25 = 38,89 % naar links, 100 / 56,25 = 177,78 % breed */
@media (max-width:699px){
  .h-hero{--ar:.75}
  .h-hero-stage{overflow:hidden}
  .h-hero-fx{left:-38.889%;width:177.778%}
  .h-hero-h{font-size:clamp(2rem,9vw,2.6rem);max-width:9em;margin-inline:auto}
  .h-hero-h .ln{display:inline}
  .h-hero-lead{font-size:1rem}
  .h-hero-cta{gap:8px 22px}
}

/* ---------- 14-10 · de tekst in het midden (keuze eigenaar; eerst onderaan geprobeerd, vergelijking in
   v6-lab/hero-positie-midden-onderaan.jpg, de onderaan-css staat in v6-lab/voor-whatsapp-14-10/home.css) ----------
   .is-mid: kop, zin en knoppen samen in het midden, op een ovale nachtblauwe sluier over de glazen wand; onderaan
   loopt de foto kort over in het beige. Smal: de kop in het midden van de foto, zin en knop eronder. */
@media (min-width:700px) and (min-aspect-ratio:4/5){
  .h-hero.is-mid{display:flex;flex-direction:column;justify-content:center}
  .h-hero.is-mid .h-hero-top{padding-top:0}
  .h-hero.is-mid .h-hero-scrim{background:
    radial-gradient(ellipse 64% 54% at 50% 50%,rgba(var(--sc),.62) 0,rgba(var(--sc),.5) 42%,rgba(var(--sc),.2) 72%,rgba(var(--sc),0) 100%),
    linear-gradient(to top,var(--paper) 0,rgba(244,236,223,.72) 3%,rgba(244,236,223,.32) 7%,rgba(244,236,223,.08) 11%,rgba(244,236,223,0) 14%)}
}
/* 14-10 mobieltest: de kop stond op 320 px deels op de lichte marmeren schouw (plaatselijk ~2,3:1). Een smalle, platte ovaal
   (70 % × 22 %) maakt alleen de strook achter de kop iets donkerder; gemeten 320 tot 768 px: elke letter ≥ 4,5:1, de foto blijft licht */
@media (max-width:699px),(max-aspect-ratio:4/5){
  .h-hero.is-mid .h-hero-top{align-self:center;padding-top:0}
  .h-hero.is-mid .h-hero-scrim{background:
    radial-gradient(ellipse 70% 22% at 50% 50%,rgba(var(--sc),.32) 0,rgba(var(--sc),.3) 60%,rgba(var(--sc),0) 100%),
    radial-gradient(ellipse 80% 40% at 50% 50%,rgba(var(--sc),.6) 0,rgba(var(--sc),.42) 50%,rgba(var(--sc),0) 100%),
    linear-gradient(to top,var(--ink) 0,rgba(var(--sc),.7) 5%,rgba(var(--sc),.25) 12%,rgba(var(--sc),0) 20%)}
}

/* ---------- geen beweging: het beeld staat stil in de mooiste stand (home.js) ---------- */
@media (prefers-reduced-motion:reduce){
  .h-hero-pause{display:none}
  .h-hero-rays,.h-hero-sweep,.h-hero-rip,.h-hero-rip2{will-change:auto}
}

/* ---------- gereedschap 28-09 · de kop komt regel voor regel uit een snede ----------
   21st.dev-patroon "Vertical Cut Reveal", vertaald naar CSS: elke regel schuift omhoog uit zijn eigen
   uitsnede (alleen transform, dus geen CLS). Bewust in CSS en niet in Motion: de kop staat er dan ook als
   de CDN niet laadt. UI/UX Pro Max (gsap · Stagger List): kort, alleen op de kop, 400-900 ms, expo-uit.
   Alleen breed (daar is elke regel een eigen blok) en alleen met html.motion. */
@media (min-width:700px) and (min-aspect-ratio:4/5){
  .motion .h-hero-h .ln{overflow:hidden;padding-block:.06em;margin-block:-.06em}
  .motion .h-hero-h .lni{display:block;animation:h-hero-cut .95s cubic-bezier(.16,1,.3,1) .12s both}
  .motion .h-hero-h .ln+.ln .lni{animation-delay:.24s}
  .motion .h-hero-foot{animation:h-hero-rise .8s cubic-bezier(.16,1,.3,1) .42s both}
}
@keyframes h-hero-cut{from{transform:translateY(104%)}to{transform:none}}
@keyframes h-hero-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Motion (home.js): het podium zakt bij scrollen rustig weg (scroll-gekoppeld, max. 7 %); zonder beweging niets */
.h-hero-stage.is-drift{will-change:transform}


/* ######################################################################
   1c · BRIEF · "Beste hospitality-ondernemer," · een vel papier tussen hero en intro (verzoek eigenaar 28-09)
   ###################################################################### */
/* ======================================================================
   Home · 1c · Brief. Alles hangt onder .h-brief.
   Grond: --paper, net als de onderkant van de hero: de foto loopt zonder naad
   over in de tafel waarop het vel ligt. De intro erna ligt op hetzelfde
   --paper (29-09: elke lichte sectie op één beige).
   Ritme: één --sec tussen hero en vel; onder het vel niets, want de intro
   brengt zijn eigen --sec mee. Zo heeft elke overgang één maat.
   Het vel: warm wit (papier mag wit zijn), een fijne korrel uit een kleine
   SVG-ruis, een haarlijn en een lage, zachte schaduw; ruime marges.
   Tekst: DM Sans 1.06 tot 1.22rem, regelhoogte 1.7, maat 36em
   (UI/UX Pro Max: 65 tot 75 tekens per regel, regelhoogte 1.5 tot 1.75).
   Eén zin of gedachte per alinea, met lucht ertussen.
   Nadruk rustig: de verliesregel en het Rouchelli-cijfer halfvet in inkt;
   de ene grote domino in Archivo, iets groter, delftblauw. Geen markeerstift.
   Ondertekening (21st.dev "Editorial Testimonial": portret, naam, rol):
   kleine ronde portretten, namen in Archivo cursief en smal, eronder een
   koperen pennenstreek (21st.dev "Signature Pad": de lijn die zich tekent).
   ====================================================================== */
.h-brief{--vel:#FEFBF6;--pad:clamp(22px,7vw,112px);--padv:clamp(34px,6vw,96px);
  position:relative;background:var(--paper);padding-top:var(--ritme-ruim)}
.h-brief .hb-vel{position:relative;box-sizing:border-box;max-width:calc(36em + 2 * var(--pad));margin:0 auto;padding:var(--padv) var(--pad) calc(var(--padv) + 8px);
  font-size:clamp(1.06rem,.98rem + .3vw,1.22rem);line-height:1.7;color:var(--ink);
  background-color:var(--vel);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border:1px solid rgba(22,32,48,.07);
  box-shadow:0 1px 2px rgba(22,32,48,.04),0 28px 56px -36px rgba(22,32,48,.26)}

/* briefhoofd: afzender links, datum rechts, haarlijn eronder */
.h-brief .hb-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 24px;margin:0 0 clamp(36px,4.4vw,60px);padding-bottom:16px;border-bottom:1px solid var(--line);line-height:1.35}
.h-brief .hb-afz{display:grid;gap:3px;font-family:var(--f-display);font-weight:700;font-stretch:80%;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.h-brief .hb-afz-r{font-family:var(--f-body);font-weight:400;font-stretch:100%;font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.h-brief .hb-datum{margin:0;font-size:.82rem;color:var(--ink-soft)}

/* de brief zelf */
.h-brief .hb-tekst p{margin:0;max-width:36em;text-wrap:pretty}
.h-brief .hb-tekst p+p{margin-top:.95em}
.h-brief .hb-tekst strong,.h-brief .hb-ps strong{font-weight:600;color:var(--ink)}
.h-brief .hb-aanhef{font-family:var(--f-display);font-weight:600;font-stretch:90%;font-size:1.45em;line-height:1.2;letter-spacing:-.005em}
.h-brief .hb-tekst .hb-aanhef+p{margin-top:1.15em}
.h-brief .hb-tekst p.hb-na{margin-top:1.7em}   /* een nieuwe beweging in de brief: het bewijs, de volgende stap */
.h-brief .hb-tekst .hb-kern{margin-block:1.35em;max-width:20em;font-family:var(--f-display);font-weight:600;font-stretch:88%;font-size:1.38em;line-height:1.26;letter-spacing:-.008em;color:var(--delft);text-wrap:balance}

/* ondertekening */
.h-brief .hb-slot{margin-top:2.3em}
.h-brief .hb-groet{margin:0 0 1em}
.h-brief .hb-duo{display:flex;flex-wrap:wrap;gap:22px clamp(32px,5vw,64px)}
.h-brief .hb-p{display:flex;align-items:center;gap:16px;margin:0}
.h-brief .hb-p img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--sand);box-shadow:0 0 0 1px rgba(22,32,48,.08)}
.h-brief .hb-p figcaption{display:grid;justify-items:start;gap:6px}
.h-brief .hb-naam{position:relative;display:inline-block;font-family:var(--f-display);font-style:italic;font-weight:500;font-stretch:80%;font-size:1.65em;line-height:1;letter-spacing:-.012em;color:var(--ink);padding:0 .1em 7px 0}
.h-brief .hb-streek{position:absolute;left:-6%;bottom:-3px;width:116%;height:11px;overflow:visible}
.h-brief .hb-streek path{fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.h-brief .hb-rol{font-size:.82rem;line-height:1.35;color:var(--ink-soft)}

/* P.S. en de ene knop */
.h-brief .hb-ps{margin:2.4em 0 0;max-width:36em;font-size:.94em;text-wrap:pretty}
.h-brief .hb-ps b{font-family:var(--f-display);font-weight:700;font-stretch:88%}
.h-brief .hb-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:1.7em}
.h-brief .hb-cta p{margin:0;font-size:.88rem;line-height:1.45;color:var(--ink-soft)}

/* telefoon: het vel iets breder in de marge, de portretten iets kleiner */
@media(max-width:599px){
  .h-brief{--pad:clamp(20px,5.6vw,30px)}   /* review 28-09: iets minder binnenmarge, zodat de regel op 390 px ~38 tekens houdt */
  .h-brief .wrap{padding-inline:max(12px,calc(var(--m) - 8px))}
  .h-brief .hb-p img{width:56px;height:56px}
  .h-brief .hb-naam{font-size:1.55em}
  .h-brief .hb-aanhef{font-size:1.3em;font-stretch:78%}   /* de aanhef op één regel */
  .h-brief .hb-duo{flex-direction:column}
}

/* beweging (home.js · 1c): alinea's komen binnen terwijl je leest, in kleine groepjes; het vel staat stil.
   Alleen wat bij het laden onder de vouw staat en alleen met .motion; zonder Motion of bij minder beweging staat alles er. */
.motion .h-brief.hb-mo .hb-wait{opacity:0;transform:translateY(10px)}
.motion .h-brief.hb-mo .hb-wait .hb-streek path{stroke-dashoffset:1}
@media(prefers-reduced-motion:reduce){
  .h-brief .hb-wait{opacity:1!important;transform:none!important}
  .h-brief .hb-streek path{stroke-dashoffset:0!important}
}
@media print{.h-brief .hb-wait{opacity:1!important;transform:none!important}.h-brief .hb-vel{box-shadow:none}}

/* brief → intro: sinds 29-09 (regel eigenaar: elke lichte sectie op hetzelfde beige) liggen beide op --paper, zonder overloop */


/* ######################################################################
   2 · INTRO · optie B "Het beeld vooraf" · kop "Zo mooi online als jouw beste avond." · 47% gecentreerd
   bron: v6-lab/port/intro/section.css
   ###################################################################### */
/* ======================================================================
   Home · 2 · Intro · optie B "Het beeld vooraf" (keuze eigenaar 28-09)
   Alles hangt onder .h-intro. Vlak in --paper sinds 29-09, net als de pagina (zand is alleen de laadkleur
   van beelden). Een korte, zware kop in kapitalen, gecentreerd; daaronder twee
   gelijke kolommen met een haarlijn precies in het midden van de pagina.
   Beide kolommen zijn een subgrid op dezelfde vier rijen (label, tekst,
   bewijs, knop), zodat de labels, de lijnen boven het bewijs en het bewijs
   zelf links en rechts op één hoogte staan.
   47% (notitie eigenaar): het cijfer staat verticaal gecentreerd op de tekst
   die het uitlegt. text-box trimt het cijfer tot de kapitaalhoogte en de tekst
   van de bovenkant van de eerste regel tot de basislijn van de laatste, zodat
   het midden van het cijfer en het midden van de tekst echt samenvallen.
   Beweging: [data-in] + [data-stagger] uit v6.js (.pre/.in); links eerst,
   dan tekent de middellijn zich van boven naar beneden, dan rechts.
   ====================================================================== */
.h-intro{--ring:84px;background:var(--paper)}
.h-intro.sec{padding-block:var(--sec)}          /* eigen vlak: altijd volle ruimte, ook na een andere .sec */

/* kop: kort en zwaar, zoals de grote koppen van de site */
.h-intro .h-intro-h{grid-column:1/-1;justify-self:center;max-width:12.5em;margin:0 0 clamp(56px,6.5vw,104px);text-align:center;font-size:clamp(2.5rem,1.3rem + 3.6vw,5.2rem);line-height:.94;letter-spacing:-.005em;color:var(--ink);text-wrap:balance}

/* twee gelijke kolommen, haarlijn in het midden */
.h-intro .h-intro-col{grid-row:2/span 4;display:grid;grid-template-rows:subgrid;align-content:start;min-width:0}
.h-intro .h-intro-l{grid-column:1/7;padding-right:clamp(0px,3.4vw,64px)}
.h-intro .h-intro-r{grid-column:7/13;padding-left:clamp(0px,3.4vw,64px)}
.h-intro .h-intro-mid{grid-column:1/-1;grid-row:2/span 4;justify-self:center;width:1px;pointer-events:none}
.h-intro .h-intro-mid::before{content:"";display:block;width:100%;height:100%;background:var(--line);transform-origin:50% 0}

/* label, tekst */
.h-intro .h-intro-lab{margin:0 0 18px;font-family:var(--f-body);font-size:.95rem;font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--delft)}
.h-intro .h-intro-tx{padding-bottom:clamp(32px,3vw,44px)}
.h-intro .h-intro-tx p{max-width:30em;font-size:1.08rem;line-height:1.65;text-wrap:pretty}
.h-intro .h-intro-tx p+p{margin-top:16px}
.h-intro .h-intro-l .h-intro-tx p{color:var(--ink-soft)}
.h-intro .h-intro-r .h-intro-tx p{color:var(--ink)}

/* bewijsregel: links het cijfer, rechts de twee adviseurs. Zelfde lijn erboven op dezelfde hoogte;
   het cijferblok is zo hoog als een portret, zodat 47% en de tekst op de middenlijn van Stefans portret liggen. */
.h-intro .h-intro-stat,.h-intro .h-intro-who{border-top:1px solid var(--line);padding-top:clamp(24px,2.4vw,32px)}
.h-intro .h-intro-stat{align-self:start;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:center;column-gap:clamp(18px,2vw,28px);min-height:calc(var(--ring) + 1px + clamp(24px,2.4vw,32px))}
.h-intro .h-intro-stat .num{font-family:var(--f-display);font-weight:800;font-stretch:72%;font-size:clamp(3.2rem,2.4rem + 2.2vw,4.8rem);line-height:1;letter-spacing:-.01em;color:var(--ink);text-box:trim-both cap alphabetic}
.h-intro .h-intro-stat p{max-width:22em;font-size:1rem;line-height:1.5;color:var(--ink);text-box:trim-both cap alphabetic;text-wrap:pretty}
.h-intro .h-intro-stat .src{display:block;margin-top:8px;font-size:.8rem;line-height:1.4;color:var(--ink-soft)}
.h-intro .h-intro-stat .src a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(47,74,122,.4);transition:text-decoration-color .25s var(--ease)}
.h-intro .h-intro-stat .src a:hover,.h-intro .h-intro-stat .src a:focus-visible{text-decoration-color:currentColor}
.h-intro .h-intro-stat .src a{display:inline-block;padding-block:14px;margin-block:-14px}   /* raakvlak ≥ 44 px, regel verspringt niet */

/* Stefan en Wouter: rond, in kleur, met naam, rol en één regel. Naast elkaar als er plaats is
   (de kolom meet het zelf, container query); anders onder elkaar, zodat een rol nooit halverwege breekt. */
.h-intro .h-intro-who{container-type:inline-size}
.h-intro .h-intro-duo{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:18px;margin:0}
.h-intro .h-intro-duo .duo-p{flex:none;min-width:0;flex-direction:row;align-items:center;gap:16px;text-align:left}
.h-intro .h-intro-duo .duo-ring{flex:none;width:var(--ring);padding:4px;border-color:rgba(47,74,122,.45)}
.h-intro .h-intro-duo .duo-ring img{filter:none;background:var(--sand)}
.h-intro .h-intro-duo figcaption{display:grid;gap:1px}
.h-intro .h-intro-duo b{font-family:var(--f-display);font-weight:700;font-size:1.2rem;line-height:1.25;color:var(--ink)}
.h-intro .h-intro-duo figcaption span{font-size:.9rem;line-height:1.4;color:var(--ink-soft)}
.h-intro .h-intro-duo figcaption .h-intro-role{color:var(--ink)}
@container (min-width:596px){
  .h-intro .h-intro-duo{flex-direction:row;align-items:center;column-gap:clamp(24px,100cqi - 572px,56px)}
}

.h-intro .h-intro-cta{margin:clamp(32px,3vw,44px) 0 0}

/* telefoon en tablet: onder elkaar; de middellijn wordt de lijn tussen de twee delen */
@media(max-width:899px){
  .h-intro{--ring:76px}
  .h-intro .h-intro-h{max-width:11em;margin-bottom:clamp(40px,8vw,56px)}
  .h-intro .h-intro-col{grid-column:1/-1;display:block;padding:0}
  .h-intro .h-intro-l{grid-row:2}
  .h-intro .h-intro-mid{grid-row:3;justify-self:stretch;width:auto;height:1px;margin-block:clamp(44px,9vw,60px)}
  .h-intro .h-intro-mid::before{transform-origin:0 50%}
  .h-intro .h-intro-r{grid-row:4}
  .h-intro .h-intro-duo .duo-ring{padding:3px}
}

/* beweging: links, dan tekent de lijn zich (breed van boven naar beneden, smal van links naar rechts), dan rechts */
.motion .h-intro .h-intro-mid.pre{opacity:1;transform:none}
.motion .h-intro .h-intro-mid.pre::before{transform:scaleY(0)}
.motion .h-intro .h-intro-mid.pre.in::before{transform:none;transition:transform .7s var(--ease) .24s}
@media(max-width:899px){
  .motion .h-intro .h-intro-mid.pre::before{transform:scaleX(0)}
  .motion .h-intro .h-intro-mid.pre.in::before{transform:none;transition-delay:0s}
}
@media(min-width:900px){
  .motion .h-intro .h-intro-r>.pre.in{transition-delay:calc((var(--i,0) + 4) * 80ms)}
}
@media(prefers-reduced-motion:reduce){
  .h-intro .h-intro-mid::before{transform:none!important;transition:none!important}
}


/* ######################################################################
   3 · WAAROM · optie B, kop van C, beeld van D (groter) · nachtblauwe band
   bron: v6-lab/port/waarom/section.css
   ###################################################################### */
/* ======================================================================
   Home · 3 · Waarom (keuze eigenaar 28-09): bouw van optie B, kop van optie C,
   beeld van optie D. Nachtblauwe band (.band-ink uit v6.css).
   Desktop: links de Rouchelli-site op de telefoon, gecentreerd in de linker
   helft en blijvend in beeld (sticky) terwijl rechts de kop, de drie cijfers
   en de volgende stap voorbijkomen. De telefoon is op hoogte gemaakt, zodat hij
   onder de menubalk altijd helemaal zichtbaar is (1440x900: ca. 440 x 740 px).
   Telefoon (< 900 px): kop, beeld, cijfers, afsluiting onder elkaar.
   Beweging: [data-in]/[data-stagger]/[data-wipe] uit v6.js; de lijn onder
   "sfeer" groeit alleen als de kop ook echt opkomt (.pre), het optellen zit in
   section.js. Zonder beweging staat alles er meteen.
   ====================================================================== */
.h-waarom .wm-head{grid-column:7/13;grid-row:1}
.h-waarom .wm-fig{grid-column:1/7;grid-row:1/span 3;margin:0}
.h-waarom .wm-rows{grid-column:7/13;grid-row:2}
.h-waarom .wm-end{grid-column:7/13;grid-row:3}

/* kop (uit optie C): één zin in gewone kast, Archivo 700 halfsmal */
.h-waarom .wm-h{font-family:var(--f-display);font-weight:700;font-stretch:90%;text-transform:none;letter-spacing:-.02em;font-size:clamp(2rem,1.2rem + 2.6vw,3.8rem);line-height:1.06;color:var(--on-ink);text-wrap:balance;max-width:14em}
.h-waarom .wm-l{display:block}   /* de eerste zin, de ene grote domino, staat op een eigen regel */
.h-waarom .wm-u{background:linear-gradient(var(--riviera),var(--riviera)) 0 100%/100% 3px no-repeat;padding-bottom:.04em}
.h-waarom .wm-h.pre .wm-u{background-size:0 3px}
.h-waarom .wm-h.pre.in .wm-u{background-size:100% 3px;transition:background-size .7s var(--ease) .35s}
.h-waarom .wm-pain{margin-top:24px;font-size:1.12rem;line-height:1.6;color:var(--on-ink-soft);max-width:30em;text-wrap:pretty}

/* beeld (uit optie D, groter): de site op de telefoon */
.h-waarom .wm-stick{position:sticky;top:calc(72px + clamp(16px,3vh,32px));display:flex;flex-direction:column;align-items:center}
.h-waarom .wm-screen{width:min(100%,520px,max(340px,calc((100vh - 160px) * .5945)));background:var(--ink)}
@supports (height:100svh){.h-waarom .wm-screen{width:min(100%,520px,max(340px,calc((100svh - 160px) * .5945)))}}
.h-waarom .wm-screen img{display:block;width:100%;height:auto}
.h-waarom .wm-fig figcaption{margin-top:14px;font-size:.8rem;line-height:1.5;color:var(--on-ink-soft);text-align:center}

/* drie cijfers, elk op een eigen rij (uit optie B) */
.h-waarom .wm-rows{margin-top:clamp(40px,5vw,72px);border-top:1px solid rgba(244,238,228,.2)}
.h-waarom .wm-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--g);padding:26px 0;border-bottom:1px solid rgba(244,238,228,.2);align-items:start}
.h-waarom .wm-row .num{font-family:var(--f-display);font-weight:800;font-stretch:72%;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums;font-size:clamp(3rem,2rem + 2.6vw,4.8rem);line-height:.9;color:var(--riviera);white-space:nowrap}
.h-waarom .wm-row p{margin-top:4px;color:var(--on-ink);max-width:24em}
.h-waarom .wm-row .src{display:block;margin-top:10px;font-size:.8rem;line-height:1.5;color:var(--on-ink-soft)}
/* gereedschap 28-09 · 21st.dev "sticky scroll": terwijl de telefoon blijft staan, loopt onder elke rij een rivieralijn vol
   naarmate die rij naar het midden van het scherm schuift (Motion scroll → --p, 0 tot 1). Zonder beweging: geen lijn. */
.h-waarom .wm-row{background:linear-gradient(var(--riviera),var(--riviera)) 0 100%/calc(var(--p,0) * 100%) 1px no-repeat}
.h-waarom .wm-row .src a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;display:inline-block;padding-block:13px;margin-block:-13px}   /* raakvlak ≥ 44 px, regel verspringt niet */

/* afsluiting en volgende stap */
.h-waarom .wm-solve{margin-top:clamp(36px,4vw,56px);font-size:1.12rem;line-height:1.6;color:var(--on-ink);max-width:30em;text-wrap:pretty}
.h-waarom .wm-cta{margin-top:28px}

@media(max-width:899px){
  .h-waarom .wm-head,.h-waarom .wm-fig,.h-waarom .wm-rows,.h-waarom .wm-end{grid-column:1/-1;grid-row:auto}
  .h-waarom .wm-fig{margin-top:44px}
  .h-waarom .wm-stick{position:static}
  .h-waarom .wm-screen{width:min(76%,340px)}
  .h-waarom .wm-rows{margin-top:48px}
  .h-waarom .wm-row{grid-template-columns:clamp(96px,27vw,140px) minmax(0,1fr);padding:22px 0}
}


/* ######################################################################
   4 · WERK · optie E "Leg het naast je eigen zaak" · vier mock-ups in twee rijen (29-09)
   bron: v6-lab/port/werk/section.css
   ###################################################################### */
/* ======================================================================
   Home · Werk · optie E "Leg het naast je eigen zaak" (28-09)
   Alles hangt onder .h-werk. Tokens uit v6.css (--paper, --paper-2, --ink,
   --ink-soft, --delft, --line, --g, --ease). Knop uit knoppen.css.
   Vier mock-ups (eigenaar 28-09), elk in zijn eigen medium: laptop (website),
   telefoon (Instagram), e-reader met gedrukte gids (e-books), opengeslagen
   merkgids (Salento.com). Strak en symmetrisch: vier gelijke vlakken, één
   basislijn, dunne nachtblauwe randen, alleen een zachte contactschaduw,
   direct op het beige (geen donkerder vlak erachter).
   ====================================================================== */
.h-werk .h-werk__head{max-width:780px;margin:0 auto clamp(40px,5vw,72px);text-align:center}
.h-werk .h-werk__head p{max-width:36em;margin:22px auto 0;font-size:clamp(1.02rem,.96rem + .25vw,1.14rem);line-height:1.6;color:var(--ink-soft)}

/* twee rijen van twee (eigenaar 29-09): rij 1 website + Instagram, rij 2 e-books + merkgids.
   De merkregels staan onder rij 2, elk onder zijn eigen kolom (Rouchelli links, Salento.com rechts). */
.h-werk .h-werk__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,72px);align-items:start;max-width:1180px;margin-inline:auto}
.h-werk .h-werk__item{margin:0;min-width:0}
.h-werk .h-werk__item--ebook,.h-werk .h-werk__item--gids{margin-top:clamp(36px,4.2vw,64px)}

/* het vlak: een vaste maat (100:62) zonder achtergrond; alle maten in cqi van dit vlak.
   Basislijn op 5cqi boven de onderrand: elk object staat erop, de contactschaduw ligt eronder.
   Hoogtes per rij gelijk getrokken (±50–54cqi), zodat de twee beelden naast elkaar even zwaar wegen. */
.h-werk .h-werk__stage{position:relative;aspect-ratio:100/62;container-type:inline-size}
.h-werk .h-werk__mock{position:absolute;inset:0;isolation:isolate}
.h-werk .h-werk__device,.h-werk .h-werk__print{position:absolute;bottom:5cqi;z-index:1}
.h-werk .h-werk__device img,.h-werk .h-werk__print img{display:block;width:100%;height:auto}
.h-werk .h-werk__shadow{position:absolute;left:50%;bottom:3.6cqi;z-index:0;width:var(--sw,80cqi);height:2.6cqi;margin-left:calc(var(--sw,80cqi) / -2);border-radius:50%;background:rgba(22,32,48,.2);filter:blur(1.2cqi)}

/* 1 · laptop: scherm in een dunne nachtblauwe rand, met een smalle onderkant (≈52cqi hoog) */
.h-werk .h-werk__laptop{left:7cqi;right:7cqi}
.h-werk .h-werk__lid{width:76cqi;margin:0 auto;padding:1.5cqi 1.5cqi 1.9cqi;border-radius:2.2cqi 2.2cqi .5cqi .5cqi;background:var(--ink)}
.h-werk .h-werk__lid img{aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:.4cqi;background:#fff}
.h-werk .h-werk__deck{position:relative;height:2.2cqi;border-radius:.3cqi .3cqi 2cqi 2cqi;background:var(--ink)}
.h-werk .h-werk__deck::before{content:"";position:absolute;left:50%;top:0;width:13cqi;height:.8cqi;margin-left:-6.5cqi;border-radius:0 0 1cqi 1cqi;background:var(--ink-soft);opacity:.6}
.h-werk .h-werk__item--site{--sw:88cqi}

/* 2 · telefoon: het echte profiel (≈54cqi hoog, net iets hoger dan de laptop) */
.h-werk .h-werk__phone{left:35cqi;width:30cqi;padding:1.1cqi;border-radius:4.6cqi;background:var(--ink)}
.h-werk .h-werk__phone img{border-radius:3.6cqi;background:#fff}
.h-werk .h-werk__item--ig{--sw:32cqi}

/* 3 · e-reader met de Italy-gids in het midden, links en rechts de gedrukte gidsen over Puglia en Toscane.
   Alle drie staan op de basislijn; de e-reader staat ervoor en is iets hoger. */
.h-werk .h-werk__reader{left:32cqi;width:36cqi;z-index:3;padding:2cqi 2cqi 2.8cqi;border-radius:2.6cqi;background:var(--ink);box-shadow:0 0 2cqi rgba(22,32,48,.2)}
.h-werk .h-werk__reader img{border-radius:.3cqi}
.h-werk .h-werk__print{width:29cqi;overflow:hidden;border-radius:.2cqi .6cqi .6cqi .2cqi;box-shadow:.4cqi 0 0 -.05cqi #EFE6D6,.5cqi 0 0 0 rgba(22,32,48,.16),0 0 0 1px rgba(22,32,48,.07)}
.h-werk .h-werk__print::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,32,48,.2),rgba(255,255,255,.24) 2.4%,rgba(22,32,48,.12) 4.8%,rgba(22,32,48,0) 9%),linear-gradient(0deg,rgba(22,32,48,.07),rgba(22,32,48,0) 30%)}
.h-werk .h-werk__print--l{left:8cqi}
.h-werk .h-werk__print--r{left:63cqi}
.h-werk .h-werk__item--ebook{--sw:86cqi}

/* 4 · merkgids: een opengeslagen, gebonden gids (werk-salento-merkgids-*.webp, transparant): linnen omslag,
   papierblok, rugschaduw en leeslint; de pagina's zijn opnieuw opgemaakt uit de Salento-slides. */
.h-werk .h-werk__book{left:6cqi;width:88cqi}
.h-werk .h-werk__item--gids{--sw:84cqi}

/* onderschrift: titel · merk op de eerste regel, daaronder wat het is */
.h-werk .h-werk__item figcaption{padding:12px 4px 0;font-size:.92rem;line-height:1.45;color:var(--ink-soft);text-align:center}
.h-werk .h-werk__item figcaption b{display:block;margin-bottom:2px;font-weight:600;color:var(--ink)}
.h-werk .h-werk__brand{font-weight:400;color:var(--ink-soft)}

/* merkregel: een nachtblauwe lijn onder de kolom van dat merk */
.h-werk .h-werk__case{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 .5em;min-height:48px;margin-top:clamp(32px,3.6vw,48px);padding:10px 0;border-top:1px solid var(--ink);color:var(--ink);text-decoration:none;font-size:.95rem;text-align:center}
.h-werk .h-werk__case b{font-weight:600}
.h-werk .h-werk__sep{color:var(--ink-soft)}
.h-werk .h-werk__go{color:var(--delft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(47,74,122,.4);transition:text-decoration-color .25s var(--ease)}
.h-werk .h-werk__case .arr{color:var(--delft)}
/* tablet: merknaam, wat het is en de link elk op een eigen regel, zodat beide merkregels even hoog zijn */
@media(min-width:600px) and (max-width:1099px){
  .h-werk .h-werk__case .h-werk__sep{display:none}
  .h-werk .h-werk__case b,.h-werk .h-werk__more{flex-basis:100%}
}
.h-werk .h-werk__case:hover .h-werk__go,.h-werk .h-werk__case:focus-visible .h-werk__go{text-decoration-color:currentColor}

.h-werk .h-werk__studies{margin-top:clamp(40px,5vw,64px);text-align:center;font-size:.95rem;color:var(--ink-soft)}
.h-werk .h-werk__studies .tl{display:inline-block;padding-block:11px}

.h-werk .h-werk__cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(40px,5vw,64px);text-align:center}
.h-werk .h-werk__cta p{font-size:.9rem;color:var(--ink-soft)}

/* beweging (home.js 4 zet .is-armed per mock-up, alleen onder de vouw en alleen met html.motion):
   rij voor rij; elk object komt 6cqi omhoog en zet zich neer, de schaduw groeit mee.
   Binnen een rij 90 ms na elkaar (UI/UX Pro Max "Scroll Reveal · Subtle"). */
.h-werk .h-werk__item--ig,.h-werk .h-werk__item--gids{--i:1}
@keyframes hWerkRise{0%{opacity:0;transform:translateY(6cqi)}55%{opacity:1}80%{transform:translateY(-.5cqi)}100%{opacity:1;transform:none}}
@keyframes hWerkShade{0%{opacity:0;transform:scaleX(.7)}100%{opacity:1;transform:none}}
.h-werk .is-armed .h-werk__device,.h-werk .is-armed .h-werk__print,.h-werk .is-armed .h-werk__shadow{opacity:0}
.h-werk .is-armed.is-in .h-werk__device{animation:hWerkRise .68s cubic-bezier(.22,.8,.3,1) calc(var(--i,0) * 90ms) both}
.h-werk .is-armed.is-in .h-werk__print{animation:hWerkRise .68s cubic-bezier(.22,.8,.3,1) calc(var(--i,0) * 90ms + 140ms) both}
.h-werk .is-armed.is-in .h-werk__print--r{animation-delay:calc(var(--i,0) * 90ms + 210ms)}
.h-werk .is-armed.is-in .h-werk__shadow{animation:hWerkShade .68s cubic-bezier(.22,.8,.3,1) calc(var(--i,0) * 90ms) both}
@media(prefers-reduced-motion:reduce){
  .h-werk .is-armed .h-werk__device,.h-werk .is-armed .h-werk__print,.h-werk .is-armed .h-werk__shadow{opacity:1;animation:none}
  .h-werk .h-werk__go{transition:none}
}

/* diepte bij het scrollen (home.js 4b): de hele mock-up met schaduw schuift iets sneller dan de tekst,
   alle vier even veel, zodat de basislijn per rij gedeeld blijft */
.h-werk.is-drift .h-werk__mock{will-change:translate}

/* tablet: dezelfde twee rijen, onderschrift iets kleiner */
@media(max-width:899px){
  .h-werk .h-werk__item figcaption{font-size:.86rem}
}
/* telefoon: één kolom in dezelfde volgorde (website, Instagram, e-books, merkgids), daarna de merkregels;
   tekst links, zoals elke andere sectie van v6 op de telefoon */
@media(max-width:599px){
  .h-werk .h-werk__grid{grid-template-columns:minmax(0,1fr)}
  .h-werk .h-werk__item + .h-werk__item{margin-top:28px}
  .h-werk .h-werk__item{--i:0}
  /* de telefoon alleen in zijn rij: groter, anders oogt hij klein naast de brede beelden */
  .h-werk .h-werk__item--ig .h-werk__stage{aspect-ratio:100/82}
  .h-werk .h-werk__phone{left:30cqi;width:40cqi;padding:1.4cqi;border-radius:6cqi}
  .h-werk .h-werk__phone img{border-radius:4.8cqi}
  .h-werk .h-werk__item--ig{--sw:42cqi}
  .h-werk .h-werk__case--s{margin-top:0}
  .h-werk .h-werk__head,.h-werk .h-werk__studies,.h-werk .h-werk__cta,.h-werk .h-werk__item figcaption{text-align:left}
  .h-werk .h-werk__item figcaption{padding-inline:0}
  .h-werk .h-werk__head p{margin-left:0}
  .h-werk .h-werk__case{justify-content:flex-start;text-align:left;font-size:.9rem}
  .h-werk .h-werk__cta{align-items:flex-start}
  .h-werk .h-werk__studies{margin-top:40px}
}


/* ######################################################################
   5 · WAT VOOR ZAAK HEB JE? · optie J "Drie momenten" (keuze eigenaar 29-09: "Ja, deze is voorlopig wel even goed.")
   bron: v6-lab/home-opties/05b-zaak.html #optJ · gedrag: home.js · 5
   ###################################################################### */
/* ======================================================================
   Alles onder .h-zaak (klassen hz-*). Op --paper, net als de pagina.
   Drie kolommen, één per moment waarop de gast kiest (vanavond, weken,
   maanden vooruit), elk met een eigen foto 2:1 boven een lijst namen.
   Daaronder één strook met de gekozen zaak: kop, het moment van de gast
   met de knop, en wat we maken (merkgids, website, advies, atelier).
   Telefoon: de kolommen onder elkaar, namen in twee rijen, één foto 16:9
   boven de strook. De elf panelen staan in de HTML; hidden = niet gekozen.
   ====================================================================== */
.h-zaak .hz-head{text-align:center;max-width:48rem;margin:0 auto clamp(40px,5vw,64px)}
.h-zaak .hz-ln{display:block;text-wrap:balance}
.h-zaak .hz-head .lead{max-width:34em;margin:18px auto 0;text-wrap:balance}
.h-zaak .hz-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.h-zaak .hz-col{min-width:0}
.h-zaak .hz-mh{font-size:clamp(1.3rem,.9rem + 1vw,1.9rem);line-height:.98;transition:color .25s var(--ease)}
.h-zaak .hz-col.is-on .hz-mh{color:var(--delft)}
.h-zaak .hz-w{margin:4px 0 14px;font-size:.88rem;color:var(--ink-soft)}
/* beeld: vaste verhouding; de lamellen (home.js) leggen de nieuwe foto in stroken over de oude */
.h-zaak .hz-stage{position:relative;overflow:hidden;background:var(--sand)}
.h-zaak .hz-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-zaak .hz-stage .hz-sl{position:absolute;overflow:hidden;pointer-events:none}
.h-zaak .hz-stage .hz-sl img{position:absolute;max-width:none;object-fit:cover}
.h-zaak .hz-img{aspect-ratio:4/5}   /* 29-09: even groot als de films van .h-maken (4:5), staande uitsnedes zaak-<soort>-p-* */
.h-zaak .hz-wait>img.hz-base{opacity:0}   /* alleen tijdens het eerste openen in lamellen (home.js · 5) */
.h-zaak .hz-mimg{display:none}
/* de namen: knoppen op haarlijnen, gekozen = delftblauw met een klein messing blokje */
.h-zaak .hz-list{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--ink)}
.h-zaak .hz-list li{border-bottom:1px solid var(--line)}
.h-zaak .hz-list button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:6px 2px;text-align:left;
  font-family:var(--f-display);font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;font-size:clamp(1.05rem,.65rem + .85vw,1.45rem);line-height:1;color:var(--ink);transition:color .25s var(--ease)}
.h-zaak .hz-list button::after{content:"";flex:none;width:8px;height:8px;background:var(--delft);transform:scale(0);transition:transform .3s var(--ease)}
.h-zaak .hz-list button:hover,.h-zaak .hz-list button[aria-pressed="true"]{color:var(--delft)}
.h-zaak .hz-list button[aria-pressed="true"]::after{transform:scale(1)}
.h-zaak .hz-list button:focus-visible{outline-offset:-2px}
.h-zaak .hz-else{margin-top:12px;font-size:.9rem}
.h-zaak .hz-else a{display:inline-flex;align-items:center;gap:8px;min-height:44px}
/* de strook met de gekozen zaak */
.h-zaak .hz-det{margin-top:clamp(32px,4vw,48px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--ink)}
.h-zaak .hz-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);align-items:start}
.h-zaak .hz-panel[hidden]{display:none}
.h-zaak .hz-dh{font-size:clamp(1.4rem,.9rem + 1.3vw,2.2rem);line-height:1;text-wrap:balance}
.h-zaak .hz-sc{margin:0 0 24px;text-wrap:pretty}
.h-zaak .hz-panel dl{margin:0;border-top:1px solid var(--line)}
.h-zaak .hz-panel dl div{display:grid;grid-template-columns:9.2em minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.92rem;line-height:1.45}
.h-zaak .hz-panel dt{font-weight:600}
.h-zaak .hz-panel dd{margin:0;color:var(--ink-soft);text-wrap:pretty}   /* 14-10 mobieltest: geen los woord ("voelt") */
@media(max-width:899px){
  .h-zaak .hz-cols{grid-template-columns:minmax(0,1fr);gap:28px}
  .h-zaak .hz-img{display:none}
  .h-zaak .hz-w{margin-bottom:8px}
  .h-zaak .hz-else{margin-top:4px}
  .h-zaak .hz-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g);margin-top:0}
  .h-zaak .hz-list button{font-size:1rem;line-height:1.05}
  .h-zaak .hz-mimg{display:block;aspect-ratio:3/2;margin-top:32px}
  .h-zaak .hz-det{margin-top:28px;padding-top:0;border-top:0}
  .h-zaak .hz-panel{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .h-zaak .hz-mh,.h-zaak .hz-list button,.h-zaak .hz-list button::after{transition:none}
}


/* ######################################################################
   6 · WAT WE MAKEN · optie E · drie films als drieluik + de atelierplank
   bron: v6-lab/port/wat-we-maken/section.css
   ###################################################################### */
/* ======================================================================
   Home · Wat we maken (optie E, "Drie films en het atelier", 28-09)
   Alles hangt onder .h-maken. Gebruikt uit v6.css: .wrap .sec .statement
   .lead .d .tl .btn .arr en de beweging [data-in] + [data-stagger] (700 ms, 80 ms na elkaar).
   ====================================================================== */
.h-maken figure{margin:0}

/* kop: twee regels, de belofte in delftblauw */
.h-maken .hm-top{text-align:center;max-width:52rem;margin:0 auto clamp(48px,6vw,88px)}
.h-maken .hm-h{font-size:clamp(2.1rem,1.1rem + 3vw,4.2rem);line-height:1.04;text-wrap:balance}
.h-maken .hm-l{display:block}
.h-maken .hm-l2{color:var(--delft)}
.h-maken .hm-sub{max-width:34em;margin:clamp(20px,2.4vw,30px) auto 0;color:var(--ink-soft);text-wrap:pretty}

/* drie films naast elkaar, op hetzelfde beige als de pagina */
.h-maken .hm-films{max-width:1320px;margin-inline:auto}
.h-maken .hm-films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);row-gap:44px}
.h-maken .hm-frame{position:relative;aspect-ratio:4/5;background:var(--paper);overflow:hidden}
.h-maken .hm-frame video{width:100%;height:100%;object-fit:cover;
  /* het podium van de film wijkt na het decoderen een tint af van de pagina: de randen lopen zacht over, net als bij .mm-v */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-composite:intersect}
.h-maken .hm-film figcaption{text-align:center;padding-top:18px}
.h-maken .hm-ft{font-size:clamp(1.6rem,1rem + 1.2vw,2.3rem);line-height:.95;margin-bottom:8px}
.h-maken .hm-film p{color:var(--ink-soft);font-size:.95rem;max-width:22em;margin:0 auto;text-wrap:balance}
.h-maken .hm-ctl{text-align:center;margin-top:10px}
.h-maken .hm-pause{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:.88rem}

/* 6c · het atelier · optie B "Het schetsboek" (keuze eigenaar 29-09; bron v6-lab/home-opties/06b-atelier.html #optB).
   14-10 zonder foto (eigenaar): kop en intro links (5 delen), de genummerde lijst van zes stukken met haarlijnen
   rechts (7 delen); op de telefoon onder elkaar. Beweging in home.js · 6c. */
.h-maken .hm-atelier{margin-top:clamp(72px,8vw,128px);padding-top:clamp(56px,6vw,96px);border-top:1px solid var(--line)}
.h-maken .hm-sk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:40px;align-items:center;max-width:1320px;margin-inline:auto}
.h-maken .hm-sk-txt{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,112px);align-items:start}
.h-maken .hm-sk-h,.h-maken .hm-sk-sub{grid-column:1}
.h-maken .hm-sk-list{grid-column:2;grid-row:1/span 3}
.h-maken .hm-sk-h{font-size:clamp(2rem,1.2rem + 2vw,3.2rem);line-height:1.04;text-wrap:balance}
.h-maken .hm-sk-sub{max-width:34em;margin:16px 0 0;color:var(--ink-soft);font-size:clamp(1.02rem,.96rem + .25vw,1.15rem);line-height:1.55;text-wrap:pretty}
.h-maken .hm-sk-list{list-style:none;margin:0;padding:0}
.h-maken .hm-sk-list li{position:relative;display:grid;grid-template-columns:2.4em minmax(0,1fr);column-gap:12px;padding:15px 0}
.h-maken .hm-sk-rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}
.h-maken .hm-sk-list li:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.h-maken .hm-sk-n{font:700 .82rem/1.9 var(--f-body);color:var(--delft);font-variant-numeric:tabular-nums}
.h-maken .hm-sk-list b{display:block;font:700 1.18rem/1.25 var(--f-display);letter-spacing:-.015em;color:var(--ink)}
.h-maken .hm-sk-list div>span{display:block;margin-top:2px;color:var(--ink-soft);font-size:.95rem;line-height:1.45}
@media(max-width:899px){
  .h-maken .hm-sk-txt{grid-template-columns:minmax(0,1fr)}
  .h-maken .hm-sk-list{grid-column:1;grid-row:auto;margin-top:clamp(28px,6vw,40px)}
}

/* bewijs en de volgende stap */
.h-maken .hm-proof{max-width:40em;margin:clamp(56px,6vw,96px) auto 0;text-align:center;color:var(--ink-soft);text-wrap:balance}
.h-maken .hm-proof b{color:var(--ink);font-weight:600}
.h-maken .hm-cta{text-align:center;margin-top:28px}

/* drieluik: diepte bij het scrollen (home.js 6b, Motion scroll), alleen als de drie naast elkaar staan */
@media(min-width:700px){.h-maken.is-drift .hm-frame video{scale:1.07;will-change:translate}}

@media(max-width:699px){
  .h-maken .hm-films{grid-template-columns:minmax(0,1fr)}
  .h-maken .hm-film{width:100%;max-width:380px;margin-inline:auto}
}
@media(max-width:599px){
  .h-maken .hm-h{font-size:clamp(1.9rem,1.1rem + 4vw,2.4rem)}
}


/* ######################################################################
   7 · ERVARINGEN · optie D "Twijfels aan tafel" · nachtblauwe band
   bron: v6-lab/port/ervaringen/section.css
   ###################################################################### */
/* ======================================================================
   Ervaringen · optie D "Twijfels aan tafel" (keuze eigenaar 28-09)
   Nachtblauwe band. Kop en onderkop in het midden; daaronder drie gelijke
   kolommen onder één dunne lijn, gescheiden door dunne staande lijnen. Per
   kolom eerst de twijfel (Archivo 800, smal, kapitalen, riviera), daaronder
   het antwoord van een collega (DM Sans) met rol, soort zaak en stad.
   Onderaan Stefan (ronde, grijze foto zoals overal), één zin en de knop.
   De „ hangt in de goot, zodat de tekst op één lijn begint.
   Beweging: kop en Stefan via [data-in] van v6.js; de kolommen via Motion
   (home.js, zie onderaan dit blok). De kolom zelf (met zijn lijn) staat
   stil; alleen de inhoud komt: eerst de twijfel, 300 ms later het
   antwoord, 150 ms per kolom. Zonder beweging
   (reduced motion of ?still) staat alles er meteen.
   Alles hangt onder .h-ervaringen; geen losse regels.
   ====================================================================== */
.h-ervaringen .er-head{max-width:860px;margin:0 auto clamp(56px,6vw,96px);text-align:center}
.h-ervaringen .er-head .statement{font-size:clamp(2rem,1.1rem + 2.6vw,3.6rem);text-wrap:balance}
.h-ervaringen .er-lead{max-width:34em;margin:18px auto 0;color:var(--on-ink-soft);text-wrap:pretty}

.h-ervaringen .er-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(244,238,228,.2)}
.h-ervaringen .er-col{padding:36px clamp(18px,2.4vw,40px) 0}
.h-ervaringen .er-col+.er-col{border-left:1px solid rgba(244,238,228,.2)}
.h-ervaringen .er-doubt.d{margin:0 0 22px;color:var(--riviera);font-size:clamp(1.3rem,1rem + .9vw,1.9rem);font-stretch:75%;line-height:1.05;letter-spacing:.02em;text-wrap:balance}
.h-ervaringen .er-answer{margin:0}
.h-ervaringen .er-answer blockquote{margin:0}
.h-ervaringen .er-answer p{max-width:26em;font-size:1.05rem;line-height:1.55;color:var(--on-ink);text-wrap:pretty}
.h-ervaringen .er-answer figcaption{margin-top:14px;font-size:.9rem;line-height:1.45;color:var(--on-ink-soft)}
.h-ervaringen .q-o{margin-left:-.42em}   /* de „ hangt in de goot, bij de twijfel en bij het antwoord */

.h-ervaringen .er-todo{margin-top:clamp(32px,4vw,56px);text-align:center}

@media(max-width:899px){
  .h-ervaringen .er-cols{grid-template-columns:minmax(0,1fr)}
  .h-ervaringen .er-col{padding:32px 0 0}
  .h-ervaringen .er-col+.er-col{margin-top:36px;border-left:0;border-top:1px solid rgba(244,238,228,.2)}
}
@media(max-width:599px){
}

/* gereedschap (28-09): een korte koperen lijn boven elke twijfel, als het couvert voor elke gast
   (21st.dev "Editorial Testimonial": een typografisch accent in plaats van een kaart; in onze kleuren) */
.h-ervaringen .er-rule{display:block;width:40px;height:2px;margin:0 0 20px;background:var(--brass);transform-origin:left center}

/* beweging (Motion, home.js · 7 · ERVARINGEN): de kolom en zijn lijn staan stil; per kolom tekent de koperen
   lijn zich, dan komt de twijfel scherp uit een lichte waas (21st.dev "Minimal Testimonial": fade + blur),
   300 ms later het antwoord. 150 ms per kolom op één rij. Alleen als Motion er is (.er-mo); zonder
   Motion, bij minder beweging of ?still staat alles er meteen (UI/UX Pro Max: Reduced Motion, High). */
.motion .h-ervaringen.er-mo .er-rule{transform:scaleX(0)}
.motion .h-ervaringen.er-mo .er-doubt,
.motion .h-ervaringen.er-mo .er-answer{opacity:0}
@media(prefers-reduced-motion:reduce){
  .h-ervaringen .er-rule{transform:none!important}
  .h-ervaringen .er-doubt,.h-ervaringen .er-answer{opacity:1!important;transform:none!important;filter:none!important}
}


/* ######################################################################
   8 · ZO BEGIN JE · kop van de home + optie O "De kaart op de bar" (keuze eigenaar 29-09)
   bron: v6-lab/home-opties/08c-menukaart.html #optO · gedrag: home.js · 8
   ###################################################################### */
/* ======================================================================
   Alles onder .h-begin (klassen kb-*). Volgorde van O: eerst
   een fotoband over de volle breedte: een hotelbar bij avond, door CSS
   onscherp en 10% nachtblauw. Daarop een staande kaart van 600 g katoen-
   karton (zichtbare dikte, letterpress) in een slanke stalen voet met één
   messing lijn. Eigenaar: "niet qua design veranderen, maar iets breder":
   de kaart is 390 px breed in plaats van 340 (telefoon 316 in plaats van
   280); hoogte, letters, huisnaam en voet zijn gelijk aan 08c.
   De kaart is een papieren object en mag daarom wit zijn (#FFFEFA).
   ====================================================================== */
.h-begin{--kb-cw:390px;--kb-ch:780px;--kb-F:133.9px;--kb-band:960px;--kb-base:10.5%;--kb-paper:#FFFEFA}
.h-begin .sec-head{margin-bottom:clamp(40px,5vw,72px)}
/* de fotoband */
.h-begin .kb-scene{position:relative;margin:0;height:var(--kb-band);overflow:hidden;background:var(--ink);isolation:isolate}
.h-begin .kb-ph{position:absolute;inset:0;overflow:hidden}
.h-begin .kb-img{position:absolute;left:-28px;top:-28px;width:calc(100% + 56px);height:calc(100% + 56px);max-width:none;object-fit:cover;object-position:50% 100%;filter:blur(8px) saturate(.7) brightness(1.1);transform-origin:50% 90%}
.h-begin .kb-tint{position:absolute;inset:0;background:rgba(22,32,48,.10);pointer-events:none}
/* de staande kaart: onderkant op de toog, voet ervoor */
.h-begin .kb-stand{position:absolute;left:50%;bottom:var(--kb-base);width:var(--kb-cw);margin-left:calc(var(--kb-cw) / -2);z-index:2}
.h-begin .kb-card{position:relative;z-index:1;display:grid;grid-template-columns:calc(14px + var(--kb-F) * .688 + 11px) minmax(0,1fr);width:var(--kb-cw);height:var(--kb-ch);margin-bottom:-8px;background:var(--kb-paper);color:var(--ink);
  box-shadow:0 0 0 .5px rgba(10,16,28,.35),0 22px 36px -26px rgba(0,0,0,.7);overflow:hidden}
/* dikte van 600 g karton: bovenrand lichter wit, linkerrand een fractie donkerder */
.h-begin .kb-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#fff;box-shadow:0 1px 0 rgba(22,32,48,.08);z-index:3}
.h-begin .kb-card::after{content:"";position:absolute;left:0;top:3px;bottom:0;width:2px;background:linear-gradient(90deg,rgba(22,32,48,.09),rgba(22,32,48,.035));z-index:3}
/* papier: vezel en korrel (feTurbulence), zacht licht van de bar en wat donker bij de voet */
.h-begin .kb-paper{position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:multiply;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .39  0 0 0 0 .34  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.22'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .52  0 0 0 0 .47  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    linear-gradient(180deg,rgba(255,255,255,0) 78%,rgba(22,32,48,.05) 100%)}
/* de huisnaam op de rand: Archivo smal 800, -90°, volle hoogte met 14 px marge */
.h-begin .kb-side{position:relative;overflow:hidden}
.h-begin .kb-rise{position:absolute;inset:14px 0}
.h-begin .kb-word{position:absolute;top:0;left:calc(14px - var(--kb-F) * .147);display:block;writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Archivo",sans-serif;font-weight:800;font-stretch:62%;font-size:var(--kb-F);line-height:1;letter-spacing:0;text-transform:uppercase;white-space:nowrap;color:var(--delft)}
/* letterpress: inkt met lichte spikkels waar het karton de inkt niet helemaal pakt, en een fijne rand boven de indruk */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .h-begin .kb-word{-webkit-text-fill-color:transparent;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .99  0 0 0 0 .97  1.6 0 0 0 -.95'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>"),linear-gradient(var(--delft),var(--delft));
    -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 .7px .35px rgba(12,22,44,.32))}
}
/* rechterkolom: strak raster, alles links */
.h-begin .kb-main{position:relative;display:flex;flex-direction:column;min-width:0;padding:15px 20px 13px 12px}
.h-begin .kb-lp{text-shadow:0 1px 0 rgba(255,255,255,.9),0 -.5px .3px rgba(12,22,44,.16)}
.h-begin .kb-head p{margin:0}
.h-begin .kb-kick{font-family:"DM Sans",sans-serif;font-weight:600;font-size:10px;line-height:1.2;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}
.h-begin .kb-head .kb-title{margin-top:7px;font-family:"Archivo",sans-serif;font-weight:600;font-stretch:100%;font-size:18px;line-height:1.15;letter-spacing:-.005em;color:var(--ink)}
.h-begin .kb-list{list-style:none;margin:26px 0 0;padding:0;flex:1 1 auto;display:flex;flex-direction:column}
.h-begin .kb-c{position:relative;flex:1 1 0;padding-top:15px}
.h-begin .kb-hr{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(47,74,122,.25);box-shadow:0 1px 0 rgba(255,255,255,.9);transform-origin:0 50%}
.h-begin .kb-row{display:flex;align-items:baseline;margin:0}
.h-begin .kb-n{flex:none;width:32px;font-family:"Archivo",sans-serif;font-weight:800;font-stretch:62%;font-size:26px;line-height:1;color:var(--delft)}
.h-begin .kb-l{font-family:"DM Sans",sans-serif;font-weight:600;font-size:10px;line-height:1;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}
.h-begin .kb-t{margin:9px 0 0;font-family:"Archivo",sans-serif;font-weight:700;font-stretch:75%;font-size:17px;line-height:1.12;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.h-begin .kb-d{margin:5px 0 0;font-family:"DM Sans",sans-serif;font-weight:400;font-size:13.5px;line-height:1.4;color:var(--ink-soft);text-wrap:pretty}
.h-begin .kb-d b{font-weight:600;color:var(--delft)}
.h-begin .kb-foot{margin:0;font-family:"DM Sans",sans-serif;font-style:italic;font-weight:500;font-size:12px;line-height:1.2;color:var(--ink-soft)}
/* de voet: zwart gemaakt staal in nachtblauw, 60% breed, 12 px, alleen boven één messing lijn */
.h-begin .kb-holder{position:relative;z-index:3;display:block;width:60%;height:12px;margin:0 auto;box-sizing:border-box;border-top:1px solid var(--brass);
  border-radius:1px 1px 2px 2px;background:linear-gradient(180deg,#2c3a53 0,#1b2638 28%,#162030 60%,#0d141e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 1px 0 0 rgba(255,255,255,.05),inset -1px 0 0 rgba(0,0,0,.35)}
/* contactschaduw op de bar + vage schaduw van de kaart naar achteren */
.h-begin .kb-cast{position:absolute;left:-14%;right:-14%;bottom:-9px;height:22px;margin:auto;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(4,7,12,.72),rgba(4,7,12,.38) 55%,rgba(4,7,12,0));pointer-events:none}
.h-begin .kb-back{position:absolute;left:-10%;right:-10%;bottom:0;height:46%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,rgba(4,7,12,.5),rgba(4,7,12,0) 72%);filter:blur(10px)}
/* een vage weerspiegeling van de witte kaart in het gelakte blad */
.h-begin .kb-refl{position:absolute;left:4%;right:4%;top:100%;height:44px;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,252,244,.11),rgba(255,252,244,0));filter:blur(2.5px)}
.h-begin .kb-refl::before{content:"";position:absolute;left:20%;right:20%;top:0;height:5px;background:rgba(4,7,12,.55)}
/* lage schermen (laptop 1280×720): de kaart zakt mee met de schermhoogte (780 → minstens 580 px);
   de huisnaam blijft de volle hoogte vullen (lengte = 5,616 × korps), de bar blijft 180 px hoger dan de kaart */
@media(min-width:600px) and (max-height:890px){
  .h-begin{--kb-ch:clamp(580px,100svh - 110px,780px);--kb-F:calc((var(--kb-ch) - 28px) / 5.616);--kb-band:calc(var(--kb-ch) + 180px)}
}
/* telefoon: kaart 316 × 644 (08c: 280 × 644) */
@media(max-width:599px){
  .h-begin{--kb-cw:316px;--kb-ch:644px;--kb-F:109.7px;--kb-band:764px;--kb-base:8.5%}
  .h-begin .kb-main{padding:13px 12px 11px 9px}
  .h-begin .kb-head .kb-title{font-size:16px;margin-top:6px}
  .h-begin .kb-list{margin-top:20px}
  .h-begin .kb-c{padding-top:12px}
  .h-begin .kb-n{width:27px;font-size:22px}
  .h-begin .kb-l{font-size:10px;letter-spacing:.22em}
  .h-begin .kb-t{margin-top:7px;font-size:15px}
  .h-begin .kb-d{font-size:12px;line-height:1.4;letter-spacing:-.003em}
  .h-begin .kb-ln{display:block}
  .h-begin .kb-foot{font-size:11px}
  .h-begin .kb-img{object-position:58% 100%}
}
@media(max-width:359px){
  .h-begin{--kb-cw:284px;--kb-ch:598px;--kb-F:101.7px;--kb-band:716px}
  .h-begin .kb-t{font-size:14px}
}
/* volgorde van O (controle ronde 2): eerst de fotoband, dan kop en lead, dan de knop, alles op de middenas */
.h-begin.sec{padding-top:0}
.h-begin .kb-text{text-align:center;padding-top:clamp(48px,6vw,84px)}
.h-begin .kb-h{margin:0 auto;max-width:18em;font-weight:700;font-stretch:90%;letter-spacing:-.02em;text-transform:none;font-size:clamp(1.9rem,1.2rem + 2vw,3.2rem);line-height:1.08;color:var(--ink);text-wrap:balance}
.h-begin .kb-h span{color:var(--delft)}
.h-begin .kb-lead{margin:18px auto 0;max-width:31em;font-size:clamp(1.02rem,.96rem + .3vw,1.2rem);line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.h-begin .kb-cta{text-align:center;margin-top:clamp(26px,2.6vw,34px)}
.h-begin .cta-row{justify-content:center;margin:0}


/* ######################################################################
   AFSTEMMING NA HET SAMENVOEGEN (28-09)
   Ritme: elke overgang heeft één maat --sec. Lichte secties op dezelfde
   grond delen hun ruimte (.sec+.sec uit v6.css); een eigen vlak (intro op
   --paper, de nachtblauwe banden) heeft boven en onder zijn eigen --sec.
   Volgorde van de grond: hero (beige, foto) → brief (beige) → intro (beige) → waarom
   (nachtblauw) → werk, zaak, wat we maken (beige) → ervaringen
   (nachtblauw) → zo begin je (beige) → voet (nachtblauw).
   ###################################################################### */

/* 29-09: de intro staat op --paper, dus deze overgang is niet meer nodig */
/* (de beige sluier van de spa-hero is vervallen: de hero met het binnenbad (28-09) heeft zijn eigen, korte overloop naar beige in 1 · HERO) */

/* "Bekijk ons werk ↓" springt naar de werkkop: die valt dan net onder de menubalk (72 px) */
.h-werk #werk-h{scroll-margin-top:104px}


/* ######################################################################
   CONTROLE TECHNIEK (28-09)
   De kop van de hero verspringt op de telefoon bij een eerste bezoek (CLS 0,17): zolang Archivo laadt,
   staat de kop in de vervangletter op drie regels, met Archivo op twee. Deze vervangletter is op maat
   geschaald (size-adjust), zodat hij dezelfde regels en hoogte geeft (gemeten 320 tot 699 px).
   Later beter: Archivo zelf hosten en in de HEAD vooraf laden (preload, woff2).
   ###################################################################### */
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold"),local("Arial");font-weight:100 900;size-adjust:72%}
.h-hero-h{font-family:"Archivo","Archivo Fallback",sans-serif}

/* 28-09 · eigenaar: mock-ups los op de pagina, zonder donkerder vlak erachter.
   Sinds de vier mock-ups (28-09) staat elk toestel in zijn geheel op de basislijn: geen uitloop-masker meer. */
.h-werk .h-werk__stage{background:transparent}

/* 28-09 · eigenaar: geen wit vel en geen briefhoofd; de brieftekst staat gewoon op de pagina,
   in één rustige leeskolom. De ondertekening is tekst (de portretten staan direct erna in de intro). */
.h-brief .hb-vel{max-width:38em;margin:0 auto;padding:0;background:none;border:0;box-shadow:none}
.h-brief .hb-namen{margin:.35em 0 0;font-family:var(--f-display);font-weight:600;font-stretch:88%;font-size:1.25em;line-height:1.2}
@media(max-width:599px){.h-brief .wrap{padding-inline:var(--m)}}

/* 29-09 · mobiele review: de kaart schaalt op lage schermen mee (home.js zet --kb-s), de band krimpt evenveel */
.h-begin .kb-stand{transform:scale(var(--kb-s,1));transform-origin:50% 100%}
.h-begin .kb-scene{height:calc(var(--kb-band) - (1 - var(--kb-s,1)) * var(--kb-ch))}

/* 29-09 · mobiele review */
/* waarom: telefoon liggend, de staande telefoon past in één scherm */
@media(max-height:500px) and (orientation:landscape){
  .h-waarom .wm-stick{position:static}
  .h-waarom .wm-screen{width:min(76%,340px,calc((100svh - 110px) * .5945))}
  .h-hero-lead{font-size:.9rem}
}
/* bron "KHN" e.d.: raakvlak ook 44 px breed, zonder verspringen */
.h-waarom .wm-row .src a{padding-inline:10px;margin-inline:-10px}
@media(max-width:399px){.h-waarom .wm-row .src a{display:inline}}   /* 14-10 mobieltest: op 320 px liep de bron als één blok over de rand; inline breekt hij gewoon af, het raakvlak blijft */
/* 320 px: "Of maanden vooruit." past op één regel (anders staat "vooruit." alleen) */
@media(max-width:359px){.h-zaak #zaak-h{font-size:1.85rem}}

/* 29-09 · eigenaar: de brieftekst meer in het midden. De leeskolom zelf is nu smal en gecentreerd;
   de alinea's vullen die kolom helemaal (geen eigen, kortere max-breedte meer die de tekst naar links trok). */
.h-brief .hb-vel{max-width:34em;margin-inline:auto}
.h-brief .hb-tekst p,.h-brief .hb-ps,.h-brief .hb-tekst .hb-kern{max-width:none}

/* 29-09 · eigenaar: de intro minder breed, zodat hij aansluit op de smalle brief erboven.
   De inhoud staat in een gecentreerde kolom van max. 1040 px (brief: 34em); de twee kolommen en de middenlijn blijven. */
@media(min-width:900px){
  .h-intro .h-intro-in{max-width:calc(1040px + 2 * var(--m));margin-inline:auto}
}

/* 29-09 · eigenaar: de ervaringen minder breed, in dezelfde maat als de intro (max. 1040 px inhoud). */
@media(min-width:900px){
  .h-ervaringen > .wrap{max-width:calc(1040px + 2 * var(--m));margin-inline:auto}
}

/* 29-09 · eigenaar: de foto's van "Je gast kiest vanavond" precies even groot als de films van "Van merkgids tot menukaart".
   De sectie is weer even breed als die: kolommen en strook in max. 1320 px, gecentreerd, goot var(--g) (zoals .hm-films),
   foto's 4:5. De kop blijft gecentreerd met zijn eigen max-breedte.
   De strook eronder in twee kolommen: kop en scène links, wat we maken (dl) rechts. */
.h-zaak .hz-cols,.h-zaak .hz-det{max-width:1320px;margin-inline:auto}
@media(min-width:900px){
  .h-zaak .hz-cols{column-gap:var(--g)}
  .h-zaak .hz-panel{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,64px);row-gap:18px}
  .h-zaak .hz-panel>.hz-dh{grid-column:1;grid-row:1;margin:0}
  .h-zaak .hz-panel>.hz-go{grid-column:1;grid-row:2}
  .h-zaak .hz-panel>dl{grid-column:2;grid-row:1/span 2}
}
}

/* ######################################################################
   8 · ZO BEGIN JE · terug op de home (29-09, eigenaar): "de menukaart die je breder zou maken".
   Geen barfoto meer: de staande kaart staat op het beige van de pagina en werpt daar een zachte
   schaduw. De kaart is breder (390 → 560 px, telefoon 316 → tot 350 px); de hoogte blijft, de
   letters groeien licht mee. Voetlijn delft (geen messing), voetregel recht (geen cursief).
   ###################################################################### */
/* vangnet: een losse } hierboven slikt anders de eerste regel in */
.kb-vangnet{}
.h-begin{--kb-cw:560px;--kb-band:calc(var(--kb-ch) + 64px);--kb-base:44px}
:root body[data-page="home"] #main>.h-begin.sec{padding-top:var(--hs,var(--sec))}
.h-begin .kb-scene{background:transparent;overflow:hidden;overflow:clip visible}
.h-begin .kb-card{box-shadow:0 0 0 .5px rgba(22,32,48,.22),0 2px 4px rgba(22,32,48,.06),0 34px 60px -34px rgba(22,32,48,.42)}
.h-begin .kb-cast{background:radial-gradient(closest-side,rgba(22,32,48,.30),rgba(22,32,48,.12) 55%,rgba(22,32,48,0))}
.h-begin .kb-back{background:radial-gradient(60% 100% at 50% 100%,rgba(22,32,48,.16),rgba(22,32,48,0) 72%)}
.h-begin .kb-holder{border-top-color:var(--delft)}
.h-begin .kb-foot{font-style:normal}
@media(min-width:600px){
  .h-begin .kb-main{padding:18px 30px 16px 18px}
  .h-begin .kb-kick{font-size:11px}
  .h-begin .kb-head .kb-title{font-size:21px;margin-top:8px}
  .h-begin .kb-list{margin-top:30px}
  .h-begin .kb-c{padding-top:17px}
  .h-begin .kb-n{width:40px;font-size:30px}
  .h-begin .kb-l{font-size:11px}
  .h-begin .kb-t{margin-top:10px;font-size:21px}
  .h-begin .kb-d{margin-top:6px;font-size:15px}
  .h-begin .kb-foot{font-size:13px}
}
@media(min-width:600px) and (max-height:890px){
  .h-begin{--kb-band:calc(var(--kb-ch) + 64px)}
}
@media(max-width:599px){
  .h-begin{--kb-cw:min(350px,calc(100vw - 40px));--kb-band:calc(var(--kb-ch) + 48px);--kb-base:32px}
  .h-begin .kb-ln{display:inline}
}
@media(max-width:359px){
  .h-begin{--kb-cw:min(300px,calc(100vw - 24px))}
}

/* ritme (29-09, ritme-secties.md A1): RUIM rond de slot-oproep "De merkscan", de korte lijn in het midden.
   -6/-16 px (op 390 -3/-13 px): TODO-regel onder de ervaringen, eigen bovenlucht van de merkscan-kaart en de lijn op -2px (U4). */
:root body[data-page="home"] #main>.h-ervaringen>.sec{padding-bottom:calc(var(--ritme-ruim) / 2 - clamp(3px,calc(1.9px + .286vw),6px))}
:root body[data-page="home"] #main>.h-begin.sec{padding-top:calc(var(--ritme-ruim) / 2 - clamp(13px,calc(11.9px + .286vw),16px))}

/* ######################################################################
   8 · ZO BEGIN JE · de voorkant van de menukaart (29-09, eigenaar): "de voorkant blauw, en dan 'Merkfundatie'
   in het wit, precies zo geschreven. En dat die dan open gaat en dat je het menu weer ziet, zoals het er nu uitziet."
   Een omslag van nachtblauw linnen, even groot als de kaart, met de huisnaam in wit op precies dezelfde plek,
   in dezelfde letter, dikte, breedte en richting als binnen. home.js · 8a zet hem neer (klasse kb-dicht) en slaat hem
   één keer open, scharnier links (rotateY 0 → -160°); de binnenkant is beige, de schaduw schuift over de bladzijde;
   (29-09, later: vervangen door het boekje met twee pagina's, zie onderaan.)
   ###################################################################### */
.h-begin .kb-cv{position:absolute;inset:0;overflow:hidden}
/* voorkant, e-bookstijl (29-09, eigenaar: "een beetje in de stijl van de e-books"): zoals de Rouchelli-gidsen een foto
   tot de rand (de feestzaal bij kaarslicht, blauwe wanden, gedekte tafel), een rustige grote titel bovenaan met een kleine
   ondertitel en onderaan een merkteken. De sluier houdt hem nachtblauw: #162030 op 90% langs de huisnaam en de voet,
   naar 45% rechtsboven; bovenin een extra zachte band onder de titel. Het linnen ligt er fijn overheen. */
.h-begin .kb-cv-front{display:grid;grid-template-columns:calc(14px + var(--kb-F) * .688 + 11px) minmax(0,1fr);background-color:#162030;
  --kb-cv-ph:image-set(url("img/home/zaak-feest-p-900.webp") 1x,url("img/home/zaak-feest-p-1200.webp") 2x);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .96  0 0 0 0 .93  0 0 0 0 .87  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23l)'/></svg>"),
    repeating-linear-gradient(0deg,rgba(244,236,223,.022) 0 1px,rgba(244,236,223,0) 1px 3px),
    repeating-linear-gradient(90deg,rgba(6,10,18,.12) 0 1px,rgba(6,10,18,0) 1px 2.6px),
    linear-gradient(90deg,rgba(6,10,18,.34),rgba(6,10,18,0) 12px),
    linear-gradient(180deg,rgba(22,32,48,.6),rgba(22,32,48,.42) 18%,rgba(22,32,48,0) 38%),
    linear-gradient(90deg,rgba(22,32,48,.9),rgba(22,32,48,.9) calc(14px + var(--kb-F) * .688 + 11px),rgba(22,32,48,0) 62%),
    linear-gradient(to top right,rgba(22,32,48,.9),rgba(22,32,48,.62) 50%,rgba(22,32,48,.45)),
    var(--kb-cv-ph);
  background-size:auto,auto,auto,auto,auto,auto,auto,cover;background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,58% 40%;background-repeat:repeat,repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat}
/* binnenhaarlijn in beige, 7 px van de rand: vat de huisnaam in */
.h-begin .kb-cv-front::after{content:"";position:absolute;inset:7px;border:1px solid rgba(244,236,223,.34);pointer-events:none}
/* de huisnaam: dezelfde kolom, dezelfde .kb-word (Archivo 800, 62%, volle hoogte), alleen wit, als foliedruk */
.h-begin .kb-cover .kb-word{color:#fff;-webkit-text-fill-color:#fff;background:none;filter:drop-shadow(0 .7px .4px rgba(0,0,0,.45))}
/* titel zoals "ITALY": groot, rustig, wijd gespatieerd, gecentreerd in het vlak naast de huisnaam; eronder de ondertitel */
.h-begin .kb-cv-top{position:absolute;top:44px;left:calc(14px + var(--kb-F) * .688 + 11px);right:14px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff}
.h-begin .kb-cv-menu{font-family:"Archivo",sans-serif;font-weight:400;font-stretch:100%;font-size:64px;line-height:1;letter-spacing:.2em;margin-right:-.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 18px rgba(10,16,28,.35)}
.h-begin .kb-cv-sub{margin-top:14px;font-family:"DM Sans",sans-serif;font-weight:400;font-size:16px;line-height:1.3;letter-spacing:.02em;color:rgba(255,255,255,.92)}
/* onderaan, waar de gids zijn merk draagt: een korte beige lijn */
.h-begin .kb-cv-mark{position:absolute;bottom:34px;left:calc(14px + var(--kb-F) * .688 + 11px);right:14px;height:1px;margin:0 auto;width:40px;background:#F4ECDF;opacity:.8}
@media(max-width:599px){
  .h-begin .kb-cv-top{top:30px;right:10px}
  .h-begin .kb-cv-menu{font-size:40px;letter-spacing:.18em;margin-right:-.18em}
  .h-begin .kb-cv-sub{margin-top:10px;font-size:14px}
  .h-begin .kb-cv-mark{bottom:26px;width:32px}
}

/* 29-09 · voorkant menukaart: "MENU" luxer (eigenaar). Archivo dun (200) en breed (125%), ruim gespatieerd,
   met een haarlijn eronder en de ondertitel als kleine kapitalen, zoals de titel op een fine-dining-kaart. */
.h-begin .kb-cv-menu{font-weight:200;font-stretch:125%;font-size:56px;letter-spacing:.48em;margin-right:-.48em;text-shadow:0 1px 14px rgba(10,16,28,.35)}
.h-begin .kb-cv-sub{margin-top:18px;font-weight:500;font-size:11.5px;letter-spacing:.34em;margin-right:-.34em;text-transform:uppercase;color:rgba(244,236,223,.9)}
.h-begin .kb-cv-sub::before{content:"";display:block;width:52px;height:1px;margin:0 auto 16px;background:rgba(244,236,223,.6)}
@media(max-width:599px){
  .h-begin .kb-cv-menu{font-size:34px;letter-spacing:.42em;margin-right:-.42em}
  .h-begin .kb-cv-sub{margin-top:12px;font-size:10px;letter-spacing:.3em;margin-right:-.3em}
  .h-begin .kb-cv-sub::before{width:40px;margin-bottom:11px}
}

/* ######################################################################
   8 · ZO BEGIN JE · het boekje met twee pagina's (29-09, eigenaar): "Als je het uitklapt, dan zie je niet gelijk
   het menu. Je wilt dat het dan opengeklapt is met twee pagina's."
   .kb-book is een echt menuboekje. Rustand (zonder JS, minder beweging, na het openslaan): open, twee pagina's
   naast elkaar, links de binnenkant van de omslag met het welkom, rechts het menu zoals het was, met een zachte vouw
   in het midden. home.js · 8a zet het boekje eerst dicht (klasse kb-dicht): de blauwe voorkant ligt op het menu,
   het boekje een halve pagina naar links (dus dicht in het midden). Dan draait de omslag om zijn linkerscharnier
   0 → -180° (echte 3D: perspectief, preserve-3d, achterkant verborgen) en schuift het boekje een halve pagina naar
   rechts: open ligt de spread precies in het midden. Onder 900 px (telefoon, tablet staand) zijn twee pagina's naast
   elkaar te klein om te lezen: daar zit het scharnier boven, de omslag klapt omhoog (rotateX 0 → 180°) en de twee
   pagina's staan onder elkaar, welkom boven, menu onder. Aan het eind staat alles plat: geen 3D-laag meer, scherpe tekst.
   ###################################################################### */
.h-begin{--kb-bh:var(--kb-ch)}
.h-begin .kb-scene{height:calc(var(--kb-s,1) * var(--kb-bh) + var(--kb-band) - var(--kb-ch))}
.h-begin .kb-stand{width:calc(var(--kb-cw) * 2);margin-left:calc(var(--kb-cw) * -1)}
.h-begin .kb-book{position:relative;width:100%;height:var(--kb-bh);margin-bottom:-8px}
.h-begin .kb-card{position:absolute;right:0;bottom:0;margin:0;z-index:1}
.h-begin .kb-cover{position:absolute;left:0;top:0;z-index:0;width:var(--kb-cw);height:var(--kb-ch)}  /* open: onder het menu, zodat zijn schaduw nergens over het menu valt */
.h-begin .kb-holder{width:calc(var(--kb-cw) * .6)}
/* de binnenkant van de omslag: dezelfde papiertoon als het menu, een fijne binnenlijn */
.h-begin .kb-cv-front{display:none;box-shadow:0 0 0 .5px rgba(10,16,28,.55),0 2px 4px rgba(22,32,48,.10),0 34px 60px -34px rgba(22,32,48,.55)}
.h-begin .kb-cv-in{background:var(--kb-paper);color:var(--ink);box-shadow:0 0 0 .5px rgba(22,32,48,.22),0 2px 4px rgba(22,32,48,.06),0 34px 60px -34px rgba(22,32,48,.42)}
.h-begin .kb-cv-in::after{content:"";position:absolute;inset:7px;border:1px solid rgba(47,74,122,.22);pointer-events:none;z-index:3}
/* licht op de draaiende omslag en de schaduw die over het menu schuift (home.js zet ze tijdens het openslaan) */
.h-begin .kb-cv-light{position:absolute;inset:0;z-index:4;background:#0b111b;opacity:0;pointer-events:none}
.h-begin .kb-shade{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0}
/* de vouw: een zachte schaduw waar de twee pagina's samenkomen */
.h-begin .kb-fold{position:absolute;z-index:5;pointer-events:none;top:0;bottom:0;left:calc(var(--kb-cw) - 34px);width:68px;
  background:linear-gradient(90deg,rgba(22,32,48,0),rgba(22,32,48,.035) 30%,rgba(22,32,48,.12) 49%,rgba(22,32,48,.16) 50%,rgba(22,32,48,.09) 51%,rgba(22,32,48,.03) 72%,rgba(22,32,48,0))}
/* het welkom, zoals de linkerpagina van een restaurantkaart */
.h-begin .kb-wl{position:relative;z-index:1;height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:40px 56px 50px}
.h-begin .kb-wl :where(p){margin:0;text-shadow:0 1px 0 rgba(255,255,255,.9),0 -.5px .3px rgba(12,22,44,.16)}
.h-begin .kb-wl-top{display:flex;flex-direction:column;align-items:center;margin:auto 0}  /* het welkom in het midden van de pagina, de ondertekening onderaan */
.h-begin .kb-wl-kick{font-family:"DM Sans",sans-serif;font-weight:600;font-size:11px;line-height:1.2;letter-spacing:.3em;margin-right:-.3em;text-transform:uppercase;color:var(--ink-soft)}
.h-begin .kb-wl-h{margin-top:22px;font-family:"Archivo",sans-serif;font-weight:700;font-stretch:90%;font-size:40px;line-height:1.06;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.h-begin .kb-wl-rule{display:block;width:40px;height:1px;margin:28px auto 0;background:var(--delft)}
.h-begin .kb-wl-p{margin-top:26px;max-width:21em;font-family:"DM Sans",sans-serif;font-weight:400;font-size:16px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.h-begin .kb-wl-names{font-family:"Archivo",sans-serif;font-weight:600;font-stretch:100%;font-size:18px;line-height:1.2;color:var(--ink)}
.h-begin .kb-wl-place{margin-top:8px;font-family:"DM Sans",sans-serif;font-weight:600;font-size:10.5px;line-height:1.2;letter-spacing:.26em;margin-right:-.26em;text-transform:uppercase;color:var(--ink-soft)}
/* dicht en tijdens het openslaan (home.js): de omslag ligt op het menu, het boekje een halve pagina naar links */
.h-begin.kb-dicht .kb-book{transform:translateX(calc(var(--kb-cw) / -2));perspective:2200px;perspective-origin:62% 50%}
.h-begin.kb-dicht .kb-cover{z-index:2;left:var(--kb-cw);transform-origin:0 50%;transform-style:preserve-3d}
.h-begin.kb-dicht .kb-cv{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.h-begin.kb-dicht .kb-cv-front{display:grid}
.h-begin.kb-dicht .kb-cv-in{transform:rotateY(180deg)}
.h-begin.kb-dicht .kb-fold{opacity:0}
.h-begin.kb-dicht .kb-cast,.h-begin.kb-dicht .kb-back{transform:scaleX(.5)}
/* telefoon en tablet staand: scharnier boven, de pagina's onder elkaar */
@media(max-width:899px){
  .h-begin{--kb-bh:calc(var(--kb-ch) * 2)}
  .h-begin .kb-stand{width:var(--kb-cw);margin-left:calc(var(--kb-cw) / -2)}
  .h-begin .kb-fold{left:0;right:0;width:auto;top:calc(var(--kb-ch) - 26px);bottom:auto;height:52px;
    background:linear-gradient(180deg,rgba(22,32,48,0),rgba(22,32,48,.035) 30%,rgba(22,32,48,.12) 49%,rgba(22,32,48,.16) 50%,rgba(22,32,48,.09) 51%,rgba(22,32,48,.03) 72%,rgba(22,32,48,0))}
  .h-begin.kb-dicht .kb-book{transform:translateY(calc(var(--kb-ch) / -2));perspective-origin:50% 62%}
  .h-begin.kb-dicht .kb-cast,.h-begin.kb-dicht .kb-back,.h-begin.kb-dicht .kb-holder{transform:translateY(calc(var(--kb-ch) / -2))}
  .h-begin.kb-dicht .kb-cover{left:0;top:var(--kb-ch);transform-origin:50% 0}
  .h-begin.kb-dicht .kb-cv-in{transform:rotateX(180deg)}
}
@media(max-width:599px){
  .h-begin .kb-wl{padding:30px 26px 34px}
  .h-begin .kb-wl-kick{font-size:10px}
  .h-begin .kb-wl-h{margin-top:16px;font-size:31px}
  .h-begin .kb-wl-rule{margin-top:22px}
  .h-begin .kb-wl-p{margin-top:20px;font-size:14.5px;line-height:1.55}
  .h-begin .kb-wl-names{font-size:16px}
  .h-begin .kb-wl-place{font-size:10px;letter-spacing:.22em;margin-right:-.22em}
}

/* 14-10 mobieltest: geen los woord op de laatste regel van lopende tekst (alleen in <main> van deze pagina, niet in de voet).
   De lange vorm text-wrap-style, zodat een white-space:nowrap elders blijft staan; koppen houden hun text-wrap:balance. */
main :is(p,li,dd,figcaption,legend){text-wrap-style:pretty}

/* 14-10 mobieltest: onder 900 px klapt de kaart open tot twee pagina's onder elkaar; het voetje (.kb-holder) hing dan los onder
   de onderste pagina. Zolang de kaart dicht staat (.kb-dicht) blijft het voetje, open valt het zacht weg. */
@media(max-width:899px){
  .h-begin .kb-holder{transition:opacity .4s var(--ease)}
  .h-begin:not(.kb-dicht) .kb-holder{opacity:0}
}

/* 20-10: de ervaringen zijn eruit (verzonnen reacties); Wat we maken gaat direct naar de slot-oproep, dus RUIM eronder */
:root body[data-page="home"] #main>.h-maken.sec{padding-bottom:calc(var(--ritme-ruim) / 2)}   /* de lijn in het midden: RUIM/2 erboven, RUIM/2 eronder (h-begin) */

/* 20-10 mobieltest (telefoon) */
@media(max-width:599px){
  /* werk: merknaam, wat het is en "bekijk de case" elk op een eigen regel (de puntjes bleven aan het regeleinde hangen) */
  .h-werk .h-werk__case .h-werk__sep{display:none}
  .h-werk .h-werk__case b,.h-werk .h-werk__case .h-werk__more{flex-basis:100%}
  .h-werk .h-werk__case--s{border-bottom:1px solid var(--line)}
  /* zaakkeuze: het blauwe blokje direct achter het woord, niet tegen de buurkolom aan */
  .h-zaak .hz-list button{justify-content:flex-start;gap:10px}
}

/* 20-10 (eigenaar: "de tekst eronder zit direct vastgeplakt aan de foto"): op de telefoon en staand krijgen de zin en de knop
   onder de hero-foto ruim lucht boven zich (was 14 tot 17 px, nu ±47 px op 390) */
@media (max-width:699px),(max-aspect-ratio:4/5){
  .h-hero .h-hero-foot{margin-top:clamp(40px,12vw,56px)}
}