/* ============================================================
   CRYSTAL VIEW: Optisch bureau
   Glasbewassing regio Keerbergen
   ------------------------------------------------------------
   Act I  "Vuil"    : deep glazing blue, refraction, grime
   De pas "Trekker" : the one authored motion event
   Act II "Helder"  : daylight, hairlines, full transmission
   Sodium (#FFC24A) is reserved for the LIVE element only.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Act I: soiled / night glass */
  --ink-900:#04101C; --ink-800:#071A2C; --ink-700:#0A2440; --ink-600:#0E3057;
  --glaze:#123E6E;

  /* Act II: daylight */
  --day-050:#F2F7FC; --day-100:#E4EFF9; --day-200:#CFE1F2; --day-300:#A9C7E4;

  /* Beam: the blue that carries */
  --beam-700:#0B4FC4; --beam-600:#0F62E6; --beam-500:#2E86FF; --beam-300:#7DB4FF;

  /* Sodium: the live element. Never decoration. */
  --sodium:#FFC24A; --sodium-deep:#E39A12;

  /* Text */
  --fg-dark:#EAF2FB;  --fg-dark-2:#93B4D6;
  --fg-light:#06243F; --fg-light-2:#4A6D91;

  /* Hairlines */
  --rule-dark:rgba(148,186,224,.24);
  --rule-light:rgba(6,36,63,.16);

  /* Type */
  --display:"Archivo",system-ui,sans-serif;
  --body:"Schibsted Grotesk",system-ui,sans-serif;

  --t-display:clamp(2.9rem,8.2vw,6rem);
  --t-h2:clamp(1.95rem,4.4vw,3.2rem);
  --t-h3:clamp(1.15rem,1.9vw,1.45rem);
  --t-body:clamp(.95rem,.3vw + .87rem,1.05rem);
  --t-lead:clamp(1.02rem,.55vw + .9rem,1.22rem);
  --t-micro:clamp(.7rem,.3vw + .62rem,.775rem);

  /* Space */
  --gut:clamp(1.25rem,4vw,3rem);
  --bay:clamp(4.25rem,8.5vw,8rem);
  --wrap:78rem;

  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* Written every frame by the one scroll clock (js) */
  --p-pass:1; --p-hero:0; --p-doc:0; --mx:0; --my:0;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd,fieldset,legend{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
fieldset{border:0;padding:0;min-inline-size:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li){text-wrap:pretty}

html.js{--p-pass:0}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}

body{
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.62;
  background:var(--ink-900);
  color:var(--fg-dark);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* ---------- 2. Browser surfaces (themed, never left default) ---------- */
::selection{background:var(--sodium);color:var(--ink-900);text-shadow:none}
:root{scrollbar-color:var(--glaze) var(--ink-900);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink-900)}
::-webkit-scrollbar-thumb{background:var(--glaze);border:3px solid var(--ink-900);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--beam-700)}
:focus-visible{outline:2px solid var(--sodium);outline-offset:3px;border-radius:2px}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- 3. Type ---------- */
.display{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 780;
  font-weight:780;
  font-size:var(--t-display);
  line-height:.94;
  letter-spacing:-.035em;
}
h2.hd{
  font-family:var(--display);
  font-variation-settings:"wdth" 114,"wght" 720;
  font-weight:720;
  font-size:var(--t-h2);
  line-height:1.02;
  letter-spacing:-.03em;
  max-width:19ch;
}
h3.sub{
  font-family:var(--display);
  font-variation-settings:"wdth" 108,"wght" 680;
  font-weight:680;
  font-size:var(--t-h3);
  line-height:1.15;
  letter-spacing:-.018em;
}
.lead{font-size:var(--t-lead);line-height:1.42;max-width:36ch;letter-spacing:-.012em}
.prose{max-width:64ch}
.prose + .prose{margin-top:1em}
.dim{color:var(--fg-dark-2)}
.act2 .dim{color:var(--fg-light-2)}

/* Plate label: annotates a DIAGRAM or an instrument, never a heading */
.lbl{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 620;
  font-weight:620;
  font-size:var(--t-micro);
  letter-spacing:.17em;
  text-transform:uppercase;
  line-height:1;
}

/* ---------- 4. Layout ---------- */
.wrap{width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto}
.wrap-wide{width:min(100% - (var(--gut) * 2),94rem);margin-inline:auto}
.bay{padding-block:var(--bay)}
.act2{background:var(--day-050);color:var(--fg-light);color-scheme:light}
.act2 ::selection{background:var(--beam-600);color:#fff}
.act2 ::-webkit-scrollbar-track{background:var(--day-100)}

/* The mullion grid: the page's columns are drawn as real glazing bars */
.mullion{position:relative;isolation:isolate}
.mullion::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(90deg,rgba(6,36,63,.13) 0 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.9) 0 1px,transparent 1px);
  background-size:25% 100%,25% 100%;
  background-position:0 0,1px 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
}
.mullion > *{position:relative;z-index:1}

.rule{height:1px;background:var(--rule-light);border:0;margin:0}
.rule-d{height:1px;background:var(--rule-dark);border:0;margin:0}

/* ---------- 5. Actions ---------- */
.btn{
  --bg:var(--beam-600); --fg:#fff;
  display:inline-flex;align-items:center;gap:.7em;
  padding:.95em 1.55em;
  background:var(--bg);color:var(--fg);
  font-family:var(--display);
  font-variation-settings:"wdth" 104,"wght" 700;
  font-weight:700;
  font-size:1rem;letter-spacing:-.01em;line-height:1;
  border:0;border-radius:2px;cursor:pointer;
  text-decoration:none;
  box-shadow:0 2px 5px rgba(4,16,28,.28),0 14px 34px -14px rgba(11,79,196,.65);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s var(--ease);
}
.btn:hover{transform:translateY(-2px);background:var(--beam-500);box-shadow:0 4px 9px rgba(4,16,28,.3),0 22px 44px -16px rgba(46,134,255,.7)}
.btn:active{transform:translateY(0)}
.btn .ico{width:1.05em;height:1.05em;flex:none}
.btn--ghost{--bg:transparent;--fg:var(--fg-dark);box-shadow:inset 0 0 0 1px rgba(148,186,224,.42)}
.btn--ghost:hover{--bg:rgba(148,186,224,.1);box-shadow:inset 0 0 0 1px rgba(148,186,224,.75)}
.act2 .btn--ghost{--fg:var(--fg-light);box-shadow:inset 0 0 0 1px rgba(6,36,63,.28)}
.act2 .btn--ghost:hover{--bg:rgba(6,36,63,.05);box-shadow:inset 0 0 0 1px rgba(6,36,63,.55)}
.btn--big{padding:1.15em 2em;font-size:1.08rem}

