/* ============================================================
   The Goodplace, homepage-redesign, richting "ink-first"
   Eén ondergrond, enorme Lufga, werk levert de kleur.
   ============================================================ */

:root{
  --ink:#141138;
  --ink-deep:#1B1550;
  --ink-soft:#2A2278;
  --ink-line:#3E3490;
  --purple:#7600FF;
  --purple-lt:#CB9EFF;
  --violet:#3905D8;
  --fuchsia:#C9126B;
  --magenta:#EB1551;
  --sand:#F1E9DE;
  --sand-deep:#E4D7C6;
  --white:#FFFFFF;
  --muted:#BFBAD8;
  --faint:#ACA6CA;

  --grad:linear-gradient(135deg,#3905D8 0%,#7C0BA1 45%,#C9126B 75%,#EB1551 100%);
  /* Aparte verloop voor tekst. Het merkverloop is prachtig als vlak,
     maar de eerste twee stops halen op inkt geen 3:1. Deze wel. */
  --grad-tx:linear-gradient(135deg,#8A57FF 0%,#B85CFF 45%,#F2588C 78%,#FF5B78 100%);
  --tx:#FFFFFF;
  --surface:linear-gradient(180deg,rgba(62,52,148,.52),rgba(37,30,102,.22));
  --surface-2:rgba(62,52,148,.36);
  --field-bg:rgba(37,30,102,.52);
  --nav-bg:rgba(24,18,70,.84);
  --dock-bg:rgba(46,38,120,.80);
  --solid-bg:#FFFFFF; --solid-tx:#141138; --solid-hover:#F1E9DE;
  --line-tx:#FFFFFF; --line-bd:rgba(255,255,255,.40); --line-bd-h:#FFFFFF;
  --ctrl-bd:#6E6994;
  --glow-a:rgba(57,5,216,.34); --glow-b:rgba(201,18,107,.26);
  --glow-cta:rgba(118,0,255,.38); --glow-cta2:rgba(235,21,81,.14);
  --veld-op:1;
  --plan-mid:linear-gradient(180deg,rgba(86,20,190,.50),rgba(37,30,102,.26));
  --hero-veil:rgba(27,21,80,.66);
  --hoogte-kleur:#CB9EFF; --hoogte-op:.075;
  --veld-a:radial-gradient(34% 38% at 24% 30%,rgba(57,5,216,.74),transparent 62%),
           radial-gradient(30% 34% at 76% 26%,rgba(201,18,107,.56),transparent 64%);
  --veld-b:radial-gradient(38% 42% at 54% 76%,rgba(118,0,255,.62),transparent 64%),
           radial-gradient(24% 28% at 90% 64%,rgba(235,21,81,.5),transparent 62%);
  --shadow-lg:0 18px 50px rgba(0,0,0,.5);
  --font:"Lufga","Poppins","Avenir Next",sans-serif;
  --mono:"Lufga","Poppins","Avenir Next",sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
  --pad:clamp(20px,5vw,72px);
  --max:1320px;
}

/* Deze pagina committeert zich aan één donkere wereld.
   Alles krijgt daarom een expliciete kleur, ook de body. */
:root[data-site-theme="light"]{
  --ink-deep:#FBFAF8;
  --ink-soft:#F0ECE4;
  --ink-line:#E5DFD5;
  --muted:#57526E;
  --faint:#5A5570;
  --purple-lt:#5101B0;
  --tx:#141138;
  --surface:linear-gradient(180deg,#FFFFFF,#FAF8F4);
  --surface-2:#FFFFFF;
  --field-bg:#FFFFFF;
  --nav-bg:rgba(251,250,248,.86);
  --dock-bg:rgba(255,255,255,.86);
  --solid-bg:#141138; --solid-tx:#FFFFFF; --solid-hover:#2B2760;
  --line-tx:#141138; --line-bd:rgba(20,17,56,.48); --line-bd-h:#141138;
  --ctrl-bd:#807B96;
  --glow-a:rgba(118,0,255,.13); --glow-b:rgba(235,21,81,.10);
  --glow-cta:rgba(118,0,255,.16); --glow-cta2:rgba(235,21,81,.08);
  --grad-tx:linear-gradient(135deg,#3905D8 0%,#7C0BA1 45%,#B00E5C 78%,#C9126B 100%);
  /* in het licht een pastelversie van hetzelfde veld, anders wordt de
     tekst in de hero op een middentoon gelegd en zakt het contrast */
  --veld-op:1;
  --plan-mid:linear-gradient(180deg,#F4EEFF,#FFFFFF);
  --hero-veil:rgba(251,250,248,.82);
  --hoogte-kleur:#5101B0; --hoogte-op:.05;
  --veld-a:radial-gradient(34% 38% at 24% 30%,rgba(118,0,255,.13),transparent 62%),
           radial-gradient(30% 34% at 76% 26%,rgba(235,21,81,.11),transparent 64%);
  --veld-b:radial-gradient(38% 42% at 54% 76%,rgba(118,0,255,.12),transparent 64%),
           radial-gradient(24% 28% at 90% 64%,rgba(235,21,81,.10),transparent 62%);
  --shadow-lg:0 18px 44px rgba(20,17,56,.14);
}

*{box-sizing:border-box}

/* Een rustig kleurveld achter de hele site, zodat geen enkel scherm
   als vlak zwart leest. Vast in beeld, dus het schuift niet mee. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(72% 60% at -2% -10%,rgba(96,30,255,.62),transparent 70%),
    radial-gradient(58% 48% at 104% 4%,rgba(225,26,124,.36),transparent 70%),
    radial-gradient(64% 54% at 102% 90%,rgba(235,21,81,.26),transparent 70%),
    radial-gradient(86% 64% at 30% 112%,rgba(128,20,255,.52),transparent 72%),
    linear-gradient(152deg,rgba(74,20,225,.34) 0%,rgba(27,21,80,0) 46%,
                    rgba(27,21,80,0) 56%,rgba(201,18,107,.22) 100%);
}
:root[data-site-theme="light"] body::before{
  background:
    radial-gradient(58% 44% at 4% -6%,rgba(118,0,255,.11),transparent 62%),
    radial-gradient(46% 36% at 99% 8%,rgba(235,21,81,.07),transparent 64%),
    radial-gradient(70% 50% at 44% 106%,rgba(118,0,255,.09),transparent 66%);
}

body{
  margin:0;background:var(--ink-deep);color:var(--tx);
  font-family:var(--font);font-weight:400;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--purple-lt);outline-offset:3px;border-radius:4px}
img,svg{max-width:100%}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--font);font-size:13.5px;font-weight:500;letter-spacing:-.005em;
  color:var(--purple-lt);display:inline-flex;align-items:center;
  background:rgba(118,0,255,.16);border:1px solid rgba(203,158,255,.2);
  border-radius:999px;padding:8px 16px;
}

/* ---------- navigatie ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:20px;
  padding:18px var(--pad);
  transition:background-color .3s var(--ease),padding .3s var(--ease),backdrop-filter .3s;
}
.nav.stuck{background:var(--nav-bg);backdrop-filter:blur(14px);padding-block:12px;border-bottom:1px solid var(--ink-line)}
.nav__logo{height:38px;width:auto;color:var(--tx);transition:height .3s var(--ease)}
.nav.stuck .nav__logo{height:30px}
.nav__links{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav__links a{font-size:15px;font-weight:400;color:var(--muted);position:relative;padding:4px 0;transition:color .18s}
.nav__links a:hover,.nav__links a.on{color:var(--tx)}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--purple-lt);
  transition:width .25s var(--ease);
}
.nav__links a:hover::after{width:100%}
.nav__cta{
  background:var(--solid-bg);color:var(--solid-tx);border:0;border-radius:999px;padding:12px 22px;
  font-size:14.5px;font-weight:500;cursor:pointer;transition:transform .2s var(--ease),background-color .2s;
}
.nav__cta:hover{transform:translateY(-2px);background:var(--solid-hover)}

/* ---------- zwevende actiepil ---------- */
.dock{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:39;
  display:flex;align-items:center;gap:14px;
  background:var(--dock-bg);backdrop-filter:blur(16px);
  border:1px solid var(--ink-line);border-radius:999px;padding:7px 7px 7px 20px;
  box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transform:translate(-50%,140%);
  transition:transform .45s var(--ease),opacity .35s;
}
.dock.on{opacity:1;pointer-events:auto;transform:translateX(-50%)}
.dock.off{opacity:0;pointer-events:none;transform:translate(-50%,140%)}
.dock__txt{font-size:14px;color:var(--muted);white-space:nowrap}
.dock__txt b{color:var(--tx);font-weight:500}
.dock__btn{
  background:var(--purple);color:#fff;border:0;border-radius:999px;padding:11px 20px;
  font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background-color .2s;
}
.dock__btn:hover{background:#6401D9}
.dock__btn svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.dock__btn:hover svg{transform:translateX(3px)}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:clamp(120px,17vw,190px);padding-bottom:clamp(44px,8vw,124px);overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 0%,transparent 42%,var(--hero-veil) 100%);
}
.hero__in{position:relative;z-index:2}
.hero h1{
  font-size:clamp(42px,9.6vw,136px);letter-spacing:-.05em;line-height:1.02;
  max-width:14ch;margin-top:20px;
}
.hero h1 .ln{display:block;line-height:1.02}
.hero h1 .ln > span{display:block;animation:lnup .8s var(--ease) both}
.hero h1 .ln:nth-child(1) > span{animation-delay:.05s}
.hero h1 .ln:nth-child(2) > span{animation-delay:.15s}
.hero h1 .ln:nth-child(3) > span{animation-delay:.25s}
@keyframes lnup{from{transform:translateY(.16em)}to{transform:none}}
.hero h1 em{font-style:normal;background:var(--grad-tx);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{
  margin-top:clamp(22px,3vw,34px);max-width:46ch;font-size:clamp(16.5px,1.5vw,20px);
  color:var(--muted);line-height:1.6;
}
.hero__row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;align-items:center}
.btn{
  border:0;border-radius:999px;padding:17px 30px;font-size:16px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;transition:transform .2s var(--ease),background-color .2s,color .2s;
  position:relative;
}
.btn svg{width:17px;height:17px;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--light{background:var(--solid-bg);color:var(--solid-tx)}
.btn--light:hover{background:var(--solid-hover);transform:translateY(-2px)}
.btn--line{background:transparent;color:var(--line-tx);box-shadow:inset 0 0 0 1.5px var(--line-bd)}
.btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--line-bd-h);transform:translateY(-2px)}
.btn--purple{background:var(--purple);color:#fff}
.btn--purple:hover{background:#6401D9;transform:translateY(-2px)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#2B2760;transform:translateY(-2px)}
.btn .spinner{display:none}
.btn[disabled]{cursor:default;opacity:.85}
.btn[disabled]:hover{transform:none}
.btn.is-loading .btn__label,.btn.is-loading svg{visibility:hidden}
.btn.is-loading .spinner{
  display:block;position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:gpspin .7s linear infinite;
}
@keyframes gpspin{to{transform:rotate(360deg)}}

.meter{
  position:absolute;z-index:3;top:clamp(96px,13vw,140px);right:var(--pad);
  display:flex;align-items:center;gap:11px;
  border:1px solid var(--ink-line);background:var(--dock-bg);backdrop-filter:blur(10px);
  border-radius:999px;padding:8px 16px 8px 8px;font-size:13px;color:var(--muted);
}
.meter__dot{width:26px;height:26px;border-radius:50%;background:var(--grad);flex:none;position:relative}
.meter__dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--purple);opacity:.45;animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.85);opacity:.55}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.meter b{color:var(--tx);font-weight:500}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);
  padding:22px 0;overflow:hidden;position:relative;
}
.marquee__track{display:flex;gap:56px;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee span{
  font-size:clamp(17px,2vw,24px);font-weight:500;letter-spacing:-.02em;color:var(--faint);
  white-space:nowrap;transition:color .25s;
}
.marquee span:hover{color:var(--tx)}

/* ---------- secties ---------- */
section{position:relative}
.sec{padding-block:clamp(72px,11vw,150px)}
.sec__head{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(34px,5vw,58px)}
.sec__head h2{font-size:clamp(32px,6vw,76px);letter-spacing:-.045em;max-width:15ch}
.sec__head p{color:var(--muted);max-width:38ch;font-size:16.5px}

/* werk */
.work{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(12,1fr)}
.tile{
  grid-column:span 6;position:relative;border-radius:24px;overflow:hidden;
  background:var(--ink-soft);display:block;cursor:pointer;isolation:isolate;
  transition:transform .45s var(--ease);
  color:#fff; /* tekst ligt op beeld en blijft in beide thema's wit */
}
.tile:hover{transform:translateY(-6px)}
.tile--wide{grid-column:span 12}
.tile--third{grid-column:span 4}
.tile__art{aspect-ratio:4/3;position:relative;overflow:hidden}
.tile--wide .tile__art{aspect-ratio:21/9}
.tile__art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tile__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,32,0) 35%,rgba(10,8,32,.92) 100%);z-index:2}
/* Op een echte foto, vaak licht, moet de sluier eerder inzetten en dieper
   worden, anders staat witte tekst op een lichte lucht. */
