/* ==========================================================================
   Max Boven PT — kern
   Zwart canvas, één rood accent, condensed Archivo als display.
   ========================================================================== */

:root{
  /* kleur */
  --ink:        #0B0B0C;
  --ink-2:      #131316;
  --ink-3:      #1D1D21;
  --line:       rgba(255,255,255,.12);
  --paper:      #F2F0EC;
  --mute:       #8C8C94;
  --mute-2:     #B6B6BD;
  --red:        #E10600;
  --red-deep:   #A80400;
  --ster:       #F7B500;

  /* maat */
  --pad:  clamp(1.25rem, 4.2vw, 4.5rem);
  --gap:  clamp(1rem, 1.8vw, 2rem);
  --head-h: clamp(68px, 6.4vw, 88px);

  /* type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.68,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--text);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100% }
svg{ max-width:100%; vertical-align:middle }
a{ color:inherit; text-decoration:none }
ul{ margin:0; padding:0; list-style:none }

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:var(--pad); top:-4rem; z-index:100;
  background:var(--red); color:#fff; padding:.7rem 1.1rem; font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus-visible{ top:1rem }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px }

/* filmkorrel — houdt de grote zwarte vlakken levend */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Header
   ========================================================================== */

.head{
  position:fixed; inset:0 0 auto; z-index:50;
  height:var(--head-h);
  display:flex; align-items:center; gap:var(--gap);
  padding:0 var(--pad);
  border-bottom:1px solid transparent;
  background:rgba(11,11,12,0);
  backdrop-filter:blur(0px);
}
/* scroll-gestuurd, buiten de hoofdthread; JS-klasse is de terugval */
@supports (animation-timeline: scroll()){
  .head{
    animation:head-solid linear both;
    animation-timeline:scroll(root block);
    animation-range:0 140px;
  }
}
@keyframes head-solid{
  to{ background:rgba(11,11,12,.78); backdrop-filter:blur(16px); border-bottom-color:var(--line) }
}
.head.is-solid{
  background:rgba(11,11,12,.78); backdrop-filter:blur(16px); border-bottom-color:var(--line);
  transition:background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
}

.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto }
.brand__mark{
  flex:none;
  color:var(--paper);
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.brand:hover .brand__mark{ color:var(--red); transform:translateY(-1px) }

.brand__name{ display:flex; flex-direction:column; line-height:1.15 }
.brand__line1{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 650;
  font-size:.86rem; letter-spacing:.09em; text-transform:uppercase;
}
.brand__line2{ font-size:.63rem; letter-spacing:.17em; text-transform:uppercase; color:var(--mute) }

.nav ul{ display:flex; gap:clamp(1rem,2.1vw,2.1rem) }
.nav a{
  position:relative; display:inline-block; padding:.35rem 0;
  font-size:.82rem; letter-spacing:.02em; color:var(--mute-2);
  transition:color .22s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--ease);
}
.nav a:hover{ color:var(--paper) }
.nav a:hover::after,
.nav a[aria-current]::after{ transform:scaleX(1) }
.nav a[aria-current]{ color:var(--paper) }

/* ==========================================================================
   Knoppen
   ========================================================================== */

.btn{
  --bh:0;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:1.05rem 1.5rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 95,"wght" 640;
  font-size:.84rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid transparent; border-radius:0; cursor:pointer;
  will-change:transform;
  transition:transform .18s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--sm{ padding:.72rem 1.05rem; font-size:.74rem }
.btn__arrow{ width:16px; height:16px; transition:transform .3s var(--ease) }
.btn:hover .btn__arrow{ transform:translateX(4px) }

.btn--red{ background:var(--red); color:#fff }
.btn--red:hover{ background:#FF1A12 }
.btn--red:active{ transform:scale(.97) }

.btn--ghost{
  background:transparent; color:var(--paper);
  border-color:rgba(255,255,255,.22); padding-inline:1.35rem;
}
.btn--ghost::after{
  content:""; position:absolute; inset:0; background:var(--paper);
  transform:scaleY(0); transform-origin:bottom; z-index:-1;
  transition:transform .34s var(--ease-out);
}
.btn--ghost{ z-index:0; overflow:hidden }
.btn--ghost:hover{ color:var(--ink); border-color:var(--paper) }
.btn--ghost:hover::after{ transform:scaleY(1) }
.btn--ghost:active{ transform:scale(.97) }

.burger{
  display:none; width:44px; height:44px; padding:0; margin-right:-10px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
}
.burger span:not(.vh){ display:block; height:1.5px; background:var(--paper); transition:width .25s var(--ease) }
.burger span:nth-child(1){ width:24px }
.burger span:nth-child(2){ width:16px }
.burger:hover span:nth-child(2){ width:24px }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  padding:var(--head-h) var(--pad) clamp(1.75rem,5vh,3.25rem);
  align-items:end;
  isolation:isolate;
}

/* beeld — loopt naar boven onder de header door en naar rechts uit beeld */
.hero__media{
  grid-column:7 / -1;
  grid-row:1;
  position:relative;
  align-self:stretch;
  margin:calc(var(--head-h) * -1) calc(var(--pad) * -1) calc(clamp(1.75rem,5vh,3.25rem) * -1) 0;
  overflow:hidden;
  z-index:0;
}
.hero__figure{ margin:0; height:100%; overflow:hidden }
.hero__figure img{
  width:100%; height:100%; object-fit:cover; object-position:52% 22%;
  transform:scale(1.06);
  transition:transform .9s var(--ease-out);
}
.hero__media:hover .hero__figure img{ transform:scale(1.1) }

/* scrim: het beeld smelt links en onder weg in het zwart */
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    /* de navigatie moet leesbaar blijven boven de lichte plafondlampen */
    linear-gradient(180deg, rgba(11,11,12,.9) 0, rgba(11,11,12,.66) calc(var(--head-h) * .75), rgba(11,11,12,0) calc(var(--head-h) + 5rem)),
    linear-gradient(90deg, var(--ink) 0%, rgba(11,11,12,.82) 16%, rgba(11,11,12,.1) 46%, rgba(11,11,12,0) 70%),
    linear-gradient(0deg, var(--ink) 0%, rgba(11,11,12,.25) 24%, rgba(11,11,12,0) 55%);
}
.hero__rail{
  position:absolute; right:var(--pad); bottom:clamp(3rem,9vh,6rem); z-index:2;
  writing-mode:vertical-rl;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--mute);
}

/* tekst — overlapt het beeld */
.hero__copy{
  grid-column:1 / 9;
  grid-row:1;
  z-index:2;
  align-self:end;
  max-width:none;
  padding-bottom:clamp(1rem,4vh,3rem);
}

.kicker{
  display:flex; align-items:center; gap:.7rem; margin:0 0 clamp(.9rem,2vh,1.5rem);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mute-2);
}
.kicker__dot{ width:7px; height:7px; background:var(--red); flex:none }

