/* =========================================================
   SOCIAL FIT · grafisch voorstel
   Brandbook v2.0 · IV Agency — 1-op-1 vertaald naar tokens
   ========================================================= */

/* ---------- FONTS ---------- */
@font-face{font-family:'Nulshock';src:url('../fonts/nulshock-bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('../fonts/neuemontreal-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('../fonts/neuemontreal-medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sauce Sans';src:url('../fonts/opensauce-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sauce Sans';src:url('../fonts/opensauce-medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sauce Sans';src:url('../fonts/opensauce-semibold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

/* ---------- TOKENS ---------- */
:root{
  /* palet — exact uit het brandbook */
  --bordeaux:#530E11;
  --bordeaux-diep:#42090C;      /* hover: één tint donkerder */
  --donker:#381315;
  --donker-diep:#2A0E10;
  --creme:#F2F2E7;
  --offwhite:#ECE8DE;
  --beige:#D8D1C0;
  --blauw:#D8EAF5;
  --blauw-diep:#BCD9EC;
  --geel:#F7F2CE;
  --geel-diep:#EDE4AC;

  /* semantisch */
  --papier:var(--creme);
  --inkt:var(--donker);
  --inkt-zacht:rgba(56,19,21,.68);
  --lijn:rgba(56,19,21,.16);
  --lijn-licht:rgba(242,242,231,.20);
  --inkt-licht:var(--creme);
  --inkt-licht-zacht:rgba(242,242,231,.70);

  /* type */
  --kop:'Nulshock',system-ui,sans-serif;
  --label:'Neue Montreal','Helvetica Neue',sans-serif;
  --tekst:'Open Sauce Sans',system-ui,-apple-system,sans-serif;

  /* ritme */
  --goot:24px;
  --rand:clamp(20px,5vw,72px);
  --max:1360px;
  --max-breed:1800px;
  --rand-breed:clamp(20px,3.2vw,64px);
  --binnen:clamp(24px,3.4vw,60px);   /* binnenmarge van het herokader */
  --sectie:clamp(76px,8.8vw,148px);   /* één ritme voor de hele pagina */

  /* motion — brandbook: 200–300ms, ease-out, 8–16px verticaal */
  --snel:200ms;
  --normaal:260ms;
  --traag:300ms;
  --soepel:cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--tekst);font-size:clamp(15.5px,.42vw + 14.4px,17.5px);
  line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
[hidden]{display:none !important}
img,picture,video,svg{display:block;max-width:100%}
img,video{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
::selection{background:var(--bordeaux);color:var(--creme)}
.skip{position:absolute;left:-9999px;top:0;background:var(--bordeaux);color:var(--creme);padding:12px 20px;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px}
.sectie--bordeaux :focus-visible,.sectie--donker :focus-visible,
.werk :focus-visible,.scan :focus-visible,.slot :focus-visible,.voet :focus-visible,
.hero :focus-visible{outline-color:var(--blauw)}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
/* zelfde box als het herokader, zodat koppen exact uitlijnen met de hero */
.wrap--kader{width:min(100% - 2 * var(--rand-breed),var(--max-breed));max-width:none;
  margin-inline:auto;padding-inline:var(--binnen)}
/* zelfde breedte, maar zonder binnenmarge: voor kaders die de volle
   breedte van het herokader moeten hebben */
.wrap--vlak{width:min(100% - 2 * var(--rand-breed),var(--max-breed));max-width:none;
  margin-inline:auto;padding-inline:0}
.sectie{padding-block:var(--sectie);position:relative}

.sectie--creme{background:var(--creme)}
.sectie--creme + .sectie--creme{padding-top:0}
.sectie--beige{background:var(--beige)}
.sectie--offwhite{background:var(--offwhite)}
.sectie--bordeaux{background:var(--bordeaux);color:var(--inkt-licht)}
.sectie--donker{background:var(--donker);color:var(--inkt-licht)}

/* ---------- TYPOGRAFIE ---------- */
.kop{max-width:none;margin-bottom:clamp(48px,6vw,88px)}
.kop--breed{max-width:none}
.kop--midden{margin-inline:auto;text-align:center}
.kop--midden .kop__lead{margin-inline:auto}
.kop__titel{
  font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,4.2vw,4rem);line-height:.98;letter-spacing:-.01em;
  color:var(--bordeaux);
}
.kop--licht .kop__titel{color:var(--creme)}
.kop__lead{margin-top:1.4em;max-width:56ch;color:var(--inkt-zacht);font-size:1.05em}
.kop--licht .kop__lead{color:var(--inkt-licht-zacht)}
.is-blauw{color:var(--blauw)}

/* ---------- KNOPPEN ----------
   Het brandbook toont er precies drie, plus de hover van de primaire.
   Strakke hoeken, label in zinsvorm zonder tracking, tekst 100% dekking,
   hover verdonkert het vlak één tint. Meer varianten bestaan er niet.     */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.05em 1.7em;border-radius:0;border:1px solid transparent;
  font-family:var(--tekst);font-weight:600;
  font-size:clamp(.94rem,.2vw + .89rem,1rem);letter-spacing:0;text-transform:none;
  line-height:1.2;text-align:center;
  transition:background var(--snel) var(--soepel),color var(--snel) var(--soepel),
             border-color var(--snel) var(--soepel);
}
.btn--groot{padding:1.2em 2.1em}

/* primair — de belangrijkste actie */
.btn--primair{background:var(--bordeaux);color:var(--creme)}
.btn--primair:hover{background:var(--bordeaux-diep)}

/* accent — op donkere ondergrond, of een tweede weg */
.btn--accent{background:var(--blauw);color:var(--bordeaux)}
.btn--accent:hover{background:var(--blauw-diep)}

/* secundair — ondergeschikte actie */
.btn--secundair{background:transparent;color:var(--bordeaux);border-color:currentColor}
.btn--secundair:hover{background:rgba(83,14,17,.08)}
.hero .btn--secundair,.plan .btn--secundair,.plannen__kader .btn--secundair,.voet .btn--secundair,
.sectie--bordeaux .btn--secundair,.sectie--donker .btn--secundair,
.werk .btn--secundair,.scan .btn--secundair,.slot .btn--secundair,
.plan--uitgelicht .btn--secundair{color:var(--creme)}

.hero .btn--secundair:hover,.plan .btn--secundair:hover,.plannen__kader .btn--secundair:hover,.voet .btn--secundair:hover,
.sectie--bordeaux .btn--secundair:hover,.sectie--donker .btn--secundair:hover,
.werk .btn--secundair:hover,.scan .btn--secundair:hover,.slot .btn--secundair:hover,
.plan--uitgelicht .btn--secundair:hover{background:rgba(242,242,231,.10)}


/* tekstlinks — bij hover een onderstreping, niets vergroot */
.link{
  position:relative;font-family:var(--tekst);font-weight:600;
  font-size:clamp(.94rem,.2vw + .89rem,1rem);letter-spacing:0;text-transform:none;
  color:var(--bordeaux);padding-bottom:.3em;
}
.link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--normaal) var(--soepel);
}
.link:hover::after{transform:scaleX(1)}
.link--licht{color:var(--creme)}

.rond{
  width:52px;height:52px;display:grid;place-items:center;
  border:1px solid var(--lijn-licht);color:var(--creme);font-size:16px;
  transition:background var(--snel) var(--soepel),border-color var(--snel) var(--soepel);
}
.rond:hover{background:rgba(242,242,231,.10);border-color:rgba(242,242,231,.42)}

/* ---------- DE BALKEN ---------- */
.balken{width:auto}
.balken rect{fill:var(--bordeaux)}
.balken--licht rect{fill:var(--creme)}
.balken rect.is-leeg{fill:none;stroke:currentColor;stroke-width:2;opacity:.42}
.balken rect.is-actief{fill:none;stroke:var(--blauw);stroke-width:3}
.balken--mini{height:26px}
.balken--fase{height:38px;margin-bottom:22px}
.balken--kaart{height:22px;margin-top:32px;opacity:.28}
.balken--fase rect{fill:var(--creme)}
.balken--fase rect.is-leeg{stroke:rgba(242,242,231,.45)}
.plan .balken--mini rect{fill:var(--bordeaux)}
.plan .balken--mini rect.is-leeg{stroke:var(--bordeaux);fill:none}
.plan--uitgelicht .balken--mini rect{fill:var(--creme)}
.plan--uitgelicht .balken--mini rect.is-leeg{stroke:rgba(242,242,231,.5);fill:none}

/* ---------- NAVIGATIE ----------
   Staat op de crème achtergrond, los boven het herokader.            */
.nav{position:sticky;top:0;z-index:100;background:var(--creme);
  border-bottom:1px solid transparent;transition:border-color var(--traag) var(--soepel)}
.nav.is-vast{border-bottom-color:var(--lijn)}
.nav__inner{
  max-width:var(--max-breed);margin-inline:auto;padding:20px var(--rand-breed);
  display:flex;align-items:center;gap:clamp(16px,3vw,48px);
}
.nav__logo{position:relative;z-index:2}
.nav__logo img{height:30px;width:auto}
.nav__logo-licht{display:none}
.nav__menu{display:flex;align-items:center;gap:clamp(14px,2vw,32px);margin-left:auto}
.nav__link{
  font-family:var(--tekst);font-weight:600;
  font-size:clamp(.82rem,.16vw + .78rem,.9rem);letter-spacing:.08em;text-transform:uppercase;
  color:var(--bordeaux);padding:10px 0;position:relative;
}
.nav__link::after{content:"";position:absolute;left:0;bottom:4px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--normaal) var(--soepel)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__item{position:relative}
.nav__sub{
  position:absolute;top:calc(100% + 6px);left:-24px;width:24rem;
  background:var(--donker);color:var(--creme);
  padding:0 0 .5rem;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  box-shadow:0 26px 60px -26px rgba(24,5,7,.6);
  transition:opacity var(--normaal) var(--soepel),transform var(--normaal) var(--soepel),
             visibility var(--normaal);
}
.nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{
  opacity:1;visibility:visible;transform:translateY(0)}

/* de verloopbalk uit het brandbook sluit het paneel bovenaan af, net als
   onder het herokader                                                    */
.nav__sub-rand{display:block;height:4px;
  background:linear-gradient(90deg,#819099 0%,#80777D 20%,#775055 40%,#815252 60%,#9D6D6B 80%,#AE8581 100%)}

.nav__sub-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:1rem;padding:1rem 1.35rem;position:relative;
  transition:background var(--snel) var(--soepel)}
.nav__sub-item + .nav__sub-item{box-shadow:0 -1px 0 rgba(242,242,231,.1)}
.nav__sub-item:hover{background:rgba(242,242,231,.06)}

.balken--sub{height:22px;flex:none}
.balken--sub rect{fill:var(--creme)}
.balken--sub rect.is-leeg{fill:none;stroke:rgba(242,242,231,.4);stroke-width:2}
/* elk plan heeft zijn eigen kleur, dezelfde als op de plannenkaarten */
.nav__sub-item[data-plan="transformatie"] .balken--sub rect:not(.is-leeg){fill:var(--blauw)}
.nav__sub-item[data-plan="buildgrow"] .balken--sub rect:not(.is-leeg){fill:var(--geel)}
.nav__sub-item[data-plan="levelup"] .balken--sub rect:not(.is-leeg){fill:var(--beige)}

.nav__sub-tekst{display:flex;flex-direction:column;gap:.28em;min-width:0}
.nav__sub-naam{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:.98rem;letter-spacing:-.005em;line-height:1}
.nav__sub-uitleg{font-family:var(--tekst);font-weight:400;font-size:.8rem;
  letter-spacing:0;text-transform:none;line-height:1.35;color:rgba(242,242,231,.66)}

.nav__sub-pijl{width:18px;color:rgba(242,242,231,.5);
  transition:transform var(--normaal) var(--soepel),color var(--normaal) var(--soepel)}
.nav__sub-pijl svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.6}
.nav__sub-item:hover .nav__sub-pijl{transform:translateX(4px);color:var(--creme)}

.nav__sub-voet{display:block;margin:.5rem 1.35rem 0;padding-top:.9rem;
  border-top:1px solid rgba(242,242,231,.14);
  font-family:var(--tekst);font-weight:500;font-size:.78rem;letter-spacing:0;
  text-transform:none;color:rgba(242,242,231,.66);
  transition:color var(--snel) var(--soepel)}
.nav__sub-voet:hover{color:var(--creme)}

/* De enige knop op de site in kapitalen. Het brandbook schrijft zinsvorm
   voor, maar deze staat tussen de menu-items die wél in kapitalen staan en
   viel daar als enige uit de toon. Tjerk heeft dat expliciet zo gevraagd.
   Kapitalen zonder spatiëring lopen dicht, vandaar de lichte tracking.  */
.nav__cta{padding:.8em 1.35em;text-transform:uppercase;letter-spacing:.06em;
  /* de knop staat in het menu zodat hij op mobiel meekomt; op desktop
     houdt deze marge de oude tussenruimte aan                           */
  margin-left:clamp(2px,1.1vw,20px)}
.nav__burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;margin-left:auto}
.nav__burger span{display:block;height:1.5px;background:var(--bordeaux);
  transition:transform var(--normaal) var(--soepel),opacity var(--normaal)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.nav__progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.nav__progress i{display:block;height:100%;width:0;background:var(--bordeaux);transition:width 90ms linear}

/* ---------- HERO ----------
   Een losstaand kader op de crème pagina, met witruimte eromheen.
   Strakke hoeken, want afrondingen mogen niet.                       */
.hero{background:var(--creme);padding:clamp(6px,1vw,16px) 0 0}
.hero__kader{
  position:relative;overflow:hidden;background:var(--donker);
  width:calc(100% - 2 * var(--rand-breed));max-width:var(--max-breed);margin-inline:auto;
  aspect-ratio:16 / 9;max-height:86svh;
  display:flex;align-items:flex-end;isolation:isolate;
}
/* De hero wisselt van opname. Vier lagen over elkaar, alleen de actieve is
   zichtbaar. Een achtergrondafbeelding kun je niet overvloeien, vandaar
   echte beeldlagen. Bewegingsduur staat in één token, zodat je hem op één
   plek kunt bijstellen.                                                 */
/* De overvloeier duurt bewust langer dan de 200-300 ms uit het brandbook.
   Dat voorschrift gaat over hovers en sectie-overgangen; een hele foto die
   in 300 ms omslaat vraagt juist aandacht, en dat mag hij niet.        */
.hero{--wissel:550ms}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__beeld{position:absolute;inset:0;display:block;
  opacity:0;transition:opacity var(--wissel) var(--soepel)}
.hero__beeld.is-actief{opacity:1}
.hero__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:saturate(.84) contrast(1.06) sepia(.10)}
@media (max-width:820px){
  .hero__beeld img{object-position:50% 22%}
}
/* de foto iets terug zodat de crème tekst naar voren komt */
.hero__toon{position:absolute;inset:0;background:rgba(22,5,7,.26)}
.hero__gloed{position:absolute;inset:auto 0 0 0;height:64%;
  background:linear-gradient(to top,rgba(40,7,9,.94) 0%,rgba(60,10,13,.82) 24%,rgba(83,14,17,.42) 52%,rgba(83,14,17,0) 100%);
}
.hero__inhoud{position:relative;z-index:2;width:100%;
  padding:0 var(--binnen) clamp(38px,4.4vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,56px);align-items:end;
}
.hero__title{
  font-family:var(--kop);font-weight:700;text-transform:uppercase;color:var(--creme);
  font-size:clamp(1.5rem,3.1vw,3.15rem);line-height:1.05;letter-spacing:-.014em;
  text-shadow:0 2px 30px rgba(24,5,7,.35);
}
.hero__rechts{padding-bottom:clamp(2px,.4vw,8px)}
/* de verloopbalk sluit het kader af */
.hero__verlooplijn{position:absolute;inset:auto 0 0 0;z-index:4;height:clamp(8px,.9vw,14px);
  /* tinten afgelezen van de verloopbalk onderaan de brandbook-openers */
  background:linear-gradient(90deg,#819099 0%,#80777D 20%,#775055 40%,#815252 60%,#9D6D6B 80%,#AE8581 100%);
}

@media (min-width:901px){
  .hero__title{text-wrap:nowrap}
}

@media (max-width:900px){
  .hero{padding-bottom:clamp(40px,7vw,64px)}
  .hero__kader{width:calc(100% - 2 * var(--rand));aspect-ratio:auto;max-height:none;display:block}
  /* op een smal scherm is er geen ruimte voor de afgedwongen regelafbreking:
     de kop loopt dan tot buiten het kader                                 */
  .hero__title br{display:none}
  /* geen min-height naast een aspect-ratio: op een smal scherm wint de
     hoogte en rekent de verhouding een breedte uit die buiten het kader
     valt                                                                */
  .hero__media{position:relative;aspect-ratio:3/4;max-height:none}
  .hero__beeld{position:absolute;inset:0}
  .hero__gloed{height:80%}
  /* minmax(0,...) is nodig: een lang woord als TRANSFORMATIE. duwt een
     gewone 1fr-kolom anders breder dan het kader                        */
  .hero__inhoud{position:absolute;inset:auto 0 0 0;grid-template-columns:minmax(0,1fr);
    gap:clamp(18px,4vw,26px);padding:0 var(--rand) clamp(30px,6vw,42px)}
  /* vangnet: past een woord echt niet, dan breekt het liever af dan dat
     het het hele kader breder duwt                                      */
  .hero__title{font-size:clamp(1.35rem,5.4vw,2.1rem);line-height:1.1;overflow-wrap:anywhere}
  /* TRANSFORMATIE. is één woord van veertien tekens en kan niet afbreken;
     de maat moet dus mee krimpen met het scherm                         */
  .hero--plan .hero__title{font-size:clamp(1.15rem,5.6vw,2.4rem);line-height:1.05}
  .hero__rechts .btn{width:100%}
  .hero__rechts .btn{width:100%}
}

/* ---------- SECTIEKOP: titel links, alinea ernaast ---------- */
.sectiekop--enkel{grid-template-columns:1fr!important}
.sectiekop{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,56px);align-items:start;
  margin-bottom:clamp(34px,4vw,58px)}
.sectiekop__titel{
  font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.45rem,2.7vw,2.5rem);line-height:1.04;letter-spacing:-.012em;
  color:var(--bordeaux);
}
.sectiekop--licht .sectiekop__titel{color:var(--creme)}
.sectiekop__lead{color:var(--inkt-zacht);max-width:52ch;padding-top:.35em}
.sectiekop--licht .sectiekop__lead{color:var(--inkt-licht-zacht)}
@media (max-width:900px){
  .sectiekop{grid-template-columns:1fr;gap:clamp(16px,3vw,22px)}

}

/* ---------- STAPPEN ----------
   Cijfers naast elkaar, omlijnd. Hover en de actieve stap vullen ze.
   De dunne lijn erboven groeit mee met de kolom: "de lijn ordent
   informatie". Openen gebeurt met flex-grow, dus er schaalt niets.   */
.stappen{display:flex;align-items:stretch;gap:0}
.stap{
  position:relative;min-width:0;overflow:hidden;
  flex:1 1 auto;flex-basis:clamp(4.4rem,9.9vw,9.3rem);
  border-top:1px solid var(--lijn);
  transition:flex-grow var(--traag) var(--soepel),border-top-color var(--normaal) var(--soepel);
}
.stap + .stap{margin-left:clamp(16px,2.1vw,38px)}
.stap.is-open{flex-grow:6;border-top-color:var(--bordeaux)}

.stap__knop{
  display:block;width:100%;text-align:left;padding:clamp(22px,2.4vw,34px) 0 0;
  cursor:pointer;
}
.stap__nr{
  display:block;font-family:var(--kop);font-weight:700;line-height:.86;
  font-size:clamp(3.2rem,7.4vw,7rem);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:2px rgba(83,14,17,.5);
  transition:-webkit-text-stroke-color var(--normaal) var(--soepel);
}
/* gevuld met het merkverloop, in de tinten van de verloopbalk uit het
   brandbook: blauwgrijs naar oudroze. Alleen de actieve en de aangewezen
   stap, zodat de kleur betekenis houdt.                                 */
.stap__knop:hover .stap__nr,
.stap.is-open .stap__nr{
  -webkit-text-stroke-color:transparent;
  background-image:linear-gradient(140deg,#530E11 0%,#6B3237 38%,#8A6F73 68%,#819099 100%);
  -webkit-background-clip:text;background-clip:text;
}
/* de titel staat ook in de knop, voor schermlezers en toetsenbord */
.stap__verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Alleen de open stap staat in de flow. Een dichtgeklapte kolom is smal,
   dus zijn tekst zou daar tien regels hoog worden en de hele rij oprekken,
   ook al is hij onzichtbaar. Vandaar dat de rest eruit gehaald wordt.   */
.stap__body{
  position:absolute;left:0;bottom:0;pointer-events:none;
  width:min(100%,clamp(260px,32vw,470px));padding:clamp(22px,2.4vw,34px) 0 0;
  opacity:0;transform:translateY(12px);
  transition:opacity var(--normaal) var(--soepel),transform var(--normaal) var(--soepel);
}
.stap.is-open .stap__body{position:static;pointer-events:auto;
  opacity:1;transform:none;transition-delay:80ms}
.stap__titel{
  font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(.95rem,1.15vw,1.25rem);line-height:1.15;color:var(--bordeaux);
  margin-bottom:.85em;
}
.stap__tekst{color:var(--inkt-zacht);font-size:.94em}

@media (max-width:900px){
  /* op mobiel wordt het een gewone verticale accordeon */
  .stappen{flex-direction:column;gap:0}
  .stap{flex:none;flex-basis:auto;overflow:visible;border-top-color:var(--lijn)}
  .stap + .stap{margin-left:0}
  .stap:last-child{border-bottom:1px solid var(--lijn)}
  .stap.is-open{border-top-color:var(--bordeaux)}
  .stap__knop{display:flex;align-items:center;gap:clamp(16px,4vw,26px);
    padding-block:clamp(14px,3vw,20px)}
  .stap__nr{font-size:clamp(2.1rem,10vw,3.2rem)}
  .stap__verborgen{position:static;width:auto;height:auto;clip-path:none;white-space:normal;
    font-family:var(--kop);font-weight:700;text-transform:uppercase;
    font-size:clamp(.85rem,3.6vw,1.05rem);line-height:1.15;color:var(--bordeaux)}
  .stap__titel{display:none}
  .stap__body{position:static;width:auto;padding:0;height:0;overflow:hidden;opacity:1;transform:none}
  .stap.is-open .stap__body{height:auto;padding-bottom:clamp(18px,4vw,26px)}
  .stap:not(.is-open) .stap__body{opacity:0}
}

/* ---------- PLANNEN ----------
   Eén donker kader, even breed als het herokader, met de kop gecentreerd
   en daaronder drie kaarten. Strakke hoeken, geen schaduwen.           */
.plannen__kader{position:relative;color:var(--inkt);
  padding:0}

.plannen__kop{max-width:none;margin:0 auto clamp(34px,4vw,58px);text-align:center}
.plannen__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;color:var(--bordeaux);
  font-size:clamp(1.5rem,3vw,2.85rem);line-height:1.02;letter-spacing:-.012em}
.plannen__lead{margin-top:1.3em;color:var(--inkt-zacht);max-width:74ch;margin-inline:auto}
@media (min-width:901px){
  .plannen__titel{text-wrap:nowrap}
}

.plannen__rij{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);align-items:stretch}