.tile__art:has(.tile__img) .tile__veil{
  background:linear-gradient(180deg,rgba(10,8,32,0) 8%,rgba(10,8,32,.66) 46%,rgba(10,8,32,.97) 100%)
}
/* Op een telefoon wordt de brede tegel 4:3, waardoor de titel op een ander
   en vaak lichter deel van de foto valt. Daar moet de sluier dus eerder aan. */
@media (max-width:860px){
  .tile__art:has(.tile__img) .tile__veil{
    background:linear-gradient(180deg,rgba(10,8,32,0) 0%,rgba(10,8,32,.74) 42%,rgba(10,8,32,.97) 100%)
  }
}
.tile__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,34px);z-index:3}
.tile__name{font-size:clamp(22px,2.8vw,40px);letter-spacing:-.04em;font-weight:600}
.tile__line{color:rgba(255,255,255,.88);font-size:15px;margin-top:6px;max-width:40ch}
.tile__tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.tag{
  font-family:var(--font);font-size:13px;font-weight:400;letter-spacing:-.005em;
  border:1px solid var(--line-bd);border-radius:999px;padding:6px 14px;color:var(--tx);
}
.tile__body .tag{border-color:rgba(255,255,255,.44);color:#fff}
.tile__go{
  position:absolute;top:clamp(16px,2vw,26px);right:clamp(16px,2vw,26px);z-index:3;
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);
  opacity:0;transform:translate(6px,-6px);transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .2s;
}
.tile:hover .tile__go{opacity:1;transform:none}
.tile__go:hover{background:var(--purple);border-color:var(--purple)}
.tile__go svg{width:19px;height:19px}