.display{
  margin:0;
  font-family:var(--display);
  font-variation-settings:"wdth" 82,"wght" 800;
  font-size:clamp(3.2rem, 9.4vw, 9.5rem);
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.mask{ display:block; overflow:hidden; padding-bottom:.03em }
.mask__in{ display:flex; align-items:baseline; gap:.1em }
.pre{
  font-style:normal;
  font-variation-settings:"wdth" 100,"wght" 500;
  font-size:.145em; letter-spacing:.2em; color:var(--mute);
  transform:translateY(-.15em);
}
.outline{
  font-style:italic;
  font-variation-settings:"wdth" 82,"wght" 800;
  color:transparent;
  -webkit-text-stroke-width:clamp(1.2px,.28vw,3.2px);
  -webkit-text-stroke-color:var(--paper);
}
.dot{
  font-weight:inherit; color:var(--red);
  -webkit-text-stroke-width:0;
}

.lead{
  margin:clamp(1.2rem,2.8vh,1.9rem) 0 0;
  max-width:44ch;
  font-size:clamp(1rem,1.18vw,1.16rem);
  line-height:1.65;
  color:var(--mute-2);
}

.cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:clamp(1.3rem,2.8vh,1.9rem) }

.hero__foot{
  grid-column:1 / 4; grid-row:1;
  align-self:end; z-index:2;
  display:none;
}
.scroll{
  display:flex; align-items:center; gap:.7rem;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mute);
}
.scroll__line{ width:46px; height:1px; background:var(--line); position:relative; overflow:hidden }
.scroll__line::after{
  content:""; position:absolute; inset:0; background:var(--red);
  transform:translateX(-100%); animation:sweep 2.6s var(--ease) infinite;
}
@keyframes sweep{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

/* ==========================================================================
   Beweging
   ========================================================================== */

.reveal{ opacity:0; transform:translateY(14px); animation:fade-up .8s var(--ease-out) var(--d,0s) both }
.reveal-up{ transform:translateY(112%); animation:slide-up .95s var(--ease-out) var(--d,0s) both }

@keyframes fade-up{ to{ opacity:1; transform:none } }
@keyframes slide-up{ from{ transform:translateY(112%) } to{ transform:translateY(0) } }

/* parallax op het beeld tijdens het scrollen */
@supports (animation-timeline: scroll()){
  [data-parallax]{
    animation:drift linear both;
    animation-timeline:scroll(root block);
    animation-range:0 100vh;
  }
  @keyframes drift{
    from{ transform:scale(1.06) translateY(0) }
    to{   transform:scale(1.14) translateY(6%) }
  }
  .hero__media:hover .hero__figure img{ transform:none }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation:none !important;
    animation-timeline:auto !important;
    transition-duration:.001ms !important;
  }
  .reveal,.reveal-up,.in,.probs li,.sheet nav a{ opacity:1; transform:none }
  .band__rule,.proc__fill{ transform:scaleX(1) }
  .hero__figure img,.about__figure img,[data-soft]{ transform:none }
}

/* ==========================================================================
   Responsief — mobiel is een eigen compositie, geen verkleining
   ========================================================================== */

@media (max-width:1100px){
  .nav{ display:none }
  .burger{ display:flex }
  .head__cta{ display:none }
  .hero__copy{ grid-column:1 / 11 }
  .hero__media{ grid-column:6 / -1 }
}

@media (max-width:760px){
  .hero{
    grid-template-columns:1fr;
    padding-bottom:clamp(2rem,7vh,3rem);
    align-items:end;
  }
  /* beeld wordt schermvullende achtergrond, tekst staat eroverheen */
  .hero__media{
    grid-column:1; grid-row:1;
    margin:calc(var(--head-h) * -1) calc(var(--pad) * -1);
    height:100%;
  }
  .hero__figure img{ object-position:56% 18% }
  .hero__media::after{
    background:
      linear-gradient(0deg, var(--ink) 4%, rgba(11,11,12,.86) 34%, rgba(11,11,12,.25) 68%, rgba(11,11,12,.55) 100%);
  }
  .hero__rail{ display:none }
  .hero__copy{ grid-column:1; grid-row:1; max-width:none; padding-bottom:0 }
  .display{ font-size:clamp(3.2rem,17.5vw,6rem); letter-spacing:-.03em }
  .mask__in{ gap:.06em }
  .pre{ font-size:.115em; letter-spacing:.16em }
  .kicker{ font-size:.64rem; letter-spacing:.18em }
  .lead{ max-width:34ch }
  .cta{ flex-direction:column; align-items:stretch }
  .btn{ justify-content:space-between }
  .brand__name{ display:none }
}

/* ==========================================================================
   Gedeelde secties
   ========================================================================== */

:root{ --sec: clamp(4.5rem, 11vh, 9rem) }

.h2{
  margin:0;
  font-family:var(--display);
  font-variation-settings:"wdth" 84,"wght" 780;
  font-size:clamp(2.3rem, 5.2vw, 4.75rem);
  line-height:.94;
  letter-spacing:-.032em;
  text-transform:uppercase;
}
.ital{
  font-style:italic;
  font-variation-settings:"wdth" 84,"wght" 780;
  color:var(--red);
}
.body{ margin:0; color:var(--mute-2); font-size:clamp(1rem,1.12vw,1.1rem); line-height:1.68 }

/* scrollgestuurde binnenkomst, gestaggerd via --i */
@supports (animation-timeline: view()){
  .in{
    animation:fade-up .85s var(--ease-out) both;
    animation-timeline:view();
    animation-range:entry calc(4% + var(--i,0) * 5%) entry calc(56% + var(--i,0) * 5%);
  }
}

/* ==========================================================================
   Lichte band met wat je krijgt
   ========================================================================== */

.band{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  padding:clamp(2.6rem,5.5vh,4rem) var(--pad);
}
.band__rule{
  position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--red); transform-origin:left; transform:scaleX(0);
}
@supports (animation-timeline: view()){
  .band__rule{ animation:draw linear both; animation-timeline:view(); animation-range:entry 0% cover 40% }
  @keyframes draw{ to{ transform:scaleX(1) } }
}
@supports not (animation-timeline: view()){ .band__rule{ transform:scaleX(1) } }

.band__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  max-width:1600px; margin:0 auto;
}
.band__item{ padding:0 clamp(1rem,2.4vw,2.4rem); border-left:1px solid rgba(11,11,12,.14) }
.band__item:first-child{ padding-left:0; border-left:0 }
.band__item:last-child{ padding-right:0 }

