/* ==========================================================================
   Rentarado — marketingsite, stylesheet
   ------------------------------------------------------------------------
   Tokens komen 1-op-1 uit het Rentarado/BlackSwan design system
   (docs/design-system/css/tokens/*). Namen volgen de PACK-vocabulaire
   (--forest/--cream/--gold) om de bekende --ink-botsing te vermijden.

   Twee harde merkregels die je in deze file terugziet:
     1. goud is ACCENT: hairlines, ticks, focus, één woord in de kop.
        Nooit een vlakvulling voor grote oppervlakken.
     2. goud is nooit kleine tekst op licht (haalt geen AA). Op licht zijn
        labels forest of muted, met een gouden streep ernaast.
   ========================================================================== */

/* --- Webfonts -------------------------------------------------------------
   Fase 1: Google Fonts, identiek aan het design system.
   TODO vóór DE-campagnes: Lora 500/600, Inter 400/500/600 en IBM Plex Mono
   400/500 self-hosten als woff2 en dit @import-blok vervangen door @font-face
   (LG München: Google Fonts embedden zonder consent = privacyrisico in DE).
   Wijzig dan ook de CSP-regel in .htaccess.
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Merk, vast */
  --forest:#1D2D2A; --deep:#182825; --abyss:#101B18;
  --cream:#EFE5CC;  --cream-2:#ECE6CE;
  --gold:#AF8D33;   --gold-deep:#A48229; --gold-light:#CAAD75;

  /* Neutraal. muted en faint zijn donkerder dan de designsysteem-waarden omdat
     de oorspronkelijke #8A958C op paper 2,78:1 haalt en juist de kleinste labels
     draagt: dat faalt AA en maakte de pagina bovendien grijs. */
  --paper:#F6F2E6; --surface:#FFFFFF; --surface-2:#F3EFE3;
  --line:#D2C9AE;  --hair:#E3DCC6;
  --text:#1D2D2A;  --muted:#4F5C55; --faint:#6B7A70;
  --on-dark:#E9E0C8; --on-dark-muted:#B3BDB1;

  /* Status, spaarzaam: alleen in de productillustratie */
  --success:#3E7B54; --success-soft:#E4EFE6; --success-ink:#2C5A3D;
  --warning:#BE6E1B; --warning-soft:#F6E8CF; --warning-ink:#7E4E0E;
  --danger:#B0463B;  --danger-soft:#F3DEDA;  --danger-ink:#8A352C;
  --info:#3E6B79;    --info-soft:#DCEAED;    --info-ink:#2C5360;

  /* Boottype-accenten */
  --boat-a:#AF8D33; --boat-b:#3E7B54; --boat-c:#BE6E1B; --boat-w:#3E6B79;

  /* Type */
  --disp:"Lora",Georgia,"Times New Roman",serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Vorm. Schaduwen zijn opgewaardeerd: 5% alpha op crème is onder de
     zichtbaarheidsdrempel, waardoor elke kaart in ruststand plat lag. */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --sh-1:0 1px 2px rgba(16,27,24,.06), 0 4px 10px rgba(24,40,37,.07);
  --sh-2:0 2px 4px rgba(16,27,24,.06), 0 14px 30px rgba(24,40,37,.12);
  --sh-3:0 4px 10px rgba(16,27,24,.08), 0 34px 70px rgba(24,40,37,.18);
  --sh-dark:0 60px 100px -24px rgba(0,0,0,.72), 0 4px 14px rgba(0,0,0,.34);

  /* Ritme. Buiten minder, binnen meer: de oude verhouding was 144px sectielucht
     tegen 26px kaartpadding, waardoor alles los zweefde en toch vol stond. */
  --gut:clamp(20px,5vw,44px);
  --sec:clamp(64px,7.4vw,112px);
  --maxw:1240px;
  --maxw-wide:1560px;

  /* Motion */
  --ease:cubic-bezier(.22,.68,.16,1);
  --ease-out:cubic-bezier(.16,.84,.28,1);
}

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

body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--gold-deep);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:600;color:var(--forest);letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
/* Tweede maat, alleen voor de twee data-oppervlakken (bento en rolmatrix), zodat
   er ritme op breedte ontstaat zonder de leesregel van tekstsecties op te blazen. */
.wrap--wide{max-width:var(--maxw-wide)}
/* Volle breedte binnen een sectie, zonder 100vw (dat rekent de scrollbar mee). */
.bleed{margin-inline:calc(50% - 50vw);width:100vw}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cream);color:var(--forest);padding:11px 18px;border-radius:var(--r-xs);font-weight:600;font-size:14px}
.skip:focus{left:14px;top:14px}

/* Filmkorrel over de hele pagina: haalt het digitale vlakke eraf.
   soft-light in plaats van overlay, en zichtbaar gedoseerd: op .05 met overlay
   was het effect meetbaar nul. Onder de sticky header (z-index 100), niet erover. */
.grain{
  position:fixed;inset:0;z-index:6;pointer-events:none;opacity:.2;
  mix-blend-mode:soft-light;background-repeat:repeat;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================================================== Typografie =========
   Vaste trap: 11/12 (mono label), 15 (body), 17 (kaartkop), 21 (kaartkop lead),
   28, 40, 60, 104. Alles daarbuiten is ruis; de oude stylesheet had 43
   combinaties waarvan 15 tussen 12 en 18px.
   ======================================================================= */
.h-2{font-size:clamp(32px,5vw,60px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.h-3{font-family:var(--body);font-weight:600;font-size:17px;line-height:1.35;letter-spacing:-.005em;color:var(--forest)}
/* Leeskop van de dominante kaart in een sectie: Lora, groter, geeft elke sectie
   één focuspunt in plaats van drie identieke rechthoeken. */
.h-3--lead{font-family:var(--disp);font-weight:600;font-size:21px;line-height:1.22;letter-spacing:-.02em}
.lead{font-size:clamp(17px,1.3vw,19px);line-height:1.66;color:var(--muted)}
.lead--dark{color:var(--on-dark-muted)}
.section-intro{max-width:60ch}
.section-intro .lead{margin-top:18px}
.sec__hd--center{text-align:center}
.sec__hd--center .section-intro{margin-inline:auto}
.sec__hd--center .eyebrow{justify-content:center}
.mt-block{margin-top:clamp(26px,3vw,40px)}
.mt-tight{margin-top:18px}
.mb-tight{margin-bottom:clamp(24px,2.6vw,34px)}

/* Kicker: mono, klein, met gouden streep. Tekst donker (goud faalt AA op licht). */
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;margin:0 0 18px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--forest);
}
.eyebrow::before{content:"";width:32px;height:2px;border-radius:99px;background:var(--gold)}
.eyebrow--dark{color:var(--gold-light)}
.eyebrow--dark::before{background:var(--gold-light)}

/* Pulserende stip: gebruikt bij "live" en "beperkte plaatsen". */
.pulse{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--gold);opacity:.6;animation:pulse 2.6s var(--ease-out) infinite}
.pulse--sm{width:6px;height:6px}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}

/* ==================================================== Merkteken ========= */
.mark{display:block;flex:none}
.mark .hull-top,.mark .hull-bot{transform-box:fill-box;transform-origin:center}
.mark--intro .hull-top{animation:mk-top .9s var(--ease-out) both}
.mark--intro .hull-bot{animation:mk-bot .9s var(--ease-out) .12s both}
@keyframes mk-top{from{transform:translateX(-16px);opacity:0}to{transform:none;opacity:1}}
@keyframes mk-bot{from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}}

/* ====================================================== Knoppen ========= */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 24px;border:1px solid transparent;border-radius:999px;
  font-family:var(--body);font-size:15px;font-weight:600;line-height:1;letter-spacing:-.01em;
  cursor:pointer;text-decoration:none;white-space:nowrap;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-lg{min-height:54px;padding:16px 30px;font-size:16px}
.btn-sm{min-height:40px;padding:10px 18px;font-size:14px}

.btn-primary{background:var(--forest);color:var(--cream);box-shadow:var(--sh-1)}
.btn-primary:hover{background:#16241F;box-shadow:var(--sh-2)}
.btn-cream{background:var(--cream);color:var(--forest);box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.btn-cream:hover{background:#FBF6E8;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.btn-line{background:rgba(239,229,204,.04);color:var(--cream);border-color:rgba(239,229,204,.34)}
.btn-line:hover{border-color:var(--cream);background:rgba(239,229,204,.1)}
.btn-ghost{background:transparent;color:var(--forest);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--forest);background:rgba(29,45,42,.04)}

/* Glans die één keer over de knop trekt bij hover. */
.btn-sheen::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);opacity:0;
}
.btn-sheen:hover::after{animation:sheen .75s var(--ease-out) forwards}
@keyframes sheen{from{left:-60%;opacity:1}to{left:120%;opacity:0}}

/* ================================================ Meldingsbalk ========= */
.notice{background:var(--abyss);color:var(--on-dark-muted);border-bottom:1px solid rgba(239,229,204,.08)}
.notice__in{display:flex;align-items:center;gap:12px;min-height:42px;padding-block:9px}
.notice p{margin:0;font-size:13px;line-height:1.45}
.notice a{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-light);
}
.notice a:hover{color:var(--cream);text-decoration:none}
@media (max-width:720px){.notice p{font-size:12px}.notice a{display:none}}