.plan{position:relative;overflow:hidden;display:flex;z-index:1;
  background:#3E1C1E;border:0}

.plan__binnen{position:relative;z-index:2;display:flex;flex-direction:column;
  width:100%;padding:clamp(24px,2.4vw,36px)}

/* kaart 1 draagt de contentdag-video, verder teruggezet zodat de tekst leidt */
.plan--beeld .plan__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.30;filter:saturate(.75) contrast(1.02) sepia(.08)}
.plan__sluier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(56,19,21,.90) 0%,rgba(56,19,21,.74) 46%,rgba(56,19,21,.58) 100%)}

/* de middelste kaart is bordeaux: het aanbod dat we willen laten kiezen */
.plan--uitgelicht{background:var(--bordeaux)}
.plan__badge{position:absolute;top:0;right:0;z-index:3;background:var(--blauw);color:var(--bordeaux);
  font-family:var(--tekst);font-weight:600;font-size:.8rem;padding:7px 14px}

.plan .balken--mini{height:24px;margin-bottom:clamp(18px,2vw,26px)}
.plan .balken--mini rect{fill:var(--creme)}
.plan .balken--mini rect.is-leeg{fill:none;stroke:rgba(242,242,231,.45)}
.plan--uitgelicht .balken--mini rect.is-leeg{stroke:rgba(242,242,231,.55)}

.plan__naam{font-family:var(--kop);font-weight:700;text-transform:uppercase;color:var(--creme);
  font-size:clamp(1.3rem,2vw,1.85rem);line-height:1}
.plan__functie{margin-top:.7em;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blauw)}
.plan--uitgelicht .plan__functie{color:var(--blauw)}
.plan__pitch{margin-top:1.2em;color:var(--inkt-licht-zacht);font-size:.95em;max-width:34ch}
/* de lijsten zitten achter een uitklapper, zodat de drie kaarten in rust
   even lang zijn en de sectie een keuze vraagt in plaats van een vergelijking */
.plan__meer{margin-top:1.7em;margin-bottom:clamp(18px,1.9vw,28px);display:flex;align-items:center;gap:.85em;
  font-family:var(--tekst);font-weight:600;font-size:.92em;color:var(--creme);
  padding-bottom:.3em;position:relative;width:fit-content}
.plan__meer span{position:relative}
.plan__meer span::after{content:"";position:absolute;left:0;bottom:-.25em;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--normaal) var(--soepel)}
.plan__meer:hover span::after{transform:scaleX(1)}
/* het plusje wordt een minnetje: twee streepjes, waarvan er één wegvalt */
.plan__meer i{position:relative;display:block;width:11px;height:11px;flex:none}
.plan__meer i::before,.plan__meer i::after{content:"";position:absolute;background:currentColor}
.plan__meer i::before{left:0;top:5px;width:11px;height:1.5px}
.plan__meer i::after{left:4.75px;top:0;width:1.5px;height:11px;
  transition:opacity var(--normaal) var(--soepel)}
.plan.is-uit .plan__meer i::after{opacity:0}

.plan__uitklap{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--traag) var(--soepel)}
/* lucht tussen het laatste punt en de knop; valt weg als de lijst dicht is */
.plan__uitklap > div{overflow:hidden;min-height:0}
.plan.is-uit .plan__uitklap{grid-template-rows:1fr}

/* de onderruimte zit op de lijst, niet op het geklemde blok: padding kan
   niet meekrimpen naar nul, een marge wel */
.plan__lijst{margin:0 0 clamp(20px,2.1vw,32px);display:grid;gap:.85em}
.plan__lijst li{position:relative;padding-left:1.5em;font-size:.92em;color:rgba(242,242,231,.86)}
.plan__lijst li::before{content:"+";position:absolute;left:0;top:-.05em;font-weight:600;opacity:.55}
.plan .btn{margin-top:auto;width:100%}

.plannen__voet{margin-top:clamp(28px,3vw,44px);text-align:center;
  color:var(--inkt-zacht);font-size:.95em}
.plannen__voet .link{margin-inline-start:.35em;margin-inline-end:0;color:var(--bordeaux)}


@media (max-width:1080px){
  .plannen__rij{grid-template-columns:1fr 1fr}
  .plan--uitgelicht{grid-column:1 / -1;order:-1}
}
@media (max-width:720px){
  .plannen__rij{grid-template-columns:1fr}
  .plan--uitgelicht{order:0}
  .plannen__kader{padding-inline:clamp(16px,4vw,28px)}
}

/* ---------- CASES ----------
   Titel links, drie vierkanten daarnaast in een losse driehoek. Bij hover
   schuift het label uit de vierkante knop; er schaalt niets.           */
.cases{display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,1fr);
  gap:clamp(32px,5vw,90px);align-items:center}
.cases__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.45rem,2.7vw,2.5rem);line-height:1.04;letter-spacing:-.012em;color:var(--bordeaux)}
.cases__lead{margin-top:1.3em;color:var(--inkt-zacht);max-width:34ch}
.cases__kop .btn{margin-top:clamp(24px,2.6vw,36px)}

.cases__groep{display:grid;grid-template-columns:repeat(9,1fr);
  gap:clamp(10px,1.1vw,16px);align-items:start;
  width:min(100%,820px);margin-left:auto}
.case:nth-child(1){grid-column:1 / 5;grid-row:1}          /* Skulpt, linksboven */
.case:nth-child(3){grid-column:2 / 6;grid-row:2}          /* ReSeth, eronder en iets naar rechts */
.case:nth-child(2){grid-column:6 / 10;grid-row:1 / 3;align-self:center}  /* Vitalé, rechts ertussen */

.case__link{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;background:var(--donker)}
.case__link img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.84) contrast(1.06) sepia(.08)}
/* donker aan beide uiteinden: de naam staat boven, de knop onder */
.case__sluier{position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(30,7,9,.72) 0%,rgba(30,7,9,.18) 34%,rgba(30,7,9,0) 56%),
    linear-gradient(to top,rgba(30,7,9,.62) 0%,rgba(30,7,9,0) 40%)}

/* de naam linksboven, zodat hij nooit achter een overlappende kaart valt */
.case__naam{position:absolute;z-index:2;left:clamp(16px,1.5vw,22px);top:clamp(14px,1.4vw,20px);
  max-width:calc(100% - clamp(90px,8vw,120px));
  font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(.9rem,1.15vw,1.15rem);line-height:1.1;color:var(--creme)}

/* de knop begint als vierkant, even hoog als een gewone knop, en schuift
   bij hover open tot de secundaire knop met label                       */
.case__knop{position:absolute;z-index:2;right:clamp(14px,1.4vw,20px);bottom:clamp(14px,1.4vw,20px);
  display:flex;align-items:stretch;height:clamp(46px,3.4vw,53px);
  border:1px solid rgba(242,242,231,.6);color:var(--creme);
  transition:border-color var(--normaal) var(--soepel),background var(--normaal) var(--soepel)}
.case__knoptekst{display:grid;grid-template-columns:0fr;
  transition:grid-template-columns var(--traag) var(--soepel)}
.case__knoptekst > span{overflow:hidden;min-width:0;white-space:nowrap;
  display:flex;align-items:center;
  font-family:var(--tekst);font-weight:600;font-size:clamp(.9rem,.2vw + .86rem,1rem);
  opacity:0;transition:opacity var(--normaal) var(--soepel)}
.case__pijl{display:grid;place-items:center;
  width:clamp(46px,3.4vw,53px);flex:none}
.case__pijl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:square;stroke-linejoin:miter}

.case__link:hover .case__knoptekst,
.case__link:focus-visible .case__knoptekst{grid-template-columns:1fr}
.case__link:hover .case__knoptekst > span,
.case__link:focus-visible .case__knoptekst > span{opacity:1;padding:0 .1em 0 1.3em}
.case__link:hover .case__knop{background:rgba(242,242,231,.12);border-color:var(--creme)}

@media (max-width:900px){
  .cases{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .cases__lead{max-width:none}
  .cases__groep{grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,18px)}
  .case:nth-child(1){grid-column:1 / 2;grid-row:1}
  .case:nth-child(2){grid-column:2 / 3;grid-row:1;margin-top:18%}
  .case:nth-child(3){grid-column:1 / 3;grid-row:2;margin-top:0;width:min(100%,62%);justify-self:center}
  .case__knoptekst{grid-template-columns:1fr}
  .case__knoptekst > span{opacity:1;padding:0 .2em 0 1em}
}
@media (max-width:620px){
  /* twee kolommen laten geen ruimte voor de knop, die liep de tegel uit */
  .cases__groep{grid-template-columns:1fr}
  .case:nth-child(1),.case:nth-child(2),.case:nth-child(3){
    grid-column:1;margin-top:0;width:auto;justify-self:stretch}
  .case:nth-child(1){grid-row:1}
  .case:nth-child(2){grid-row:2}
  .case:nth-child(3){grid-row:3}
}

/* ---------- WERK / REELS ---------- */
.werk{position:relative;background:var(--donker);color:var(--inkt-licht);
  padding-block:var(--sectie);overflow:hidden}
.werk__watermerk{position:absolute;right:-8vw;top:8%;width:min(58vw,760px);opacity:.05;pointer-events:none}
.reelbaan{margin-top:clamp(40px,5vw,64px);overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.reelbaan::-webkit-scrollbar{display:none}
.reelbaan.is-slepen{cursor:grabbing;scroll-snap-type:none}
.reelbaan__spoor{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content}
.reel{flex:none;width:clamp(200px,22vw,290px);
  transition:opacity var(--traag) var(--soepel);opacity:.55}
.reel__frame{position:relative;aspect-ratio:9/16;background:#1d0709;overflow:hidden;
  transition:transform var(--traag) var(--soepel);transform:scale(.9);transform-origin:center bottom}
.reel.is-centraal{opacity:1}
.reel.is-centraal .reel__frame{transform:scale(1)}

.reel video{width:100%;height:100%;object-fit:cover}
.reel__naam{margin-top:16px;font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--creme)}
.reel__meta{margin-top:.35em;font-size:12px;letter-spacing:.02em;color:var(--inkt-licht-zacht)}
.reelbaan__bediening{margin-top:clamp(28px,3vw,44px);display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
.reelbaan__spoorlijn{flex:1;height:1px;background:var(--lijn-licht);position:relative}
.reelbaan__spoorlijn i{position:absolute;left:0;top:-1px;height:3px;width:12%;background:var(--blauw);transition:left 120ms linear,width 120ms linear}
.reelbaan__knoppen{display:flex;gap:10px}

/* ---------- HET PROGRAMMA ----------
   Geen stapelende kaarten, maar een trainingsschema. Links een staand
   beeld met de titel op een bordeaux verloop, rechts de vier fasen onder
   elkaar. De fase die je leest licht op, de rest zakt terug; de balken
   ernaast tonen hoe ver je bent. Dat is precies wat het brandbook voor
   voortgang voorschrijft, en je scroll wordt nergens overgenomen.      */
.programma{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,3.4vw,60px);align-items:stretch}

.programma__beeld{position:relative;margin:0;overflow:hidden;background:var(--donker);
  min-height:clamp(460px,52vw,760px)}
.programma__beeld picture{position:absolute;inset:0;display:block}
.programma__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  filter:saturate(.84) contrast(1.06) sepia(.10)}
.programma__gloed{position:absolute;inset:auto 0 0 0;height:64%;
  background:linear-gradient(to top,rgba(66,9,12,.96) 0%,rgba(83,14,17,.82) 30%,rgba(83,14,17,.34) 62%,rgba(83,14,17,0) 100%)}
.programma__kop{position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(22px,2.6vw,40px)}
.programma__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--creme);font-size:clamp(1.3rem,2.3vw,2.15rem);line-height:1.04;letter-spacing:-.012em}
.programma__regel{margin-top:.9em;font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,242,231,.78)}

.programma__schema{display:flex;flex-direction:column;justify-content:center}
.programma__rijen{display:grid}
.fase{position:relative;display:grid;
  grid-template-columns:clamp(34px,3.2vw,46px) minmax(0,1fr);
  column-gap:clamp(16px,2vw,30px);row-gap:.5em;
  padding-block:clamp(18px,2.2vw,30px);
  border-top:1px solid var(--lijn);
  opacity:.58;transition:opacity var(--normaal) var(--soepel)}
.fase:last-child{border-bottom:1px solid var(--lijn)}
.fase.is-actief{opacity:1}

.balken--fase{grid-row:1 / 4;align-self:start;height:clamp(30px,2.8vw,40px);margin-top:.15em}
.balken--fase rect{fill:var(--bordeaux);transition:fill var(--normaal) var(--soepel)}
.balken--fase rect.is-leeg{fill:none;stroke:var(--bordeaux);stroke-width:2;opacity:.35}

.fase__week{font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bordeaux);opacity:.7;display:flex;align-items:baseline;gap:.9em}
.fase__week span{font-family:var(--kop);font-weight:700;font-size:1.15em;opacity:.55}
.fase__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,1.6vw,1.5rem);line-height:1;color:var(--bordeaux)}
.fase__tekst{color:var(--inkt-zacht);font-size:.94em;max-width:52ch}

.programma__voet{margin-top:clamp(24px,2.8vw,38px)}

@media (max-width:900px){
  .programma{grid-template-columns:1fr;gap:clamp(24px,5vw,36px)}
  .programma__beeld{min-height:0;aspect-ratio:4/5}
  .fase{opacity:1}
  .fase__tekst{max-width:none}
}

/* ---------- OVER KARIN ----------
   Het portret staat centraal, met eromheen elementen die rechtstreeks uit
   het brandbook komen: de USP-cijfers, het archetype "De coach" en het
   persoonlijkheidsspectrum met zijn dunne lijnen en stippen.           */
.overkarin{text-align:center}
.overkarin__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.45rem,2.7vw,2.5rem);line-height:1.04;letter-spacing:-.012em;color:var(--bordeaux)}
.overkarin__lead{margin:1.3em auto 0;max-width:56ch;color:var(--inkt-zacht)}
.overkarin > .btn{margin-top:clamp(28px,3vw,44px)}

.podium{position:relative;width:min(100%,1060px);
  margin:clamp(32px,3.8vw,58px) auto clamp(8px,1vw,16px);
  display:grid;place-items:center;min-height:clamp(360px,40vw,560px)}
.podium__watermerk{position:absolute;z-index:0;pointer-events:none;
  width:min(70%,580px);opacity:.15;bottom:-20%;left:50%;transform:translateX(-50%)}
.podium__beeld{position:relative;z-index:2;margin:0;width:min(74vw,clamp(260px,27vw,380px))}
.podium__beeld img{width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.84) contrast(1.06) sepia(.08)}

/* de zwevende blokken */
.zweef{position:absolute;z-index:3;text-align:left;width:clamp(180px,17vw,250px);
  will-change:transform}
.zweef--lb{left:0;top:9%}
.zweef--rb{right:0;top:9%;text-align:right}
.zweef--lo{left:0;bottom:7%}
.zweef--ro{right:0;bottom:7%;width:clamp(210px,20vw,280px)}
.zweef__cijfer{font-family:var(--kop);font-weight:700;color:var(--bordeaux);
  font-size:clamp(1.8rem,3.2vw,3rem);line-height:1}
.zweef__label{margin-top:.5em;font-size:.85em;color:var(--inkt-zacht)}
.zweef__kop{font-family:var(--label);font-weight:500;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--bordeaux);opacity:.6}
.zweef__groot{margin-top:.5em;font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,1.6vw,1.45rem);line-height:1;color:var(--bordeaux)}
.zweef--lo .zweef__label{max-width:24ch}

/* het spectrum: dunne lijn met een stip, precies zoals in het brandbook */
.spectrum{margin-top:.9em;display:grid;gap:.85em}
.spectrum li{display:grid;grid-template-columns:auto minmax(38px,1fr) auto;align-items:center;gap:.7em;
  font-family:var(--label);font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.spectrum li span:first-child{color:var(--bordeaux)}
.spectrum li span:last-child{color:var(--inkt-zacht);opacity:.6}
.spectrum i{position:relative;display:block;height:1px;background:rgba(83,14,17,.28)}
.spectrum i::after{content:"";position:absolute;top:50%;left:var(--x);
  width:7px;height:7px;background:var(--bordeaux);transform:translate(-50%,-50%)}

@media (max-width:1100px){
  .zweef{width:clamp(150px,15vw,200px)}
  .zweef--ro{width:clamp(180px,18vw,240px)}
}
@media (max-width:900px){
  /* naast elkaar past niet meer: onder het portret in twee kolommen */
  .podium{min-height:0;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,30px);
    place-items:start;margin-bottom:clamp(20px,4vw,30px)}
  .podium__beeld{grid-column:1 / -1;justify-self:center;width:min(70vw,300px)}
  .podium__watermerk{width:88%;bottom:auto;top:8%}
  .zweef{position:static;width:auto;text-align:left}
  .zweef--rb{text-align:left}
  .zweef--lo,.zweef--ro{grid-column:1 / -1}
}