.band__num{
  display:block;
  font-family:var(--display);
  font-variation-settings:"wdth" 80,"wght" 820;
  font-size:clamp(2.4rem,4.6vw,4.25rem);
  line-height:.9; letter-spacing:-.035em;
}
.band__num--word{ font-size:clamp(1.9rem,3.5vw,3.2rem) }
.band__lab{
  display:block; margin-top:.6rem;
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:#55555C; line-height:1.45;
}

/* ==========================================================================
   Herkenning
   ========================================================================== */

.recog{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  padding:var(--sec) var(--pad);
  max-width:1600px; margin:0 auto;
}
.recog__head{
  grid-column:1 / 6; grid-row:1;
  position:sticky; top:calc(var(--head-h) + clamp(1.5rem,5vh,3.5rem));
  align-self:start;
}
.recog__head .kicker{ margin-bottom:1.4rem }
.recog__head .body{ margin-top:1.6rem; max-width:34ch }

.probs{
  grid-column:7 / -1; grid-row:1;
  margin:0; padding:0; list-style:none;
  counter-reset:none;
}
.probs li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1rem,2.4vw,2.2rem);
  align-items:baseline;
  padding:clamp(1.5rem,3.4vh,2.4rem) 0;
  border-bottom:1px solid var(--line);
  opacity:.34;
}
.probs li:first-child{ border-top:1px solid var(--line) }
.probs__n{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 600;
  font-size:.82rem; letter-spacing:.1em; color:var(--red);
}
.probs__t{
  font-family:var(--display);
  font-variation-settings:"wdth" 88,"wght" 620;
  font-size:clamp(1.15rem,2.05vw,1.85rem);
  line-height:1.22; letter-spacing:-.012em;
}
@supports (animation-timeline: view()){
  .probs li{ animation:wake linear both; animation-timeline:view(); animation-range:entry 18% entry 92% }
  @keyframes wake{ to{ opacity:1 } }
}
@supports not (animation-timeline: view()){ .probs li{ opacity:1 } }

.recog__answer{
  margin:clamp(2rem,4.5vh,3rem) 0 0;
  padding-top:clamp(1.4rem,3vh,2rem);
  border-top:2px solid var(--red);
  max-width:42ch;
  font-size:clamp(1.02rem,1.2vw,1.18rem);
  line-height:1.7; color:var(--mute-2);
}
.recog__answer strong{ color:var(--paper); font-weight:600 }

/* ==========================================================================
   USP's — rood paneel
   ========================================================================== */

.usp{
  position:relative;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.09), rgba(255,255,255,0) 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(0,0,0,.22), rgba(0,0,0,0) 60%),
    var(--red);
  color:#fff;
  padding:var(--sec) var(--pad);
}
.usp__head{ max-width:1600px; margin:0 auto clamp(2.6rem,6vh,4.5rem) }
.usp__head .kicker{ margin-bottom:1.2rem }
.kicker--on-red{ color:#fff }
.kicker__dot--white{ background:#fff }
.usp .h2{ color:#fff }

.usp__grid{
  max-width:1600px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.32);
}
.usp__item{
  padding:clamp(1.8rem,3.6vh,2.6rem) clamp(1.1rem,2.2vw,2.2rem) clamp(2.2rem,4.5vh,3.4rem);
  border-left:1px solid rgba(255,255,255,.32);
  position:relative;
}
.usp__item:first-child{ border-left:0; padding-left:0 }
.usp__item:last-child{ padding-right:0 }
/* de streep die onder het item doorgroeit bij hover */
.usp__item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:#fff; transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.usp__item:hover::after{ transform:scaleX(1) }

.usp__n{
  display:block; margin-bottom:clamp(2.5rem,7vh,4.5rem);
  font-family:var(--display);
  font-variation-settings:"wdth" 84,"wght" 800;
  font-size:clamp(2.6rem,4.4vw,4rem); line-height:1; letter-spacing:-.03em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.6);
}
.usp__t{
  margin:0 0 .7rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 88,"wght" 700;
  font-size:clamp(1.15rem,1.55vw,1.5rem);
  line-height:1.15; letter-spacing:-.012em; text-transform:uppercase;
}
.usp__b{ margin:0; font-size:.95rem; line-height:1.62; color:rgba(255,255,255,.86) }

/* ==========================================================================
   Responsief — secties
   ========================================================================== */

@media (max-width:1100px){
  .recog{ grid-template-rows:auto }
  .recog__head{ grid-column:1 / -1; grid-row:auto; position:static }
  .probs{ grid-column:1 / -1; grid-row:auto }
  .recog__answer{ max-width:52ch }
  .probs{ margin-top:clamp(2.4rem,5vh,3.5rem) }
  .usp__grid{ grid-template-columns:repeat(2,1fr) }
  .usp__item:nth-child(3){ border-left:0; padding-left:0 }
  .usp__item:nth-child(2n){ padding-right:0 }
  .usp__item:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.32) }
  .band__grid{ grid-template-columns:repeat(2,1fr); row-gap:clamp(1.8rem,4vh,2.6rem) }
  .band__item:nth-child(3){ border-left:0; padding-left:0 }
}

@media (max-width:760px){
  .band__grid{ grid-template-columns:1fr; row-gap:0 }
  .band__item{ padding:clamp(1.1rem,3vh,1.6rem) 0; border-left:0; border-top:1px solid rgba(11,11,12,.14) }
  .band__item:first-child{ border-top:0; padding-top:0 }
  .band__num,.band__num--word{ font-size:clamp(2.2rem,11vw,3rem) }
  .band__lab{ margin-top:.35rem }
  .usp__grid{ grid-template-columns:1fr }
  .usp__item,.usp__item:nth-child(3),.usp__item:nth-child(2n){
    border-left:0; border-bottom:1px solid rgba(255,255,255,.32);
    padding:clamp(1.6rem,4vh,2.2rem) 0;
  }
  .usp__item:last-child{ border-bottom:0 }
  .usp__n{ margin-bottom:clamp(1.2rem,3vh,2rem) }
  .probs li{ grid-template-columns:1fr; gap:.5rem }
}

/* ==========================================================================
   Over Max
   ========================================================================== */

.about{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  row-gap:clamp(2.2rem,5.5vh,3.6rem);
  align-items:start;
  /* geen marge bovenaan: het schermbrede beeld sluit direct aan op de
     sectie erboven, anders staat er een zwarte balk tussen */
  padding:0 var(--pad) var(--sec);
}

/* liggend beeld over de volle breedte: de foto toont Max met een cliënt,
   en die interactie sneuvelt zodra je hem in een staand kader propt */