/* ======================================================= Header ========= */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(21,32,29,.72);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(239,229,204,.09);
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.hdr.is-stuck{background:rgba(16,27,24,.94);border-bottom-color:rgba(239,229,204,.16)}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:72px}
.hdr.is-stuck .hdr__in{min-height:64px;transition:min-height .3s var(--ease)}
.hdr__brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none}
.hdr__brand:hover{text-decoration:none}
.hdr__mark{transition:transform .3s var(--ease)}
.hdr__brand:hover .hdr__mark{transform:translateY(-1px)}
.hdr__name{font-family:var(--disp);font-weight:500;font-size:22px;letter-spacing:.005em;color:var(--cream);line-height:1}
.hdr__spacer{margin-right:auto}
.hdr__nav{display:flex;align-items:center;gap:2px}
.hdr__nav a{
  position:relative;padding:10px 13px;border-radius:99px;font-size:15px;font-weight:500;
  color:var(--on-dark);text-decoration:none;transition:color .2s var(--ease),background-color .2s var(--ease);
}
.hdr__nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1px;background:var(--gold-light);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.hdr__nav a:hover{color:var(--cream);text-decoration:none}
.hdr__nav a:hover::after{transform:scaleX(1)}
.hdr__tools{display:flex;align-items:center;gap:12px}
.hdr__login{font-size:15px;font-weight:500;color:var(--on-dark);padding:10px 2px}
.hdr__login:hover{color:var(--cream);text-decoration:none}
.hdr__progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;overflow:hidden}
.hdr__progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .1s linear}

.lang{display:flex;align-items:center;gap:2px;padding:3px;border-radius:99px;background:rgba(239,229,204,.08)}
.lang a{
  display:block;min-width:34px;padding:6px 9px;border-radius:99px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.09em;
  text-align:center;text-transform:uppercase;color:var(--on-dark-muted);text-decoration:none;
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.lang a:hover{color:var(--cream);text-decoration:none}
.lang a[aria-current="true"]{background:var(--cream);color:var(--forest)}

.hdr__burger{display:none}
@media (max-width:1120px){
  .hdr__nav{display:none}
  .hdr__login{display:none}
  .hdr__burger{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    width:44px;height:44px;border:1px solid rgba(239,229,204,.24);border-radius:12px;background:transparent;cursor:pointer;
  }
  .hdr__burger span{display:block;width:17px;height:1.5px;background:var(--cream);border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease)}
  .hdr.is-open .hdr__burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .hdr.is-open .hdr__burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .hdr.is-open .hdr__nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;padding:10px var(--gut) 22px;
    background:var(--abyss);border-bottom:1px solid rgba(239,229,204,.14);box-shadow:0 24px 40px rgba(0,0,0,.4);
  }
  .hdr.is-open .hdr__nav a{padding:15px 4px;font-size:17px;border-bottom:1px solid rgba(239,229,204,.07)}
  .hdr.is-open .hdr__nav a::after{display:none}
}
@media (max-width:560px){
  .hdr__in{min-height:62px;gap:10px}
  .hdr__name{font-size:19px}
  .hdr__tools .btn{display:none}
}

/* ========================================================= Hero ========= */
.hero{position:relative;isolation:isolate;overflow:hidden;color:var(--cream);background:var(--forest)}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:linear-gradient(164deg,#26392F 0%,#22352F 16%,var(--forest) 40%,var(--deep) 68%,var(--abyss) 100%)}
/* opacity:.5 halveerde alle stops, waardoor de sterkste piek op ratio 1,5 uitkwam
   en precies onder het glazen paneel lag. Nu vol, drie stops per laag, hotspots
   in leeg gebied. */
.hero__aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:1;will-change:transform}
.hero__aurora--1{top:-30%;right:4%;width:54vw;height:54vw;
  background:radial-gradient(circle,rgba(175,141,51,.5),rgba(175,141,51,.18) 38%,transparent 72%);
  animation:drift1 26s ease-in-out infinite alternate}
.hero__aurora--2{bottom:-26%;left:-14%;width:52vw;height:52vw;
  background:radial-gradient(circle,rgba(62,123,84,.42),rgba(62,123,84,.16) 40%,transparent 74%);
  animation:drift2 32s ease-in-out infinite alternate}
.hero__aurora--3{top:6%;left:4%;width:28vw;height:28vw;
  background:radial-gradient(circle,rgba(202,173,117,.3),rgba(202,173,117,.1) 42%,transparent 76%);
  animation:drift3 22s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(-5%,6%,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(7%,-5%,0) scale(1.08)}}
@keyframes drift3{to{transform:translate3d(-8%,-7%,0) scale(.92)}}

/* Fijn raster, aan de randen weggemaskeerd. */
.hero__mesh{
  position:absolute;inset:0;opacity:1;
  background-image:linear-gradient(rgba(239,229,204,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(239,229,204,.10) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(130% 100% at 46% 24%,#000 46%,transparent 92%);
  mask-image:radial-gradient(130% 100% at 46% 24%,#000 46%,transparent 92%);
}
/* Grover tweede raster: geeft structuur die je op 80px alleen niet leest. */
.hero__mesh--coarse{
  background-image:linear-gradient(rgba(239,229,204,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(239,229,204,.16) 1px,transparent 1px);
  background-size:320px 320px;
}
/* Extra korrel alleen in de hero: daar levert textuur het meeste op. */
.hero__grain{position:absolute;inset:0;pointer-events:none;opacity:.3;mix-blend-mode:overlay;
  background-size:160px 160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23m)'/%3E%3C/svg%3E")}
/* Volgt de aanwijzer; JS zet --mx/--my. */
.hero__spot{
  position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(520px 420px at var(--mx,50%) var(--my,0%),rgba(202,173,117,.18),transparent 68%);
}
.hero.has-pointer .hero__spot{opacity:1}

.hero__in{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,3.6vw,60px);align-items:start;
  padding-block:clamp(44px,5vw,76px) clamp(200px,26vw,400px);
}
.hero__h1{
  font-weight:500;font-size:clamp(40px,6.6vw,84px);line-height:1;letter-spacing:-.038em;
  color:var(--cream);max-width:12ch;text-shadow:0 3px 40px rgba(0,0,0,.4);
}
.hero__h1 .accent{
  font-style:normal;
  background:linear-gradient(96deg,var(--cream) 8%,var(--gold-light) 58%,var(--gold) 105%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Woord-voor-woord intro; JS zet de spans, CSS doet de stagger. */
/* overflow:hidden knipt de staart van g, p en j af. De extra onderruimte valt
   binnen het clip-vlak en wordt met een negatieve marge weer teruggenomen, zodat
   de regelafstand gelijk blijft. */
.hline .w{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.34em;margin-bottom:-.34em}
.hline .w>span{display:inline-block}
.js-reveal .hline .w>span{transform:translateY(105%);opacity:0;animation:wordin .9s var(--ease-out) forwards}
.js-reveal .hline .w:nth-child(1)>span{animation-delay:.05s}
.js-reveal .hline .w:nth-child(2)>span{animation-delay:.12s}
.js-reveal .hline .w:nth-child(3)>span{animation-delay:.19s}
.js-reveal .hline .w:nth-child(4)>span{animation-delay:.26s}
.js-reveal .hline .w:nth-child(5)>span{animation-delay:.33s}
.js-reveal .hline .w:nth-child(n+6)>span{animation-delay:.4s}
@keyframes wordin{to{transform:none;opacity:1}}

.hero__sub{
  display:block;margin-top:16px;
  font-family:var(--disp);font-weight:400;font-style:italic;
  font-size:clamp(19px,2.2vw,27px);line-height:1.25;letter-spacing:-.01em;color:var(--gold-light);
}
.hero__lead{margin-top:24px;max-width:42ch;font-size:clamp(16px,1.2vw,18.5px);line-height:1.7;color:var(--on-dark-muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__note{
  display:flex;gap:12px;margin-top:32px;padding:16px 18px;max-width:52ch;
  background:rgba(239,229,204,.05);border:1px solid rgba(239,229,204,.12);border-radius:var(--r-sm);
  font-size:15px;line-height:1.6;color:var(--on-dark-muted);
}
.hero__note .pulse{margin-top:7px}
.hero__note strong{display:block;color:var(--cream);font-weight:600}
.hero__stats{
  grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 30px;
  margin-top:clamp(34px,4.6vw,64px);padding-top:26px;border-top:1px solid rgba(239,229,204,.16);
}
@media (max-width:760px){.hero__stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hero__stats b{display:block;font-family:var(--disp);font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--cream)}
.hero__stats span{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--on-dark-muted)}

.hero__scroll{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(239,229,204,.42);text-decoration:none;
}
.hero__scroll{color:rgba(239,229,204,.6)}
.hero__scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--gold-light),transparent);animation:scrollcue 2.4s var(--ease) infinite}
@keyframes scrollcue{0%{transform:scaleY(.3);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

@media (max-width:1000px){
  .hero__in{grid-template-columns:1fr;gap:44px;padding-block:44px 68px}
  .hero__h1{max-width:20ch}
  .hero__scroll{display:none}
}
@media (max-width:620px){
  .hero__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================== Productpaneel ========== */
.hero__panel{position:relative}
.panel{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(239,229,204,.22);box-shadow:var(--sh-dark);
}
.panel__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 50% at 50% -10%,rgba(202,173,117,.16),transparent 70%)}
.panel__chrome{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid rgba(239,229,204,.12)}
.panel__dots{display:flex;gap:6px}
.panel__dots i{width:9px;height:9px;border-radius:50%;background:rgba(239,229,204,.2)}
.panel__dots i:first-child{background:rgba(202,173,117,.5)}
.panel__cap{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(239,229,204,.6);text-align:right}

.tabs{position:relative;display:flex;gap:2px;margin-left:auto;padding:3px;border-radius:99px;background:rgba(16,27,24,.4)}
.tabs__btn{
  position:relative;z-index:1;padding:8px 15px;border:0;border-radius:99px;background:transparent;cursor:pointer;
  font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:-.005em;color:var(--on-dark-muted);
  transition:color .22s var(--ease);
}
.tabs__btn:hover{color:var(--cream)}
.tabs__btn.is-on{color:var(--forest)}
/* De pil krijgt een correcte beginstand in CSS (drie tabs) en JS zet daarna de
   exacte breedte. Bewust GEEN transitie op width: een width-transitie loopt niet
   in een niet-zichtbare tab, waardoor de pil op nul bleef staan. */
.tabs__ink{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);
  border-radius:99px;background:var(--cream);transition:transform .32s var(--ease);z-index:0}
@media (max-width:480px){.tabs__btn{padding:8px 10px;font-size:11px}}

.pane{padding:0}
.pane[hidden]{display:none}
.pane{animation:panein .4s var(--ease-out) both}
@keyframes panein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Dagbord */
.board{background:var(--surface)}
.board__hd{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:15px 18px;background:var(--surface-2);border-bottom:1px solid var(--hair)}
.board__title{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--forest)}
.board__date{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.board__pill{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;
  background:var(--cream-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:11px;font-weight:500;color:var(--forest);white-space:nowrap;
}
.board__rows{position:relative;padding:4px 0}
.board__now{position:absolute;left:0;right:0;top:52%;display:flex;align-items:center;pointer-events:none;animation:nowline 9s var(--ease) infinite alternate}
.board__now i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--danger) 12%,var(--danger))}
.board__now b{
  flex:none;padding:2px 7px;border-radius:0 4px 4px 0;background:var(--danger);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#fff;
}
@keyframes nowline{from{top:44%}to{top:60%}}

.row{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--hair);transition:background-color .2s var(--ease)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--paper)}
.row__time{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.row__boat{display:flex;align-items:center;gap:10px;min-width:0}
.row__boat span{font-size:15px;font-weight:500;color:var(--forest);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tick{flex:none;width:4px;height:22px;border-radius:99px}
.tick--a{background:var(--boat-a)}.tick--b{background:var(--boat-b)}.tick--c{background:var(--boat-c)}.tick--w{background:var(--boat-w)}

.chip{padding:4px 11px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.chip--ok{background:var(--success-soft);color:var(--success-ink)}
.chip--water{background:var(--info-soft);color:var(--info-ink)}
.chip--back{background:var(--warning-soft);color:var(--warning-ink)}
.chip--late{background:var(--danger-soft);color:var(--danger-ink)}

.board__ft{display:grid;grid-template-columns:repeat(3,1fr);background:var(--forest)}
.kpi{position:relative;padding:15px 16px;border-right:1px solid rgba(239,229,204,.12)}
.kpi:last-child{border-right:0}
.kpi__lbl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark-muted)}
.kpi__val{display:block;margin-top:5px;font-family:var(--disp);font-size:26px;font-weight:600;line-height:1;color:var(--cream);font-variant-numeric:tabular-nums}
.kpi--accent::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:2px;border-radius:99px;background:var(--gold)}