.tlink{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 640;font-weight:640;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:.15em;
  transition:gap .45s var(--ease),color .25s;
}
.tlink:hover{gap:.85em}
.tlink svg{width:1em;height:1em}
.act2 .tlink{color:var(--beam-700)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--sodium);color:var(--ink-900);padding:.7em 1.1em;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 6. Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:var(--gut);
  padding:1.05rem var(--gut);
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease),color .5s var(--ease);
}
.nav[data-stuck="true"]{
  padding-block:.72rem;
  background:rgba(4,16,28,.74);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 1px 0 rgba(148,186,224,.14),0 12px 40px -20px rgba(4,16,28,.9);
}
.nav[data-act="2"]{color:var(--fg-light)}
.nav[data-act="2"][data-stuck="true"]{
  background:rgba(242,247,252,.84);
  box-shadow:0 1px 0 rgba(6,36,63,.12),0 12px 40px -22px rgba(6,36,63,.5);
}
.brand{display:flex;align-items:center;gap:.62rem;text-decoration:none;flex:none}
.brand svg{width:2.3rem;height:2.3rem;flex:none;overflow:visible}
.brand .pane{fill:var(--beam-500)}
.brand .blade{fill:#DCEBFF}
.brand__nm{
  font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 760;font-weight:760;
  font-size:1.02rem;letter-spacing:.035em;text-transform:uppercase;line-height:1;
}
.brand__nm small{display:block;font-variation-settings:"wdth" 88,"wght" 450;font-weight:450;font-size:.58rem;letter-spacing:.2em;opacity:.6;margin-top:.3em}
.nav__links{display:flex;gap:1.55rem;margin-left:auto;align-items:center}
.nav__links a{
  text-decoration:none;font-size:.92rem;
  font-family:var(--display);font-variation-settings:"wdth" 98,"wght" 560;font-weight:560;
  opacity:.82;position:relative;padding-block:.35rem;
  transition:opacity .3s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.05rem;height:1px;
  background:currentColor;transition:right .55s var(--ease);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{right:0}
.nav__cta{margin-left:.45rem}
.nav__burger{display:none;margin-left:auto;background:none;border:1px solid currentColor;border-radius:2px;padding:.5rem;cursor:pointer;color:inherit}
.nav__burger svg{width:1.35rem;height:1.35rem}
.nav__prog{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  transform:scaleX(var(--p-doc,0));transform-origin:left;
  background:linear-gradient(90deg,var(--beam-600),var(--beam-500) 62%,var(--sodium));
  opacity:0;transition:opacity .6s var(--ease);
}
.nav[data-stuck="true"] .nav__prog{opacity:1}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;
  background:rgba(4,16,28,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:6rem var(--gut) var(--gut);
  color:var(--fg-dark);
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility 0s linear .45s;
}
.drawer[data-open="true"]{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.drawer a{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 700;font-weight:700;
  font-size:clamp(1.8rem,8vw,2.6rem);letter-spacing:-.028em;text-decoration:none;
  padding-block:.28em;border-bottom:1px solid rgba(148,186,224,.18);
}
.drawer a:last-of-type{border-bottom:0}
.drawer .btn{margin-top:1.6rem;align-self:flex-start}

/* ---------- 7. Hero (Act I) ---------- */
.hero{
  position:relative;min-height:100vh;
  display:grid;align-items:end;
  padding:8.5rem var(--gut) clamp(2.5rem,6vh,4.5rem);
  overflow:hidden;isolation:isolate;
}
.hero__frame{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero__img{
  width:112%;height:114%;object-fit:cover;object-position:74% 46%;
  position:absolute;left:-6%;top:-7%;
  transform:translate3d(calc(var(--mx) * -16px),calc(var(--my) * -16px),0) scale(calc(1 + var(--p-hero) * .06));
  filter:saturate(.84) contrast(1.05);
}
/* the soiling: grime, streaks and the cold cast of unwashed glass */
.hero__soil{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    radial-gradient(70% 55% at 78% 30%,rgba(147,180,214,.17),transparent 62%),
    radial-gradient(48% 40% at 32% 74%,rgba(120,160,200,.12),transparent 66%),
    repeating-linear-gradient(97deg,rgba(200,224,246,.055) 0 2px,transparent 2px 13px),
    repeating-linear-gradient(3deg,rgba(160,196,230,.035) 0 1px,transparent 1px 9px),
    linear-gradient(180deg,rgba(4,16,28,.52) 0%,rgba(4,16,28,.18) 32%,rgba(4,16,28,.7) 76%,var(--ink-900) 100%),
    linear-gradient(90deg,rgba(4,16,28,.94) 0%,rgba(4,16,28,.74) 32%,rgba(7,26,44,.26) 66%,rgba(7,26,44,.44) 100%);
}
.hero__grain{
  position:absolute;inset:-25%;z-index:-1;pointer-events:none;opacity:.38;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  transform:translate3d(calc(var(--mx) * 9px),calc(var(--my) * 9px),0);
}
.hero__body{max-width:var(--wrap);margin-inline:auto;width:100%}
.hero .display{max-width:14ch;text-wrap:balance}
.hero__kicker{display:block;margin-bottom:1.1rem;color:var(--beam-300)}
.hero .display em{font-style:normal;display:block;color:var(--beam-300)}
.hero__lede{margin-top:1.5rem;color:var(--fg-dark-2);max-width:44ch;font-size:var(--t-lead);line-height:1.44}
.hero__lede b{color:var(--fg-dark);font-weight:600}
.hero__acts{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem;align-items:center}
.hero__note{display:flex;align-items:center;gap:.6rem;margin-top:2.3rem;color:var(--fg-dark-2);font-size:.92rem}
.hero__note .dot{
  width:.5rem;height:.5rem;border-radius:99px;background:var(--sodium);flex:none;
  box-shadow:0 0 0 4px rgba(255,194,74,.16);
  animation:pulse 3.4s var(--ease-io) infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(255,194,74,.16)}50%{box-shadow:0 0 0 9px rgba(255,194,74,.03)}}

.hero__scroll{
  position:absolute;right:var(--gut);bottom:clamp(2.5rem,6vh,4.5rem);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;color:var(--fg-dark-2);
}
.hero__scroll .lbl{writing-mode:vertical-rl;letter-spacing:.24em}
.hero__scroll .bar{width:1px;height:4.5rem;background:rgba(148,186,224,.3);position:relative;overflow:hidden}
.hero__scroll .bar::after{content:"";position:absolute;inset:0;background:var(--sodium);animation:drop 2.8s var(--ease-io) infinite}

/* Op een laptop met browserbalk is de viewport vaak maar ~670px hoog.
   De hero is dan wel 100vh, maar bovenmarge plus inhoud samen zijn
   hoger, waardoor de onderste regel onder de vouw viel. Bij een lage
   viewport krimpt daarom de aanloop mee, niet de leesbaarheid. */
@media (min-width:60rem) and (max-height:820px){
  .hero{padding-top:6.5rem}
  .hero .display{font-size:clamp(2.6rem,5.4vw,4.4rem)}
  .hero__lede{margin-top:1.1rem;font-size:clamp(1.05rem,1.2vw,1.2rem)}
  .hero__acts{margin-top:1.5rem}
  .hero__note{margin-top:1.4rem}
}
/* Kleine telefoons met een lage viewport (iPhone SE en ouder):
   dezelfde ingreep, maar dan onder de navigatiedrempel. */
@media (max-width:60rem) and (max-height:720px){
  .hero{padding-top:5.8rem;padding-bottom:2rem}
  .hero .display{font-size:clamp(2.05rem,7.4vw,2.7rem)}
  .hero__lede{margin-top:.95rem;font-size:1rem;line-height:1.4}
  .hero__acts{margin-top:1.25rem;gap:.6rem}
  .hero__acts .btn{padding:.82em 1.3em;font-size:.94rem}
  .hero__note{margin-top:1.1rem;font-size:.85rem}
  .phero--tall{padding-top:5.8rem;padding-bottom:2.4rem}
}
/* Allerkleinste schermen (iPhone SE 1e generatie, 320x568). */
@media (max-width:60rem) and (max-height:610px){
  .hero{padding-top:5.2rem;padding-bottom:1.6rem}
  .hero .display{font-size:1.95rem;line-height:1.0}
  .hero__lede{margin-top:.8rem;font-size:.95rem}
  .hero__acts{margin-top:1.05rem}
  .hero__note{margin-top:.9rem;font-size:.8rem}
}
@media (min-width:60rem) and (max-height:700px){
  .hero{padding-top:5.6rem}
  .hero .display{font-size:clamp(2.3rem,4.6vw,3.6rem)}
  .hero__acts{margin-top:1.25rem}
  .hero__note{margin-top:1.1rem}
}
/* zelfde verhaal voor de paginakop op /over/ */
@media (min-width:60rem) and (max-height:820px){
  .phero--tall{padding-top:6.5rem;padding-bottom:clamp(2.5rem,5vh,4rem)}
  .phero--tall h1{font-size:clamp(2.2rem,5vw,3.8rem)}
}
@keyframes drop{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ---------- 8. De pas: the one authored moment ---------- */
.pass{position:relative;height:320vh;background:var(--ink-900)}
.pass__stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.pass__plate{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.pass__plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

.pass__plate--dirty img{filter:saturate(.42) brightness(.5) contrast(.86) blur(2.5px)}
/* Soiling reads as smear and film, never as a regular screen: wide irregular
   smears at low alpha, plus real grain. */
.pass__plate--dirty::after{
  content:"";position:absolute;inset:0;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E"),
    radial-gradient(58% 46% at 28% 22%,rgba(168,198,226,.18),transparent 62%),
    radial-gradient(46% 42% at 78% 70%,rgba(140,176,210,.14),transparent 64%),
    repeating-linear-gradient(94deg,rgba(206,228,248,.05) 0 1px,transparent 1px 34px,rgba(206,228,248,.028) 34px 36px,transparent 36px 91px),
    linear-gradient(180deg,rgba(4,16,28,.7),rgba(4,16,28,.48) 45%,rgba(4,16,28,.84));
  background-size:260px 260px,auto,auto,auto,auto;
  background-blend-mode:overlay,normal,normal,normal,normal;
}
.pass__plate--clean{
  clip-path:inset(0 0 calc((1 - var(--p-pass)) * 100%) 0);
  background:var(--day-050);
}
.pass__plate--clean img{filter:saturate(1.12) brightness(1.1) contrast(1.04)}
.pass__plate--clean::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,16,28,.5),rgba(4,16,28,.18) 50%,rgba(4,16,28,.55));
}

/* The two sentences share one box and hand over as the blade crosses,
   so the wipe never slices a word in half. */
.pass__says{
  position:absolute;inset:0;z-index:6;
  display:grid;place-items:center;
  padding-inline:var(--gut);pointer-events:none;
}
.pass__says::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(58% 42% at 50% 50%,rgba(4,16,28,.6),transparent 72%);
}
.pass__say{
  grid-area:1 / 1;position:relative;text-align:center;max-width:min(90vw,42rem);
  text-shadow:0 1px 2px rgba(4,16,28,.7),0 4px 40px rgba(4,16,28,.85);
  will-change:opacity,transform;
}
.pass__say .lbl{display:block;margin-bottom:1.15rem}
.pass__say .say{
  font-family:var(--display);font-variation-settings:"wdth" 116,"wght" 760;font-weight:760;
  font-size:clamp(2.05rem,5.8vw,4.4rem);line-height:.98;letter-spacing:-.035em;
}
.pass__say--a{
  color:#C6DAEE;
  opacity:calc((.44 - var(--p-pass)) * 9);
  transform:translateY(calc(var(--p-pass) * -30px));
}
.pass__say--a .lbl{color:#8FB0D2}
.pass__say--b{
  color:#fff;
  opacity:calc((var(--p-pass) - .56) * 9);
  transform:translateY(calc((1 - var(--p-pass)) * 30px));
}
.pass__say--b .lbl{color:var(--sodium)}

.pass__blade{
  display:none;
  position:absolute;left:-4%;right:-4%;z-index:5;
  top:calc(var(--p-pass) * 100%);
  transform:rotate(-.4deg);
  pointer-events:none;
}
html.js .pass__blade{display:block}
.pass__blade .rubber{
  display:block;height:9px;
  background:linear-gradient(180deg,#1B2A38 0%,#0B141D 55%,#05090D 100%);
  box-shadow:0 -1px 0 rgba(190,216,238,.55),0 10px 26px -8px rgba(4,16,28,.9);
}
.pass__blade .edge{
  display:block;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,rgba(233,245,255,.95) 8%,#fff 50%,rgba(233,245,255,.95) 92%,transparent);
  box-shadow:0 0 14px 2px rgba(180,220,255,.75),0 0 40px 6px rgba(46,134,255,.35);
}
.pass__blade .wet{
  display:block;height:44px;
  background:linear-gradient(180deg,rgba(186,218,248,.16),rgba(186,218,248,0));
  -webkit-mask-image:
    repeating-linear-gradient(93.4deg,#000 0 1px,transparent 1px 7px,#000 7px 8px,transparent 8px 19px),
    linear-gradient(180deg,#000,transparent);
  mask-image:
    repeating-linear-gradient(93.4deg,#000 0 1px,transparent 1px 7px,#000 7px 8px,transparent 8px 19px),
    linear-gradient(180deg,#000,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.pass__hint{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:6;
  color:var(--fg-dark-2);opacity:calc(1 - var(--p-pass) * 3);
  white-space:nowrap;
}

/* ---------- 9. Section shell (Act II) ---------- */
.sec{position:relative}
.sec__head{display:grid;gap:1.4rem;max-width:62ch}
.sec__head .lead{color:var(--fg-light-2)}

/* Split with intentional asymmetry: never a 50/50 */
.split{display:grid;gap:clamp(2.2rem,5vw,5rem);align-items:start}
@media (min-width:56rem){
  .split{grid-template-columns:5fr 7fr}
  .split--flip{grid-template-columns:7fr 5fr}
}

/* ---------- 10. Ray-trace plate ---------- */
.optics{background:var(--day-050)}

/* De instrumentplaat staat op diepblauw, niet op daglicht.
   Sodium is een signaalkleur voor donkere gronden: op --day-050 haalt
   ze amper 1,6:1 en verdwijnt het hele stralendiagram. Dit is ook wat
   DESIGN.md beschrijft: witte en lichtcyaan haarlijnen op glasblauw. */
.optics__fig{
  position:relative;
  background:var(--ink-800);
  padding:clamp(1.2rem,2.6vw,2rem) clamp(1rem,2.2vw,1.6rem);
  border-radius:3px;
  box-shadow:0 2px 6px rgba(6,36,63,.14),0 24px 50px -30px rgba(6,36,63,.6);
  overflow:hidden;
}
.optics__fig::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 18% 40%,rgba(46,134,255,.14),transparent 62%);
}
.optics__fig svg{width:100%;height:auto;position:relative}
.optics__cap{margin-top:1.1rem;color:var(--fg-light-2);font-size:.92rem;max-width:52ch}

.ray{stroke-linecap:round;fill:none}
.ray-in{stroke:var(--sodium);stroke-width:1.7}
/* verzwakt, maar wel zichtbaar: anders leest paneel A als leeg in
   plaats van als verstrooid */
.ray-scatter{stroke:var(--sodium);stroke-width:1.1;opacity:.55}
.ray-through{stroke:var(--sodium);stroke-width:1.9;filter:drop-shadow(0 0 5px rgba(255,194,74,.55))}
.pane-line{stroke:var(--beam-300);stroke-width:1.5}
.pane-soil{fill:rgba(148,186,224,.16)}
.pane-clean{fill:rgba(125,180,255,.2)}
.plate-hair{stroke:rgba(148,186,224,.3);stroke-width:1;stroke-dasharray:3 3}
.plate-lead{stroke:rgba(148,186,224,.45);stroke-width:1}
.plate-txt{
  font-family:var(--display);font-size:11px;font-weight:620;
  letter-spacing:1.6px;text-transform:uppercase;fill:var(--fg-dark);
}
.plate-txt--dim{fill:var(--fg-dark-2)}
html.js .ray{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
html.js .in-view .ray{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.5s var(--ease);
  transition-delay:calc(var(--i,0) * 55ms);
}

/* ---------- 11. De drie beloftes, als eenvoudige kaarten ---------- */
.readouts{
  display:grid;gap:clamp(.9rem,1.6vw,1.25rem);
  margin-top:clamp(3rem,6vw,5.5rem);
}
@media (min-width:56rem){.readouts{grid-template-columns:repeat(3,1fr)}}
.readout{
  padding:clamp(1.5rem,2.6vw,2.1rem);
  background:#fff;
  border:1px solid var(--rule-light);
  border-radius:3px;
  box-shadow:0 1px 2px rgba(6,36,63,.04),0 10px 26px -18px rgba(6,36,63,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.readout:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(6,36,63,.05),0 18px 38px -20px rgba(6,36,63,.45);
}
.readout__v{
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 720;font-weight:720;
  font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.06;letter-spacing:-.024em;
  color:var(--fg-light);margin-bottom:.7rem;
}
.readout p{color:var(--fg-light-2);font-size:1rem;line-height:1.55}

/* ---------- 12. Diensten plates ----------
   De twee platen delen hun rijen, zodat de titels en de tekst eronder
   op precies dezelfde hoogte beginnen. De foto's zelf mogen verschillen:
   ze staan onderaan hun rij uitgelijnd, dus bovenaan ontstaat er ruimte,
   en onderaan staat de rand van beide beelden op één lijn. */
@media (min-width:56rem){
  #diensten .split{grid-template-rows:auto auto}
  #diensten .plate{grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:0}
  #diensten .plate__media{align-self:end}
}
/* Terugval voor browsers zonder subgrid: gelijke beeldhoogte, dan klopt
   de uitlijning ook. */
@supports not (grid-template-rows: subgrid){
  @media (min-width:56rem){
    #diensten .plate__media{aspect-ratio:4/3 !important}
  }
}
#diensten .plate__media{aspect-ratio:4/5}
#diensten .plate--wide .plate__media{aspect-ratio:16/10}
.plate{position:relative}
.plate__media{position:relative;overflow:hidden;background:var(--day-200);aspect-ratio:5 / 6}
.plate--wide .plate__media{aspect-ratio:16 / 10}
.plate__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.plate:hover .plate__media img{transform:scale(1.035)}
.plate__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 34%);
}
@media (min-width:56rem){.split > .plate--wide{margin-top:5.5rem}}
.plate__body{padding-top:clamp(1.6rem,3vw,2.2rem)}
.plate__body h3{margin-bottom:.85rem}
.plate__body p{color:var(--fg-light-2);max-width:44ch}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem}
.chips li{
  font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 560;font-weight:560;
  font-size:.845rem;letter-spacing:.01em;
  padding:.42em .82em;border:1px solid var(--rule-light);border-radius:2px;
  color:var(--fg-light-2);
}
.plate__more{margin-top:1.6rem}

/* window elevation diagram */
.elev{width:100%;max-width:19rem;margin-top:2rem}
.elev .frame-o{fill:none;stroke:var(--fg-light);stroke-width:2}
.elev .frame-i{fill:rgba(46,134,255,.1);stroke:var(--fg-light);stroke-width:1.2}
.elev .sill{fill:rgba(6,36,63,.14);stroke:var(--fg-light);stroke-width:1.2}

/* ---------- 13. Interval instrument ---------- */
.interval{background:var(--day-100)}
.instrument{margin-top:clamp(2.6rem,5vw,4rem)}
.strip{
  display:grid;grid-template-columns:repeat(52,1fr);gap:2px;
  margin-top:clamp(2rem,4vw,3rem);align-items:end;height:5.5rem;
}
.strip i{
  display:block;height:100%;background:var(--day-300);border-radius:1px;
  transform:scaleY(.38);transform-origin:bottom;
  transition:transform .55s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
  transition-delay:calc(var(--k) * 7ms);
}
.strip i[data-on="1"]{
  transform:scaleY(1);background:var(--sodium);
  box-shadow:0 2px 10px -2px rgba(227,154,18,.75);
}
.strip__scale{
  display:flex;justify-content:space-between;margin-top:.7rem;
  color:var(--fg-light-2);
}
.freq{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.4rem}
.freq label{
  position:relative;cursor:pointer;
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 620;font-weight:620;
  font-size:.95rem;
  padding:.72em 1.15em;border:1px solid var(--rule-light);border-radius:2px;
  color:var(--fg-light-2);
  transition:color .3s,border-color .3s,background .3s,transform .4s var(--ease);
}
.freq label:hover{border-color:rgba(6,36,63,.4);color:var(--fg-light);transform:translateY(-1px)}
.freq input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.freq input:checked + span{color:var(--ink-900)}
.freq label:has(input:checked){
  background:var(--sodium);border-color:var(--sodium-deep);color:var(--ink-900);
  box-shadow:0 3px 12px -4px rgba(227,154,18,.8);
}
.freq label:has(input:focus-visible){outline:2px solid var(--beam-600);outline-offset:3px}
.gauge{
  margin-top:2.6rem;padding-top:1.8rem;border-top:1px solid var(--rule-light);
  display:grid;gap:1.6rem;
}
@media (min-width:60rem){.gauge{grid-template-columns:auto auto minmax(20rem,1fr);align-items:end;gap:clamp(2rem,5vw,4.5rem)}}
.gauge__n{
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 780;font-weight:780;
  font-size:clamp(2.6rem,6vw,4.2rem);line-height:.9;letter-spacing:-.04em;color:var(--fg-light);white-space:nowrap;
}
.gauge__n small{
  display:block;font-variation-settings:"wdth" 92,"wght" 560;font-weight:560;
  font-size:var(--t-micro);letter-spacing:.17em;text-transform:uppercase;
  color:var(--fg-light-2);margin-top:.75rem;line-height:1.3;white-space:normal;
}
.gauge__note{color:var(--fg-light-2);font-size:.95rem;max-width:40ch;justify-self:start}
@media (min-width:60rem){.gauge__note{justify-self:end;text-align:right}}

/* ---------- 14. Werkwijze: one continuous line ---------- */
/* De lijn loopt van het hart van de eerste bol tot het hart van de
   laatste, en geen millimeter verder. JavaScript meet die twee punten op
   en zet --line-x en --line-len; zonder JavaScript valt hij terug op de
   volle breedte. */
.route{position:relative;margin-top:clamp(2.5rem,5vw,4rem)}
.route__line{
  position:absolute;left:var(--line-x,0);top:.56rem;height:1px;
  width:var(--line-len,100%);
  background:var(--rule-light);
}
.route__line::after{
  content:"";position:absolute;inset:0;
  background:var(--beam-600);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.6s var(--ease);
}
.route.in-view .route__line::after{transform:scaleX(1)}
.route__steps{display:grid;gap:2.6rem}
@media (min-width:56rem){.route__steps{grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.6rem)}}
.step{position:relative;z-index:1;padding-top:2.4rem}
.step::before{
  content:"";position:absolute;left:0;top:.19rem;width:.75rem;height:.75rem;
  border-radius:99px;background:var(--day-050);border:1.5px solid var(--beam-600);
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
.in-view .step::before{background:var(--beam-600);box-shadow:0 0 0 4px rgba(15,98,230,.16)}
.step:last-child::before{
  /* een ondoorzichtige ring eromheen: de blauwe lijn mag nooit door de
     gele bol heen te zien zijn */
  box-shadow:0 0 0 5px var(--day-050);
  z-index:2;
}
.in-view .step:last-child::before{
  background:var(--sodium);border-color:var(--sodium-deep);
  box-shadow:0 0 0 5px var(--day-050),0 0 0 9px rgba(255,194,74,.22);
}
@media (max-width:55.99rem){
  .route__line{left:.34rem;right:auto;top:var(--line-y,0);bottom:auto;width:1px;height:var(--line-len-v,100%)}
  .route__line::after{transform:scaleY(0);transform-origin:top}
  .route.in-view .route__line::after{transform:scaleY(1)}
  .step{padding-top:0;padding-left:2.2rem}
  .step::before{top:.42rem}
}
.step h3{margin-bottom:.6rem}
.step p{color:var(--fg-light-2);font-size:1rem;line-height:1.55}

/* ---------- 15. Thibaut ---------- */
.mens{background:var(--day-050)}
.mens__pic{position:relative;overflow:hidden;max-width:26rem}
.mens__pic img{width:100%;filter:saturate(.98)}
.mens__pic figcaption{
  margin-top:.9rem;color:var(--fg-light-2);font-size:.88rem;
  display:flex;gap:.6rem;align-items:baseline;
}
.mens blockquote{
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 620;font-weight:620;
  font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.24;letter-spacing:-.022em;
  margin:0 0 1.6rem;max-width:26ch;
}
.sig{
  margin-top:2rem;font-family:var(--display);
  font-variation-settings:"wdth" 88,"wght" 500;font-weight:500;
  font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-light-2);
}

/* ---------- 16. Regio: index and map are one instrument ---------- */
.regio{background:var(--ink-900);color:var(--fg-dark);color-scheme:dark}
.regio h2.hd,.regio .gauge__n{color:var(--fg-dark)}
.regio .lead,.regio p{color:var(--fg-dark-2)}
.regio__grid{display:grid;gap:clamp(2.4rem,5vw,4.5rem);align-items:center;margin-top:clamp(2.5rem,5vw,4rem)}
@media (min-width:60rem){.regio__grid{grid-template-columns:7fr 5fr}}
.map{width:100%;height:auto;max-height:min(36rem,66vh);overflow:hidden}
.map .ring{fill:none;stroke:rgba(148,186,224,.2);stroke-width:.14}
.map .ring-lbl{font-family:var(--display);font-size:.9px;letter-spacing:.14px;fill:rgba(148,186,224,.55);text-transform:uppercase;font-weight:600}
.map .pt{fill:var(--beam-300);transition:fill .3s,r .35s var(--ease)}
.map .pt-hit{fill:transparent;cursor:pointer}
.map .home{fill:var(--sodium)}
.map .home-halo{fill:none;stroke:var(--sodium);stroke-width:.16;opacity:.5}
.map .pt.is-lit{fill:var(--sodium)}
.map .nm{font-family:var(--display);font-size:1.15px;font-weight:640;fill:var(--fg-dark);letter-spacing:.02px;opacity:0;transition:opacity .3s}
.map .nm.is-lit{opacity:1}
.map .home-nm{font-family:var(--display);font-size:1.5px;font-weight:760;fill:var(--sodium);letter-spacing:.04px}

.places{columns:2;column-gap:2rem;margin-top:.4rem}
@media (min-width:34rem){.places{columns:3}}
@media (min-width:60rem){.places{columns:2}}
.places li{break-inside:avoid;padding:.34rem 0;border-bottom:1px solid rgba(148,186,224,.13)}
.places button{
  background:none;border:0;padding:0;text-align:left;width:100%;cursor:pointer;
  font-size:.98rem;color:var(--fg-dark-2);
  transition:color .25s,transform .4s var(--ease);
}
.places button:hover,.places button.is-lit{color:var(--sodium);transform:translateX(.4rem)}
.regio__hint{color:var(--fg-dark-2);opacity:.72;margin-top:.35rem}
.regio__far{margin-top:1.8rem;color:var(--fg-dark-2);font-size:.95rem;max-width:46ch}

/* ---------- 17. Reviews: annotated on leader lines ---------- */
.zegt{background:var(--day-050)}
.quotes{display:grid;gap:clamp(2.4rem,4vw,3.4rem);margin-top:clamp(2.5rem,5vw,4rem)}
@media (min-width:52rem){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{position:relative;padding-top:1.9rem}
.quote::before{
  content:"";position:absolute;left:0;top:0;width:2.6rem;height:1px;background:var(--beam-600);
}
.quote p{
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 580;font-weight:580;
  font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.36;letter-spacing:-.016em;
  color:var(--fg-light);
}
.quote figcaption{margin-top:1.1rem;color:var(--fg-light-2);font-size:.88rem;line-height:1.45}
.quote figcaption b{color:var(--fg-light);font-weight:600}
.quote figcaption .lbl{opacity:.6}

/* herkenbaar als Google-review */
.quote__src{display:flex;align-items:center;gap:.55rem;margin-bottom:.95rem}
.quote__src .g{width:1.05rem;height:1.05rem;flex:none}
.quote__stars{display:flex;gap:.09rem}
.quote__stars svg{width:.82rem;height:.82rem;fill:#FBBC05;flex:none}
.quote__src span{
  font-family:var(--display);font-variation-settings:"wdth" 94,"wght" 600;font-weight:600;
  font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--fg-light-2);
}
.zegt__note{
  margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.3rem;
  border-top:1px solid var(--rule-light);
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;align-items:center;justify-content:space-between;
  color:var(--fg-light-2);font-size:.9rem;
}
.zegt__note a{color:var(--beam-700);text-underline-offset:.22em;display:inline-block;padding-block:.25rem}

/* ---------- 18. FAQ ---------- */
/* Op de donkerdere daglichtgrond (--day-100) haalt de gewone
   secundaire tekstkleur net 4,6:1. Voor een publiek waarvan een deel
   boven de zestig is, is dat te krap. Binnen deze blokken schuift de
   secundaire kleur daarom een tint donkerder: 5,8:1. */
.faq,.interval,.next,.versus__col--pick{--fg-light-2:#3D5F82}
.faq{background:var(--day-100);color:var(--fg-light);color-scheme:light}
.faq__list{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--rule-light)}
.faq details{border-bottom:1px solid var(--rule-light)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:1.2rem;
  padding:1.35rem 0;
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 640;font-weight:640;
  font-size:clamp(1.02rem,1.7vw,1.24rem);letter-spacing:-.016em;line-height:1.28;
  transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--beam-700)}
.faq summary .pm{
  margin-left:auto;flex:none;width:1.1rem;height:1.1rem;position:relative;margin-top:.22rem;
}
.faq summary .pm::before,.faq summary .pm::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;background:currentColor;
  transition:transform .45s var(--ease);
}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm::after{transform:rotate(0deg)}
.faq details[open] summary{color:var(--beam-700)}
.faq__a{padding:0 3rem 1.6rem 0;color:var(--fg-light-2);max-width:64ch}
.faq__a p + p{margin-top:.8em}

/* ---------- 19. Offerte form ---------- */
.offerte{background:var(--ink-900);color:var(--fg-dark);color-scheme:dark;position:relative;overflow:hidden}
.offerte::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(60% 60% at 82% 8%,rgba(15,98,230,.3),transparent 62%),
    radial-gradient(46% 46% at 6% 92%,rgba(11,79,196,.22),transparent 66%);
}
.offerte > *{position:relative}
.offerte h2.hd{color:var(--fg-dark)}
.offerte .lead{color:var(--fg-dark-2)}
.form{display:grid;gap:1.15rem;margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:46rem){
  .form{grid-template-columns:1fr 1fr}
  .form .full{grid-column:1 / -1}
}
.field{display:grid;gap:.45rem}
.field > label{
  font-family:var(--display);font-variation-settings:"wdth" 94,"wght" 600;font-weight:600;
  font-size:var(--t-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--fg-dark-2);
}
.field input,.field select,.field textarea{
  width:100%;padding:.88em 1em;
  background:rgba(148,186,224,.06);
  border:1px solid rgba(148,186,224,.24);
  border-radius:2px;color:var(--fg-dark);
  caret-color:var(--sodium);
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.field input::placeholder,.field textarea::placeholder{color:#7F9EBE}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(148,186,224,.42)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--sodium);background:rgba(148,186,224,.09);
  box-shadow:0 0 0 3px rgba(255,194,74,.18);
}
.field textarea{resize:vertical;min-height:7rem}
.field select{appearance:none;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2393B4D6' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:1rem;padding-right:2.6rem;
}
.field select option{background:var(--ink-800);color:var(--fg-dark)}
.field__err{font-size:.85rem;color:var(--sodium);min-height:0;display:none}
.field[data-invalid="true"] input,.field[data-invalid="true"] select{border-color:var(--sodium);background:rgba(255,194,74,.07)}
.field[data-invalid="true"] .field__err{display:block}
.form__foot{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:.6rem}
.form__foot .btn{background:var(--sodium);color:var(--ink-900);box-shadow:0 3px 8px rgba(4,16,28,.4),0 18px 40px -16px rgba(255,194,74,.6)}
.form__foot .btn:hover{background:#FFD37A}
.form__legal{color:var(--fg-dark-2);font-size:.86rem;max-width:38ch}
/* Het antispamveld hoort onzichtbaar te zijn voor mensen, maar wel
   bereikbaar voor een bot. Niet display:none, want dat slaan sommige
   bots juist over. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Er staat er altijd hoogstens één in beeld, en pas na het versturen. */
.form__status{display:none}
.form__msg{
  padding:1.15rem 1.3rem;border-radius:2px;
  border:1px solid var(--sodium);background:rgba(255,194,74,.08);color:var(--fg-dark);
}
.form__msg a{color:var(--sodium)}
.form__msg--fail{border-color:#FF8B7A;background:rgba(255,139,122,.1)}
.form__msg--fail a{color:#FFB0A3}
.form[data-state="ok"] .form__status,
.form[data-state="fail"] .form__status,
.form[data-state="offline"] .form__status{display:block}
.form[data-state="ok"] .form__msg--fail,
.form[data-state="ok"] .form__msg--offline,
.form[data-state="fail"] .form__msg--ok,
.form[data-state="fail"] .form__msg--offline,
.form[data-state="offline"] .form__msg--ok,
.form[data-state="offline"] .form__msg--fail{display:none}
.form[data-state="idle"] .form__msg,
.form[data-state="sending"] .form__msg{display:none}

/* verzendtoestand van de knop */
.btn[aria-busy="true"]{opacity:.72;cursor:progress}
.contactbar{
  display:flex;flex-wrap:wrap;gap:2rem clamp(2rem,5vw,4rem);
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:2rem;border-top:1px solid rgba(148,186,224,.16);
}
.contactbar>a,.contactbar>span{text-decoration:none;display:grid;gap:.4rem}
.contactbar a:hover .cb-v{color:var(--sodium)}
.cb-k{color:var(--fg-dark-2)}
.cb-v{
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 680;font-weight:680;
  font-size:1.16rem;letter-spacing:-.015em;transition:color .25s;
}

/* ---------- 20. Footer ---------- */
.foot{background:var(--ink-800);color:var(--fg-dark-2);padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:.93rem}
.foot__grid{display:grid;gap:2.4rem}
@media (min-width:52rem){.foot__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.foot .fh{
  font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 620;font-weight:620;
  font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dark);margin-bottom:1rem;
}
.foot a{text-decoration:none;transition:color .25s}
.foot a:hover{color:var(--sodium)}
/* Het aanraakvlak moet minstens 24px hoog zijn (WCAG 2.2). De
   opvulling zit daarom op de link zelf, niet op het lijstitem: anders
   is alleen de tekstregel van 19px aanklikbaar. */
.foot li{padding:0}
.foot li a{display:inline-block;padding-block:.32rem}
.foot li:not(:has(a)){padding:.32rem 0}
.foot__bar a{display:inline-block;padding-block:.3rem}
.foot__bar{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.4rem;border-top:1px solid rgba(148,186,224,.14);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;font-size:.85rem;
}
.foot .brand{color:var(--fg-dark);margin-bottom:1.1rem}

/* ---------- 21. Reveal (only with js, from an already-visible default) ---------- */
html.js .rv{opacity:0;transform:translateY(22px)}
html.js .rv.in-view{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform 1.05s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}

/* ---------- 22. Responsive ---------- */
@media (max-width:60rem){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .hero__scroll{display:none}
  .pass{height:280vh}
}
@media (max-width:34rem){
  .hero{padding-top:7rem}
  .hero__lede{font-size:1.1rem}
  .pass__hint{font-size:.62rem;white-space:normal;text-align:center;width:82%}
  .strip{gap:1px;height:4rem}
}

/* ---------- 23. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html.js{--p-pass:1}
  html.js .rv{opacity:1;transform:none}
  .pass{height:auto}
  .pass__stage{position:relative;height:80svh}
  .pass__plate--clean{clip-path:none}
  .pass__plate--dirty{display:none}
  html.js .pass__blade{display:none}
  .pass__hint{display:none}
  .hero__img{transform:none}
  .hero__grain{transform:none}
  html.js .ray{stroke-dasharray:none;stroke-dashoffset:0}
  .route__line::after{transform:none !important}
}

@media print{
  .nav,.hero__scroll,.pass__blade,.drawer,.cc{display:none}
  body{background:#fff;color:#000}
}

/* ============================================================
   24. COOKIETOESTEMMING
   Geen dark pattern: weigeren staat even prominent als aanvaarden,
   en er staat niets voorgevinkt. Dat is geen stijlkeuze maar de
   eis van de GBA (Gegevensbeschermingsautoriteit).
   ============================================================ */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:rgba(4,16,28,.97);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  color:var(--fg-dark);color-scheme:dark;
  box-shadow:0 -1px 0 var(--sodium),0 -24px 60px -30px rgba(4,16,28,1);
  transform:translateY(101%);
  visibility:hidden;
  transition:transform .7s var(--ease),visibility 0s linear .7s;
}
.cc[data-open="true"]{transform:none;visibility:visible;transition:transform .7s var(--ease),visibility 0s}
.cc__in{
  width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto;
  padding-block:clamp(1.4rem,3vw,2rem);
}
.cc__top{display:grid;gap:1.5rem}
@media (min-width:62rem){.cc__top{grid-template-columns:1.6fr 1fr;align-items:start;gap:clamp(2rem,5vw,4rem)}}
.cc h2{
  font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 720;font-weight:720;
  font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.024em;line-height:1.1;margin-bottom:.7rem;
}
.cc p{color:var(--fg-dark-2);font-size:.98rem;line-height:1.55;max-width:60ch}
.cc p a{color:var(--beam-300);text-underline-offset:.2em}
.cc p a:hover{color:var(--sodium)}
.cc__acts{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
@media (min-width:62rem){.cc__acts{justify-content:flex-end}}
.cc__acts .btn{font-size:.95rem;padding:.85em 1.35em}
/* Aanvaarden en weigeren krijgen bewust hetzelfde gewicht. */
.cc__acts .btn--yes{background:var(--sodium);color:var(--ink-900);box-shadow:0 3px 10px -3px rgba(227,154,18,.8)}
.cc__acts .btn--yes:hover{background:#FFD37A}
.cc__acts .btn--no{background:transparent;color:var(--fg-dark);box-shadow:inset 0 0 0 1px rgba(148,186,224,.5)}
.cc__acts .btn--no:hover{background:rgba(148,186,224,.1);box-shadow:inset 0 0 0 1px rgba(148,186,224,.85)}
.cc__more{
  background:none;border:0;padding:.85em .4em;cursor:pointer;color:var(--fg-dark-2);
  font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 600;font-weight:600;
  font-size:.9rem;text-decoration:underline;text-underline-offset:.22em;
  transition:color .25s;
}
.cc__more:hover{color:var(--sodium)}

.cc__panel{display:none;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(148,186,224,.18)}
.cc[data-detail="true"] .cc__panel{display:block}
.cc__cat{
  display:grid;gap:.35rem 1.2rem;padding:1rem 0;
  border-bottom:1px solid rgba(148,186,224,.13);
  grid-template-columns:1fr auto;align-items:start;
}
.cc__cat:last-of-type{border-bottom:0}
.cc__cat h3{
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 660;font-weight:660;
  font-size:1.02rem;letter-spacing:-.012em;
}
.cc__cat p{font-size:.92rem;grid-column:1/-1;max-width:64ch}
.cc__cat[data-locked="true"] .sw{opacity:.45;pointer-events:none}

/* schakelaar */
.sw{position:relative;display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;flex:none}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw__track{
  width:2.9rem;height:1.55rem;border-radius:99px;flex:none;
  background:rgba(148,186,224,.2);
  box-shadow:inset 0 0 0 1px rgba(148,186,224,.3);
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.sw__track::after{
  content:"";display:block;width:1.15rem;height:1.15rem;border-radius:99px;
  margin:.2rem;background:var(--fg-dark-2);
  transition:transform .4s var(--ease),background .35s var(--ease);
}
.sw input:checked + .sw__track{background:rgba(255,194,74,.28);box-shadow:inset 0 0 0 1px var(--sodium)}
.sw input:checked + .sw__track::after{transform:translateX(1.35rem);background:var(--sodium)}
.sw input:focus-visible + .sw__track{outline:2px solid var(--sodium);outline-offset:3px}
.sw__st{
  font-family:var(--display);font-variation-settings:"wdth" 90,"wght" 600;font-weight:600;
  font-size:var(--t-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--fg-dark-2);
  min-width:4.2rem;
}
.sw input:checked ~ .sw__st{color:var(--sodium)}
.cc__panel .cc__acts{margin-top:1.5rem;justify-content:flex-start}

/* ============================================================
   25. BINNENPAGINA'S
   ============================================================ */
/* compacte paginakop, blijft in Act I */
.phero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink-900);
  padding:clamp(8rem,16vh,11rem) var(--gut) clamp(3rem,7vw,5.5rem);
}
.phero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:
    radial-gradient(58% 70% at 84% 6%,rgba(15,98,230,.34),transparent 62%),
    radial-gradient(44% 52% at 4% 96%,rgba(11,79,196,.24),transparent 66%);
}
.phero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.phero__in{width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto;max-width:var(--wrap)}
.phero h1{
  font-family:var(--display);font-variation-settings:"wdth" 116,"wght" 770;font-weight:770;
  font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:.96;letter-spacing:-.035em;max-width:22ch;
}

/* Volle schermhoogte, met de inhoud onderaan zoals in de hero op de
   startpagina. Gebruikt op /over/. */
.phero--tall{
  min-height:100vh;
  display:grid;align-items:end;
  padding-bottom:clamp(3.5rem,8vh,6rem);
}
.phero--tall .phero__in{width:100%}
.phero--tall h1{max-width:24ch}
.phero .lead{margin-top:1.4rem;color:var(--fg-dark-2);max-width:52ch}
.phero__acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}

/* kruimelpad */
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.8rem;color:var(--fg-dark-2)}
.crumbs a{text-decoration:none;transition:color .25s;display:inline-block;padding-block:.4rem}
.crumbs a:hover{color:var(--sodium)}
.crumbs svg{width:.7rem;height:.7rem;opacity:.5}
.crumbs [aria-current]{color:var(--fg-dark)}

/* juridisch document: inhoudsopgave naast prose */
.doc{background:var(--day-050);color:var(--fg-light);color-scheme:light}
.doc__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
@media (min-width:62rem){.doc__grid{grid-template-columns:15rem 1fr}}
.toc{position:sticky;top:6.5rem}
.toc h2{
  font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 620;font-weight:620;
  font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-light-2);margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--rule-light);
}
.toc ol{counter-reset:t;list-style:none;padding:0}
.toc li{counter-increment:t}
.toc a{
  display:flex;gap:.7rem;padding:.42rem 0;text-decoration:none;
  font-size:.93rem;color:var(--fg-light-2);line-height:1.35;
  transition:color .25s,padding-left .35s var(--ease);
}
.toc a::before{content:counter(t);font-variant-numeric:tabular-nums;opacity:.55;flex:none;min-width:1.1rem}
.toc a:hover,.toc a[aria-current="true"]{color:var(--beam-700);padding-left:.3rem}
.toc a[aria-current="true"]::before{color:var(--sodium);opacity:1}
@media (max-width:61.99rem){
  .toc{position:static;padding-bottom:1.5rem;border-bottom:1px solid var(--rule-light)}
  .toc ol{columns:2;column-gap:1.5rem}
  .toc li{break-inside:avoid}
}