/* expertises */
.exp{border-top:1px solid var(--ink-line)}
.exp__row{
  border-bottom:1px solid var(--ink-line);padding-block:clamp(22px,3vw,34px);
  display:grid;grid-template-columns:74px minmax(0,1fr) minmax(0,1fr) 56px;
  grid-template-rows:auto auto;gap:clamp(14px,2.5vw,40px);
  align-items:start;cursor:pointer;position:relative;transition:padding-left .35s var(--ease);
}
.exp__no{grid-column:1/2;grid-row:1/2}
.exp__name-wrap{grid-column:2/3;grid-row:1/2}
.exp__txt{grid-column:3/4;grid-row:1/2}
.exp__plus{grid-column:4/5;grid-row:1/2}
.exp__list{grid-column:2/4;grid-row:2/3}
.exp__row::before{
  content:"";position:absolute;left:-20px;right:-20px;top:0;bottom:0;border-radius:18px;z-index:-1;
  background:linear-gradient(90deg,rgba(118,0,255,.16),rgba(235,21,81,.06) 70%,transparent);
  opacity:0;transition:opacity .35s var(--ease);
}
.exp__row:hover::before,.exp__row.open::before{opacity:1}
.exp__row:hover,.exp__row.open{padding-left:20px}
.exp__no{font-family:var(--font);font-size:15px;font-weight:500;color:var(--faint);padding-top:12px;font-variant-numeric:tabular-nums}
.exp__name{font-size:clamp(24px,3.2vw,44px);letter-spacing:-.04em;font-weight:600;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.exp__txt{color:var(--muted);font-size:16px;max-width:44ch;padding-top:6px}
.exp__list{display:none;flex-wrap:wrap;gap:7px;margin-top:16px}
.exp__row.open .exp__list{display:flex}
.exp__plus{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--ctrl-bd);display:grid;place-items:center;
  transition:transform .35s var(--ease),background-color .25s,border-color .25s;color:var(--tx);
}
.exp__row.open .exp__plus{transform:rotate(45deg);background:var(--purple);border-color:var(--purple)}
.exp__plus svg{width:16px;height:16px}

/* manifest, het lichte blok */
.manifest{background:var(--sand);color:var(--ink)}
.manifest .wrap{padding-block:clamp(72px,11vw,150px)}
.manifest h2{font-size:clamp(30px,5.4vw,68px);letter-spacing:-.045em;max-width:17ch}
.manifest .lead{color:#4A4468;font-size:clamp(17px,1.7vw,21px);max-width:52ch;margin-top:24px;line-height:1.6}
.manifest .eyebrow{color:#5101B0;background:rgba(81,1,176,.09);border-color:rgba(81,1,176,.2)}
.pillars{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:clamp(36px,5vw,58px)}
.pillar{border-top:2px solid var(--ink);padding-top:20px}
.pillar h3{font-size:22px;letter-spacing:-.03em;margin-bottom:8px}
.pillar p{font-size:15px;color:#4A4468;line-height:1.6}

/* cijfers */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(40px,5vw,64px)}
.stat b{display:block;font-size:clamp(44px,7vw,96px);letter-spacing:-.05em;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;color:#4A4468;font-size:14.5px;margin-top:10px;max-width:22ch}

/* aanpak */
.steps{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{
  border:1px solid var(--ink-line);border-radius:22px;padding:clamp(22px,2.6vw,32px);
  background:var(--surface);
  transition:border-color .3s,transform .3s var(--ease);
}
.step:hover{border-color:var(--purple);transform:translateY(-4px)}
.step__no{display:inline-block;font-size:12.5px;font-weight:500;color:var(--purple-lt);background:rgba(118,0,255,.16);border-radius:999px;padding:6px 13px}
.step h3{font-size:21px;letter-spacing:-.03em;margin:14px 0 8px}
.step p{color:var(--muted);font-size:15px;line-height:1.6}

/* team */
.team{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.face{
  width:84px;height:84px;border-radius:50%;position:relative;overflow:hidden;flex:none;
  background:var(--ink-soft);display:grid;place-items:center;
  transition:transform .3s var(--ease);
}
.face:hover{transform:translateY(-5px) scale(1.04)}
.face svg{width:58%;height:auto;opacity:.9}
.face--join{border:1px dashed var(--ink-line);background:transparent;font-size:13px;color:var(--muted)}

/* insights */
.posts{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.post{
  border-top:1px solid var(--ink-line);padding-top:22px;cursor:pointer;
  transition:border-color .3s;
}
.post:hover{border-color:var(--purple-lt)}
.post__k{display:inline-block;font-size:12.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--ink-line);border-radius:999px;padding:6px 13px}
.post h3{font-size:clamp(19px,2vw,25px);letter-spacing:-.03em;margin:12px 0 10px;transition:color .25s}
.post:hover h3{color:var(--purple-lt)}
.post p{color:var(--muted);font-size:14.5px;line-height:1.6}

/* slot */
.cta{position:relative;overflow:hidden;text-align:center;padding-block:clamp(84px,13vw,170px)}
.cta__glow{
  position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--glow-cta),var(--glow-cta2) 45%,transparent 68%);
  filter:blur(20px);z-index:0;pointer-events:none;
}
.cta__in{position:relative;z-index:1;display:grid;justify-items:center;gap:26px}
.cta h2{font-size:clamp(34px,7.5vw,104px);letter-spacing:-.05em;max-width:13ch}
.cta p{color:var(--muted);max-width:44ch;font-size:17px}
.seal{width:clamp(120px,16vw,178px);height:auto;color:var(--tx)}
.seal text{font-family:var(--font);font-size:9.2px;font-weight:500;letter-spacing:.245em;text-transform:uppercase;fill:currentColor}
.seal-spin{transform-origin:50% 50%;animation:sealspin 34s linear infinite}
@keyframes sealspin{to{transform:rotate(360deg)}}

/* footer */
.foot{border-top:1px solid var(--ink-line);padding-block:clamp(44px,6vw,72px)}
.foot__grid{display:grid;gap:clamp(26px,4vw,56px);grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr))}
.foot__logo{height:44px;width:auto;color:var(--tx)}
.foot__addr{color:var(--muted);font-size:14.5px;margin-top:20px;line-height:1.7}
.foot h4{font-size:15px;letter-spacing:-.015em;color:var(--tx);font-weight:500;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot li a{color:var(--muted);font-size:14.5px;line-height:1.4;display:inline-block;transition:color .2s}
.foot li a:hover{color:var(--tx)}
.foot__bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-top:clamp(34px,5vw,56px);padding-top:22px;border-top:1px solid var(--ink-line);color:var(--faint);font-size:13px}

/* onthullen bij scrollen, alleen als JS draait */
body.anim .rv{opacity:0;transform:translateY(26px)}
body.anim .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}