/* Waloperatie */
.dock{padding:20px 18px 18px;background:var(--surface)}
.dock__hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.dock__title{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--forest)}
.dock__sub{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.dock__card{display:flex;flex-direction:column;gap:7px;padding:15px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--hair)}
.dock__boat{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;color:var(--forest)}
.dock__meta{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.dock__meta svg{color:var(--gold-deep)}
.dock__checks{display:grid;gap:9px;margin:15px 0}
.dock__checks li{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--text)}
.dock__checks .box{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--success-soft);color:var(--success-ink)}
.dock__actions{display:grid;gap:9px}
.dock__primary,.dock__secondary{
  display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:var(--r-sm);
  font-size:15px;font-weight:600;
}
.dock__primary{background:var(--forest);color:var(--cream)}
.dock__secondary{background:transparent;color:var(--forest);border:1px solid var(--line)}
.dock__note{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dock__note svg{color:var(--gold-deep)}

/* Omzet */
.rev{padding:20px 18px 18px;background:var(--surface)}
.rev__hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.rev__title{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--forest)}
.rev__period{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.rev__chart{display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:10px;height:132px;padding-bottom:2px;border-bottom:1px solid var(--hair)}
.rev__chart .bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.rev__chart .bar i{
  display:block;width:100%;max-width:34px;border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,#28413B,var(--forest));height:var(--bh,40%);
  transform-origin:bottom;transform:scaleY(.05);transition:transform .9s var(--ease-out)
}
.is-in .rev__chart .bar i,.rev__chart.is-shown .bar i{transform:scaleY(1)}
.rev__chart .bar b{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.rev__chart .bar:nth-child(5) i{background:linear-gradient(180deg,var(--gold-light),var(--gold))}
.bar--b1{--bh:38%}.bar--b2{--bh:52%}.bar--b3{--bh:71%}.bar--b4{--bh:88%}.bar--b5{--bh:100%}.bar--b6{--bh:46%}
.rev__chart .bar i{transition-delay:calc(var(--d,0) * 1ms)}
.bar--b2 i{--d:60}.bar--b3 i{--d:120}.bar--b4 i{--d:180}.bar--b5 i{--d:240}.bar--b6 i{--d:300}

.rev__channels{display:grid;gap:11px;margin:18px 0 0}
.rev__channels li{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--text)}
.rev__channels b{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--forest);font-variant-numeric:tabular-nums}
.dotc{flex:none;width:9px;height:9px;border-radius:50%}
.dotc--1{background:var(--forest)}.dotc--2{background:var(--boat-b)}.dotc--3{background:var(--gold)}
.rev__note{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.rev__note svg{color:var(--gold-deep)}

/* ======================================================= Ticker ========= */
.ticker{
  overflow:hidden;padding:15px 0;background:var(--abyss);
  border-block:1px solid rgba(239,229,204,.08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.ticker__row{display:flex;align-items:center;gap:18px;width:max-content;animation:marquee 46s linear infinite}
.ticker__row:hover{animation-play-state:paused}
.ticker__row span{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(239,229,204,.74);white-space:nowrap}
.ticker__row i{color:var(--gold);font-style:normal}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ====================================================== Secties ========= */
.sec{position:relative;padding:var(--sec) 0}
.sec--paper{background:var(--paper)}
/* Wit is vanaf hier alleen nog kaartkleur. Als sectievlak gaf het witte kaarten
   op een wit vlak: zes kaarten die samen als een leeg vlak lazen. */
.sec--surface{background:var(--cream-2)}
.sec--cream{background:var(--cream-2)}
.sec--tight{padding-block:clamp(52px,6vw,86px)}
.sec--dark{color:var(--cream);overflow:hidden;background:linear-gradient(172deg,var(--forest),var(--abyss) 82%)}
.sec--dark h2,.sec--dark h3{color:var(--cream)}
.sec__aurora{position:absolute;top:-24%;right:-12%;width:60vw;height:60vw;border-radius:50%;filter:blur(80px);opacity:.42;background:radial-gradient(circle,rgba(175,141,51,.4),transparent 62%);pointer-events:none}
.sec__hd{margin-bottom:clamp(36px,4.5vw,60px)}

/* ====================================================== Frictie ========= */
.friction{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(24px,2.8vw,32px)}
@media (max-width:820px){.friction{grid-template-columns:1fr;gap:26px}}
.fr{position:relative;padding:30px 28px 26px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden}
.fr__num{position:absolute;top:-14px;right:8px;font-family:var(--disp);font-weight:600;font-size:96px;line-height:1;color:rgba(29,45,42,.07);pointer-events:none}
.fr:first-child{padding:34px 30px 30px}
.fr:first-child .fr__num{font-size:150px;top:-26px}
.fr:nth-child(1) .fr__num::before{content:"01"}
.fr:nth-child(2) .fr__num::before{content:"02"}
.fr:nth-child(3) .fr__num::before{content:"03"}
.fr h3{margin-bottom:10px}
.fr p{font-size:15px;line-height:1.64;color:var(--text)}
.fr__cost{margin-top:16px;padding-top:13px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--warning-ink)}

/* Het uitroepteken van de pagina: volle breedte, groot, met gouden haarlijn en
   het merkteken. Was een strip van 79px met 23px type. */
.turn{
  position:relative;display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(40px,5vw,72px);margin-inline:calc(50% - 50vw);width:100vw;
  padding:clamp(40px,5vw,68px) max(var(--gut),calc(50vw - var(--maxw)/2 + var(--gut)));
  background:linear-gradient(150deg,var(--forest),var(--deep) 70%,var(--abyss));color:var(--cream);
  border-top:1px solid rgba(202,173,117,.45);border-bottom:1px solid rgba(202,173,117,.2);
  font-family:var(--disp);font-weight:500;font-size:clamp(24px,3.4vw,42px);line-height:1.12;letter-spacing:-.03em;
}
.turn .mark{flex:none;opacity:.95}
.turn svg{flex:none;color:var(--gold-light)}

/* ================================================ Bento (product) ====== */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bento{grid-template-columns:1fr}}

.cell{
  position:relative;display:flex;flex-direction:column;padding:30px 28px 32px;
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
  overflow:hidden;
}
.cell::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);background:radial-gradient(70% 60% at 80% 0%,rgba(175,141,51,.09),transparent 70%)}
.cell:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#CDC3A9}
.cell:hover::after{opacity:1}
.cell--lead{grid-column:span 2;grid-row:span 2;justify-content:space-between;
  background:linear-gradient(180deg,#FFFDF7,var(--surface-2));box-shadow:var(--sh-2)}
.cell--lead::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light) 60%,transparent)}
@media (max-width:640px){.cell--lead{grid-column:span 1;grid-row:auto}}
.cell__label{
  align-self:flex-start;margin-bottom:16px;padding:4px 10px;border-radius:99px;
  background:var(--cream-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--forest);
}
.cell__ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:16px;border-radius:13px;background:var(--forest);color:var(--cream)}
.cell--lead .cell__ico{background:var(--forest)}
.cell h3{margin-bottom:9px}
.cell p{font-size:15px;line-height:1.66;color:var(--text)}
.cell--lead h3{font-family:var(--disp);font-weight:600;font-size:23px;letter-spacing:-.02em}
.cell--lead p{font-size:15px;max-width:46ch}