.about__media{
  grid-column:1 / -1; grid-row:1;
  margin-inline:calc(var(--pad) * -1);
  position:relative; overflow:hidden;
  aspect-ratio:2.4 / 1;
}
.about__figure{ margin:0; height:100%; overflow:hidden }
.about__figure img{
  width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  filter:brightness(.88) contrast(1.04);
  transform:scale(1.04);
  transition:filter .6s var(--ease-out);
}
.about__media:hover .about__figure img{ filter:brightness(.97) contrast(1.06) }
.about__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg, var(--ink), rgba(11,11,12,0) 34%),
    linear-gradient(180deg, rgba(11,11,12,.45), rgba(11,11,12,0) 26%);
}
/* rode hoeklijn, één keer op de pagina */
.about__media::before{
  content:""; position:absolute; left:var(--pad); bottom:0; z-index:2;
  width:clamp(64px,9vw,132px); height:3px; background:var(--red);
}

.about__copy{
  grid-column:1 / -1; grid-row:2;
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap); row-gap:clamp(1.6rem,3.5vh,2.4rem);
  align-items:start;
}
.about__head{ grid-column:1 / 6; grid-row:1 }
.about__head .pull{ margin-bottom:0 }
.about__head .kicker{ margin-bottom:1.3rem }
.about__body{
  grid-column:7 / -1; grid-row:1;
  display:grid; gap:1.1rem; justify-items:start;
}
.about__body .body{ max-width:54ch }

.pull{
  margin:clamp(1.8rem,4vh,2.6rem) 0 clamp(1.8rem,4vh,2.6rem);
  padding-left:clamp(1rem,1.8vw,1.6rem);
  border-left:2px solid var(--red);
  max-width:40ch;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 560;
  font-style:italic;
  font-size:clamp(1.1rem,1.65vw,1.55rem);
  line-height:1.34; letter-spacing:-.01em;
  color:var(--paper);
}

/* ==========================================================================
   Coaching in vier stappen
   ========================================================================== */

.proc{
  background:var(--ink-2);
  padding:var(--sec) var(--pad);
  border-top:1px solid var(--line);
}
.proc__head{ max-width:1600px; margin:0 auto clamp(2.8rem,6.5vh,4.5rem) }
.proc__head .kicker{ margin-bottom:1.2rem }

.proc__track{
  position:relative; max-width:1600px; margin:0 auto;
  height:2px; background:rgba(255,255,255,.14);
}
.proc__fill{
  position:absolute; inset:0; background:var(--red);
  transform:scaleX(0); transform-origin:left;
}
@supports (animation-timeline: view()){
  .proc__fill{ animation:draw linear both; animation-timeline:view(); animation-range:entry 60% cover 65% }
}
@supports not (animation-timeline: view()){ .proc__fill{ transform:scaleX(1) } }