@media (max-width:1100px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .exp__row{grid-template-columns:52px minmax(0,1fr) 46px;grid-template-rows:auto auto auto;row-gap:8px}
  .exp__no{grid-column:1/2;grid-row:1/2}
  .exp__name-wrap{grid-column:2/3;grid-row:1/2}
  .exp__plus{grid-column:3/4;grid-row:1/2}
  .exp__txt{grid-column:2/4;grid-row:2/3;padding-top:0}
  .exp__list{grid-column:2/4;grid-row:3/4;margin-top:4px}
}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
  .tile,.tile--third{grid-column:span 12}
  .tile--wide .tile__art{aspect-ratio:4/3}
  .meter{display:none}
    .dock{left:var(--pad);right:var(--pad);justify-content:space-between;padding-left:16px;transform:translateY(140%)}
  .dock.on{transform:none}
  .dock.off{transform:translateY(140%)}
  .dock__txt{font-size:12.5px;white-space:normal}


  /* expertises: naam met plus, daaronder de tekst en pas dan de tags */
  .exp__row{
    grid-template-columns:minmax(0,1fr) 46px;
    grid-template-rows:auto auto auto;
    column-gap:14px;row-gap:9px;align-items:start;
  }
  .exp__name-wrap{grid-column:1/2;grid-row:1/2}
  .exp__plus{grid-column:2/3;grid-row:1/2;align-self:start}
  .exp__txt{grid-column:1/-1;grid-row:2/3;padding-top:0}
  .exp__list{grid-column:1/-1;grid-row:3/4;margin-top:2px}
  .exp__no{display:none}
  .exp__name{font-size:clamp(22px,6.4vw,30px)}
  .exp__row:hover,.exp__row.open{padding-left:0}
  .exp__row::before{left:-14px;right:-14px}
}
@media (max-width:620px){
  .nav__cta{display:none}
  .themebtn{margin-left:auto}
  .nav{gap:10px}
  .nav__logo{height:32px}
  .nav.stuck .nav__logo{height:28px}

}
@media (max-width:560px){
  /* twee smalle kolommen, met het merkblok over de volle breedte */
  .foot__grid{grid-template-columns:1fr 1fr;gap:24px 18px}
  .foot__grid > :first-child{grid-column:1/-1}
  .foot h4{margin-bottom:10px}
  .foot li a{font-size:14px}
  .foot__logo{height:38px}
  .dock__txt{display:none}
  .dock{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  body.anim .rv{opacity:1;transform:none}
}

/* voortgangsbalk bij artikelen */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--grad);z-index:45;transition:width .1s linear}

/* compacte paginakop */
.phero{position:relative;padding-top:clamp(118px,15vw,178px);padding-bottom:clamp(28px,4vw,52px);overflow:hidden}
.phero::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:150%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 22% 38%,var(--glow-a),transparent 70%),
             radial-gradient(46% 46% at 78% 20%,var(--glow-b),transparent 72%);
}
.phero > *{position:relative;z-index:1}
.phero h1{font-size:clamp(38px,7.4vw,96px);letter-spacing:-.05em;line-height:1.0;max-width:16ch;margin-top:18px;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.phero h1.h1--long{font-size:clamp(32px,5.4vw,66px);letter-spacing:-.04em;max-width:19ch}
.phero .claim{font-size:clamp(21px,2.7vw,34px);letter-spacing:-.03em;line-height:1.2;color:var(--tx);font-weight:500;max-width:22ch;margin-top:20px}
.phero .sub{color:var(--muted);max-width:52ch;margin-top:22px;font-size:clamp(16px,1.5vw,19px);line-height:1.6}
.crumbs{font-size:13.5px;color:var(--faint);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--faint);transition:color .2s}
.crumbs a:hover{color:var(--purple-lt)}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,38px)}
.filt{
  border:1px solid var(--ctrl-bd);background:transparent;color:var(--muted);border-radius:999px;
  padding:9px 17px;font-size:13.5px;cursor:pointer;transition:border-color .2s,color .2s,background-color .2s;
}
.filt:hover{color:var(--tx);border-color:var(--purple-lt)}
.filt[aria-pressed="true"]{background:var(--solid-bg);color:var(--solid-tx);border-color:var(--solid-bg);font-weight:500}

/* kerncijfers van een case */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(16px,2.4vw,30px);
  border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);padding-block:clamp(26px,3.4vw,40px)}
.kpi b{display:block;font-size:clamp(34px,4.6vw,58px);letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.kpi span{display:block;color:var(--muted);font-size:14px;margin-top:9px;max-width:24ch}

/* feitenregel */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;margin-top:clamp(26px,3vw,40px)}
.fact dt{font-size:13.5px;color:var(--faint);margin-bottom:6px}
.fact dd{margin:0;font-size:15.5px;color:var(--tx)}

/* lopende tekst */
.prose{max-width:64ch;color:var(--muted);font-size:17px;line-height:1.75}
.prose h3{color:var(--tx);font-size:clamp(22px,2.8vw,32px);letter-spacing:-.035em;margin:clamp(34px,4vw,54px) 0 14px}
.prose h3:first-child{margin-top:0}
.prose p + p{margin-top:16px}
.prose strong{color:var(--tx);font-weight:500}
.prose ul{margin:16px 0 0;padding-left:0;list-style:none;display:grid;gap:10px}
.prose li{padding-left:26px;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--grad)}

/* beeldvlak, staat voor fotografie */
.shot{border-radius:22px;overflow:hidden;position:relative;background:var(--ink-soft)}
.shot__in{aspect-ratio:16/9;position:relative}
.shot__mark{position:absolute;right:-8%;bottom:-30%;width:46%;height:auto;opacity:.26;mix-blend-mode:overlay}
.shot__cap{
  position:absolute;left:14px;bottom:14px;z-index:2;font-size:13px;
  color:#FFFFFF;background:rgba(10,8,32,.78);backdrop-filter:blur(6px);
  border-radius:999px;padding:6px 14px;
}
.shots{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* citaat */
.quote{border-left:2px solid var(--purple);padding-left:clamp(20px,3vw,34px);max-width:60ch}
.quote p{font-size:clamp(20px,2.6vw,30px);line-height:1.35;letter-spacing:-.025em;color:var(--tx);font-weight:400}
.quote cite{display:block;margin-top:18px;font-style:normal;font-size:14px;color:var(--muted)}

/* volgende case */
.next{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  border-top:1px solid var(--ink-line);padding-top:clamp(28px,4vw,46px);margin-top:clamp(46px,6vw,80px);
}
.next span{font-size:13.5px;color:var(--faint)}
.next b{display:block;font-size:clamp(26px,4vw,48px);letter-spacing:-.04em;font-weight:600;margin-top:8px}

/* expertiseblokken */
.xcard{
  border:1px solid var(--ink-line);border-radius:26px;padding:clamp(24px,3vw,40px);
  background:var(--surface);
  display:flex;flex-direction:column;gap:16px;transition:border-color .3s,transform .35s var(--ease);
}
.xcard:hover{border-color:var(--purple);transform:translateY(-5px)}
.xcard__no{display:inline-block;font-size:13px;font-weight:500;color:var(--purple-lt);background:rgba(118,0,255,.16);border-radius:999px;padding:6px 13px;align-self:flex-start;font-variant-numeric:tabular-nums}
.xcard h3{font-size:clamp(23px,2.8vw,33px);letter-spacing:-.04em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.xcard p{color:var(--muted);font-size:15.5px;line-height:1.6}
.xcard__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px}

.xgrid{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:1fr}
@media (min-width:860px){.xgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* tijdlijn */
.tl{display:grid;gap:0;margin-top:clamp(28px,4vw,46px)}
.tl__row{display:grid;grid-template-columns:128px minmax(0,1fr);gap:clamp(16px,3vw,40px);padding-block:22px;border-top:1px solid var(--ink-line);align-items:baseline}
.tl__row:last-child{border-bottom:1px solid var(--ink-line)}
.tl__yr{font-size:17px;font-weight:500;color:var(--purple-lt);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tl__txt h4{font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.tl__txt p{color:var(--muted);font-size:15px;line-height:1.6;max-width:56ch}

/* teamkaarten */
.people{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.person{border-radius:20px;overflow:hidden;background:var(--ink-soft);transition:transform .3s var(--ease)}
.person:hover{transform:translateY(-5px)}
.person__art{aspect-ratio:1/1;display:grid;place-items:center;position:relative;overflow:hidden}
.person__art svg{width:52%;height:auto;opacity:.92}
.person__b{padding:16px 18px 20px}
.person__b b{display:block;font-size:16.5px;font-weight:500;letter-spacing:-.02em}
.person__b span{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}

/* uitgelicht artikel */
.feature{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,40px);
  align-items:center;border:1px solid var(--ink-line);border-radius:26px;overflow:hidden;
  background:var(--surface);
}
.feature__art{aspect-ratio:4/3;position:relative;overflow:hidden;min-height:220px}
.feature__b{padding:clamp(22px,3vw,40px)}
.feature__b h3{font-size:clamp(24px,3.2vw,40px);letter-spacing:-.04em;margin:14px 0 12px}
.feature__b p{color:var(--muted);font-size:16px;line-height:1.65;max-width:46ch}

/* artikel */
.article{max-width:none}
.article__head{max-width:26ch}
.artmeta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;color:var(--muted);font-size:14px;margin-top:22px}
.artmeta .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;overflow:hidden}
.artmeta .av svg{width:60%;height:auto}

/* contact */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(26px,4vw,56px);align-items:start}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13.5px;font-weight:500;color:var(--tx)}
.field label span{color:var(--faint);font-weight:400}
.field input,.field textarea,.field select{
  font-family:var(--font);font-size:15.5px;font-weight:400;color:var(--tx);background:var(--field-bg);
  border:1.5px solid var(--ctrl-bd);border-radius:10px;padding:14px 16px;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:110px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(118,0,255,.22)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A1C2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--muted);cursor:pointer}