/* Beschikbaarheidsraster in de grote cel */
/* margin-top:auto slokte alle restruimte in een gat van 147px op; nu een
   verdeelde afstand met scheidingslijn, en de cel is echt gevuld. */
.avail{margin-top:clamp(20px,2.6vw,30px);padding-top:24px;border-top:1px solid var(--hair)}
.avail__cap{display:block;margin-bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.avail__grid{display:grid;grid-template-columns:minmax(72px,auto) repeat(14,minmax(0,1fr));gap:4px;align-items:center}
.avail__day{font-family:var(--mono);font-size:9px;letter-spacing:0;text-transform:uppercase;color:var(--faint);text-align:center;overflow:hidden}
.avail__type{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--forest);white-space:nowrap}
.avail__type .tick{height:14px;width:3px}
.avail__cell{height:17px;border-radius:4px;border:1px solid transparent}
.avail__cell--free{background:var(--success-soft);border-color:#CFE3D4}
.avail__cell--part{background:var(--warning-soft);border-color:#EBD6B4}
.avail__cell--full{background:var(--surface-2);border-color:var(--line)}
@media (max-width:520px){
  .avail__grid{grid-template-columns:minmax(58px,auto) repeat(14,minmax(0,1fr));gap:2px}
  .avail__type{font-size:10px}.avail__type .tick{width:2px}
  .avail__cell{height:13px;border-radius:3px}
  .avail__day{font-size:8px}
}

/* ============================================ Verhaal (verhuurdag) ===== */
.story__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(34px,5vw,74px);align-items:start;margin-top:clamp(28px,4vw,52px)}
@media (max-width:960px){.story__in{grid-template-columns:1fr;gap:0}}
/* De kolom houdt alleen het beeld en de rail vast (~730px), dus hij past onder
   de kop en blijft staan terwijl de stappen langsschuiven. */
.story__aside{position:sticky;top:104px}
/* Beeldpodium. Vijf echte productweergaven in dezelfde gridcel: de hoogte is
   altijd die van de hoogste weergave, dus wisselen geeft geen layout-sprong en
   er is geen gemeten pixelhoogte die in het Duits alsnog knelt. Wisselen doet
   visibility, niet display, want display:none haalt de cel leeg. */
.story__stage{margin-top:0}
.stage__frame{display:grid;isolation:isolate}
.stage__view{
  grid-area:1/1;min-width:0;display:grid;align-content:start;
  border-radius:var(--r-md);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-2);
  visibility:hidden;opacity:0;transform:translateY(7px);pointer-events:none;
  transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),visibility 0s linear .28s;
}
.stage__view.is-on{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s;z-index:1}
.stage__cap{display:flex;flex-direction:column;gap:2px;padding:14px 17px 2px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.stage__cap b{font-family:var(--body);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--forest)}
.stage__view .lane,.stage__view .dock,.stage__view .rev{padding-top:12px}
.stage__view .avail{padding:0 17px 16px}
/* Het bijschrift benoemt de weergave al; de eigen kop van de wal- en
   beschikbaarheidsweergave zei daar hetzelfde nog eens. */
.stage__view .dock__hd,.stage__view .avail__cap{display:none}
/* De hoogste weergave bepaalt de framehoogte. Zonder deze regel stond een korte
   weergave bovenaan met een leeg vlak eronder. */
.stage__view{grid-template-rows:auto 1fr}
.stage__view>:last-child{align-self:center}
/* De hoogste weergave (het walscherm) bepaalde 509px framehoogte, waardoor de
   korte weergave in veel lucht hing. Het walscherm iets compacter en het raster
   iets ruimer brengt die twee naar elkaar toe. */
.stage__view .dock__checks{gap:7px;margin:12px 0}
.stage__view .dock__card{gap:5px;padding:12px}
.stage__view .dock__actions{gap:7px}
.stage__view .avail__cell{height:26px;border-radius:5px}
.stage__view .avail__grid{gap:5px}
.stage__note{display:flex;align-items:center;gap:8px;margin-top:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.stage__note svg{flex:none;color:var(--gold-deep)}

/* De rail is nu echte navigatie: vijf ankers naar de stapkaarten, dus ook met
   het toetsenbord en zonder JS bruikbaar. */
.stage__rail{margin-top:18px}
.stage__rail ol{display:grid;gap:2px}
.stage__jump{display:flex;align-items:center;gap:13px;padding:7px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);text-decoration:none;transition:color .3s var(--ease)}
.stage__jump i{position:relative;flex:none;width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--paper);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease)}
.stage__rail li:not(:last-child) .stage__jump i::after{content:"";position:absolute;left:50%;top:100%;
  width:1.5px;height:22px;margin-left:-.75px;background:var(--line)}
.stage__jump:hover{color:var(--forest)}
.stage__jump.is-on{color:var(--forest)}
.stage__jump.is-on i{border-color:var(--gold);background:var(--gold);transform:scale(1.25)}

/* Twee dagstanden van dezelfde tijdlijn. De nu-lijn staat via een custom
   property in een class: CSP-veilig, en de hero blijft ongemoeid. */
.stage .lane__row{grid-template-columns:82px 1fr}
.stage .lane__scale{margin-left:82px}
.lane--plan{--nowpos:.12}
.lane--pm{--nowpos:.72}
.stage .lane__now{left:calc(82px + (100% - 82px) * var(--nowpos,.46))}
.lane__row--type .lane__name{color:var(--muted)}
.lane__bar--ghost{left:14%;width:44%;background:transparent;border:1px dashed #BBAE86;color:var(--muted)}
.tick--d{background:transparent;border:1.5px dashed #BBAE86}
.avail__cell--pick{box-shadow:0 0 0 2px var(--gold);border-color:transparent}

/* Ruimte tussen de stappen, zodat elke stap zijn eigen moment in het midden van
   het venster krijgt. Zonder die ruimte pasten alle vijf in één venster en
   wisselde het beeld nauwelijks tijdens het scrollen. */
/* De onderruimte is niet cosmetisch: zonder die ruimte loopt de sticky kolom op
   vóór stap 5 in het midden staat, en dan schuift het beeld weg terwijl die stap
   nog gelezen wordt. Gemeten: nodig is ongeveer een halve vensterhoogte. */
.story__steps{display:grid;gap:clamp(130px,28vh,300px);padding-block:2vh clamp(200px,34vh,400px);counter-reset:s}
.stp{scroll-margin-block:36vh}
.stp{
  display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0 20px 24px;
  border-radius:0;background:transparent;border:0;border-left:1px solid var(--hair);
  box-shadow:none;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.stp p{color:var(--muted)}
.stp.is-on{background:var(--surface);border-left-color:var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;box-shadow:var(--sh-1);padding-right:24px}
.stp.is-on p{color:var(--text)}
.stp__no{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--gold-deep);padding-top:3px}
.stp.is-on .stp__no{color:var(--forest)}
.stp h3{margin-bottom:8px}
.stp p{font-size:15px;line-height:1.66;color:var(--text)}
@media (max-width:520px){.stp{padding:16px 0 16px 18px;gap:12px}.stp.is-on{padding-right:18px}}

/* Onder 960px bestaat de tweekolomsopzet niet meer. display:contents laat de
   drie kinderen van de aside meedoen in het ene raster, zodat het podium tussen
   kop en stappen kan staan en zelf een plakkende strip wordt. Zelfde markup,
   nul extra bytes. */
@media (max-width:960px){
  .story__aside{top:66px;z-index:2;
    margin-inline:calc(var(--gut) * -1);padding:10px var(--gut) 12px;background:var(--paper);
    border-bottom:1px solid var(--hair)}
  .story__steps{padding-block:16px 10vh;gap:clamp(90px,22vh,220px)}
  .stage__frame{max-height:46vh}
  .stage__view{overflow:hidden}
  .stage__rail{margin-top:12px}
  .stage__rail ol{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none}
  .stage__rail ol::-webkit-scrollbar{display:none}
  .stage__jump{padding:2px 0;white-space:nowrap}
  .stage__rail li:not(:last-child) .stage__jump i::after{display:none}
  .stage__note{margin-top:8px}
  .stp{scroll-margin-block:calc(46vh + 96px) 0}
}
@media (max-width:600px){
  .stage__cap span,.stage__view .avail__legend,.stage__view .rev__channels{display:none}
  .stage__frame{max-height:40vh}
}

/* ========================================== Instroom (illustratie) ===== */
/* Vijf bronnen komen samen in één dagbeeld. De labels zijn HTML, niet SVG-tekst:
   zo blijven i18n en afbreken werken, ook bij de langere Duitse woorden. */
.flow{margin:16px 0 0}
.flow__cap{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.flow__in{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,.86fr);
  gap:0;align-items:center}
.flow__src{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.flow__src li{padding:6px 9px;border:1px solid var(--hair);border-radius:7px;background:var(--surface);
  font-size:11.5px;line-height:1.25;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flow__lines{width:52px;height:100%;min-height:112px;display:block}
.flow__out{display:grid;gap:3px;padding:10px 11px;border-radius:9px;
  background:var(--forest);color:var(--cream);box-shadow:var(--sh-1)}
.flow__outlbl{font-size:12.5px;font-weight:600;line-height:1.25}
.flow__outnote{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--on-dark-muted)}
@media (max-width:400px){
  .flow__in{grid-template-columns:minmax(0,1fr) 34px minmax(0,.9fr)}
  .flow__lines{width:34px}
  .flow__src li{font-size:11px;padding:5px 8px}
}

/* ======================================= Typeblad (boottypes) ========== */
/* Vier boottypes als scheepstekening: zijaanzicht op de constructiewaterlijn,
   maatlijn eronder, capaciteit en dagdelen als specregels. De vorige versie was
   vier gevulde trapezia met een stokmast; die las als geknipt papier, en de
   A-boot was bovendien een massief goud vlak terwijl goud accent hoort te zijn.
   Nu zit de typekleur alleen in de zeeglijn (deklijn) en de letter-tag. */
.typeplan{grid-column:1 / -1;margin:clamp(22px,3vw,40px) 0 0}
.typeplan__hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:clamp(12px,1.4vw,18px);
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark-muted)}
.typeplan__scale{color:var(--gold-light)}
.typeplan__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.3vw,18px);
  list-style:none;margin:0;padding:0}