/* ---------- REVIEWS ALS PROFIELKADER ----------
   Opgezet als het Instagram-profiel uit het brandbook: kop met profielfoto
   en naam, daaronder drie vastgepinde posts. Het kleurritme volgt het
   feedplan: beeld in het midden, bordeaux statement en licht accent
   ernaast.                                                             */
.profiel{background:var(--offwhite);border:1px solid var(--lijn);
  padding:clamp(20px,2.2vw,34px)}

.profiel__kop{display:flex;align-items:center;gap:clamp(14px,1.5vw,22px);
  margin-bottom:clamp(20px,2.2vw,34px)}
.profiel__foto{display:block;flex:none;width:clamp(52px,4.6vw,72px);height:auto;border-radius:50%}
.profiel__naam{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(.95rem,1.4vw,1.35rem);line-height:1;color:var(--bordeaux)}
.profiel__bio{margin-top:.55em;font-size:.92em;color:var(--inkt-zacht)}

.profiel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,.7vw,12px)}

.post{position:relative;aspect-ratio:1/1;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(16px,1.7vw,28px)}
.post--statement{background:var(--bordeaux);color:var(--creme)}
.post--accent{background:var(--blauw);color:var(--bordeaux)}
.post--video{background:var(--donker);padding:0}

/* het speldje van een vastgepinde post */
.post__pin{position:absolute;z-index:4;top:clamp(10px,1vw,16px);right:clamp(10px,1vw,16px);
  width:clamp(20px,1.7vw,26px);height:clamp(20px,1.7vw,26px)}
/* wit en schuin, zoals het speldje van een vastgepinde post op Instagram.
   Het schaduwtje is er alleen om hem leesbaar te houden op het lichtblauwe
   vak; zonder dat valt wit daar weg.                                    */
.post__pin svg{width:100%;height:100%;fill:var(--creme);stroke:none;
  transform:rotate(45deg);
  filter:drop-shadow(0 1px 2px rgba(30,7,9,.4))}

.post__label{position:relative;z-index:2;
  font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,1.5vw,1.6rem);line-height:1;letter-spacing:.02em;
  margin-bottom:.85em}
.post--statement .post__label{color:var(--creme)}
.post--accent .post__label{color:var(--bordeaux)}
/* het monogram toon-op-toon in de hoek, uitvergroot en aangesneden */
.post__merk{position:absolute;z-index:0;right:-14%;bottom:-12%;
  width:56%;height:auto;opacity:.11;pointer-events:none}
/* de review groter, en de uitspraken die er echt toe doen vol uitgelicht.
   De rest zakt terug, zodat je in één blik de kern leest.              */
.post__review{position:relative;z-index:2;
  font-size:clamp(.88rem,1.05vw,1.1rem);line-height:1.5;
  margin-top:0;padding-bottom:1.2em}
.post__review b{font-weight:600}
.post--statement .post__review{color:rgba(242,242,231,.58)}
.post--statement .post__review b{color:var(--creme)}
.post--accent .post__review{color:rgba(83,14,17,.55)}
.post--accent .post__review b{color:var(--bordeaux)}

.post__wie{position:relative;z-index:2;display:flex;align-items:center;gap:.7em;margin-top:auto;
  padding-top:.9em;border-top:1px solid currentColor}
.post--statement .post__wie{border-top-color:rgba(242,242,231,.26)}
.post--accent .post__wie{border-top-color:rgba(83,14,17,.22)}
.post__naam{display:flex;flex-direction:column;gap:.15em;
  font-family:var(--tekst);font-weight:600;font-size:clamp(.8rem,.9vw,.95rem);line-height:1.2}
.post__naam em{font-style:normal;font-weight:400;font-size:.85em;opacity:.7}

/* het middelste vak: de video, met een doorschijnende afspeelknop die het
   beeld erachter vervaagt                                              */
.post__omslag{position:absolute;inset:0;z-index:2;display:block}
.post__omslag img{width:100%;height:100%;object-fit:cover}
.post__play{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:rgba(30,7,9,.18);transition:background var(--normaal) var(--soepel)}
.post__play::before{content:"";position:absolute;
  width:clamp(50px,4.2vw,66px);height:clamp(50px,4.2vw,66px);
  background:rgba(242,242,231,.20);border:1px solid rgba(242,242,231,.5);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.post__play svg{position:relative;z-index:1;width:17px;height:17px;
  fill:var(--creme);margin-left:4px}
.post__play:hover{background:rgba(30,7,9,.3)}
.post__play.is-weg{opacity:0;pointer-events:none}

@media (max-width:820px){
  .profiel__grid{grid-template-columns:1fr;gap:clamp(8px,2vw,12px)}
  .post__quote{font-size:clamp(1.05rem,4.4vw,1.5rem)}
  /* de gebruikersnaam is lang; op een smal scherm moet hij mee kunnen
     krimpen, anders loopt hij de kaart uit                              */
  .profiel__naam{font-size:clamp(.78rem,3.7vw,1.35rem)}
  .profiel__foto{width:clamp(44px,12vw,72px)}
  .profiel__kop{gap:12px}
  /* de tekstkaarten hoeven niet vierkant te blijven, dat perst de review
     in een te klein vlak. Alleen de videokaart houdt zijn verhouding.   */
  .post{aspect-ratio:auto}
  .post--video{aspect-ratio:1/1}
  .post__review{padding-bottom:0}
}

/* ---------- LICHTBAK ----------
   Video gecentreerd, pagina eronder verduisterd. Strakke hoeken, fade van
   260 ms, geen schaal of sprong.                                       */
.lichtbak{width:100%;height:100%;max-width:none;max-height:none;
  border:0;padding:0;background:transparent;overflow:hidden;color:var(--creme)}
.lichtbak::backdrop{background:rgba(24,5,7,.9)}
.lichtbak__vlak{position:absolute;inset:0;display:grid;place-items:center;
  grid-auto-rows:min-content;gap:clamp(12px,1.4vw,20px);
  padding:clamp(56px,6vw,90px) clamp(16px,4vw,64px) clamp(28px,4vw,56px);
  align-content:center}
.lichtbak__video{max-width:min(92vw,460px);max-height:78svh;width:auto;height:auto;
  background:#000;display:block}
.lichtbak__bijschrift{font-family:var(--label);font-weight:500;
  font-size:clamp(11px,.24vw + 10.4px,13px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,242,231,.72);text-align:center}
.lichtbak__sluit{position:absolute;top:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);
  width:clamp(42px,3.4vw,50px);height:clamp(42px,3.4vw,50px);
  display:grid;place-items:center;border:1px solid rgba(242,242,231,.45);
  transition:background var(--snel) var(--soepel),border-color var(--snel) var(--soepel)}
.lichtbak__sluit:hover{background:rgba(242,242,231,.12);border-color:var(--creme)}
.lichtbak__sluit svg{width:17px;height:17px;fill:none;stroke:var(--creme);stroke-width:1.8;
  stroke-linecap:square}

.lichtbak[open]{animation:lichtbak-in var(--normaal) var(--soepel)}
.lichtbak[open]::backdrop{animation:lichtbak-in var(--normaal) var(--soepel)}
@keyframes lichtbak-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .lichtbak[open],.lichtbak[open]::backdrop{animation:none}
}
/* een reel is aanklikbaar en gedraagt zich als knop */
.reel{cursor:pointer}
.reel:focus-visible{outline:2px solid var(--blauw);outline-offset:4px}

/* ---------- SCAN ----------
   Eén vlak, helemaal gevuld met het merkverloop. De tinten zijn afgelezen
   van de verlooptegel in het brandbook: donker bordeaux bovenin,
   lichtblauw linksonder, crèmegeel rechtsonder.                        */
.scanvlak{position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(28px,4vw,72px);align-items:center;
  padding:clamp(34px,4.4vw,76px);
  background-color:#5A3438;
  background-image:
    radial-gradient(120% 95% at 46% -14%, #310605 0%, rgba(49,6,5,0) 64%),
    radial-gradient(105% 80% at 100% -6%,  #5F1B22 0%, rgba(95,27,34,0) 58%),
    radial-gradient(105% 95% at -8% 116%, #8FC8E6 0%, rgba(143,200,230,.55) 38%, rgba(143,200,230,0) 70%),
    radial-gradient(70%  60% at 22% 96%,  #A8D4EC 0%, rgba(168,212,236,0) 62%),
    radial-gradient(100% 90% at 104% 112%, #E9EACC 0%, rgba(233,234,204,0) 64%),
    linear-gradient(176deg, #3D1618 0%, #6F5F6C 48%, #B8BDBE 100%);
}
/* een zachte sluier links, puur zodat de crème tekst overal leesbaar blijft */
.scanvlak__sluier{position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,rgba(28,6,8,.62) 0%,rgba(28,6,8,.34) 34%,rgba(28,6,8,0) 62%)}

.scanvlak__tekst{position:relative;z-index:2}
.scanvlak__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--creme);font-size:clamp(1.7rem,3.6vw,3.4rem);line-height:1;letter-spacing:-.015em}
.scanvlak__lead{margin-top:1.3em;max-width:44ch;color:rgba(242,242,231,.88)}
.scanvlak__tekst .btn{margin-top:clamp(26px,2.8vw,40px)}
.scanvlak__voorwaarden{margin-top:1.2em;font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12px);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,242,231,.7)}

/* een blik op de tool zelf, zodat je ziet wat je krijgt */
.scanvlak__tool{position:relative;z-index:2;display:flex;justify-content:flex-end}
.tool{width:min(100%,380px);background:var(--creme);color:var(--inkt);
  padding:clamp(20px,1.9vw,28px)}
.tool__balk{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:.9em;border-bottom:1px solid var(--lijn)}
.tool__merk{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:.82rem;color:var(--bordeaux)}
.tool__stap{font-family:var(--label);font-weight:500;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-zacht)}
.tool__balken{display:block;width:clamp(72px,7vw,96px);height:auto;
  margin:clamp(16px,1.6vw,22px) 0}
.tool__balken rect{fill:var(--bordeaux)}
.tool__balken rect.is-leeg{fill:none;stroke:var(--bordeaux);stroke-width:2;opacity:.32}
.tool__vraag{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(.85rem,1vw,1rem);line-height:1.2;color:var(--bordeaux)}
.tool__opties{margin-top:1.1em;display:grid;gap:.5em;list-style:none;padding:0}
.tool__opties li{border:1px solid var(--lijn);font-size:.88em;
  transition:border-color var(--snel) var(--soepel),background var(--snel) var(--soepel)}
.tool__opties a{display:block;padding:.75em .9em}
.tool__opties li:hover{border-color:var(--bordeaux);background:rgba(83,14,17,.05)}
.tool__opties li:has(a:focus-visible){outline:2px solid var(--bordeaux);outline-offset:2px}
.tool__opties a{color:var(--inkt-zacht);transition:color var(--snel) var(--soepel)}
.tool__opties li:hover a{color:var(--inkt)}
.tool__voet{margin-top:clamp(16px,1.6vw,22px);padding-top:.9em;border-top:1px solid var(--lijn);
  display:flex;align-items:baseline;justify-content:space-between}
.tool__voet span{font-family:var(--label);font-weight:500;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--inkt-zacht)}
.tool__voet b{font-family:var(--kop);font-weight:700;color:var(--bordeaux);
  font-size:1.5rem;line-height:1}
.tool__voet i{font-style:normal;font-size:.5em;opacity:.5;margin-left:.15em}

@media (max-width:900px){
  .scanvlak{grid-template-columns:1fr;gap:clamp(26px,5vw,38px)}
  .scanvlak__sluier{background:linear-gradient(180deg,rgba(28,6,8,.6) 0%,rgba(28,6,8,.2) 55%,rgba(28,6,8,0) 100%)}
  .scanvlak__tool{justify-content:stretch}
  .tool{width:100%}
  .scanvlak__lead{max-width:none}
}

/* ---------- FOOTER ---------- */
.voet{position:relative;background:var(--donker);color:var(--inkt-licht);
  padding-block:clamp(56px,7vw,110px) 0;overflow:hidden}
.voet__watermerk{position:absolute;left:-7vw;bottom:-16%;width:min(48vw,620px);
  opacity:.055;pointer-events:none}

/* bovenblok: de tagline groot, met daarnaast één uitnodiging */
.voet__top{position:relative;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,4vw,64px);align-items:end;
  padding-bottom:clamp(40px,4.6vw,72px);
  border-bottom:1px solid var(--lijn-licht)}
.voet__claim{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--creme);font-size:clamp(1.4rem,2.9vw,2.7rem);line-height:1.02;letter-spacing:-.015em}
.voet__uitnodiging{color:var(--inkt-licht-zacht);max-width:42ch}
.voet__knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,2vw,26px)}

.voet__grid{position:relative;display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:clamp(28px,3.4vw,56px);
  padding-block:clamp(40px,4.6vw,72px)}
.voet__merk img{height:32px;width:auto}
.voet__over{margin-top:1.4em;color:var(--inkt-licht-zacht);font-size:.92em;max-width:38ch}
.voet__sociaal{display:flex;gap:clamp(14px,1.6vw,24px);margin-top:1.6em}
.voet__sociaal a{position:relative;font-weight:600;font-size:.9em;color:var(--creme);
  padding-bottom:.25em}
.voet__sociaal a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--blauw);transform:scaleX(0);transform-origin:left;
  transition:transform var(--normaal) var(--soepel)}
.voet__sociaal a:hover::after{transform:scaleX(1)}

.voet__kolom{display:flex;flex-direction:column;align-items:flex-start;gap:.85em}
.voet__titel{font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blauw);margin-bottom:.6em}
.voet__kolom a{font-size:.93em;color:var(--inkt-licht-zacht);position:relative;
  transition:color var(--snel) var(--soepel)}
.voet__kolom a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--normaal) var(--soepel)}
.voet__kolom a:hover{color:var(--creme)}
.voet__kolom a:hover::after{transform:scaleX(1)}
.voet__groot{font-size:1rem!important;color:var(--creme)!important}
.voet__regio{margin-top:.4em;font-size:.85em;color:rgba(242,242,231,.45);line-height:1.5}

.voet__onder{position:relative;padding-block:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--lijn-licht);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,32px);
  font-size:.85em;color:rgba(242,242,231,.5)}
.voet__juridisch{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,24px);margin-right:auto}
.voet__juridisch a{position:relative;transition:color var(--snel) var(--soepel)}
.voet__juridisch a:hover{color:var(--creme)}
/* de maker, met het streepje in een accentkleur */
.voet__maker a{position:relative;color:var(--creme);font-weight:600;padding-bottom:.15em}
.voet__maker a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#819099 0%,#775055 45%,#AE8581 100%);
  transition:filter var(--snel) var(--soepel)}
.voet__maker a:hover::after{filter:brightness(1.25)}