.check input{appearance:none;width:20px;height:20px;flex:none;margin-top:2px;border:1.5px solid var(--ctrl-bd);border-radius:5px;background:rgba(28,25,72,.5);cursor:pointer;display:grid;place-content:center}
.check input:checked{background:var(--purple);border-color:var(--purple)}
.check input:checked::after{content:"";width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-2px)}
.cinfo{border:1px solid var(--ink-line);border-radius:22px;padding:clamp(22px,3vw,34px);background:var(--surface)}
.cinfo h3{font-size:21px;letter-spacing:-.03em;margin-bottom:16px}
.cinfo dl{display:grid;gap:16px;margin:0}
.cinfo dt{font-size:13.5px;color:var(--faint);margin-bottom:4px}
.cinfo dd{margin:0;font-size:15.5px}
.cinfo dd a:hover{color:var(--purple-lt)}
.formnote{margin-top:18px;font-size:13px;color:var(--faint)}
.formresponse{margin-top:16px;font-size:14px;display:none}
.formresponse.is-success{display:block;color:var(--purple-lt)}
.formresponse.is-error{display:block;color:var(--magenta)}

/* vacatures */
.jobs{border-top:1px solid var(--ink-line)}
.job{
  border-bottom:1px solid var(--ink-line);padding-block:clamp(22px,3vw,32px);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:clamp(14px,3vw,36px);
  align-items:center;cursor:pointer;transition:padding-left .3s var(--ease);
}
.job:hover{padding-left:16px}
.job h3{font-size:clamp(21px,2.6vw,30px);letter-spacing:-.035em}
.job__m{color:var(--muted);font-size:14.5px}
.job__go{width:44px;height:44px;border-radius:50%;border:1px solid var(--ctrl-bd);display:grid;place-items:center;transition:background-color .25s,border-color .25s}
.job:hover .job__go{background:var(--purple);border-color:var(--purple)}
.job__go svg{width:16px;height:16px}

@media (max-width:760px){
  .tl__row{grid-template-columns:1fr;gap:6px}
  .job{grid-template-columns:1fr auto;gap:12px}
  .job__m{grid-column:1/2}
}

/* ============================================================
   Ruimte voor beeld: kantoor, werkvloer en cultuur
   ============================================================ */
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
.shot--tall .shot__in{aspect-ratio:3/4}
.shot--square .shot__in{aspect-ratio:1/1}
.shot--vier .shot__in{aspect-ratio:4/3}
.shot--zestien .shot__in{aspect-ratio:16/9}

/* Beeldgalerij op een casepagina. Een ritme van breed, twee naast elkaar,
   breed leest beter dan een rij gelijke vlakken: het geeft de pagina adem
   en je kunt per beeld kiezen hoeveel aandacht het krijgt. */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.gal > .vol{grid-column:1 / -1}
@media (max-width:760px){ .gal{grid-template-columns:1fr} .gal > *{grid-column:1 / -1} }
.shot--wide .shot__in{aspect-ratio:21/9}
.shot--pano .shot__in{aspect-ratio:32/9}
.shot__grain{position:absolute;inset:0;z-index:1;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:3px 3px}

.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,20px)}
.mosaic .shot{grid-column:span 4}
.mosaic .m6{grid-column:span 6}
.mosaic .m8{grid-column:span 8}
.mosaic .m5{grid-column:span 5}
.mosaic .m7{grid-column:span 7}
.mosaic .m12{grid-column:span 12}
.mosaic .drop{margin-top:clamp(18px,3vw,42px)}
.mosaic .lift{margin-top:calc(-1 * clamp(18px,3vw,42px))}

.cultuur{position:relative}
.cultuur__lead{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(26px,3.5vw,44px)}
.cultuur__lead h2{font-size:clamp(30px,5.4vw,68px);letter-spacing:-.045em;max-width:16ch}
.cultuur__lead p{color:var(--muted);max-width:38ch;font-size:16.5px}


@media (max-width:860px){
  .mosaic .shot,.mosaic .m5,.mosaic .m6,.mosaic .m7,.mosaic .m8{grid-column:span 12}
  .mosaic .lift,.mosaic .drop{margin-top:0}
}

/* ============================================================
   FAQ-blok, herbruikbaar en met FAQPage-schema voor GEO
   ============================================================ */
