/* ══ De twee hero-versies (26-08-2026) ═══════════════════════════════════════
   v1 = augen.pro · v2 = legora.com. Allebei gemeten op de echte site, niet
   geschat: inspiratie/augen/augen-2026-08-25-hero.png en
   inspiratie/legora/hero-1440.png.

   Verschil in één zin: augen laat het BEELD het werk doen en zet een klein
   tekstblok linksonder; legora zet een GROTE witte kop onderaan gecentreerd
   over een schermvullende video. Verder is de pagina identiek.

   ⚠️ Allebei zijn ze LICHT, terwijl de reis-hero donker was omdat de 3D-wereld
   lichtbanen tegen nacht nodig heeft. Daarom zet bouw.py data-licht op de
   wereld: reis3d.js begint dan meteen op papier. Zonder dat zie je een harde
   rand op de eerste sectiegrens.                                            */

.hmedia{position:relative;min-height:100svh;display:grid;isolation:isolate}
.hmedia .wrap{width:100%}

/* ── v1 · augen ──────────────────────────────────────────────────────────── */
.hm-augen{background:var(--paper);align-content:end;overflow:clip}
.hm-augen .hm-beeld{
  position:absolute;inset:0 0 0 auto;width:min(62%,880px);z-index:0;
  display:grid;place-items:end center;pointer-events:none}
.hm-augen .hm-beeld img{
  width:100%;height:100%;object-fit:cover;object-position:50% 34%;
  /* het onderwerp lost onderaan op in het wit — dat zit bij augen in de FOTO,
     wij doen het met een masker zodat de sterkte bijstelbaar blijft en het
     ook op een andere foto werkt. Twee verlopen, samengevoegd met intersect. */
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 99%),
              linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 99%),
              linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  filter:grayscale(.22) contrast(1.04)}
.hm-augen .hm-tekst{position:relative;z-index:1;
  padding-top:0;padding-bottom:clamp(96px,13vh,168px)}
.hm-augen .hm-merk{font-size:13px;letter-spacing:.01em;color:var(--ink);
  margin-bottom:14px;font-weight:500}
.hm-augen h1{font-size:clamp(26px,3.1vw,40px);line-height:1.12;
  letter-spacing:-.02em;font-weight:400;max-width:15ch;margin:0}
.hm-augen .hm-lead{margin:16px 0 0;max-width:44ch;color:var(--mut);
  font-size:clamp(15px,1.05vw,17px);line-height:1.5}
.hm-augen .hm-acties{display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;margin-top:26px}

/* ── v2 · legora ─────────────────────────────────────────────────────────── */
.hm-legora{align-content:end;overflow:clip;background:#e9e9e7}
.hm-legora video,.hm-legora .hm-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* ⚠️ GEMETEN 02-09 op zes momenten x drie films, op de echte samenstelling (video
   gepauzeerd, tekst verborgen, opname). Met de oude waarden (.26 bovenaan, .04 op
   24%) zakte het label linksboven op een ochtendstad naar 3,28:1 — de norm is 4,5.
   Het slotbeeld is een wit scherm en de opening een lichte lucht; dat zijn de twee
   momenten die je met één stilstaand frame nooit tegenkomt. Deze waarden komen uit
   variant B van _lab-hero8 en halen 0 fouten over 55 tekstvlakken. */
.hm-legora .hm-sluier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,10,12,.70) 0,rgba(8,10,12,.15) 28%,
              rgba(8,10,12,.17) 50%,rgba(8,10,12,.34) 74%,rgba(8,10,12,.62) 100%)}
/* ⚠️ 02-09, tweede correctie. Om de koraal woorden in de kop op contrast te
   krijgen was de hele onderhelft donker gemaakt — en toen was de film te donker
   ("waarom is de hero een beetje donker"). Beide problemen komen voort uit één
   fout: een sluier over het HELE beeld regelen terwijl alleen het stuk onder de
   tekst het nodig heeft. Nu een lokale sluier die precies zo breed is als de
   tekstkolom en naar boven uitdooft; de film eromheen blijft licht. */
.hm-legora .hm-tekst{position:relative;isolation:isolate}
.hm-legora .hm-tekst::before{content:"";position:absolute;z-index:-1;
  left:50%;transform:translateX(-50%);bottom:calc(-1 * clamp(70px,9vh,116px));
  width:min(1320px,96vw);height:calc(100% + clamp(70px,9vh,116px) + 12vh);
  background:radial-gradient(118% 92% at 50% 88%,
    rgba(8,10,12,.88) 0%, rgba(8,10,12,.74) 40%,
    rgba(8,10,12,.34) 68%, rgba(8,10,12,0) 88%);
  pointer-events:none}