.steps{
  max-width:1600px; margin:0 auto; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.step{
  position:relative;
  padding:clamp(1.9rem,4vh,2.8rem) clamp(1rem,2.2vw,2.2rem) 0;
  border-left:1px solid var(--line);
}
.step:first-child{ border-left:0; padding-left:0 }
.step:last-child{ padding-right:0 }
.step__dot{
  position:absolute; top:-5px; left:0; width:8px; height:8px;
  background:var(--red);
}
.step:first-child .step__dot{ left:0 }
.step__n{
  display:block; margin-bottom:.9rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 620;
  font-size:.8rem; letter-spacing:.16em; color:var(--red);
}
.step__t{
  margin:0 0 .6rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 86,"wght" 720;
  font-size:clamp(1.2rem,1.75vw,1.7rem);
  line-height:1.12; letter-spacing:-.018em; text-transform:uppercase;
}
.step__b{ margin:0; color:var(--mute-2); font-size:.95rem; line-height:1.62; max-width:32ch }

/* ==========================================================================
   Prijzen — lichte sectie
   ========================================================================== */

.price{
  background:var(--paper); color:var(--ink);
  padding:var(--sec) var(--pad);
}
.price__head{ max-width:1600px; margin:0 auto clamp(2.6rem,6vh,4.2rem) }
.price__head .kicker{ margin-bottom:1.2rem }
.kicker--dark{ color:#55555C }

.plans{
  max-width:1600px; margin:0 auto;
  display:grid; grid-template-columns:1.24fr 1fr 1fr;
  gap:clamp(1rem,1.6vw,1.6rem);
  align-items:stretch;
}
.plan{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(1.7rem,3.2vw,2.6rem);
  background:#fff;
  border:1px solid rgba(11,11,12,.14);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.plan:hover{ transform:translateY(-4px) }
.plan--feat{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.plan__flag{
  position:absolute; top:0; right:0;
  padding:.42rem .8rem;
  background:var(--red); color:#fff;
  font-family:var(--display);
  font-variation-settings:"wdth" 95,"wght" 640;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
}
.plan__t{
  margin:0 0 clamp(1rem,2.4vh,1.6rem);
  font-family:var(--display);
  font-variation-settings:"wdth" 86,"wght" 720;
  font-size:clamp(1.2rem,1.7vw,1.6rem);
  letter-spacing:-.015em; text-transform:uppercase;
}
.plan__price{ margin:0 0 clamp(1.1rem,2.6vh,1.8rem); display:flex; flex-direction:column; gap:.3rem }
.plan__amt{
  font-family:var(--display);
  font-variation-settings:"wdth" 80,"wght" 800;
  font-size:clamp(2.6rem,4.6vw,4rem); line-height:.9; letter-spacing:-.035em;
}
.plan--feat .plan__amt{ color:var(--red) }
.plan__per{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#6B6B72 }
.plan--feat .plan__per{ color:var(--mute) }
.plan__save{
  margin:-.6rem 0 1.3rem;
  padding:.5rem .7rem;
  background:rgba(225,6,0,.08);
  border-left:2px solid var(--red);
  font-size:.83rem; line-height:1.45; color:#3A3A40;
}
.plan__list{ margin:0 0 clamp(1.6rem,3.4vh,2.4rem); display:grid; gap:.62rem }
.plan__list li{
  position:relative; padding-left:1.35rem;
  font-size:.94rem; line-height:1.5; color:#3A3A40;
}
.plan--feat .plan__list li{ color:var(--mute-2) }
.plan__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:2px; background:var(--red);
}
.plan__cta{ margin-top:auto; justify-content:space-between }
.btn--dark{ background:var(--ink); color:var(--paper) }
.btn--dark:hover{ background:#26262C }
.btn--dark:active{ transform:scale(.97) }

/* ==========================================================================
   Resultaten — sleepbare rij
   ========================================================================== */

.quotes{ padding:var(--sec) 0; overflow:hidden }
.quotes__head{ max-width:1600px; margin:0 auto clamp(2.4rem,5.5vh,3.6rem); padding:0 var(--pad) }
.quotes__head .kicker{ margin-bottom:1.2rem }
.quotes__hint{
  margin:1.6rem 0 0; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute);
}

.rail{
  display:flex; gap:clamp(1rem,1.6vw,1.5rem);
  padding:0 var(--pad) 1rem;
  overflow-x:auto; scroll-snap-type:x proximity;
  scroll-padding-left:var(--pad);
  scrollbar-width:none; cursor:grab;
}
.rail::-webkit-scrollbar{ display:none }
.rail.is-dragging{ cursor:grabbing; scroll-snap-type:none }
.rail.is-dragging *{ pointer-events:none }

.qcard{
  flex:0 0 clamp(280px,29vw,420px);
  scroll-snap-align:start;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:clamp(220px,26vh,290px);
  padding:clamp(1.4rem,2.4vw,2rem);
  background:var(--ink-2);
  border:1px solid var(--line);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.qcard:hover{ border-color:rgba(255,255,255,.28); background:var(--ink-3) }
.qcard__q{
  margin:0 0 1.5rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 560;
  font-size:clamp(1.02rem,1.35vw,1.28rem); line-height:1.4;
}
.qcard__f{ display:flex; flex-direction:column; gap:.25rem }
.qcard__n{ font-size:.86rem; font-weight:600 }
.qcard__r{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute) }
.quotes__meer{
  max-width:1600px; margin:clamp(1.6rem,3.5vh,2.4rem) auto 0;
  padding:0 var(--pad);
}
.meer{
  display:inline-flex; align-items:center; gap:.6rem;
  padding-bottom:.25rem;
  border-bottom:1px solid var(--line);
  font-family:var(--display);
  font-variation-settings:"wdth" 95,"wght" 620;
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mute-2);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.meer .btn__arrow{ transition:transform .3s var(--ease) }
.meer:hover{ color:var(--paper); border-bottom-color:var(--red) }
.meer:hover .btn__arrow{ transform:translateX(4px) }

.qcard__sterren{
  display:flex; gap:2px; margin-bottom:1rem;
  color:var(--ster); line-height:0;
}
.qcard__q{ flex:1 1 auto }

/* ==========================================================================
   Slot-CTA
   ========================================================================== */

.final{
  position:relative; isolation:isolate;
  display:grid; place-items:center;
  min-height:clamp(520px,82vh,760px);
  padding:var(--sec) var(--pad);
  text-align:center;
  overflow:hidden;
}
.final__bg{ position:absolute; inset:0; z-index:-1 }
.final__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 34% }
.final__bg::after{
  content:""; position:absolute; inset:0;
  /* net donker genoeg om de kop te dragen, licht genoeg om de foto te zien */
  background:
    radial-gradient(78% 68% at 50% 46%, rgba(11,11,12,.34), rgba(11,11,12,.76) 76%),
    linear-gradient(0deg, var(--ink) 1%, rgba(11,11,12,.42) 34%, rgba(11,11,12,.58));
}
.final__inner{ max-width:min(100%,60rem) }
.display--final{
  font-size:clamp(2.6rem,7.4vw,7rem);
  line-height:.92;
  max-width:none;
}
.display--final .outline{ -webkit-text-stroke-width:clamp(1.2px,.22vw,2.6px) }
.final__b{
  margin:clamp(1.4rem,3vh,2rem) auto 0; max-width:44ch;
  color:var(--paper); font-size:clamp(1rem,1.15vw,1.14rem); line-height:1.65;
}
.btn--lg{ margin-top:clamp(1.6rem,3.4vh,2.4rem); padding:1.25rem 1.9rem; font-size:.9rem }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot{ border-top:1px solid var(--line); padding:clamp(2.6rem,6vh,4rem) var(--pad) clamp(1.6rem,3vh,2.2rem) }
.foot__top{
  max-width:1600px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:clamp(1.6rem,4vw,4rem);
  align-items:flex-start; justify-content:space-between;
}
.lockup{ display:inline-grid; justify-items:center; gap:.7rem }
.lockup__mark{ color:var(--paper); transition:color .3s var(--ease) }
.lockup:hover .lockup__mark{ color:var(--red) }
.lockup__tag{
  font-family:var(--display);
  font-variation-settings:"wdth" 100,"wght" 620;
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute);
}

.foot__nav ul,.foot__soc ul{ display:flex; flex-wrap:wrap; gap:clamp(.9rem,2vw,1.8rem) }
.foot__nav a,.foot__soc a{
  position:relative; font-size:.86rem; color:var(--mute-2);
  transition:color .22s var(--ease);
}
.foot__nav a::after,.foot__soc a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1.5px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .34s var(--ease);
}
.foot__nav a:hover,.foot__soc a:hover{ color:var(--paper) }
.foot__nav a:hover::after,.foot__soc a:hover::after,
.foot__nav a[aria-current]::after{ transform:scaleX(1) }
.foot__nav a[aria-current]{ color:var(--paper) }
.foot__soc a{ font-family:var(--display); font-variation-settings:"wdth" 95,"wght" 620;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase }

.foot__bot{
  max-width:1600px; margin:clamp(2.2rem,5vh,3.4rem) auto 0;
  padding-right:clamp(3.5rem,6vw,5rem);
  padding-top:1.3rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.76rem; color:var(--mute);
}
.foot__bot p{ margin:0 }
.foot__note a{ color:var(--mute-2); border-bottom:1px solid transparent; transition:color .22s var(--ease), border-color .22s var(--ease) }
.foot__note a:hover{ color:var(--paper); border-bottom-color:var(--red) }

/* ==========================================================================
   Mobiel paneel
   ========================================================================== */

.sheet{
  position:fixed; inset:0; z-index:45;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:2rem;
  padding:calc(var(--head-h) + 2rem) var(--pad) calc(var(--pad) + 1rem);
  background:var(--ink);
}
.sheet[hidden]{ display:none }
.sheet nav ul{ display:grid; gap:.2rem }
.sheet nav a{
  display:block; padding:.35rem 0;
  font-family:var(--display);
  font-variation-settings:"wdth" 84,"wght" 760;
  font-size:clamp(2rem,10vw,3rem); line-height:1.08;
  letter-spacing:-.03em; text-transform:uppercase;
  opacity:0; transform:translateY(24px);
  animation:fade-up .5s var(--ease-out) calc(.06s * var(--i,0)) both;
}
.sheet nav a:active{ color:var(--red) }
.sheet__cta{ justify-content:space-between }
body.is-locked{ overflow:hidden }
.burger[aria-expanded="true"] span:nth-child(1){ width:16px }
.burger[aria-expanded="true"] span:nth-child(2){ width:24px }

/* ==========================================================================
   Responsief — onderste secties
   ========================================================================== */

@media (max-width:1100px){
  .about__copy{ grid-template-columns:1fr; row-gap:clamp(1.4rem,3vh,2rem) }
  .about__head,.about__body{ grid-column:1; grid-row:auto }
  .about__media{ aspect-ratio:16 / 10 }
  .steps{ grid-template-columns:repeat(2,1fr) }
  .step:nth-child(3){ border-left:0; padding-left:0 }
  .step:nth-child(2n){ padding-right:0 }
  .step:nth-child(-n+2){ padding-bottom:clamp(1.6rem,3.5vh,2.4rem) }
  .step:nth-child(n+3){ border-top:1px solid var(--line) }
  .step:nth-child(n+3) .step__dot{ display:none }
  .plans{ grid-template-columns:1fr 1fr }
  .plan--feat{ grid-column:1 / -1 }
}

@media (max-width:760px){
  .about__media{ aspect-ratio:4 / 3 }
  .about__figure img{ object-position:58% 40% }
  .steps{ grid-template-columns:1fr }
  .step,.step:nth-child(3),.step:nth-child(2n){
    border-left:0; padding:clamp(1.5rem,4vh,2rem) 0;
    border-top:1px solid var(--line);
  }
  .step:first-child{ border-top:0 }
  .step__dot{ display:none }
  .step:first-child .step__dot{ display:block; top:-5px }
  .plans{ grid-template-columns:1fr }
  .plan--feat{ grid-column:1 }
  .qcard{ flex-basis:82vw }
  .foot__top{ flex-direction:column; gap:1.8rem }
}

/* zachte parallax op de secundaire beelden */
@supports (animation-timeline: view()){
  [data-soft]{
    animation:soft-drift linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  @keyframes soft-drift{
    from{ transform:scale(1.08) translateY(-3%) }
    to{   transform:scale(1.08) translateY(3%) }
  }

}

/* ==========================================================================
   Header — logo links, hoofdnav midden, actie rechts
   ========================================================================== */

.head{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:clamp(1rem,2.4vw,2.6rem);
}
.brand{ margin-right:0 }
.nav--main{ justify-self:center }
.head__end{
  justify-self:end;
  display:flex; align-items:center;
  gap:clamp(.8rem,1.6vw,1.4rem);
}
.head__div{
  width:1px; height:22px;
  background:rgba(255,255,255,.22);
  flex:none;
}
.nav--end ul{ gap:clamp(.8rem,1.5vw,1.3rem) }
.nav--end a{ font-size:.78rem }

/* ==========================================================================
   Veelgestelde vragen
   ========================================================================== */

.faq{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  padding:var(--sec) var(--pad);
  max-width:1600px; margin:0 auto;
  border-top:1px solid var(--line);
}
.faq__head{
  grid-column:1 / 6;
  position:sticky; top:calc(var(--head-h) + clamp(1.5rem,5vh,3.5rem));
  align-self:start;
}
.faq__head .kicker{ margin-bottom:1.3rem }
.faq__head .body{ margin-top:1.5rem; max-width:30ch }
.faq__list{ grid-column:7 / -1 }
.faq .h2{ font-size:clamp(2rem,3.5vw,3.3rem) }

.qa{ border-bottom:1px solid var(--line) }
.qa:first-child{ border-top:1px solid var(--line) }
.qa summary{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:clamp(1.15rem,2.6vh,1.6rem) 0;
  cursor:pointer; list-style:none;
}
.qa summary::-webkit-details-marker{ display:none }
.qa__q{
  font-family:var(--display);
  font-variation-settings:"wdth" 88,"wght" 620;
  font-size:clamp(1.02rem,1.5vw,1.35rem);
  line-height:1.28; letter-spacing:-.012em;
  transition:color .25s var(--ease);
}
.qa summary:hover .qa__q{ color:var(--red) }
.qa[open] .qa__q{ color:var(--paper) }

/* plus dat een min wordt, opgebouwd uit twee streken */
.qa__ico{
  position:relative; flex:none; width:16px; height:16px;
}
.qa__ico::before,.qa__ico::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--red);
  transform:translate(-50%,-50%);
  transition:transform .32s var(--ease), opacity .32s var(--ease);
}
.qa__ico::before{ width:16px; height:2px }
.qa__ico::after{ width:2px; height:16px }
.qa[open] .qa__ico::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0 }