.faq{border-top:1px solid var(--ink-line);max-width:76ch}
.faq__item{border-bottom:1px solid var(--ink-line)}
.faq__q{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;color:var(--tx);
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 2px;font-size:clamp(17px,1.9vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.35;
  font-family:var(--font);transition:color .2s;
}
.faq__q:hover{color:var(--purple-lt)}
.faq__sign{
  flex:none;width:30px;height:30px;border-radius:50%;background:rgba(118,0,255,.16);color:var(--purple-lt);
  display:grid;place-items:center;margin-top:2px;transition:transform .3s var(--ease),background-color .25s,color .25s;
}
.faq__q[aria-expanded="true"] .faq__sign{transform:rotate(45deg);background:var(--purple);color:#fff}
.faq__sign svg{width:15px;height:15px}
.faq__a{padding:0 2px 24px;color:var(--muted);font-size:16px;line-height:1.7;max-width:68ch}
.faq__a[hidden]{display:none}
.faq__a p + p{margin-top:12px}

/* ============================================================
   Productpagina Data Driven Design
   ============================================================ */
.usps{display:grid;gap:12px;margin-top:26px;max-width:56ch}
.usp{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:16px;line-height:1.55}
.usp span{
  flex:none;width:22px;height:22px;border-radius:50%;background:rgba(118,0,255,.2);color:var(--purple-lt);
  display:grid;place-items:center;margin-top:2px;
}
.usp span svg{width:12px;height:12px}

.signals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:clamp(28px,4vw,46px)}
.signal{
  border:1px solid var(--ink-line);border-radius:14px;padding:16px 18px;background:var(--surface-2);
  font-size:14.5px;color:var(--muted);
}
.signal b{display:block;color:var(--tx);font-weight:500;font-size:15.5px;margin-bottom:4px;letter-spacing:-.01em}

.plans{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:clamp(30px,4vw,50px)}
.plan{
  border:1px solid var(--ink-line);border-radius:26px;padding:clamp(24px,3vw,34px);
  background:var(--surface);
  display:flex;flex-direction:column;gap:14px;position:relative;transition:border-color .3s,transform .35s var(--ease);
}
.plan:hover{border-color:var(--purple);transform:translateY(-5px)}
.plan--mid{border-color:var(--purple);background:var(--plan-mid)}
.plan__flag{
  position:absolute;top:-13px;left:clamp(24px,3vw,34px);font-size:12.5px;font-weight:500;
  background:var(--purple);color:#fff;border-radius:999px;padding:6px 15px;
}
.plan h3{font-size:24px;letter-spacing:-.03em}
.plan__price{font-size:clamp(34px,4vw,46px);letter-spacing:-.045em;font-weight:600;line-height:1}
.plan__price small{display:block;font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0;margin-top:7px}
.plan p{color:var(--muted);font-size:15px;line-height:1.6}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.plan li{padding-left:24px;position:relative;font-size:14.5px;color:var(--muted);line-height:1.5}
.plan li::before{
  content:"";position:absolute;left:0;top:.42em;width:12px;height:7px;
  border-left:2px solid var(--purple-lt);border-bottom:2px solid var(--purple-lt);transform:rotate(-45deg);
}
.plan__foot{margin-top:auto;padding-top:8px}
.plan__note{font-size:13px;color:var(--faint)}

.stepsrow{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:clamp(28px,4vw,46px)}

/* ============================================================
   SEO-landingspagina
   ============================================================ */
.lpgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.lpaside{position:sticky;top:100px;display:grid;gap:16px}
.lpbox{
  border:1px solid var(--ink-line);border-radius:22px;padding:clamp(22px,2.6vw,30px);
  background:var(--surface);
}
.lpbox h3{font-size:19px;letter-spacing:-.025em;margin-bottom:12px}
.lpbox p{color:var(--muted);font-size:14.5px;line-height:1.6}
.lpbox dl{display:grid;gap:14px;margin:0 0 18px}
.lpbox dt{font-size:13.5px;color:var(--faint);margin-bottom:3px}
.lpbox dd{margin:0;font-size:15.5px}
.lplinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lplink{
  border:1px solid var(--ink-line);border-radius:999px;padding:8px 15px;font-size:13.5px;color:var(--muted);
  transition:color .2s,border-color .2s;
}
.lplink:hover{color:var(--tx);border-color:var(--purple-lt)}
.checklist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px;max-width:62ch}
.checklist li{padding-left:28px;position:relative;color:var(--muted);font-size:16px;line-height:1.6}
.checklist li::before{
  content:"";position:absolute;left:0;top:.4em;width:13px;height:7px;
  border-left:2px solid var(--purple-lt);border-bottom:2px solid var(--purple-lt);transform:rotate(-45deg);
}
.checklist b{color:var(--tx);font-weight:500}

@media (max-width:960px){
  .lpgrid{grid-template-columns:1fr}
  .lpaside{position:static}
}

/* ============================================================
   Persoonsblokken
   ============================================================ */
.pportret{
  position:relative;display:block;flex:none;width:96px;aspect-ratio:1/1;
  border-radius:20px;overflow:hidden;
}
.pportret--rond{border-radius:50%;width:84px}
.pportret::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,8,32,.18),rgba(10,8,32,.58))}
.pportret svg{position:absolute;right:-14%;bottom:-24%;width:74%;height:auto;opacity:.3;mix-blend-mode:overlay}
.pportret__cap{
  position:absolute;left:12px;bottom:12px;z-index:2;font-size:12.5px;color:#FFFFFF;
  background:rgba(10,8,32,.78);backdrop-filter:blur(6px);border-radius:999px;padding:5px 12px;
}

.pcard{
  display:flex;gap:18px;align-items:flex-start;
  border:1px solid var(--ink-line);border-radius:22px;padding:20px;
  background:var(--surface);
}
.pcard__b{min-width:0;display:flex;flex-direction:column;gap:3px}
.pcard__k{font-size:13.5px;color:var(--purple-lt)}
.pcard__b b{color:var(--tx);font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.pcard__r{font-size:14px;color:var(--muted)}
.pcard__t{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.55}
.pcard .lplinks{margin-top:12px}

.pbig{
  border:1px solid var(--ink-line);border-radius:22px;overflow:hidden;
  background:var(--surface);
}
.pbig .pportret{width:100%;aspect-ratio:4/3;border-radius:0}
.pbig .pportret svg{width:46%;right:-8%;bottom:-28%}
.pbig__b{padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:3px}
.pbig__b b{color:var(--tx);font-size:21px;font-weight:500;letter-spacing:-.025em;line-height:1.25}

.aline{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.aline__faces{display:flex}
.aline__f{
  width:42px;height:42px;border-radius:50%;overflow:hidden;position:relative;display:block;
  border:2px solid var(--ink-deep);margin-left:-12px;
}
.aline__f:first-child{margin-left:0}
.aline__f svg{position:absolute;right:-16%;bottom:-26%;width:78%;height:auto;opacity:.34;mix-blend-mode:overlay}
.aline__t{font-size:15px;color:var(--muted)}

@media (max-width:480px){
  .pcard{flex-direction:column;gap:14px}
}

/* ============================================================
   Hybride navigatie: twee directe links plus een schermvullend menu
   ============================================================ */
.themebtn{
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line-bd);background:transparent;color:var(--tx);cursor:pointer;flex:none;
  transition:border-color .2s,background-color .2s;
}
.themebtn:hover{border-color:var(--line-bd-h);background:rgba(118,0,255,.12)}
.themebtn svg{width:19px;height:19px}
.themebtn .zon{display:none}
:root[data-site-theme="light"] .themebtn .zon{display:block}
:root[data-site-theme="light"] .themebtn .maan{display:none}

.nav__burger{
  display:flex;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-bd);
  background:transparent;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;
  transition:border-color .2s,background-color .2s;flex:none;
}
.nav__burger:hover{border-color:var(--line-bd-h);background:rgba(118,0,255,.12)}
.nav__burger span{display:block;width:18px;height:1.5px;background:var(--tx);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.menu{display:none}
.menu.on{
  position:fixed;inset:0;z-index:60;background:var(--ink-deep);
  display:grid;grid-template-rows:auto minmax(0,1fr);
  overflow-y:auto;overscroll-behavior:contain;
  animation:menuIn .3s var(--ease) both;
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.menu__glow{
  position:absolute;inset:auto -10% 0 -10%;height:80%;z-index:0;pointer-events:none;
  background:radial-gradient(45% 55% at 22% 70%,var(--glow-a),transparent 70%),
             radial-gradient(40% 50% at 80% 40%,var(--glow-b),transparent 72%);
}
.menu__top{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:18px var(--pad);border-bottom:1px solid var(--ink-line);
}
.menu__top .logo{height:38px;width:auto;color:var(--tx)}
.menu__body{position:relative;z-index:1;padding:clamp(20px,3.4vh,48px) var(--pad)}
.menu__grid{
  max-width:var(--max);margin:0 auto;display:grid;gap:clamp(28px,5vw,72px);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;
  grid-template-areas:"nav zegel" "extra zegel";
}
.menu__main{grid-area:nav}
.menu__kolom{grid-area:extra}
.menu__mark{grid-area:zegel}
.menu__main{display:grid}
.menu__main a{
  display:block;padding:clamp(7px,1.15vh,16px) 0;
  border-bottom:1px solid var(--ink-line);
  font-size:clamp(24px,min(4.4vw,5.4vh),52px);font-weight:600;letter-spacing:-.045em;line-height:1.05;
  color:var(--tx);transition:color .22s,padding-left .3s var(--ease);
}
.menu__main a:first-child{border-top:1px solid var(--ink-line)}
.menu__main a:hover{color:var(--purple-lt);padding-left:14px}

/* de vier sectoren, klein onder de hoofdnavigatie */
.menu__voor{margin-top:clamp(14px,2.2vh,26px);display:flex;flex-wrap:wrap;gap:8px}
.menu__voor b{width:100%;font-size:13.5px;font-weight:500;color:var(--faint);margin-bottom:2px}

/* Het beeldmerk als rustig bewegend element */
.menu__mark{position:relative;display:grid;place-items:center;min-height:clamp(240px,34vw,440px)}
.menu__markglow{
  position:absolute;width:120%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--glow-cta),var(--glow-cta2) 46%,transparent 70%);
  filter:blur(10px);
}
.menuseal{position:relative;width:min(100%,400px);height:auto;display:block;color:var(--tx)}
.menuseal .seal-spin{animation-duration:44s}

