@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-italic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-italic-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-italic-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/instrument-sans-italic-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/instrument-sans-italic-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/instrument-sans-normal-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/instrument-sans-normal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-normal-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-normal-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/instrument-sans-normal-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/instrument-sans-normal-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  /* Veyra-merkkleuren (gelijk aan resources/js/site/assets/css/_config.css):
     paars = merk en hoofdactie, brons = de menselijke accenten, groen = bevestigd. */
  --navy:#241528; --navy-d:#180e1b; --navy-l:#3c2343;
  --blue:#8b5296; --blue-d:#6b3f73; --blue-50:#f7f1f8;
  --yellow:#b8895a; --yellow-50:#f7efe7;
  --green:#2e7d5b; --green-50:#e9f3ee;
  --ink:#241528; --muted:#6b6370; --line:#e8e1e6; --paper:#fbf8f7;
  --disp:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:0.875rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:clamp(16px, calc(16px + (100vw - 1500px) * 0.0055), 22px);-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* clip i.p.v. hidden: houdt de zijwaartse schuifbalk weg zonder position:sticky te slopen.
     Nodig omdat reveal-elementen (van-rechts) vóór hun animatie net buiten beeld staan. */
  overflow-x:clip}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body);font-size:1.09375rem;line-height:1.62;color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
.wrap{max-width:71.25rem;margin:0 auto;padding:0 1.625rem}
.narrow{max-width:55rem;margin:0 auto}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:700;line-height:1.1;letter-spacing:-.032em}
h1{font-size:clamp(2.25rem,5.6vw,3.875rem)}
h2{font-size:clamp(1.75rem,4vw,2.875rem)}
h3{font-size:clamp(1.1875rem,2vw,1.5rem);letter-spacing:-.022em;font-weight:700}
.lead{font-size:clamp(1.0625rem,1.55vw,1.25rem);color:var(--muted);line-height:1.55}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5625rem;background:var(--blue);color:#fff;
  font-family:var(--body);font-weight:700;font-size:1.03125rem;padding:1rem 1.6875rem;border-radius:0.75rem;border:0;
  cursor:pointer;transition:background .2s,transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .24s;
  box-shadow:0 0.375rem 1.25rem rgba(153,72,167,.24)}