.doc__body{max-width:68ch;counter-reset:s}
.doc__body h2{
  counter-increment:s;
  font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 700;font-weight:700;
  font-size:clamp(1.35rem,2.6vw,1.85rem);letter-spacing:-.024em;line-height:1.12;
  margin-top:3.2rem;padding-top:1.6rem;border-top:1px solid var(--rule-light);
  scroll-margin-top:6.5rem;
}
.doc__body > h2:first-of-type{margin-top:0;border-top:0;padding-top:0}
.doc__body h2::before{
  content:counter(s);display:block;
  font-variation-settings:"wdth" 88,"wght" 560;font-weight:560;
  font-size:var(--t-micro);letter-spacing:.18em;color:var(--beam-700);
  margin-bottom:.7rem;font-variant-numeric:tabular-nums;
}
.doc__body h3{
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 660;font-weight:660;
  font-size:1.08rem;letter-spacing:-.014em;margin-top:1.9rem;margin-bottom:.5rem;
}
.doc__body p,.doc__body li{color:var(--fg-light-2)}
.doc__body p + p{margin-top:.9em}
.doc__body h2 + p,.doc__body h3 + p{margin-top:0}
.doc__body ul{list-style:none;padding:0;margin:1rem 0}
.doc__body ul li{position:relative;padding-left:1.5rem;padding-block:.28rem}
.doc__body ul li::before{
  content:"";position:absolute;left:0;top:.85em;width:.55rem;height:1px;background:var(--beam-600);
}
.doc__body a{color:var(--beam-700);text-underline-offset:.22em}
.doc__body strong{color:var(--fg-light);font-weight:600}
.doc__note{
  margin:1.6rem 0;padding:1.1rem 1.3rem;
  background:rgba(255,194,74,.13);border:1px solid rgba(227,154,18,.45);border-radius:2px;
}
.doc__note p{color:var(--fg-light)}
.doc__meta{
  margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--rule-light);
  color:var(--fg-light-2);font-size:.9rem;
}