@media (max-width:1140px){.typeplan__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.typeplan__grid{grid-template-columns:1fr}}

.tplate{position:relative;margin:0;padding:clamp(12px,1.4vw,16px);
  border:1px solid rgba(239,229,204,.16);border-radius:var(--r-md);
  background-color:rgba(16,27,24,.34);
  background-image:repeating-linear-gradient(to right,rgba(239,229,204,.05) 0 1px,transparent 1px 100%),
                   repeating-linear-gradient(to bottom,rgba(239,229,204,.05) 0 1px,transparent 1px 100%);
  background-size:14px 14px;background-position:center}
/* Hoekmerken, zoals op een tekenblad. */
.tplate::before,.tplate::after{content:"";position:absolute;width:10px;height:10px;
  border:1px solid rgba(239,229,204,.26)}
.tplate::before{top:7px;left:7px;border-right:0;border-bottom:0}
.tplate::after{bottom:7px;right:7px;border-left:0;border-top:0}

/* SVG-tekst schaalt mee met de viewBox, dus op een brede kaart werden CWL en
   de maat onevenredig groot. De tekening krijgt daarom een maximum. */
.tplate__dw{display:block;width:100%;max-width:380px;height:auto;margin-inline:auto}
/* non-scaling-stroke houdt de lijndikte gelijk op elke kaartbreedte; zonder dat
   worden de lijnen op een smalle kolom haarfijn en op een brede kolom lomp. */
.tplate__dw path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.tplate__under{fill:var(--cream);fill-opacity:.07;stroke:none}
.tplate__hull{stroke:var(--cream);stroke-width:1.3;opacity:.85}
.tplate__det{stroke:var(--cream);stroke-width:.9;opacity:.4}
.tplate__house{stroke:var(--cream);stroke-width:1.1;opacity:.62}
.tplate__dim{stroke:var(--cream);stroke-width:.9;opacity:.32}
.tplate__wl{stroke:var(--cream);stroke-width:.9;opacity:.24;stroke-dasharray:5 4}
.tplate__sheer{stroke-width:2.3}
.tplate__num{font-family:var(--mono);font-size:9px;fill:var(--cream);opacity:.6}

/* Typekleur op donker: lichtere variant van dezelfde tint, want de basiskleuren
   halen op abyss geen 3:1. A goud, B groen, C roest, W leiblauw blijven. */
.tplate--a .tplate__sheer{stroke:var(--gold-light)}
.tplate--b .tplate__sheer{stroke:#7FB394}
.tplate--c .tplate__sheer{stroke:#E09553}
.tplate--w .tplate__sheer{stroke:#8FB3C4}
.tplate--a .tplate__tag{border-left-color:var(--gold-light)}
.tplate--b .tplate__tag{border-left-color:#7FB394}
.tplate--c .tplate__tag{border-left-color:#E09553}
.tplate--w .tplate__tag{border-left-color:#8FB3C4}

.tplate__cap{margin-top:clamp(10px,1.2vw,14px);padding-top:clamp(9px,1.1vw,12px);
  border-top:1px solid rgba(239,229,204,.14)}
.tplate__name{display:flex;align-items:center;gap:9px;margin:0;
  font-family:var(--disp);font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--cream)}
.tplate__tag{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;
  border:1px solid rgba(239,229,204,.28);border-left-width:3px;
  font-family:var(--mono);font-size:10px;color:var(--on-dark-muted)}
.tplate__spec{margin:11px 0 0;display:grid;gap:5px}
.tplate__spec>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;font-family:var(--mono)}
.tplate__spec dt{margin:0;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--on-dark-muted)}
.tplate__spec dd{margin:0 0 0 auto;font-size:10.5px;color:var(--on-dark);text-align:right}

.typeplan__ft{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:clamp(12px,1.4vw,18px);
  font-size:13.5px;line-height:1.6;color:var(--on-dark-muted)}
/* Eerlijkheidsgrendel: de maten en capaciteiten zijn niet bij de klant nagevraagd. */
.typeplan__src{flex:none;padding:3px 9px;border-radius:99px;border:1px solid rgba(239,229,204,.2);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted)}
@media (max-width:560px){.typeplan__ft{font-size:13px}}

@media print{
  .tplate{background-image:none;background-color:#fff;border-color:#D2C9AE}
  .tplate__hull,.tplate__det,.tplate__house,.tplate__dim,.tplate__wl,.tplate__num{stroke:#1D2D2A;fill:none}
  .tplate__num{fill:#1D2D2A;stroke:none}
  .tplate__under{fill:#1D2D2A;fill-opacity:.06}
  .tplate__name,.tplate__spec dd{color:#1D2D2A}
}

/* ==================================================== Waterlijn ======== */
/* De divider markeert nu echt een overgang: paper boven de lijn, cream eronder,
   het merkteken vaart op de golf. Was een hairline van ratio 1,34 tussen twee
   identieke vlakken. */
.waterline{position:relative;height:clamp(104px,11vw,150px);line-height:0;
  background:linear-gradient(180deg,var(--paper) 0 46%,var(--cream) 46% 100%)}
.waterline svg{display:block;width:100%;height:100%}
.waterline__gold{animation:wave 16s ease-in-out infinite alternate}
.waterline .mark{position:absolute;left:clamp(20px,16vw,240px);top:32%;z-index:2}
@keyframes wave{to{transform:translateX(-76px)}}

/* ================================================ Split + checks ======= */
.split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(34px,5vw,72px);align-items:start}
@media (max-width:960px){.split{grid-template-columns:1fr;gap:34px}}
.checks{display:grid;gap:14px}
.checks li{display:flex;gap:13px;font-size:15px;line-height:1.6}
.checks svg{flex:none;margin-top:4px;color:var(--gold)}
.checks strong{color:var(--forest);font-weight:600}
.checks--dark li{color:var(--on-dark)}
.checks--dark strong{color:var(--cream)}
.checks--dark svg{color:var(--gold-light)}
.checks--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 34px}
@media (max-width:760px){.checks--two{grid-template-columns:1fr}}

.note{margin-top:30px;padding:22px 24px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--hair)}
.sec--surface .note{background:var(--paper)}
.note h3{margin-bottom:9px}
.note p{font-size:15px;color:var(--muted)}

/* ============================================= Donkere kaarten ========= */
.grid{display:grid;gap:clamp(16px,2vw,22px)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Ook op donker een anker per sectie. */
.grid--3>.dcard:first-child{grid-column:span 2}
.grid--3>.dcard:first-child h3{font-family:var(--disp);font-size:21px;letter-spacing:-.02em}
.grid--3>.dcard:first-child p{font-size:17px;max-width:52ch}
@media (max-width:660px){.grid--3>.dcard:first-child{grid-column:auto}}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:960px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:660px){.grid--3,.grid--2{grid-template-columns:1fr}}

.dcard{
  position:relative;padding:30px 28px;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(239,229,204,.08),rgba(239,229,204,.03));
  border:1px solid rgba(239,229,204,.2);box-shadow:inset 0 1px 0 rgba(239,229,204,.1);
  transition:transform .28s var(--ease),border-color .28s var(--ease),background-color .28s var(--ease);
}
.dcard:hover{transform:translateY(-3px);border-color:rgba(202,173,117,.42)}
.dcard__ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:18px;border-radius:13px;background:rgba(202,173,117,.14);color:var(--gold-light)}
.dcard h3{margin-bottom:9px;color:var(--cream)}
.dcard p{font-size:15px;line-height:1.66;color:var(--on-dark-muted)}

/* ================================================== Rolmatrix ========== */
.matrix{border-radius:var(--r-md);border:1px solid rgba(239,229,204,.14);overflow:hidden;background:rgba(16,27,24,.34)}
.matrix__title{padding:18px 22px;margin:0;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-light);border-bottom:1px solid rgba(239,229,204,.12)}
.matrix table{font-size:15px}
.matrix thead th{
  padding:13px 16px;text-align:center;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted);
  border-bottom:1px solid rgba(239,229,204,.12);
}
.matrix thead th:first-child{width:44%;text-align:left}
.matrix tbody th{padding:14px 16px;text-align:left;font-weight:500;color:var(--on-dark);border-bottom:1px solid rgba(239,229,204,.08)}
.matrix tbody td{padding:14px 16px;text-align:center;border-bottom:1px solid rgba(239,229,204,.08)}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}
.matrix tbody tr:hover th,.matrix tbody tr:hover td{background:rgba(239,229,204,.04)}
.matrix .yes{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(62,123,84,.24);color:#A9D6B6}
.matrix .no{color:rgba(239,229,204,.28)}
@media (max-width:620px){
  .matrix table{font-size:13px}
  .matrix thead th,.matrix tbody th,.matrix tbody td{padding:11px 9px}
  .matrix thead th:first-child{width:40%}
}

/* ======================================================= Citaat ======== */
.quote{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3vw,40px);align-items:start}
@media (max-width:680px){.quote{grid-template-columns:1fr}}
.quote__mark{opacity:.9}
.quote blockquote{
  margin:0;font-family:var(--disp);font-weight:400;font-style:italic;
  font-size:clamp(19px,2.3vw,29px);line-height:1.38;letter-spacing:-.015em;color:var(--forest);max-width:44ch;
}
.quote__by{display:flex;align-items:center;gap:11px;margin-top:22px}
.quote__by b{font-size:15px;font-weight:600;color:var(--forest)}
.quote__by span{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.quote__by::before{content:"";width:26px;height:1px;background:var(--gold)}

/* ======================================================= Stappen ======= */
.steps{counter-reset:step;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(18px,2.4vw,28px)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:34px 28px 30px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.step:first-child{background:linear-gradient(160deg,var(--forest),var(--deep));border-color:transparent;box-shadow:var(--sh-2)}
.step:first-child h3{color:var(--cream);font-family:var(--disp);font-size:21px;letter-spacing:-.02em}
.step:first-child p{color:var(--on-dark-muted)}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:-13px;left:22px;padding:3px 9px;border-radius:99px;background:var(--forest);
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--cream);
}
.step h3{margin-bottom:9px}
.step p{font-size:15px;color:var(--muted)}
/* De rail loopt achter de drie iconen door, zodat de stappen als één spoor
   lezen. Haarlijn, geen gouden vlak. */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:28px;right:28px;top:65px;height:1px;
  background:var(--hair);z-index:0}