.qa__a{ padding:0 0 clamp(1.2rem,2.8vh,1.7rem); max-width:58ch }
.qa__a p{ margin:0; color:var(--mute-2); font-size:clamp(.95rem,1.08vw,1.05rem); line-height:1.7 }
.lnk{ color:var(--paper); border-bottom:1px solid var(--red); padding-bottom:1px }
.lnk:hover{ color:var(--red) }

/* vloeiend open- en dichtklappen waar de browser het aankan */
@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size:allow-keywords }
  .qa::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .42s var(--ease-out), content-visibility .42s allow-discrete;
  }
  .qa[open]::details-content{ block-size:auto }
}

/* ==========================================================================
   Volg Max — bovenrand van de footer
   ========================================================================== */

.social{
  border-top:1px solid var(--line);
  background:var(--ink-2);
  padding:clamp(2.6rem,6.5vh,4.5rem) var(--pad);
}
.social__inner{
  max-width:1600px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:clamp(1.6rem,4vw,3rem);
}
.social .kicker{ margin-bottom:1rem }
.social .h2{ font-size:clamp(1.9rem,3.6vw,3.2rem) }
.social__btns{ display:flex; flex-wrap:wrap; gap:.7rem }

.soc{
  position:relative; z-index:0; overflow:hidden;
  display:inline-flex; align-items:center; gap:.75rem;
  padding:1rem 1.35rem;
  border:1px solid rgba(255,255,255,.22);
  font-family:var(--display);
  font-variation-settings:"wdth" 95,"wght" 640;
  font-size:.84rem; letter-spacing:.06em; text-transform:uppercase;
  transition:color .28s var(--ease), border-color .28s var(--ease), transform .18s var(--ease);
}
.soc::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--red);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .38s var(--ease-out);
}
.soc:hover{ border-color:var(--red); color:#fff }
.soc:hover::after{ transform:scaleY(1) }
.soc:active{ transform:scale(.97) }
.soc__i{ width:20px; height:20px; flex:none }
.soc .btn__arrow{ width:15px; height:15px; transition:transform .3s var(--ease) }
.soc:hover .btn__arrow{ transform:translateX(4px) }

.sprite{ position:absolute; width:0; height:0; overflow:hidden }

.foot__soc a{ display:inline-flex; align-items:center; gap:.5rem }
.foot__soc svg{ width:17px; height:17px }

/* ==========================================================================
   Terug naar boven
   ========================================================================== */

.totop{
  position:fixed; right:clamp(1rem,2.4vw,2rem); bottom:clamp(1rem,2.4vw,2rem);
  z-index:40;
  width:48px; height:48px; padding:0;
  display:grid; place-items:center;
  background:var(--paper); color:var(--ink);
  border:0; cursor:pointer;
  opacity:0; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.totop[hidden]{ display:none }
.totop.is-on{ opacity:1; transform:none }
.totop:hover{ background:var(--red); color:#fff }
.totop:active{ transform:scale(.94) }
.totop svg{ width:18px; height:18px }

/* ==========================================================================
   Scrollanimaties zonder scroll-driven ondersteuning
   ========================================================================== */

.no-vt .in{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--i,0) * .07s);
}
.no-vt .in.is-in{ opacity:1; transform:none }
.no-vt .probs li{ opacity:.34; transition:opacity .6s var(--ease) }
.no-vt .probs li.is-in{ opacity:1 }
.no-vt .band__rule,.no-vt .proc__fill{ transition:transform 1s var(--ease-out) }
.no-vt .band__rule.is-in,.no-vt .proc__fill.is-in{ transform:scaleX(1) }

/* ==========================================================================
   Responsief — header en onderste secties
   ========================================================================== */

@media (max-width:1240px){
  .nav--main,.head__end{ display:none }
  .burger{ display:flex }
  .head{ display:flex }
  .brand{ margin-right:auto }
}

@media (max-width:1100px){
  .faq{ grid-template-columns:1fr }
  .faq__head{ grid-column:1; position:static; margin-bottom:clamp(2rem,4.5vh,3rem) }
  .faq__list{ grid-column:1 }
  .social__inner{ align-items:flex-start }
}

@media (max-width:760px){
  .social__btns{ width:100%; flex-direction:column }
  .soc{ justify-content:space-between }
  .totop{ width:44px; height:44px }
}

@media (prefers-reduced-motion: reduce){
  .no-vt .in{ opacity:1; transform:none }
  .qa::details-content{ transition:none }
}

/* ==========================================================================
   Contactpagina
   ========================================================================== */

.phero{
  position:relative;
  padding:calc(var(--head-h) + clamp(3.5rem,11vh,7rem)) var(--pad) clamp(2.5rem,7vh,4.5rem);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.phero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(90% 70% at 8% 0%, rgba(225,6,0,.16), rgba(225,6,0,0) 62%);
}
.phero__copy{ max-width:1600px; margin:0 auto }
.display--page{
  font-size:clamp(3rem,9vw,8.5rem);
  line-height:.88;
}
.display--page .mask__in{ gap:0 }
.phero .lead{ margin-top:clamp(1.3rem,3vh,2rem) }
.phero__rail{
  position:absolute; right:var(--pad); top:calc(var(--head-h) + 2rem);
  writing-mode:vertical-rl;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--mute);
}