body.menu-open{overflow:hidden}
body.menu-open .dock{opacity:0;pointer-events:none}

@media (max-width:900px){
  .menu.on{grid-template-rows:auto 1fr}
  .menu__body{display:flex;flex-direction:column}
  .menu.on{grid-template-rows:auto minmax(0,1fr)}
  .menu__body{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .menu__grid{grid-template-columns:1fr;align-items:start;gap:0;flex:1;
    grid-template-areas:"nav" "extra";
    grid-template-rows:auto 1fr}
  .menu__mark{display:none}
  .menu__voor{margin-top:clamp(18px,3vh,30px)}
  .menu__main a{font-size:clamp(26px,7vw,36px);padding:clamp(6px,1.5vh,14px) 0}
  /* het zegel vult de ruimte onder de links, rustig en klein */
  .menu__mark{min-height:0;padding:clamp(20px,4vh,44px) 0 clamp(8px,2vh,24px);align-self:center}
  .menuseal{width:min(58%,210px);margin:0 auto}
  .menu__markglow{width:150%}
}

/* ============================================================
   Artikelpagina
   ============================================================ */
.artlead{
  font-size:clamp(19px,2.1vw,25px);line-height:1.5;color:var(--tx);font-weight:400;
  max-width:58ch;letter-spacing:-.01em;
}
.artcap{font-size:13.5px;color:var(--faint);margin-top:12px;line-height:1.5}
.punten{
  margin-top:clamp(34px,4vw,56px);max-width:64ch;
  border:1px solid var(--ink-line);border-radius:22px;padding:clamp(22px,2.6vw,30px);
  background:var(--surface);
}
.punten h3{font-size:19px;letter-spacing:-.025em;margin-bottom:14px}
.punten ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.punten li{padding-left:28px;position:relative;color:var(--muted);font-size:15.5px;line-height:1.6}
.punten li::before{
  content:"";position:absolute;left:0;top:.42em;width:13px;height:7px;
  border-left:2px solid var(--purple-lt);border-bottom:2px solid var(--purple-lt);transform:rotate(-45deg);
}
.share{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:clamp(28px,3.5vw,46px);padding-top:22px;border-top:1px solid var(--ink-line);max-width:64ch;
}
.share span{font-size:14px;color:var(--faint);margin-right:6px}

/* ============================================================
   Hero met beeld op de landingspagina's
   ============================================================ */
.pherogrid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.pherogrid h1{max-width:14ch}
.pngwrap{position:relative;display:grid;place-items:center;min-height:clamp(220px,26vw,380px)}
.pngwrap::before{
  content:"";position:absolute;width:104%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--glow-cta),var(--glow-cta2) 48%,transparent 70%);
  filter:blur(8px);
}
.pngslot{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:26px;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.pngslot .shot__grain{position:absolute;inset:0;z-index:1}
.pngslot svg{position:absolute;right:-10%;bottom:-26%;width:54%;height:auto;opacity:.3;mix-blend-mode:overlay}
.pngslot .shot__cap{position:absolute;left:14px;bottom:14px;z-index:2}
@media (max-width:860px){
  .pherogrid{grid-template-columns:1fr}
  .pherogrid h1{max-width:16ch}
  .pngwrap{min-height:0;margin-top:8px}
}

/* ============================================================
   Traag schuivend kleurveld achter de hero
   Twee lagen met verschillende looptijden, zodat het nooit
   zichtbaar herhaalt. Puur transform, dus vloeiend.
   ============================================================ */
.hero__grad,.hero__grad2{
  position:absolute;inset:-35%;z-index:0;pointer-events:none;
  opacity:var(--veld-op);will-change:transform;
}
.hero__grad{
  background:var(--veld-a);
  animation:veldA 21s ease-in-out infinite alternate,
            kleurA 27s ease-in-out infinite alternate;
}
.hero__grad2{
  background:var(--veld-b);
  animation:veldB 31s ease-in-out infinite alternate-reverse,
            kleurB 37s ease-in-out infinite alternate;
}
@keyframes veldA{
  from{transform:translate3d(-11%,-7%,0) scale(1.00) rotate(-9deg)}
  to{transform:translate3d(11%,9%,0) scale(1.26) rotate(13deg)}
}
@keyframes veldB{
  from{transform:translate3d(10%,8%,0) scale(1.24) rotate(11deg)}
  to{transform:translate3d(-10%,-9%,0) scale(1.00) rotate(-12deg)}
}
@keyframes kleurA{
  from{filter:blur(40px) hue-rotate(-13deg) saturate(1.05)}
  to{filter:blur(40px) hue-rotate(13deg) saturate(1.25)}
}
@keyframes kleurB{
  from{filter:blur(46px) hue-rotate(12deg) saturate(1.2)}
  to{filter:blur(46px) hue-rotate(-12deg) saturate(1)}
}
/* ============================================================
   Mobiel, afsluitend blok
   Staat bewust onderaan: zo wint het altijd van de regels
   hierboven, zonder !important.
   ============================================================ */
@media (max-width:860px){
  /* mozaiek: het script zet grid-column inline, dus vouwen we de
     kolommen zelf op en overrulen we die inline waarde */
  .mosaic{grid-template-columns:1fr}
  .mosaic > *{grid-column:1 / -1 !important}
  .mosaic .lift,.mosaic .drop{margin-top:0}
  .shot--pano .shot__in{aspect-ratio:21/9}

  /* brede case op de home: 21:9 laat geen ruimte voor de titel */
  .tile--wide .tile__art{aspect-ratio:4/3}

  /* zonder muis is er geen hover, dus de pijl staat er meteen */
  .tile__go{opacity:1;transform:none}
  .tile:hover{transform:none}
  .person:hover{transform:none}
}
@media (max-width:620px){
  /* op een telefoon eerst het gezicht, dan pas het formulier */
  .cgrid__zij{order:-1}
  .pbig .pportret{aspect-ratio:16/10}

  /* rasters die anders naar een kolom vallen en de pagina eindeloos maken */
  .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .person__b{padding:12px 13px 15px}
  .person__b b{font-size:14.5px}
  .person__b span{font-size:12.5px}
  .kpis,.stats,.facts,.signals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots{grid-template-columns:1fr}
}

/* Echt beeld in een projectvlak. Zolang een case nog geen beeld heeft,
   blijft het merkvlak eronder staan; daarom ligt de foto eroverheen en
   vervangt hij hem niet. */
.tile__img,.shot__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1
}
.shot--foto{background:var(--ink-soft)}
.shot--foto .shot__in{position:relative}
.shot--foto .shot__mark{display:none}