.voet__verloop{height:6px;
  background:linear-gradient(90deg,#819099 0%,#80777D 20%,#775055 40%,#815252 60%,#9D6D6B 80%,#AE8581 100%)}

@media (max-width:1080px){
  .voet__grid{grid-template-columns:1fr 1fr;row-gap:clamp(30px,5vw,44px)}
  .voet__merk{grid-column:1 / -1}
}
@media (max-width:820px){
  .voet__top{grid-template-columns:1fr;align-items:start;gap:clamp(22px,4vw,32px)}
  .voet__grid{grid-template-columns:1fr}
  /* `flex:1` (basis 0) gaf beide knoppen dezelfde breedte, ongeacht hun tekst: op 390px
     kregen ze allebei 145px en hield "Neem contact op" 94px over voor tekst die er 118
     nodig heeft. Dat brak de knop over twee regels (Karin, 2026-09-09). Met `flex:1 1 auto`
     vertrekken ze vanaf hun eigen inhoud, en `nowrap` zorgt dat die inhoud de volle
     tekstbreedte is. Samen 272px op 390: past. Past het niet, bijvoorbeeld op 320px, dan
     stapelen ze door de `flex-wrap:wrap` die al op de container staat. */
  .voet__knoppen .btn{flex:1 1 auto;white-space:nowrap;
    padding-inline:clamp(14px,4vw,26px)}
  .voet__onder{flex-direction:column;align-items:flex-start;gap:14px}
  .voet__juridisch{margin-right:0}
}

/* ---------- REVEAL ----------
   900 ms op de expo-curve met 22 px opkomst, het tempo dat orangewings en
   joinaquila aanhouden. --op laat een element op zijn eigen einddekking
   uitkomen, zoals het watermerk achter Karin dat op .15 blijft staan.   */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
[data-reveal].is-zichtbaar{opacity:var(--op,1);transform:none}

/* rustiger: langer, met minder verplaatsing. Voor de plankaarten en de vier
   fases van de transformatie, die je één voor één moet kunnen volgen.   */
[data-reveal="rustig"]{transform:translateY(14px);transition-duration:1.3s}

/* traag: een lange, kalme fade zonder verplaatsing. De cijfers bij de vijf
   punten komen zo één voor één op nadat hun blok er staat.              */
[data-reveal="traag"]{transform:none;transition-duration:1.6s}

/* alleen doorschijnend worden, niets verschuiven. Het watermerk achter
   Karin heeft zijn eigen transform nodig om gecentreerd te blijven.     */
[data-reveal="fade"]{transform:none}
/* het watermerk staat op left:50% en moet dus altijd een halve breedte
   terug: ook vóór de reveal, anders steekt het buiten de pagina uit en
   kun je op een telefoon zijwaarts scrollen                          */
.podium__watermerk[data-reveal],
.podium__watermerk[data-reveal].is-zichtbaar{transform:translateX(-50%)}

/* van onder naar boven schoon in beeld komen. Het masker is drie keer zo
   hoog als het element: helemaal omhoog geschoven valt het element in het
   doorzichtige deel, helemaal omlaag in het dekkende. De zachte overgang
   ertussen loopt dan als een rand van onder naar boven over het beeld.  */
[data-reveal="veeg"]{opacity:0;
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 34%,transparent 66%);
          mask-image:linear-gradient(to top,#000 0%,#000 34%,transparent 66%);
  -webkit-mask-size:100% 300%;  mask-size:100% 300%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0% 0%;mask-position:0% 0%;
  transition:opacity .7s cubic-bezier(.19,1,.22,1),
             mask-position 1.15s cubic-bezier(.19,1,.22,1),
             -webkit-mask-position 1.15s cubic-bezier(.19,1,.22,1)}
[data-reveal="veeg"].is-zichtbaar{opacity:1;
  -webkit-mask-position:0% 100%;mask-position:0% 100%}

/* uit een kader omhoog schuiven: het beeld zit onder de onderrand en komt
   naar boven toe tevoorschijn                                           */
[data-reveal="masker"]{opacity:1;transform:none;overflow:hidden}
.kaartmasker{display:flex}
.kaartmasker > .plan{width:100%}
html.beweegt [data-reveal="masker"] > *{transform:translateY(101%);
  transition:transform 1s cubic-bezier(.19,1,.22,1);transition-delay:inherit}
html.beweegt [data-reveal="masker"].is-zichtbaar > *{transform:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .plannen,.reviews{grid-template-columns:1fr 1fr}
  .plan--uitgelicht{grid-column:1 / -1;order:-1}
  .klim{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,44px) 0}
  .fase:nth-child(3){border-left:0;padding-left:0}
  .faq{grid-template-columns:1fr;gap:clamp(30px,4vw,44px)}
  .scan__inner{grid-template-columns:1fr;gap:clamp(34px,5vw,54px)}
  .voet__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  /* ---------- MOBIELE NAVIGATIE ----------
     Een schermvullend bordeaux vlak. De balk erboven blijft staan, maar
     het logo wisselt naar de crème versie en de hamburger wordt crème,
     zodat ze op dat vlak leesbaar blijven. Het logo overtrekken mag niet,
     dus dat is een tweede bestand en geen filter.                        */
  .nav__inner{padding:14px var(--rand);gap:16px}
  .nav__logo{margin-right:auto}
  .nav__logo img{height:26px}
  .nav__burger{display:flex;margin-left:0;position:relative;z-index:2}

  .nav.is-open .nav__logo-donker{display:none}
  .nav.is-open .nav__logo-licht{display:block}
  .nav.is-open .nav__burger span{background:var(--creme)}

  .nav__menu{
    position:fixed;inset:0;z-index:1;
    background:var(--bordeaux);color:var(--creme);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:calc(env(safe-area-inset-top, 0px) + 6rem) var(--rand)
            calc(env(safe-area-inset-bottom, 0px) + 2.5rem);
    margin:0;overflow-y:auto;
    opacity:0;visibility:hidden;transform:none;
    transition:opacity .4s cubic-bezier(.19,1,.22,1),visibility .4s;
  }
  .nav.is-open .nav__menu{opacity:1;visibility:visible}

  /* de items zelf: groot, in Nulshock, met veel lucht ertussen */
  .nav__menu .nav__link{
    font-family:var(--kop);font-weight:700;text-transform:uppercase;
    font-size:clamp(1.5rem,8vw,2.6rem);line-height:1;letter-spacing:-.01em;
    color:var(--creme);width:100%;text-align:left;
    padding:clamp(14px,3.4vw,22px) 0;border-bottom:1px solid rgba(242,242,231,.16)}
  .nav__link::after{display:none}

  /* het dienstenpaneel wordt een ingesprongen lijst */
  .nav__sub{position:static;width:auto;opacity:1;visibility:visible;transform:none;
    background:transparent;box-shadow:none;padding:2px 0 12px;display:none}
  .nav__item.is-open .nav__sub{display:block}
  .nav__sub-rand,.nav__sub-pijl,.balken--sub{display:none}
  .nav__sub-item{grid-template-columns:minmax(0,1fr);gap:.2rem;
    padding:11px 0 11px 2px}
  .nav__sub-item + .nav__sub-item{box-shadow:none}
  .nav__sub-item:hover{background:transparent}
  .nav__sub-naam{font-size:1rem}
  .nav__sub-uitleg{font-size:.82rem}
  .nav__sub-voet{margin:4px 0 0;padding-top:12px;font-size:.82rem}

  .nav__cta{display:flex;justify-content:center;margin:clamp(20px,5vw,32px) 0 0;width:100%}

  .plannen,.reviews{grid-template-columns:1fr}
  .plan--uitgelicht{order:0}
  .klim{grid-template-columns:1fr}
  .fase{border-left:0;padding-left:0;padding-bottom:clamp(24px,4vw,34px);border-bottom:1px solid var(--lijn-licht)}
  .fase:last-child{border-bottom:0}
  .karin{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .voet__grid{grid-template-columns:1fr;gap:34px}
  .mini-cijfers{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media (max-width:520px){
  .hero__acties{flex-direction:column;align-items:stretch}
  .hero__acties .btn{width:100%}
  .hero__acties .link{text-align:center}
  .mini-cijfers{grid-template-columns:1fr 1fr}
  .reel{width:min(72vw,280px)}

}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .meter__balken span{transform:scaleY(1)}
  .reel{opacity:1}
  .hero__beeld{transition:none}
  .reel__frame{transform:none}
}

/* =========================================================
   HERO · VARIANT B — de logica van de brandbook-openers:
   foto als textuur (duotone), één dominant woordbeeld,
   een leeg kwadrant en zo min mogelijk losse elementen.
   ========================================================= */
.heroB{display:block;align-items:stretch;background:var(--bordeaux)}
.heroB .hero__media img{object-position:64% 30%;
  filter:grayscale(1) contrast(1.05) brightness(.42)}
/* duotone: kleur uit bordeaux, luminantie uit de foto */
.heroB__duotone{position:absolute;inset:0;background:var(--bordeaux);mix-blend-mode:color;opacity:.86}
/* het lege kwadrant linksboven, en diepte naar onderen */
.heroB__veld{position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(32,6,8,.90) 0%,rgba(40,7,9,.62) 32%,rgba(56,10,13,.22) 60%,rgba(32,6,8,.44) 100%),
    linear-gradient(to top,rgba(28,5,7,.78) 0%,rgba(28,5,7,0) 46%);
}
.heroB__meta{position:absolute;right:18px;top:0;bottom:0;z-index:2;
  display:flex;align-items:center;pointer-events:none}
.heroB__meta span{writing-mode:vertical-rl;font-family:var(--label);font-weight:500;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(242,242,231,.42)}

.heroB__inhoud{position:relative;z-index:2;min-height:100svh;
  max-width:var(--max-breed);margin-inline:auto;
  padding:clamp(120px,15vh,180px) var(--rand-breed) clamp(30px,3.4vw,48px);
  display:flex;flex-direction:column;
}
.heroB__label{font-family:var(--label);font-weight:500;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(242,242,231,.62)}
.heroB__index{margin-top:auto;display:grid;gap:.5em;
  font-family:var(--label);font-weight:500;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(242,242,231,.66)}

/* het dominante woordbeeld: vult de breedte, loopt tegen de onderrand aan */
.heroB__title{margin-top:clamp(22px,2.6vw,38px);
  font-family:var(--kop);font-weight:700;text-transform:uppercase;color:var(--creme);
  font-size:clamp(2.15rem,5.35vw,6.05rem);line-height:.92;letter-spacing:-.022em;
}
.heroB__positie{margin-top:clamp(16px,1.8vw,24px);
  font-family:var(--label);font-weight:500;
  font-size:clamp(11.5px,.24vw + 10.9px,13.5px);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(242,242,231,.78)}
.heroB__voet{margin-top:clamp(22px,2.4vw,32px);padding-top:clamp(16px,1.8vw,24px);
  border-top:1px solid rgba(242,242,231,.22);
  display:flex;align-items:center;gap:clamp(16px,2.4vw,36px)}
.heroB__sub{font-family:var(--label);font-weight:500;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(242,242,231,.66)}
.heroB__voet .btn{margin-left:auto}
.heroB__balken{height:26px;opacity:.72}

@media (min-width:901px){
  .heroB__title{text-wrap:nowrap}
}

@media (max-width:900px){
  .heroB__inhoud{min-height:92svh;padding-top:clamp(96px,18vh,140px)}
  .heroB__index{font-size:10.5px;letter-spacing:.16em}
  .hero__achter{display:block;margin-left:0;margin-top:1.1em;font-size:11px;letter-spacing:.16em}
  .heroB__title{font-size:clamp(1.9rem,8.4vw,3.2rem);line-height:.96}
  .heroB__voet{flex-wrap:wrap;gap:16px}
  .heroB__voet .btn{margin-left:0;width:100%;order:3}
  .heroB__balken{order:2;margin-left:auto}
  .heroB__meta{display:none}
}

/* =========================================================
   PLANPAGINA
   Gebouwd op dezelfde kadermaat als home. Alles wat hier staat is bedoeld
   om ook op Level Up en Build & Grow te werken; alleen de accentkleur en
   de teksten verschillen straks.
   ========================================================= */

/* ---------- HERO VAN EEN PLANPAGINA ----------
   Korter dan de hero van home: het beeld draagt de naam van het plan, de
   uitleg staat eronder op de pagina zelf.                              */
.hero--plan .hero__kader{aspect-ratio:16/7;max-height:64svh}
.hero--plan .hero__title{font-size:clamp(2rem,5.4vw,5.4rem)}
.hero--plan .hero__beeld img{object-position:50% 50%}

.planlead{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(20px,3vw,56px);align-items:start;
  padding-top:clamp(34px,4vw,64px)}
.planlead__regel{font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bordeaux);padding-top:.35em}
.planlead__tekst{font-size:clamp(1.02rem,.6vw + .9rem,1.4rem);line-height:1.45;
  color:var(--inkt);max-width:44ch}

/* ---------- VOOR WIE ---------- */
.voorwie{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(30px,4.6vw,88px);align-items:start}
.voorwie__beeld{margin:0}
.voorwie__beeld .groeikader{display:block}
.voorwie__beeld img{width:100%;height:auto;display:block;
  filter:saturate(.84) contrast(1.06) sepia(.10)}
.voorwie__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.45rem,3vw,2.9rem);line-height:1.04;letter-spacing:-.012em}
.voorwie__lead{margin-top:1.1em;color:var(--inkt-zacht);max-width:48ch}
.past{display:grid;gap:0;margin-top:clamp(30px,3.4vw,52px)}
.past__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,1.6vw,26px);
  align-items:start;padding-block:clamp(18px,2vw,26px);border-top:1px solid var(--lijn)}
.past__item:last-child{border-bottom:1px solid var(--lijn)}
.past__nr{font-family:var(--kop);font-weight:700;line-height:1;
  font-size:clamp(1.1rem,1.5vw,1.5rem);color:var(--bordeaux);opacity:.42}
.past__item p{color:var(--inkt-zacht);max-width:46ch}

/* ---------- DE ROUTE ----------
   De vier fases als een route van boven naar beneden. In het midden loopt
   één doorlopende lijn met per fase de balkjes erop; die lijn groeit mee
   zodra de fase in beeld komt. Beeld en tekst wisselen van kant, zodat je
   de route ziet aflopen in plaats van een lijstje leest.                 */
.route{margin-top:clamp(44px,5vw,86px)}
.route__stap{display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(24px,3.4vw,64px);align-items:center;
  padding-block:clamp(34px,4vw,72px)}
.route__stap--links  .route__beeld{grid-column:1;grid-row:1}
.route__stap--links  .route__tekst{grid-column:3;grid-row:1}
.route__stap--rechts .route__tekst{grid-column:1;grid-row:1}
.route__stap--rechts .route__beeld{grid-column:3;grid-row:1}

.route__spoor{grid-column:2;grid-row:1;position:relative;align-self:stretch;
  width:clamp(34px,3vw,48px);display:grid;place-items:center;
  /* de negatieve marge trekt de lijn door de tussenruimte heen, zodat het
     één doorlopende route wordt en geen losse streepjes                  */
  margin-block:calc(-1 * clamp(34px,4vw,72px))}
.route__lijn{position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:rgba(56,19,21,.28);transform:translateX(-50%) scaleY(0);transform-origin:50% 0;
  transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.route__stap.is-zichtbaar .route__lijn{transform:translateX(-50%) scaleY(1)}
.route__merk{position:relative;background:var(--papier);padding-block:14px;display:grid;place-items:center}
.balken--route{height:clamp(26px,2.4vw,36px)}

.route__beeld{margin:0;overflow:hidden;background:var(--donker)}
.route__beeld img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;
  filter:saturate(.84) contrast(1.06) sepia(.10)}

.route__week{font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt-zacht);display:flex;align-items:baseline;gap:.9em}
.route__week span{color:var(--bordeaux);opacity:.55}
.route__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.7rem,3.6vw,3.4rem);line-height:1;color:var(--bordeaux);
  letter-spacing:-.014em;margin-top:.28em}
.route__uitleg{margin-top:1.05em;color:var(--inkt-zacht);max-width:46ch}
.oplevering{margin-top:clamp(20px,2.2vw,30px);display:grid;gap:.7em}
.oplevering li{position:relative;padding-left:1.5em;font-size:.92em;color:var(--inkt)}
.oplevering li::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:2px;background:var(--bordeaux)}

/* ---------- VOOR & NA ----------
   Bewaard van home, hier hoort hij thuis. Het kader is beige, zodat deze
   sectie het rustpunt in het kleurritme van de pagina is.               */
.voornakader{background:var(--beige);padding:clamp(26px,3vw,52px)}
.voorna__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.35rem,2.5vw,2.3rem);line-height:1.05;letter-spacing:-.012em}
.vergelijk{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,58px);align-items:center;margin-top:clamp(22px,2.6vw,38px)}
.vergelijk__beeld{position:relative;user-select:none;touch-action:pan-y;overflow:hidden;
  /* een expliciete breedte, want de beeldlagen staan absoluut en zouden de
     kolom anders op nul zetten                                            */
  width:min(100%,21rem);margin-inline:auto;aspect-ratio:4/5;
  background:rgba(83,14,17,.05)}
.vergelijk__beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.vergelijk__voorlaag{position:absolute;inset:0;width:50%;overflow:hidden}
/* de voor-laag wordt smaller geknipt, het beeld zelf blijft even breed als
   de laag eronder, anders schuift het telefoonframe mee                 */
.vergelijk__voorlaag img{left:0;top:0;right:auto;bottom:auto;
  height:100%;width:auto;max-width:none;object-fit:contain}
.vergelijk__greep{position:absolute;top:0;bottom:0;left:50%;width:44px;transform:translateX(-50%);
  cursor:ew-resize;display:grid;place-items:center;z-index:3}
.vergelijk__lijn{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--bordeaux);transform:translateX(-50%)}
.vergelijk__knop{position:relative;width:44px;height:44px;background:var(--bordeaux);color:var(--creme);
  display:grid;place-items:center;font-size:15px;
  transition:background var(--snel) var(--soepel)}
.vergelijk__greep:hover .vergelijk__knop{background:var(--bordeaux-diep)}
.vergelijk__tag{position:absolute;bottom:10px;font-family:var(--label);font-weight:500;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;padding:7px 12px;z-index:2}
.vergelijk__tag--voor{left:10px;background:var(--bordeaux);color:var(--creme)}
.vergelijk__tag--na{right:10px;background:var(--blauw);color:var(--bordeaux)}
.vergelijk__uitleg h3{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,1.5vw,1.45rem);line-height:1.08;color:var(--bordeaux);margin-bottom:.7em;max-width:24ch}
.vergelijk__uitleg p{color:var(--inkt-zacht);max-width:52ch;font-size:.95em}
.mini-cijfers{display:grid;grid-auto-flow:column;gap:clamp(16px,2.4vw,34px);
  margin-block:clamp(20px,2.2vw,28px);justify-content:start}
.mini-cijfers:empty{display:none}
.mini-cijfers dt{font-family:var(--kop);font-weight:700;color:var(--bordeaux);
  font-size:clamp(1.2rem,2vw,1.75rem);line-height:1}
.mini-cijfers dd{margin:.5em 0 0;font-size:.8em;color:var(--inkt-zacht);max-width:15ch}
.vergelijk__kiezer{display:flex;flex-wrap:wrap;gap:8px;margin-block:clamp(18px,2.2vw,26px);
  padding-top:clamp(18px,2.2vw,26px);border-top:1px solid rgba(56,19,21,.2)}
.vergelijk__kiezer button{font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;padding:.9em 1.4em;border:1px solid rgba(56,19,21,.28);color:var(--inkt);
  transition:background var(--snel) var(--soepel),color var(--snel) var(--soepel),border-color var(--snel) var(--soepel)}
.vergelijk__kiezer button:hover{border-color:var(--bordeaux)}
.vergelijk__kiezer button[aria-selected="true"]{background:var(--bordeaux);color:var(--creme);border-color:var(--bordeaux)}

/* ---------- WAT JE OVERHOUDT ---------- */
.overhoudt{position:relative;background:var(--donker);color:var(--creme);
  display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(30px,4vw,72px);align-items:stretch}
.overhoudt__kop{align-self:center}
.overhoudt__beeld{position:relative;margin:0;overflow:hidden;
  align-self:stretch;min-height:clamp(320px,28vw,520px)}
.overhoudt__beeld picture{position:absolute;inset:0;display:block}
.overhoudt__beeld img{width:100%;height:100%;object-fit:cover;display:block}
.overhoudt__kop,.overhoudt__lijst{padding-block:clamp(34px,4.4vw,80px)}
.overhoudt__lijst{padding-right:clamp(34px,4.4vw,80px)}
.overhoudt__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.45rem,2.8vw,2.6rem);line-height:1.05;letter-spacing:-.012em}
.overhoudt__lead{margin-top:1.1em;color:var(--inkt-licht-zacht);max-width:34ch}
.overhoudt__lijst{display:grid;gap:0}
.overhoudt__lijst li{padding-block:clamp(14px,1.5vw,20px);
  border-top:1px solid rgba(242,242,231,.16);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1em;align-items:baseline}
.overhoudt__lijst li:last-child{border-bottom:1px solid rgba(242,242,231,.16)}
.overhoudt__lijst li::before{content:"";width:10px;height:2px;background:var(--blauw);
  transform:translateY(-.35em)}

/* ---------- UITSPRAAK VAN EEN ONDERNEMER ---------- */
.uitspraak{background:var(--offwhite);padding:clamp(34px,4.6vw,86px);
  display:grid;justify-items:start}
.uitspraak__tekst p{font-size:clamp(1.1rem,1.1vw + .75rem,1.85rem);line-height:1.4;
  color:var(--inkt-zacht);max-width:40ch;text-wrap:pretty}
.uitspraak__tekst b{font-weight:600;color:var(--bordeaux)}
.uitspraak__wie{margin-top:clamp(26px,3vw,44px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--lijn);font-weight:600;font-size:.92rem;color:var(--inkt)}
.uitspraak__wie em{display:block;font-family:var(--label);font-style:normal;font-weight:400;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt-zacht);margin-top:.5em}

/* ---------- FORMULIER ----------
   Onderstreepte velden in plaats van omlijnde vakjes: rustiger op een
   gekleurd vlak en het houdt de hoeken strak. De statusregel gebruikt de
   balken, want het brandbook wil bij voortgang nooit een spinner.       */
.formulier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px) clamp(20px,2.6vw,40px)}
.veld{display:flex;flex-direction:column;gap:.5em}
.veld--breed{grid-column:1 / -1}
.veld label{font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt-zacht)}
.veld label span{text-transform:none;letter-spacing:0;font-family:var(--tekst);opacity:.6}
.veld input,.veld textarea{
  font-family:var(--tekst);font-size:1rem;color:var(--inkt);
  background:transparent;border:0;border-bottom:1px solid rgba(56,19,21,.28);
  padding:.6em 0;border-radius:0;resize:vertical;
  transition:border-color var(--normaal) var(--soepel)}
.veld input:focus,.veld textarea:focus{outline:0;border-bottom-color:var(--bordeaux)}
.veld input::placeholder,.veld textarea::placeholder{color:rgba(56,19,21,.35)}
.veld.is-mis input,.veld.is-mis textarea{border-bottom-color:#9B3B1F}

.formulier__voet{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,1.8vw,26px);margin-top:clamp(6px,1vw,14px)}
.formulier__regel{font-size:.86rem;color:var(--inkt-zacht)}

.formulier__status{grid-column:1 / -1;display:flex;align-items:center;gap:.9em;
  opacity:0;transition:opacity var(--normaal) var(--soepel)}
.formulier__status.is-bezig,.formulier__status.is-klaar{opacity:1}
.balken--laden{height:20px}
.balken--laden rect{fill:rgba(56,19,21,.24)}
.formulier__status.is-bezig .balken--laden rect{
  animation:laadbalk 1.1s var(--soepel) infinite}
.formulier__status.is-bezig .balken--laden rect:nth-child(2){animation-delay:.12s}
.formulier__status.is-bezig .balken--laden rect:nth-child(3){animation-delay:.24s}
.formulier__status.is-bezig .balken--laden rect:nth-child(4){animation-delay:.36s}
.formulier__status.is-klaar .balken--laden rect{fill:var(--bordeaux)}
@keyframes laadbalk{0%,100%{fill:rgba(56,19,21,.24)}50%{fill:var(--bordeaux)}}
.formulier__melding{font-size:.92rem;color:var(--inkt)}

/* ---------- ZWEVENDE CONTACTKNOP ---------- */
.zweefknop{position:fixed;right:clamp(16px,2vw,30px);bottom:clamp(16px,2vw,30px);
  z-index:90;display:none;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--traag) var(--soepel),transform var(--traag) var(--soepel)}
.zweefknop.is-zichtbaar{opacity:1;transform:none;pointer-events:auto}
.zweefknop .btn{box-shadow:0 18px 40px -18px rgba(24,5,7,.5)}
/* De zwevende knop stond alleen op desktop, waardoor je hem op een
   telefoon nooit zag. Juist daar is hij handig, want daar scrol je het
   langst. Hij staat er dus overal, alleen wat compacter.               */