.step{z-index:1}
.step__ico{position:relative;display:grid;place-items:center;width:42px;height:42px;
  margin-bottom:16px;border-radius:12px;background:var(--paper);border:1px solid var(--line);
  color:var(--forest)}
.step:first-child .step__ico{background:rgba(239,229,204,.1);border-color:rgba(239,229,204,.22);color:var(--gold-light)}
@media (max-width:820px){.steps::before{display:none}}

/* ====================================================== Aanvraag ======= */
.apply{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(34px,4.5vw,68px);align-items:start}
@media (max-width:1000px){.apply{grid-template-columns:1fr}}
.chip-scarce{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;padding:6px 14px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--forest);
}
.apply__aside .checks{margin-top:26px}

.form{
  position:relative;padding:clamp(24px,3vw,38px);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-3);
}
.form::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(90deg,var(--gold),var(--gold-light) 55%,transparent)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
@media (max-width:640px){.form__grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--wide{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--forest)}
.field .req{color:var(--gold-deep)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-xs);
  background:var(--surface);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.4;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease);
}
.field textarea{min-height:112px;resize:vertical}
.field select{
  appearance:none;padding-right:38px;background-repeat:no-repeat;background-position:right 14px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235D6B63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C9BE9E}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(202,173,117,.3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:flex;gap:12px;align-items:flex-start;grid-column:1/-1}
.consent input{width:19px;height:19px;margin:2px 0 0;flex:none;accent-color:var(--forest)}
.consent label{font-size:13px;font-weight:400;line-height:1.55;color:var(--muted)}
.form__ft{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.form__hint{font-size:12px;color:var(--faint)}
.form__msg{display:none;margin-top:20px;padding:15px 17px;border-radius:var(--r-xs);font-size:14px;line-height:1.55}
.form__msg.is-ok{display:block;background:var(--success-soft);color:var(--success-ink);border:1px solid #C9DFCE}
.form__msg.is-err{display:block;background:var(--danger-soft);color:var(--danger-ink);border:1px solid #E6C8C2}
.form.is-sent .form__body{display:none}

/* ========================================================== FAQ ======== */
.faq{max-width:900px}
.faq details{border-bottom:1px solid var(--line);transition:background-color .25s var(--ease)}
.faq details[open]{background:linear-gradient(180deg,rgba(246,242,230,.7),transparent)}
.faq summary{
  display:flex;align-items:flex-start;gap:16px;padding:22px 2px;cursor:pointer;list-style:none;
  font-family:var(--body);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--forest);
}
.faq summary::-webkit-details-marker{display:none}
.faq__no{flex:none;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--gold-deep);padding-top:5px}
.faq summary::after{
  content:"";flex:none;width:12px;height:12px;margin:6px 4px 0 auto;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:9px}
.faq p{padding:0 44px 24px 44px;max-width:72ch;font-size:15px;line-height:1.7;color:var(--muted)}
@media (max-width:560px){.faq p{padding:0 0 22px 34px}.faq summary{font-size:15px;gap:12px}}

/* ======================================================== Slot ========= */
.final{text-align:center}
.final__mark{margin:0 auto clamp(22px,3vw,34px)}
.final h2{color:var(--cream);font-size:clamp(28px,4vw,52px);max-width:22ch;margin:0 auto;letter-spacing:-.03em}
.final .lead{margin:20px auto 0;max-width:56ch}
.final__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:36px}

/* ======================================================= Footer ======== */
.ftr{background:var(--abyss);color:var(--on-dark-muted);padding:clamp(48px,6vw,76px) 0 34px}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:38px;padding-bottom:38px;border-bottom:1px solid rgba(239,229,204,.12)}
@media (max-width:900px){.ftr__top{grid-template-columns:1fr 1fr;gap:30px}}
@media (max-width:560px){.ftr__top{grid-template-columns:1fr}}
.ftr__brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ftr__name{font-family:var(--disp);font-size:22px;color:var(--cream)}
.ftr p{font-size:14px;line-height:1.65;max-width:40ch}
.ftr__mail{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--gold-light)}
.ftr__mail:hover{color:var(--cream)}
.ftr h4{margin-bottom:16px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light)}
.ftr li{margin-bottom:10px}
.ftr a{color:var(--on-dark);font-size:14px}
.ftr a:hover{color:var(--cream)}
.ftr__bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:24px}
.ftr__legal{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:rgba(239,229,204,.62)}