/* De mono-microlabels in de hoeken — de gedeelde taal van karolbinkow.ski en
   fluid.glass. Ze staan op de hoogte van de kopbalk en verdwijnen zodra die balk
   er te dicht bij komt; op 1180 px raken ze elkaar. */
.hm-legora .hm-hoeken{position:absolute;inset:30px clamp(20px,4vw,44px) auto;z-index:2;
  display:flex;justify-content:space-between;gap:24px;pointer-events:none}
.hm-legora .hm-mlabel{font-family:var(--mono,'JetBrains Mono',ui-monospace,monospace);
  font-size:10.5px;line-height:1.5;letter-spacing:.19em;text-transform:uppercase;
  color:#f2f5f7;white-space:nowrap}
@media (max-width:1180px){.hm-legora .hm-hoeken{display:none}}
.hm-legora .hm-tekst{position:relative;z-index:2;text-align:center;
  padding-top:0;padding-bottom:clamp(70px,9vh,116px)}
.hm-legora h1{color:#fff;font-size:clamp(30px,4.3vw,56px);line-height:1.16;
  letter-spacing:-.025em;font-weight:400;margin:0 auto;max-width:18ch;
  text-wrap:balance}
.hm-legora .hm-onder{display:flex;gap:16px;align-items:center;
  justify-content:center;flex-wrap:wrap;margin-top:22px}
.hm-legora .hm-lead{color:rgba(255,255,255,.92);margin:0;
  font-size:clamp(14px,1.05vw,17px)}
/* ⚠️ Het accent van de site is een DONKERE groentint; op een lichte video
   gemeten op 1,00:1 — letterlijk onzichtbaar. Op deze hero de lichte tint,
   die staat er al voor precies dit geval (donkere ondergrond). Gemeten met
   twee opnames, één met de tekst verborgen. */
.hm-legora h1 .ac{color:var(--ac-lt)}
.hm-legora .btn-p{background:var(--ac);color:#fff}
.hm-legora .btn-s{background:rgba(255,255,255,.14);color:#fff;
  border-color:rgba(255,255,255,.42)}

/* ── mobiel: naast elkaar bestaat niet, alleen opnieuw indelen ───────────── */
@media (max-width:860px){
  .hmedia{min-height:88svh}
  .hm-augen .hm-beeld{width:100%;opacity:.5;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 34%,transparent 88%);
            mask-image:linear-gradient(180deg,#000 0,#000 34%,transparent 88%)}
  .hm-augen h1{max-width:none}
  .hm-legora h1{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .hm-legora video{display:none}
}

/* ── v3 · lassie ─────────────────────────────────────────────────────────────
   Gemeten op lassie.ai, 26-08: inspiratie/REFERENTIE-lassie-ai.md.
   Schermvullende video ZONDER marge, kop MIDDEN op het scherm in een schreef,
   tweede regel cursief, en onderaan één afgeronde pil met de actie erin.

   Verschil met v2 (legora): daar staat de kop onderaan en is het beeld bijna
   monochroom; hier staat hij in het midden op een echte scène in daglicht.    */
.hm-lassie{align-content:center;overflow:clip;background:#e7e5e0}
.hm-lassie video,.hm-lassie .hm-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* ⚠️ Lassie heeft GEEN sluier: hun opname is uit zichzelf rustig genoeg. Een
   stockopname is dat zelden, dus een lichte sluier die het midden dempt —
   zwaar genoeg voor 4,5:1, licht genoeg om de scène te laten zien. Gemeten,
   niet geschat: zie de contrastcontrole. */
.hm-lassie .hm-sluier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 82% at 50% 46%,rgba(6,8,10,.66) 0,
             rgba(6,8,10,.52) 42%,rgba(6,8,10,.30) 74%,rgba(6,8,10,.40) 100%)}
.hm-lassie .hm-tekst{position:relative;z-index:2;text-align:center;
  padding-top:0;padding-bottom:0}
.hm-lassie h1{color:#fff;font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;font-size:clamp(38px,6vw,87px);line-height:.95;
  letter-spacing:-.02em;margin:0 auto;max-width:16ch;text-wrap:balance}
/* De handtekening: tweede helft van de kop cursief in plaats van in het accent. */
.hm-lassie h1 .ac{color:#fff;font-style:italic;display:block}
.hm-lassie .hm-lead{color:#fff;margin:26px auto 0;
  font-size:clamp(15px,1.1vw,18px);max-width:46ch}
/* De pil onderaan: bij lassie een e-mailveld met knop. Wij hebben daar geen
   endpoint voor, dus dezelfde vorm met de bestaande actie erin. */
.hm-lassie .hm-pil{display:inline-flex;align-items:center;gap:8px;margin-top:30px;
  padding:8px 8px 8px 22px;border-radius:999px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34)}
.hm-lassie .hm-pil span{color:#fff;font-size:15px;white-space:nowrap}
.hm-lassie .hm-pil .btn-p{background:#fff;color:var(--ink);border-color:#fff}
@media (max-width:860px){
  .hm-lassie h1{max-width:none}
  .hm-lassie .hm-pil{flex-direction:column;gap:12px;padding:18px;border-radius:22px}
  .hm-lassie .hm-pil .btn-p{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.hm-lassie video{display:none}}


/* ═══ HERO v4 — HET MERKTEKEN IN 3D ═════════════════════════════════════════
   Kop links, het merkteken rechts. Gekozen stand uit `_logo3d.html` (14-09):
   vrij · parelmoer · zweven. Het canvas wordt gevuld door `bron/hero3d.js`.

   ⚠️ Het canvas ligt ACHTER de tekst (z-index) maar vangt geen muis — anders
      is de knop niet aanklikbaar op de plek waar ze overlappen. Dat is dezelfde
      val als de labbalk die knoppen bedekte (19-08, gemeten met elementFromPoint).
   ════════════════════════════════════════════════════════════════════════ */
/* ⚠️ Een EIGEN ondoorzichtige ondergrond. Zonder dit schijnt de 3D-wereld van
   reis3d.js (een vast canvas achter de hele pagina) er dwars doorheen en werd
   de hero lichtgrijs in plaats van antraciet. `--paper` is de paginagrond en
   draait per grond correct mee — gemeten #16181c op antraciet. */
.hmerk{position:relative;min-height:min(100svh,880px);display:flex;align-items:center;
  background:var(--paper);
  padding:clamp(96px,11vw,150px) 0 clamp(54px,7vw,96px);overflow:hidden}
.hmerk-cv{position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none;z-index:0}
/* ⚠️ `.hmerk-tekst` draagt OOK de klasse `wrap`, en die heeft `margin:0 auto`.
   Een `max-width` erop maakt de doos smaller en de auto-marges zetten hem dan
   in het MIDDEN van het scherm — `margin-right:auto` alleen helpt niet, want
   `margin-left:auto` blijft staan. Daarom houdt de wrap zijn volle breedte en
   beperken we de INHOUD met een grid. Zelfde familie als de `.hm-tekst`-val
   van 26-08 (die deelt `wrap` en een verkorte padding zette de zijmarge op 0). */
.hmerk-tekst{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,46%) 1fr}
.hmerk-tekst > *{grid-column:1}
.hmerk-lbl{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ac);display:block}
.hmerk h1{font-size:clamp(38px,5.4vw,80px);font-weight:300;line-height:1.0;
  letter-spacing:-.042em;margin:18px 0 0;color:var(--ink)}
.hmerk-lead{margin:clamp(20px,2.4vw,32px) 0 0;font-size:var(--fs-lead);
  color:var(--ink3);line-height:1.6;max-width:46ch}
.hmerk-onder{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
  margin-top:clamp(26px,3.2vw,40px)}
.hmerk-slogan{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut)}
@media(max-width:900px){
  /* ⚠️ Mobiel kun je niet schalen, alleen opnieuw indelen (les 21-08): naast
     elkaar past niet op 390 px, dus het merk gaat naar BOVEN de tekst. */
  .hmerk{min-height:auto;flex-direction:column;align-items:stretch;
    padding-top:clamp(124px,30vw,168px)}
  /* de kopbalk zweeft (position:fixed), dus het canvas moet er zelf onder
     beginnen — de padding van de sectie houdt hem niet tegen */
  .hmerk-cv{position:relative;height:min(32vh,260px);inset:auto;order:-1;
    margin-bottom:clamp(20px,5vw,34px)}
  .hmerk-tekst{display:block}
}