/* ============================================================
   Doelgroepen
   Vier sectoren op de homepage, en de sectorpagina's waar ze
   naartoe wijzen. Gevulde kaarten, geen omlijnde vakjes: de
   rand is een verlooplijn bovenlangs die meegroeit bij hover.
   ============================================================ */
.sectoren{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));
  gap:clamp(12px,1.5vw,18px);margin-top:clamp(28px,4vw,46px)
}
.sectork{
  position:relative;display:flex;flex-direction:column;gap:14px;overflow:hidden;
  padding:clamp(24px,2.7vw,32px) clamp(22px,2.4vw,28px) clamp(20px,2.4vw,26px);
  border-radius:22px;background:var(--surface);color:inherit;isolation:isolate;
  transition:transform .55s cubic-bezier(.2,.7,.3,1),background .45s ease
}
.sectork::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:var(--grad);transform:scaleX(.26);transform-origin:left center;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)
}
.sectork:hover,.sectork:focus-visible{transform:translateY(-4px);background:var(--surface-2)}
.sectork:hover::before,.sectork:focus-visible::before{transform:scaleX(1)}
.sectork__lijnen{
  position:absolute;left:-18%;right:-18%;top:-34%;height:104%;z-index:0;pointer-events:none;
  color:var(--hoogte-kleur);opacity:calc(var(--hoogte-op) * 1.25);
  -webkit-mask-image:radial-gradient(76% 80% at 74% 4%,#000 12%,transparent 72%);
  mask-image:radial-gradient(76% 80% at 74% 4%,#000 12%,transparent 72%)
}
.sectork__lijnen svg{width:100%;height:100%;display:block}
.sectork > :not(.sectork__lijnen){position:relative;z-index:1}
.sectork h3{font-size:clamp(20px,2.1vw,25px);letter-spacing:-.035em;line-height:1.16;font-weight:600}
.sectork p{color:var(--muted);font-size:15.5px;line-height:1.62;margin-top:-4px}
.sectork__bewijs{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px
}
.sectork__bewijs span{
  font-size:12.5px;color:var(--faint);padding:4px 9px;border-radius:999px;
  background:var(--ink-soft);white-space:nowrap;line-height:1.45
}
.sectork__go{
  display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--purple-lt);
  font-weight:500;margin-top:2px
}
.sectork__go svg{width:17px;height:17px;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.sectork:hover .sectork__go svg{transform:translateX(5px)}

/* de herkenningslijst bovenaan een sectorpagina */
.herken{
  list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,16px)
}
@media (max-width:1040px){ .herken{grid-template-columns:repeat(2,minmax(0,1fr))} }
.herken li{
  position:relative;padding:clamp(17px,2vw,22px) clamp(18px,2vw,22px) clamp(17px,2vw,22px) 50px;
  border-radius:16px;background:var(--surface);color:var(--muted);
  font-size:15.5px;line-height:1.58
}
.herken li::before{
  content:"";position:absolute;left:21px;top:calc(1.1em + 2px);width:10px;height:10px;border-radius:3px;
  background:var(--grad);transform:rotate(45deg)
}
.sigrij{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sigrij span{
  font-size:13.5px;color:var(--muted);padding:7px 14px;border-radius:999px;background:var(--ink-soft)
}
@media (max-width:620px){
  .sectoren{grid-template-columns:1fr}
  .herken{grid-template-columns:1fr}
}

/* ============================================================
   Hoogtelijnen
   Een vast watermerk achter de site. Het veld is gegenereerd,
   geen patroon dat zich herhaalt, en de top rechts volgt de
   omtrek van het beeldmerk.
   ============================================================ */
.hoogte{
  position:fixed;inset:-6% -3%;z-index:-1;pointer-events:none;
  color:var(--hoogte-kleur);opacity:var(--hoogte-op);
  will-change:transform;
  /* van boven naar beneden weglopen, zodat de onderkant van het
     scherm altijd rustig is en tekst er nooit tegenaan loopt */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.28) 62%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.28) 62%,transparent 88%);
}

/* Minimale terugkeer in het slotblok. Alleen de bovenrand, en
   alleen genoeg om te merken dat het dezelfde kaart is. */
.cta__lijnen{
  position:absolute;left:-6%;right:-6%;top:-14%;height:78%;z-index:0;pointer-events:none;
  color:var(--hoogte-kleur);opacity:calc(var(--hoogte-op) * 2.1);
  -webkit-mask-image:radial-gradient(70% 88% at 50% 0%,#000 18%,transparent 76%);
  mask-image:radial-gradient(70% 88% at 50% 0%,#000 18%,transparent 76%);
}
.cta__lijnen svg{width:100%;height:100%;display:block}
.hoogte__svg{width:100%;height:100%;display:block}
@media (max-width:860px){ .hoogte{inset:-10% -22%} }

/* ============================================================
   Het beeldmerk in 3D, naast de titel in de hero
   ============================================================ */
.hero__in{position:relative;z-index:2}
.merk3d{
  position:relative;display:grid;place-items:center;
  width:100%;aspect-ratio:1;max-width:min(46vw,520px);
  margin:clamp(22px,4vw,0px) auto 0;
}
.merk3d canvas{position:relative;z-index:1;display:block;width:100%;height:100%}
/* je mag hem vastpakken. touch-action pan-y houdt verticaal scrollen heel,
   horizontaal slepen komt bij ons terecht */
.merk3d.klaar{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.merk3d.klaar.sleept{cursor:grabbing}
.merk3d__gloed{
  position:absolute;width:118%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,var(--glow-cta),var(--glow-cta2) 46%,transparent 70%);
  filter:blur(14px);
}
/* het platte merk is de terugvalweergave: zonder WebGL, zonder JS,
   en tijdens het opstarten */
.merk3d__plat{position:relative;z-index:1;width:74%;height:auto}
.merk3d.klaar .merk3d__plat{display:none}

@media (min-width:1060px){
  .hero__in{
    display:grid;gap:clamp(24px,4vw,64px);align-items:center;
    grid-template-columns:minmax(0,1fr) minmax(0,.66fr);
  }
  .hero h1{font-size:clamp(42px,6.4vw,104px);max-width:11ch}
  .merk3d{margin:0}
}
@media (max-width:1059px){
  .merk3d{max-width:min(62vw,340px)}
}
@media (max-width:560px){
  .merk3d{max-width:250px;margin-top:26px}
}
@media (prefers-reduced-motion:reduce){
  .merk3d__gloed{filter:blur(14px)}
}