.btn:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 0.625rem 1.75rem rgba(153,72,167,.34)}
.btn .arw{transition:transform .24s cubic-bezier(.2,.7,.3,1)}
.btn:hover .arw{transform:translateX(0.25rem)}
.btn-o{background:#fff;color:var(--ink);border:1.6px solid var(--line);box-shadow:none}
.btn-o:hover{background:var(--paper);border-color:var(--blue);color:var(--blue)}
.btn-y{background:var(--yellow);color:var(--navy);box-shadow:0 0.375rem 1.25rem rgba(194,143,104,.3)}
.btn-y:hover{background:#b97f52;box-shadow:0 0.625rem 1.75rem rgba(194,143,104,.4)}
.tel{display:inline-flex;align-items:center;gap:0.5rem;font-weight:700;font-size:1.03125rem;transition:color .2s}
.tel:hover{color:var(--blue)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:120;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(0.875rem);transition:box-shadow .3s,border-color .3s;
  border-bottom:1px solid transparent}
header.stuck{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;gap:1.875rem;padding:1rem 0;transition:padding .3s}
header.stuck .nav{padding:0.6875rem 0}
.logo{display:flex;align-items:center;gap:0.5625rem;font-family:var(--disp);font-weight:700;font-size:1.21875rem;
  letter-spacing:-.04em}
.logo i{width:0.625rem;height:0.625rem;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 0 3.5px rgba(194,143,104,.24);flex-shrink:0}
.nlinks{display:flex;gap:1.6875rem;margin-left:auto;font-size:0.96875rem;font-weight:600;color:var(--muted)}
.nlinks a{position:relative;transition:color .2s}
.nlinks a:hover{color:var(--ink)}
.nlinks a::after{content:"";position:absolute;left:0;bottom:-0.375rem;width:100%;height:2px;background:var(--yellow);
  transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.nlinks a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-r{display:flex;align-items:center;gap:1rem}
.nav-r .btn{padding:0.75rem 1.25rem;font-size:0.9375rem}

/* ---------- hero, tekst links ---------- */
.hero{padding:5rem 0 6rem;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-17.5rem;right:-12.5rem;width:52.5rem;height:52.5rem;
  border-radius:50%;background:radial-gradient(circle,rgba(153,72,167,.11),transparent 64%);
  pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-21.25rem;left:-15rem;width:41.25rem;height:41.25rem;
  border-radius:50%;background:radial-gradient(circle,rgba(194,143,104,.11),transparent 66%);
  pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.25rem,5vw,4.25rem);align-items:center}
.hero h1{margin:1.375rem 0 0;max-width:38.75rem}
.hero h1 .u{white-space:nowrap}
.hero .lead{margin:1.5rem 0 0;max-width:30.625rem}
.hcta{display:flex;gap:0.9375rem;align-items:center;flex-wrap:wrap;margin-top:2rem}
.hsub{margin-top:1.75rem;display:flex;gap:1.375rem;flex-wrap:wrap;font-size:0.9375rem;color:var(--muted)}
.hsub i{display:inline-flex;align-items:center;gap:0.4375rem;font-style:normal}
.hsub svg{color:var(--green)}

/* drie overlappende video's */
/* ---------- hero-mockup: het app-venster met binnenkomende meldingen ----------
   In plaats van drie telefoons naast elkaar: één scherm waarin de agenda staat,
   met de telefoon ervoor en de berichten die Veyra vanzelf verstuurt. De kaarten
   komen na elkaar binnen - dat vertelt het verhaal ("dit gebeurt terwijl jij
   knipt") beter dan een stilstaande foto. Alles is CSS; er draait geen JS voor.  */
.mock{position:relative;height:clamp(24rem,42vw,31rem);display:flex;align-items:center;justify-content:flex-start;
  perspective:1400px}

/* zachte paarse gloed die langzaam ademt, ver achter alles */
.mock-gloed{position:absolute;inset:-12% -4% -18% -4%;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(60% 55% at 55% 45%,rgba(139,82,150,.20),transparent 70%);
  filter:blur(6px);animation:mock-adem 9s ease-in-out infinite alternate}

/* het browservenster */
.mock-scherm{position:relative;z-index:2;width:min(102%,30.5rem);border-radius:1.1rem;overflow:hidden;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 2.2rem 4.6rem rgba(36,21,40,.20), 0 .4rem 1.2rem rgba(36,21,40,.06);
  transform:translateY(var(--py,0px)) rotateY(calc(-7deg + var(--ry,0deg))) rotateX(calc(3deg + var(--rx,0deg))) scale(.97);
  transform-origin:60% 50%;
  transition:transform .6s cubic-bezier(.2,.7,.3,1),box-shadow .6s}
.mock.in .mock-scherm{animation:mock-rechtop 1.1s cubic-bezier(.2,.8,.25,1) .1s both}
.mock:hover .mock-scherm{transform:translateY(var(--py,0px)) rotateY(calc(-7deg + var(--ry,0deg))) rotateX(calc(3deg + var(--rx,0deg))) scale(1);
  box-shadow:0 2.8rem 5.4rem rgba(36,21,40,.26)}
.mock-scherm img{display:block;width:100%;height:auto}

/* de browserbalk erboven: drie bolletjes en het adres */
.mock-balk{display:flex;align-items:center;gap:.4rem;padding:.6rem .85rem;background:var(--paper);
  border-bottom:1px solid var(--line)}
.mock-balk span{width:.5rem;height:.5rem;border-radius:50%;background:var(--line-2,#ddd6dc);flex:none}
.mock-balk span:first-child{background:#e0b3b3}
.mock-balk span:nth-child(2){background:#e3d3ac}
.mock-balk span:nth-child(3){background:#b6d3c2}
.mock-balk i{margin-left:.55rem;font-style:normal;font-size:.68rem;font-weight:600;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:.4rem;padding:.16rem .55rem}

/* de telefoon die er half voor staat */
.mock-fon{position:absolute;z-index:3;left:-6%;bottom:-7%;top:auto;width:clamp(6rem,10vw,8rem);
  /* De afbeelding is al een telefoon mét rand: geen tweede kader eromheen, en een
     schaduw die de vorm volgt in plaats van een rechthoek. */
  filter:drop-shadow(0 1.1rem 2.2rem rgba(36,21,40,.30));
  transform:translateY(var(--py,0px))}
.mock.in .mock-fon{animation:mock-omhoog 1s cubic-bezier(.2,.8,.25,1) .45s both}
.mock-fon img{display:block;width:100%;height:auto}

/* de meldingen rechts: komen na elkaar binnen en blijven staan */
.mock-meldingen{position:absolute;z-index:4;right:-14%;top:12%;bottom:auto;width:clamp(11.5rem,18.5vw,13.75rem);
  display:flex;flex-direction:column;gap:.55rem;list-style:none;margin:0;padding:0}
.mm{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);
  border-radius:.85rem;padding:.6rem .7rem;box-shadow:0 .7rem 1.8rem rgba(36,21,40,.12);opacity:0}
.mock.in .mm{animation:mock-binnen .7s cubic-bezier(.2,.8,.3,1) both, mock-zweven 6s ease-in-out infinite}
.mock.in .m1{animation-delay:.55s, 1.3s}
.mock.in .m2{animation-delay:1.15s, 1.9s}
.mock.in .m3{animation-delay:1.75s, 2.5s}
.mock.in .m4{animation-delay:2.35s, 3.1s}
.mm .mm-ico{flex:none;width:1.75rem;height:1.75rem;border-radius:.55rem;display:grid;place-items:center}
.mm .mm-ico svg{display:block;width:.95rem;height:.95rem}
.mm-ico.groen{background:#e9f3ee;color:var(--green)}
.mm-ico.paars{background:var(--blue-50);color:var(--blue)}
.mm-ico.brons{background:var(--yellow-50);color:var(--yellow)}
.mm div b{display:block;font-size:.78rem;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.mm div span{display:block;font-size:.69rem;color:var(--muted);font-weight:600;margin-top:1px;line-height:1.3}

@keyframes mock-rechtop{
  from{opacity:0;transform:translateY(1.4rem) rotateY(-14deg) rotateX(6deg) scale(.93)}
  to{opacity:1;transform:translateY(var(--py,0px)) rotateY(calc(-7deg + var(--ry,0deg))) rotateX(calc(3deg + var(--rx,0deg))) scale(.97)}
}
@keyframes mock-omhoog{
  from{opacity:0;transform:translateY(1.8rem) scale(.94)}
  to{opacity:1;transform:translateY(var(--py,0px)) scale(1)}
}
@keyframes mock-binnen{
  from{opacity:0;transform:translateX(1.6rem) scale(.96)}
  to{opacity:1;transform:none}
}
/* nauwelijks zichtbaar, maar het houdt het beeld levend */
@keyframes mock-zweven{0%,100%{transform:translateY(0)}50%{transform:translateY(-.28rem)}}
@keyframes mock-adem{from{opacity:.75;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}

/* Tweede plek waar de mockup staat (websitebouwer): daar hoort het venster
   recht te staan - het is geen blikvanger maar een voorbeeld dat je bekijkt. */
.mock.plat{height:clamp(20rem,32vw,25rem);justify-content:center;perspective:none}
.mock.plat .mock-scherm{width:min(100%,33rem);transform:translateY(var(--py,0px))}
.mock.plat.in .mock-scherm{animation:mock-recht 1s cubic-bezier(.2,.8,.25,1) .1s both}
.mock.plat:hover .mock-scherm{transform:translateY(var(--py,0px)) scale(1.012)}
.mock.plat .mock-meldingen{right:-6%;top:auto;bottom:6%;width:clamp(11rem,17vw,13rem)}
.mock.plat .mock-fon{left:-4%;bottom:-12%}

/* Deze telefoonafbeelding is een kaal schermbeeld: die krijgt hier wél een rand. */
.mock-fon.kader{border:.3rem solid #241528;border-radius:1.15rem;overflow:hidden;background:#fff;
  filter:none;box-shadow:0 1.2rem 2.4rem rgba(36,21,40,.26)}
@media(max-width:960px){
  .mock.plat{height:auto;padding:.5rem 0 3rem}
  .mock.plat .mock-meldingen{right:auto;left:34%;bottom:-.5rem;width:min(16rem,58%)}
  .mock.plat .mock-fon{left:0;bottom:-1.5rem;width:5.5rem}
}
@media(max-width:560px){
  .mock.plat .mock-fon{display:none}
  .mock.plat .mock-meldingen{left:50%;transform:translateX(-50%);width:min(19rem,88%)}
}

/* Tussen 961 en 1150px is er rechts geen ruimte om buiten de kolom te steken:
   dan zou de pagina horizontaal gaan schuiven. De kaarten blijven daar binnen. */
@media(min-width:961px) and (max-width:1150px){
  .mock-scherm{width:min(100%,26rem)}
  .mock-meldingen{right:-2%;top:20%;width:clamp(10.5rem,19vw,11.75rem)}
  /* Vier kaarten over een smaller venster is meer bedekking dan beeld. */
  .mock .m4{display:none}
  .mock-fon{width:5.5rem}
}

/* Tablet: de kolommen vallen onder elkaar, dus het venster mag recht staan en
   de meldingen schuiven naar binnen zodat ze niet buiten beeld vallen. */
@media(max-width:960px){
  .mock{height:auto;padding:.5rem 0 2.5rem;perspective:none;max-width:34rem;margin-inline:auto}
  .mock-scherm,.mock:hover .mock-scherm{transform:translateY(var(--py,0px));width:min(100%,30rem)}
  .mock.in .mock-scherm{animation:mock-recht 1s cubic-bezier(.2,.8,.25,1) .1s both}
  /* De kaarten horen bij het scherm, niet ergens rechts in het niets: laat ze
     over de onderrand van het venster vallen. */
  .mock-meldingen{right:auto;left:36%;top:auto;bottom:-1rem;width:min(17rem,60%)}
  .mock-fon{left:1%;bottom:-1.5rem;top:auto;width:6rem}
}
@media(max-width:560px){
  .mock{padding-bottom:4.5rem}
  /* Vier kaarten op een telefoon dekken het scherm af; twee vertellen het al. */
  .mock-meldingen{right:auto;left:50%;transform:translateX(-50%);bottom:-2rem;width:min(19rem,88%)}
  .mock .m3,.mock .m4{display:none}
  .mock-fon{display:none}
}
@keyframes mock-recht{
  from{opacity:0;transform:translateY(1.2rem) scale(.96)}
  to{opacity:1;transform:translateY(var(--py,0px)) scale(1)}
}

/* Wie liever geen beweging ziet, krijgt het beeld gewoon stil - alles zichtbaar,
   niets dat schuift. */
@media(prefers-reduced-motion:reduce){
  .mock-gloed,.mock.in .mock-scherm,.mock.in .mock-fon,.mock.in .mm{animation:none}
  .mock .mm{opacity:1}
  .mock-scherm,.mock:hover .mock-scherm{transition:none}
}
/* ---------- vertrouwensbalk ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);
  margin-top:3.75rem}
.trust-in{display:flex;justify-content:space-between;gap:1.25rem;padding:1.625rem 0;flex-wrap:wrap}
.tw{display:flex;align-items:center;gap:0.8125rem;min-width:11.25rem}
.tw .ic{width:2.5rem;height:2.5rem;border-radius:0.6875rem;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--blue);flex-shrink:0}
.tw b{display:block;font-family:var(--disp);font-size:1.1875rem;letter-spacing:-.03em;line-height:1.1}
.tw span{font-size:0.84375rem;color:var(--muted)}

/* ---------- secties ---------- */
.sec{padding:clamp(4.625rem,8.4vw,7.25rem) 0}
.shead{max-width:41.25rem;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.shead.mid{margin-left:auto;margin-right:auto;text-align:center}
.shead h2{margin-top:1.125rem}
.shead .lead{margin-top:1.125rem}

/* ---------- afwisselende rijen ---------- */
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.25rem,5vw,4.5rem);align-items:center;
  padding:clamp(2.5rem,5vw,4rem) 0}
.row + .row{border-top:1px solid var(--line)}
.row.flip .txt{order:2}
.row h3{margin:1rem 0 0.75rem}
.row p{color:var(--muted)}
.rlist{list-style:none;margin-top:1.25rem}
.rlist li{display:flex;gap:0.6875rem;align-items:flex-start;margin-bottom:0.6875rem;font-size:1rem}
.rlist .ck{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--green-50);color:var(--green);
  display:grid;place-items:center;flex-shrink:0;margin-top:2px;font-size:0.6875rem;font-weight:700}
.vis{border-radius:1.125rem;overflow:hidden;position:relative;aspect-ratio:4/3;
  background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;padding:1.625rem}
.vis.navy{background:linear-gradient(160deg,var(--navy-l),var(--navy-d));border:0}
.vis.yel{background:var(--yellow-50);border-color:#e7d4c5}
.mini{display:flex;gap:0.6875rem}
.mini .m{width:4.625rem;aspect-ratio:9/16;border-radius:0.6875rem;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14)}
.mini .m:nth-child(2){transform:translateY(-0.875rem)}
.docs{width:100%;max-width:18.75rem}
.doc{background:#fff;border:1px solid var(--line);border-radius:0.6875rem;padding:0.875rem 1rem;margin-bottom:0.6875rem;
  box-shadow:0 3px 0.75rem rgba(65,31,71,.05);transform:translateX(0);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.doc:hover{transform:translateX(0.375rem)}
.doc b{display:block;font-size:0.90625rem;font-family:var(--disp);letter-spacing:-.02em}
.doc span{font-size:0.78125rem;color:var(--muted)}
.doc .tag{display:inline-block;font-size:0.6875rem;font-weight:700;padding:2px 0.5rem;border-radius:0.3125rem;
  background:var(--green-50);color:var(--green);margin-top:0.4375rem}
.calbox{width:100%;max-width:20rem;background:#fff;border:1px solid var(--line);border-radius:0.875rem;
  padding:1.125rem;box-shadow:0 0.5rem 1.625rem rgba(65,31,71,.07)}
.calbox .hd{display:flex;justify-content:space-between;font-size:0.8125rem;color:var(--muted);
  font-weight:700;margin-bottom:0.75rem}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:0.3125rem}
.cal i{aspect-ratio:1;border-radius:0.375rem;background:var(--paper);font-style:normal;font-size:0.6875rem;
  display:grid;place-items:center;color:var(--muted)}
.cal i.on{background:var(--blue);color:#fff;font-weight:700}
.cal i.dot{background:var(--yellow-50);color:#724c2e;font-weight:700}

/* ---------- verticale tijdlijn ---------- */
.tl{background:var(--navy);color:#fff}
.tl h2,.tl h3{color:#fff}
.tl .lead{color:rgba(255,255,255,.66)}
.steps{max-width:47.5rem;margin:0 auto;position:relative;padding-left:4.125rem}
.steps::before{content:"";position:absolute;left:1.4375rem;top:0.75rem;bottom:0.75rem;width:2px;
  background:rgba(255,255,255,.15)}
.steps .fill{position:absolute;left:1.4375rem;top:0.75rem;width:2px;height:0;background:var(--yellow);
  transition:height 1.1s cubic-bezier(.3,.85,.3,1)}
.stp{position:relative;padding:1.625rem 0}
.stp .n{position:absolute;left:-4.125rem;top:1.375rem;width:3rem;height:3rem;border-radius:50%;
  background:var(--navy);border:2px solid rgba(255,255,255,.22);display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:1.0625rem;z-index:2;
  transition:background .45s,border-color .45s,color .45s,transform .45s cubic-bezier(.2,.7,.3,1)}
.stp.on .n{background:var(--yellow);border-color:var(--yellow);color:var(--navy);transform:scale(1.07)}
.stp p{color:rgba(255,255,255,.66);margin-top:0.4375rem;max-width:32.5rem}
.stp .who{display:inline-block;margin-top:0.75rem;font-size:0.8125rem;font-weight:700;padding:0.25rem 0.6875rem;
  border-radius:0.4375rem;background:rgba(255,255,255,.09);color:rgba(255,255,255,.8)}

/* ---------- werk ---------- */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.125rem}
.wtile{border-radius:1.125rem;overflow:hidden;position:relative;aspect-ratio:9/13;
  background:linear-gradient(165deg,var(--navy-l),var(--navy-d));cursor:pointer;
  transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s}
.wtile:hover{transform:translateY(-0.4375rem);box-shadow:0 1.375rem 3.125rem rgba(65,31,71,.24)}
.wtile.tall{aspect-ratio:9/16;grid-row:span 1}
.wtile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(26,12,28,.8))}
.wtile s{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3rem;height:3rem;
  border-radius:50%;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.3);
  display:grid;place-items:center;z-index:2;transition:transform .34s cubic-bezier(.2,.7,.3,1)}
.wtile:hover s{transform:translate(-50%,-50%) scale(1.15)}
.wtile .mt{position:absolute;left:1.0625rem;right:1.0625rem;bottom:0.9375rem;z-index:2;color:#fff}
.wtile .mt b{display:block;font-family:var(--disp);font-size:1rem;letter-spacing:-.02em}
.wtile .mt span{font-size:0.78125rem;color:var(--yellow);font-weight:700}

/* ---------- resultaatband ---------- */
.band{background:var(--navy);color:#fff;padding:clamp(4.375rem,8vw,6.5rem) 0}
.band-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.band h2{color:#fff}
.band .q{font-size:clamp(1.1875rem,2.1vw,1.5625rem);line-height:1.45;font-weight:600;margin:1.375rem 0 1.625rem;
  color:rgba(255,255,255,.9)}
.band .who{display:flex;align-items:center;gap:0.8125rem}
.band .who .av{width:2.875rem;height:2.875rem;border-radius:50%;background:var(--navy-l);flex-shrink:0}
.band .who b{display:block;font-size:0.9375rem}
.band .who span{font-size:0.84375rem;color:rgba(255,255,255,.6)}
.kpis{display:grid;gap:1.375rem}
.kpi{border-left:3px solid var(--yellow);padding-left:1.25rem}
.kpi b{font-family:var(--disp);font-size:clamp(1.875rem,4vw,2.625rem);letter-spacing:-.04em;display:block;
  line-height:1;font-variant-numeric:tabular-nums}
.kpi span{font-size:0.90625rem;color:rgba(255,255,255,.62)}

/* ---------- prijzen ---------- */
.prz{background:var(--paper)}
.tog{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:6.1875rem;padding:0.3125rem;
  position:relative;box-shadow:0 3px 0.875rem rgba(65,31,71,.05);margin-bottom:2.625rem}
.tog button{border:0;background:none;font-family:var(--body);font-size:0.96875rem;font-weight:700;
  color:var(--muted);padding:0.6875rem 1.5rem;border-radius:6.1875rem;cursor:pointer;position:relative;z-index:2;
  transition:color .28s}
.tog button.on{color:#fff}
.tog .pil{position:absolute;top:0.3125rem;left:0.3125rem;height:calc(100% - 0.625rem);background:var(--blue);
  border-radius:6.1875rem;transition:transform .36s cubic-bezier(.3,.85,.3,1),width .36s cubic-bezier(.3,.85,.3,1)}
.save{background:var(--green-50);color:var(--green);font-size:0.71875rem;font-weight:700;padding:2px 0.5rem;
  border-radius:0.375rem;margin-left:0.4375rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:1.25rem;padding:2rem 1.75rem;position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.card:hover{transform:translateY(-0.3125rem);box-shadow:0 1.25rem 3.125rem rgba(65,31,71,.1)}
.card.best{border:2px solid var(--blue);box-shadow:0 1rem 2.75rem rgba(153,72,167,.14)}
.card.best::before{content:"Meest gekozen";position:absolute;top:-0.8125rem;left:1.625rem;background:var(--blue);
  color:#fff;font-size:0.6875rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:0.3125rem 0.75rem;border-radius:0.4375rem}
.card .nm{font-size:0.84375rem;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.card .vd{font-family:var(--disp);font-size:2.25rem;letter-spacing:-.045em;margin:0.75rem 0 0;line-height:1}
.card .vd small{display:block;font-family:var(--body);font-size:0.875rem;font-weight:600;color:var(--muted);
  letter-spacing:0;margin-top:0.375rem}
.card .pr{font-family:var(--disp);font-size:1.5rem;color:var(--blue);margin:1.25rem 0 2px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.card .pr em{font-family:var(--body);font-size:0.84375rem;font-weight:600;color:var(--muted);font-style:normal;
  letter-spacing:0;margin-left:0.375rem}
.card .was{font-size:0.84375rem;color:var(--muted);text-decoration:line-through;min-height:1.25rem}
.card ul{list-style:none;margin:1.375rem 0 1.625rem;border-top:1px solid var(--line);padding-top:1.25rem}
.card li{display:flex;gap:0.6875rem;align-items:flex-start;font-size:0.96875rem;margin-bottom:0.8125rem}
.card li:last-child{margin-bottom:0}
.ck{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--green-50);color:var(--green);
  display:grid;place-items:center;flex-shrink:0;margin-top:2px;font-size:0.6875rem;font-weight:700}
.card .btn{width:100%}
.morebtn{display:block;margin:2.125rem auto 0;background:none;border:0;font:inherit;font-weight:700;
  font-size:0.96875rem;color:var(--blue);cursor:pointer;display:flex;align-items:center;gap:0.5rem}
.morebtn svg{transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.morebtn.open svg{transform:rotate(180deg)}
.vergelijk{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.3,.85,.3,1)}
.vtab{width:100%;border-collapse:separate;border-spacing:0;margin-top:1.75rem;background:#fff;
  border:1px solid var(--line);border-radius:1rem;overflow:hidden;font-size:0.96875rem}
.vtab th,.vtab td{padding:0.9375rem 1.125rem;border-bottom:1px solid var(--line);text-align:center}
.vtab th:first-child,.vtab td:first-child{text-align:left;font-weight:600}
.vtab thead th{background:var(--paper);font-size:0.8125rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.vtab tr:last-child td{border-bottom:0}
.dash-{color:var(--line)}

/* ---------- dashboard ---------- */
.dgrid{display:grid;grid-template-columns:.88fr 1.12fr;gap:3.5rem;align-items:center}
.scr{background:#fff;border-radius:1.125rem;border:1px solid var(--line);overflow:hidden;
  box-shadow:0 1.375rem 3.5rem rgba(65,31,71,.1)}
.scr .bar{display:flex;align-items:center;gap:0.4375rem;padding:0.875rem 1.125rem;border-bottom:1px solid var(--line)}
.scr .bar i{width:0.625rem;height:0.625rem;border-radius:50%;background:var(--line)}
.scr .bar b{margin-left:0.5625rem;font-size:0.78125rem;color:var(--muted)}
.scr .bd{padding:0.375rem 1.25rem 1rem}
.rw{display:flex;align-items:center;gap:0.8125rem;padding:0.8125rem 0;border-bottom:1px solid #f7f3f8}
.rw:last-child{border:0}
.rw .s{width:0.5625rem;height:0.5625rem;border-radius:50%;flex-shrink:0}
.s.g{background:var(--green)}.s.y{background:var(--yellow)}.s.b{background:var(--blue)}
.rw .t{flex:1;font-size:0.9375rem;font-weight:600}
.rw .v{font-size:0.84375rem;color:var(--muted)}

/* ---------- over ons ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.foto{aspect-ratio:4/5;border-radius:1rem;background:linear-gradient(160deg,var(--navy-l),var(--navy-d));
  display:flex;align-items:flex-end;padding:1.25rem;color:#fff;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.foto:hover{transform:translateY(-0.375rem)}
.foto b{font-family:var(--disp);font-size:1.0625rem;letter-spacing:-.025em}
.foto span{display:block;font-size:0.78125rem;color:rgba(255,255,255,.58)}

/* ---------- faq ---------- */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem 2.5rem;align-items:start}
.q{border:1px solid var(--line);border-radius:0.875rem;background:#fff;overflow:hidden;transition:border-color .25s}
.q.open{border-color:var(--blue)}
.q button{width:100%;background:none;border:0;font-family:var(--disp);font-size:1.0625rem;font-weight:700;
  letter-spacing:-.02em;text-align:left;padding:1.25rem 3rem 1.25rem 1.25rem;cursor:pointer;color:var(--ink);
  position:relative;transition:color .2s}
.q button:hover{color:var(--blue)}
.q .pm{position:absolute;right:1.125rem;top:50%;transform:translateY(-50%);width:1.5625rem;height:1.5625rem;
  border-radius:50%;background:var(--blue-50);color:var(--blue);display:grid;place-items:center;
  transition:transform .34s cubic-bezier(.2,.7,.3,1),background .3s,color .3s}
.q.open .pm{transform:translateY(-50%) rotate(135deg);background:var(--blue);color:#fff}
.q .a{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.3,.85,.3,1)}
.q .a p{padding:0 1.25rem 1.25rem;color:var(--muted);font-size:1rem}

/* ---------- slot ---------- */
.slot{background:var(--navy);color:#fff;text-align:center;padding:clamp(5.125rem,10vw,7.75rem) 0;
  position:relative;overflow:hidden}
.slot::before{content:"";position:absolute;width:50rem;height:50rem;border-radius:50%;
  background:radial-gradient(circle,rgba(153,72,167,.3),transparent 64%);top:-21.875rem;left:50%;
  transform:translateX(-50%);pointer-events:none}
.slot .wrap{position:relative;z-index:2}
.slot h2{color:#fff;max-width:42.5rem;margin:1.125rem auto 1rem}
.slot .lead{color:rgba(255,255,255,.68);max-width:32.5rem;margin:0 auto 2.125rem}
.scta{display:flex;gap:1.125rem;justify-content:center;align-items:center;flex-wrap:wrap}
.slot .tel{color:#fff}.slot .tel:hover{color:var(--yellow)}
footer{background:var(--navy-d);color:rgba(255,255,255,.58);padding:2.625rem 0;font-size:0.90625rem}
.foot{display:flex;justify-content:space-between;gap:1.375rem;flex-wrap:wrap;align-items:center}
.foot a:hover{color:#fff}

/* ---------- animatie ---------- */
.rv{opacity:0;transform:translateY(1.625rem);
  transition:opacity .78s cubic-bezier(.2,.7,.3,1),transform .78s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

@media(max-width:960px){
  .row,.dgrid,.band-grid,.hgrid{grid-template-columns:1fr;gap:2.125rem}  .row.flip .txt{order:0}
  .cards,.fgrid{grid-template-columns:1fr}
  .wgrid{grid-template-columns:repeat(2,1fr)}
  .nlinks{display:none}
  .sec{padding:4.125rem 0}
  .steps{padding-left:3.625rem}
  .stp .n{left:-3.625rem;width:2.625rem;height:2.625rem;font-size:0.9375rem}
  .steps::before,.steps .fill{left:1.25rem}
}
@media(max-width:560px){
  .wrap{padding:0 1.125rem}
  .hero{padding:2.75rem 0 4rem}  .wgrid{grid-template-columns:1fr}
  .hsub{gap:0.75rem;flex-direction:column;align-items:center}
  .nav-r .tel{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- extra ---------- */
.wtile{display:block}
.nlinks a.act{color:var(--ink)}
.nlinks a.act::after{transform:scaleX(1)}
.teaser-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:2rem}
.teaser-hd .shead{margin-bottom:0}
.meer{display:inline-flex;align-items:center;gap:0.5625rem;font-weight:700;font-size:1rem;color:var(--blue);
  white-space:nowrap}
.meer svg{transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.meer:hover svg{transform:translateX(0.3125rem)}
.phero{padding:4.125rem 0 3.375rem;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;top:-18.75rem;left:50%;transform:translateX(-50%);
  width:62.5rem;height:37.5rem;border-radius:50%;
  background:radial-gradient(ellipse,rgba(153,72,167,.09),transparent 66%);pointer-events:none}
.phero .wrap{position:relative;z-index:2}
.phero h1{max-width:41.25rem;margin:1.25rem 0 0}
.phero .lead{max-width:35rem;margin-top:1.25rem}
.crumb{font-size:0.90625rem;color:var(--muted);font-weight:600;margin-bottom:0.875rem}
.crumb a:hover{color:var(--blue)}
.case{padding:5rem 0;border-top:1px solid var(--line)}
.cgrid{display:grid;grid-template-columns:.92fr 1.08fr;gap:4rem;align-items:center}
.case.flip .cgrid > .cinfo{order:2}
.bran{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.84375rem;font-weight:700;
  color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
.cinfo h2{margin:0.875rem 0 0;font-size:clamp(1.5625rem,3.2vw,2.25rem)}
.cinfo p{color:var(--muted);margin-top:1rem}
.cinfo p b{color:var(--ink);font-weight:700}
.ckpi{display:flex;gap:1.875rem;flex-wrap:wrap;margin-top:1.625rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.ckpi > div b{display:block;font-family:var(--disp);font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.04em;
  line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.ckpi > div span{font-size:0.84375rem;color:var(--muted)}
.quote{margin-top:1.625rem;padding:1.25rem 1.375rem;background:var(--blue-50);border-radius:0.875rem;
  border-left:3px solid var(--blue);font-size:1.03125rem;line-height:1.55}
.quote em{display:block;font-style:normal;font-size:0.84375rem;color:var(--muted);font-weight:600;margin-top:0.625rem}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0.875rem}
.trio .wtile{aspect-ratio:9/16}
.trio .wtile:nth-child(2){transform:translateY(-1.375rem)}
.trio .wtile:nth-child(2):hover{transform:translateY(-1.875rem)}
.trio .wtile:nth-child(3){transform:translateY(-0.6875rem)}
.trio .wtile:nth-child(3):hover{transform:translateY(-1.1875rem)}
.chips{display:flex;gap:0.5625rem;flex-wrap:wrap;margin-bottom:1.75rem}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:6.1875rem;padding:0.5625rem 1.125rem;
  font:inherit;font-size:0.90625rem;font-weight:700;color:var(--muted);cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.wtile.hide{display:none}
@media(max-width:960px){
  .cgrid{grid-template-columns:1fr;gap:2.125rem}
  .case.flip .cgrid > .cinfo{order:0}
  .phero{padding:2.75rem 0 2.5rem}
}
@media(max-width:560px){
  .trio{gap:0.5625rem}
  .trio .wtile:nth-child(2),.trio .wtile:nth-child(3){transform:none}
}

/* =========================================================
   AANVULLINGEN
   ========================================================= */

/* ---------- bewijs: donkerblauw, compact, met twee foto's ---------- */
.bewijs{background:var(--navy);color:#fff;position:relative;overflow:hidden;
  padding:clamp(3rem,5vw,4.6rem) 0}
.bewijs::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 12% 0,rgba(153,72,167,.32),transparent 58%)}
.bewijs .wrap{position:relative;z-index:2}
.bewijs h2{color:#fff}
.bewijs .lead{color:rgba(255,255,255,.68)}
.bw{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.2rem,4.5vw,4.2rem);align-items:center}
.bw h2{margin-top:0.9rem}
.bw .lead{margin-top:0.9rem;max-width:46ch}

/* twee overlappende foto's */
.fotoduo{position:relative;width:100%;aspect-ratio:1/0.8}
.fto{position:absolute;border-radius:1rem;overflow:hidden;
  background:linear-gradient(158deg,var(--navy-l),#341839);
  box-shadow:0 1.2rem 2.8rem rgba(18,8,20,.42);
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.fto.hor{top:0;left:0;width:82%;aspect-ratio:16/10;z-index:1}
.fto.ver{bottom:0;right:0;width:45%;aspect-ratio:3/4;z-index:2;
  border:0.38rem solid var(--navy)}
.fotoduo:hover .fto.hor{transform:translate(-0.4rem,-0.4rem)}
.fotoduo:hover .fto.ver{transform:translate(0.4rem,0.4rem)}

/* drie cijfers op een rij */
.cijfers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:1.9rem;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16)}
.cf{display:block;position:relative;padding:0 1.3rem;border-top:0}
.cf:first-child{padding-left:0}
.cf:last-child{padding-right:0}
.cf + .cf::before{content:"";position:absolute;left:0;top:0.1rem;bottom:0.1rem;width:1px;
  background:rgba(255,255,255,.16)}
.cf b{display:block;font-family:var(--disp);font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.045em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cf span{display:block;font-size:0.85rem;color:rgba(255,255,255,.6);line-height:1.4;margin-top:0.5rem}

/* ---------- stappen: licht, vier naast elkaar ---------- */
.stapln{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.4rem,2.6vw,2.8rem);margin-top:clamp(2.6rem,4vw,3.6rem)}
.stapln .baan{position:absolute;left:0;right:0;top:1.4rem;height:2px;background:var(--line)}
.stapln .fill{position:absolute;left:0;top:1.4rem;height:2px;width:0;background:var(--navy);
  transition:width 1.1s cubic-bezier(.3,.85,.3,1);z-index:2}
.stapln .stp{position:relative;padding:0;z-index:3}
.stapln .stp .n{position:relative;left:auto;top:auto;width:2.8rem;height:2.8rem;border-radius:50%;
  background:#fff;border:2px solid var(--line);color:var(--muted);display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:0.95rem;
  transition:background .45s,border-color .45s,color .45s}
.stapln .stp.on .n{background:var(--navy);border-color:var(--navy);color:#fff}
.stapln .stp h3{margin-top:1.5rem;color:var(--ink)}
.stapln .stp p{color:var(--muted);font-size:0.97rem;margin-top:0.55rem;line-height:1.55;max-width:26ch}
.stapln .stp .who{display:block;margin-top:1rem;padding:0;border-radius:0;background:none;
  font-size:0.85rem;font-weight:700;color:var(--navy)}

/* ---------- wat we maken ---------- */
.werkrij{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem)}
.werkrij .wtile{aspect-ratio:9/16;border-radius:1.1rem}
.werkrij .wtile:hover{transform:translateY(-0.45rem);box-shadow:0 1.4rem 3rem rgba(65,31,71,.22)}
.srtrij{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.3rem,2.4vw,2.4rem);
  margin-top:clamp(2.4rem,4vw,3.4rem)}
.srt{border-top:2px solid var(--line);padding:1.15rem 0 0;display:block;
  transition:border-color .35s}
.srt:hover{border-color:var(--navy)}
.srt .nr{display:block;width:auto;height:auto;background:none;border-radius:0;
  font-family:var(--disp);font-weight:700;font-size:0.78rem;color:var(--muted);letter-spacing:.09em}
.srt b{display:block;font-family:var(--disp);font-size:1.05rem;letter-spacing:-.022em;margin-top:0.5rem}
.srt p{color:var(--muted);font-size:0.95rem;margin-top:0.4rem;line-height:1.52}
.werk-onder{margin-top:clamp(2.4rem,4vw,3.2rem);display:flex;justify-content:center}

/* ---------- prijzen: rustiger, zonder kleurvlakken ---------- */
.prz{background:#fff}
.cards{align-items:stretch}
.card{padding:2.4rem 2rem 2.1rem;border-radius:1.25rem;border:1px solid var(--line);overflow:visible;
  display:flex;flex-direction:column;box-shadow:0 0.25rem 1.1rem rgba(65,31,71,.04);
  transition:transform .42s cubic-bezier(.2,.7,.3,1),box-shadow .42s,border-color .3s}
.card::after{content:none}
.card:hover{transform:translateY(-0.5rem);border-color:#dfd1e2;
  box-shadow:0 1.2rem 2.8rem rgba(65,31,71,.1)}
.card.best{border:1.5px solid var(--navy);transform:none;
  box-shadow:0 1rem 2.6rem rgba(65,31,71,.12)}
.card.best:hover{transform:translateY(-0.5rem);box-shadow:0 1.6rem 3.4rem rgba(65,31,71,.16)}
.card.best::before{background:var(--navy);letter-spacing:.09em}
.card .nm{font-size:0.78rem;letter-spacing:.11em}
.card .vd{font-size:2.3rem;margin-top:0.85rem}
.card .vd small{margin-top:0.45rem}
.card .pr{color:var(--ink);font-size:1.75rem;margin-top:1.4rem}
.card .pr em{color:var(--muted)}
.card ul{flex:1;margin:1.5rem 0 1.9rem;padding-top:1.5rem}
.card li{font-size:0.97rem;margin-bottom:0.85rem;opacity:0;transform:translateX(-0.4rem);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.card.in li{opacity:1;transform:none}
.card.in li:nth-child(1){transition-delay:.18s}
.card.in li:nth-child(2){transition-delay:.26s}
.card.in li:nth-child(3){transition-delay:.34s}
.card.in li:nth-child(4){transition-delay:.42s}
.card.in li:nth-child(5){transition-delay:.50s}
.card .ck{background:none;color:var(--navy);width:1.05rem;height:1.05rem;font-size:0.82rem;
  margin-top:0.16rem}

/* ---------- wie wij zijn ---------- */
.wij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.2rem,4.5vw,4.5rem);align-items:stretch}
.wij-tekst{align-self:center}
.wij h2{margin-top:1.05rem}
.wij .lead{margin-top:1.05rem;max-width:34ch}
.mensen{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;height:100%}
.pers{position:relative;height:100%;min-height:23rem;border-radius:1.25rem;overflow:hidden;
  background:linear-gradient(160deg,var(--navy-l),var(--navy-d));
  box-shadow:0 1rem 2.6rem rgba(65,31,71,.16);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s}
.pers:hover{transform:translateY(-0.5rem);box-shadow:0 1.8rem 3.6rem rgba(65,31,71,.24)}
.pers .nm{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.2rem 1.2rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(26,12,28,.88))}
.pers .nm b{display:block;font-family:var(--disp);font-size:1.15rem;letter-spacing:-.03em}
.pers .nm span{display:block;font-size:0.85rem;color:rgba(255,255,255,.66);font-weight:600;
  margin-top:0.15rem}

@media(max-width:960px){
  .bw,.wij{grid-template-columns:1fr;gap:2.4rem}
  .stapln,.srtrij{grid-template-columns:1fr 1fr;gap:2rem}
  .stapln .baan,.stapln .fill{display:none}
  .card{padding:2rem 1.6rem 1.8rem}
  .pers{min-height:18rem}
}
@media(max-width:560px){
  .stapln,.srtrij,.werkrij{grid-template-columns:1fr}
  .cijfers{grid-template-columns:1fr}
  .cf{padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.16)}
  .cf:first-child{border-top:0;padding-top:0}
  .cf + .cf::before{display:none}
  .fotoduo{aspect-ratio:1/0.88}
  .mensen{gap:0.8rem}
  .pers{min-height:14rem}
}

/* =========================================================
   PAST OP ELK SCHERM
   Niets mag hoger worden dan een deel van de schermhoogte,
   zodat elke sectie op een laptop én op een monitor past.
   ========================================================= */
.sec{padding:clamp(3.2rem,5.2vw,5rem) 0}
.hero{padding:clamp(2.6rem,4vw,4.4rem) 0 clamp(3rem,5vw,5rem)}
.shead{margin-bottom:clamp(2rem,3.4vw,3rem)}/* foto's in het bewijsblok */
.fotoduo{height:min(23rem,42vh);width:auto;aspect-ratio:1/0.78;margin-inline:auto}

/* video's onder "wat we voor je maken" */
.werkrij{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(0.9rem,1.6vw,1.4rem)}
.werkrij .wtile{flex:0 0 auto;height:min(24rem,44vh);width:auto;aspect-ratio:9/16}

/* portretten bij "wie wij zijn" */
.pers{min-height:min(21rem,38vh)}

/* casespagina */
.trio{display:flex;justify-content:center;gap:clamp(0.7rem,1.2vw,1rem)}
.trio .wtile{flex:0 0 auto;height:min(20rem,36vh);width:auto;aspect-ratio:9/16}
.wgrid .wtile{aspect-ratio:9/14}

@media(max-width:900px){  .fotoduo{height:min(20rem,36vh)}
  .werkrij .wtile{height:min(20rem,38vh)}
  .trio .wtile{height:min(17rem,32vh)}
}
@media(max-width:560px){
  .werkrij .wtile{height:min(22rem,42vh)}
  .trio{flex-wrap:wrap}
  .trio .wtile{height:min(18rem,34vh)}
}

/* =========================================================
   OPGERUIMD — één kaartsysteem, duidelijke koppen, rustige kleur
   ========================================================= */

/* zachte achtergrond zonder zichtbare randen */
.hero::after{display:none}
.hero::before{content:"";position:absolute;inset:0;width:auto;height:auto;top:0;right:0;
  border-radius:0;pointer-events:none;
  background:radial-gradient(120% 82% at 76% 14%, rgba(153,72,167,.07), transparent 62%)}

/* dikkere, strakkere koppen */
h1,h2,h3{letter-spacing:-.04em}
h2{font-size:clamp(1.85rem,4vw,2.9rem)}
h3{font-weight:700}
.shead .lead{margin-top:0.9rem}

/* ---------- één kaart, overal hetzelfde ---------- */
.kaart{background:#fff;border:1px solid var(--line);border-radius:1.25rem;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.5rem 1.5rem rgba(65,31,71,.06);
  transition:transform .42s cubic-bezier(.2,.7,.3,1),box-shadow .42s,border-color .3s}
.kaart:hover{transform:translateY(-0.5rem);border-color:#dfd1e2;
  box-shadow:0 2px 4px rgba(65,31,71,.05), 0 1.5rem 3rem rgba(65,31,71,.13)}

/* ---------- stappen als kaarten ---------- */
.stapln{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.8vw,1.5rem);
  margin-top:clamp(2.2rem,3.6vw,3rem)}
.stapln .baan,.stapln .fill{display:none}
.stapln .stp{position:relative;padding:1.9rem 1.6rem 1.7rem;background:#fff;
  border:1px solid var(--line);border-radius:1.25rem;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.5rem 1.5rem rgba(65,31,71,.06);
  transition:transform .42s cubic-bezier(.2,.7,.3,1),box-shadow .42s,border-color .3s}
.stapln .stp:hover{transform:translateY(-0.5rem);border-color:#dfd1e2;
  box-shadow:0 2px 4px rgba(65,31,71,.05), 0 1.5rem 3rem rgba(65,31,71,.13)}
.stapln .stp .n{position:relative;left:auto;top:auto;width:3rem;height:3rem;border-radius:0.9rem;
  background:var(--blue-50);border:0;color:var(--blue);display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:1.15rem;
  transition:background .5s,color .5s,transform .5s cubic-bezier(.2,.7,.3,1)}
.stapln .stp.on .n{background:var(--navy);color:#fff;transform:scale(1.06)}
.stapln .stp h3{margin-top:1.15rem;color:var(--ink);font-size:1.16rem}
.stapln .stp p{color:var(--muted);font-size:0.96rem;margin-top:0.55rem;line-height:1.55;max-width:none}
.stapln .stp .who{display:flex;align-items:center;gap:0.45rem;margin-top:1.15rem;padding-top:1rem;
  border-top:1px solid var(--line);border-radius:0;background:none;
  font-size:0.87rem;font-weight:700;color:var(--navy)}

/* ---------- wat we maken: vier duidelijke kaarten ---------- */
.soortrij{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.8vw,1.5rem);
  margin-top:clamp(2.2rem,3.6vw,3rem)}
.soort{padding:1.9rem 1.6rem 1.7rem;background:#fff;border:1px solid var(--line);border-radius:1.25rem;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.5rem 1.5rem rgba(65,31,71,.06);
  transition:transform .42s cubic-bezier(.2,.7,.3,1),box-shadow .42s,border-color .3s}
.soort:hover{transform:translateY(-0.5rem);border-color:#dfd1e2;
  box-shadow:0 2px 4px rgba(65,31,71,.05), 0 1.5rem 3rem rgba(65,31,71,.13)}
.soort .ic{width:3rem;height:3rem;border-radius:0.9rem;background:var(--blue-50);color:var(--blue);
  display:grid;place-items:center;transition:background .4s,color .4s,transform .45s cubic-bezier(.2,.7,.3,1)}
.soort:hover .ic{background:var(--navy);color:#fff;transform:scale(1.06)}
.soort b{display:block;font-family:var(--disp);font-weight:700;font-size:1.16rem;letter-spacing:-.03em;
  margin-top:1.15rem;line-height:1.25}
.soort p{color:var(--muted);font-size:0.96rem;margin-top:0.55rem;line-height:1.55}
.werk-onder{margin-top:clamp(2.2rem,3.6vw,3rem);display:flex;justify-content:center}

/* ---------- prijzen ---------- */
.prz{background:var(--paper)}
.tog{border:1px solid var(--line);box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.4rem 1.2rem rgba(65,31,71,.06)}
.tog button{font-size:0.95rem;padding:0.7rem 1.5rem}
.cards{gap:clamp(1rem,1.8vw,1.5rem);align-items:stretch}
.card{padding:2.6rem 2.1rem 2.2rem;border-radius:1.4rem;border:1px solid var(--line);overflow:visible;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.5rem 1.5rem rgba(65,31,71,.06);
  transition:transform .42s cubic-bezier(.2,.7,.3,1),box-shadow .42s,border-color .3s}
.card:hover{transform:translateY(-0.6rem);border-color:#dfd1e2;
  box-shadow:0 2px 4px rgba(65,31,71,.05), 0 1.8rem 3.4rem rgba(65,31,71,.14)}
.card.best{border:1.5px solid var(--navy);
  box-shadow:0 2px 4px rgba(65,31,71,.06), 0 1.4rem 3rem rgba(65,31,71,.16)}
.card.best:hover{transform:translateY(-0.6rem);
  box-shadow:0 2px 6px rgba(65,31,71,.07), 0 2.2rem 4rem rgba(65,31,71,.2)}
.card .nm{font-size:0.76rem;letter-spacing:.13em;font-weight:700;color:var(--muted)}
.card .vd{font-family:var(--disp);font-weight:700;font-size:2.4rem;letter-spacing:-.05em;margin-top:0.9rem}
.card .vd small{font-size:0.92rem;color:var(--muted);margin-top:0.4rem}
.card .pr{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:1.9rem;letter-spacing:-.04em;
  margin-top:1.5rem}
.card .pr em{font-size:0.88rem;margin-left:0.4rem;color:var(--muted);font-weight:600}
.card .was{font-size:0.82rem;margin-top:0.3rem}
.card ul{flex:1;margin:1.6rem 0 2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.card li{font-size:0.99rem;margin-bottom:0.9rem}
.card .ck{background:none;color:var(--blue);width:1.1rem;height:1.1rem;font-size:0.88rem;
  font-weight:700;margin-top:0.14rem}
.card .btn{padding:1.05rem 1.5rem;font-size:1rem}

@media(max-width:1100px){
  .stapln,.soortrij{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .stapln,.soortrij{grid-template-columns:1fr}
  .card{padding:2rem 1.6rem 1.8rem}
}

/* =========================================================
   PRIJZEN COMPACT — alles binnen één schermhoogte
   ========================================================= */
.prz{padding:clamp(2.4rem,3.8vw,3.4rem) 0}
.prz .shead{margin-bottom:1.3rem}
.prz .shead h2{font-size:clamp(1.6rem,2.9vw,2.15rem);margin-top:0.7rem}
.prz .shead .lead{font-size:1rem;margin-top:0.55rem}
.prz .tog{padding:0.22rem;margin-bottom:0}
.prz .tog button{font-size:0.88rem;padding:0.55rem 1.2rem}
.prz .tog .pil{top:0.22rem;left:0.22rem;height:calc(100% - 0.44rem)}
.prz .cards{margin-top:1.6rem;gap:clamp(0.85rem,1.4vw,1.15rem)}
.prz .card{padding:1.75rem 1.5rem 1.5rem;border-radius:1.15rem}
.prz .card .nm{font-size:0.7rem;letter-spacing:.12em}
.prz .card .vd{font-size:1.85rem;margin-top:0.6rem}
.prz .card .vd small{font-size:0.85rem;margin-top:0.25rem}
.prz .card .pr{font-size:1.5rem;margin-top:1rem}
.prz .card .pr em{font-size:0.82rem}
.prz .card .was{font-size:0.76rem;min-height:0.9rem;margin-top:0.2rem}
.prz .card ul{margin:1rem 0 1.25rem;padding-top:1rem}
.prz .card li{font-size:0.92rem;margin-bottom:0.58rem;line-height:1.35}
.prz .card .ck{width:1rem;height:1rem;font-size:0.8rem;margin-top:0.1rem}
.prz .card .btn{padding:0.82rem 1.2rem;font-size:0.93rem}
.prz .card.best::before{font-size:0.62rem;padding:0.2rem 0.55rem;top:-0.62rem}
.prz .morebtn{margin-top:1.3rem;font-size:0.88rem}
.prz .klein{margin-top:0.9rem;font-size:0.82rem}

/* op lage schermen nog een tandje strakker */
@media(max-height:800px) and (min-width:900px){
  .prz .card{padding:1.5rem 1.35rem 1.35rem}
  .prz .card .vd{font-size:1.65rem}
  .prz .card .pr{font-size:1.35rem;margin-top:0.85rem}
  .prz .card ul{margin:0.85rem 0 1.05rem;padding-top:0.85rem}
  .prz .card li{font-size:0.87rem;margin-bottom:0.48rem}
  .prz .shead h2{font-size:1.8rem}
  .prz .shead .lead{font-size:0.94rem}
}
@media(max-width:600px){
  .prz .card{padding:1.7rem 1.4rem 1.5rem}
}

/* =========================================================
   FOTO'S OP DE HOMEPAGE
   ========================================================= */
.fotorij{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(0.8rem,1.4vw,1.15rem);
  align-items:start;margin-top:clamp(1.8rem,3vw,2.6rem)}
.fp{position:relative;border-radius:1.1rem;overflow:hidden;
  background:linear-gradient(158deg,var(--navy-l),var(--navy-d));
  box-shadow:0 1px 2px rgba(65,31,71,.05), 0 0.6rem 1.8rem rgba(65,31,71,.12);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s}
.fp:hover{transform:translateY(-0.5rem);
  box-shadow:0 2px 4px rgba(65,31,71,.06), 0 1.4rem 2.8rem rgba(65,31,71,.2)}
.fp{height:min(19rem,34vh)}
.fp.laag{height:min(15.5rem,28vh);margin-top:clamp(1rem,2.4vw,2.4rem)}
.fp .ph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.26);z-index:2}
.fp .bij{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2rem 0.9rem 0.85rem;
  color:rgba(255,255,255,.82);font-size:0.8rem;font-weight:600;
  background:linear-gradient(180deg,transparent,rgba(26,12,28,.72))}

/* tekstlijst onder de foto's */
.srtrij{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.2vw,2.2rem);
  margin-top:clamp(2rem,3.4vw,3rem)}
.srt{border-top:2px solid var(--line);padding:1.1rem 0 0;display:block;transition:border-color .35s}
.srt:hover{border-color:var(--navy)}
.srt .nr{display:block;width:auto;height:auto;background:none;border-radius:0;
  font-family:var(--disp);font-weight:700;font-size:0.76rem;color:var(--muted);letter-spacing:.1em}
.srt b{display:block;font-family:var(--disp);font-weight:700;font-size:1.08rem;letter-spacing:-.03em;
  margin-top:0.45rem;line-height:1.25}
.srt p{color:var(--muted);font-size:0.93rem;margin-top:0.4rem;line-height:1.5}

@media(max-width:900px){
  .fotorij{grid-template-columns:1fr 1fr}
  .srtrij{grid-template-columns:1fr 1fr}
  .fp,.fp.laag{height:min(15rem,28vh)}
  .fp.laag{margin-top:0}
}
@media(max-width:560px){
  .fotorij,.srtrij{grid-template-columns:1fr}
  .fp,.fp.laag{height:min(16rem,30vh)}
}

/* =========================================================
   PRIJZEN OP BLAUW — met een zachte overgang naar de buren
   ========================================================= */
.prz{
  background:linear-gradient(180deg,
    var(--paper) 0%,
    #f8f1f9 14%,
    #f4eaf6 50%,
    #f8f1f9 86%,
    var(--paper) 100%);
}
/* de kaarten en de schakelaar mogen op blauw wat meer opvallen */
.prz .card{border-color:#ebdcee;
  box-shadow:0 1px 2px rgba(65,31,71,.05), 0 0.6rem 1.6rem rgba(65,31,71,.08)}
.prz .card:hover{border-color:#dcc4e1;
  box-shadow:0 2px 4px rgba(65,31,71,.06), 0 1.8rem 3.4rem rgba(65,31,71,.16)}
.prz .card.best{border-color:var(--navy);
  box-shadow:0 2px 4px rgba(65,31,71,.07), 0 1.4rem 3rem rgba(65,31,71,.18)}
.prz .tog{border-color:#ebdcee;
  box-shadow:0 1px 2px rgba(65,31,71,.05), 0 0.4rem 1.2rem rgba(65,31,71,.09)}
.prz .vtab{border-color:#ebdcee}
.prz .vtab thead th{background:#fbf7fb}
.prz .btn-o{border-color:#ebdcee}
.prz .btn-o:hover{border-color:var(--blue)}

/* =========================================================
   BLAUWE SECTIE — dooft aan boven- en onderkant uit,
   dus hij past onder elke witte buursectie
   ========================================================= */
.blauw{background:linear-gradient(180deg,
   rgba(243,233,245,0) 0%,
   rgba(243,233,245,.92) 16%,
   rgba(243,233,245,.92) 84%,
   rgba(243,233,245,0) 100%)}
.blauw .kaart,.blauw .stapkaart,.blauw .ccard,.blauw .cstat,.blauw .btag{
  border-color:#ebdcee}
.blauw .btn-o{border-color:#ebdcee;background:#fff}
.blauw .btn-o:hover{border-color:var(--blue)}

/* =========================================================
   STAPPEN — één breed blok in plaats van vier losse kaarten
   ========================================================= */
.stapkaart{background:#fff;border:1px solid var(--line);border-radius:1.5rem;
  padding:clamp(1.8rem,3vw,2.6rem);margin-top:clamp(2rem,3.4vw,2.8rem);
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 1rem 2.6rem rgba(65,31,71,.09)}
.stapln{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:0}
.stapln .stp{position:relative;padding:0 clamp(1rem,1.9vw,1.8rem);background:none;border:0;
  border-radius:0;box-shadow:none}
.stapln .stp:hover{transform:none;box-shadow:none}
.stapln .stp:first-child{padding-left:0}
.stapln .stp:last-child{padding-right:0}
.stapln .stp + .stp::before{content:"";position:absolute;left:0;top:0.3rem;bottom:0.3rem;width:1px;
  background:var(--line)}
.stapln .stp .n{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--blue-50);color:var(--blue);
  display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:1.05rem;
  transition:background .5s,color .5s,transform .5s cubic-bezier(.2,.7,.3,1)}
.stapln .stp.on .n{background:var(--navy);color:#fff;transform:scale(1.07)}
.stapln .stp h3{margin-top:1.05rem;font-size:1.1rem;color:var(--ink)}
.stapln .stp p{margin-top:0.5rem;font-size:0.94rem;color:var(--muted);line-height:1.55;max-width:none}
.stapln .stp .who{display:flex;align-items:center;gap:0.4rem;margin-top:0.95rem;padding-top:0;
  border-top:0;background:none;border-radius:0;font-size:0.86rem;font-weight:700;color:var(--navy)}
.stapvoet{margin-top:clamp(1.5rem,2.4vw,2rem);padding-top:1.2rem;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:0.5rem;text-align:center;
  font-size:1rem;color:var(--muted)}
.stapvoet b{font-family:var(--disp);font-weight:700;color:var(--ink);letter-spacing:-.03em}
.stapvoet svg{color:var(--green);flex-shrink:0}

/* =========================================================
   CASESPAGINA
   ========================================================= */
.chero{padding:clamp(2.6rem,4.4vw,4rem) 0 clamp(2rem,3.4vw,3rem)}
.chero h1{max-width:18ch;margin:0.9rem 0 0}
.chero .lead{max-width:52ch;margin-top:1rem}
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(0.8rem,1.4vw,1.15rem);
  margin-top:clamp(2rem,3.2vw,2.6rem)}
.cstat{background:#fff;border:1px solid var(--line);border-radius:1.1rem;padding:1.25rem 1.4rem;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.5rem 1.5rem rgba(65,31,71,.06);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .3s}
.cstat:hover{transform:translateY(-0.4rem);border-color:#dfd1e2;
  box-shadow:0 2px 4px rgba(65,31,71,.05), 0 1.2rem 2.6rem rgba(65,31,71,.12)}
.cstat b{display:block;font-family:var(--disp);font-weight:700;font-size:1.75rem;letter-spacing:-.045em;
  line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.cstat span{display:block;font-size:0.86rem;color:var(--muted);margin-top:0.45rem;line-height:1.35}

/* uitgelichte case */
.uitg{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,4vw,4rem);align-items:center}
.uitg .bran{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.76rem;font-weight:700;
  color:var(--blue);background:var(--blue-50);padding:0.35rem 0.8rem;border-radius:99px;
  letter-spacing:.06em;text-transform:uppercase}
.uitg h2{margin-top:0.9rem;font-size:clamp(1.6rem,2.9vw,2.3rem)}
.uitg p{color:var(--muted);margin-top:0.9rem;max-width:52ch}
.kpi3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem;padding-top:1.4rem;
  border-top:1px solid var(--line)}
.kpi3 b{display:block;font-family:var(--disp);font-weight:700;font-size:1.6rem;letter-spacing:-.045em;
  line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.kpi3 span{display:block;font-size:0.82rem;color:var(--muted);margin-top:0.4rem;line-height:1.35}
.zeg{margin-top:1.5rem;padding:1.1rem 1.3rem;background:#fff;border:1px solid var(--line);
  border-radius:1rem;font-size:0.98rem;line-height:1.55;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.4rem 1.2rem rgba(65,31,71,.05)}
.zeg em{display:block;font-style:normal;font-size:0.82rem;color:var(--muted);font-weight:600;
  margin-top:0.6rem}

/* meer cases als kaarten */
.cgrid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,1.8vw,1.4rem);
  margin-top:clamp(2rem,3.4vw,2.8rem)}
.ccard{background:#fff;border:1px solid var(--line);border-radius:1.4rem;overflow:hidden;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.6rem 1.8rem rgba(65,31,71,.07);
  transition:transform .42s cubic-bezier(.2,.7,.3,1),box-shadow .42s,border-color .3s}
.ccard:hover{transform:translateY(-0.55rem);border-color:#dfd1e2;
  box-shadow:0 2px 4px rgba(65,31,71,.05), 0 1.6rem 3.2rem rgba(65,31,71,.14)}
.ccard .kop{position:relative;height:min(13rem,24vh);
  background:linear-gradient(158deg,var(--navy-l),var(--navy-d))}
.ccard .kop .ph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.26)}
.ccard .kop .tag{position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;font-size:0.74rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--navy);background:#fff;
  padding:0.3rem 0.7rem;border-radius:0.45rem}
.ccard .lijf{padding:1.5rem 1.5rem 1.6rem}
.ccard h3{font-size:1.22rem}
.ccard p{color:var(--muted);font-size:0.95rem;margin-top:0.6rem;line-height:1.55}

/* branches */
.btags{display:flex;flex-wrap:wrap;gap:0.6rem;justify-content:center;margin-top:clamp(1.6rem,2.6vw,2.2rem)}
.btag{background:#fff;border:1px solid var(--line);border-radius:99px;padding:0.6rem 1.2rem;
  font-weight:700;font-size:0.93rem;color:var(--ink);
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.3rem 0.9rem rgba(65,31,71,.05);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .3s,color .3s}
.btag:hover{transform:translateY(-0.25rem);border-color:var(--blue);color:var(--blue);
  box-shadow:0 2px 4px rgba(65,31,71,.05), 0 0.7rem 1.6rem rgba(65,31,71,.1)}

@media(max-width:900px){
  .stapln{grid-template-columns:1fr 1fr;gap:1.8rem 0}
  .stapln .stp:nth-child(odd){padding-left:0}
  .stapln .stp:nth-child(even){padding-right:0}
  .stapln .stp:nth-child(odd)::before{display:none}
  .cstats{grid-template-columns:1fr 1fr}
  .uitg,.cgrid2{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:560px){
  .stapln{grid-template-columns:1fr;gap:1.6rem 0}
  .stapln .stp{padding:0}
  .stapln .stp + .stp{padding-top:1.5rem;border-top:1px solid var(--line)}
  .stapln .stp + .stp::before{display:none}
  .cstats{grid-template-columns:1fr}
  .kpi3{grid-template-columns:1fr;gap:0.9rem}
}

/* prijzen gebruiken dezelfde uitdovende blauwe laag */
.prz{background:linear-gradient(180deg,
   rgba(243,233,245,0) 0%,
   rgba(243,233,245,.92) 16%,
   rgba(243,233,245,.92) 84%,
   rgba(243,233,245,0) 100%)}

/* =========================================================
   WAT WE MAKEN — foto en tekst in één kaart
   ========================================================= */
.vrij{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.8vw,1.4rem);
  margin-top:clamp(2rem,3.4vw,2.8rem)}
.vkaart{background:#fff;border:1px solid var(--line);border-radius:1.3rem;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.6rem 1.8rem rgba(65,31,71,.07);
  transition:transform .42s cubic-bezier(.2,.7,.3,1),box-shadow .42s,border-color .3s}
.vkaart:hover{transform:translateY(-0.55rem);border-color:#dfd1e2;
  box-shadow:0 2px 4px rgba(65,31,71,.05), 0 1.6rem 3.2rem rgba(65,31,71,.14)}
.vkaart .beeld{position:relative;height:min(11.5rem,21vh);
  background:linear-gradient(158deg,var(--navy-l),var(--navy-d))}
.vkaart .beeld .ph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.26)}
.vkaart .beeld .nr{position:absolute;left:0.9rem;top:0.9rem;z-index:2;width:2rem;height:2rem;
  border-radius:0.6rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:700;font-size:0.8rem;
  transition:background .4s,color .4s}
.vkaart:hover .beeld .nr{background:#fff;color:var(--navy);border-color:#fff}
.vkaart .lijf{padding:1.35rem 1.35rem 1.5rem}
.vkaart b{display:block;font-family:var(--disp);font-weight:700;font-size:1.08rem;letter-spacing:-.03em;
  line-height:1.25}
.vkaart p{color:var(--muted);font-size:0.94rem;margin-top:0.5rem;line-height:1.55}

@media(max-width:1000px){ .vrij{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .vrij{grid-template-columns:1fr} .vkaart .beeld{height:min(12rem,24vh)} }

/* =========================================================
   STAPPEN — vier regels onder elkaar op een tijdlijn
   (bewust anders dan het kaartenraster eronder)
   ========================================================= */
.stapln{display:block;position:relative;margin-top:0}
.stapln .baan{position:absolute;left:1.3rem;top:1.3rem;bottom:1.3rem;width:2px;
  background:var(--line);display:block}
.stapln .fill{position:absolute;left:1.3rem;top:1.3rem;width:2px;height:0;background:var(--navy);
  border-radius:2px;transition:height 1.2s cubic-bezier(.3,.85,.3,1);display:block;z-index:1}
.stapln .stp{display:grid;grid-template-columns:4.4rem minmax(9rem,14rem) minmax(0,1fr) auto;
  gap:clamp(0.9rem,1.8vw,1.8rem);align-items:center;padding:1.3rem 0;
  border-top:1px solid var(--line);position:relative;background:none;box-shadow:none;border-radius:0}
.stapln .stp:first-child{border-top:0;padding-top:0}
.stapln .stp:last-child{padding-bottom:0}
.stapln .stp::before{display:none}
.stapln .stp:hover{transform:none;box-shadow:none}
.stapln .stp .n{position:relative;z-index:2;width:2.6rem;height:2.6rem;border-radius:50%;
  background:#fff;border:2px solid var(--line);color:var(--muted);display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:1rem;
  transition:background .5s,border-color .5s,color .5s,transform .5s cubic-bezier(.2,.7,.3,1)}
.stapln .stp.on .n{background:var(--navy);border-color:var(--navy);color:#fff;transform:scale(1.06)}
.stapln .stp h3{margin:0;font-size:1.14rem;color:var(--ink)}
.stapln .stp p{margin:0;font-size:0.96rem;color:var(--muted);line-height:1.5;max-width:46ch}
.stapln .stp .who{display:inline-flex;align-items:center;gap:0.4rem;white-space:nowrap;
  background:var(--blue-50);color:var(--navy);padding:0.45rem 0.9rem;border-radius:99px;
  font-size:0.85rem;font-weight:700;margin:0;border:0;
  transition:background .5s,color .5s}
.stapln .stp.on .who{background:var(--navy);color:#fff}
.stapln .stp.on .who svg{color:var(--yellow)}

@media(max-width:980px){
  .stapln .stp{grid-template-columns:3.6rem minmax(0,1fr) auto;
    grid-template-areas:"n titel tijd" ". tekst tekst";gap:0.7rem 1rem}
  .stapln .stp .n{grid-area:n;width:2.3rem;height:2.3rem;font-size:0.9rem}
  .stapln .stp h3{grid-area:titel}
  .stapln .stp .who{grid-area:tijd}
  .stapln .stp p{grid-area:tekst;max-width:none}
  .stapln .baan,.stapln .fill{left:1.15rem}
}
@media(max-width:560px){
  .stapln .stp{grid-template-columns:3rem minmax(0,1fr);
    grid-template-areas:"n titel" ". tekst" ". tijd";gap:0.6rem 0.8rem}
  .stapln .stp .who{justify-self:start;margin-top:0.2rem}
  .stapln .baan,.stapln .fill{left:1rem}
}

/* =========================================================
   STAPPEN — losse regels op de blauwe laag, geen wit vlak
   ========================================================= */
.stapkaart{background:none;border:0;box-shadow:none;padding:0;
  margin-top:clamp(1.6rem,2.8vw,2.4rem)}
.stapln .baan,.stapln .fill{display:none}
.stapln .stp{grid-template-columns:5.6rem minmax(9rem,15rem) minmax(0,1fr) auto;
  padding:1.5rem 0.6rem;border-top:1px solid rgba(65,31,71,.13);border-radius:0.8rem;
  transition:background .35s,transform .35s cubic-bezier(.2,.7,.3,1)}
.stapln .stp:hover{background:rgba(255,255,255,.6);transform:translateX(0.3rem)}
.stapln .stp .n{position:static;width:auto;height:auto;border:0;background:none;border-radius:0;
  justify-self:start;font-family:var(--disp);font-weight:700;font-size:2.7rem;line-height:.9;
  letter-spacing:-.06em;color:rgba(65,31,71,.17);
  transition:color .55s cubic-bezier(.2,.7,.3,1)}
.stapln .stp.on .n{color:var(--navy);transform:none}
.stapln .stp h3{font-size:1.2rem}
.stapln .stp .who{background:#fff;color:var(--navy);border:1px solid rgba(65,31,71,.12)}
.stapln .stp.on .who{background:var(--navy);color:#fff;border-color:var(--navy)}
.stapvoet{border-top:1px solid rgba(65,31,71,.13);margin-top:0;padding-top:1.5rem}

@media(max-width:980px){
  .stapln .stp{grid-template-columns:4.2rem minmax(0,1fr) auto;padding:1.3rem 0.5rem}
  .stapln .stp .n{font-size:2.1rem}
}
@media(max-width:560px){
  .stapln .stp{grid-template-columns:3.4rem minmax(0,1fr)}
  .stapln .stp .n{font-size:1.8rem}
}

/* =========================================================
   PRIJZEN — iets ruimer nu de pakketnaam boven weg is
   ========================================================= */
.prz .shead h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.prz .shead .lead{font-size:1.03rem}
.prz .card{padding:2rem 1.7rem 1.75rem}
.prz .card .vd{font-size:2.05rem;margin-top:0}
.prz .card .vd small{font-size:0.92rem;margin-top:0.35rem}
.prz .card .pr{font-size:1.65rem;margin-top:1.1rem}
.prz .card .pr em{font-size:0.86rem}
.prz .card ul{margin:1.1rem 0 1.4rem;padding-top:1.1rem}
.prz .card li{font-size:0.97rem;margin-bottom:0.62rem;line-height:1.4}
.prz .card .ck{width:1.05rem;height:1.05rem;font-size:0.83rem}
.prz .card .btn{padding:0.9rem 1.2rem;font-size:0.97rem}
.prz .tog button{font-size:0.92rem;padding:0.6rem 1.3rem}

@media(max-height:800px) and (min-width:900px){
  .prz .card{padding:1.65rem 1.45rem 1.5rem}
  .prz .card .vd{font-size:1.8rem}
  .prz .card .vd small{font-size:0.85rem}
  .prz .card .pr{font-size:1.45rem;margin-top:0.9rem}
  .prz .card ul{margin:0.95rem 0 1.15rem;padding-top:0.95rem}
  .prz .card li{font-size:0.9rem;margin-bottom:0.5rem}
  .prz .card .btn{padding:0.8rem 1.1rem;font-size:0.9rem}
  .prz .shead h2{font-size:1.85rem}
}

/* =========================================================
   STAPPEN — definitieve opzet: open regels, geen vlak
   (alles hier volledig uitgeschreven zodat er niets van
    eerdere versies doorheen lekt)
   ========================================================= */
.stapkaart{background:none;border:0;box-shadow:none;padding:0;
  margin-top:clamp(1.8rem,3vw,2.6rem)}
.stapln{display:block;position:relative;margin:0}
.stapln .baan,.stapln .fill{display:none}

.stapln .stp{
  display:grid;
  grid-template-columns:4.6rem minmax(0,1fr) auto;
  grid-template-areas:"nummer titel tijd" "nummer tekst tijd";
  column-gap:clamp(1.1rem,2.2vw,2rem);
  row-gap:0.35rem;
  align-items:center;
  padding:clamp(1.25rem,2.2vw,1.7rem) 0;
  margin:0;
  background:none;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid rgba(65,31,71,.14);
  position:relative;
  transition:none}
.stapln .stp:first-child{border-top:0;padding-top:0}
.stapln .stp:last-child{padding-bottom:0}
.stapln .stp::before,.stapln .stp::after{display:none}
.stapln .stp:hover{background:none;transform:none;box-shadow:none}

/* het nummer */
.stapln .stp .n{
  grid-area:nummer;align-self:center;justify-self:start;
  position:static;width:auto;height:auto;margin:0;padding:0;
  background:none;border:0;border-radius:0;box-shadow:none;display:block;
  font-family:var(--disp);font-weight:700;font-size:clamp(2.1rem,3.4vw,2.9rem);
  line-height:.85;letter-spacing:-.07em;
  color:rgba(65,31,71,.16);
  transition:color .6s cubic-bezier(.2,.7,.3,1)}
.stapln .stp.on .n{background:none;transform:none;color:var(--navy)}

/* titel en tekst */
.stapln .stp h3{grid-area:titel;margin:0;font-size:clamp(1.12rem,1.8vw,1.3rem);
  color:var(--ink);line-height:1.2}
.stapln .stp p{grid-area:tekst;margin:0;font-size:clamp(.94rem,1.5vw,1.01rem);
  color:var(--muted);line-height:1.5;max-width:58ch}

/* de tijd */
.stapln .stp .who{
  grid-area:tijd;align-self:center;justify-self:end;
  display:inline-flex;align-items:center;gap:0.45rem;white-space:nowrap;margin:0;
  padding:0.5rem 0.95rem;border-radius:99px;
  background:rgba(255,255,255,.75);border:1px solid rgba(65,31,71,.12);
  color:var(--muted);font-size:0.88rem;font-weight:700;
  box-shadow:none;
  transition:background .55s,color .55s,border-color .55s}
.stapln .stp .who svg{color:rgba(65,31,71,.35);transition:color .55s}
.stapln .stp.on .who{background:#fff;border-color:rgba(65,31,71,.16);color:var(--navy)}
.stapln .stp.on .who svg{color:var(--blue)}

/* afsluitende regel */
.stapvoet{margin-top:clamp(1.4rem,2.2vw,1.9rem);padding-top:clamp(1.2rem,2vw,1.6rem);
  border-top:1px solid rgba(65,31,71,.14);
  display:flex;align-items:center;justify-content:center;gap:0.55rem;text-align:center;
  font-size:1.02rem;color:var(--muted);flex-wrap:wrap}
.stapvoet b{font-family:var(--disp);font-weight:700;color:var(--ink);letter-spacing:-.03em}
.stapvoet svg{color:var(--green);flex-shrink:0}

@media(max-width:820px){
  .stapln .stp{grid-template-columns:3.4rem minmax(0,1fr);
    grid-template-areas:"nummer titel" "nummer tekst" ". tijd";row-gap:0.5rem}
  .stapln .stp .who{justify-self:start;margin-top:0.2rem}
  .stapln .stp .n{align-self:start;padding-top:0.1rem}
}

/* de regel onder het aantal video's is weg — ruimte opnieuw verdelen */
.prz .card .vd{margin:0 0 0.2rem}
.prz .card .pr{margin-top:1.15rem}

/* pakketnaam onder het aantal video's */
.prz .card .vd{margin:0}
.prz .card .vd small{display:block;font-family:var(--body);font-weight:600;font-size:0.92rem;
  color:var(--muted);letter-spacing:0;margin-top:0.4rem}
.prz .card .pr{margin-top:1.1rem}

/* fotoplek in de videokaarten: donkergrijs in plaats van blauw */
.vkaart .beeld{background:linear-gradient(158deg,#352d36,#1c161d)}
.vkaart .beeld .ph{color:rgba(255,255,255,.24)}
.vkaart .beeld .nr{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.2)}
.vkaart:hover .beeld .nr{background:#fff;color:#1c161d;border-color:#fff}

/* =========================================================
   DONKERE SECTIE — antraciet blok, geen fel zwart
   ========================================================= */
.donker{background:linear-gradient(180deg,#211c22 0%,#171318 100%);color:#fff;position:relative}
.donker h2{color:#fff}
.donker .lead{color:rgba(255,255,255,.62)}
/* de kaarten iets lichter dan de achtergrond */
.donker .vkaart{background:#2d262e;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 0.7rem 2rem rgba(0,0,0,.34)}
.donker .vkaart:hover{background:#332b35;border-color:rgba(255,255,255,.18);
  box-shadow:0 2px 4px rgba(0,0,0,.34), 0 1.6rem 3.4rem rgba(0,0,0,.45)}
.donker .vkaart b{color:#fff}
.donker .vkaart p{color:rgba(255,255,255,.6)}

/* de fotoplek net iets lichter zodat je hem herkent */
.donker .vkaart .beeld{background:linear-gradient(158deg,#3f3641,#2b242c)}
.donker .vkaart .beeld .ph{color:rgba(255,255,255,.26)}
.donker .vkaart .beeld .nr{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:#fff}
.donker .vkaart:hover .beeld .nr{background:#fff;color:#211c22;border-color:#fff}

/* =========================================================
   DONKERE SECTIE — diep marineblauw in plaats van neutraal zwart,
   zodat hij bij de rest van de site hoort
   ========================================================= */
.donker{background:linear-gradient(180deg,#2c1530 0%,#1c0d1f 100%);color:#fff;
  position:relative;overflow:hidden}
.donker::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 50% 0,rgba(153,72,167,.22),transparent 62%)}
.donker .wrap{position:relative;z-index:2}
.donker h2{color:#fff}
.donker .lead{color:rgba(255,255,255,.64)}
.donker .vkaart{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);
  box-shadow:0 1px 2px rgba(15,7,16,.4), 0 0.7rem 2rem rgba(15,7,16,.4)}
.donker .vkaart:hover{background:rgba(255,255,255,.085);border-color:rgba(206,161,214,.34);
  box-shadow:0 2px 4px rgba(15,7,16,.45), 0 1.6rem 3.4rem rgba(15,7,16,.55)}
.donker .vkaart b{color:#fff}
.donker .vkaart p{color:rgba(255,255,255,.62)}

.donker .vkaart .beeld{background:linear-gradient(158deg,#522d59,#311935)}
.donker .vkaart .beeld .ph{color:rgba(255,255,255,.3)}
.donker .vkaart .beeld .nr{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.24);color:#fff}
.donker .vkaart:hover .beeld .nr{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}

/* =========================================================
   MEER BEWEGING TIJDENS HET SCROLLEN
   ========================================================= */

/* onthullen met richting */
.rv.van-links{transform:translateX(-2.2rem)}
.rv.van-rechts{transform:translateX(2.2rem)}
.rv.van-links.in,.rv.van-rechts.in{transform:none}
.rv.groei{transform:scale(.955)}
.rv.groei.in{transform:none}

/* de kop komt net na het labeltje binnen */
.shead h2{opacity:0;transform:translateY(0.85rem);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.shead.in h2{opacity:1;transform:none;transition-delay:.12s}
.shead .lead{opacity:0;transform:translateY(0.7rem);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.shead.in .lead{opacity:1;transform:none;transition-delay:.22s}

/* losse tags springen één voor één op hun plek */
.btag.rv{opacity:0;transform:translateY(0.6rem) scale(.96)}
.btag.rv.in{opacity:1;transform:none}

/* foto's schuiven een tikje mee */
.fto.hor{transform:translateY(var(--py,0px))}
.fto.ver{transform:translateY(var(--py,0px))}
.fotoduo:hover .fto.hor{transform:translate(-0.4rem,calc(-0.4rem + var(--py,0px)))}
.fotoduo:hover .fto.ver{transform:translate(0.4rem,calc(0.4rem + var(--py,0px)))}
.pers{transform:translateY(var(--py,0px))}
.pers:hover{transform:translateY(calc(-0.5rem + var(--py,0px)))}

@media(prefers-reduced-motion:reduce){
  .shead h2,.shead .lead,.btag.rv{opacity:1;transform:none}
}

/* =========================================================
   VERGELIJKINGSTABEL — duidelijke aanduidingen
   ========================================================= */
.vtab{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid #ebdcee;border-radius:1.1rem;overflow:hidden;font-size:0.95rem;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.6rem 1.8rem rgba(65,31,71,.07)}
.vtab th,.vtab td{padding:0.85rem 1rem;text-align:center;vertical-align:middle;
  border-bottom:1px solid #f4eff5}
.vtab thead th{background:#fbf7fc;font-family:var(--disp);font-weight:700;font-size:0.82rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding-block:1.1rem;
  border-bottom:1px solid #ede2ef;position:relative}
.vtab th[scope="row"]{text-align:left;font-weight:600;color:var(--ink);font-size:0.95rem;
  background:#fefdfe}
.vtab tbody tr:last-child th,.vtab tbody tr:last-child td{border-bottom:1px solid #ede2ef}

/* de meest gekozen kolom licht op */
.vtab .mid{background:rgba(153,72,167,.055)}
.vtab thead th.mid{background:rgba(153,72,167,.1);color:var(--navy)}
.vtab thead th.uit .merk{position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-family:var(--body);font-size:0.6rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:0.18rem 0.6rem;
  border-radius:0 0 0.4rem 0.4rem}
.vtab tbody tr{transition:background .2s}
.vtab tbody tr:hover th[scope="row"]{background:#faf6fb}
.vtab tbody tr:hover td{background:rgba(153,72,167,.04)}
.vtab tbody tr:hover td.mid{background:rgba(153,72,167,.1)}

/* aanduidingen */
.ja,.nee{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%}
.ja{background:var(--green-50);color:var(--green)}
.nee{background:#f6f2f6;color:#cabacc}
.vtab .getal{font-family:var(--disp);font-weight:700;font-size:1.12rem;color:var(--navy);
  letter-spacing:-.03em}
.vtab .tekst{font-weight:600;color:var(--ink)}
.vtab td.mid .tekst,.vtab td.mid .getal{color:var(--navy)}

/* prijsregel onderaan */
.vtab tfoot th,.vtab tfoot td{border-bottom:0;padding-block:1.05rem;background:#fbf7fc}
.vtab tfoot td.mid{background:rgba(153,72,167,.12)}
.vtab tfoot .euro{font-family:var(--disp);font-weight:700;font-size:1.15rem;color:var(--navy);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums}

@media(max-width:700px){
  .vtab{font-size:0.85rem}
  .vtab th,.vtab td{padding:0.65rem 0.5rem}
  .vtab thead th{font-size:0.68rem;letter-spacing:.05em}
  .ja,.nee{width:1.35rem;height:1.35rem}
}

/* meer lucht tussen het vlaggetje en de kolomnaam */
.vtab thead th{padding-block:1.15rem}
.vtab thead th.uit{padding-top:2.5rem}
.vtab thead th.uit .merk{padding:0.3rem 0.85rem;font-size:0.63rem;letter-spacing:.1em;
  border-radius:0 0 0.5rem 0.5rem}

/* =========================================================
   "MEEST GEKOZEN" LOSSTAAND BOVEN DE KOLOM / DE KAART
   ========================================================= */

/* in de vergelijkingstabel: als eigen regel boven de kolomnaam */
.vtab thead th{vertical-align:bottom;padding-block:1.15rem}
.vtab thead th.uit{padding-top:1.15rem}
.vtab thead th.uit .merk{position:static;transform:none;display:inline-block;
  white-space:nowrap;margin:0 0 0.75rem;border-radius:0.45rem;
  padding:0.32rem 0.8rem;font-size:0.62rem;letter-spacing:.1em}

/* bij de prijskaarten: helemaal los boven de kaart */
.prz .cards{padding-top:2.8rem}
.prz .card.best::before{top:-2.5rem;left:50%;transform:translateX(-50%);
  border-radius:0.5rem;padding:0.35rem 0.85rem;font-size:0.65rem;letter-spacing:.1em;
  white-space:nowrap}
@media(max-width:900px){
  .prz .cards{padding-top:2.6rem}
}

/* het label krijgt een eigen regel boven de kolomnaam */
.vtab thead th.uit .merk{display:block;width:fit-content;margin:0 auto 0.8rem}

/* het label zweeft los boven de tabel */
.vtab{overflow:visible;margin-top:2.9rem}
.vtab thead tr th:first-child{border-top-left-radius:1.1rem}
.vtab thead tr th:last-child{border-top-right-radius:1.1rem}
.vtab tfoot tr th:first-child{border-bottom-left-radius:1.1rem}
.vtab tfoot tr td:last-child{border-bottom-right-radius:1.1rem}
.vtab thead th.uit{position:relative;padding-top:1.15rem}
.vtab thead th.uit .merk{position:absolute;top:-2rem;left:50%;transform:translateX(-50%);
  display:block;width:max-content;margin:0;white-space:nowrap;
  border-radius:0.5rem;padding:0.35rem 0.85rem;font-size:0.65rem;letter-spacing:.1em}

/* het label zit half op de bovenrand van de tabel */
.vtab{margin-top:2rem}
.vtab thead th.uit .merk{top:0;transform:translate(-50%,-50%)}

/* =========================================================
   VOET — compacter, met alle bedrijfsgegevens
   ========================================================= */
footer{background:var(--navy-d);color:rgba(255,255,255,.6);padding:0;font-size:0.88rem}
.voet-top{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:clamp(1.6rem,3vw,3rem);
  padding:clamp(2.4rem,3.6vw,3.2rem) 0 clamp(1.8rem,2.6vw,2.2rem)}
.voet-merk .logo{color:#fff;font-size:1.1rem;margin-bottom:0.8rem}
.voet-merk p{font-size:0.86rem;line-height:1.55;max-width:32ch;color:rgba(255,255,255,.55)}
.voet-kop{display:block;font-family:var(--disp);font-weight:700;font-size:0.74rem;color:#fff;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:0.9rem}
.voet-lijst{list-style:none;display:grid;gap:0.55rem}
.voet-lijst a{color:rgba(255,255,255,.62);transition:color .2s,transform .2s}
.voet-lijst a:hover{color:#fff}
.voet-lijst .adres{color:rgba(255,255,255,.5);line-height:1.5}

.sociaal{display:flex;gap:0.5rem;margin-top:1.2rem;flex-wrap:wrap}
.sociaal a{width:2.1rem;height:2.1rem;border-radius:0.6rem;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);
  transition:background .25s,color .25s,transform .25s cubic-bezier(.2,.7,.3,1)}
.sociaal a:hover{background:var(--yellow);color:var(--navy);transform:translateY(-0.2rem)}

.voet-onder{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.1rem 0 1.4rem;border-top:1px solid rgba(255,255,255,.1);
  font-size:0.79rem;color:rgba(255,255,255,.58)}
.voet-onder span{display:block}

@media(max-width:1100px){
  .voet-top{grid-template-columns:1fr 1fr 1fr;gap:2rem}
  .voet-merk{grid-column:1 / -1}
}
@media(max-width:900px){
  .voet-top{grid-template-columns:1fr 1fr;gap:2rem}
  .voet-merk{grid-column:1 / -1}
}
@media(max-width:560px){
  .voet-top{grid-template-columns:1fr}
  .voet-onder{flex-direction:column;align-items:flex-start;gap:0.4rem}
}

/* =========================================================
   SLOT — compacte balk in plaats van een groot blok
   ========================================================= */
.slot{padding:clamp(2.4rem,4vw,3.6rem) 0;text-align:left;overflow:hidden}
.slot::before{width:60vw;max-width:44rem;height:44rem;top:-60%;left:22%;
  background:radial-gradient(circle,rgba(153,72,167,.28),transparent 62%)}
.slot-in{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.4rem,3vw,3rem);flex-wrap:wrap}
.slot-tekst{flex:1 1 26rem}
.slot h2{color:#fff;margin:0;max-width:22ch;
  font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.15}
.slot p{color:rgba(255,255,255,.6);font-size:0.97rem;margin-top:0.6rem;max-width:44ch}
.slot-actie{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;flex-shrink:0}
.slot-actie .btn{padding:0.9rem 1.5rem;font-size:0.97rem;box-shadow:0 0.4rem 1.4rem rgba(194,143,104,.28)}
.slot .tel{color:rgba(255,255,255,.78);font-size:0.93rem}
.slot .tel:hover{color:var(--yellow)}

@media(max-width:720px){
  .slot-in{flex-direction:column;align-items:flex-start}
  .slot h2{max-width:100%}
}

/* =========================================================
   SLOT — zwevende kaart op een lichte ondergrond
   ========================================================= */
.slot{background:#fff;color:inherit;padding:clamp(2.6rem,4.4vw,4.2rem) 0;text-align:left;
  overflow:visible}
.slot::before{display:none}
.slot-kaart{position:relative;overflow:hidden;border-radius:1.6rem;
  padding:clamp(1.9rem,3.2vw,2.8rem) clamp(1.7rem,3.2vw,3rem);
  background:linear-gradient(132deg,#512658 0%,#3a1b3f 52%,#231126 100%);
  box-shadow:0 1.4rem 3.4rem rgba(65,31,71,.3)}
.slot-kaart::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 100% at 88% 0,rgba(194,143,104,.16),transparent 62%),
             radial-gradient(60% 100% at 4% 100%,rgba(153,72,167,.34),transparent 60%)}
.slot-kaart::after{content:"";position:absolute;right:-6rem;top:-6rem;width:16rem;height:16rem;
  border-radius:50%;border:1px solid rgba(255,255,255,.09);pointer-events:none}
.slot-in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.5rem,3vw,3.5rem);flex-wrap:wrap}
.slot-tekst{flex:1 1 24rem}
.slot h2{color:#fff;margin:0;max-width:20ch;
  font-size:clamp(1.4rem,2.3vw,1.9rem);line-height:1.15}
.slot p{color:rgba(255,255,255,.62);font-size:0.95rem;margin-top:0.65rem;max-width:46ch}
.slot-punten{display:flex;gap:0.5rem 1.3rem;flex-wrap:wrap;margin-top:1.1rem}
.slot-punten i{display:inline-flex;align-items:center;gap:0.42rem;font-style:normal;
  font-size:0.85rem;font-weight:600;color:rgba(255,255,255,.72)}
.slot-punten svg{color:var(--yellow);flex-shrink:0}
.slot-actie{display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem;flex-shrink:0}
.slot-actie .btn{padding:0.95rem 1.6rem;font-size:1rem;
  box-shadow:0 0.5rem 1.6rem rgba(194,143,104,.26)}
.slot .tel{color:rgba(255,255,255,.72);font-size:0.9rem;font-weight:600}
.slot .tel:hover{color:var(--yellow)}

@media(max-width:760px){
  .slot-in{flex-direction:column;align-items:flex-start}
  .slot h2{max-width:100%}
  .slot-actie{width:100%}
  .slot-actie .btn{width:100%}
}

/* =========================================================
   JURIDISCHE PAGINA'S
   ========================================================= */
.jur-kop{padding:clamp(2.4rem,4vw,3.6rem) 0 clamp(2rem,3.2vw,2.8rem)}
.jur-kop h1{font-size:clamp(1.9rem,3.4vw,2.7rem);max-width:20ch;margin:0.8rem 0 0}
.jur-kop .lead{max-width:56ch;margin-top:0.9rem}
.jur-versie{margin-top:1.2rem;display:inline-flex;flex-wrap:wrap;gap:0.4rem 1rem;
  font-size:0.84rem;color:var(--muted);background:#fff;border:1px solid #ebdcee;
  border-radius:0.7rem;padding:0.6rem 1rem;
  box-shadow:0 1px 2px rgba(65,31,71,.04)}
.jur-versie b{color:var(--ink);font-weight:700}

.jur{max-width:52rem;font-size:1rem;line-height:1.7}
.jur > p{color:var(--muted);margin-bottom:1.1rem}
.jur h2{font-size:clamp(1.25rem,2vw,1.6rem);margin:2.6rem 0 0.9rem;padding-top:1.6rem;
  border-top:1px solid var(--line);color:var(--ink)}
.jur h2:first-of-type{margin-top:1.4rem}
.jur h3{font-size:1.08rem;margin:1.7rem 0 0.6rem;color:var(--ink)}
.jur ul{list-style:none;margin:0 0 1.2rem;display:grid;gap:0.55rem}
.jur ul li{position:relative;padding-left:1.4rem;color:var(--muted)}
.jur ul li::before{content:"";position:absolute;left:0.15rem;top:0.65rem;width:0.4rem;height:0.4rem;
  border-radius:50%;background:var(--blue)}
.jur ol{margin:0 0 1.2rem 1.3rem;display:grid;gap:0.5rem;color:var(--muted)}
.jur a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.jur a:hover{color:var(--navy)}
.jur strong,.jur b{color:var(--ink);font-weight:700}
.jur table{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 1.4rem;background:#fff;
  border:1px solid var(--line);border-radius:0.9rem;overflow:hidden;font-size:0.92rem}
.jur th,.jur td{padding:0.7rem 0.9rem;text-align:left;border-bottom:1px solid #f4eff5}
.jur thead th{background:#fbf7fc;font-family:var(--disp);font-weight:700;font-size:0.76rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.jur tbody tr:last-child td{border-bottom:0}
.jur .let{background:var(--yellow-50);border:1px solid #e2cbb9;border-radius:0.9rem;
  padding:1rem 1.2rem;margin:0 0 1.4rem}
.jur .let b{display:block;margin-bottom:0.3rem}
.jur .let p{margin:0;color:#634229}
.jur .onder{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line);
  font-size:0.88rem;color:var(--muted);line-height:1.6}

/* =========================================================
   COOKIEBANNER
   ========================================================= */
#cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:400;
  padding:0 var(--gut, 1.5rem) 1rem;pointer-events:none;
  display:flex;justify-content:center}
#cookiebar .doos{pointer-events:auto;width:min(58rem,100%);
  background:#fff;border:1px solid #ebdcee;border-radius:1.1rem;
  padding:1.1rem 1.3rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  box-shadow:0 1px 2px rgba(65,31,71,.06), 0 1.4rem 3rem rgba(65,31,71,.2);
  transform:translateY(1.5rem);opacity:0;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .5s}
#cookiebar.tonen .doos{transform:none;opacity:1}
#cookiebar p{flex:1 1 20rem;margin:0;font-size:0.92rem;color:var(--muted);line-height:1.5}
#cookiebar p b{display:block;color:var(--ink);font-family:var(--disp);font-weight:700;
  font-size:1rem;margin-bottom:0.2rem}
#cookiebar a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
#cookiebar .knoppen{display:flex;gap:0.6rem;flex-wrap:wrap;flex-shrink:0}
#cookiebar .btn{padding:0.75rem 1.2rem;font-size:0.9rem}
@media(max-width:560px){
  #cookiebar{padding-inline:1rem}
  #cookiebar .knoppen{width:100%}
  #cookiebar .knoppen .btn{flex:1}
}

/* de hero vult precies het scherm, zodat de volgende sectie er niet onderuit piept */
.hero{display:flex;align-items:center;min-height:calc(100svh - var(--hh,4.6rem))}
.hero > .wrap{width:100%}
@media(max-width:900px){
  .hero{display:block;min-height:0}
}

/* =========================================================
   TIJDELIJKE LOGOPLEK
   ========================================================= */
.logo{padding:0}
.logo-plek{display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;
  width:9.6rem;height:2.5rem;border:1.5px dashed #ddcbe0;border-radius:0.6rem;
  background:#fcf9fc;color:var(--muted);
  font-family:var(--disp);font-weight:700;font-size:0.7rem;letter-spacing:.16em;
  transition:border-color .25s,color .25s,background .25s}
.logo:hover .logo-plek{border-color:var(--blue);color:var(--blue);background:var(--blue-50)}
.voet-merk .logo-plek{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.62)}
.voet-merk .logo:hover .logo-plek{border-color:var(--yellow);color:var(--yellow);
  background:rgba(255,255,255,.1)}
@media(max-width:560px){ .logo-plek{width:7.8rem;height:2.2rem;font-size:0.64rem} }

/* wat meer lucht tussen het telefoonnummer en de knop */
.nav-r{gap:1.7rem}

/* =========================================================
   ECHTE FOTO'S EN LOGO
   ========================================================= */
.logo-img{display:block;height:2.8rem;width:auto;max-width:14rem;object-fit:contain;
  transition:opacity .25s,filter .25s}
.logo:hover .logo-img{opacity:.75}
.logo-img.wit{height:2.5rem;opacity:.95}
.voet-merk .logo:hover .logo-img.wit{opacity:1}
header.stuck .logo-img{height:2.6rem}
@media(max-width:560px){ .logo-img{height:2.3rem} }

/* foto's vullen hun vak */
.fto img,.pers img,.vkaart .beeld img,.ccard .kop img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pers,.vkaart .beeld,.ccard .kop{position:relative;overflow:hidden}
.fto{overflow:hidden}
.vkaart .beeld .nr,.pers .nm,.ccard .kop .tag{z-index:3}
.vkaart .beeld::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,10,22,.42),rgba(20,10,22,.12) 45%,transparent);z-index:2}
.pers img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.pers:hover img{transform:scale(1.04)}
.vkaart .beeld img{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.vkaart:hover .beeld img{transform:scale(1.05)}/* het verloop blijft onderaan de telefoon{background:none;text-shadow:0 1px 6px rgba(20,10,22,.55)}
/* uitsnede van de montagefoto iets naar rechts en omlaag */
.vkaart .beeld img[src*="monteren"]{object-position:64% 62%}
.vkaart .beeld img[src*="monteren"]{object-position:78% 74%}
.vkaart .beeld img[src*="monteren"]{object-position:88% 58%}
.vkaart .beeld img[src*="monteren"]{object-position:88% 34%}
.vkaart .beeld img[src*="inplannen"]{object-position:50% 30%}
.vkaart .beeld img[src*="opnemen"]{object-position:50% 30%}

/* =========================================================
   TELEFOON EN TABLET
   Alles hieronder is er alleen voor kleinere schermen.
   Op laptop en monitor verandert er niets.
   ========================================================= */

/* de vergelijkingstabel krijgt een eigen schuifvak */
.vtab-scroll{padding-top:1.5rem}
.vtab{margin-top:0}
.vtab-tip{display:none}

/* ---------- tot 1024 px: iPad liggend ---------- */
@media(max-width:1024px){
  .wrap{padding:0 1.5rem}
  .prz .cards{gap:1rem}
}

/* ---------- tot 960 px: iPad staand ---------- */
@media(max-width:960px){
  /* de hero mag hier niet meer het hele scherm vullen,
     anders valt de tekst onder de rand */
  .hero{display:block;min-height:0;padding:2.4rem 0 3rem}
  .hgrid{gap:2.4rem}
  .hero h1{max-width:100%}
  .hero .lead{max-width:38rem}

  /* twee foto's in het bewijsblok passen zich aan de breedte aan */
  .fotoduo{width:100%;height:auto;max-width:34rem;aspect-ratio:1/0.74}

  /* het vlaggetje "meest gekozen" heeft ruimte boven elke kaart nodig
     zodra de kaarten onder elkaar staan */
  .prz .cards{padding-top:2.4rem;gap:3rem}
  .prz .card.best::before{top:-2.2rem}

  /* portretten naast elkaar, maar in een nette verhouding */
  .mensen{grid-template-columns:1fr 1fr;gap:1rem;height:auto}
  .pers{min-height:0;height:auto;aspect-ratio:3/4}
}

/* ---------- tot 760 px: grote telefoon en kleine tablet ---------- */
@media(max-width:760px){
  .vtab-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:0.5rem;padding-inline:0.1rem}
  .vtab{min-width:32rem}
  .vtab-tip{display:block;margin:0 0 0.6rem;font-size:0.84rem;color:var(--muted);
    text-align:center}
}

/* ---------- tot 620 px: telefoon ---------- */
@media(max-width:620px){
  .wrap{padding:0 1.15rem}

  /* het telefoonnummer blijft bovenaan staan en blijft aan te klikken */
  .nav-r{gap:0.75rem}
  .nav-r .tel{display:inline-flex;font-size:0.95rem;gap:0.4rem}
  .nav-r .btn{padding:0.68rem 1rem;font-size:0.88rem}
  .nav{gap:0.75rem;padding:0.75rem 0}
  header.stuck .nav{padding:0.6rem 0}
  .logo-img{height:2.15rem}
  header.stuck .logo-img{height:2rem}

  /* kop en knoppen */
  h1{font-size:clamp(1.95rem,8.4vw,2.6rem)}
  h2{font-size:clamp(1.6rem,6.6vw,2.1rem)}
  .hero{padding:1.9rem 0 2.6rem}
  .hero .lead{margin-top:1.1rem}
  .hcta{flex-direction:column;align-items:stretch;gap:0.7rem;margin-top:1.6rem}
  .hcta .btn{width:100%;padding:1.05rem 1.2rem}
  .hsub{flex-direction:column;align-items:flex-start;gap:0.55rem;margin-top:1.4rem}  /* bewijs */
  .fotoduo{max-width:100%;aspect-ratio:1/0.8}
  .cijfers{margin-top:1.5rem;padding-top:1.2rem}

  /* stappen */
  .stapvoet{font-size:0.95rem;text-align:left;justify-content:flex-start}

  /* prijzen */
  .prz .cards{gap:3.2rem}
  .prz .card{max-width:30rem;margin-inline:auto;width:100%}
  .prz .card .btn{width:100%}

  /* wie wij zijn */
  .wij{gap:1.8rem}

  /* slot */
  .slot-kaart{border-radius:1.25rem}

  /* voet */
  .voet-top{padding-top:2.2rem}
}

/* ---------- tot 430 px: kleine telefoon ---------- */
@media(max-width:430px){
  .wrap{padding:0 1rem}
  /* het nummer wordt een knop met alleen het icoon, zo past de kop altijd */
  .nav-r .tel{font-size:0;gap:0;width:2.6rem;height:2.6rem;border-radius:0.7rem;
    background:var(--blue-50);color:var(--blue);justify-content:center;flex-shrink:0}
  .nav-r .btn{padding:0.66rem 0.9rem;font-size:0.85rem}
  .logo-img{height:1.95rem}
  header.stuck .logo-img{height:1.85rem}  .mensen{grid-template-columns:1fr;gap:0.9rem}
  .pers{aspect-ratio:4/3}
  .q button{font-size:1rem;padding:1.1rem 2.7rem 1.1rem 1.1rem}
  .vkaart .lijf{padding:1.15rem 1.15rem 1.3rem}
}

/* ---------- telefoon in de lengte gedraaid ---------- */
@media(max-height:520px) and (orientation:landscape){
  .hero{display:block;min-height:0;padding:1.8rem 0 2.4rem}  .fotoduo{height:auto;width:100%;max-width:26rem}
  .pers{aspect-ratio:3/4;min-height:0}
  .vkaart .beeld{height:9rem}
}

/* juridische tabellen kunnen op een telefoon opzij geschoven worden */
.jur-tabel{margin:0 0 1.4rem}
.jur-tabel table{margin:0}
@media(max-width:640px){
  .jur-tabel{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:0.4rem}
  .jur-tabel table{min-width:28rem}
  .jur th,.jur td{padding:0.6rem 0.7rem;font-size:0.87rem}
  .jur{font-size:0.99rem}
  .jur h2{margin-top:2rem;padding-top:1.3rem}
}

/* prijskaarten blijven ook op een tablet leesbaar breed */
@media(max-width:960px){
  .prz .card{max-width:34rem;margin-inline:auto;width:100%}
}

/* =========================================================
   ZACHT LICHT IN DE ACHTERGROND VAN DE HERO
   Twee heel lichte blauwe vlekken die langzaam bewegen,
   zodat het wit niet zo kaal is. Staat achter alle tekst.
   ========================================================= */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero > .wrap{position:relative;z-index:2}

.hero::before{
  content:"";position:absolute;inset:-30% -25%;z-index:0;pointer-events:none;
  border-radius:0;top:-30%;right:-25%;width:auto;height:auto;
  background:
    radial-gradient(40% 44% at 72% 20%, rgba(153,72,167,.13), transparent 66%),
    radial-gradient(34% 38% at 26% 74%, rgba(153,72,167,.08), transparent 68%);
  animation:gloed-a 34s ease-in-out infinite alternate;
  will-change:transform}

.hero::after{
  content:"";display:block;position:absolute;inset:-35% -30%;z-index:0;pointer-events:none;
  border-radius:0;bottom:auto;left:auto;width:auto;height:auto;
  background:
    radial-gradient(32% 40% at 46% 34%, rgba(65,31,71,.07), transparent 68%),
    radial-gradient(28% 34% at 84% 70%, rgba(153,72,167,.07), transparent 70%);
  animation:gloed-b 47s ease-in-out infinite alternate;
  will-change:transform}

@keyframes gloed-a{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3.5%,2.5%,0) scale(1.14)}
}
@keyframes gloed-b{
  0%  {transform:translate3d(0,0,0) scale(1.08)}
  100%{transform:translate3d(3%,-3%,0) scale(1)}
}

/* op kleine schermen en bij "minder beweging" blijft het licht stilstaan */
@media(max-width:700px){
  .hero::before,.hero::after{animation:none;will-change:auto}
}
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after{animation:none;will-change:auto}
}

/* =========================================================
   TWEE ZWEVENDE ICOONTJES IN DE HERO
   Camera en een stijgende lijn. Ze staan in de witte ruimte
   naast de tekst, dus ze komen nooit voor iets anders.
   ========================================================= */
.zweef{position:absolute;z-index:1;display:none;place-items:center;
  width:3rem;height:3rem;border-radius:0.95rem;
  background:#fff;border:1px solid var(--line);color:var(--blue);
  box-shadow:0 0.15rem 0.4rem rgba(65,31,71,.05), 0 0.8rem 2rem rgba(65,31,71,.11);
  pointer-events:none;will-change:transform}
.zweef.een{left:0.6%;top:26%;animation:zweef-a 9.5s ease-in-out infinite alternate}
.zweef.twee{right:0.6%;bottom:22%;animation:zweef-b 12s ease-in-out infinite alternate}

@keyframes zweef-a{
  0%  {transform:translate3d(0,0.4rem,0) rotate(-5deg)}
  100%{transform:translate3d(0,-0.9rem,0) rotate(4deg)}
}
@keyframes zweef-b{
  0%  {transform:translate3d(0,-0.5rem,0) rotate(4deg)}
  100%{transform:translate3d(0,0.8rem,0) rotate(-4deg)}
}

/* alleen tonen als er echt witte ruimte naast de tekst is */
@media(min-width:1200px){ .zweef{display:grid} }
@media(prefers-reduced-motion:reduce){ .zweef{animation:none;will-change:auto} }

/* =========================================================
   ZWEVENDE ICOONTJES — kaal, zonder wit blok,
   linksboven net boven de tekst en rechtsonder
   ========================================================= */
.zweef{background:none;border:0;box-shadow:none;border-radius:0;
  width:auto;height:auto;padding:0;display:none;
  color:var(--blue);opacity:.42}
.zweef svg{display:block;width:2.4rem;height:2.4rem;stroke-width:1.7}

/* ze hangen aan de tekstkolom, niet aan de rand van het scherm */
.hero > .wrap{position:relative}
.zweef.een{left:1.5rem;right:auto;top:-2.9rem;bottom:auto;
  animation:zweef-a 9.5s ease-in-out infinite alternate}
.zweef.twee{right:1.5rem;left:auto;bottom:-2.6rem;top:auto;
  animation:zweef-b 12s ease-in-out infinite alternate}

@media(min-width:1000px){ .zweef{display:block} }
@media(prefers-reduced-motion:reduce){ .zweef{animation:none} }

/* net genoeg lucht boven en onder, ook op een lager scherm */
.zweef.een{top:-2.5rem;left:1.4rem}
.zweef.twee{bottom:-2.2rem;right:1.4rem}
@media(max-height:760px) and (min-width:1000px){
  .zweef.een{top:-2rem}
  .zweef.twee{bottom:-1.8rem}
  .zweef svg{width:2.1rem;height:2.1rem}
}

/* het cameraatje in het midden, net linksboven de video's */
.zweef.een{left:50%;right:auto;top:-1.5rem}
@media(max-height:760px) and (min-width:1000px){
  .zweef.een{top:-1.1rem}
}

/* =========================================================
   DE ICOONTJES KOMEN BINNEN ALS DE PAGINA OPENT
   Het blokje doet het binnenkomen, het icoon zelf blijft zweven.
   ========================================================= */
.zweef{opacity:0;animation:zweef-in .9s cubic-bezier(.2,.8,.3,1) forwards}
.zweef.een{animation-delay:.7s}
.zweef.twee{animation-delay:.95s}
.zweef svg{animation:zweef-a 9.5s ease-in-out infinite alternate}
.zweef.twee svg{animation:zweef-b 12s ease-in-out infinite alternate}

@keyframes zweef-in{
  0%  {opacity:0;transform:translate3d(0,1rem,0) scale(.72) rotate(-10deg)}
  60% {opacity:.42;transform:translate3d(0,-0.15rem,0) scale(1.06) rotate(2deg)}
  100%{opacity:.42;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .zweef{opacity:.42;animation:none}
  .zweef svg{animation:none}
}

/* eerdere regels zetten de zweefanimatie nog op het blokje zelf;
   hieronder krijgt het blokje alleen het binnenkomen */
.hero .zweef.een,.hero .zweef.twee{
  animation-name:zweef-in;
  animation-duration:.9s;
  animation-timing-function:cubic-bezier(.2,.8,.3,1);
  animation-iteration-count:1;
  animation-direction:normal;
  animation-fill-mode:forwards}
.hero .zweef.een{animation-delay:.7s}
.hero .zweef.twee{animation-delay:.95s}
.hero .zweef.een svg{animation:zweef-a 9.5s ease-in-out infinite alternate}
.hero .zweef.twee svg{animation:zweef-b 12s ease-in-out infinite alternate}

@media(prefers-reduced-motion:reduce){
  .hero .zweef.een,.hero .zweef.twee{animation:none;opacity:.42}
  .hero .zweef.een svg,.hero .zweef.twee svg{animation:none}
}

/* =========================================================
   BLOG — overzicht en artikelen
   ========================================================= */

/* kop van een losse pagina (zelfde opzet als de juridische pagina's) */
.pag-kop{padding:clamp(2.4rem,4vw,3.6rem) 0 clamp(2rem,3.2vw,2.8rem)}
.pag-kop h1{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:20ch;margin:0.8rem 0 0}
.pag-kop .lead{max-width:56ch;margin-top:0.9rem}

/* ---------- overzicht ---------- */
.blogrij{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.6rem)}
.bkaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:1.4rem;overflow:hidden;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.6rem 1.8rem rgba(65,31,71,.07);
  transition:transform .42s cubic-bezier(.2,.7,.3,1),box-shadow .42s,border-color .3s}
.bkaart:hover{transform:translateY(-0.55rem);border-color:#dfd1e2;
  box-shadow:0 2px 4px rgba(65,31,71,.05), 0 1.6rem 3.2rem rgba(65,31,71,.14)}
.bkaart .beeld{position:relative;height:min(12rem,22vh);overflow:hidden;
  background:linear-gradient(158deg,var(--navy-l),var(--navy-d))}
.bkaart .beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.bkaart:hover .beeld img{transform:scale(1.05)}
.bkaart .beeld::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,10,22,.32),rgba(20,10,22,.06) 50%,transparent)}
.bkaart .soortje{position:absolute;left:1rem;top:1rem;z-index:2;
  background:#fff;color:var(--navy);font-family:var(--body);font-size:0.68rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:0.3rem 0.7rem;border-radius:0.45rem}
.bkaart .lijf{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.bkaart h2{font-family:var(--disp);font-weight:700;font-size:1.18rem;letter-spacing:-.032em;
  line-height:1.28;margin:0;color:var(--ink)}
.bkaart p{color:var(--muted);font-size:0.95rem;line-height:1.55;margin-top:0.6rem;flex:1}
.bkaart .onder{display:flex;align-items:center;gap:0.5rem;margin-top:1.2rem;padding-top:1rem;
  border-top:1px solid var(--line);font-size:0.82rem;color:var(--muted);font-weight:600}
.bkaart .onder .lees{margin-left:auto;color:var(--blue);display:inline-flex;align-items:center;
  gap:0.35rem;font-weight:700}
.bkaart .onder .lees svg{transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.bkaart:hover .onder .lees svg{transform:translateX(0.3rem)}

/* ---------- artikelpagina ---------- */
.art-meta{display:flex;flex-wrap:wrap;gap:0.5rem 1.1rem;margin-top:1.2rem;
  font-size:0.87rem;color:var(--muted);font-weight:600}
.art-meta i{display:inline-flex;align-items:center;gap:0.4rem;font-style:normal}
.art-meta svg{color:var(--blue);flex-shrink:0}

.art-beeld{position:relative;border-radius:1.4rem;overflow:hidden;
  aspect-ratio:16/8;margin-bottom:clamp(2rem,3.4vw,2.8rem);
  background:linear-gradient(158deg,var(--navy-l),var(--navy-d));
  box-shadow:0 1px 2px rgba(65,31,71,.05), 0 1rem 2.6rem rgba(65,31,71,.13)}
.art-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.art{max-width:44rem;font-size:1.06rem;line-height:1.72}
.art > p{color:var(--muted);margin-bottom:1.15rem}
.art > p.opening{font-size:1.16rem;color:var(--ink);font-weight:500;line-height:1.6;
  margin-bottom:1.6rem}
.art h2{font-size:clamp(1.35rem,2.2vw,1.75rem);margin:2.6rem 0 0.9rem;padding-top:1.7rem;
  border-top:1px solid var(--line);color:var(--ink)}
.art h2:first-of-type{margin-top:1.8rem}
.art h3{font-size:1.14rem;margin:1.8rem 0 0.55rem;color:var(--ink)}
.art ul{list-style:none;margin:0 0 1.3rem;display:grid;gap:0.6rem}
.art ul li{position:relative;padding-left:1.6rem;color:var(--muted)}
.art ul li::before{content:"";position:absolute;left:0.2rem;top:0.72rem;width:0.42rem;height:0.42rem;
  border-radius:50%;background:var(--blue)}
.art ol{margin:0 0 1.3rem 1.35rem;display:grid;gap:0.55rem;color:var(--muted)}
.art strong,.art b{color:var(--ink);font-weight:700}
.art a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.art a:hover{color:var(--navy)}
.art .kader{background:var(--blue-50);border:1px solid #ebdcee;border-radius:1.1rem;
  padding:1.2rem 1.4rem;margin:0 0 1.5rem}
.art .kader b{display:block;font-family:var(--disp);font-weight:700;letter-spacing:-.02em;
  font-size:1.05rem;margin-bottom:0.35rem;color:var(--ink)}
.art .kader p{margin:0;color:var(--muted);font-size:0.99rem}
.art .kader ul{margin:0.7rem 0 0}

/* korte samenvatting bovenaan het artikel */
.kort{background:#fff;border:1px solid var(--line);border-radius:1.2rem;
  padding:1.3rem 1.5rem;margin:0 0 1.9rem;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.5rem 1.5rem rgba(65,31,71,.05)}
.kort b{display:block;font-family:var(--disp);font-weight:700;font-size:0.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:0.7rem}
.kort ul{list-style:none;display:grid;gap:0.5rem;margin:0}
.kort li{position:relative;padding-left:1.7rem;color:var(--ink);font-size:0.99rem;line-height:1.5}
.kort li::before{content:"";position:absolute;left:0.15rem;top:0.42rem;width:0.85rem;height:0.85rem;
  border-radius:50%;background:var(--green-50)}
.kort li::after{content:"";position:absolute;left:0.42rem;top:0.66rem;width:0.3rem;height:0.16rem;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg)}

/* schrijver onderaan */
.schrijver{display:flex;align-items:center;gap:0.9rem;margin-top:2.4rem;padding-top:1.6rem;
  border-top:1px solid var(--line)}
.schrijver img{width:3.2rem;height:3.2rem;border-radius:50%;object-fit:cover;flex-shrink:0}
.schrijver b{display:block;font-family:var(--disp);font-weight:700;font-size:1rem;
  letter-spacing:-.025em;color:var(--ink)}
.schrijver span{display:block;font-size:0.87rem;color:var(--muted)}

/* verder lezen */
.verder{margin-top:clamp(2.4rem,4vw,3.4rem)}
.verder .kopje{font-family:var(--disp);font-weight:700;font-size:1.15rem;letter-spacing:-.03em;
  margin-bottom:1.1rem;color:var(--ink)}
.verder .blogrij{grid-template-columns:1fr 1fr}

@media(max-width:1000px){
  .blogrij{grid-template-columns:1fr 1fr}
}
@media(max-width:660px){
  .blogrij,.verder .blogrij{grid-template-columns:1fr}
  .bkaart .beeld{height:min(13rem,26vh)}
  .art{font-size:1.02rem}
  .art-beeld{aspect-ratio:16/10;border-radius:1.1rem}
  .art h2{margin-top:2rem;padding-top:1.4rem}
}

/* =========================================================
   MENU OP DE TELEFOON
   ========================================================= */
header{position:sticky;top:0;z-index:200}
.nav{position:relative;z-index:2;background:transparent}

/* de hamburgerknop */
.menuknop{display:none;position:relative;width:2.9rem;height:2.9rem;flex-shrink:0;
  border:1.5px solid var(--line);background:#fff;border-radius:0.75rem;cursor:pointer;
  padding:0;transition:border-color .25s,background .25s}
.menuknop:hover{border-color:var(--blue)}
.menuknop span{position:absolute;left:50%;width:1.15rem;height:2px;border-radius:2px;
  background:var(--ink);transform:translateX(-50%);
  transition:transform .32s cubic-bezier(.2,.8,.3,1),opacity .2s}
.menuknop span:nth-child(1){top:calc(50% - 0.38rem)}
.menuknop span:nth-child(2){top:calc(50% - 1px)}
.menuknop span:nth-child(3){top:calc(50% + 0.34rem)}
.menuknop.open{border-color:var(--blue);background:var(--blue-50)}
.menuknop.open span{background:var(--blue)}
.menuknop.open span:nth-child(1){transform:translateX(-50%) translateY(0.37rem) rotate(45deg)}
.menuknop.open span:nth-child(2){opacity:0}
.menuknop.open span:nth-child(3){transform:translateX(-50%) translateY(-0.35rem) rotate(-45deg)}

/* het uitklapmenu */
.mobmenu{display:none;position:absolute;left:0;right:0;top:100%;z-index:1;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1.2rem 2.4rem rgba(65,31,71,.14);
  max-height:0;overflow:hidden;opacity:0;visibility:hidden;
  transition:max-height .42s cubic-bezier(.3,.85,.3,1),opacity .28s,visibility .42s}
.mobmenu.open{max-height:32rem;opacity:1;visibility:visible}
.mobmenu > .wrap{padding-top:0.5rem;padding-bottom:1.2rem}
.moblinks{display:grid}
.moblinks a{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 0.2rem;font-family:var(--disp);font-weight:700;font-size:1.12rem;
  letter-spacing:-.03em;color:var(--ink);border-bottom:1px solid var(--line);
  transition:color .2s,padding-left .25s}
.moblinks a::after{content:"";width:0.5rem;height:0.5rem;border-right:2px solid #ddcbe0;
  border-bottom:2px solid #ddcbe0;transform:rotate(-45deg);transition:border-color .2s}
.moblinks a:hover,.moblinks a.act{color:var(--blue)}
.moblinks a:hover::after,.moblinks a.act::after{border-color:var(--blue)}
.mobmenu .tel{display:inline-flex;margin-top:1.2rem;font-size:1.05rem;color:var(--ink)}
.mobmenu .tel svg{color:var(--blue)}
.mobmenu .btn{display:flex;width:100%;margin-top:0.9rem;padding:1.05rem 1.2rem;font-size:1rem}

/* vanaf hier neemt het telefoonmenu het over */
@media(max-width:960px){
  .menuknop{display:block}
  .mobmenu{display:block}
}

/* =========================================================
   HET LOGO STAAT ER ALTIJD HELEMAAL OP
   ========================================================= */
.logo{flex-shrink:0;overflow:visible;line-height:0}
.logo-img{display:block;width:auto;max-width:none;object-fit:contain;overflow:visible}

@media(max-width:960px){
  .nav{gap:0.8rem;padding:0.85rem 0}
  header.stuck .nav{padding:0.7rem 0}
  .logo-img{height:2.6rem}
  header.stuck .logo-img{height:2.45rem}
}
@media(max-width:620px){
  .nav-r{gap:0.6rem}
  .logo-img{height:2.5rem}
  header.stuck .logo-img{height:2.35rem}
  .nav-r .btn{padding:0.7rem 0.95rem;font-size:0.86rem}
}
@media(max-width:470px){
  /* de knop zit in het menu, zo houdt het logo alle ruimte */
  .nav-r > .btn{display:none}
  .logo-img{height:2.5rem}
  header.stuck .logo-img{height:2.4rem}
  .nav-r .tel{font-size:0;gap:0;width:2.9rem;height:2.9rem;border-radius:0.75rem;
    background:var(--blue-50);color:var(--blue);justify-content:center;align-items:center;
    flex-shrink:0;display:inline-flex}
}

/* =========================================================
   BALK OP IPAD EN TELEFOON: alleen het logo en het menu.
   Het nummer en de knop staan in het uitklapmenu.
   ========================================================= */
@media(max-width:960px){
  .nav-r{margin-left:auto;gap:0}
  .nav-r .tel,.nav-r > .btn{display:none}
  .logo-img{height:2.75rem}
  header.stuck .logo-img{height:2.55rem}
}
@media(max-width:470px){
  /* deze regels zijn niet meer nodig, alles zit nu in het menu */
  .nav-r .tel{display:none}
  .logo-img{height:2.6rem}
  header.stuck .logo-img{height:2.45rem}
}

/* =========================================================
   FOUT: in een kolom is flex-basis de HOOGTE, niet de breedte.
   Daardoor werd de contactkaart onnodig lang op een telefoon.
   ========================================================= */
@media(max-width:760px){
  .slot-in{flex-direction:column;align-items:stretch;gap:1.4rem}
  .slot-tekst{flex:0 0 auto;width:100%;max-width:100%}
  .slot-actie{flex:0 0 auto;width:100%;align-items:stretch;gap:0.9rem}
  .slot-actie .btn{width:100%}
  .slot-actie .tel{justify-content:flex-start}
  .slot h2{max-width:100%}
  .slot p{max-width:100%}
  .slot-kaart{padding:1.7rem 1.4rem 1.6rem}
  .slot-punten{gap:0.45rem 1.1rem;margin-top:0.9rem}
}

/* =========================================================
   CASESPAGINA — tweede case gespiegeld, met één staande foto
   ========================================================= */
.uitg.omgekeerd{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.uitg-tekst{align-self:center}

/* één staande foto */
.fotoenkel{position:relative;overflow:hidden;border-radius:1.4rem;
  aspect-ratio:9/16;width:min(19rem,100%);margin-inline:auto;
  background:linear-gradient(158deg,var(--navy-l),var(--navy-d));
  box-shadow:0 1px 2px rgba(65,31,71,.06), 0 1.2rem 2.8rem rgba(65,31,71,.22);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s}
.fotoenkel:hover{transform:translateY(-0.5rem);
  box-shadow:0 2px 4px rgba(65,31,71,.07), 0 1.8rem 3.6rem rgba(65,31,71,.3)}
.fotoenkel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2}
.fotoenkel .ph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.26);z-index:1}

/* de lege fotoplekken in het duo laten ook een icoontje zien */
.fto .ph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.26);z-index:1}
.fto img{z-index:2}

/* lijstje bij de tweede case */
.werklijst{list-style:none;margin:1.1rem 0 0;display:grid;gap:0.5rem}
.werklijst li{position:relative;padding-left:1.65rem;color:var(--muted);font-size:0.97rem}
.werklijst li::before{content:"";position:absolute;left:0.15rem;top:0.42rem;width:0.9rem;height:0.5rem;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}

/* het citaatblok zonder klantnaam blijft rustig */
.zeg em{color:var(--muted)}

@media(max-width:900px){
  .uitg.omgekeerd{grid-template-columns:1fr}
  .uitg.omgekeerd .uitg-tekst{order:1}
  .uitg.omgekeerd .fotoenkel{order:2}
  .fotoenkel{width:min(16rem,72%)}
}
@media(max-width:560px){
  .fotoenkel{width:min(14rem,80%)}
}

/* =========================================================
   CASESPAGINA — de drie video's uit de homepage als bewijs
   ========================================================= */
.casefan{height:min(26rem,52vh);margin:0 auto}/* =========================================================
   UPFRONT — twee staande foto's met een balkje eroverheen
   ========================================================= */
.upduo{position:relative;width:100%;max-width:24rem;margin-inline:auto;aspect-ratio:1/1.16}
.upf{position:absolute;border-radius:1rem;overflow:hidden;background:#311935;
  box-shadow:0 1px 2px rgba(65,31,71,.08), 0 1rem 2.4rem rgba(65,31,71,.24);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s}
.upf img{display:block;width:100%;height:100%;object-fit:cover}

.upf.een{left:0;top:0;width:51%;aspect-ratio:828/1706;z-index:1}
.upf.twee{right:0;top:9%;width:51%;aspect-ratio:828/1706;z-index:2;
  border:0.28rem solid #f4eaf6}
.upf.balk{left:50%;bottom:0;width:76%;aspect-ratio:828/195;z-index:3;
  transform:translateX(-50%);border:0.28rem solid #fff;border-radius:0.75rem;
  box-shadow:0 1px 2px rgba(65,31,71,.1), 0 0.8rem 2rem rgba(65,31,71,.26)}

.upduo:hover .upf.een{transform:translate(-0.4rem,-0.4rem)}
.upduo:hover .upf.twee{transform:translate(0.4rem,0.4rem)}
.upduo:hover .upf.balk{transform:translateX(-50%) translateY(0.35rem)}

@media(max-width:900px){
  .casefan{height:min(22rem,44vh)}
  .upduo{max-width:21rem}
}
@media(max-width:560px){
  .casefan{height:min(19rem,38vh)}  .upduo{max-width:18rem}
  .upf.balk{width:82%}
}

/* het logo van de klant boven de tekst van de case */
.merklogo{display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:1rem;
  padding:0.85rem 1.15rem;margin-bottom:1.05rem;
  box-shadow:0 1px 2px rgba(65,31,71,.05), 0 0.5rem 1.4rem rgba(65,31,71,.08);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.merklogo:hover{transform:translateY(-0.2rem);
  box-shadow:0 2px 4px rgba(65,31,71,.06), 0 0.9rem 2.2rem rgba(65,31,71,.13)}
.merklogo img{display:block;height:4.4rem;width:auto}
@media(max-width:560px){
  .merklogo{padding:0.7rem 0.95rem;margin-bottom:0.9rem}
  .merklogo img{height:3.6rem}
}

/* het logo ligt over de foto's heen, rechtsboven */
.upduo{overflow:visible}
.upduo .merklogo{position:absolute;top:-4%;right:-5%;z-index:4;margin:0;
  padding:0.6rem 0.75rem;border-radius:0.9rem;
  box-shadow:0 2px 4px rgba(65,31,71,.08), 0 0.9rem 2.2rem rgba(65,31,71,.2)}
.upduo .merklogo img{height:3.1rem}
.upduo:hover .merklogo{transform:translate(0.3rem,-0.3rem)}

@media(max-width:900px){
  .upduo .merklogo{top:-3%;right:-3%;padding:0.55rem 0.7rem}
  .upduo .merklogo img{height:2.7rem}
}
@media(max-width:560px){
  .upduo .merklogo{top:-2%;right:-2%;padding:0.5rem 0.62rem;border-radius:0.75rem}
  .upduo .merklogo img{height:2.3rem}
}
/* het logo naar links, tussen de hoek en het midden van de linkerfoto,
   en de hele fotogroep iets naar rechts zodat het niet tegen de tekst plakt */
.uitg.omgekeerd .upduo{margin-left:auto;margin-right:0}
.upduo .merklogo{left:9%;right:auto;top:-3%}
.upduo:hover .merklogo{transform:translate(-0.3rem,-0.3rem)}

@media(max-width:900px){
  .uitg.omgekeerd .upduo{margin-inline:auto}
  .upduo .merklogo{left:7%;top:-2.5%}
}
@media(max-width:560px){
  .upduo .merklogo{left:5%;top:-2%}
}

/* =========================================================
   ZES VIDEO'S ALS MUUR — twee rijen van drie, overlappend.
   Bovenste rij: cijfer linksboven. Onderste rij: linksonder.
   Zo valt er nooit een kaart over een cijfer heen.
   ========================================================= */
.muur{position:relative;width:100%;max-width:30rem;margin-inline:auto;aspect-ratio:1/1.3}
.mv{position:absolute;width:36%;aspect-ratio:9/16;margin:0;border-radius:0.9rem;overflow:hidden;
  background:linear-gradient(158deg,#522d59,#311935);
  box-shadow:0 1px 2px rgba(65,31,71,.1), 0 0.8rem 2rem rgba(65,31,71,.26);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s}
.mv img{display:block;width:100%;height:100%;object-fit:cover}
.mv::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,10,22,.34),transparent 34%,transparent 62%,rgba(20,10,22,.38))}

/* bovenste rij */
.mv.a{left:0;   top:0;    transform:rotate(-4deg); z-index:1}
.mv.b{left:32%; top:4.6%; transform:rotate(2.5deg);z-index:2}
.mv.c{left:64%; top:0;    transform:rotate(-2deg); z-index:3}
/* onderste rij, ligt over de bovenste heen */
.mv.d{left:0;   top:43%;   transform:rotate(3deg);  z-index:4}
.mv.e{left:32%; top:47.6%; transform:rotate(-3deg); z-index:5}
.mv.f{left:64%; top:43%;   transform:rotate(2deg);  z-index:6}

.muur:hover .mv.a{transform:rotate(-5.5deg) translate(-0.3rem,-0.3rem)}
.muur:hover .mv.b{transform:rotate(3.5deg)  translateY(-0.35rem)}
.muur:hover .mv.c{transform:rotate(-3deg)   translate(0.3rem,-0.3rem)}
.muur:hover .mv.d{transform:rotate(4deg)    translate(-0.3rem,0.3rem)}
.muur:hover .mv.e{transform:rotate(-4deg)   translateY(0.35rem)}
.muur:hover .mv.f{transform:rotate(3deg)    translate(0.3rem,0.3rem)}

/* het aantal weergaven in de hoek */
.kijk{position:absolute;z-index:3;display:block;
  background:rgba(20,10,22,.74);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:0.55rem;padding:0.28rem 0.45rem;
  box-shadow:0 0.3rem 0.9rem rgba(15,7,17,.3)}
.kijk b{display:block;font-family:var(--disp);font-weight:700;font-size:0.8rem;
  letter-spacing:-.03em;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums}
.kijk em{display:block;font-style:normal;font-family:var(--body);font-weight:600;
  font-size:0.56rem;color:rgba(255,255,255,.68);margin-top:1px;letter-spacing:.01em}
.mv.a .kijk,.mv.b .kijk,.mv.c .kijk{top:6%;left:6%}
.mv.d .kijk,.mv.e .kijk,.mv.f .kijk{bottom:6%;left:6%}

@media(max-width:1000px){
  .muur{max-width:26rem}
  .kijk b{font-size:0.74rem}
  .kijk em{font-size:0.52rem}
}
@media(max-width:560px){
  .muur{max-width:100%}
  .kijk{padding:0.24rem 0.38rem;border-radius:0.45rem}
  .kijk b{font-size:0.7rem}
  .kijk em{font-size:0.5rem}
}

/* de cijfers zonder vakje eromheen, alleen tekst op de video */
.kijk{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-radius:0;padding:0;box-shadow:none}
.kijk b{font-size:0.92rem;text-shadow:0 1px 3px rgba(15,7,17,.85), 0 0 10px rgba(15,7,17,.6)}
.kijk em{font-size:0.6rem;color:rgba(255,255,255,.82);
  text-shadow:0 1px 3px rgba(15,7,17,.85), 0 0 8px rgba(15,7,17,.55)}
.mv.a .kijk,.mv.b .kijk,.mv.c .kijk{top:5%;left:7%}
.mv.d .kijk,.mv.e .kijk,.mv.f .kijk{bottom:5%;left:7%}

/* iets meer verloop, want de cijfers hebben nu geen eigen achtergrond */
.mv::after{background:linear-gradient(180deg,rgba(20,10,22,.5),transparent 32%,
  transparent 58%,rgba(20,10,22,.55))}

/* het Upfront-logo aan de linkerzijde van de Instagram-foto */
.upduo .merklogo{left:0;right:auto;top:7%;transform:translateX(-45%)}
.upduo:hover .merklogo{transform:translateX(-45%) translateY(-0.3rem)}

@media(max-width:1000px){
  .kijk b{font-size:0.86rem}
}
@media(max-width:900px){
  .upduo .merklogo{left:0;top:6%;transform:translateX(-38%)}
  .upduo:hover .merklogo{transform:translateX(-38%) translateY(-0.3rem)}
}
@media(max-width:560px){
  .kijk b{font-size:0.8rem}
  .kijk em{font-size:0.55rem}
  .upduo .merklogo{left:0;top:5%;transform:translateX(-30%)}
  .upduo:hover .merklogo{transform:translateX(-30%) translateY(-0.25rem)}
}

/* =========================================================
   DE BOVENSTE RIJ EEN HALVE KAART NAAR LINKS
   Zo staat elke bovenste video half over twee onderste heen,
   en blijven de hoeken met de cijfers vrij.
   ========================================================= */
.muur{aspect-ratio:1/1.25}
.mv{width:35%}
.mv.a{left:0;     top:0}
.mv.b{left:24.5%; top:3.7%}
.mv.c{left:49%;   top:0}
.mv.d{left:16%;   top:44.7%}
.mv.e{left:40.5%; top:48.4%}
.mv.f{left:65%;   top:44.7%}

/* bovenste rij een tikje terug naar rechts (verschuiving nu 10% i.p.v. 16%) */
.mv.a{left:6%}
.mv.b{left:30.5%}
.mv.c{left:55%}

/* =========================================================
   VIER VIDEO'S IN PLAATS VAN ZES — twee rijen van twee,
   onderste rij een stukje naar rechts, rijen overlappen
   ========================================================= */
.muur.vier{aspect-ratio:1/1.38;max-width:27rem}
.muur.vier .mv{width:40%}
.muur.vier .mv.a{left:6%;  top:0;     z-index:1}
.muur.vier .mv.b{left:42%; top:2.5%;  z-index:2}
.muur.vier .mv.c{left:16%; top:45.7%; z-index:3}
.muur.vier .mv.d{left:52%; top:48.2%; z-index:4}

/* bovenste rij: cijfer linksboven. onderste rij: linksonder */
.muur.vier .mv.a .kijk,.muur.vier .mv.b .kijk{top:5%;bottom:auto;left:7%}
.muur.vier .mv.c .kijk,.muur.vier .mv.d .kijk{bottom:5%;top:auto;left:7%}

.muur.vier:hover .mv.a{transform:rotate(-5.5deg) translate(-0.3rem,-0.3rem)}
.muur.vier:hover .mv.b{transform:rotate(3.5deg)  translate(0.3rem,-0.3rem)}
.muur.vier:hover .mv.c{transform:rotate(-4deg)   translate(-0.3rem,0.3rem)}
.muur.vier:hover .mv.d{transform:rotate(3deg)    translate(0.3rem,0.3rem)}

/* de cijfers mogen wat groter nu er minder kaarten zijn */
.muur.vier .kijk b{font-size:1rem}
.muur.vier .kijk em{font-size:0.64rem}

@media(max-width:1000px){ .muur.vier{max-width:24rem} }
@media(max-width:560px){
  .muur.vier{max-width:100%}
  .muur.vier .kijk b{font-size:0.88rem}
  .muur.vier .kijk em{font-size:0.58rem}
}

/* lichte play-knop midden op elke video */
.mv .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.15);border:1.4px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  box-shadow:0 0.2rem 0.8rem rgba(15,7,17,.2);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),background .3s,border-color .3s}
.mv .play svg{margin-left:2px;opacity:.92}
.muur:hover .mv .play{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.5);
  transform:translate(-50%,-50%) scale(1.08)}

@media(max-width:1000px){ .mv .play{width:2.2rem;height:2.2rem} }
@media(max-width:560px){ .mv .play{width:1.9rem;height:1.9rem}
  .mv .play svg{width:12px;height:12px} }

/* =========================================================
   HOVER: geen gat meer tussen de kaarten.
   De kaarten schoven zijwaarts uit elkaar én draaiden verder
   door, en dat at de overlap op. Nu bewegen ze alleen nog
   omhoog en omlaag, met dezelfde hoek als in rust.
   ========================================================= */
.muur.vier:hover .mv.a{transform:rotate(-4deg)  translateY(-0.35rem)}
.muur.vier:hover .mv.b{transform:rotate(2.5deg) translateY(-0.35rem)}
.muur.vier:hover .mv.c{transform:rotate(-2deg)  translateY(0.35rem)}
.muur.vier:hover .mv.d{transform:rotate(3deg)   translateY(0.35rem)}

/* de branchetags kwamen te traag binnen: kortere animatie en kleinere sprong */
.btag.rv{opacity:0;transform:translateY(0.35rem) scale(.98);
  transition:opacity .38s cubic-bezier(.2,.7,.3,1),transform .38s cubic-bezier(.2,.7,.3,1)}
.btag.rv.in{opacity:1;transform:none}

/* =========================================================
   OVERZICHT — klein blok tussen het werk en de prijzen
   ========================================================= */
.dash{padding:clamp(2.8rem,4.4vw,4rem) 0}
.dashgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:center}
.dashtekst h2{margin-top:0.9rem;font-size:clamp(1.55rem,2.7vw,2.1rem)}
.dashtekst .lead{margin-top:0.9rem;max-width:40ch;font-size:1.02rem}
.dashtekst .rlist{margin-top:1.2rem}
.dashtekst .rlist li{font-size:0.98rem}

/* het gratis-label */
.gratis{display:inline-flex;align-items:center;gap:0.5rem;margin-top:1.3rem;
  background:var(--green-50);color:var(--green);border:1px solid #cee2da;
  border-radius:99px;padding:0.55rem 1.05rem;
  font-family:var(--disp);font-weight:700;font-size:0.92rem;letter-spacing:-.02em}
.gratis svg{flex-shrink:0}

/* de schermafbeelding in een venstertje */
.dash .scr{transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s}
.dash .scr:hover{transform:translateY(-0.4rem);
  box-shadow:0 2px 4px rgba(65,31,71,.06), 0 1.8rem 3.8rem rgba(65,31,71,.15)}
.dashbeeld{position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(158deg,#522d59,#311935)}
.dashbeeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 0;display:block;z-index:2}
.dashbeeld .ph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.26);z-index:1}

@media(max-width:900px){
  .dashgrid{grid-template-columns:1fr;gap:2rem}
  .dashtekst .lead{max-width:none}
}
@media(max-width:560px){
  .dash{padding:2.4rem 0}
  .gratis{font-size:0.86rem;padding:0.5rem 0.9rem}
}

/* het gratis-label mag er echt uitspringen: vol gevuld in plaats van licht */
.gratis{background:linear-gradient(135deg,#368d69,#2a6d51);color:#fff;border:0;
  margin-top:1.5rem;padding:0.72rem 1.25rem 0.72rem 0.72rem;gap:0.65rem;
  font-size:1.02rem;letter-spacing:-.025em;
  box-shadow:0 0.15rem 0.4rem rgba(42,109,81,.2), 0 0.7rem 1.6rem rgba(42,109,81,.28)}
.gratis svg{width:14px;height:14px;padding:0.3rem;box-sizing:content-box;
  background:rgba(255,255,255,.22);border-radius:50%;color:#fff}
@media(max-width:560px){
  .gratis{font-size:0.94rem;padding:0.62rem 1.05rem 0.62rem 0.62rem}
}


/* objectposities van foto's, als klasse in plaats van inline stijl */
.op1{object-position:50% 45%}
.op2{object-position:30% 50%}
.op3{object-position:70% 42%}
.op4{object-position:50% 35%}
.op5{object-position:50% 40%}
.op6{object-position:50% 42%}
.op7{object-position:50% 30%}
.op8{object-position:88% 34%}


/* losse stijlen uit de html gehaald, zodat de CSP geen inline stijl hoeft toe te staan */
.u1{color:var(--ink)}
.u2{text-align:center}
.u3{text-align:center;margin-top:1.875rem;color:var(--muted);font-size:0.96875rem}
.u4{margin-top:0.9rem}

/* =========================================================
   TABELLEN EN LIJSTEN IN BLOGARTIKELEN
   ========================================================= */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.3rem 0}
.scroll table{min-width:26rem}
.art table{width:100%;border-collapse:separate;border-spacing:0;margin:0;
  background:#fff;border:1px solid var(--line);border-radius:0.9rem;overflow:hidden;
  font-size:0.95rem;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 0.4rem 1.2rem rgba(65,31,71,.05)}
.art th,.art td{padding:0.7rem 0.95rem;text-align:left;border-bottom:1px solid #f4eff5;
  vertical-align:top}
.art thead th{background:#fbf7fc;font-family:var(--disp);font-weight:700;font-size:0.76rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.art tbody tr:last-child td{border-bottom:0}
.art tbody td:first-child{color:var(--ink);font-weight:600}

/* afvinklijst en kruislijst binnen een artikel */
.art ul.vink li::before{content:"";left:2px;top:0.62rem;width:0.55rem;height:0.3rem;
  background:none;border-radius:0;border-left:2px solid var(--green);
  border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.art ul.kruis li::before{background:var(--rood, #C0392B)}
:root{--rood:#C0392B}

/* =========================================================
   INLOGGEN IN DE BALK, op de plek van het telefoonnummer
   ========================================================= */
.inlog{position:relative;display:inline-flex;align-items:center;gap:0.45rem;
  font-size:0.96875rem;font-weight:600;color:var(--muted);white-space:nowrap;
  border:0;background:none;padding:0;border-radius:0;
  transition:color .2s}
.inlog svg{color:var(--muted);width:15px;height:15px;flex-shrink:0;transition:color .2s}

/* in het telefoonmenu is het een gewone regel, geen knop */
.mobmenu .inlog{border:0;background:none;padding:0;margin-top:1.2rem;font-size:1.05rem;
  border-radius:0}
.mobmenu .inlog:hover{background:none;color:var(--blue)}
.mobmenu .inlog svg{color:var(--blue)}
.mobmenu .tel{margin-top:0.9rem}

@media(max-width:960px){
  .nav-r > .inlog{display:none}
}

/* ---------- de inlogpagina ---------- */
.inlogkaart{max-width:30rem;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:1.4rem;padding:clamp(1.8rem,3.4vw,2.6rem);text-align:center;
  box-shadow:0 1px 2px rgba(65,31,71,.04), 0 1rem 2.6rem rgba(65,31,71,.09)}
.inlogkaart .slot-ic{display:grid;place-items:center;width:3.4rem;height:3.4rem;margin:0 auto 1.1rem;
  border-radius:1rem;background:var(--blue-50);color:var(--blue)}
.inlogkaart h1{font-size:clamp(1.5rem,2.6vw,1.95rem);margin:0}
.inlogkaart p{margin-top:0.85rem;color:var(--muted)}
.inlogkaart .btn{width:100%;margin-top:1.5rem}
.inlogkaart .onderregel{margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:0.92rem}
.inlogkaart .onderregel a{color:var(--blue);font-weight:700}

/* =========================================================
   INLOGGEN ZIET ERUIT ALS DE ANDERE MENULINKS
   Zelfde grootte, zelfde gewicht, zelfde kleur en hetzelfde
   gele streepje bij het aanwijzen.
   ========================================================= */
.nav{gap:1.6875rem}
.nav-r > .inlog{position:relative;display:inline-flex;align-items:center;gap:0.45rem;
  font-size:0.96875rem;font-weight:600;color:var(--muted);
  border:0;background:none;padding:0;border-radius:0;
  transition:color .2s}
.nav-r > .inlog svg{color:var(--muted);width:15px;height:15px;transition:color .2s}
.nav-r > .inlog::after{content:"";position:absolute;left:0;bottom:-0.375rem;width:100%;height:2px;
  background:var(--yellow);transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.nav-r > .inlog:hover{color:var(--ink);background:none}
.nav-r > .inlog:hover svg{color:var(--ink)}
.nav-r > .inlog:hover::after{transform:scaleX(1);transform-origin:left}
.nav-r > .inlog.act{color:var(--ink)}
.nav-r > .inlog.act::after{transform:scaleX(1)}

/* inloggen iets donkerder dan de andere menulinks, zonder dikker te worden */
.nav-r > .inlog{color:#3d303f}
.nav-r > .inlog svg{color:#3d303f}

/* =========================================================
   DE BALK OP ELK SCHERM — dit blok staat bewust als laatste,
   zodat het niet door eerdere regels wordt overruled.
   ========================================================= */

/* breed scherm: logo links, menu midden, inloggen en de knop rechts */
@media(min-width:961px){
  .nav-r{display:flex;align-items:center;gap:1.3rem}
  .nav-r > .inlog{display:inline-flex}
  .nav-r > .btn{display:inline-flex}
  .menuknop{display:none}
}

/* tablet en telefoon: alleen het logo en de hamburger */
@media(max-width:960px){
  .nlinks{display:none}
  .nav-r{margin-left:auto;gap:0}
  .nav-r > .inlog{display:none}
  .nav-r > .btn{display:none}
  .nav-r .tel{display:none}
  .menuknop{display:block}
}

/* op de inlogpagina staat de kaart onder elkaar, met de knop niet volle breedte */
.inlogkaart h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:0}
.inlogkaart .btn{width:auto;padding-inline:1.6rem}

/* =========================================================
   INLOGPAGINA — donker, past op één scherm, eigen opzet
   (bewust anders dan het overzichtsblok op de homepage)
   ========================================================= */





.inlogknoppen{display:flex;gap:0.8rem;flex-wrap:wrap;margin-top:1.7rem}
.btn-licht{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.22);
  box-shadow:none}
.btn-licht:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.34);color:#fff}

/* het schermpje, licht gekanteld zodat het niet op de homepage lijkt */


@media(max-width:900px){
  .inlogmid{grid-template-columns:1fr;gap:2rem;text-align:center}
  .inlogtekst > p{margin-inline:auto}
  .inlogknoppen{justify-content:center}
  .inlogbeeld{max-width:24rem}
  .inlogbeeld .scherm{transform:none}
  .inlogbeeld:hover .scherm{transform:none}
  .binnenkort{left:50%;transform:translateX(-50%)}
  .inlogvoet .wrap{justify-content:center;text-align:center}
}
@media(max-width:560px){
  .schermbeeld{height:min(14rem,26vh)}
  .inlogknoppen .btn{width:100%}
}

/* =========================================================
   SOEPELER SCROLLEN OP EEN TELEFOON
   Het vervagende glas achter de balk moest bij elke frame
   opnieuw berekend worden. Op kleine schermen is dat te duur,
   dus daar wordt het een gewone witte balk.
   ========================================================= */
@media(max-width:960px){
  header#hdr{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
  body.loginpagina header#hdr{background:#231126}
  .mv .play{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.22)}
}

/* kortere, kleinere beweging op een telefoon: minder rekenwerk per frame */
@media(max-width:900px){
  .rv{transform:translateY(0.75rem);
    transition:opacity .42s cubic-bezier(.2,.7,.3,1),transform .42s cubic-bezier(.2,.7,.3,1)}
  .rv.van-links{transform:translateX(-0.9rem)}
  .rv.van-rechts{transform:translateX(0.9rem)}
  .rv.groei{transform:scale(.985)}
  .d1{transition-delay:.05s}.d2{transition-delay:.1s}.d3{transition-delay:.15s}.d4{transition-delay:.2s}
  .shead h2,.shead .lead{transform:translateY(0.5rem);
    transition-duration:.42s}
}

/* op een aanraakscherm bestaat hover niet echt: die effecten uitzetten
   scheelt onnodige herberekeningen tijdens het scrollen */
@media(hover:none){
  .vkaart:hover,.card:hover,.kaart:hover,.bkaart:hover,.stapln .stp:hover,
  .cstat:hover,.ccard:hover,.fp:hover,.pers:hover,.btag:hover,.mv:hover,
  .upduo:hover .upf.een,.upduo:hover .upf.twee,.upduo:hover .upf.balk,
  .muur:hover .mv.a,.muur:hover .mv.b,.muur:hover .mv.c,.muur:hover .mv.d{
    transform:none}
  .fotoduo:hover .fto.hor,.fotoduo:hover .fto.ver{transform:translateY(var(--py,0px))}
  .scr:hover,.dash .scr:hover{transform:none}
}

/* =========================================================
   INLOGPAGINA OP EEN TELEFOON
   Het schermpje mag niet over de rand vallen, de kop moet
   passen, en de balk moet donker blijven.
   ========================================================= */

@media(max-width:900px){
  .inlogscherm{min-height:0;padding-bottom:0}
  .inlogmid{padding-top:2.2rem;padding-bottom:2.4rem;gap:2.2rem}
  .inlogtekst h1{font-size:clamp(1.7rem,7.4vw,2.3rem);margin-top:0.9rem}
  .inlogtekst > p{font-size:1rem;margin-top:0.8rem}
  .inlogknoppen{margin-top:1.3rem;gap:0.6rem}
  .inlogbeeld{max-width:min(22rem,100%);margin-bottom:0.6rem}
  .schermbeeld{height:auto;aspect-ratio:16/10}
  .binnenkort{left:50%;bottom:-0.8rem;font-size:0.72rem;padding:0.35rem 0.7rem}
  .inlogvoet{padding:0.9rem 0}
  .inlogvoet .wrap{flex-direction:column;gap:0.35rem;align-items:center}
}

/* het uitklapmenu blijft leesbaar op de donkere pagina */

@media(max-width:560px){
  .inlogmid{padding-top:1.8rem;padding-bottom:2rem}
  .inlogtekst h1 br{display:none}
  .inlogbeeld{max-width:100%}
  .inlogknoppen{flex-direction:column}
  .inlogknoppen .btn{width:100%}
}

/* =========================================================
   DE SCHERMAFBEELDING VOLLEDIG IN BEELD
   Het kader krijgt precies de verhouding van het bestand
   (1800 x 1094). Zo past de foto er exact in: niets wordt
   afgesneden en er blijft nergens een rand over. Het kader
   houdt zijn hoogte vast, ook voordat de foto binnen is.
   ========================================================= */

/* =========================================================
   KOPPEN ZONDER LABELTJE ERBOVEN
   De marge boven de koppen zat er voor het labeltje dat er
   niet meer is. Zonder deze regels blijft er een gat staan.
   ========================================================= */
.shead h2{margin-top:0}
.pag-kop h1,.jur-kop h1{margin-top:0}
.dashtekst h2{margin-top:0}

/* =========================================================
   FOTO'S RUSTIG IN BEELD
   Een foto die klaar is verschijnt met een korte overvloeier
   in plaats van er ineens te staan. De klasse wordt door
   app.js gezet, dus zonder javascript blijft alles gewoon
   zichtbaar. We gebruiken een animatie en geen transition,
   zodat de bestaande hover-bewegingen niet in de weg zitten.
   ========================================================= */
img.tefaden{opacity:0}
img.tefaden.geladen{animation:beeldin .5s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes beeldin{ from{opacity:0} to{opacity:1} }

@media(prefers-reduced-motion:reduce){
  img.tefaden{opacity:1}
  img.tefaden.geladen{animation:none}
}

/* =========================================================
   PAGINA NIET GEVONDEN
   Geen stijl in de html zelf, want de beveiligingsregels
   van de site staan dat niet toe.
   ========================================================= */
.knoppen404{margin-top:1.6rem}
.nietgevonden{max-width:34rem;margin-left:auto;margin-right:auto}

/* het picture-element mag de opmaak niet in de weg zitten:
   de img blijft zich gedragen alsof hij er direct in staat */
picture{display:contents}

/* =========================================================
   DE PRIJSSCHAKELAAR
   "1 maand gratis" hangt los bóven de schakelaar, op dezelfde
   manier als "Meest gekozen" boven de prijskaart. Daarom staat
   het bandje er los boven en niet meer in de knop zelf.
   ========================================================= */
.tog{margin-top:1.7rem;overflow:visible}
.tog button{display:inline-flex;align-items:center;justify-content:center;line-height:1.2}

/* Het bandje zit met zijn hart precies op de bovenrand van de schakelaar,
   dus voor de helft erop en voor de helft erboven. De -0.3125rem haalt de
   binnenmarge van de schakelaar eraf, anders zou het net te laag hangen.
   Kleur gelijk aan het groene label bij het overzicht hierboven. */
.tog .save{
  position:absolute;top:-0.3125rem;left:50%;transform:translate(-50%,-50%);
  margin:0;white-space:nowrap;z-index:3;
  background:linear-gradient(135deg,#368d69,#2a6d51);color:#fff;
  border-radius:6.1875rem;padding:0.16rem 0.46rem;
  font-size:0.5rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  box-shadow:0 0.06rem 0.18rem rgba(42,109,81,.18), 0 0.22rem 0.55rem rgba(42,109,81,.2);
}
@media(max-width:560px){
  .tog{margin-top:1.4rem}
  .tog .save{font-size:0.48rem;padding:0.14rem 0.4rem}
}

/* =========================================================
   UITSNEDE VAN DE ARTIKELFOTO'S
   De beelden uit onze eigen video's zijn staand. In een
   liggend kader valt het onderwerp dan buiten beeld, dus
   per foto is bepaald welk deel zichtbaar blijft.
   ========================================================= */
.art-beeld img[src$="links.jpg"],
.bkaart .beeld img[src$="links.jpg"]{object-position:50% 30%}

.art-beeld img[src$="links-2.jpg"],
.bkaart .beeld img[src$="links-2.jpg"]{object-position:50% 28%}

.art-beeld img[src$="midden-2.jpg"],
.bkaart .beeld img[src$="midden-2.jpg"]{object-position:50% 58%}

.art-beeld img[src$="rechts-2.jpg"],
.bkaart .beeld img[src$="rechts-2.jpg"]{object-position:50% 62%}

.art-beeld img[src$="rechts.jpg"],
.bkaart .beeld img[src$="rechts.jpg"]{object-position:50% 35%}

.art-beeld img[src$="midden.jpg"],
.bkaart .beeld img[src$="midden.jpg"]{object-position:50% 58%}

/* =========================================================
   OVERGANG NAAR HET INLOGSCHERM
   Belangrijk: er wordt alleen met transform en opacity
   bewogen. Dat zijn de twee dingen die de grafische kaart
   zelf afhandelt. Een clip-path of een breedte animeren
   moet elke beeldwissel opnieuw getekend worden en dat
   schokt op een gewone laptop.
   ========================================================= */
.overgang{
  position:fixed;inset:0;z-index:9999;
  visibility:hidden;pointer-events:none;
  overflow:hidden;
  contain:strict;
}
.overgang.aan{visibility:visible;pointer-events:all}

/* de cirkel die uit de knop groeit: puur een schaalbeweging */
.overgang .cirkel{
  position:absolute;border-radius:50%;
  background:#3a1b3f;
  transform:translate(-50%,-50%) scale(0);
  transform-origin:center;
  will-change:transform;
  backface-visibility:hidden;
}
.overgang.aan .cirkel{
  animation:overgangGroei .58s cubic-bezier(.32,.72,.24,1) forwards;
}
@keyframes overgangGroei{
  to{transform:translate(-50%,-50%) scale(1)}
}

/* het verloop en de gloed komen er daarna overheen, met opacity */
.overgang .vulling{
  position:absolute;inset:0;opacity:0;
  will-change:opacity;
  background:
    radial-gradient(70rem 44rem at 50% 44%, rgba(173,98,186,.30), transparent 60%),
    radial-gradient(26rem 26rem at 50% 46%, rgba(194,143,104,.13), transparent 62%),
    linear-gradient(150deg,#57295f,#3a1b3f 52%,#160b18);
}
.overgang.aan .vulling{
  animation:overgangVul .5s ease .3s forwards;
}
@keyframes overgangVul{ to{opacity:1} }

/* het logo: alleen opacity en transform, geen filter */
.overgang img{
  position:absolute;left:50%;top:50%;
  width:min(14rem,54vw);height:auto;display:block;
  transform:translate(-50%,-50%) translateY(1rem) scale(.94);
  opacity:0;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.overgang.aan img{
  animation:overgangMerk .7s cubic-bezier(.16,.84,.28,1) .26s forwards;
}
@keyframes overgangMerk{
  to{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1)}
}

/* het streepje loopt vol met scaleX, niet met width */
.overgang i{
  position:absolute;left:50%;bottom:24%;
  width:min(10rem,38vw);height:2px;border-radius:2px;
  background:rgba(255,255,255,.15);
  transform:translateX(-50%);
  opacity:0;overflow:hidden;
}
.overgang.aan i{animation:overgangToon .28s ease .38s forwards}
@keyframes overgangToon{ to{opacity:1} }
.overgang i span{
  position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(90deg,#c28f68,#d8b89f);
  transform:scaleX(0);transform-origin:left center;
  will-change:transform;
}
.overgang.aan i span{
  animation:overgangBalk .74s cubic-bezier(.35,.05,.2,1) .38s forwards;
}
@keyframes overgangBalk{ to{transform:scaleX(1)} }

@media(prefers-reduced-motion:reduce){
  .overgang.aan .cirkel,.overgang.aan .vulling,
  .overgang.aan img,.overgang.aan i,.overgang.aan i span{animation:none}
  .overgang.aan .cirkel{transform:translate(-50%,-50%) scale(1)}
  .overgang.aan .vulling{opacity:1}
  .overgang.aan img{opacity:1;transform:translate(-50%,-50%)}
  .overgang.aan i{opacity:1}
  .overgang.aan i span{transform:scaleX(1)}
}

/* Vier abonnementen in plaats van drie pakketten (Gratis, Starter, Pro, Business). */
.prz .cards{grid-template-columns:repeat(4,1fr)}
@media(max-width:1060px){.prz .cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.prz .cards{grid-template-columns:1fr}}
/* Waar we voor staan: drie tekstkaarten in plaats van twee portretfoto's. */
.belofte{background:var(--paper);border:1px solid var(--line);border-radius:1.25rem;padding:1.4rem 1.5rem;
  display:flex;flex-direction:column;justify-content:center;gap:0.45rem}
.belofte b{font-family:var(--disp);font-size:1.1rem;letter-spacing:-.03em;color:var(--ink)}
.belofte p{font-size:0.95rem;line-height:1.55;color:var(--muted)}
.belofte.breed{grid-column:1 / -1}

/* ---- prijzen-popup (native <dialog>, geopend vanuit de hero) ---- */
dialog.pp{margin:auto;border:0;padding:0;border-radius:1.25rem;background:#fff;color:var(--navy);
  width:min(1120px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;
  box-shadow:0 2rem 5rem rgba(36,21,40,.3)}
dialog.pp::backdrop{background:rgba(36,21,40,.55);backdrop-filter:blur(4px)}
dialog.pp[open]{animation:pp-in .28s cubic-bezier(.2,.7,.3,1)}
@keyframes pp-in{from{opacity:0;transform:translateY(0.75rem)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){dialog.pp[open]{animation:none}}
.pp-kop{position:relative;padding:2rem 3.5rem 0 2rem}
.pp-kop h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 .4rem}
.pp-kop p{color:var(--muted);margin:0}
.pp-sluit{position:absolute;top:1.25rem;right:1.25rem;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--line);
  background:#fff;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--navy)}
.pp-sluit:hover,.pp-sluit:focus-visible{background:var(--blue-50);outline:none}
.pp-inhoud{padding:1.5rem 2rem 0}
.pp-inhoud .cards{margin-top:1rem}
.pp-voet{padding:1.25rem 2rem 2rem;margin:0;text-align:center;font-size:.95rem}
@media(max-width:560px){.pp-kop{padding:1.5rem 3.25rem 0 1.25rem}.pp-inhoud{padding:1rem 1.25rem 0}.pp-voet{padding:1rem 1.25rem 1.5rem}}

/* ---- actieprijs op de prijskaarten (waarde komt uit Plan.promo in de app) ---- */
.card .actie{min-height:1.35rem;margin-top:0.35rem;font-size:0.72rem;font-weight:700;color:var(--green)}
.card .actie:not(:empty){display:inline-block;background:var(--green-50);padding:2px 0.55rem;border-radius:0.4rem}

/* ---- tweede blok: zekerheden + echte Trustpilot-reviews (donkere sectie .bewijs) ---- */
.usp{list-style:none;margin:0;padding:0 0 1.75rem;display:flex;flex-wrap:wrap;justify-content:center;gap:0.6rem 2.25rem;
  border-bottom:1px solid rgba(255,255,255,.12);font-size:0.98rem;font-weight:600;color:#fff}
.usp li{display:inline-flex;align-items:center;gap:0.5rem}
.usp svg{color:var(--green);flex:none}
.rvw-kop{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.25rem}
.rvw-kop h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0}
.tp{color:rgba(255,255,255,.78);text-decoration:none;font-size:0.92rem;font-weight:600;display:inline-flex;align-items:center;gap:0.5rem}
.tp:hover,.tp:focus-visible{color:#fff;text-decoration:underline}
.sterren{color:#00b67a;letter-spacing:0.08em;font-size:1rem;line-height:1}
.rvws{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.4rem}
.rvw{margin:0;padding:1.4rem 1.5rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:1rem;
  display:flex;flex-direction:column;gap:0.8rem}
.rvw p{margin:0;color:rgba(255,255,255,.88);font-size:0.98rem;line-height:1.55;flex:1}
.rvw footer{background:none;padding:0;margin:0;display:flex;justify-content:space-between;gap:0.75rem;font-size:0.85rem;color:rgba(255,255,255,.6)}
.rvw footer b{color:#fff;font-weight:600}
@media(max-width:900px){.rvws{grid-template-columns:1fr}.usp{justify-content:flex-start;gap:0.5rem 1.5rem}}

/* ---- blok 3: herkenning (drie situaties, geen verkoop) ---- */
.herken{background:#fff}
.hk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:0.5rem}
.hk{padding:1.75rem 1.6rem;background:var(--paper);border:1px solid var(--line);border-radius:1.15rem}
.hk-ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:0.8rem;background:var(--blue-50);color:var(--blue);margin-bottom:1.1rem}
.hk-ico svg{width:1.3rem;height:1.3rem}
.hk h3{font-size:1.15rem;line-height:1.3;margin:0 0 0.5rem;letter-spacing:-.01em}
.hk p{margin:0;color:var(--muted);font-size:0.98rem;line-height:1.55}
@media(max-width:900px){.hk-grid{grid-template-columns:1fr}}

/* ---- hero: het agenda-scherm volgt de muis (JS zet --rx/--ry op .mock-scherm) ---- */
.mock.volgt .mock-scherm{transition-property:box-shadow}

/* ---- hero: door "uitgebreide" loopt om de paar seconden een paarse glans, met een markeerstreep eronder ---- */
.hero h1 .rek{position:relative;display:inline-block;color:transparent;
  background:linear-gradient(100deg,var(--ink) 0 38%,var(--blue) 50%,var(--ink) 62% 100%);
  background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  animation:rek-glans 5s ease-in-out 1.2s infinite}
.hero h1 .rek::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.22em;z-index:-1;border-radius:.1em;
  background:linear-gradient(90deg,var(--blue-50),rgba(139,82,150,.28));transform:scaleX(0);transform-origin:left center;
  animation:rek-streep .7s cubic-bezier(.2,.8,.25,1) .5s both}
@keyframes rek-glans{0%{background-position:100% 0}45%,100%{background-position:0 0}}
@keyframes rek-streep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.hero h1 .rek{animation:none;color:inherit;background:none}.hero h1 .rek::after{animation:none;transform:none}}

/* ================= functies: hub en functiepagina's ================= */
.fnav{position:sticky;top:var(--hdr-h,4.4rem);z-index:90;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.fnav .wrap{display:flex;gap:0.35rem;overflow-x:auto;padding-top:0.55rem;padding-bottom:0.55rem;scrollbar-width:none}
.fnav .wrap::-webkit-scrollbar{display:none}
.fnav a{flex:none;font-size:0.86rem;font-weight:600;color:var(--muted);padding:0.45rem 0.9rem;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.fnav a:hover,.fnav a.on{color:var(--blue);background:var(--blue-50);border-color:#ebdcee}
.fgroep.alt{background:var(--paper)}
.fgroep .shead{margin-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.flabel{display:inline-block;font-size:0.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.fgroep .shead h2{margin-top:0.5rem}
.fgroep .shead .lead{margin-top:0.6rem;max-width:56ch}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:1.1rem}
.fkaart{display:flex;flex-direction:column;gap:0.55rem;padding:1.45rem 1.4rem 1.3rem;background:#fff;border:1px solid var(--line);border-radius:1.1rem;
  color:inherit;text-decoration:none;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.fgroep.alt .fkaart{background:#fff}
.fkaart:hover{transform:translateY(-0.3rem);box-shadow:0 1rem 2.4rem rgba(65,31,71,.09);border-color:#dfd1e2}
.fkaart .hk-ico{margin-bottom:0.25rem}
.fkaart h3{font-size:1.08rem;margin:0;letter-spacing:-.015em}
.fkaart p{margin:0;color:var(--muted);font-size:0.93rem;line-height:1.5;flex:1}
.fvanaf{align-self:flex-start;margin-top:0.35rem;font-size:0.72rem;font-weight:700;padding:2px 0.6rem;border-radius:0.4rem;background:var(--blue-50);color:var(--blue-d)}
.fpag .pag-kop .hcta{margin-top:1.4rem}
.fpag .art-beeld{aspect-ratio:1200/640;max-height:22rem}
.fpag .art{margin-top:clamp(1.6rem,3vw,2.4rem)}
.fpag .art .stappen{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:0.75rem;counter-reset:st}
.fpag .art .stappen li{position:relative;padding:1rem 1.1rem 1rem 3.4rem;background:var(--paper);border:1px solid var(--line);border-radius:0.9rem;counter-increment:st;color:var(--muted)}
.fpag .art .stappen li::before{content:counter(st,decimal-leading-zero);position:absolute;left:1.05rem;top:1rem;font-family:var(--disp);font-weight:700;color:var(--blue);font-size:0.95rem;letter-spacing:.02em}
.fpag .art .stappen li b{display:block;color:var(--ink);margin-bottom:0.15rem}
.fpag .art .faq{display:grid;gap:0.7rem;margin-bottom:1.5rem}
.fpag .art .faq .q button{text-align:left;padding:1rem 3rem 1rem 1.25rem;position:relative}
.fpag .lees-ook{font-size:0.95rem;color:var(--muted)}
.fpag .verder .fgrid{grid-template-columns:repeat(3,1fr)}
.leesbalk{position:fixed;left:0;top:0;width:100%;height:3px;z-index:300;pointer-events:none}
.leesbalk span{display:block;height:100%;width:0;background:var(--blue);transition:width .12s linear}
.sticky-cta{position:fixed;left:50%;bottom:1rem;transform:translate(-50%,0);z-index:150;display:flex;align-items:center;gap:1rem;
  padding:0.6rem 0.6rem 0.6rem 1.15rem;background:rgba(36,21,40,.94);color:#fff;border-radius:999px;box-shadow:0 1rem 2.6rem rgba(36,21,40,.35);
  backdrop-filter:blur(8px);font-size:0.92rem;white-space:nowrap;transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .35s}
.sticky-cta[hidden]{display:flex;opacity:0;transform:translate(-50%,1.5rem);pointer-events:none}
.sticky-cta .btn{padding:0.6rem 1.1rem;font-size:0.9rem}
@media(max-width:900px){
  .fpag .verder .fgrid{grid-template-columns:1fr}
  .sticky-cta{left:1rem;right:1rem;transform:none;justify-content:space-between;border-radius:1rem}
  .sticky-cta[hidden]{transform:translateY(1.5rem)}
  .sticky-cta span{white-space:normal;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){.leesbalk span,.sticky-cta{transition:none}}

/* functiepagina: tekst links, "op deze pagina" rechts op brede schermen */
.art-rij{display:grid;grid-template-columns:minmax(0,44rem) minmax(14rem,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.zij{position:sticky;top:calc(var(--hdr-h,4.4rem) + 1.25rem);display:grid;gap:1rem}
.op-pagina{padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:1rem;background:#fff}
.op-pagina b{display:block;font-size:0.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:0.6rem}
.op-pagina ul{list-style:none;margin:0;padding:0;display:grid;gap:0.35rem}
.op-pagina a{color:var(--muted);font-size:0.92rem;line-height:1.35;display:block;padding:0.25rem 0 0.25rem 0.75rem;border-left:2px solid var(--line)}
.op-pagina a:hover,.op-pagina a.on{color:var(--ink);border-color:var(--blue)}
.zij-cta{padding:1.2rem;border-radius:1rem;background:var(--navy);color:#fff}
.zij-cta b{display:block;font-size:1.02rem;margin-bottom:0.3rem}
.zij-cta p{margin:0 0 0.9rem;color:rgba(255,255,255,.72);font-size:0.9rem;line-height:1.45}
.zij-cta .btn{width:100%}
@media(max-width:1024px){.art-rij{grid-template-columns:minmax(0,44rem)}.zij{display:none}}

/* ================= homepage: eigen mobiele opmaak (≤ 900px) =================
   Geen gestapelde desktopblokken maar rijen om te vegen (reviews, functies,
   prijzen), een compacte herkenningslijst, een 2x2-raster voor de zekerheden
   en knoppen naast elkaar in de hero. */
@media(max-width:900px){
  .sec{padding:3rem 0}
  .shead{margin-bottom:1.6rem}
  .shead .lead,.hero .lead{font-size:1rem;line-height:1.55}

  /* hero */
  .hero h1{font-size:clamp(2rem,9.2vw,2.6rem);line-height:1.08}
  .hero .hcta{flex-wrap:nowrap;gap:0.6rem;margin-top:1.4rem}
  .hero .hcta .btn{flex:1 1 0;padding-inline:0.75rem;font-size:0.95rem;white-space:nowrap}
  .hero .hsub{margin-top:1rem;gap:0.4rem 1.1rem;font-size:0.88rem}
  .mock{padding-bottom:3.6rem}

  /* zekerheden: 2x2 in plaats van vier regels */
  .usp{display:grid;grid-template-columns:1fr 1fr;gap:0.55rem 0.9rem;font-size:0.9rem;padding-bottom:1.3rem}
  .usp li{align-items:flex-start;line-height:1.3}
  .usp svg{margin-top:0.15rem}
  .rvw-kop{margin-top:1.6rem;gap:0.4rem}
  .rvw-kop h2{font-size:1.45rem}

  /* veegrijen: reviews, functies, prijzen */
  .rvws,.vrij,#prijzen .cards{display:flex;grid-template-columns:none;gap:0.85rem;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding:0.4rem var(--gut) 0.9rem;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch}
  .rvws::-webkit-scrollbar,.vrij::-webkit-scrollbar,#prijzen .cards::-webkit-scrollbar{display:none}
  .rvws>*,.vrij>*,#prijzen .cards>*{flex:0 0 min(82%,20rem);scroll-snap-align:start;min-width:0}
  .rvws{margin-top:1rem}
  .rvw{padding:1.2rem 1.25rem}
  .rvw p{font-size:0.95rem}
  .vkaart .beeld{height:10.5rem}
  .vkaart .lijf{padding:1.1rem 1.15rem 1.2rem}
  #prijzen .cards{margin-top:0.6rem}
  #prijzen .cards .card,#prijzen .cards .card.best{padding:1.5rem 1.3rem 1.4rem;transform:none}
  #prijzen .cards .card ul{margin:1.1rem 0 1.3rem;padding-top:1rem}

  /* herkenning: lijst met icoon links in plaats van drie kaarten */
  .hk-grid{gap:0;margin-top:0}
  .hk{display:grid;grid-template-columns:2.4rem 1fr;column-gap:0.9rem;align-items:start;padding:1rem 0;background:none;border:0;border-top:1px solid var(--line);border-radius:0}
  .hk:first-child{border-top:0;padding-top:0.2rem}
  .hk .hk-ico{margin:0;width:2.4rem;height:2.4rem;grid-row:1/3}
  .hk h3{font-size:1.02rem;margin:0.15rem 0 0.25rem;grid-column:2}
  .hk p{grid-column:2;font-size:0.93rem}

  /* stappen en website: minder lucht */
  .stapln .stp + .stp{padding-top:1.2rem}
  .dash .lead{font-size:1rem}

  /* vergelijkingstabel mag zijwaarts scrollen in zijn eigen kader */
  #verg{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #verg table{min-width:34rem}

  /* tekstblok "waarom": rustiger */
  #wie p{font-size:0.98rem}
}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .rvws,.vrij,#prijzen .cards{scroll-behavior:smooth}
}
@media(max-width:900px){
  .hero .hcta{display:flex;flex-direction:row;flex-wrap:nowrap}
  .hero .hcta .btn,.hero .hcta .btn-o{width:auto;flex:1 1 0;justify-content:center}
}

/* gutter van .wrap als variabele, zodat veegrijen precies tot de schermrand lopen */
@media(max-width:900px){.wrap{--gut:1.5rem}}
@media(max-width:620px){.wrap{--gut:1.15rem}}
@media(max-width:430px){.wrap{--gut:1rem}}

/* Trustpilot Review Collector */
.tp-sec{padding:0 0 clamp(2rem,4vw,3rem)}
.tp-sec .trustpilot-widget{min-height:52px}

/* =========================================================
   LANDINGSPAGINA'S (branche + vergelijk), bouw-landing.py
   ========================================================= */
.kort.antwoord p{margin:0;color:var(--ink);font-size:1.02rem;line-height:1.6}
.kaartjes{display:grid;grid-template-columns:repeat(3,1fr);gap:0.9rem;margin:0.4rem 0 1.6rem}
.kaartjes.vier{grid-template-columns:repeat(2,1fr)}
.kaartje{background:var(--paper);border:1px solid var(--line);border-radius:1rem;padding:1.1rem 1.15rem}
.kaartje b{display:block;font-family:var(--disp);font-weight:700;letter-spacing:-.02em;margin-bottom:0.3rem;color:var(--ink)}
.kaartje p{margin:0;color:var(--muted);font-size:0.95rem;line-height:1.5}
.kaartje.prijs .pr{display:block;font-family:var(--disp);font-weight:700;font-size:1.7rem;letter-spacing:-.03em;color:var(--ink);margin-top:0.2rem}
.kaartje.prijs em{display:block;font-style:normal;font-size:0.82rem;color:var(--muted)}
.kaartje.prijs i{display:block;font-style:normal;font-size:0.8rem;color:var(--blue);margin-top:0.25rem}
.kaartje.prijs p{margin-top:0.6rem}
.tabel-wrap{overflow-x:auto;margin:0.4rem 0 1.4rem;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;font-size:0.95rem;background:#fff;border:1px solid var(--line);border-radius:1rem;overflow:hidden}
table.cmp caption{caption-side:bottom;text-align:left;font-size:0.82rem;color:var(--muted);padding:0.6rem 0 0}
table.cmp th,table.cmp td{text-align:left;vertical-align:top;padding:0.75rem 0.9rem;border-bottom:1px solid var(--line)}
table.cmp thead th{background:var(--blue-50);font-family:var(--disp);font-size:0.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
table.cmp tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
table.cmp td{color:var(--muted)}
.calc{display:grid;grid-template-columns:1.05fr .95fr;gap:1.4rem;margin:0.4rem 0 1.6rem;padding:1.3rem;background:var(--paper);border:1px solid var(--line);border-radius:1.1rem}
.calc-veld+.calc-veld{margin-top:1.2rem}
.calc-veld label{display:flex;justify-content:space-between;gap:0.8rem;font-size:0.9rem;font-weight:700;color:var(--ink);margin-bottom:0.3rem}
.calc-veld output{font-variant-numeric:tabular-nums;color:var(--blue)}
.calc input[type=range]{width:100%;accent-color:var(--blue);height:1.6rem}
.calc-noot{font-size:0.82rem;color:var(--muted);margin:1rem 0 0}
.calc-uit{background:#fff;border:1px solid var(--line);border-radius:0.9rem;padding:1.2rem;display:flex;flex-direction:column;justify-content:center}
.calc-label{font-size:0.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.calc-groot{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.03em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.calc-sub{font-size:0.86rem;color:var(--muted)}
.calc-split{display:flex;gap:1rem;margin-top:1rem;padding-top:0.9rem;border-top:1px solid var(--line)}
.calc-split div{flex:1}
.calc-split b{display:block;font-size:1.15rem;color:var(--ink);font-variant-numeric:tabular-nums}
.calc-split span{font-size:0.78rem;color:var(--muted)}
.bronnen{font-size:0.9rem;color:var(--muted)}
.kiezen{margin-top:1.6rem;font-size:0.95rem;color:var(--muted);line-height:1.8}
@media(max-width:760px){.kaartjes,.kaartjes.vier{grid-template-columns:1fr}.calc{grid-template-columns:1fr;padding:1rem}}
.kiezen{text-align:left}.kiezen a{color:var(--blue)}
/* contactformulier */
.cform-rij{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.cform{background:var(--paper);border:1px solid var(--line);border-radius:1.3rem;padding:clamp(1.2rem,2.5vw,1.9rem);display:grid;gap:0.9rem}
.cform-2{display:grid;grid-template-columns:1fr 1fr;gap:0.9rem}
.cform label{display:grid;gap:0.35rem;font-size:0.86rem;font-weight:700;color:var(--ink)}
.cform input,.cform select,.cform textarea{font:inherit;font-weight:400;font-size:0.98rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:0.7rem;padding:0.7rem 0.85rem;width:100%}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.cform textarea{resize:vertical;min-height:8rem}
.cform-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .btn{justify-self:start}
.cform-klein{font-size:0.8rem;color:var(--muted);margin:0}
.cform-melding{margin-top:1rem;padding:0.9rem 1rem;border-radius:0.8rem;font-size:0.95rem}
.cform-melding.ok{background:#e6f3ea;color:#2e7d4f}.cform-melding.fout{background:#fae4e2;color:#b3261e}
@media(max-width:760px){.cform-rij,.cform-2{grid-template-columns:1fr}}

.prijsstrook{grid-template-columns:repeat(4,1fr);margin-top:0}
@media(max-width:900px){.prijsstrook{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.prijsstrook{grid-template-columns:1fr}}

/* =========================================================
   /start/  advertentielanding, mobiel-eerst (bouw-start.py)
   ========================================================= */
body.lp{--lp-max:70rem}
.lp .lp-navr{margin-left:auto}
.lp .lp-navr .btn{display:inline-flex;padding:0.6rem 1rem;font-size:0.9rem}
.lp-hero{position:relative;overflow:hidden;padding:2.2rem 0 0;background:radial-gradient(60% 50% at 85% 10%,#f3e6f5 0,rgba(243,230,245,0) 70%),linear-gradient(180deg,#fff 0,#faf5fb 100%)}
.lp-hero-in{display:grid;gap:1.6rem}
.lp-pil{display:inline-block;background:var(--blue-50);color:var(--blue-d);border:1px solid #e6d3ea;border-radius:999px;padding:0.35rem 0.8rem;font-size:0.8rem;font-weight:700;letter-spacing:.02em}
.lp-hero h1{margin-top:1rem;font-size:clamp(2.15rem,9.4vw,3.6rem);line-height:1.04;letter-spacing:-.035em}
.lp-hero h1 em{font-style:normal;color:var(--blue);background:linear-gradient(transparent 62%,#ead9ee 62%)}
.lp-lead{margin-top:1rem;font-size:1.06rem;line-height:1.55;color:var(--muted);max-width:32rem}
.lp-cta{width:100%;margin-top:1.3rem;padding:1.05rem 1.2rem;font-size:1.08rem;box-shadow:0 0.6rem 1.6rem rgba(139,82,150,.28)}
.lp-noot{display:block;margin-top:0.6rem;font-size:0.8rem;color:var(--muted);text-align:center}
.lp-cta-mid{display:none}
.lp-trust{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0.45rem 0.8rem;font-size:0.84rem;color:var(--muted)}
.lp-trust li{display:inline-flex;align-items:center;gap:0.35rem}
.lp-trust svg{color:var(--green)}
.lp-trust .sterren{font-size:0.78rem;letter-spacing:0.02em}
.lp-trust li{white-space:nowrap}
.lp-hero-beeld{position:relative;margin:0.6rem auto 0;width:min(64vw,19rem)}
.lp-fon{position:relative;height:19rem;overflow:hidden}
.lp-fon::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5rem;background:linear-gradient(180deg,rgba(250,245,251,0),#faf5fb 85%);pointer-events:none}
.lp-fon img{display:block;width:100%;height:auto}
.lp-kaartje{position:absolute;display:flex;align-items:center;gap:0.6rem;background:#fff;border:1px solid var(--line);border-radius:0.9rem;padding:0.55rem 0.8rem;box-shadow:0 0.6rem 1.4rem rgba(36,21,40,.14);font-size:0.78rem;white-space:nowrap}
.lp-kaartje b{display:block;font-size:0.82rem}.lp-kaartje span{color:var(--muted)}
.lp-kaartje i{width:0.7rem;height:0.7rem;border-radius:50%;flex:none}
.lp-kaartje .groen{background:#2e7d5b}.lp-kaartje .paars{background:var(--blue)}
.lp-kaartje.k1{left:-18%;top:22%}.lp-kaartje.k2{right:-16%;top:52%}
.lp-strook{background:var(--navy-d);color:#fff;padding:1.2rem 0}
.lp-strook ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0.6rem;text-align:center}
.lp-strook b{display:block;font-family:var(--disp);font-size:1.55rem;letter-spacing:-.03em;line-height:1.1}
.lp-strook span{display:block;font-size:0.74rem;line-height:1.25;margin-top:0.2rem;color:rgba(255,255,255,.65)}
.lp-sec{padding:3rem 0}
.lp-sec h2{font-size:clamp(1.7rem,6.4vw,2.4rem);letter-spacing:-.03em;line-height:1.1;margin-bottom:1.3rem;text-wrap:balance}
.lp-voordelen{list-style:none;margin:0;padding:0;display:grid;gap:0.8rem}
.lp-voordelen li{display:grid;grid-template-columns:2.7rem 1fr;gap:0.3rem 0.9rem;padding:1.1rem 1.1rem;background:var(--paper);border:1px solid var(--line);border-radius:1.1rem}
.lp-ico{grid-row:span 2;display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:0.85rem;background:var(--blue-50);color:var(--blue)}
.lp-ico svg{width:1.35rem;height:1.35rem}
.lp-voordelen b{font-family:var(--disp);font-size:1.05rem;letter-spacing:-.02em;color:var(--ink)}
.lp-voordelen p{margin:0;font-size:0.94rem;line-height:1.5;color:var(--muted)}
.lp-donker{background:var(--navy);color:#fff}
.lp-donker h2{color:#fff;margin-bottom:0.4rem}
.lp-kop-rij{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.4rem 1rem}
.lp-kop-rij .tp{color:rgba(255,255,255,.8);font-size:0.86rem;display:inline-flex;gap:0.4rem;align-items:center}
.lp-rvws{margin-top:1.2rem}
.lp-stappen{list-style:none;margin:0;padding:0;display:grid;gap:0.9rem;counter-reset:s}
.lp-stappen li{display:flex;gap:1rem;align-items:flex-start}
.lp-nr{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--disp);font-weight:700;display:grid;place-items:center}
.lp-stappen b{display:block;font-family:var(--disp);font-size:1.05rem;letter-spacing:-.02em}
.lp-stappen p{margin:0.2rem 0 0;font-size:0.95rem;line-height:1.5;color:var(--muted)}
.lp-prijs{background:linear-gradient(180deg,#faf5fb,#fff)}
.lp-prijskaart{background:#fff;border:1px solid var(--line);border-radius:1.4rem;padding:1.5rem 1.3rem;box-shadow:0 1rem 2.4rem rgba(36,21,40,.08)}
.lp-prijskaart h2{margin:0.9rem 0 0.6rem}
.lp-prijskaart p{margin:0;color:var(--muted);line-height:1.55}
.lp-prijskaart p b{color:var(--ink)}.lp-prijskaart s{color:#a89fac;margin-right:0.3rem}
.lp-punten{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:0.45rem;font-size:0.95rem}
.lp-punten li{display:flex;gap:0.5rem;align-items:flex-start;line-height:1.45}.lp-punten svg{color:var(--green);flex:none;margin-top:0.3rem}
.lp-tarieven{list-style:none;margin:1rem 0 0;padding:0;border-top:1px solid var(--line)}
.lp-tarieven li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:0.6rem 0;border-bottom:1px solid var(--line);font-size:0.95rem}
.lp-tarieven em{font-style:normal;color:var(--muted);font-size:0.82rem;margin-left:0.35rem}
.lp-tarieven b{font-family:var(--disp);font-size:1.05rem;white-space:nowrap}
.lp-tarieven s{color:#a89fac;font-weight:400;font-size:0.85rem;margin-right:0.25rem}
.lp main{padding-bottom:4.5rem}
.lp-faq{display:grid;gap:0.6rem}
.lp-slot .slot-kaart{margin:0}
.lp-slot .lp-cta{margin-top:0}
.lp-slot .tel{display:block;margin-top:0.8rem;font-size:0.9rem}
.lp-sticky{position:fixed;left:0.75rem;right:0.75rem;bottom:0.75rem;z-index:150;display:flex;align-items:center;justify-content:space-between;gap:0.8rem;padding:0.6rem 0.6rem 0.6rem 1rem;background:rgba(36,21,40,.96);color:#fff;border-radius:1rem;box-shadow:0 1rem 2.4rem rgba(0,0,0,.3);font-size:0.9rem;transition:opacity .3s,transform .3s}
.lp-sticky[hidden]{display:flex;opacity:0;transform:translateY(1.5rem);pointer-events:none}
.lp-sticky .btn{padding:0.65rem 1rem;font-size:0.92rem;white-space:nowrap}
.lp footer .voet-top{display:none}
@media(min-width:761px){
  .lp-hero{padding:4rem 0 2.5rem}
  .lp-hero-in{grid-template-columns:1.15fr 0.85fr;align-items:center;gap:3rem}
  .lp-hero-beeld{margin:0 0 0 auto;width:min(100%,21rem)}
  .lp-fon{height:auto;overflow:visible}
  .lp-fon::after{display:none}
  .lp-cta{width:auto;min-width:16rem}
  .lp-cta-mid{display:inline-flex}
  .lp-noot{text-align:left}
  .lp-trust{display:flex;gap:0.5rem 1.2rem}
  .lp main{padding-bottom:0}
  .lp-strook b{font-size:2rem}.lp-strook span{font-size:0.86rem}
  .lp-sec{padding:4.5rem 0}
  .lp-voordelen{grid-template-columns:1fr 1fr;gap:1rem}
  .lp-stappen{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .lp-stappen li{flex-direction:column}
  .lp-prijskaart{padding:2.4rem 2.4rem;max-width:44rem;margin:0 auto}
  .lp-sticky{left:auto;right:1.5rem;bottom:1.5rem;max-width:26rem}
}