/* datatabel (cookieoverzicht, tarieven) */
.tbl-wrap{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--rule-light);border-radius:2px}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;min-width:34rem}
.tbl caption{text-align:left;padding:.9rem 1rem;color:var(--fg-light-2);font-size:.88rem;border-bottom:1px solid var(--rule-light)}
.tbl th,.tbl td{padding:.75rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule-light)}
.tbl thead th{
  font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 620;font-weight:620;
  font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--fg-light);
  background:var(--day-100);
}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody th{font-weight:600;color:var(--fg-light);white-space:nowrap}
.tbl td{color:var(--fg-light-2)}
.tbl .tnum{white-space:nowrap}

/* ---------- Realisaties: bewust ongelijke rasters ---------- */
.gal{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1.4vw,1rem);
  grid-auto-flow:dense;margin-top:clamp(2.5rem,5vw,4rem);
}
@media (min-width:52rem){.gal{grid-template-columns:repeat(6,1fr)}}
.gal figure{position:relative;margin:0;overflow:hidden;background:var(--day-200)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease),filter .6s var(--ease)}
.gal button{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden;
  position:relative;
}
.gal button::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,16,28,0) 42%,rgba(4,16,28,.55) 72%,rgba(4,16,28,.88));
  opacity:0;transition:opacity .5s var(--ease);
}
.gal button:hover img,.gal button:focus-visible img{transform:scale(1.045)}
.gal button:hover::after,.gal button:focus-visible::after{opacity:1}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1rem 1.1rem;color:#fff;pointer-events:none;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.gal button:hover + figcaption,.gal button:focus-visible + figcaption{opacity:1;transform:none}
.gal figcaption .lbl{color:var(--sodium);display:block;margin-bottom:.4rem}
.gal figcaption span:last-child{font-size:.95rem;line-height:1.35;display:block}
/* de spans: nooit een net raster */
@media (min-width:52rem){
  .gal .g-w4{grid-column:span 4} .gal .g-w3{grid-column:span 3}
  .gal .g-w2{grid-column:span 2} .gal .g-w6{grid-column:span 6}
  .gal .g-t{aspect-ratio:4/5} .gal .g-s{aspect-ratio:3/2} .gal .g-p{aspect-ratio:16/9}
}
@media (max-width:51.99rem){
  .gal figure{grid-column:span 2;aspect-ratio:3/2}
  .gal .g-t{aspect-ratio:4/5}
  .gal figcaption{opacity:1;transform:none;background:linear-gradient(180deg,transparent,rgba(4,16,28,.8))}
}