/* ============================================ Inhoudspagina's ========== */
.doc{padding:clamp(48px,6vw,90px) 0 clamp(60px,7vw,100px);background:var(--paper)}
.doc__in{max-width:74ch}
.doc h1{font-weight:500;font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.03em}
.doc h2{font-size:22px;margin:44px 0 12px}
.doc p,.doc li{font-size:15px;line-height:1.74;color:var(--muted)}
.doc p+p{margin-top:14px}
.doc ul{margin:14px 0 0;display:grid;gap:10px}
.doc ul li{position:relative;padding-left:20px}
.doc ul li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.doc__meta{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.doc__back{display:inline-flex;align-items:center;gap:9px;margin-top:48px;font-size:15px;font-weight:600}

/* =========================================================== 404 ======= */
.err{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:72px var(--gut);background:var(--paper)}
.err__code{font-family:var(--disp);font-weight:600;font-size:clamp(66px,10vw,104px);line-height:1;color:var(--forest);letter-spacing:-.04em}
.err__accent{width:46px;height:3px;border-radius:99px;background:var(--gold);margin:24px 0}
.err h1{font-size:clamp(21px,2.6vw,27px)}
.err p{margin:14px 0 30px;max-width:48ch;color:var(--muted)}
.err .final__cta{margin-top:0}

/* ============================================== Scroll-reveal ========== */
.js-reveal .rise{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js-reveal .rise.is-in{opacity:1;transform:none}
/* Stagger tussen de kinderen van een groep, niet alleen tussen containers:
   anders doet elke sectie precies dezelfde ene beweging. */
.js-reveal .rise-group>.rise:nth-child(1){transition-delay:0s}
.js-reveal .rise-group>.rise:nth-child(2){transition-delay:.07s}
.js-reveal .rise-group>.rise:nth-child(3){transition-delay:.14s}
.js-reveal .rise-group>.rise:nth-child(4){transition-delay:.21s}
.js-reveal .rise-group>.rise:nth-child(5){transition-delay:.28s}
.js-reveal .rise-group>.rise:nth-child(6){transition-delay:.35s}
.js-reveal .rise-group>.rise:nth-child(7){transition-delay:.42s}
.js-reveal .rise-group>.rise:nth-child(n+8){transition-delay:.49s}

@media (prefers-reduced-motion:reduce){
  .js-reveal .rise{opacity:1;transform:none;transition:none}
  .js-reveal .hline .w>span{transform:none;opacity:1;animation:none}
  .mark--intro .hull-top,.mark--intro .hull-bot,
  .hero__aurora,.sec__aurora,.ticker__row,.waterline__gold,.board__now,.pulse::after,
  .hero__scroll i{animation:none!important}
  .rev__chart .bar i{transform:scaleY(1);transition:none}
  .pane{animation:none}
  .stage__view{transition:none}
  .stage .lane__bar,.stage .avail__cell{animation:none}
  .btn:hover{transform:none}
}

@media print{
  .hdr,.notice,.ticker,.hero__cta,.form,.final__cta,.grain,.hero__scroll{display:none}
  body{background:#fff}
  .hero,.sec--dark{color:#1D2D2A;background:#fff}
}

/* ==========================================================================
   TOEVOEGINGEN — beeld, scene, showcase en tijdlijn
   Deze blokken zijn er gekomen na de eerste reviewronde: de pagina had nul
   beeld, geen volle-breedte momenten en geen klant-showcase.
   ========================================================================== */

/* ------------------------------------------------- Hero: merk en scene --- */
.hero__mark{margin-bottom:22px}
@media (max-width:700px){.hero__mark{width:74px;height:56px;margin-bottom:16px}}

/* Fotoslot in de hero. Zolang er geen foto is, staat de SVG-scene er; zodra er
   een foto is, valt die hier in en blijft de kop leesbaar door de veil. */
/* De foto staat als band onderaan, waar ook de getekende scene stond: zo houdt
   een 21:9-beeld zijn compositie in een hero die bijna vierkant is. */
.hero__photo{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:min(46%,470px);
  object-fit:cover;object-position:center 62%;opacity:.85;filter:saturate(.78) contrast(1.02);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 100%);
}
/* De video ligt exact over de fotoband en verschijnt pas als hij speelt, zodat je
   nooit een zwart vlak of een sprong ziet. */
.hero__clip{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:min(46%,470px);
  object-fit:cover;object-position:center 62%;opacity:0;
  filter:saturate(.78) contrast(1.02);transition:opacity 1.2s var(--ease);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 100%);
}
.hero__clip.is-playing{opacity:.85}
@media (prefers-reduced-motion:reduce){.hero__clip{display:none}}

/* Sluier over de hele hero: donker waar de kop staat, opener naar rechts, plus
   een verzachting onderaan zodat de band niet als een plakplaatje leest. */
.hero__veil{position:absolute;inset:0;
  background:
    linear-gradient(112deg,rgba(16,27,24,.92) 0,rgba(24,40,37,.7) 44%,rgba(24,40,37,.24) 100%),
    linear-gradient(180deg,rgba(16,27,24,.5) 0,transparent 22%,transparent 62%,rgba(16,27,24,.42) 100%)}

/* De scene: gestapelde lagen onderaan de hero. Verre lagen zachter
   (dieptescherpte), voorgrond scherp en donker. */
.hero__scene{position:absolute;left:0;right:0;bottom:0;height:min(42%,430px);pointer-events:none;z-index:0}
.hero__scene svg{position:absolute;inset:0;width:100%;height:100%}
.hs-far{filter:blur(2.6px);transform:translateY(calc(var(--p,0) * 14px))}
.hs-mid{filter:blur(.8px);transform:translateY(calc(var(--p,0) * -10px))}
.hs-near{transform:translateY(calc(var(--p,0) * -26px))}
.hs-boat-a{animation:sail-a 58s linear infinite alternate}
.hs-boat-b{animation:sail-b 74s linear infinite alternate}
.hs-shimmer{animation:shim 13s ease-in-out infinite alternate}
.hs-sunpath{animation:glint 7s ease-in-out infinite}
@keyframes sail-a{to{transform:translateX(170px)}}
@keyframes sail-b{to{transform:translateX(-190px)}}
@keyframes shim{to{transform:translateX(-46px)}}
@keyframes glint{0%,100%{opacity:.34}50%{opacity:.62}}

/* Het paneel mag de rand raken en staat licht in perspectief. */
.hero__panel{position:relative;z-index:2;perspective:1700px}
@media (min-width:1001px){
  .hero__panel{margin-right:calc(var(--gut) * -1)}
  .panel{transform:rotateY(-7deg) rotateX(2deg)}
}
@media (min-width:1441px){.hero__panel{margin-right:-70px}}
.panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.16),transparent 40%)}

/* --------------------------------------------------- Tijdlijnweergave ---- */
/* Het dagoverzicht opende op een tekstlijst. Als lane-weergave leest hetzelfde
   gegeven direct als planning. */
.lane{padding:16px 18px 18px;background:var(--surface)}
.lane__hd{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:14px}
.lane__title{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--forest)}
.lane__date{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.lane__pill{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;
  background:var(--cream-2);border:1px solid var(--line);font-family:var(--mono);font-size:11px;font-weight:500;color:var(--forest);white-space:nowrap}
.lane__scale{display:grid;grid-template-columns:repeat(6,1fr);margin:0 0 6px 96px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--faint)}
.lane__scale span{border-left:1px solid var(--hair);padding-left:5px}
.lane__rows{position:relative;display:grid;gap:7px}
.lane__row{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px}
.lane__name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--forest);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane__track{position:relative;height:32px;border-radius:9px;background:var(--surface-2);
  background-image:repeating-linear-gradient(90deg,var(--hair) 0 1px,transparent 1px calc(100% / 6));overflow:hidden}
.lane__bar{position:absolute;top:5px;bottom:5px;display:flex;align-items:center;gap:6px;padding:0 9px;border-radius:7px;
  font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;
  transform-origin:left center;animation:lanein .6s var(--ease-out) both}