.zweefknop{display:block}

/* =========================================================
   LEVEL UP
   ========================================================= */

/* ---------- HERO MET FILM ----------
   Eén donker kader op de kadermaat: links de naam van het plan en de
   actie, rechts de video staand tot aan de randen. De verloopbalk sluit
   het kader af, net als op home. De video speelt zonder geluid als
   voorproefje; de knop opent hem in de lichtbak met geluid.             */
.hero--film{background:var(--creme);padding:clamp(6px,1vw,16px) 0 0}
.herofilm{position:relative;overflow:hidden;background:var(--donker);color:var(--creme);
  isolation:isolate;
  width:calc(100% - 2 * var(--rand-breed));max-width:var(--max-breed);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.44fr);
  gap:clamp(28px,4vw,80px);align-items:center;isolation:isolate}
/* zwart-wit met korrel achter het donkere vlak, zodat het geen egale kleur
   is maar de gymvloer doorschemert                                       */
.herofilm__achter{position:absolute;inset:0;z-index:-2;display:block}
.herofilm__achter img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.herofilm__sluier{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(40,14,16,.94) 0%,rgba(40,14,16,.88) 52%,rgba(40,14,16,.72) 100%)}

.herofilm__tekst{padding:clamp(44px,5.4vw,104px) 0 clamp(44px,5.4vw,104px) var(--binnen)}
.herofilm__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.1rem,5.6vw,5.4rem);line-height:1;letter-spacing:-.016em;
  text-shadow:0 2px 30px rgba(24,5,7,.35)}
.herofilm__lead{margin-top:1em;font-size:clamp(1.02rem,.6vw + .9rem,1.35rem);line-height:1.45;
  color:var(--inkt-licht-zacht);max-width:40ch;text-wrap:pretty}
.herofilm__regel{margin-top:1.5em;font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,242,231,.6)}
.herofilm__knop{margin-top:clamp(26px,3vw,42px)}

/* de film loopt tot aan de boven- en onderrand van het kader */
.herofilm__film{position:relative;align-self:stretch;min-height:clamp(360px,44vw,620px);
  overflow:hidden}
.herofilm__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.herofilm__play{position:absolute;left:50%;bottom:clamp(20px,2.4vw,34px);transform:translateX(-50%);
  display:flex;align-items:center;gap:.7em;padding:.75em 1.2em;
  background:rgba(24,5,7,.42);backdrop-filter:blur(8px);color:var(--creme);
  border:1px solid rgba(242,242,231,.45);white-space:nowrap;
  font-family:var(--tekst);font-weight:600;font-size:.9rem;
  transition:background var(--normaal) var(--soepel),border-color var(--normaal) var(--soepel)}
.herofilm__play:hover{background:rgba(24,5,7,.66);border-color:rgba(242,242,231,.7)}
.herofilm__play svg{width:14px;flex:none;fill:currentColor}

/* de videobaan zonder band eromheen: crème pagina, gecentreerde kop. De
   labels onder de reels moeten dan wel donker worden.                    */
.werk--licht{background:transparent;color:var(--inkt);
  padding-block:clamp(48px,6vw,104px)}
.werk--licht .werk__kop{display:grid;justify-items:center;text-align:center;
  margin-bottom:clamp(10px,1.4vw,20px)}
.werk__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.35rem,2.7vw,2.6rem);line-height:1.04;letter-spacing:-.012em}
.werk--licht .werk__lead{margin-top:1.1em;color:var(--inkt-zacht);max-width:46ch}
/* Op een lichte pagina maakt een lagere dekking de video's juist wit. Daar
   houden we ze dus vol en leggen we een donkere sluier over de video's die
   niet spelen; op de donkere band van home werkt de dekking wél.        */
.werk--licht .reel{opacity:1}
.werk--licht .reel__frame::after{content:"";position:absolute;inset:0;z-index:2;
  background:rgba(24,5,7,.45);pointer-events:none;
  transition:opacity var(--traag) var(--soepel)}
.werk--licht .reel.is-centraal .reel__frame::after{opacity:0}
.werk--licht .reel__naam{color:var(--inkt)}
.werk--licht .reel__meta{color:var(--inkt-zacht)}
.werk--licht .reelbaan__spoorlijn{background:var(--lijn)}
.werk--licht .reelbaan__spoorlijn i{background:var(--bordeaux)}
.werk--licht .rond{color:var(--bordeaux);border-color:var(--lijn)}
.werk--licht .rond:hover{border-color:var(--bordeaux)}

/* =========================================================
   BUILD & GROW
   Geel is de kleur van dit plan. Het staat als vlak in de hero en in het
   contactvlak, met bordeaux tekst erop; dat mag van het brandbook, geel
   als tekstkleur op een lichte ondergrond niet.
   ========================================================= */

/* ---------- HERO IN HET GEEL ---------- */
.hero--geel{background:var(--creme);padding:clamp(6px,1vw,16px) 0 0}
.herogeel{position:relative;overflow:hidden;background:var(--geel);color:var(--inkt);
  width:calc(100% - 2 * var(--rand-breed));max-width:var(--max-breed);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
  gap:clamp(28px,4vw,80px);align-items:center;isolation:isolate}
.herogeel__tekst{padding:clamp(44px,5.4vw,104px) 0 clamp(44px,5.4vw,104px) var(--binnen)}
.herogeel__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(2rem,5.2vw,5rem);line-height:1;letter-spacing:-.016em}
.herogeel__lead{margin-top:1em;font-size:clamp(1.02rem,.6vw + .9rem,1.35rem);line-height:1.45;
  color:var(--inkt);max-width:40ch;text-wrap:pretty}
.herogeel__regel{margin-top:1.5em;font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt-zacht)}
.herogeel__knop{margin-top:clamp(26px,3vw,42px)}
.herogeel__beeld{position:relative;margin:0;align-self:stretch;overflow:hidden;
  min-height:clamp(340px,42vw,580px)}
.herogeel__beeld picture{position:absolute;inset:0;display:block}
.herogeel__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:saturate(.84) contrast(1.06) sepia(.10)}

/* ---------- HET MAANDRITME ----------
   Vier stappen naast elkaar in een donker kader, met de balken in het geel
   van dit plan. Donker tussen twee gele vlakken in, zodat de pagina niet
   één geel blok wordt.                                                   */
.maandvlak{position:relative;isolation:isolate;overflow:hidden;
  background:var(--donker);color:var(--creme);
  padding:clamp(34px,4.4vw,80px)}
/* zwart-wit met korrel achter het donkere vlak, zodat het geen egale kleur
   is. De bron is maar 1600 breed; onder de sluier valt dat niet op.     */
.maandvlak__achter{position:absolute;inset:0;z-index:-2;display:block}
.maandvlak__achter img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.maandvlak__sluier{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(40,14,16,.93) 0%,rgba(40,14,16,.88) 55%,rgba(40,14,16,.94) 100%)}
.maandvlak__kop{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(24px,3vw,60px);align-items:end;
  padding-bottom:clamp(30px,3.4vw,52px);border-bottom:1px solid rgba(242,242,231,.16)}
.maandvlak__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.4rem,2.8vw,2.6rem);line-height:1.04;letter-spacing:-.012em}
.maandvlak__lead{color:var(--inkt-licht-zacht);max-width:46ch}

.maand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,44px);margin-top:clamp(30px,3.4vw,52px)}
.maand__stap h3{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.3vw,1.35rem);line-height:1.05;margin-top:.9em}
.maand__stap p{margin-top:.8em;font-size:.92em;color:var(--inkt-licht-zacht)}
.balken--maand{height:clamp(24px,2.2vw,32px)}
.balken--maand rect{fill:var(--geel)}
.balken--maand rect.is-leeg{fill:none;stroke:rgba(242,242,231,.4);stroke-width:2}

/* ---------- CIJFERS ---------- */
.cijferkop{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(24px,3vw,60px);align-items:end}
.cijferkop__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.4rem,2.8vw,2.6rem);line-height:1.04;letter-spacing:-.012em}
.cijferkop__lead{color:var(--inkt-zacht);max-width:44ch}
.cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,60px);margin-top:clamp(34px,4vw,64px)}
.cijfer{padding-top:clamp(20px,2.2vw,30px);border-top:1px solid var(--lijn)}
.cijfer dt{font-family:var(--kop);font-weight:700;color:var(--bordeaux);
  font-size:clamp(1.8rem,3.6vw,3.4rem);line-height:1;letter-spacing:-.014em;
  font-variant-numeric:tabular-nums}
.cijfer dd{margin:.9em 0 0;color:var(--inkt-zacht);max-width:22ch}
.cijfer dd em{display:block;font-family:var(--label);font-style:normal;font-weight:500;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt);margin-top:.8em}

.getuige{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:center}
.getuige__beeld{position:relative;margin:0}
.getuige__beeld .groeikader{display:block}
.getuige__beeld img{width:100%;height:auto;display:block;
  filter:saturate(.84) contrast(1.06) sepia(.10)}
.getuige__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(56px,5vw,74px);aspect-ratio:1;display:grid;place-items:center;
  background:rgba(24,5,7,.42);backdrop-filter:blur(6px);color:var(--creme);
  border:1px solid rgba(242,242,231,.5);
  transition:background var(--normaal) var(--soepel)}
.getuige__play:hover{background:rgba(24,5,7,.62)}
.getuige__play svg{width:34%;fill:currentColor}
.getuige__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.35rem,2.6vw,2.4rem);line-height:1.04;letter-spacing:-.012em}
.getuige__lead{margin-top:1.1em;color:var(--inkt-zacht);max-width:46ch}
.getuige__wie{margin-top:1.6em;padding-top:1.1em;border-top:1px solid var(--lijn);
  font-weight:600;font-size:.92rem;color:var(--inkt)}
.getuige__wie em{display:block;font-family:var(--label);font-style:normal;font-weight:400;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt-zacht);margin-top:.5em}

/* de kleur van dit plan */
.contactvlak.contactvlak--buildgrow{background:var(--geel)}

@media (max-width:1080px){
  .getuige{grid-template-columns:1fr}
  .maand{grid-template-columns:repeat(2,minmax(0,1fr))}
  .maandvlak__kop,.cijferkop{grid-template-columns:1fr;gap:14px;align-items:start}
}
@media (max-width:900px){
  .herogeel{grid-template-columns:minmax(0,1fr);gap:0}
  .herogeel__tekst{padding:clamp(34px,7vw,56px) var(--rand) clamp(30px,6vw,44px)}
  /* Mobiele heros langer, op verzoek van Karin (2026-09-09). Op home ligt de tekst OVER
     het beeld met een lange gloed (.hero--stapel .hero__media = 4/7), op de andere
     pagina's stapelt het beeld boven een tekstband en stond het beeld op 4/5. Daardoor
     oogde de opening daar kort. 2/3 geeft het beeld ruim honderd pixels extra op 390px
     breed zonder dat de tekst eronder van het scherm valt. De casepagina's stonden op
     vierkant en gaan naar 4/5. De grens van 60svh is er zodat de opening op een kleine
     telefoon (iPhone SE, 375x667) niet het hele eerste scherm opeet: zonder die grens
     viel de alinea daar onder de vouw. Met de grens staan kop en alinea op SE, iPhone 14
     en Pro Max alle drie boven de vouw. */
  .herogeel__beeld{min-height:auto;aspect-ratio:2/3;max-height:60svh}
  .maand{grid-template-columns:1fr}
  .cijfers{grid-template-columns:1fr}
}

/* ---------- VEELGESTELDE VRAGEN ----------
   Beeld links dat met de scroll opengroeit, vragen rechts. Eén open
   tegelijk, met dezelfde uitklaptechniek als de plannenkaarten: een rij
   die van 0fr naar 1fr groeit.                                          */
.vraagvlak{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1fr);
  gap:clamp(30px,4.4vw,88px);align-items:start}
/* gedraaid: tekst links, beeld rechts */
.vraagvlak--gedraaid{grid-template-columns:minmax(0,1fr) minmax(0,.68fr)}
.vraagvlak--gedraaid .vraagvlak__beeld{grid-column:2;grid-row:1}
.vraagvlak--gedraaid .vraagvlak__tekst{grid-column:1;grid-row:1}
.vraagvlak__beeld{position:sticky;top:clamp(96px,12vh,160px);margin:0}
.vraagvlak__beeld .groeikader{display:block}
.vraagvlak__beeld img{width:100%;height:auto;display:block;
  filter:saturate(.84) contrast(1.06) sepia(.10)}
.vraagvlak__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.45rem,3vw,2.7rem);line-height:1.04;letter-spacing:-.012em}
.vraagvlak__lead{margin-top:1.1em;color:var(--inkt-zacht);max-width:46ch}

.vragen{margin-top:clamp(28px,3.4vw,48px)}
.vraag{border-top:1px solid var(--lijn)}
.vraag:last-child{border-bottom:1px solid var(--lijn)}
.vraag h3{margin:0}
.vraag__knop{display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:clamp(16px,2vw,32px);padding-block:clamp(18px,2vw,26px);text-align:left;
  font-family:var(--tekst);font-weight:600;
  font-size:clamp(1rem,.4vw + .92rem,1.15rem);line-height:1.35;color:var(--inkt);
  transition:color var(--snel) var(--soepel)}
.vraag__knop:hover{color:var(--bordeaux)}
.vraag.is-open .vraag__knop{color:var(--bordeaux)}
/* het plusje wordt een minnetje, zonder te draaien */
.vraag__teken{position:relative;flex:none;width:14px;height:14px}
.vraag__teken::before,.vraag__teken::after{content:"";position:absolute;background:currentColor;
  transition:opacity var(--normaal) var(--soepel)}
.vraag__teken::before{left:0;right:0;top:6px;height:2px}
.vraag__teken::after{top:0;bottom:0;left:6px;width:2px}
.vraag.is-open .vraag__teken::after{opacity:0}
.vraag__body{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--traag) var(--soepel)}
.vraag.is-open .vraag__body{grid-template-rows:1fr}
.vraag__body > div{overflow:hidden;min-height:0}
.vraag__body p{color:var(--inkt-zacht);max-width:64ch;
  padding-bottom:clamp(20px,2.4vw,32px)}

/* de kleur van dit plan. Zwaarder gewogen, want de basisregel voor het
   contactvlak staat verderop in het bestand.                            */
.contactvlak.contactvlak--levelup{background:var(--beige)}

@media (max-width:1080px){
  .vraagvlak,.vraagvlak--gedraaid{grid-template-columns:1fr}
  .vraagvlak__beeld{position:static;max-width:28rem}
  .vraagvlak--gedraaid .vraagvlak__beeld{grid-column:1;grid-row:1}
  .vraagvlak--gedraaid .vraagvlak__tekst{grid-column:1;grid-row:2}
}
@media (max-width:900px){
  .herofilm{grid-template-columns:minmax(0,1fr);gap:0}
  .herofilm__tekst{padding:clamp(34px,7vw,56px) var(--rand) clamp(28px,6vw,40px)}
  .herofilm__film{min-height:auto;aspect-ratio:2/3;max-height:60svh}
}

/* =========================================================
   CASES
   ========================================================= */

/* ---------- HERO ----------
   Zwart-wit met korrel achter een sluier, links het portret van Karin,
   rechts de kop. Zelfde kadermaat als alle andere hero's.               */
.hero--cases{background:var(--creme);padding:clamp(6px,1vw,16px) 0 0}
.herocases{position:relative;overflow:hidden;isolation:isolate;
  background:var(--donker);color:var(--creme);
  width:calc(100% - 2 * var(--rand-breed));max-width:var(--max-breed);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,1fr);
  gap:clamp(28px,4vw,80px);align-items:center}
.herocases__achter{position:absolute;inset:0;z-index:-2;display:block}
.herocases__achter img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.herocases__sluier{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(40,14,16,.6) 0%,rgba(40,14,16,.86) 42%,rgba(40,14,16,.93) 100%)}
.herocases__beeld{position:relative;margin:0;align-self:stretch;overflow:hidden;
  min-height:clamp(340px,42vw,580px)}
.herocases__beeld picture{position:absolute;inset:0;display:block}
.herocases__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;
  filter:saturate(.84) contrast(1.06) sepia(.10)}
.herocases__tekst{padding:clamp(44px,5.4vw,104px) var(--binnen) clamp(44px,5.4vw,104px) 0}
.herocases__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,5vw,4.8rem);line-height:1;letter-spacing:-.016em;
  text-shadow:0 2px 30px rgba(24,5,7,.35)}
.herocases__lead{margin-top:1em;font-size:clamp(1.02rem,.6vw + .9rem,1.35rem);line-height:1.45;
  color:var(--inkt-licht-zacht);max-width:44ch;text-wrap:pretty}

/* ---------- DE CASERIJEN ----------
   Brede kaarten op de kadermaat, om en om beeld links en beeld rechts.
   Voeg je een case toe, dan kopieer je één article en wissel je de
   modifier.                                                             */
.caselijst{display:grid;gap:clamp(20px,2.4vw,40px)}
.caserij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(24px,3.4vw,64px);align-items:center;
  background:var(--offwhite);padding:clamp(26px,3.2vw,56px)}
.caserij--beeldlinks{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
.caserij__beeld{margin:0}
.caserij__beeld .groeikader{display:block}
.caserij__beeld img{width:100%;height:auto;display:block;
  filter:saturate(.84) contrast(1.06) sepia(.10)}
.caserij__meta{font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt-zacht)}
.caserij__titel{margin-top:.7em;font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.15rem,2vw,1.9rem);line-height:1.06;letter-spacing:-.012em;
  max-width:22ch}
.caserij__lead{margin-top:1.1em;color:var(--inkt-zacht);max-width:52ch}
.caserij__cijfers{display:grid;grid-auto-flow:column;justify-content:start;
  gap:clamp(18px,2.4vw,40px);margin-block:clamp(20px,2.4vw,32px)}
.caserij__cijfers:empty{display:none}
.caserij__cijfers dt{font-family:var(--kop);font-weight:700;color:var(--bordeaux);
  font-size:clamp(1.05rem,1.8vw,1.6rem);line-height:1}
.caserij__cijfers dd{margin:.5em 0 0;font-size:.8em;color:var(--inkt-zacht);max-width:14ch}

@media (max-width:1080px){
  .caserij,.caserij--beeldlinks{grid-template-columns:1fr;gap:clamp(20px,3vw,32px)}
  .caserij--beeldlinks .caserij__beeld{grid-row:1}
  .caserij__beeld{max-width:24rem}
}
@media (max-width:900px){
  .herocases{grid-template-columns:minmax(0,1fr);gap:0}
  .herocases__beeld{min-height:auto;aspect-ratio:2/3;max-height:60svh}
  .herocases__tekst{padding:clamp(34px,7vw,56px) var(--rand)}
}

/* ---------- CASEPAGINA ----------
   Eén opzet voor alle cases: hero met de naam en het klantbeeld, dan de
   situatie, de aanpak en het resultaat, en onderaan de volgende case.
   Blokken die je niet kunt vullen laat je weg.                          */
.hero--case{background:var(--creme);padding:clamp(6px,1vw,16px) 0 0}
.herocase{position:relative;overflow:hidden;background:var(--donker);color:var(--creme);
  width:calc(100% - 2 * var(--rand-breed));max-width:var(--max-breed);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
  gap:clamp(28px,4vw,80px);align-items:center;isolation:isolate}
.herocase__tekst{padding:clamp(44px,5.4vw,96px) 0 clamp(44px,5.4vw,96px) var(--binnen)}
.herocase__meta{font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,242,231,.66)}
.herocase__titel{margin-top:.8em;font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,3.4rem);line-height:1.04;letter-spacing:-.014em}
.herocase__dienst{margin-top:1.6em;padding-top:1.1em;border-top:1px solid rgba(242,242,231,.2);
  font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,242,231,.66)}
.herocase__beeld{position:relative;margin:0;align-self:stretch;overflow:hidden;
  min-height:clamp(300px,36vw,520px)}
.herocase__beeld picture{position:absolute;inset:0;display:block}
.herocase__beeld img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.84) contrast(1.06) sepia(.10)}