.ctc{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,3.4vw,3rem);
  padding:var(--sec) var(--pad);
  max-width:1600px; margin:0 auto;
  align-items:start;
}

/* --- formulier --- */
.form{ display:grid; gap:clamp(1.1rem,2.4vh,1.5rem); align-content:start }
.form__intro{
  margin:0 0 .4rem; max-width:46ch;
  color:var(--mute-2); font-size:.98rem; line-height:1.65;
}
.field{ display:grid; gap:.5rem }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.9rem,1.8vw,1.4rem) }
.field label{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2);
}
.req{ color:var(--red) }

.field input,
.field textarea,
.sel select{
  display:block;
  width:100%;
  max-width:100%;
  padding:12px 16px;
  background:var(--ink-2);
  border:1px solid #333338;
  border-radius:0;
  color:var(--paper);
  font-family:var(--text);
  font-size:1rem; line-height:1.5;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:8rem }
.field input::placeholder,
.field textarea::placeholder{ color:#7A7A82; opacity:1 }
.field input:hover,
.field textarea:hover,
.sel select:hover{ border-color:#4A4A52 }
.field input:focus-visible,
.field textarea:focus-visible,
.sel select:focus-visible{
  outline:none;
  border-color:var(--red);
  background:var(--ink-3);
  box-shadow:inset 0 -2px 0 0 var(--red);
}
.field input:user-invalid,
.field textarea:user-invalid,
.sel select:user-invalid{ border-color:var(--red) }

.sel{ position:relative }
.sel select{ appearance:none; padding-right:2.8rem; cursor:pointer }
.sel select:invalid{ color:#6E6E76 }
.sel option{ background:var(--ink-2); color:var(--paper) }
.sel__ico{
  position:absolute; right:1rem; top:50%; translate:0 -50%;
  width:16px; height:16px; color:var(--red); pointer-events:none;
}

/* honeypot: onzichtbaar voor mensen, wel invulbaar voor bots */
.pot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.form__send{ justify-self:start; margin-top:.4rem }
.form__status{
  margin:0; padding:.9rem 1.1rem;
  border-left:2px solid var(--red);
  background:rgba(225,6,0,.09);
  color:var(--paper); font-size:.94rem; line-height:1.6;
}
/* geslaagd krijgt een eigen kleur, anders leest een bevestiging als een fout */
.form__status[data-soort="goed"]{
  border-left-color:#2FA65A;
  background:rgba(47,166,90,.11);
}
.form__status[hidden]{ display:none }

/* --- directe kanalen --- */
.ways{ display:grid; gap:.7rem; align-content:start }
.ways .kicker{ margin:0 0 .6rem }

.way{
  position:relative;
  display:grid; gap:.35rem;
  padding:clamp(1.1rem,2.4vh,1.5rem) clamp(1.1rem,1.8vw,1.4rem);
  background:var(--ink-2);
  border:1px solid var(--line);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease-out);
}
a.way:hover{ border-color:var(--red); background:var(--ink-3); transform:translateX(4px) }
.way__lab{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute) }
.way__val{
  font-family:var(--display);
  font-variation-settings:"wdth" 88,"wght" 660;
  font-size:clamp(1.05rem,1.5vw,1.35rem); letter-spacing:-.01em;
}
.way__tag{
  position:absolute; top:.7rem; right:.8rem;
  padding:.22rem .45rem;
  border:1px solid rgba(225,6,0,.55);
  color:var(--red);
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
}
/* zolang de gegevens ontbreken is de kaart zichtbaar onaf */
.way.todo{ border-style:dashed; cursor:default }
.way.todo .way__val{ color:var(--mute) }
.way:not(.todo) .way__tag{ display:none }

.way--soc{ gap:.8rem }
.way__socs{ display:flex; flex-wrap:wrap; gap:.5rem }
.soc--sm{ padding:.7rem .9rem; font-size:.74rem; gap:.55rem; flex:1 1 auto }
.soc--sm .soc__i{ width:17px; height:17px }

@media (max-width:1100px){
  .ctc{ grid-template-columns:1fr; row-gap:clamp(2.4rem,6vh,3.5rem) }
  .phero__rail{ display:none }
}

@media (max-width:760px){
  .field-row{ grid-template-columns:1fr }
  .form__send{ justify-self:stretch; justify-content:space-between }
  .display--page{ font-size:clamp(2.8rem,15vw,5rem) }
}

/* --- WhatsApp: de laagdrempeligste route, dus de opvallendste knop --- */
.wa{
  position:relative; z-index:0; overflow:hidden;
  display:flex; align-items:center; gap:.9rem;
  padding:1.05rem 1.2rem;
  background:var(--red); color:#fff;
  transition:transform .18s var(--ease);
}
.wa::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#FF1A12;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.wa:hover::after{ transform:scaleX(1) }
.wa:active{ transform:scale(.985) }
.wa__i{ flex:none }
.wa__t{ display:grid; gap:.15rem; margin-right:auto }
.wa__t strong{
  font-family:var(--display);
  font-variation-settings:"wdth" 92,"wght" 660;
  font-size:.95rem; letter-spacing:.02em;
}
.wa__t small{ font-size:.76rem; color:rgba(255,255,255,.82) }
.wa .btn__arrow{ flex:none; transition:transform .3s var(--ease) }
.wa:hover .btn__arrow{ transform:translateX(4px) }
/* zolang het nummer ontbreekt is de knop geen link */
.wa[data-todo]{ cursor:default }
.wa[data-todo]::after{ content:none }

.way__sub{ font-size:.8rem; line-height:1.5; color:var(--mute) }
.way--soc{ padding-top:clamp(1.1rem,2.4vh,1.4rem) }

/* ==========================================================================
   Transformaties
   ========================================================================== */

/* om en om gespiegeld, anders wordt het drie keer dezelfde rij */
.trans + .trans{ border-top:1px solid var(--line) }
.trans--flip .trans__media{ grid-column:7 / -1; grid-row:1 }
.trans--flip .trans__copy{ grid-column:1 / 6; grid-row:1 }

.trans{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  align-items:center;
  padding:var(--sec) var(--pad);
  max-width:1600px; margin:0 auto;
}

/* voor en na in gelijke kaders: de opnames verschillen, de uitsnede niet */
.trans__media{
  grid-column:1 / 7;
  /* zonder expliciete rij zet de automatische plaatsing de tekst van een
     gespiegeld blok in rij 2, omdat kolom 1 dan al gepasseerd is */
  grid-row:1;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(.5rem,1vw,.9rem);
}
.ba{ margin:0; position:relative }
.ba__img{
  position:relative; overflow:hidden;
  aspect-ratio:3 / 4;
  background:var(--ink-2);
}
.ba__img img{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--pos, 50% 28%);
  /* dezelfde lichte grading op beide, anders wordt het oneerlijk */
  filter:grayscale(.18) contrast(1.06) brightness(.94);
  /* per foto bij te stellen zodat het lichaam even groot in beeld staat;
     dat is kadrering, geen bewerking van het onderwerp */
  transform:scale(var(--zoom, 1.06));
  transition:filter .55s var(--ease-out);
}
.ba:hover .ba__img img{ filter:grayscale(.04) contrast(1.08) brightness(1.03) }
.ba__img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(11,11,12,.72), rgba(11,11,12,0) 38%);
}
.ba__lab{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:.55rem .85rem;
  font-family:var(--display);
  font-variation-settings:"wdth" 95,"wght" 640;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper);
}
.ba__lab--na{ background:var(--red); color:#fff }
.ba__jaar{
  margin-left:.5em;
  font-variation-settings:"wdth" 95,"wght" 500;
  opacity:.72;
}

.trans__copy{ grid-column:8 / -1; grid-row:1 }
.trans__copy .kicker{ margin-bottom:1.2rem }

.facts{
  margin:clamp(1.4rem,3vh,2rem) 0 0;
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.facts > div{
  padding:clamp(.9rem,2vh,1.2rem) clamp(1rem,2vw,1.6rem);
  border-left:1px solid var(--line);
  flex:1 1 auto;
}
.facts > div:first-child{ border-left:0; padding-left:0 }
.facts dt{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute);
}
.facts dd{
  margin:.35rem 0 0;
  font-family:var(--display);
  font-variation-settings:"wdth" 86,"wght" 720;
  font-size:clamp(1.1rem,1.6vw,1.5rem); letter-spacing:-.015em;
}

.verhaal{ margin-top:clamp(1.5rem,3.2vh,2.2rem); max-width:46ch }
.verhaal p{
  margin:0 0 1.05rem;
  color:var(--mute-2);
  font-size:clamp(1rem,1.12vw,1.1rem); line-height:1.72;
}
.verhaal p:last-child{ margin-bottom:0 }
/* de eerste zin krijgt gewicht, de rest leest rustig door */
.verhaal p:first-child{ color:var(--paper) }

/* ==========================================================================
   Wat nog komt
   ========================================================================== */

.volgt{
  border-top:1px solid var(--line);
  background:var(--ink-2);
  padding:var(--sec) var(--pad);
}
.volgt__inner{ max-width:1600px; margin:0 auto }
.volgt .kicker{ margin-bottom:1.2rem }
.volgt .body{ margin-top:1.5rem; max-width:52ch }
.volgt .btn{ margin-top:clamp(1.6rem,3.4vh,2.3rem) }

@media (max-width:1100px){
  .trans{ grid-template-columns:1fr; row-gap:clamp(2.2rem,5vh,3.2rem) }
  .trans__media,.trans__copy,
  .trans--flip .trans__media,.trans--flip .trans__copy{ grid-column:1; grid-row:auto }
  .verhaal{ max-width:60ch }
}

@media (max-width:760px){
  .facts > div{ padding:.85rem .9rem }
  .facts dd{ font-size:1.05rem }
  .ba__lab{ padding:.45rem .65rem; font-size:.62rem }
}


/* ==========================================================================
   Beweging op de transformaties
   ========================================================================== */

@supports (animation-timeline: view()){
  /* het beeld drijft mee tijdens het scrollen; de schaal blijft in de
     keyframes staan, anders overschrijft de animatie de uitsnede */
  .ba__img img{
    animation:ba-drift linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  @keyframes ba-drift{
    from{ transform:scale(var(--zoom, 1.06)) translateY(-2.2%) }
    to{   transform:scale(var(--zoom, 1.06)) translateY(2.2%) }
  }

  /* het label schuift onder de rand vandaan */
  .ba__lab{
    animation:lab-up .6s var(--ease-out) both;
    animation-timeline:view();
    animation-range:entry 24% entry 74%;
  }
  @keyframes lab-up{
    from{ transform:translateY(130%); opacity:0 }
    to{   transform:none; opacity:1 }
  }

  /* de scheidslijnen van de feitenstrook trekken zich open */
  .facts{
    animation:facts-open .7s var(--ease-out) both;
    animation-timeline:view();
    animation-range:entry 20% entry 78%;
  }
  @keyframes facts-open{
    from{ clip-path:inset(0 100% 0 0) }
    to{   clip-path:inset(0 0 0 0) }
  }
}

@media (prefers-reduced-motion: reduce){
  .ba__lab{ transform:none; opacity:1 }
  .facts{ clip-path:none }
}