/* lichtbak */
.lb{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(4,16,28,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s;
  padding:clamp(1rem,4vw,3rem);
}
.lb[data-open="true"]{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.lb figure{margin:0;max-width:min(100%,72rem);max-height:100%;display:grid;gap:1rem}
.lb img{max-height:78svh;width:auto;margin-inline:auto;object-fit:contain}
.lb figcaption{color:var(--fg-dark-2);text-align:center;font-size:.95rem}
.lb figcaption b{color:var(--fg-dark);display:block;font-weight:600;margin-bottom:.25rem}
.lb__x,.lb__nav{
  position:absolute;background:rgba(148,186,224,.1);border:1px solid rgba(148,186,224,.3);
  color:var(--fg-dark);border-radius:2px;cursor:pointer;padding:.7rem;
  transition:background .3s,border-color .3s,transform .4s var(--ease);
}
.lb__x:hover,.lb__nav:hover{background:rgba(148,186,224,.2);border-color:rgba(148,186,224,.6)}
.lb__x{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__nav--p{left:clamp(.5rem,2vw,1.5rem)}
.lb__nav--n{right:clamp(.5rem,2vw,1.5rem)}
.lb__nav:hover{transform:translateY(-50%) scale(1.06)}
.lb__x svg,.lb__nav svg{width:1.3rem;height:1.3rem}
.lb__count{
  position:absolute;bottom:clamp(1rem,3vw,2rem);left:50%;transform:translateX(-50%);
  color:var(--fg-dark-2);font-variant-numeric:tabular-nums;
}

/* ---------- Voor bedrijven ---------- */
.sectors{
  display:grid;gap:0;margin-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--rule-light);
}
@media (min-width:46rem){.sectors{grid-template-columns:1fr 1fr}}
@media (min-width:70rem){.sectors{grid-template-columns:repeat(3,1fr)}}
.sector{
  padding:clamp(1.5rem,3vw,2.1rem) 0;border-bottom:1px solid var(--rule-light);
  display:grid;gap:.6rem;align-content:start;
}
@media (min-width:46rem){
  .sector{padding-inline:clamp(1rem,2.4vw,2rem)}
  .sector:nth-child(odd){padding-left:0}
  .sector + .sector{border-left:1px solid var(--rule-light)}
}
@media (min-width:70rem){
  .sector:nth-child(3n+1){padding-left:0;border-left:0}
  .sector:nth-child(odd){padding-left:clamp(1rem,2.4vw,2rem)}
  .sector:nth-child(3n+1){padding-left:0}
}
.sector h3{
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 660;font-weight:660;
  font-size:1.1rem;letter-spacing:-.015em;
}
.sector p{color:var(--fg-light-2);font-size:.97rem;line-height:1.5;max-width:38ch}
/* Was --sodium-deep: dat haalt 2,19:1 op daglicht en is bovendien
   voorbehouden aan het element dat nu actief is. Een volgnummer is
   dat niet, dus het staat in de blauwe familie. */
.sector .lbl{color:var(--beam-700)}

/* twee kolommen tegenover elkaar (met/zonder contract) */
.versus{display:grid;gap:0;margin-top:clamp(2.5rem,5vw,4rem);border:1px solid var(--rule-light);border-radius:2px;overflow:hidden}
@media (min-width:52rem){.versus{grid-template-columns:1fr 1fr}}
.versus__col{padding:clamp(1.6rem,3.4vw,2.6rem)}
.versus__col + .versus__col{border-top:1px solid var(--rule-light)}
@media (min-width:52rem){.versus__col + .versus__col{border-top:0;border-left:1px solid var(--rule-light)}}
.versus__col--pick{background:var(--day-100);box-shadow:inset 0 3px 0 var(--sodium)}
.versus h3{margin-bottom:.4rem}
.versus ul{list-style:none;padding:0;margin-top:1.3rem;display:grid;gap:.65rem}
.versus li{position:relative;padding-left:1.7rem;color:var(--fg-light-2);font-size:.98rem;line-height:1.45}
.versus li svg{position:absolute;left:0;top:.28em;width:1rem;height:1rem}
.versus .yes svg{color:var(--beam-600)}
.versus .no svg{color:var(--fg-light-2);opacity:.6}
.versus__price{
  margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--rule-light);
  font-family:var(--display);font-variation-settings:"wdth" 114,"wght" 740;font-weight:740;
  font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em;color:var(--fg-light);
}
.versus__price small{
  display:block;font-variation-settings:"wdth" 90,"wght" 550;font-weight:550;
  font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-light-2);margin-top:.5rem;
}