/* de tekstblokken: kop links, tekst rechts */
.caseblok{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,72px);align-items:start}
.caseblok__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.35rem,2.6vw,2.4rem);line-height:1.04;letter-spacing:-.012em}
.caseblok__tekst p{color:var(--inkt-zacht);max-width:60ch}

.caseaanpak{display:grid;gap:0}
.caseaanpak li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.8vw,28px);align-items:start;
  padding-block:clamp(18px,2vw,26px);border-top:1px solid var(--lijn)}
.caseaanpak li:last-child{border-bottom:1px solid var(--lijn)}
.caseaanpak span{font-family:var(--kop);font-weight:700;line-height:1;
  font-size:clamp(1rem,1.4vw,1.4rem);color:var(--bordeaux);opacity:.42}
.caseaanpak p{color:var(--inkt-zacht);max-width:56ch}

.caseuitslag{background:var(--donker);color:var(--creme);
  padding:clamp(34px,4.4vw,80px);
  display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);
  gap:clamp(28px,3.6vw,72px);align-items:center}
.caseuitslag__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.35rem,2.6vw,2.4rem);line-height:1.04;letter-spacing:-.012em}
.caseresultaat{display:grid;grid-auto-flow:column;justify-content:start;
  gap:clamp(24px,3.4vw,64px)}
.caseresultaat dt{font-family:var(--kop);font-weight:700;color:var(--geel);
  font-size:clamp(1.6rem,3.2vw,3rem);line-height:1;letter-spacing:-.014em}
.caseresultaat dd{margin:.8em 0 0;color:var(--inkt-licht-zacht);max-width:18ch;font-size:.92em}

/* de doorstap naar de volgende case */
.volgende{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:clamp(16px,2vw,32px);padding:clamp(24px,3vw,40px) clamp(18px,2vw,32px);
  margin-inline:calc(-1 * clamp(18px,2vw,32px));
  border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  transition:background var(--normaal) var(--soepel)}
.volgende:hover{background:var(--offwhite)}
.volgende__label{grid-column:1;font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt-zacht)}
.volgende__naam{grid-column:1;margin-top:.5em;font-family:var(--kop);font-weight:700;
  text-transform:uppercase;color:var(--bordeaux);
  font-size:clamp(1.3rem,2.6vw,2.4rem);line-height:1.04;letter-spacing:-.012em}
.volgende__pijl{grid-column:2;grid-row:1 / span 2;width:clamp(28px,3vw,44px);
  color:var(--bordeaux);
  transition:transform var(--normaal) var(--soepel)}
.volgende__pijl svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.4}
.volgende:hover .volgende__pijl{transform:translateX(8px)}

@media (max-width:1080px){
  .caseblok{grid-template-columns:1fr;gap:clamp(16px,3vw,26px)}
  .caseuitslag{grid-template-columns:1fr}
  .caseresultaat{grid-auto-flow:row}
}
@media (max-width:900px){
  .herocase{grid-template-columns:minmax(0,1fr);gap:0}
  .herocase__tekst{padding:clamp(34px,7vw,56px) var(--rand)}
  .herocase__beeld{min-height:auto;aspect-ratio:4/5;max-height:60svh}
}

/* =========================================================
   OVER KARIN
   Een verhaalpagina: veel beeld, en de tekst in haar eigen woorden.
   ========================================================= */

.hero--karin{background:var(--creme);padding:clamp(6px,1vw,16px) 0 0}
.herokarin{position:relative;overflow:hidden;background:var(--donker);color:var(--creme);
  width:calc(100% - 2 * var(--rand-breed));max-width:var(--max-breed);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);
  gap:clamp(28px,4vw,80px);align-items:center;isolation:isolate}
/* zwart-wit met korrel achter het donkere vlak */
.herokarin__achter{position:absolute;inset:0;z-index:-2;display:block}
.herokarin__achter img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.herokarin__sluier{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(40,14,16,.9) 0%,rgba(40,14,16,.9) 46%,rgba(40,14,16,.74) 100%)}
.herokarin__beeld{position:relative;margin:0;align-self:stretch;overflow:hidden;
  min-height:clamp(360px,44vw,620px)}
.herokarin__beeld picture{position:absolute;inset:0;display:block}
.herokarin__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:saturate(.84) contrast(1.06) sepia(.10)}
.herokarin__tekst{padding:clamp(44px,5.4vw,104px) var(--binnen) clamp(44px,5.4vw,104px) 0}
.herokarin__meta{font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,242,231,.66)}
.herokarin__titel{margin-top:.8em;font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.8rem,4.2vw,4rem);line-height:1.02;letter-spacing:-.016em}
.herokarin__lead{margin-top:1.1em;font-size:clamp(1.02rem,.6vw + .9rem,1.35rem);line-height:1.45;
  color:var(--inkt-licht-zacht);max-width:42ch;text-wrap:pretty}

/* ---------- VERHAALBLOK: kop links, tekst rechts ---------- */
.verhaal{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,72px);align-items:start}
.verhaal__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.35rem,2.6vw,2.4rem);line-height:1.04;letter-spacing:-.012em}
.verhaal__tekst{display:grid;gap:1.1em}
.verhaal__tekst p{color:var(--inkt-zacht);max-width:58ch}
/* de merken waarvoor ze werkte, in hun eigen logo. Niet verkleuren: dat
   zijn de merken van een ander.                                          */
.merken{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(24px,3vw,52px);margin-top:1.2em;
  padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--lijn)}
.merken img{height:clamp(18px,1.8vw,26px);width:auto;display:block;opacity:.8}

/* ---------- BEELD LINKS, TEKST RECHTS ----------
   Twee keer gebruikt op deze pagina: bij de taal van de gymvloer en bij de
   slotzin. Geen kader eromheen, gewoon op de crème pagina.              */
.naastelkaar{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(28px,4vw,80px);align-items:center}
.naastelkaar__beeld{margin:0}
.naastelkaar__beeld .groeikader{display:block}
.naastelkaar__beeld img{width:100%;height:auto;display:block;
  filter:saturate(.84) contrast(1.06) sepia(.10)}
.naastelkaar__tekst{display:grid;gap:1.1em}
.naastelkaar__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.4rem,2.8vw,2.6rem);line-height:1.04;letter-spacing:-.012em}
.naastelkaar__tekst p{color:var(--inkt-zacht);max-width:52ch}
.naastelkaar__slot{color:var(--inkt);font-size:clamp(1.02rem,.5vw + .92rem,1.25rem);
  padding-top:1.1em;border-top:1px solid var(--lijn)}

/* ---------- FOTOGRID ----------
   Drie kolommen, de middelste zakt iets weg. Dezelfde asymmetrie als de
   casetegels op home, zodat het een raster blijft en geen strook.       */
.fotogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,30px);margin-top:clamp(40px,4.6vw,76px)}
.fotogrid .foto:nth-child(3n+2){margin-top:clamp(24px,3.4vw,64px)}
.foto{margin:0}
.foto .groeikader{display:block}
.foto img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.84) contrast(1.06) sepia(.10)}

/* ---------- ZO WERK IK ---------- */
.werkwijze{background:var(--offwhite);padding:clamp(34px,4.4vw,80px);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:clamp(28px,3.6vw,72px);align-items:start}
.werkwijze__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.35rem,2.6vw,2.4rem);line-height:1.04;letter-spacing:-.012em}
.werkwijze__lead{margin-top:1.1em;color:var(--inkt-zacht);max-width:44ch}
.werkwijze__lijst{display:grid;gap:0}
.werkwijze__lijst li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.8vw,28px);align-items:start;
  padding-block:clamp(16px,1.8vw,24px);border-top:1px solid var(--lijn)}
.werkwijze__lijst li:last-child{border-bottom:1px solid var(--lijn)}
.werkwijze__lijst span{font-family:var(--kop);font-weight:700;line-height:1;
  font-size:clamp(1rem,1.4vw,1.35rem);color:var(--bordeaux);opacity:.42}
.werkwijze__lijst p{color:var(--inkt-zacht);max-width:52ch}

/* ---------- DE SLOTZIN ---------- */
.slotzin{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.5rem,3vw,2.9rem);line-height:1.04;
  letter-spacing:-.014em}
.slotlead{font-size:clamp(1.02rem,.6vw + .9rem,1.3rem);line-height:1.45;
  color:var(--inkt-zacht);max-width:44ch;text-wrap:pretty}

@media (max-width:1080px){
  .verhaal,.werkwijze{grid-template-columns:1fr;gap:clamp(18px,3vw,30px)}
  .naastelkaar{grid-template-columns:1fr;gap:clamp(22px,3.4vw,36px)}
  .naastelkaar__beeld{max-width:28rem}
  .fotogrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fotogrid .foto:nth-child(3n+2){margin-top:0}
  .fotogrid .foto:nth-child(2n){margin-top:clamp(20px,4vw,44px)}
}
@media (max-width:900px){
  .herokarin{grid-template-columns:minmax(0,1fr);gap:0}
  .herokarin__beeld{min-height:auto;aspect-ratio:2/3;max-height:60svh}
  .herokarin__tekst{padding:clamp(34px,7vw,56px) var(--rand)}
}

/* =========================================================
   CONTACT
   Persoonlijk: haar gezicht, haar directe lijnen, en pas daarna het
   formulier. Wie liever mailt of belt hoeft niet eerst te scrollen.
   ========================================================= */

.hero--contact{background:var(--creme);padding:clamp(6px,1vw,16px) 0 0}
.herocontact{position:relative;overflow:hidden;background:var(--donker);color:var(--creme);
  width:calc(100% - 2 * var(--rand-breed));max-width:var(--max-breed);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);
  gap:clamp(28px,4vw,80px);align-items:center;isolation:isolate}
.herocontact__beeld{position:relative;margin:0;align-self:stretch;overflow:hidden;
  min-height:clamp(360px,44vw,620px)}
.herocontact__beeld picture{position:absolute;inset:0;display:block}
.herocontact__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  filter:saturate(.84) contrast(1.06) sepia(.10)}
.herocontact__tekst{padding:clamp(44px,5.4vw,96px) var(--binnen) clamp(44px,5.4vw,96px) 0}
.herocontact__meta{font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,242,231,.66)}
.herocontact__titel{margin-top:.8em;font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.016em}
.herocontact__lead{margin-top:1.1em;font-size:clamp(1.02rem,.5vw + .92rem,1.28rem);line-height:1.45;
  color:var(--inkt-licht-zacht);max-width:46ch;text-wrap:pretty}

/* de directe lijnen, zonder formulier ertussen */
.herocontact__lijnen{margin-top:clamp(28px,3.2vw,44px);display:grid;gap:0}
.herocontact__lijnen li{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(12px,1.6vw,24px);align-items:baseline;
  padding-block:clamp(14px,1.6vw,20px);border-top:1px solid rgba(242,242,231,.18)}
.herocontact__lijnen li:last-child{border-bottom:1px solid rgba(242,242,231,.18)}
.herocontact__lijnen span{font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,242,231,.6)}
.herocontact__lijnen a{font-weight:600;position:relative;
  transition:color var(--snel) var(--soepel)}
/* de twee sociale links delen één cel, anders vallen ze uit het raster */
.herocontact__socials{display:flex;flex-wrap:wrap;gap:1.4em}
.herocontact__lijnen span.herocontact__socials{font-family:var(--tekst);font-size:1rem;
  letter-spacing:0;text-transform:none;color:var(--creme)}
.herocontact__lijnen a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--normaal) var(--soepel)}
.herocontact__lijnen a:hover::after{transform:scaleX(1)}

/* ---------- ZO GAAT HET DAARNA ---------- */
.stappenrij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,56px);margin-top:clamp(40px,4.6vw,76px)}
.stappenrij li{padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--lijn)}
.stappenrij__nr{font-family:var(--kop);font-weight:700;line-height:1;
  font-size:clamp(1.1rem,1.6vw,1.6rem);color:var(--bordeaux);opacity:.42}
.stappenrij h3{margin-top:.7em;font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.05rem,1.5vw,1.45rem);line-height:1.06}
.stappenrij p{margin-top:.9em;color:var(--inkt-zacht);max-width:38ch}

@media (max-width:1080px){
  .stappenrij{grid-template-columns:1fr}
}
@media (max-width:900px){
  .herocontact{grid-template-columns:minmax(0,1fr);gap:0}
  .herocontact__beeld{min-height:auto;aspect-ratio:2/3;max-height:60svh}
  .herocontact__tekst{padding:clamp(34px,7vw,56px) var(--rand)}
}
@media (max-width:560px){
  /* label boven de waarde: een e-mailadres van drieëntwintig tekens past
     niet naast een label van een kwart breedte                          */
  .herocontact__lijnen li{grid-template-columns:1fr;gap:4px}
  .herocontact__lijnen a{overflow-wrap:anywhere}
}

/* =========================================================
   SOCIAL FIT SCAN
   Eén kader op de kadermaat, gevuld met het verloop uit het scanvlak op
   home. In het midden de kaart met de vragen, zoals de voorvertoning in
   die sectie. Het kader heeft een vaste hoogte: de kaart wisselt van
   inhoud, maar het kader springt niet.
   ========================================================= */

.scanpagina{background:var(--creme);padding:clamp(6px,1vw,16px) 0 var(--sectie)}
.scanvak{position:relative;overflow:hidden;isolation:isolate;
  width:calc(100% - 2 * var(--rand-breed));max-width:var(--max-breed);margin-inline:auto;
  height:clamp(700px,86svh,920px);
  display:grid;place-items:center;padding:clamp(24px,3.4vw,64px);
  background-color:#5A3438;
  background-image:
    radial-gradient(120% 95% at 46% -14%, #310605 0%, rgba(49,6,5,0) 64%),
    radial-gradient(105% 80% at 100% -6%,  #5F1B22 0%, rgba(95,27,34,0) 58%),
    radial-gradient(105% 95% at -8% 116%, #8FC8E6 0%, rgba(143,200,230,.55) 38%, rgba(143,200,230,0) 70%),
    radial-gradient(70%  60% at 22% 96%,  #A8D4EC 0%, rgba(168,212,236,0) 62%),
    radial-gradient(100% 90% at 104% 112%, #E9EACC 0%, rgba(233,234,204,0) 64%),
    linear-gradient(176deg, #3D1618 0%, #6F5F6C 48%, #B8BDBE 100%);
}

/* de kaart zelf: crème op het verloop, met de verloopbalk als afsluiting
   bovenaan, net als onder het herokader                                 */
.scankaart{position:relative;width:min(100%,58rem);
  min-height:clamp(400px,50vh,540px);
  display:grid;align-items:center;
  background:var(--creme);color:var(--inkt);
  padding:clamp(28px,3.4vw,60px);
  box-shadow:0 40px 90px -40px rgba(24,5,7,.55)}
.scankaart__rand{position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#819099 0%,#80777D 20%,#775055 40%,#815252 60%,#9D6D6B 80%,#AE8581 100%)}

.scan__balk{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:clamp(14px,1.6vw,20px);border-bottom:1px solid var(--lijn)}
.scan__merk{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(.82rem,.9vw,1rem);letter-spacing:-.006em}
.scan__teller{font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt-zacht)}

/* de balken zijn de voortgangsmeter; het brandbook wil daar nooit een
   spinner maar altijd de balken                                        */
.scan__balken{display:block;width:clamp(86px,9vw,124px);height:auto;
  margin-block:clamp(20px,2.2vw,30px)}
.scan__balken rect{fill:var(--bordeaux);
  transition:fill var(--traag) var(--soepel),opacity var(--traag) var(--soepel)}
.scan__balken rect.is-leeg{fill:none;stroke:var(--bordeaux);stroke-width:2.5;opacity:.3}

.scan__stap{border:0;padding:0;margin:0;min-width:0}
.scan__vraag{padding:0;font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);
  font-size:clamp(1.25rem,2.4vw,2.15rem);line-height:1.06;letter-spacing:-.012em;
  max-width:20ch}
.scan__opties{margin-top:clamp(22px,2.6vw,36px);display:grid;gap:.55rem}
.scan__optie{display:block;position:relative;cursor:pointer}
.scan__optie input{position:absolute;opacity:0;width:0;height:0}
.scan__optie span{display:block;padding:clamp(.9em,1.1vw,1.1em) clamp(1.1em,1.3vw,1.35em);
  border:1px solid var(--lijn);color:var(--inkt);
  font-size:clamp(.95rem,.35vw + .88rem,1.05rem);line-height:1.35;
  transition:background var(--normaal) var(--soepel),border-color var(--normaal) var(--soepel),
             color var(--normaal) var(--soepel)}
.scan__optie:hover span{border-color:var(--bordeaux)}
.scan__optie input:focus-visible + span{outline:2px solid var(--bordeaux);outline-offset:2px}
.scan__optie input:checked + span{background:var(--bordeaux);color:var(--creme);
  border-color:var(--bordeaux);font-weight:600}

.scan__voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-top:clamp(22px,2.6vw,34px);
  padding-top:clamp(14px,1.6vw,20px);border-top:1px solid var(--lijn)}
.scan__terug{font-family:var(--tekst);font-weight:600;font-size:.9rem;color:var(--bordeaux);
  position:relative;padding-bottom:2px}
.scan__terug::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--normaal) var(--soepel)}
.scan__terug:hover::after{transform:scaleX(1)}
.scan__hint{margin-left:auto;font-size:.86rem;color:var(--inkt-zacht)}

/* ---------- DE UITSLAG ----------
   Twee kolommen, zodat de kaart even hoog blijft als bij de vragen.    */
/* het portret vult de hele hoogte van de kaart, dat leest rustiger dan
   een klein pasfotootje met lucht eronder                              */
/* het portret staat op zijn eigen verhouding, niet uitgerekt over de hele
   kolomhoogte: een smalle strook van een gezicht leest niet             */
.uitslag{display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,1fr);
  gap:clamp(24px,2.8vw,48px);align-items:start;width:100%}
.uitslag__zij{display:grid;gap:1em}
/* de picture moet mee opgerekt worden, anders houdt de img zijn eigen
   hoogte en blijft de rest van de kolom leeg                            */
.uitslag__beeld{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5}
.uitslag__beeld picture{position:absolute;inset:0;display:block}
.uitslag__beeld img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 18%;
  filter:saturate(.84) contrast(1.06) sepia(.10)}
.uitslag__wie{font-weight:600;font-size:.88rem;color:var(--inkt)}
.uitslag__wie em{display:block;font-family:var(--label);font-style:normal;font-weight:400;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt-zacht);margin-top:.4em}

.uitslag__kop{display:flex;align-items:baseline;gap:clamp(14px,1.8vw,28px);
  padding-bottom:clamp(12px,1.4vw,18px);border-bottom:1px solid var(--lijn)}
.uitslag__label{font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt-zacht)}
.uitslag__score{margin-left:auto;font-family:var(--kop);font-weight:700;line-height:1;
  color:var(--bordeaux);font-size:clamp(2.2rem,4.4vw,3.6rem);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.uitslag__score i{font-style:normal;font-size:.3em;opacity:.45;margin-left:.12em}
.uitslag__titel{margin-top:.9em;font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);font-size:clamp(1.05rem,1.7vw,1.55rem);line-height:1.08;
  letter-spacing:-.01em;max-width:24ch}
.uitslag__uitleg{margin-top:.8em;color:var(--inkt-zacht);max-width:60ch;font-size:.93rem;line-height:1.45}
.uitslag__plan{margin-top:.6em;padding-top:1em;border-top:1px solid var(--lijn);
  font-size:.95rem;color:var(--inkt-zacht)}
.uitslag__plan a{font-weight:600;color:var(--bordeaux)}

.formulier--scan{margin-top:clamp(16px,2vw,26px);
  padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--lijn);
  gap:clamp(12px,1.4vw,18px) clamp(18px,2vw,30px)}
.formulier__kop{grid-column:1 / -1;color:var(--inkt-zacht);max-width:56ch;font-size:.92rem}
.formulier--scan .formulier__voet{margin-top:0}

