/* ══ 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}
}

/* ══ 17-09-2026 · De hero laat meteen zien wat we doen (naar propest.ai, verzoek Lenny):
   rechts een kolom "Ontdek ↓" met alle diensten, en een tweede knop naar de Systeemscan.
   Het merkteken schuift daarvoor naar het midden-rechts (marge 0.25 in hero3d.js). */
.hmerk-tekst{grid-template-columns:minmax(0,46%) 1fr auto}
.hmerk-slogan{grid-column:1;margin-top:18px}
.hmerk-ontdek{grid-column:3;grid-row:1 / span 6;align-self:end;justify-self:end;
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
.hmerk-ontdek-kop{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-bottom:14px;
  font-size:var(--fs-ui);color:var(--ink3)}
.hmerk-ontdek-kop i{font-style:normal;font-size:20px;line-height:1;color:var(--ink3);
  animation:hmerk-pijl 2.4s ease-in-out infinite}
@keyframes hmerk-pijl{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hmerk-ontdek a{font-size:clamp(15px,1.15vw,18px);line-height:1.3;color:var(--ink3);text-decoration:none;
  transition:color .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover) and (pointer:fine){.hmerk-ontdek a:hover{color:var(--ink);transform:translateX(-4px)}}
.hmerk-ontdek a:focus-visible{color:var(--ink)}
@media(max-width:900px){
  .hmerk-ontdek{align-items:flex-start;text-align:left;margin-top:34px;
    display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
  .hmerk-ontdek-kop{grid-column:1 / -1;flex-direction:row;align-items:center;margin-bottom:4px}
  .hmerk-ontdek a{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.hmerk-ontdek-kop i{animation:none}}
/* de onderste dienst viel achter de chatknop rechtsonder */
.hmerk-ontdek{padding-bottom:clamp(22px,4vw,54px)}

/* ── v5 · focus · de film met de regel als kop (19-09-2026) ──────────────────
   Erft alles van .hm-legora; hier staat alleen wat anders is.
   1. De tekst komt pas in beeld op het moment van de onthulling (.toon, gezet
      door het scriptje in herofocus()). Alleen dekking en verschuiving, geen
      layout-eigenschappen: dat is de vaste regel op deze site.
   2. De kop staat links onderin in plaats van gecentreerd, zodat hij niet over
      de letters op de heuvel valt; die staan in het midden van het beeld.
   3. Op de telefoon: film in een 16:9-blok, tekst eronder op de eigen grond.
      Een schermvullende uitsnede zou driekwart van de breedte wegsnijden. */
.hm-focus .hm-in{opacity:0;transform:translateY(14px);
  transition:opacity .9s ease,transform .9s ease}
.hm-focus.toon .hm-in{opacity:1;transform:none}
.hm-focus.toon .hm-in:nth-child(2){transition-delay:.12s}
.hm-focus.toon .hm-in:nth-child(3){transition-delay:.24s}
.hm-focus.toon .hm-in:nth-child(4){transition-delay:.36s}
.hm-focus .hm-tekst{text-align:left}
.hm-focus h1{margin:10px 0 0;max-width:20ch}
.hm-focus .hm-onder{justify-content:flex-start;margin-top:14px}
.hm-focus .hm-lead{max-width:56ch}
.hm-focus .hm-acties{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:22px}
.hm-focus .hm-lbl{display:block;font-family:var(--mono,'JetBrains Mono',ui-monospace,monospace);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.hm-focus .hm-tekst::before{left:0;transform:none;width:min(980px,100%);
  background:radial-gradient(120% 96% at 22% 86%,
    rgba(8,10,12,.90) 0%, rgba(8,10,12,.76) 42%,
    rgba(8,10,12,.34) 70%, rgba(8,10,12,0) 90%)}
@media (max-width:700px){
  .hm-focus{min-height:auto;display:block;background:var(--paper);align-content:start}
  .hm-focus video,.hm-focus .hm-poster{position:relative;inset:auto;width:100%;
    height:auto;aspect-ratio:16/9}
  .hm-focus .hm-sluier{display:none}
  .hm-focus .hm-tekst{position:relative;padding-top:26px;padding-bottom:34px}
  .hm-focus .hm-tekst::before{display:none}
  .hm-focus .hm-in{opacity:1;transform:none}       /* op mobiel meteen leesbaar */
  .hm-focus .hm-lbl{color:var(--mut)}
  .hm-focus h1{color:var(--ink)}
  .hm-focus h1 .ac{color:var(--ac)}
  .hm-focus .hm-lead{color:var(--mut)}
  .hm-focus .btn-s{background:transparent;color:var(--ink);border-color:var(--line)}
}

/* ── v6 · de bak met de tekst ERONDER (20-09-2026, tweede ronde) ────────────
   Lenny: *"die tekst daar, heel irritant in de hero"* → de kop staat niet meer
   over de film. De film zit in een afgeronde bak (vorm van propest.ai, gemeten
   20-09: 32 px ingesprongen, hoekstraal 30, korrel eroverheen), de tekst staat
   eronder op de grond van de pagina. Alleen de regel blijft op de film. */
.hkaart{padding:clamp(70px,7.6vh,82px) 0 clamp(22px,3vh,40px)}
/* ⚠️ Gemeten: op 16:9 is de bak 727 px hoog en valt de kop onder de vouw — dan
   zie je bij binnenkomst alleen film. De bak wordt dus afgetopt; de film staat
   op `cover`, dus hij snijdt boven en onder een strook weg. */
.hk-bak{position:relative;overflow:hidden;border-radius:clamp(16px,1.6vw,26px);
  height:min(78svh,760px);background:#0e1013;isolation:isolate}
.hk-bak video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hk-korrel{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.20;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='180' height='180' filter='url(%23r)' opacity='.55'/></svg>");
  background-size:180px 180px}
/* De regel hoort bij de film en staat er dus op — klein, in de hoek, met een
   eigen donkere pil zodat hij ook op het felle testbeeld leesbaar blijft. */
.hk-regel{position:absolute;z-index:2;left:clamp(14px,1.6vw,22px);bottom:clamp(14px,1.6vw,22px);
  font-family:var(--mono,'JetBrains Mono',ui-monospace,monospace);font-size:clamp(10px,.86vw,12.5px);
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(8,10,12,.72);
  padding:8px 14px;border-radius:999px}
.hk-regel .ac{color:var(--ac-lt)}
.hk-tekst{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(12px,2.2vw,40px);align-items:end;margin-top:clamp(18px,2.2vw,28px)}
.hk-lbl{grid-column:1/-1;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:clamp(6px,1vw,12px)}
.hkaart h1{grid-column:1;font-size:clamp(30px,3.6vw,54px);font-weight:300;line-height:1.05;
  letter-spacing:-.025em;margin:0;text-wrap:balance}
.hk-lead{grid-column:2;margin:0;font-size:var(--fs-lead);color:var(--mut);max-width:46ch}
.hk-onder{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  margin-top:clamp(14px,1.8vw,22px)}
/* ⚠️ Fable mat de tweede knop op 1,6-1,8:1 tegen zijn omgeving toen hij nog op
   de film stond. Nu staat hij op de lichte grond, maar met een rand van 15 %
   inkt is hij nog steeds zwak. Rand op 42 % en bij hover een vol vlak. */
.hk-onder .btn-s{border-width:1.5px;border-color:color-mix(in srgb,var(--ink) 42%,transparent);
  color:var(--ink);background:transparent}
@media(hover:hover) and (pointer:fine){
  .hk-onder .btn-s:hover{background:var(--ink);color:var(--paper);
    border-color:var(--ink)}}
.hk-onder .btn{min-height:52px;padding:0 24px;font-size:clamp(15px,1.05vw,17px);border-radius:999px;
  transition:transform .25s ease,background-color .25s ease,color .25s ease,box-shadow .25s ease}
@media(hover:hover) and (pointer:fine){
  .hk-onder .btn-p:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(8,10,12,.18)}
  .hk-onder .btn-s:hover{transform:translateY(-2px)}
}
.hk-onder .btn:active{transform:translateY(0) scale(.98)}
.hk-slogan{grid-column:1;align-self:end;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);margin-top:clamp(14px,1.8vw,22px)}
.hk-ontdek{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  margin-top:clamp(22px,3vw,40px);padding-top:clamp(14px,1.8vw,22px);border-top:1px solid var(--line)}
.hk-ontdek-kop{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.hk-ontdek-kop i{font-style:normal;font-size:15px;line-height:1}
.hk-ontdek a{font-size:clamp(14px,1.02vw,16px);color:var(--ink3);text-decoration:none;
  transition:color .25s ease,transform .25s ease}
@media(hover:hover) and (pointer:fine){.hk-ontdek a:hover{color:var(--ink);transform:translateY(-1px)}}
.hk-ontdek a:focus-visible{color:var(--ink)}
@media (max-width:900px){
  .hkaart{padding-top:clamp(60px,9vh,72px)}
  .hk-bak{height:auto;aspect-ratio:16/9}
  .hk-tekst{grid-template-columns:1fr;gap:14px;align-items:start}
  .hkaart h1{grid-column:1;font-size:clamp(28px,7vw,40px)}
  .hk-lead,.hk-onder,.hk-slogan{grid-column:1}
  .hk-onder{margin-top:6px}
  .hk-onder .btn{width:100%;justify-content:center}
}

/* ══ v6b · de tekst IN de film ════════════════════════════════════════
   21-09, Lenny: *"kun je de tekst in de video zetten in plaats van daar raar
   onder?"* Naar propest, maar met hun grootste fout eruit: 44 tot 62 % van
   hun koppixels haalt 4,5:1 niet, omdat er niets onder de tekst ligt.
   Hier ligt een zachte verdonkering die naar onderen toe sterker wordt -
   geen balk, dus je ziet hem niet als laag. */
.hkaart-in .hk-bak{height:min(92svh,900px);
  /* uit `.wrap` breken: de bak hoort bijna schermbreed, niet 1180 px */
  width:calc(100vw - 64px);max-width:none;
  margin-left:calc(50% - 50vw + 32px);margin-right:calc(50% - 50vw + 32px)}
.hkaart-in{padding-top:clamp(60px,6.4vh,74px)}
.hk-sluier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(68% 52% at 50% 48%,rgba(5,7,10,.80) 0%,rgba(5,7,10,.62) 42%,
                    rgba(5,7,10,.22) 72%,transparent 92%),
    linear-gradient(to bottom,rgba(5,7,10,.42) 0%,rgba(5,7,10,.16) 30%,
                    rgba(5,7,10,.20) 62%,rgba(5,7,10,.62) 100%)}
.hkaart-in .hk-korrel{z-index:2}
.hk-in{position:absolute;z-index:3;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 clamp(20px,5vw,80px);pointer-events:none}
.hk-in > *{pointer-events:auto}
.hk-eb{font-family:var(--mono,'JetBrains Mono',ui-monospace,monospace);
  font-size:clamp(10px,.8vw,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-bottom:clamp(14px,1.8vw,22px)}
.hkaart-in h1{grid-column:auto;margin:0;color:#fff;--ac:#ffab93;--ac-lt:#ffc7b4;
  font-size:clamp(34px,5.4vw,78px);font-weight:600;line-height:.98;
  letter-spacing:-.03em;max-width:17ch;text-wrap:balance}
.hkaart-in .hk-lead{grid-column:auto;margin:clamp(16px,1.8vw,24px) 0 0;
  color:rgba(255,255,255,.92);font-size:clamp(15px,1.15vw,19px);max-width:52ch}
.hkaart-in .hk-onder{grid-column:auto;justify-content:center;
  margin-top:clamp(20px,2.4vw,32px)}
/* op de film moet de tweede knop zijn eigen grond meebrengen */
.hkaart-in .hk-onder .btn-s{border-color:rgba(255,255,255,.55);color:#fff;
  background:rgba(255,255,255,.08)}
@media(hover:hover) and (pointer:fine){
  .hkaart-in .hk-onder .btn-s:hover{background:#fff;color:#0e1013;border-color:#fff}}
.hk-slogan-in{position:absolute;z-index:3;right:clamp(76px,6vw,92px); /* 29-09: vrij van de chatknop */
  bottom:clamp(14px,1.6vw,22px);font-family:var(--mono,ui-monospace,monospace);
  font-size:clamp(10px,.78vw,12px);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.88)}
/* de scramble-intro: de tekst 'komt voorbij' bij binnenkomst. Dat is wat
   Lenny bij propest zag - hun kop scrollt niet mee, dit is het effect. */
.hkaart-in h1 .sc{display:inline-block;white-space:pre}
@media (max-width:900px){
  .hkaart-in .hk-bak{width:100%;max-width:100%;aspect-ratio:auto;
    height:min(78svh,660px);margin-left:0;margin-right:0}
  .hk-in{padding-inline:20px}
  .hkaart-in h1{font-size:clamp(30px,8.4vw,46px);max-width:none}
  .hkaart-in .hk-onder .btn{width:100%;justify-content:center}
  .hk-slogan-in{display:none}
}
@media(prefers-reduced-motion:reduce){.hkaart-in h1 .sc{animation:none}}