@keyframes lanein{from{transform:scaleX(.02);opacity:0}to{transform:scaleX(1);opacity:1}}
.lane__bar--a{left:4%;width:38%;background:#EADFC0;color:#5A4715;animation-delay:.05s}
.lane__bar--b{left:14%;width:44%;background:#DDE9DF;color:var(--success-ink);animation-delay:.12s}
.lane__bar--c{left:30%;width:34%;background:#F6E8CF;color:var(--warning-ink);animation-delay:.19s}
.lane__bar--d{left:52%;width:40%;background:#DCEAED;color:var(--info-ink);animation-delay:.26s}
.lane__bar--e{left:8%;width:26%;background:#F3DEDA;color:var(--danger-ink);animation-delay:.33s}
.lane__now{position:absolute;top:-4px;bottom:-4px;left:calc(96px + (100% - 96px) * .46);width:1px;background:var(--danger);z-index:2}
.lane__now b{position:absolute;top:-6px;left:0;padding:2px 6px;border-radius:0 4px 4px 0;background:var(--danger);
  font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#fff}
@media (prefers-reduced-motion:reduce){.lane__bar{animation:none}}
/* Op smalle schermen is er geen ruimte voor tijd plus status in de balk: dan
   blijft de tijd staan en verhuist de status naar de titel van de balk. */
.lane__bar b{font-weight:600}
.lane__bar span{overflow:hidden;text-overflow:ellipsis}
@media (max-width:820px){
  .lane__row{grid-template-columns:92px 1fr}
  .lane__scale{margin-left:92px}
  .lane__now{left:calc(92px + (100% - 92px) * .46)}
  .lane__name{font-size:11px;gap:6px}
  .lane__name .tick{width:3px;height:18px}
  .lane__bar span{display:none}
}


/* --------------------------------------------- Beschikbaarheidsraster ---- */
.avail__legend{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:14px}
.avail__legend li{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.avail__legend i{width:14px;height:10px;border-radius:3px;border:1px solid var(--line)}
.avail__legend i.is-free{background:var(--success-soft);border-color:#CFE3D4}
.avail__legend i.is-part{background:var(--warning-soft);border-color:#EBD6B4}
.avail__legend i.is-full{background:var(--surface-2)}
/* Signature-moment: de cellen vullen zich één keer, cel voor cel. */
.js-reveal .avail__cell{opacity:0}
.js-reveal .is-in .avail__cell{animation:cellin .34s var(--ease-out) both}
/* Het beeldpodium is geen .rise-element, dus het krijgt nooit .is-in. Zonder
   deze twee regels stond de eerste weergave leeg: cellen op opacity 0 en staven
   op scaleY(.05). De trigger is hier "deze weergave staat aan". */
.js-reveal .stage__view .avail__cell{opacity:1}
.js-reveal .stage__view.is-on .avail__cell{animation:cellin .34s var(--ease-out) both}
.stage__view.is-on .rev__chart .bar i{transform:scaleY(1)}
@keyframes cellin{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
.avail__cell:nth-child(4n){animation-delay:.02s}
.avail__cell:nth-child(4n+1){animation-delay:.06s}
.avail__cell:nth-child(4n+2){animation-delay:.1s}
.avail__cell:nth-child(4n+3){animation-delay:.14s}
@media (prefers-reduced-motion:reduce){
  .js-reveal .avail__cell{opacity:1}
  .js-reveal .is-in .avail__cell{animation:none}
}

/* --------------------------------------------------------- Note donker --- */
.note--dark{background:rgba(239,229,204,.06);border-color:rgba(239,229,204,.16)}
.note--dark h3{color:var(--cream)}
.note--dark p{color:var(--on-dark-muted)}

/* ------------------------------------------------- Volvlaks beeldband ---- */
/* Eén beeldmoment over de volle breedte. Zonder foto staat er een scene met
   dezelfde opmaak, zodat de band nu al af is. */
.shot{position:relative;height:clamp(300px,38vw,520px);overflow:hidden;background:var(--deep);isolation:isolate}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot__veil{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(16,27,24,.9) 4%,rgba(16,27,24,.6) 46%,rgba(16,27,24,.22) 100%),
  linear-gradient(180deg,rgba(16,27,24,.34) 0,transparent 34%,transparent 70%,rgba(16,27,24,.3) 100%)}
.shot img{filter:saturate(.8) contrast(1.02)}
.shot__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;gap:14px}
.shot__line{font-family:var(--disp);font-weight:500;font-size:clamp(24px,3.4vw,44px);line-height:1.1;
  letter-spacing:-.03em;color:var(--cream);max-width:26ch}
.shot__meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(239,229,204,.66)}
/* De tweede band is lager en de sluier is lichter: de boten mogen hier meer te
   zien zijn dan in de eerste band. Tekst blijft links, want dat is de kant waar
   het water donker en rustig is; rechts uitlijnen zette de kop pal over de boten. */
.shot--low{height:clamp(260px,28vw,400px)}
.shot--low .shot__veil{background:
  linear-gradient(100deg,rgba(16,27,24,.88) 2%,rgba(16,27,24,.5) 40%,rgba(16,27,24,.12) 78%),
  linear-gradient(180deg,rgba(16,27,24,.26) 0,transparent 34%,transparent 74%,rgba(16,27,24,.24) 100%)}
.shot--low .shot__line{max-width:22ch;font-size:clamp(23px,3vw,38px)}
.shot__scene{position:absolute;inset:0;z-index:0}
.shot__scene svg{position:absolute;inset:0;width:100%;height:100%}

/* ------------------------------------------------------------ Showcase --- */
.case{position:relative;border-top:1px solid var(--hair)}
.case::before{content:"";position:absolute;top:0;left:0;width:clamp(120px,18vw,260px);height:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.case__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:900px){.case__in{grid-template-columns:1fr}}
.case__aside{position:sticky;top:clamp(88px,11vh,112px)}
@media (max-width:900px){.case__aside{position:static}}
.case__meta{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Feitenstrip als typeplaatje: mono-labels boven Lora-waarden. */
.case__strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--hair);border-radius:var(--r-md);background:var(--surface);overflow:hidden;box-shadow:var(--sh-1)}
.case__fact{padding:18px 20px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.case__fact:nth-child(3n){border-right:0}
.case__fact:nth-last-child(-n+3){border-bottom:0}
.case__fact dt{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.case__fact dd{margin:6px 0 0;font-family:var(--disp);font-size:clamp(19px,2.2vw,26px);line-height:1.14;color:var(--forest)}
.case__fact dd.is-pending{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);line-height:1.5}
.case__fact p{margin-top:5px;font-size:13px;color:var(--muted)}
@media (max-width:640px){
  .case__strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case__fact:nth-child(3n){border-right:1px solid var(--hair)}
  .case__fact:nth-child(2n){border-right:0}
  .case__fact:nth-last-child(-n+3){border-bottom:1px solid var(--hair)}
  .case__fact:last-child{border-bottom:0}
}

/* Beeldplaten: één staand naast twee liggend. Lege staat leest als dossier dat
   nog aangevuld wordt, niet als kapotte pagina. */
.case__plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-top:clamp(22px,2.6vw,32px)}
/* minmax(0,1fr) i.p.v. 1fr: anders eist een foto met dezelfde verhouding als de
   plaat de volle hoogte op en valt de caption buiten het kader. */
.case__plate{margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;border:1px solid var(--hair);border-radius:var(--r-md);
  overflow:hidden;background:var(--surface-2);box-shadow:var(--sh-1)}
/* Indeling volgt het beschikbare materiaal: een brede foto over twee kolommen,
   daaronder een vierkante foto en de walweergave. */
/* Twee foto's naast elkaar, daaronder de weergave over de volle breedte: een
   tijdlijn heeft breedte nodig, anders vallen de balken af. */
.case__plate:nth-child(1),.case__plate:nth-child(2){aspect-ratio:1/1}
.case__plate:nth-child(3){grid-column:span 2;aspect-ratio:16/9}
.case__plate img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.case__plate:hover img{transform:scale(1.03)}
.case__plate__ph{width:100%;height:100%;display:grid;place-items:center;padding:18px;
  background-image:repeating-linear-gradient(135deg,var(--paper) 0 10px,var(--surface-2) 10px 20px)}
.case__plate__hint{font-family:var(--mono);font-size:11px;line-height:1.55;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);text-align:center;max-width:22ch}
.case__plate figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:10px 12px;border-top:1px solid var(--hair);background:var(--surface)}
@media (max-width:640px){
  .case__plates{grid-template-columns:1fr}
  .case__plate:nth-child(3){grid-column:auto}
  .case__plate:nth-child(1),.case__plate:nth-child(2),.case__plate:nth-child(3){aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){.case__plate img,.case__plate:hover img{transition:none;transform:none}}

/* Citaat in wachtstand: staat er, is leeg, dus het wordt opgehaald. */
.case__quote{margin-top:clamp(26px,3.2vw,40px);padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--hair);border-left:2px solid var(--gold);border-radius:var(--r-md);
  background:var(--surface);display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,26px);align-items:start;box-shadow:var(--sh-1)}
@media (max-width:640px){.case__quote{grid-template-columns:1fr}}
.case__quote blockquote{margin:6px 0 12px;font-family:var(--disp);font-size:clamp(19px,2.3vw,27px);line-height:1.34;color:var(--forest)}
.case__quote--pending blockquote{font-family:var(--body);font-size:15px;line-height:1.6;color:var(--muted)}

/* Modulerail: wat er daar elke dag openstaat. */
.case__mods{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(22px,2.6vw,30px)}
.case__mods li{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--forest)}
.case__mods li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ------------------------------------------------- Tweede kaartgroep --- */
.bento__group{
  margin:clamp(34px,4vw,54px) 0 clamp(18px,2vw,26px);
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--forest);display:flex;align-items:center;gap:14px;
}
.bento__group::after{content:"";flex:1;height:1px;background:var(--line)}
/* Vijf kaarten op drie kolommen: de laatste spant twee, anders blijft er een gat. */
@media (min-width:641px){.bento--links>.cell:last-child{grid-column:span 2}}

/* -------------------------------------------------------- Seizoenstrip --- */
/* Feitelijk gegeven (het vaarseizoen), geen verzonnen bezettingscijfer. */
.season{margin-top:26px;padding-top:20px;border-top:1px solid var(--hair)}
.season__cap{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.season__rail{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:10px}
.season__rail i{height:8px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line)}
.season__rail i.is-peak{background:var(--gold);border-color:var(--gold-deep)}
.season__months{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:7px}
.season__months span{font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);text-align:center}
.season__note{margin-top:12px;font-size:13px;line-height:1.55;color:var(--muted)}


/* --------------------------------------------- Walweergave als plaat ----- */
/* Derde plaat: het echte walscherm in het klein, in plaats van een gefingeerde
   foto van iemands steiger. */
/* ------------------------------------------------ Wat er veranderde ----- */
.changed{display:grid;gap:10px;margin-top:clamp(24px,2.8vw,34px)}
.changed li{
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(12px,1.6vw,20px);align-items:center;
  padding:16px 20px;border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--hair);box-shadow:var(--sh-1);
}
.changed__from{font-size:15px;line-height:1.5;color:var(--muted)}
.changed__to{font-size:15px;line-height:1.5;color:var(--forest);font-weight:600}
.changed__arrow{display:flex;color:var(--gold-deep)}
@media (max-width:640px){
  .changed li{grid-template-columns:1fr;gap:8px}
  .changed__arrow{transform:rotate(90deg)}
}

/* Kopjes binnen de showcase: mono, klein, met doorlopende lijn. Ze maken duidelijk
   waar een blok over gaat, nu de sectie niet meer alleen over één bedrijf gaat. */
.case__cap{
  display:flex;align-items:center;gap:14px;margin:clamp(26px,3vw,38px) 0 14px;
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.case__cap:first-child{margin-top:0}
.case__cap::after{content:"";flex:1;height:1px;background:var(--hair)}