@media (max-width:1080px){
  .scanvak{height:auto;min-height:clamp(560px,74svh,760px);padding-block:clamp(28px,6vw,48px)}
  .uitslag{grid-template-columns:1fr}
  .uitslag__zij{grid-template-columns:auto 1fr;align-items:center;gap:1.2em}
  .uitslag__beeld{width:9rem}
}
@media (max-width:900px){
  .scankaart{padding:clamp(24px,5vw,36px)}
  .scan__hint{margin-left:0;width:100%}
  .formulier--scan{grid-template-columns:1fr}
  /* kop en teller passen naast elkaar zolang ze mee krimpen */
  .scan__merk{font-size:clamp(.72rem,3.2vw,1rem)}
  .scan__teller{font-size:clamp(9px,2.4vw,12px);letter-spacing:.14em;white-space:nowrap}
}

/* ---------- CONTACTVLAK ----------
   Opgezet als de LinkedIn-banner uit het brandbook: het monogram
   toon-op-toon in het vlak en een zwart-wit portret dat tot de rand
   doorloopt. Het patroon ligt alleen achter de kop, want het brandbook wil
   het nooit achter lopende tekst.

   Het vlak is lichtblauw, de kleur die volgens de projectafspraak bij
   Transformatie hoort. Bordeaux botste hier met het donkere kader erboven.
   Voor Build & Grow wordt dit geel, voor Level Up beige.                 */
.contactvlak{position:relative;isolation:isolate;overflow:hidden;
  background:var(--blauw);color:var(--inkt);
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr) auto;
  gap:clamp(30px,3.6vw,64px);align-items:start}
.contactvlak__tekst{padding:clamp(34px,4vw,72px) 0 clamp(34px,4vw,72px) clamp(34px,4vw,72px)}
.contactvlak__titel{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  color:var(--bordeaux);
  font-size:clamp(1.4rem,2.6vw,2.5rem);line-height:1.04;letter-spacing:-.012em}
.contactvlak__lead{margin-top:1.1em;color:var(--inkt-zacht);max-width:38ch}
.contactvlak__regel{margin-top:clamp(22px,2.4vw,32px);font-size:.92rem;
  color:var(--inkt-zacht)}

.contactvlak .formulier{padding-block:clamp(34px,4vw,72px)}

.contactvlak__beeld{position:relative;margin:0;align-self:stretch;overflow:hidden;
  width:clamp(180px,17vw,260px)}
.contactvlak__beeld picture{position:absolute;inset:0;display:block}
.contactvlak__beeld img{width:100%;height:100%;object-fit:cover;display:block;
  /* iets naar boven, zodat de uitsnede eerder bij de voeten dan bij het
     hoofd wegvalt wanneer het vlak lager is dan de foto zelf        */
  object-position:50% 22%}

@media (max-width:1080px){
  .vergelijk{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}
  .contactvlak{grid-template-columns:1fr}
  .contactvlak__tekst{padding:clamp(30px,5vw,52px) clamp(30px,5vw,52px) 0}
  .contactvlak .formulier{padding:clamp(24px,4vw,40px) clamp(30px,5vw,52px)}
  .contactvlak__beeld{width:auto;height:auto;aspect-ratio:4 / 5}
  .overhoudt{grid-template-columns:1fr}
  .overhoudt__beeld{max-height:46svh}
  .overhoudt__kop{padding-inline:clamp(24px,4vw,48px)}
  .overhoudt__lijst{padding-inline:clamp(24px,4vw,48px);padding-top:0}
  .voorwie{grid-template-columns:1fr}
  .voorwie__beeld{max-width:26rem}
}
@media (max-width:900px){
  .planlead{grid-template-columns:1fr;gap:14px}
  .formulier{grid-template-columns:1fr}
  .hero--plan .hero__kader{aspect-ratio:4/5;max-height:56svh}
  /* TRANSFORMATIE. is één woord van veertien tekens en kan niet afbreken.
     De maat komt hier terug omdat de regel bij de planhero verderop in het
     bestand staat en die anders wint.                                    */
  .hero--plan .hero__title{font-size:clamp(1.25rem,6.6vw,2.4rem);line-height:1.05}
  /* De route klapt in tot vier blokken onder elkaar. De verticale lijn
     verdwijnt: die kostte een derde van de breedte en de fases volgen
     elkaar op een telefoon toch al op. De balken blijven staan, want die
     laten zien hoever je in het traject bent, en de scheidingslijn tussen
     twee fases neemt het ordenen over.                                   */
  .route{margin-top:clamp(30px,7vw,48px)}
  .route__stap{display:flex;flex-direction:column;gap:0;
    padding-block:clamp(28px,6vw,42px)}
  .route__stap + .route__stap{border-top:1px solid var(--lijn)}
  .route__spoor{order:-1;width:auto;margin:0 0 clamp(14px,3vw,20px);
    display:block;align-self:start}
  .route__lijn{display:none}
  .route__merk{background:transparent;padding:0;display:block}
  .balken--route{height:30px}
  .route__tekst{margin-top:clamp(18px,4vw,26px)}
  .route__uitleg{max-width:none}
}

/* =========================================================
   BEWEGINGSLAAG

   Opgebouwd naar wat de referentiesites daadwerkelijk doen:
   orangewings.nl, thebrinkagency.com, mrboost.nl en joinaquila.nl.
   Alle vier draaien om dezelfde curve, cubic-bezier(.19,1,.22,1), een
   expo-out die snel op gang komt en lang uitloopt. Dat is wat "smooth"
   daar betekent: niet traag beginnen, wel lang uitrollen.

   Deze laag wijkt bewust af van het bewegingsvoorschrift in het
   brandbook. De afwijking staat met reden vastgelegd in de
   brandbook-skill.
   ========================================================= */

:root{
  --expo:cubic-bezier(.19,1,.22,1);
  --onthul:.75s;        /* koppen, per woord */
  --opkomst:.9s;        /* blokken en beeld */
}

/* ---------- KOPPEN: WOORD VOOR WOORD ----------
   Zoals thebrinkagency: elk woord in een eigen masker, dat masker is een
   clip-path van 108 procent zodat staarten, accenten en de schaduw niet
   worden afgesneden. Horizontaal knipt hij niets weg, dus een regel die
   buiten zijn kolom loopt blijft gewoon leesbaar.                      */
.woord{position:relative;display:inline-block;
  clip-path:polygon(0 0,108% 0,108% 108%,0 108%)}
.woord > span{display:inline-block}
html.beweegt .woord > span{transform:translateY(110%);
  transition:transform var(--onthul) var(--expo)}
html.beweegt .is-onthuld .woord > span{transform:none}

/* ---------- BEELD DAT MET DE SCROLL INFADET ----------
   Het recept van orangewings: opacity 0 naar 1 met een schaal van .975
   naar 1. Geen verticale sprong, dat maakt het onrustig.               */
html.beweegt [data-beeldfade]{opacity:var(--fade,0);
  scale:calc(.975 + .025 * var(--fade,0))}

/* ---------- DE REELBAAN FAADT MEE MET DE SCROLL ----------
   De baan staat er meteen, maar heel licht, en loopt met de scrollpositie
   naar zijn volle dekking. Geen reveal die aanslaat, dus geen sprong. De
   korte lineaire overgang strijkt de stapjes tussen twee scrollframes glad,
   net als bij het herokader.                                            */
html.beweegt [data-baanfade]{opacity:calc(.16 + .84 * var(--fade,1));
  transition:opacity 120ms linear}

/* ---------- HERO EN SCANVLAK GROEIEN MEE ----------
   Zoals mrboost het doet: een schaal op het kader, met een korte lineaire
   overgang eroverheen die de stapjes tussen twee scrollframes gladstrijkt.
   Het kader groeit vanuit zijn midden, dus de witruimte staat boven en
   onder en er valt nergens een gat.                                     */
.hero__kader,.scanvlak{transform:scale(var(--groei,1));transform-origin:50% 50%;
  transition:transform 80ms linear}

/* ---------- CASEKADER DAT OPENGROEIT ----------
   Het recept van orangewings: een kader met overflow hidden dat van klein
   naar vol schaalt, met daarin een beeld dat tegen de schaal in juist
   uitzoomt. Daardoor lijkt het venster open te gaan in plaats van dat het
   beeld zelf groeit.                                                     */
html.beweegt [data-groei]{opacity:var(--fade,1)}
/* het kader gaat wel open, maar het beeld blijft volledig dekkend */
html.beweegt [data-groei].groei--dekkend{opacity:1}
html.beweegt .groeikader{overflow:hidden;
  transform:scale(var(--open,1));transform-origin:50% 50%}
html.beweegt .groeibeeld{transform:scale(var(--tegen,1));transform-origin:50% 50%}

/* ---------- ZWEVENDE SCAN-KNOP ----------
   Eén vlak. In rust een knop met Karin ernaast, bij hover klapt datzelfde
   vlak open tot de kaart: breder, hoger, en het verloop uit het brandbook
   komt eronder vandaan. Er verschijnt niets bóven of naast de knop.
   Het verloop is exact dat van het scanvlak onderaan de pagina, met een
   sluier over de onderhelft zodat de tekst leesbaar blijft: dezelfde
   oplossing als de gloed over het herobeeld.                            */
.zweefscan{position:fixed;right:clamp(16px,2vw,30px);bottom:clamp(16px,2vw,30px);
  z-index:90;display:none;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--traag) var(--soepel),transform var(--traag) var(--soepel)}
.zweefscan.is-zichtbaar{opacity:1;transform:none;pointer-events:auto}

.zweefscan__vlak{position:relative;display:block;isolation:isolate;
  width:17rem;padding:.75rem;color:var(--creme);
  background-color:#3A1417;
  border:1px solid rgba(242,242,231,.18);
  box-shadow:0 18px 44px -18px rgba(24,5,7,.55);
  transition:width .6s var(--expo),padding .6s var(--expo),
             border-color .6s var(--expo),box-shadow .6s var(--expo)}