/* ---------- Over Thibaut ---------- */
.story{background:var(--day-050)}
.story__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
@media (min-width:60rem){.story__grid{grid-template-columns:5fr 7fr}}
.story__body p{color:var(--fg-light-2);max-width:64ch;font-size:1rem;line-height:1.6}
.story__body p + p{margin-top:1em}
.story__body p.big{
  font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 600;font-weight:600;
  font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.34;letter-spacing:-.018em;
  color:var(--fg-light);max-width:36ch;
}
.facts{
  display:grid;gap:0;margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--rule-light);
}
@media (min-width:46rem){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{padding:1.4rem 0;border-bottom:1px solid var(--rule-light)}
@media (min-width:46rem){
  .fact{padding:1.6rem clamp(.8rem,2vw,1.6rem)}
  .fact:first-child{padding-left:0}
  .fact + .fact{border-left:1px solid var(--rule-light)}
}
.fact dt{
  font-family:var(--display);font-variation-settings:"wdth" 90,"wght" 600;font-weight:600;
  font-size:var(--t-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--fg-light-2);
  margin-bottom:.6rem;
}
.fact dd{
  margin:0;font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 720;font-weight:720;
  font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:-.022em;line-height:1.1;color:var(--fg-light);
}

/* volgende-pagina-koppelingen onderaan */
.next{background:var(--day-100);color:var(--fg-light);color-scheme:light;border-top:1px solid var(--rule-light)}
.next__grid{display:grid;gap:0}
@media (min-width:52rem){.next__grid{grid-template-columns:1fr 1fr}}
.next a{
  display:grid;gap:.6rem;padding:clamp(2rem,4vw,3rem) clamp(1rem,3vw,2.5rem);
  text-decoration:none;position:relative;
  transition:background .4s var(--ease);
}
.next a:first-child{padding-left:0}
@media (min-width:52rem){.next a + a{border-left:1px solid var(--rule-light)}}
@media (max-width:51.99rem){.next a + a{border-top:1px solid var(--rule-light)}}
.next a:hover{background:rgba(15,98,230,.05)}
.next .lbl{color:var(--fg-light-2)}
.next strong{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 720;font-weight:720;
  font-size:clamp(1.3rem,2.6vw,1.85rem);letter-spacing:-.026em;line-height:1.1;color:var(--fg-light);
  display:flex;align-items:center;gap:.6rem;
}
.next strong svg{width:.85em;height:.85em;flex:none;color:var(--beam-600);transition:transform .5s var(--ease)}
.next a:hover strong svg{transform:translateX(.35rem)}
.next p{color:var(--fg-light-2);font-size:.97rem;max-width:36ch}

/* Over-pagina: de hoge hero vult op een telefoon geen heel scherm meer,
   anders staat er een lege donkere band boven het kruimelpad. */
@media (max-width:700px){
  .phero--tall{min-height:auto;display:block}
}

/* ---------- Telefoon: hero en stralendiagram ---------- */
/* Het diagram heeft een eigen telefoonversie (smaller viewBox, grotere
   letters en dikkere stralen). De brede versie wordt op een gsm tot
   haarlijnen en onleesbare labels samengeperst. */
.optics__m{display:none}
@media (max-width:700px){
  .optics__d{display:none}
  .optics__m{display:block}
  .optics__m .plate-txt{font-size:13px;letter-spacing:1.1px}
  .optics__m .ray-in{stroke-width:2.4}
  .optics__m .ray-scatter{stroke-width:1.6;opacity:.7}
  .optics__m .ray-through{stroke-width:2.6}
}
/* Hero op een gsm: staand beeld van het raam en de trekker, bovenaan
   minder donker zodat je het raam effectief ziet. De tekst onderaan
   blijft op de donkere verloop staan en dus leesbaar. */
@media (max-width:800px){
  .hero{background:var(--ink-900);min-height:auto;padding-top:calc(86vw + 1.5rem)}
  .hero__frame{bottom:auto;height:calc(86vw + 8rem)}
  .hero__img{width:100%;height:100%;left:0;top:0;object-position:50% 0;filter:saturate(.95) contrast(1.05);transform:none}
  .hero__soil{
    background-image:
      repeating-linear-gradient(97deg,rgba(200,224,246,.045) 0 2px,transparent 2px 13px),
      linear-gradient(180deg,rgba(4,16,28,.42) 0,rgba(4,16,28,.04) 6rem,rgba(4,16,28,.08) calc(86vw - 3rem),rgba(4,16,28,.82) calc(86vw + 1.5rem),var(--ink-900) calc(86vw + 7.5rem));
  }
}