/* het verloop ligt als eigen laag onder de inhoud, zo kan het los infaden */
.zweefscan__vlak::before{content:"";position:absolute;inset:0;z-index:-2;
  opacity:0;transition:opacity .6s var(--expo);
  background-color:#5A3438;
  background-image:
    radial-gradient(120% 95% at 46% -14%, #310605 0%, rgba(49,6,5,0) 64%),
    radial-gradient(105% 80% at 100% -6%,  #5F1B22 0%, rgba(95,27,34,0) 58%),
    radial-gradient(105% 95% at -8% 116%, #8FC8E6 0%, rgba(143,200,230,.55) 38%, rgba(143,200,230,0) 70%),
    radial-gradient(70%  60% at 22% 96%,  #A8D4EC 0%, rgba(168,212,236,0) 62%),
    radial-gradient(100% 90% at 104% 112%, #E9EACC 0%, rgba(233,234,204,0) 64%),
    linear-gradient(176deg, #3D1618 0%, #6F5F6C 48%, #B8BDBE 100%)}
/* lichte sluier achter de quote. Verder blijft het verloop gewoon staan:
   het loopt van bordeaux bovenin naar lichtblauw en geel onderin, precies
   als het scanvlak. De knop onderin is daarom de primaire, die leest juist
   op dat lichte deel.                                                    */
.zweefscan__vlak::after{content:"";position:absolute;inset:0;z-index:-1;
  opacity:0;transition:opacity .6s var(--expo);
  background:linear-gradient(to bottom,rgba(38,9,11,.34) 0%,rgba(38,9,11,.12) 45%,rgba(38,9,11,0) 72%)}

.zweefscan__vlak:hover,.zweefscan__vlak:focus-visible,.zweefscan__vlak.is-open{
  width:clamp(19rem,23vw,21.5rem);padding:1.15rem;
  border-color:rgba(242,242,231,.42);
  box-shadow:0 26px 60px -20px rgba(24,5,7,.62)}
.zweefscan__vlak:hover::before,.zweefscan__vlak:focus-visible::before,.zweefscan__vlak.is-open::before,
.zweefscan__vlak:hover::after,.zweefscan__vlak:focus-visible::after,.zweefscan__vlak.is-open::after{opacity:1}

.zweefscan__rij{display:flex;align-items:center;gap:.85rem}
.zweefscan__foto{flex:none;width:2.7rem;height:3.6rem;overflow:hidden;
  transition:width .6s var(--expo),height .6s var(--expo)}
.zweefscan__foto picture{display:block;width:100%;height:100%}
.zweefscan__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.zweefscan__vlak:hover .zweefscan__foto,
.zweefscan__vlak:focus-visible .zweefscan__foto,
.zweefscan__vlak.is-open .zweefscan__foto{width:4rem;height:5.3rem}

.zweefscan__kop{display:flex;flex-direction:column;gap:.2em}
.zweefscan__label{font-family:var(--tekst);font-weight:600;font-size:.95rem;line-height:1.2}
.zweefscan__sub{font-family:var(--label);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.62}

/* het extra deel groeit open vanuit nul hoogte, zo blijft het één vlak */
.zweefscan__meer{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .6s var(--expo),opacity .45s var(--expo)}
.zweefscan__meer-in{overflow:hidden;min-height:0}
.zweefscan__vlak:hover .zweefscan__meer,
.zweefscan__vlak:focus-visible .zweefscan__meer,
.zweefscan__vlak.is-open .zweefscan__meer{grid-template-rows:1fr;opacity:1}

.zweefscan__quote{display:block;padding-top:1.25rem;font-size:1.02rem;line-height:1.5;
  text-wrap:pretty;text-shadow:0 1px 12px rgba(24,5,7,.45)}
.zweefscan__wie{display:block;margin-top:1em;padding-top:.9em;font-weight:600;font-size:.88rem;
  border-top:1px solid rgba(242,242,231,.24);text-shadow:0 1px 10px rgba(24,5,7,.5)}
.zweefscan__wie em{display:block;font-family:var(--label);font-style:normal;font-weight:400;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.66;margin-top:.35em}
.zweefscan__cta{display:block;margin-top:1.2em;padding:.85em 1.2em;text-align:center;
  font-weight:600;font-size:.95rem;
  background:var(--bordeaux);color:var(--creme);border:1px solid transparent;
  transition:background var(--normaal) var(--soepel)}
/* de knop heeft zijn eigen hover, anders staat hij al donker zodra de kaart
   opengaat en voelt hij dood aan als je hem aanwijst                     */
.zweefscan__cta:hover{background:var(--bordeaux-diep)}

@media (min-width:901px){
  .zweefscan{display:block}
}

/* ---------- KOPPEN OP HEEL SMALLE SCHERMEN ----------
   Nulshock is een brede letter en een woord als KENNISMAKEN. kan niet
   afbreken. Op de smalste telefoons moeten de heroKoppen dus mee krimpen,
   met een vangnet dat liever afbreekt dan het kader breder duwt.
   ------------------------------------------------------------------- */
@media (max-width:560px){
  .herocontact__titel,.herokarin__titel,.herocase__titel,
  .herocases__titel,.herogeel__titel,.herofilm__titel,.herokop__titel{
    font-size:clamp(1.3rem,7vw,4.4rem);line-height:1.04}
  .hero__title,.herocontact__titel,.herokarin__titel,.herocase__titel,
  .herocases__titel,.herogeel__titel,.herofilm__titel,
  .sectiekop__titel,.voorwie__titel,.naastelkaar__titel{overflow-wrap:anywhere}
}

/* ---------- REGELAFBREKINGEN OP KLEINE SCHERMEN ----------
   De <br> in de koppen is gezet voor de breedte van een bureaublad. Op een
   telefoon knipt hij midden in een zin en houd je losse woorden over. De
   woordsplitser zet er een spatie bij, dus verbergen kan gewoon.
   ------------------------------------------------------------------- */
@media (max-width:700px){
  [data-regels] br{display:none}
}

/* ---------- VOLGORDE OP KLEINE SCHERMEN ----------
   In een blok van twee kolommen staat het beeld op desktop vaak links. Zet
   je dat op mobiel één op één om, dan begint de sectie met een foto en komt
   de kop pas daaronder. De tekst gaat daarom voor, het beeld erachteraan.
   ------------------------------------------------------------------- */
@media (max-width:1080px){
  .voorwie,.naastelkaar,.getuige,.vraagvlak,.overhoudt,
  .caserij--beeldlinks{display:flex;flex-direction:column}
  .voorwie__beeld,.naastelkaar__beeld,.getuige__beeld,
  .vraagvlak__beeld,.overhoudt__beeld,
  .caserij--beeldlinks .caserij__beeld{order:2}
  .voorwie__tekst,.naastelkaar__tekst,.getuige__tekst,
  .vraagvlak__tekst,.caserij--beeldlinks .caserij__tekst{order:1}
  .overhoudt__kop{order:1}
  .overhoudt__lijst{order:3}
}

/* ---------- BEWEGING OP KLEINE SCHERMEN ----------
   De kaders die met de scroll meegroeien laten op een smal scherm een gat
   achter boven de sectie eronder, en het effect valt daar toch weg. Alleen
   de reveals blijven staan.                                              */
@media (max-width:900px){
  html.beweegt .hero__kader,
  html.beweegt .scanvlak,
  html.beweegt .herofilm,
  html.beweegt .scanvak{transform:none}

  /* Beeld en video staan er op een telefoon meteen. Een foto die pas op
     scrollhoogte opkomt leest daar als een gat in de pagina, zeker omdat
     een sectie vaak hoger is dan het scherm. Tekst houdt zijn reveal.   */
  [data-reveal="veeg"],
  img[data-reveal],picture[data-reveal],figure[data-reveal],video[data-reveal]{
    opacity:var(--op,1);transform:none;
    -webkit-mask-image:none;mask-image:none}
  .podium__watermerk[data-reveal]{transform:translateX(-50%)}
  html.beweegt [data-beeldfade]{opacity:1;transform:none}
  html.beweegt [data-groei]{opacity:1}
  html.beweegt .groeikader{transform:none}
  html.beweegt .groeibeeld{transform:none}
  /* de baan zelf staat op een telefoon meteen op volle dekking; het
     verschil tussen de spelende kaart en de rest blijft wel staan, dat
     hoort bij de slider en niet bij de scrollanimatie                    */
  html.beweegt [data-baanfade]{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .woord{clip-path:none}
  .woord > span{transform:none;transition:none}
  .hero__kader,.scanvlak{transform:none}
  [data-reveal="masker"] > *{transform:none}
  [data-reveal="veeg"]{opacity:1;-webkit-mask-image:none;mask-image:none}
}


/* =========================================================
   RONDE 2 · FEEDBACK KARIN
   De homepagina is korter en directer geworden, de opening loopt over de
   volle breedte en er staan meer knoppen tussen de tekst. Wat hier staat
   hoort bij die ronde; de rest van het bestand is ongemoeid gelaten.
   ========================================================= */

/* ---------- OPENINGSBLOK OVER DE VOLLE BREEDTE ----------
   Karin wilde de opening breder. Het kader loopt daarom van rand tot rand,
   maar de tekst erin houdt exact dezelfde linkerlijn als elke sectie
   eronder: dezelfde formule als .wrap--kader.                          */
.hero--breed{padding-top:0}
.hero--breed .hero__kader{width:100%;max-width:none;margin-inline:0;
  aspect-ratio:16 / 8.2;max-height:88svh}
/* Het meegroeien van het herokader kan hier niet: een kader dat op negentig
   procent begint laat bij een volle breedte crème randen zien, en juist de
   volle breedte was de vraag. Het kader staat dus meteen goed.          */
html.beweegt .hero--breed .hero__kader{transform:none}
.hero--breed .hero__inhoud{
  width:min(100% - 2 * var(--rand-breed),var(--max-breed));margin-inline:auto;
  padding-inline:var(--binnen);grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2vw,26px)}
.hero__lead{max-width:44ch;color:var(--inkt-licht);
  font-size:clamp(1rem,.5vw + .92rem,1.3rem);line-height:1.5;
  text-shadow:0 1px 20px rgba(24,5,7,.4)}
.hero__acties{display:flex;flex-wrap:wrap;gap:clamp(12px,1.2vw,18px)}

/* Een secundaire knop staat standaard in bordeaux. Op een donker vlak is
   dat vrijwel onleesbaar, dus daar wordt hij crème. Zelfde knop, andere
   ondergrond; het brandbook noemt beide varianten.                      */
.hero__acties .btn--secundair,
.overhoudt .btn--secundair{color:var(--creme)}

/* ---------- DE VIJF PUNTEN ----------
   Een kort label onder het cijfer, zodat je op desktop meteen ziet dat er
   iets te kiezen valt, plus een aanwijzing boven de rij.                */
.stap__kort{display:block;margin-top:.7em;
  font-family:var(--label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(.62rem,.5vw + .5rem,.74rem);line-height:1.3;color:var(--inkt-zacht);
  transition:color var(--normaal) var(--soepel)}
.stap__knop:hover .stap__kort,
.stap.is-open .stap__kort{color:var(--bordeaux)}

/* ---------- WAT ER NA 90 DAGEN STAAT ---------- */
.overhoudt__regel{font-family:var(--label);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;font-size:.72rem;color:var(--inkt-licht-zacht);
  margin-bottom:1.1em}
.overhoudt__acties{margin-top:clamp(24px,2.6vw,36px);
  display:flex;flex-wrap:wrap;gap:clamp(10px,1vw,14px)}

/* ---------- DE SCAN: WAT JE KRIJGT ---------- */
.scanvlak__punten{margin:clamp(20px,2.2vw,30px) 0 clamp(26px,2.8vw,38px);display:grid;gap:.55em}
.scanvlak__punten li{position:relative;padding-left:1.5em;color:var(--inkt-licht-zacht);
  font-size:.96rem;line-height:1.45}
.scanvlak__punten li::before{content:"";position:absolute;left:0;top:.62em;
  width:10px;height:2px;background:var(--blauw)}

/* ---------- DE UITKOMST OP EEN CASETEGEL ---------- */
.case__uitkomst{position:absolute;z-index:2;left:clamp(16px,1.5vw,22px);
  bottom:clamp(22px,2vw,30px);max-width:calc(100% - clamp(90px,8vw,120px));
  font-family:var(--label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(.6rem,.5vw,.72rem);line-height:1.3;color:var(--blauw)}



@media (max-width:900px){
  /* de opening: kop, tekst en knoppen onder elkaar, links uitgelijnd */
  .hero--breed .hero__kader{aspect-ratio:4 / 5;max-height:78svh}
  .hero--breed .hero__inhoud{width:100%;padding-inline:var(--rand)}
  .hero__acties{flex-direction:column;align-items:stretch}
  .hero__acties .btn{width:100%}

  /* De vijf punten staan op een telefoon gewoon open. Karin wil dat de
     tekst er meteen staat, dus geen accordeon en geen reveal.          */
  .stap__kort{display:none}
  .stap__body{position:static;width:auto;height:auto;overflow:visible;
    padding:0 0 clamp(18px,4vw,26px);opacity:1;transform:none}
  .stap:not(.is-open) .stap__body{opacity:1}
  .stap.is-open{border-top-color:var(--lijn)}
  .stap__knop{cursor:default;padding-bottom:clamp(4px,1.4vw,10px)}

  .overhoudt__acties .btn{width:100%}
  .overhoudt__acties{flex-direction:column;align-items:stretch}
}

/* ---------- MIJN GEGEVENS ----------
   Dezelfde lijnen als in de contacthero, maar op de crème pagina in plaats
   van op een donker vlak. Karin wilde het formulier bovenaan en haar
   gegevens eronder.                                                     */
.gegevens{margin-top:clamp(24px,2.8vw,40px);display:grid;gap:0}
.gegevens li{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(12px,1.6vw,24px);align-items:baseline;
  padding-block:clamp(14px,1.6vw,20px);border-top:1px solid var(--lijn)}
.gegevens li:last-child{border-bottom:1px solid var(--lijn)}
.gegevens span{font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt-zacht)}
.gegevens a{font-weight:600;color:var(--bordeaux);position:relative;
  font-size:clamp(1rem,.5vw + .9rem,1.25rem)}
.gegevens span.gegevens__socials{font-family:var(--tekst);font-size:1rem;
  letter-spacing:0;text-transform:none;display:flex;gap:clamp(14px,1.6vw,24px)}
.gegevens a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--normaal) var(--soepel)}
.gegevens a:hover::after{transform:scaleX(1)}
@media (max-width:700px){
  .gegevens li{grid-template-columns:1fr;gap:4px}
  .gegevens a{overflow-wrap:anywhere}
}

/* ---------- DIENSTEN IS ZELF EEN LINK ----------
   Het uitklappen zit op een eigen knopje. Op desktop is dat alleen een
   pijltje dat laat zien dat er meer achter zit; het paneel opent daar nog
   steeds op hover. Op een telefoon is het de knop waarmee je de lijst
   openzet, zodat de link zelf naar het overzicht kan.                   */
.nav__item--has-sub{display:flex;align-items:center;gap:6px}
.nav__uitklap{display:grid;place-items:center;width:22px;height:22px;
  color:var(--bordeaux);cursor:pointer}
.nav__uitklap svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--normaal) var(--soepel)}
.nav__item:hover .nav__uitklap svg,
.nav__item.is-open .nav__uitklap svg{transform:rotate(180deg)}

@media (min-width:901px){
  /* op desktop mag het pijltje niets doen: hover opent het paneel al */
  .nav__uitklap{pointer-events:none}
}
@media (max-width:900px){
  .nav__item--has-sub{display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;gap:0;
    border-bottom:1px solid rgba(242,242,231,.16)}
  .nav__menu .nav__item--has-sub .nav__link{border-bottom:0}
  .nav__uitklap{width:44px;height:44px;color:var(--creme)}
  .nav__uitklap svg{width:20px;height:20px}
  .nav__sub{grid-column:1 / -1}
}

/* ---------- HOE IK JE KAN HELPEN ----------
   Drie korte blokken onder elkaar op een telefoon, naast elkaar op een
   groot scherm. Geen kaarten met een eigen vlak: op deze pagina is de
   crème pagina zelf de drager, met alleen een lijn erboven.            */
.aanbod{margin-top:clamp(30px,3.4vw,52px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px)}
.aanbod li{border-top:1px solid var(--lijn);padding-top:clamp(18px,2vw,26px)}
.aanbod .balken{height:clamp(24px,2.2vw,32px);margin-bottom:clamp(16px,1.8vw,24px)}
.aanbod h3{font-family:var(--kop);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,1.2vw,1.4rem);line-height:1.1;color:var(--bordeaux)}
.aanbod__regel{margin-top:.5em;font-family:var(--label);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:var(--inkt-zacht)}
.aanbod li > p:not(.aanbod__regel){margin-top:1em;color:var(--inkt-zacht)}
.aanbod .link{margin-top:1.2em;display:inline-block}
@media (max-width:900px){
  .aanbod{grid-template-columns:minmax(0,1fr);gap:clamp(22px,5vw,32px)}
}

/* =========================================================
   MOBIELE TYPOGRAFIE · RONDE 2
   Karin: koppen nemen op een telefoon bijna het hele scherm in en lange
   gecentreerde teksten lezen niet prettig. Alle Nulshock-koppen krijgen
   hier daarom één plafond, en wat op desktop gecentreerd staat lijnt op
   een telefoon links uit. Desktop blijft ongemoeid.
   ========================================================= */
@media (max-width:700px){
  .sectiekop__titel,.plannen__titel,.cases__titel,.overhoudt__titel,
  .voorwie__titel,.naastelkaar__titel,.verhaal__titel,.werkwijze__titel,
  .scanvlak__titel,.contactvlak__titel,.slot__titel,.werk__titel,
  .voorna__titel,.programma__titel,.uitslag__titel,.vraagvlak__titel,
  .caseblok__titel,.caseuitslag__titel,.maandvlak__titel,.cijferkop__titel,
  .getuige__titel,.caserij__titel,.overkarin__titel,.slotzin{
    font-size:clamp(1.3rem,6.4vw,1.9rem);line-height:1.1;letter-spacing:-.008em}
  .herocontact__titel,.herokarin__titel,.herocase__titel,.herocases__titel,
  .herogeel__titel,.herofilm__titel,.herokop__titel,.hero__title{
    font-size:clamp(1.35rem,6.8vw,2.1rem);line-height:1.06}
  /* SOCIALMEDIAPARTNER is achttien tekens en past bij 6,8vw net niet.
     Vandaar een maat lager, plus een zacht afbreekstreepje in de kop voor
     schermen die nog smaller zijn.                                      */
  .hero--stapel .hero__title{font-size:clamp(1.15rem,5.8vw,2.1rem)}
  .hero__title,.herocontact__titel,.herokarin__titel,.herocase__titel,
  .herocases__titel,.herogeel__titel,.herofilm__titel{overflow-wrap:break-word}
  .fase__titel,.route__titel{font-size:clamp(1rem,4.6vw,1.25rem)}

  /* lange lopende tekst lijnt links uit */
  .plannen__kop,.plannen__voet,.werk--licht .werk__kop,.overkarin,
  .kop--midden,.sectiekop--enkel{text-align:left;justify-items:start}
  .plannen__kop{margin-inline:0}
  .plannen__lead,.sectiekop__lead,.cases__lead,.overhoudt__lead,
  .scanvlak__lead,.contactvlak__lead,.slot__lead,.werk__lead{max-width:none}

  /* iets minder lucht tussen de secties, anders wordt de pagina alleen
     maar langer zonder dat er meer te zien is                          */
  :root{--sectie:clamp(56px,13vw,96px)}
}

/* ---------- TWEE KNOPPEN IN EEN DIENSTENHERO ---------- */
.herofilm__knop,.herogeel__knop,.hero__rechts{display:flex;flex-wrap:wrap;
  gap:clamp(10px,1vw,14px);align-items:center}
.herofilm__knop .btn--secundair,
.hero__rechts .btn--secundair{color:var(--creme)}
@media (max-width:900px){
  .herofilm__knop,.herogeel__knop,.hero__rechts{flex-direction:column;align-items:stretch;width:100%}
  .herofilm__knop .btn,.herogeel__knop .btn,.hero__rechts .btn{width:100%}
}

/* ---------- DE REELS ZIJN AANKLIKBAAR ----------
   Karin: laat zien dat er iets te klikken valt en dat er geluid bij zit.
   Zelfde vorm als de knop op de contentdaghero, alleen kleiner.        */
.reel__play{position:absolute;z-index:3;left:50%;bottom:clamp(12px,1.4vw,18px);
  transform:translateX(-50%);
  display:flex;align-items:center;gap:.55em;padding:.5em .85em;
  background:rgba(24,5,7,.46);backdrop-filter:blur(8px);color:var(--creme);
  border:1px solid rgba(242,242,231,.42);white-space:nowrap;
  font-family:var(--label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  font-size:.62rem;
  transition:background var(--normaal) var(--soepel),border-color var(--normaal) var(--soepel)}
.reel__play svg{width:9px;flex:none;fill:currentColor}
/* het label vangt zelf geen klikken op: die horen bij de kaart eronder */
.reel__play{pointer-events:none}
.reel:hover .reel__play{background:rgba(24,5,7,.7);border-color:rgba(242,242,231,.7)}

/* ---------- DE ZWEVENDE KNOPPEN OP EEN TELEFOON ----------
   De scankaart klapt op een telefoon niet open, want daar bestaat geen
   hover. Hij blijft in zijn compacte vorm staan en past binnen het scherm.
   ========================================================= */
@media (max-width:900px){
  .zweefscan{display:block}
  .zweefscan__vlak{width:min(17rem,calc(100vw - 2 * clamp(16px,4vw,24px)))}
  .zweefscan,.zweefknop{right:clamp(12px,4vw,20px);
    bottom:calc(clamp(12px,4vw,20px) + env(safe-area-inset-bottom, 0px))}
  .zweefknop .btn{padding-inline:1.1em}

  /* De fade blijft op een telefoon gewoon staan: Karin vindt dat mooier
     dan alles wat er in één keer staat. Beeld is de uitzondering, dat
     komt er meteen op; zie het blok hierboven.                         */
}

/* ---------- EEN LOSSE KLANTREACTIE ----------
   Voor een dienstenpagina waar het hele reviewblok te veel zou worden.
   Off-white vlak op de kadermaat, verder niets.                        */
.uitspraakblok{margin:0;background:var(--offwhite);
  padding:clamp(30px,4vw,72px) clamp(26px,4vw,80px);
  display:grid;justify-items:start;gap:clamp(18px,2vw,26px)}
.uitspraakblok blockquote{margin:0;max-width:52ch;
  font-size:clamp(1.05rem,.7vw + .95rem,1.5rem);line-height:1.45;color:var(--inkt)}
.uitspraakblok blockquote b{font-weight:600;color:var(--bordeaux)}
.uitspraakblok figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6em}
.uitspraakblok__wie{font-weight:600;color:var(--inkt)}
.uitspraakblok__zaak{font-family:var(--label);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;font-size:.72rem;color:var(--inkt-zacht)}

/* =========================================================
   HET PODIUM OP EEN TELEFOON
   Op desktop zweven de vier kaarten om de foto heen. Op een telefoon werkt
   dat niet: ze vallen onder elkaar en het watermerk snijdt er dwars
   doorheen. Daar wordt het een schuifrij met twee pijlen.
   ========================================================= */
.zweefrij{display:contents}
.zweefrij__bediening{display:none}

@media (max-width:900px){
  .podium{min-height:0;display:block}
  .podium__watermerk{display:none}
  .podium__beeld{width:min(100%,22rem);margin-inline:auto}

  .zweefrij{display:flex;gap:clamp(12px,3vw,18px);
    margin-top:clamp(22px,5vw,32px);
    overflow-x:auto;
    /* width + min-width zijn nodig, niet cosmetisch: zonder die twee groeide deze
       flexcontainer mee met zijn twaalf kaarten (1730px) in plaats van op de breedte
       van .podium (302px) te blijven, en scrollde /over-karin/ op mobiel horizontaal
       mee tot 1774px. Gevonden 2026-09-09; de poorttoets miste het omdat die op
       1440px draait en de rij daar geen carrousel is. */
    width:100%;min-width:0;
    /* geen scroll-snap: de rij loopt eindeloos door en de sprong terug
       naar het midden vecht met een verplichte snappositie             */
    scrollbar-width:none;-ms-overflow-style:none;padding-inline:0}
  .zweefrij::-webkit-scrollbar{display:none}
  .zweefrij .zweef{position:static;flex:0 0 min(78%,20rem);width:auto;transform:none;
    background:var(--offwhite);padding:clamp(18px,4.5vw,24px);
    display:flex;flex-direction:column;gap:.5em}
  .zweefrij .zweef__label{max-width:none}

  .zweefrij__bediening{display:flex;gap:10px;
    margin-top:clamp(16px,4vw,22px);justify-content:flex-end}
  /* .rond is gemaakt voor een donkere ondergrond; hier staat hij op crème */
  .zweefrij__bediening .rond{border-color:var(--lijn);color:var(--bordeaux)}
  .zweefrij__bediening .rond:hover{background:rgba(83,14,17,.06);border-color:var(--bordeaux)}
}

/* ---------- DE UITKOMST OP EEN CASETEGEL, MOBIEL ----------
   De tegel is op een telefoon lager dan breed. De uitkomst linksonder en
   de knop rechtsonder kruisten elkaar daardoor. De uitkomst staat nu
   direct onder de naam.                                                */
@media (max-width:900px){
  .case__uitkomst{top:calc(clamp(14px,1.4vw,20px) + 1.5em);bottom:auto;
    max-width:calc(100% - clamp(70px,16vw,110px))}
}

/* ---------- DE HERO VAN EEN DIENSTENPAGINA ----------
   TRANSFORMATIE. is één lang woord dat niet kan afbreken. Naast twee
   knoppen liep het daardoor over de knop heen. Kop boven, knoppen
   eronder: dan kan er niets meer botsen, op welke breedte dan ook.   */
.hero--plan .hero__inhoud,
.hero--stapel .hero__inhoud{grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2vw,26px);align-items:start}
.hero--plan .hero__rechts{padding-bottom:0}

/* ---------- WAAR WIL JE HET OVER HEBBEN ----------
   Aanvinkvakjes in het contactformulier, zodat iemand meteen kan zeggen
   waar het over gaat. Strakke hoeken, geen afronding: het vinkje is een
   vierkant in bordeaux, in dezelfde lijn als de rest van het formulier.
   Het echte selectievakje blijft staan (bereikbaar met het toetsenbord),
   het is alleen visueel vervangen.                                     */
.keuze{border:0;padding:0;margin:0;min-width:0}
.keuze legend{padding:0;margin-bottom:.9em;
  font-family:var(--label);font-weight:500;
  font-size:clamp(10.5px,.22vw + 10px,12px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--inkt-zacht)}
.keuze__rij{display:flex;flex-wrap:wrap;gap:.7em clamp(16px,2vw,28px)}
.keuze__optie{display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
  font-size:.98rem;color:var(--inkt)}
.keuze__optie input{position:absolute;opacity:0;width:0;height:0}
.keuze__optie span{position:relative;padding-left:1.7em;line-height:1.3}
.keuze__optie span::before{content:"";position:absolute;left:0;top:.06em;
  width:1.05em;height:1.05em;border:1px solid rgba(56,19,21,.4);
  background:transparent;transition:border-color var(--snel) var(--soepel),
             background var(--snel) var(--soepel)}
.keuze__optie span::after{content:"";position:absolute;left:.3em;top:.3em;
  width:.45em;height:.45em;background:var(--bordeaux);
  opacity:0;transition:opacity var(--snel) var(--soepel)}
.keuze__optie:hover span::before{border-color:var(--bordeaux)}
.keuze__optie input:checked + span::before{border-color:var(--bordeaux)}
.keuze__optie input:checked + span::after{opacity:1}
.keuze__optie input:focus-visible + span::before{outline:2px solid var(--bordeaux);
  outline-offset:2px}

/* ---------- DE OPENING OP EEN TELEFOON ----------
   Karin vond hem daar nog druk. Het beeld wordt dieper weggedrukt, zodat
   de tekst op een rustige donkere ondergrond staat in plaats van op een
   foto vol details, en het kader is hoger zodat kop, tekst en knoppen
   lucht om zich heen krijgen. De foto blijft herkenbaar, hij treedt
   alleen terug. Alleen de opening van home; de andere hero's staan al
   goedgekeurd.                                                          */
@media (max-width:900px){
  .hero--stapel .hero__media{aspect-ratio:4 / 7}
  .hero--stapel .hero__toon{background:rgba(22,5,7,.5)}
  .hero--stapel .hero__gloed{height:92%;
    background:linear-gradient(to top,
      rgba(40,7,9,.97) 0%,
      rgba(48,8,10,.9) 28%,
      rgba(70,12,15,.6) 58%,
      rgba(83,14,17,0) 100%)}
  .hero--stapel .hero__inhoud{gap:clamp(16px,3.6vw,22px);
    padding-bottom:clamp(34px,8vw,50px)}
  .hero--stapel .hero__lead{max-width:34ch}
}

/* ---------- DE KOP VAN DE OPENING OP EEN TELEFOON ----------
   Elk woord zit normaal in een eigen masker, en zo'n masker is een
   inline-block. Een blok dat niet meer op de regel past schuift in zijn
   geheel naar de volgende regel, en daardoor bleef DE alleen achter op
   regel één: SOCIALMEDIA-PARTNER paste er niet meer naast en werd pas
   op de volgende regel afgebroken.

   Op een telefoon laten we die maskers daarom los voor de herokop. De
   tekst loopt dan als gewone tekst, breekt netjes af op het zachte
   afbreekstreepje in het woord, en de kop komt op met een fade in plaats
   van woord voor woord. Dat past ook beter bij de rustigere opening.   */
@media (max-width:700px){
  .hero--stapel .hero__title .woord{display:inline;clip-path:none}
  html.beweegt .hero--stapel .hero__title .woord > span{display:inline;
    transform:none;opacity:0;transition:opacity .8s cubic-bezier(.19,1,.22,1)}
  html.beweegt .hero--stapel .hero__title.is-onthuld .woord > span{opacity:1}
}