/* ===========================================================
   UPgemerkt, stylesheet
   =========================================================== */

:root{
  --gold:#F5A623;
  --gold-lt:#FFC85C;
  --gold-dp:#C77F14;
  --iris:#9DC4DE;
  --ink:#000000;
  --surface:var(--ink);
  --surface-2:#101013;
  --surface-3:#17171B;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#F3F3F4;
  --muted:#A1A1A8;
  /* Een invulveld houdt altijd dezelfde kleuren, ook in een lichte sectie.
     Daar wordt --text donker gezet voor de gewone tekst, terwijl het veld
     zelf --ink hield. Allebei #101010, dus zwart op zwart en je zag niet
     wat je typte. Deze drie kantelen bewust niet mee. */
  --veld-vlak:#101010;
  --veld-tekst:#F5F1E8;
  --veld-rand:rgba(255,255,255,.26);
  --radius:16px;
  --radius-sm:10px;
  --wrap:1180px;
  --grad:linear-gradient(135deg,var(--gold-lt) 0%,var(--gold) 45%,var(--gold-dp) 100%);
  --ff-head:"Poppins",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--ff-body);font-size:1.0625rem;line-height:1.7;
  /* Hier stond -webkit-font-smoothing:antialiased. Dat maakt letters dunner
     op een Mac en een iPhone. Lichte tekst op een donkere achtergrond lijkt
     al dunner dan ze is, en dat samen maakt de tekst bleek en vermoeiend om
     te lezen. Zonder die regel rendert de browser voller en scherper. */
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--ff-head);line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:700}
h2{font-size:clamp(1.8rem,3.6vw,2.9rem);font-weight:600}
h3{font-size:1.18rem;font-weight:600}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.wrap--narrow{max-width:820px}
.wrap--mid{max-width:980px}
.mt{margin-top:52px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#000;padding:12px 20px;z-index:200;font-weight:600}
.skip:focus{left:12px;top:12px}

.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.eyebrow{
  font-family:var(--ff-head);font-size:.78rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--grad);color:var(--ink);font-family:var(--ff-head);font-weight:600;
  font-size:.97rem;padding:15px 30px;border:0;border-radius:100px;cursor:pointer;
  text-decoration:none;transition:transform .2s ease,box-shadow .25s ease,filter .2s ease;
  box-shadow:0 6px 24px rgb(var(--gold-rgb) / .22);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgb(var(--gold-rgb) / .34);filter:brightness(1.06)}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--line-2);box-shadow:none}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold);box-shadow:none}
.btn--sm{padding:10px 20px;font-size:.88rem}
.btn--full{width:100%;margin-top:8px}

/* ---------- Navigatie ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(8,8,9,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand__oog{width:34px;height:auto;flex:0 0 auto}
.brand__txt{
  font-family:var(--ff-head);font-weight:700;font-size:1.12rem;letter-spacing:.02em;
  text-transform:uppercase;
}
.brand__txt em{font-style:normal;color:var(--gold)}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{
  text-decoration:none;font-size:.93rem;color:var(--muted);
  transition:color .2s ease;white-space:nowrap;
}
.nav__links a:hover,.nav__links a.is-active{color:var(--text)}
.nav__links .btn{color:var(--ink)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--text);transition:transform .3s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:150px 0 96px;text-align:center;overflow:hidden}
.hero__glow{
  position:absolute;left:50%;top:-10%;width:min(1100px,130vw);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgb(var(--gold-rgb) / .16) 0%,rgba(157,196,222,.06) 34%,transparent 66%);
}
.hero__inner{position:relative}

/* Merkblok: eerst wie we zijn */
.hero__mark{width:clamp(230px,34vw,420px);height:auto;margin:0 auto}

/* Scheiding tussen merk en aanbod */
.rule{
  display:block;width:1px;height:70px;margin:46px auto 40px;
  background:linear-gradient(180deg,transparent,var(--gold) 55%,transparent);
}

/* Aanbodblok */
.hero__intro h1{font-size:clamp(1.9rem,4.6vw,3.3rem);font-weight:700}
.hero .lede{max-width:660px;margin:0 auto 34px;color:var(--muted);font-size:1.12rem}
.hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.tagline{
  font-family:var(--ff-head);font-size:.82rem;font-weight:600;letter-spacing:.32em;
  margin:0;color:rgba(255,255,255,.7);
}
.tagline span{color:var(--gold)}
.tagline span:last-child{color:var(--gold-lt)}
.tagline--hero{margin-top:30px;font-size:clamp(.7rem,1.4vw,.88rem);letter-spacing:.26em}
.tagline--sm{margin-top:12px;font-size:0.78rem;letter-spacing:.24em}

/* ---------- USP-strip ---------- */
.strip{border-block:1px solid var(--line);background:var(--surface-2)}
.strip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.strip__item{background:var(--surface-2);padding:30px 22px;text-align:center}
.strip__item strong{display:block;font-family:var(--ff-head);font-size:1.02rem;margin-bottom:4px}
.strip__item span{font-size:.87rem;color:var(--muted)}

/* ---------- Secties ---------- */
.sec{padding:104px 0;position:relative}
.sec--alt{background:var(--surface)}
.sec__lede{max-width:640px;color:var(--muted)}
.sec--cta{
  background:
    radial-gradient(circle at 15% 0%,rgb(var(--gold-rgb) / .13),transparent 52%),
    var(--surface);
  border-top:1px solid var(--line);
}

/* ---------- Kaarten ---------- */
.cards{display:grid;gap:22px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 30px;transition:border-color .25s ease,transform .25s ease,background .25s ease;
}
.card:hover{border-color:rgb(var(--gold-rgb) / .42);transform:translateY(-4px);background:var(--surface-3)}
.card--big{padding:38px 34px}
.card p{color:var(--muted);margin-bottom:0}
.card p + .ticks{margin-top:20px}
.card__ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:rgb(var(--gold-rgb) / .11);border:1px solid rgb(var(--gold-rgb) / .24);
  color:var(--gold);margin-bottom:20px;
}
.card__ico svg{width:23px;height:23px;stroke-linecap:round;stroke-linejoin:round}

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:26px;color:var(--muted);font-size:.95rem;line-height:1.6}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.6em;width:9px;height:5px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);
}
.ticks--lg li{font-size:1rem;padding-left:30px;margin-bottom:4px}
.ticks--lg strong{color:var(--text)}

/* ---------- Stappen ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.step{position:relative;padding-top:26px;border-top:1px solid var(--line-2)}
.step::after{content:"";position:absolute;left:0;top:-1px;width:34px;height:2px;background:var(--grad)}
.step__n{font-family:var(--ff-head);font-size:.8rem;font-weight:600;letter-spacing:.16em;color:var(--gold)}
.step h3{margin:10px 0 8px;font-size:1.06rem}
.step p{font-size:.92rem;color:var(--muted);margin:0}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.split--rev .split__txt{order:2}
.split--form{align-items:start;gap:56px}
.split__txt p{color:var(--muted)}
.split__panel{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  min-height:320px;display:grid;place-content:center;gap:22px;padding:40px;text-align:center;
}
.split__panel--quote{background:linear-gradient(160deg,var(--surface-3),var(--surface-2))}
.split__panel blockquote{margin:0}
.split__panel blockquote p{
  font-family:var(--ff-head);font-size:1.35rem;line-height:1.45;color:var(--text);margin:0;
}
.sig{font-family:var(--ff-head);font-weight:600;letter-spacing:.16em;font-size:.85rem;color:rgba(255,255,255,.75) !important;margin-top:28px}
.sig span{color:var(--gold)}

/* Geluidsgolf-animatie */
.wave{display:flex;align-items:center;justify-content:center;gap:5px;height:110px}
.wave span{
  width:5px;border-radius:3px;background:var(--grad);
  animation:bounce 1.25s ease-in-out infinite;
}
.wave span:nth-child(3n){background:linear-gradient(180deg,var(--iris),#5C86A3)}
.wave span:nth-child(1){height:24px;animation-delay:-.10s}
.wave span:nth-child(2){height:52px;animation-delay:-.35s}
.wave span:nth-child(3){height:82px;animation-delay:-.60s}
.wave span:nth-child(4){height:38px;animation-delay:-.20s}
.wave span:nth-child(5){height:96px;animation-delay:-.85s}
.wave span:nth-child(6){height:30px;animation-delay:-.45s}
.wave span:nth-child(7){height:66px;animation-delay:-.15s}
.wave span:nth-child(8){height:44px;animation-delay:-.70s}
.wave span:nth-child(9){height:88px;animation-delay:-.30s}
.wave span:nth-child(10){height:26px;animation-delay:-.95s}
.wave span:nth-child(11){height:70px;animation-delay:-.55s}
.wave span:nth-child(12){height:36px;animation-delay:-.25s}
.wave span:nth-child(13){height:92px;animation-delay:-.80s}
.wave span:nth-child(14){height:48px;animation-delay:-.40s}
.wave span:nth-child(15){height:22px;animation-delay:-.65s}
.wave span:nth-child(16){height:74px;animation-delay:-.05s}
.wave span:nth-child(17){height:40px;animation-delay:-.90s}
.wave span:nth-child(18){height:60px;animation-delay:-.50s}
.wave span:nth-child(19){height:28px;animation-delay:-.75s}
.wave span:nth-child(20){height:84px;animation-delay:-.35s}
.wave span:nth-child(21){height:34px;animation-delay:-.60s}
@keyframes bounce{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}
.wave__cap{
  font-family:var(--ff-head);font-size:0.78rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin:0;
}

/* ---------- Prijskaarten ---------- */
.price{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:36px 30px;display:flex;flex-direction:column;position:relative;
  transition:border-color .25s ease,transform .25s ease;
}
.price:hover{transform:translateY(-4px);border-color:rgb(var(--gold-rgb) / .35)}
.price--hl{border-color:rgb(var(--gold-rgb) / .5);background:linear-gradient(170deg,rgb(var(--gold-rgb) / .07),var(--surface-2) 55%)}
.badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:var(--ink);font-family:var(--ff-head);font-weight:600;
  font-size:0.78rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:100px;white-space:nowrap;
}
.price__tag{font-family:var(--ff-head);font-size:1.6rem;font-weight:600;color:var(--gold);margin:2px 0 6px}
.price__sub{color:var(--muted);font-size:.92rem;margin-bottom:24px}
.price .ticks{margin-bottom:26px}
.price .btn{margin-top:auto}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px}
.faq details{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:20px 24px;transition:border-color .2s ease;
}
.faq details[open]{border-color:rgb(var(--gold-rgb) / .34)}
.faq summary{
  cursor:pointer;list-style:none;font-family:var(--ff-head);font-weight:500;font-size:1.02rem;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:14px 0 0;color:var(--muted);font-size:.96rem}

/* ---------- Formulier ---------- */
.form{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:34px;
}
.field{display:flex;flex-direction:column;gap:7px}
.field--full,.form .btn,.form__note,.check,.form__kop,.form__klein,
.form .kopieerknop{grid-column:1/-1}
.form label{font-size:.86rem;color:var(--muted);font-weight:500}
.form input,.form select,.form textarea{
  background:var(--veld-vlak);border:1px solid var(--veld-rand);border-radius:var(--radius-sm);
  color:var(--veld-tekst);font-family:var(--ff-body);font-size:.96rem;padding:13px 15px;width:100%;
  transition:border-color .2s ease;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold);outline:none}
.form textarea{resize:vertical;min-height:110px}
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-color:#E5544B}
.check{flex-direction:row;display:flex;align-items:flex-start;gap:11px;font-size:.86rem;color:var(--muted);cursor:pointer}
.check input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--gold)}
.form__note{margin:4px 0 0;font-size:.88rem;min-height:1.2em}
.form__note.is-ok{color:var(--gold)}
.form__note.is-err{color:#E5544B}

.contactlist{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:16px}
.contactlist li{display:flex;flex-direction:column;gap:2px;font-size:1rem}
.contactlist span{font-size:0.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-family:var(--ff-head)}
.contactlist a{text-decoration:none}
.contactlist a:hover{color:var(--gold)}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line);padding:66px 0 32px;background:var(--ink)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:44px}
.foot__col h2,.foot__col h3{
  font-family:var(--ff-head);font-size:0.78rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 16px;
}
.foot__oog{width:40px;height:auto;margin-bottom:12px}
.foot__merk{
  font-family:var(--ff-head);font-weight:700;font-size:1.18rem;text-transform:uppercase;
  letter-spacing:.02em;margin:0 0 14px;
}
.foot__merk em{font-style:normal;color:var(--gold)}
.foot__col--brand .tagline--sm{margin-top:0}
.foot__links{display:grid;gap:9px}
.foot__links a{text-decoration:none;font-size:.9rem;color:var(--muted)}
.foot__links a:hover{color:var(--gold)}
.foot__note{font-size:.85rem;color:#9D9DA5;margin:14px 0 0;line-height:1.6}
.foot__note a{color:var(--muted)}
.foot__note a:hover{color:var(--gold)}
.foot__onder{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:24px;font-size:.82rem;color:#9D9DA5;
}
.foot__onder p{margin:0}
.foot__onder a{color:#9D9DA5}
.foot__onder a:hover{color:var(--gold)}

/* ---------- Reveal-animatie ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.reveal.is-in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .cards--3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:26px}
  .split{grid-template-columns:1fr;gap:40px}
  .split--rev .split__txt{order:0}
  .split__panel{min-height:240px}
}
@media (max-width:860px){
  html{scroll-padding-top:72px}
  .nav__links{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:#08080A;border-bottom:1px solid var(--line);
    padding:8px 24px 26px;transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease;
    max-height:calc(100vh - 74px);overflow-y:auto;overscroll-behavior:contain;
  }
  .nav__links.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav__links a{padding:15px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav__links .btn{margin-top:18px;border-bottom:0;justify-content:center}
  .nav__links a.nav__beheer{
    border:0;border-bottom:1px solid var(--line);border-radius:0;padding:15px 0;
    font-size:1rem;
  }
  .burger{display:flex}
  .nav{background:rgba(8,8,9,.86);backdrop-filter:blur(14px)}
  .hero{padding:126px 0 78px}
  .rule{height:52px;margin:36px auto 32px}
  .sec{padding:76px 0}
  .cards--2,.cards--3{grid-template-columns:1fr}
  .strip__grid{grid-template-columns:repeat(2,1fr)}
  .form{grid-template-columns:1fr;padding:26px}
}
@media (max-width:520px){
  body{font-size:1rem}
  .wrap{padding-inline:20px}
  .steps{grid-template-columns:1fr}
  .hero__cta .btn{width:100%}
  .tagline{letter-spacing:.2em;font-size:0.78rem}
  .brandname{letter-spacing:.05em}
  .brandname small{letter-spacing:.34em;padding-left:.34em}
  .card,.card--big,.price{padding:26px 22px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}


/* ---------- Dienstenmenu in de navigatie ---------- */
.drop{position:relative}
.drop__btn{
  background:none;border:0;padding:0;cursor:pointer;color:var(--muted);
  font-family:var(--ff-body);font-size:.93rem;display:inline-flex;align-items:center;gap:8px;
  transition:color .2s ease;
}
.drop__btn:hover,.drop.is-open .drop__btn{color:var(--text)}
.drop__caret{
  width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.drop.is-open .drop__caret{transform:rotate(-135deg) translateY(1px)}
.drop__menu{
  position:absolute;top:calc(100% + 18px);left:50%;min-width:252px;
  transform:translateX(-50%) translateY(-8px);
  background:#0C0C0E;
  border:1px solid var(--line-2);border-radius:var(--radius);padding:10px;
  display:grid;gap:2px;opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  box-shadow:0 22px 54px rgba(0,0,0,.6);
}
/* onzichtbare brug over de ruimte tussen de knop en het menu, zodat het
   menu niet dichtklapt terwijl je muis ernaartoe beweegt */
.drop__menu::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.drop.is-open .drop__menu{
  opacity:1;pointer-events:auto;visibility:visible;transform:translateX(-50%) translateY(0);
  transition:opacity .2s ease,transform .2s ease,visibility 0s;
}
.drop__menu a{padding:11px 14px;border-radius:8px;font-size:.92rem}
.drop__menu a:hover{background:rgb(var(--gold-rgb) / .1);color:var(--gold)}
.nav__links a.is-here{color:var(--gold)}
.nav__links a.nav__beheer{
  border:1px solid var(--line-2);border-radius:100px;padding:7px 14px;
  font-size:.82rem;color:var(--muted);
}
.nav__links a.nav__beheer:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- Aanbodkaarten ---------- */
.aanbod__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.aanbod__grid--2{grid-template-columns:repeat(2,1fr)}
.aanbod{
  display:flex;flex-direction:column;text-decoration:none;
  background:linear-gradient(168deg,rgb(var(--gold-rgb) / .07),var(--surface-2) 62%);
  border:1px solid rgb(var(--gold-rgb) / .22);border-radius:var(--radius);padding:34px 30px;
  transition:border-color .25s ease,transform .25s ease;
}
.aanbod:hover{border-color:rgb(var(--gold-rgb) / .5);transform:translateY(-4px)}
.aanbod .aanbod__belofte{
  font-family:var(--ff-head);font-size:0.78rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 10px;
}
.aanbod h3{font-size:1.42rem;margin:0 0 12px}
.aanbod p{color:var(--muted);font-size:.97rem;margin:0}
.dienst__meer{
  display:inline-block;color:var(--gold);
  font-family:var(--ff-head);font-weight:600;font-size:.88rem;
}
.dienst__meer::after{content:" \2192"}
.aanbod .dienst__meer{margin-top:auto;padding-top:22px}
.aanbod:hover .dienst__meer{color:var(--gold-lt)}

/* ---------- Vergelijking vandaag / met UPgemerkt ---------- */
.verg{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.verg__kop,.verg__rij{display:grid;grid-template-columns:1fr 46px 1fr;align-items:center;gap:12px}
.verg__kop{
  font-family:var(--ff-head);font-size:0.78rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);padding:0 26px 2px;
}
.verg__kop span:last-child{color:var(--gold)}
.verg__rij{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 26px;
}
.verg__nu{color:var(--muted)}
.verg__straks{color:var(--text);font-weight:500}
.verg__pijl{text-align:center;color:var(--gold);font-size:1.25rem}

/* ---------- Contentmotor ---------- */
.motor{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.motor__stap{
  display:grid;grid-template-columns:104px 220px 1fr;gap:26px;align-items:center;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 30px;
}
.motor__n{
  font-family:var(--ff-head);font-size:2.1rem;font-weight:700;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.motor__stap strong{font-family:var(--ff-head);font-size:1.06rem;line-height:1.3}
.motor__stap p{color:var(--muted);font-size:.94rem;margin:0;line-height:1.6}

/* ---------- Meettrap ---------- */
.trap{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.trap__stap{
  font-family:var(--ff-head);font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:100px;padding:11px 20px;color:var(--muted);
}
.trap__stap:last-child{border-color:rgb(var(--gold-rgb) / .55);color:var(--gold)}

/* ---------- Tijdlijn ---------- */
.tijd{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tijd__stap{border-top:1px solid var(--line-2);padding-top:24px;position:relative}
.tijd__stap::after{content:"";position:absolute;left:0;top:-1px;width:34px;height:2px;background:var(--grad)}
.tijd__n{font-family:var(--ff-head);font-size:.78rem;font-weight:600;letter-spacing:.16em;color:var(--gold)}
.tijd__stap strong{display:block;font-family:var(--ff-head);font-size:1.1rem;margin:10px 0 8px}
.tijd__stap p{color:var(--muted);font-size:.93rem;margin:0}

/* ---------- Citaat ---------- */
.quote{
  margin:30px 0 0;padding:32px 36px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,var(--surface-3),var(--surface-2));
}
.quote p{font-family:var(--ff-head);font-size:1.3rem;line-height:1.5;margin:0;color:var(--text)}
.quote p::before{content:"\201C"}
.quote p::after{content:"\201D"}

/* ---------- Blok met aandachtspunten ---------- */
.beste{
  margin-top:34px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px 30px;
}
.beste h3{margin:0 0 18px}

/* ---------- Meten, leren, verbeteren ---------- */
.cyclus{
  margin:46px 0 0;text-align:center;font-family:var(--ff-head);font-size:.78rem;
  font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.cyclus span{color:var(--gold);margin:0 4px}

/* ---------- Onderliggende pagina's ---------- */
.hero--sub{padding:136px 0 76px}
.hero--sub h1{font-size:clamp(2.1rem,5.2vw,3.7rem)}
.hero--sub .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid rgb(var(--gold-rgb) / .35)}
.hero--sub .eyebrow a:hover{color:var(--text)}
.hero--sub .lede{max-width:660px;margin:0 auto 34px;color:var(--muted);font-size:1.12rem}

/* ---------- Hulpklassen ---------- */
.center{text-align:center}
.mt-s{margin-top:20px}
.sec__lede--mid{margin-inline:auto;margin-bottom:32px}
.sec__lede--breed{max-width:none}
.tagline--mid{margin-top:38px}
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps--5{grid-template-columns:repeat(5,1fr)}
.cards--big .card{padding:38px 34px}
.cards--big .card h3{font-size:1.34rem}

/* ---------- Aandachtsblok ---------- */
.opgelet{
  border:1px solid rgb(var(--gold-rgb) / .35);background:rgb(var(--gold-rgb) / .06);
  border-radius:var(--radius);padding:34px 32px;
}
.opgelet h2{
  font-family:var(--ff-head);font-size:.86rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;
}
.opgelet p{color:var(--muted);margin-bottom:0}
.opgelet p + p{margin-top:14px}
.opgelet code{background:rgba(255,255,255,.07);padding:2px 7px;border-radius:5px;font-size:.9em}

/* ---------- Responsive aanvullingen ---------- */
@media (max-width:1000px){
  .aanbod__grid,.aanbod__grid--2{grid-template-columns:1fr}
  .motor__stap{grid-template-columns:88px 1fr;gap:8px 22px}
  .motor__stap p{grid-column:2}
  .tijd{grid-template-columns:repeat(2,1fr)}
  .steps--4,.steps--5{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:repeat(2,1fr);gap:36px}
}
@media (max-width:860px){
  .drop{width:100%}
  .drop__btn{
    width:100%;justify-content:space-between;padding:15px 0;font-size:1rem;
    border-bottom:1px solid var(--line);
  }
  .drop__menu{
    position:static;transform:none;opacity:1;pointer-events:auto;min-width:0;visibility:visible;
    background:none;border:0;box-shadow:none;padding:0;display:none;backdrop-filter:none;
    transition:none;
  }
  .drop__menu::before{display:none}
  .drop.is-open .drop__menu{display:grid;transform:none}
  .drop__menu a{
    padding:13px 0 13px 18px;border-bottom:1px solid var(--line);
    border-radius:0;font-size:.95rem;
  }
  .drop__menu a:hover{background:none}
  .hero--sub{padding:118px 0 62px}
}
@media (max-width:640px){
  .foot__grid{grid-template-columns:1fr;gap:32px}
  .foot__onder{justify-content:flex-start}
  .tijd{grid-template-columns:1fr}
  .motor__stap{grid-template-columns:1fr;gap:8px;padding:22px 24px}
  .motor__stap p{grid-column:1}
  .verg__kop{display:none}
  .verg__rij{grid-template-columns:1fr;gap:14px}
  .verg__pijl{display:none}
  .verg__nu::before,.verg__straks::before{
    display:block;font-family:var(--ff-head);font-size:0.78rem;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px;
  }
  .verg__nu::before{content:"Vandaag";color:#9D9DA5}
  .verg__straks::before{content:"Met UPgemerkt";color:var(--gold)}
  .quote{padding:26px 24px}
  .quote p{font-size:1.12rem}
}

/* ---------- Twee kolommen: betaald naast organisch ---------- */
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.duo__kol{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px 30px;
}
.duo__kol h3{
  font-family:var(--ff-head);font-size:0.78rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px;
}
.duo__kol p{color:var(--muted);margin:0}
@media (max-width:760px){
  .duo{grid-template-columns:1fr}
}

/* ---------- Introbegroeting ---------- */
.intro{
  position:fixed;inset:0;z-index:300;background:var(--ink);
  display:grid;place-items:center;text-align:center;padding:24px;
  transition:opacity .5s ease;
}
.intro.is-weg{opacity:0;pointer-events:none}
body.intro-bezig{overflow:hidden}

.intro__inner{position:relative;display:grid;justify-items:center}
.intro__ring{
  position:absolute;top:50%;left:50%;width:clamp(230px,42vw,340px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.7);border-radius:50%;
  border:1px solid rgb(var(--gold-rgb) / .34);
  box-shadow:0 0 90px 20px rgb(var(--gold-rgb) / .10) inset;
  opacity:0;animation:ringOp 1.5s cubic-bezier(.16,.8,.3,1) forwards;
}
.intro__merk{
  position:relative;font-family:var(--ff-head);font-weight:700;
  font-size:clamp(2.2rem,8vw,4rem);text-transform:uppercase;letter-spacing:.24em;
  margin:0;opacity:0;transform:translateY(10px);
  animation:merkOp .9s cubic-bezier(.16,.8,.3,1) .25s forwards;
}
.intro__merk em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro__welkom{
  position:relative;margin:26px 0 0;color:var(--text);font-size:clamp(1rem,2.6vw,1.32rem);
  opacity:0;animation:opUit .8s ease .85s forwards;
}
.intro__onder{
  position:relative;margin:10px 0 0;font-family:var(--ff-head);font-size:0.78rem;
  font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  opacity:0;animation:opUit .8s ease 1.15s forwards;
}
@keyframes ringOp{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  55%{opacity:1}
  100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}
}
@keyframes merkOp{
  0%{opacity:0;transform:translateY(10px);letter-spacing:.44em}
  100%{opacity:1;transform:translateY(0);letter-spacing:.24em}
}
@keyframes opUit{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.intro__knop{
  position:absolute;background:none;border:1px solid var(--line-2);border-radius:100px;
  color:var(--muted);font-family:var(--ff-body);font-size:.82rem;padding:9px 18px;
  cursor:pointer;transition:color .2s ease,border-color .2s ease;
}
.intro__knop:hover{color:var(--text);border-color:var(--gold)}
.intro__over{right:24px;bottom:24px}
.intro__geluid{left:24px;bottom:24px;color:var(--gold);border-color:rgb(var(--gold-rgb) / .45)}

@media (prefers-reduced-motion:reduce){
  .intro{display:none}
}
@media (max-width:520px){
  .intro__merk{letter-spacing:.16em}
  .intro__over,.intro__geluid{bottom:18px}
  .intro__over{right:18px}
  .intro__geluid{left:18px}
}

/* ---------- Referentiekaarten ---------- */
.klanten{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.klant{
  position:relative;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 26px 34px;
  transition:border-color .25s ease,transform .25s ease;
}
.klant:hover{border-color:rgb(var(--gold-rgb) / .42);transform:translateY(-4px)}
.klant .klant__sector{
  font-family:var(--ff-head);font-size:0.78rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 12px;
}
.klant h3{font-size:1.22rem;margin:0}
.klant .klant__doen{color:var(--muted);font-size:.92rem;margin:10px 0 0}
.klant__merk{
  position:absolute;right:20px;bottom:12px;
  font-family:var(--ff-head);font-weight:700;font-size:clamp(1.25rem,3.4vw,1.7rem);
  text-transform:uppercase;letter-spacing:.02em;color:rgba(255,255,255,.045);
  white-space:nowrap;pointer-events:none;
}

/* ---------- Vacatures ---------- */
.badge__nav{
  display:inline-grid;place-items:center;min-width:17px;height:17px;margin-left:7px;
  padding:0 4px;border-radius:100px;background:var(--grad);color:var(--ink);
  font-family:var(--ff-head);font-size:0.78rem;font-weight:700;line-height:1;
  vertical-align:1px;
}
.vacs{display:grid;gap:16px}
.vac{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 32px;
}
.vac__kop{display:flex;justify-content:space-between;align-items:flex-start;gap:26px}
.vac .vac__type{
  font-family:var(--ff-head);font-size:0.78rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 10px;
}
.vac__kop h3{font-size:1.42rem;margin:0 0 8px}
.vac .vac__kort{color:var(--muted);margin:0}
.vac__kop .btn{flex:0 0 auto}
.vac__meer{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.vac__meer summary{
  cursor:pointer;list-style:none;font-family:var(--ff-head);font-weight:500;font-size:.94rem;
  color:var(--gold);display:flex;align-items:center;gap:10px;
}
.vac__meer summary::-webkit-details-marker{display:none}
.vac__meer summary::after{
  content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .25s ease;
}
.vac__meer[open] summary::after{transform:rotate(-135deg) translateY(1px)}
.vac__body{padding-top:20px}
.vac__body > p{color:var(--muted)}
.vac__kolommen{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:8px}
.vac__kolommen h4{
  font-family:var(--ff-head);font-size:0.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text);margin:0 0 14px;
}
.vac__rijk{margin-top:6px}
.vac__rijk h2{font-size:1.14rem;margin:1.7em 0 .5em}
.vac__rijk h3{font-size:1rem;margin:1.5em 0 .4em;color:var(--gold)}
.vac__rijk p{font-size:.98rem}
.vac__rijk ul,.vac__rijk ol{font-size:.98rem}
.vac .vac__hoe{margin:26px 0 0;color:var(--muted);font-size:.94rem}
.vac__hoe a{color:var(--gold)}
.vac__privacy{
  margin:26px auto 0;max-width:560px;font-size:.84rem;color:#9D9DA5;line-height:1.65;
}

@media (max-width:1000px){
  .klanten{grid-template-columns:repeat(2,1fr)}
  .vac__kolommen{grid-template-columns:1fr;gap:22px}
}
@media (max-width:640px){
  .klanten{grid-template-columns:1fr}
  .vac{padding:26px 24px}
  .vac__kop{flex-direction:column;gap:18px}
  .vac__kop .btn{width:100%}
}

/* ---------- Blog ---------- */
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.art{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .25s ease,transform .25s ease;
}
.art:hover{border-color:rgb(var(--gold-rgb) / .42);transform:translateY(-4px)}
.art__beeld{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.art > :not(.art__beeld){padding-inline:28px}
.art > :first-child:not(.art__beeld){padding-top:30px}
.art .art__datum{
  font-family:var(--ff-head);font-size:0.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:26px 0 10px;
}
.art__beeld + .art__datum{margin-top:26px}
.art h3{font-size:1.24rem;margin:0 0 10px;line-height:1.3}
.art p{color:var(--muted);font-size:.94rem;margin:0}
.art .dienst__meer{margin-top:auto;padding-top:22px;padding-bottom:30px}

.hero--artikel{padding:132px 0 44px}
.hero--artikel .hero__inner{text-align:left}
.hero--artikel h1{font-size:clamp(1.9rem,4.4vw,3rem);text-wrap:balance}
.hero--artikel .lede{margin-inline:0}
.hero--artikel .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid rgb(var(--gold-rgb) / .35)}
.sec--kort{padding-top:0}

.artikel__hero{margin:0 0 40px}
.artikel__hero img{width:100%;height:auto;border-radius:var(--radius);display:block}

/* ---------- Tekst uit het CMS ---------- */
.rijk{font-size:1.06rem;line-height:1.8}
.rijk > *:first-child{margin-top:0}
.rijk p{color:var(--muted);margin:0 0 1.15em}
.rijk h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin:2em 0 .6em}
.rijk h3{font-size:1.18rem;margin:1.8em 0 .5em}
.rijk strong{color:var(--text)}
.rijk a{color:var(--gold)}
.rijk ul,.rijk ol{color:var(--muted);margin:0 0 1.15em;padding-left:1.3em;display:grid;gap:9px}
.rijk li{line-height:1.7}
.rijk li::marker{color:var(--gold)}
.rijk blockquote{
  margin:1.8em 0;padding:26px 30px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,var(--surface-3),var(--surface-2));
}
.rijk blockquote p{
  font-family:var(--ff-head);font-size:1.16rem;line-height:1.55;color:var(--text);margin:0;
}
.rijk code{background:rgba(255,255,255,.07);padding:2px 7px;border-radius:5px;font-size:.92em}
.rijk .artikel__beeld{margin:1.8em 0}
.rijk .artikel__beeld img{width:100%;height:auto;border-radius:var(--radius);display:block}

/* ---------- Logo van een referentie ---------- */
.klant__logo{max-height:34px;width:auto;margin-bottom:18px;opacity:.9}

@media (max-width:1000px){
  .arts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .arts{grid-template-columns:1fr}
  .hero--artikel{padding:112px 0 36px}
}

/* ---------- Blokken uit de beheeromgeving ---------- */
.blok__beeld{margin:0}
.blok__beeld img{width:100%;height:auto;border-radius:var(--radius);display:block}
.blok__beeld figcaption{margin-top:12px;font-size:.86rem;color:#9D9DA5;text-align:center}
.quote__wie{
  margin-top:16px;font-family:var(--ff-head);font-size:0.78rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.steps--1{grid-template-columns:1fr}
.steps--2{grid-template-columns:repeat(2,1fr)}
.steps--3{grid-template-columns:repeat(3,1fr)}
.steps--6{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.center .verg__kop,.center .verg__rij{text-align:left}
@media (max-width:1000px){
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .steps--3,.steps--6{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .cards--4{grid-template-columns:1fr}
  .steps--2,.steps--3,.steps--6{grid-template-columns:1fr}
}

/* ---------- Opname boeken ---------- */
.boeken{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.boek{
  display:flex;flex-direction:column;
  background:linear-gradient(168deg,rgb(var(--gold-rgb) / .07),var(--surface-2) 62%);
  border:1px solid rgb(var(--gold-rgb) / .22);border-radius:var(--radius);padding:36px 32px;
}
.boek .boek__duur{
  font-family:var(--ff-head);font-size:0.78rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 10px;
}
.boek h2,.boek h3{font-size:1.5rem;margin:0 0 12px}
.boek .boek__tekst{color:var(--muted);margin:0 0 22px}
.boek .ticks{margin-bottom:28px}
.boek .btn{margin-top:auto}
@media (max-width:860px){
  .boeken{grid-template-columns:1fr}
}

/* ---------- Agenda met beschikbare momenten ---------- */
.agenda{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
.agenda__tabs{display:flex;gap:2px;padding:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.agenda__tab{
  flex:1 1 180px;background:none;border:1px solid transparent;border-radius:var(--radius-sm);
  color:var(--muted);font-family:var(--ff-head);font-weight:600;font-size:.92rem;
  padding:13px 18px;cursor:pointer;transition:color .2s ease,background .2s ease;
}
.agenda__tab:hover{color:var(--text)}
.agenda__tab.is-aan{background:rgb(var(--gold-rgb) / .12);border-color:rgb(var(--gold-rgb) / .4);color:var(--gold)}
.agenda__venster{min-height:420px;background:#fff}
.agenda__venster iframe{display:block;width:100%;border:0}
.agenda__wacht{
  min-height:420px;background:var(--surface-2);display:grid;place-content:center;
  gap:20px;padding:48px 32px;text-align:center;
}
.agenda__wacht p{max-width:520px;margin:0 auto;color:var(--muted);font-size:.95rem}
@media (max-width:640px){
  .agenda__tab{flex:1 1 100%}
  .agenda__venster,.agenda__wacht{min-height:340px}
  .agenda__wacht{padding:36px 22px}
}

/* ---------- Eigen reservatiesysteem ---------- */
.res{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.res__tabs{display:flex;gap:2px;padding:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.res__tab{
  flex:1 1 200px;background:none;border:1px solid transparent;border-radius:var(--radius-sm);
  color:var(--muted);font-family:var(--ff-head);font-weight:600;font-size:.92rem;
  padding:13px 18px;cursor:pointer;transition:color .2s ease,background .2s ease;
}
.res__tab:hover{color:var(--text)}
.res__tab.is-aan{background:rgb(var(--gold-rgb) / .12);border-color:rgb(var(--gold-rgb) / .4);color:var(--gold)}
.res__paneel{padding:28px 30px 34px}

.res__kop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.res__maand{
  margin:0;font-family:var(--ff-head);font-weight:600;font-size:1.12rem;
  text-transform:capitalize;
}
.res__pijl{
  background:none;border:1px solid var(--line-2);border-radius:100px;color:var(--text);
  width:38px;height:38px;font-size:1rem;cursor:pointer;flex:0 0 auto;
}
.res__pijl:hover{border-color:var(--gold);color:var(--gold)}

.res__raster{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.res__dagnaam{
  text-align:center;font-family:var(--ff-head);font-size:0.78rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#9D9DA5;padding-bottom:6px;
}
.res__leeg{aspect-ratio:1}
.res__dag{
  aspect-ratio:1;display:grid;place-items:center;border-radius:var(--radius-sm);
  font-family:var(--ff-body);font-size:.95rem;cursor:pointer;border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.res__dag.is-vrij{background:rgb(var(--gold-rgb) / .1);border-color:rgb(var(--gold-rgb) / .3);color:var(--text)}
.res__dag.is-vrij:hover{background:rgb(var(--gold-rgb) / .22);border-color:var(--gold)}
.res__dag.is-gekozen{background:var(--grad);color:var(--ink);font-weight:600;border-color:transparent}
.res__dag.is-bezet{background:rgba(255,255,255,.03);color:#4A4A50;cursor:not-allowed}

.res__legende{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:20px 0 0;
  font-size:.82rem;color:var(--muted);
}
.res__stip{width:10px;height:10px;border-radius:3px;display:inline-block}
.res__stip--vrij{background:rgb(var(--gold-rgb) / .45);border:1px solid var(--gold)}
.res__stip--bezet{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);margin-left:10px}
.res__tz{margin-left:auto;color:#9D9DA5}

.res__tijden{margin-top:26px}
.res__tijdkop{font-size:1.05rem;margin:0 0 14px}
.res__uren{display:flex;flex-wrap:wrap;gap:9px}
.res__uren{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.res__blok{
  display:grid;gap:5px;text-align:left;
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  color:var(--text);font-family:var(--ff-body);padding:18px 20px;cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.res__blok:hover{border-color:var(--gold)}
.res__blok strong{font-family:var(--ff-head);font-size:1.02rem}
.res__blok span{font-size:.88rem;color:var(--muted)}
.res__blok .res__blokuitleg{font-size:.8rem;color:#9D9DA5}
.res__blok .res__afl{font-size:.82rem;color:var(--gold)}
.res__afluitleg{margin-top:16px;font-size:.88rem}
.res__blok.is-gekozen{background:rgb(var(--gold-rgb) / .12);border-color:var(--gold)}
.res__blok.is-gekozen span{color:var(--text)}
.res__optie{
  grid-column:1/-1;margin:0;padding:14px 18px;border-radius:var(--radius-sm);
  background:rgb(var(--gold-rgb) / .08);border:1px solid rgb(var(--gold-rgb) / .28);
  color:var(--muted);font-size:.9rem;
}

.res__melding{color:var(--muted);font-size:.94rem;margin:0}
.res__melding--fout{color:#F09990;text-align:center;margin-bottom:20px}

.res__form{
  margin-top:30px;padding-top:26px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.res__form h3,.res__samenvatting,.res__form .field--full,.res__form .check,
.res__form .btn,.res__form .form__note{grid-column:1/-1}
.res__form h3{margin:0}
.res__samenvatting{margin:0;color:var(--muted);font-size:.95rem}
.res__samenvatting strong{color:var(--gold)}

.res__klaar{text-align:center;display:grid;gap:14px;padding:20px 0}
.res__klaar .res__vink{
  width:56px;height:56px;margin:0;justify-self:center;border-radius:50%;
  display:grid;place-items:center;
  background:rgb(var(--gold-rgb) / .14);border:1px solid rgb(var(--gold-rgb) / .45);
  color:var(--gold);font-size:1.6rem;
}
.res__klaar h3{margin:0}
.res__klaar p{margin:0;color:var(--muted)}
.res__klaar strong{color:var(--text)}

@media (max-width:640px){
  .res__tab{flex:1 1 100%}
  .res__paneel{padding:20px 18px 26px}
  .res__form{grid-template-columns:1fr}
  .res__uren{grid-template-columns:1fr}
  .res__dag{font-size:.86rem}
  .res__tz{margin-left:0;flex-basis:100%}
}

/* ---------- Melding wanneer de site als bestand geopend is ---------- */
.bestandswaarschuwing{
  position:relative;z-index:120;background:#2A1D06;border-bottom:1px solid rgb(var(--gold-rgb) / .4);
  color:var(--gold-lt);font-size:.86rem;line-height:1.6;padding:12px 24px;text-align:center;
}
.bestandswaarschuwing a{color:var(--gold);font-weight:600}
.bestandswaarschuwing code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:5px}
body.heeft-waarschuwing .nav{position:static}

/* ---------- Bevestiging na het formulier ---------- */
.form__klaar{text-align:center;display:grid;gap:12px;padding:26px 10px}
.form__klaar .form__vink{
  width:52px;height:52px;margin:0;justify-self:center;border-radius:50%;
  display:grid;place-items:center;background:rgb(var(--gold-rgb) / .14);
  border:1px solid rgb(var(--gold-rgb) / .45);color:var(--gold);font-size:1.5rem;
}
.form__klaar h3{margin:0}
.form__klaar p{margin:0;color:var(--muted)}

/* scheiding en actielink in het uitklapmenu */
.drop__scheiding{display:block;height:1px;margin:8px 6px;background:var(--line)}
@media (max-width:900px){.drop__scheiding{margin:2px 0}}
.drop__menu a.drop__actie{color:var(--muted)}
.footer a.nav__beheer{margin-left:14px;opacity:.55;font-size:.82rem}

/* referentiekaart die doorklikt naar de case */
a.klant--link{text-decoration:none;display:block;transition:border-color .2s,transform .2s}
a.klant--link:hover{border-color:rgb(var(--gold-rgb) / .55);transform:translateY(-3px)}
.klant__meer{display:block;margin-top:14px;color:var(--gold);font-size:.85rem;font-weight:600}
.klant__meer::after{content:" \2192"}

/* sollicitatieformulier onder een vacature */
.vac__sol{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.form--sol{margin:0}
.form__kop{margin:0 0 4px;font-weight:600;font-size:1.02rem;color:var(--text)}
.form__klein{margin:2px 0 0;font-size:.84rem;color:var(--muted);line-height:1.6}

/* klantlogo's staan op een licht vlak, want ze zijn voor een witte achtergrond gemaakt */
.klant__logo{background:#fff;border-radius:8px;padding:8px 10px;opacity:1;max-height:52px}

/* kleur op een stuk tekst, uit de builder */
.kl--goud{color:var(--gold)}
.kl--grijs{color:var(--muted)}
.kl--wit{color:var(--text)}
.grad .kl--wit,.grad .kl--grijs{-webkit-text-fill-color:currentColor}

/* veld dat enkel een robot invult, voor mensen onzichtbaar */
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Aanbod: naam is een link, de pijl klapt het menu uit */
.drop{display:flex;align-items:center;gap:2px}
a.drop__btn{text-decoration:none}
.drop__pijl{background:none;border:0;padding:4px 2px;cursor:pointer;color:var(--muted);
display:inline-flex;align-items:center;line-height:1}
.drop__pijl:hover,.drop.is-open .drop__pijl{color:var(--gold)}
.drop__menu a.drop__alles{color:var(--text);font-weight:600}
@media (max-width:900px){
  .drop{flex-wrap:wrap;width:100%;border-bottom:1px solid var(--line)}
  .drop__pijl{margin-left:auto;padding:15px 6px}
  /* Op een telefoon hoort dit menu in de lijst te staan en de links
     eronder weg te duwen. Als zwevend kadertje legde het zich over
     Cases, Over ons en Contact, en dan lijkt het menu stuk. */
  /* De naam en het pijltje horen op één regel. Zonder deze breedte neemt
     de link de volle kolom en wordt het pijltje eronder geduwd. */
  .nav__links .drop > .drop__btn{border-bottom:0;width:auto;flex:0 1 auto}
  .drop__menu{
    position:static;order:3;width:100%;min-width:0;
    transform:none;opacity:1;visibility:visible;pointer-events:auto;
    background:none;border:0;border-radius:0;box-shadow:none;
    padding:0 0 8px 14px;display:none;transition:none;
  }
  .drop__menu::before{display:none}
  .drop.is-open .drop__menu{display:grid;transform:none}
  .nav__links .drop__menu a{
    padding:13px 0;border-bottom:1px solid var(--line);border-radius:0;font-size:.95rem;
  }
  .nav__links .drop__menu a:last-child{border-bottom:0}
  .drop__menu a:hover{background:none}
  .drop__scheiding{display:none}
}

/* vacature als aanklikbare kaart in de lijst */
a.vac--kaart{display:block;text-decoration:none;transition:border-color .2s,transform .2s}
a.vac--kaart:hover{border-color:rgb(var(--gold-rgb) / .55);transform:translateY(-2px)}
a.vac--kaart .btn{pointer-events:none}
.vac__kolommen h2,.vac__kolommen h3{font-size:1rem;margin:0 0 10px}

/* cookiemelding onderaan */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(10,10,11,.97);
border-top:1px solid var(--line);backdrop-filter:blur(10px);padding:16px 20px}
.cookie[hidden]{display:none}
.cookie__binnen{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:20px;
flex-wrap:wrap}
.cookie__tekst{margin:0;font-size:.88rem;color:var(--muted);flex:1 1 340px;line-height:1.6}
.cookie__tekst a{color:var(--gold)}
.cookie__knoppen{display:flex;gap:10px;flex-wrap:wrap}
.voet__knop{background:none;border:0;padding:0;margin-left:14px;color:var(--muted);
font:inherit;font-size:.82rem;cursor:pointer;text-decoration:underline}
.voet__knop:hover{color:var(--gold)}
@media (max-width:640px){
  .cookie__binnen{flex-direction:column;align-items:stretch}
  .cookie__knoppen .btn{width:100%;justify-content:center}
}

/* ruimte onder de vaste balk wanneer je naar een stuk van de pagina springt */
[id]{scroll-margin-top:86px}


/* ===========================================================
   Warme lichte sectie, uit de stijlrichting: ivoor met zwarte
   tekst. Alle bouwstenen erven de kleuren via deze variabelen,
   zodat kaarten, lijnen en knoppen automatisch meegaan.
   =========================================================== */
.sec--warm{
  --text:#101010;
  --muted:#5C5850;
  --surface:var(--warm,#F5F1E8);
  --surface-2:#FFFFFF;
  --surface-3:#FFFDF7;
  --line:rgba(16,16,16,.12);
  --line-2:rgba(16,16,16,.26);
  background:var(--warm,#F5F1E8);color:#101010;
}
.sec--warm .eyebrow{color:#6E6757}
.sec--warm .kl--wit{color:#101010}
.sec--warm .klant__merk{color:rgba(16,16,16,.05)}
.sec--warm .btn--ghost{color:#101010;border-color:rgba(16,16,16,.28)}
.sec--warm .btn--ghost:hover{color:#101010;border-color:#101010}
.sec--warm .card:hover,.sec--warm .klant:hover{background:#fff;border-color:rgba(16,16,16,.3)}
.sec--warm .rijk a{color:#101010;border-bottom:1px solid rgba(16,16,16,.35)}
.sec--warm .rijk a:hover{border-color:#101010}
/* geel op ivoor leest niet, dus daar is de tweede kophelft zwart
   met enkel het slotpunt in geel */
.sec--warm .grad--ink{background:none;color:#101010;-webkit-text-fill-color:#101010}
.grad--punt::after{content:".";color:var(--gold);-webkit-text-fill-color:var(--gold)}

/* ---------- Beeld naast tekst ---------- */
.beeldtekst{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.beeldtekst__tekst h2{margin-bottom:.35em}
.beeldtekst__tekst .sec__lede{max-width:none}
.beeldtekst__beeld{margin:0}
.beeldtekst__beeld img{width:100%;border-radius:var(--radius);object-fit:cover}
.beeldtekst__beeld figcaption{margin-top:12px;font-size:.84rem;color:var(--muted)}
.beeldtekst--links .beeldtekst__beeld{order:-1}
.beeldtekst__knop{margin:26px 0 0}
@media (max-width:860px){
  /* op mobiel eerst de boodschap, dan het beeld */
  .beeldtekst{grid-template-columns:1fr}
  .beeldtekst--links .beeldtekst__beeld{order:0}
}

/* ---------- Casekaart met een foto ---------- */
.klant--foto{padding:0}
.klant--foto .klant__foto{width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--radius) var(--radius) 0 0}
.klant--foto .klant__sector{margin:22px 26px 12px}
.klant--foto h3{margin:0 26px}
.klant--foto .klant__doen{margin:10px 26px 0}
.klant--foto .klant__meer{margin:14px 26px 26px}
.klant--foto .klant__logo{margin:22px 26px 0}

/* ---------- Hero met een groot beeld rechts, zoals in het ontwerp ---------- */
.hero__kolommen{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
.hero__beeld{margin:0}
.hero__beeld img{width:100%;height:auto;border-radius:var(--radius);object-fit:cover}
.hero__beeld figcaption{margin-top:10px;font-size:.8rem;color:var(--muted)}
.hero--beeld{text-align:left}
.hero--beeld .lede{margin-inline:0;max-width:32em}
.hero--beeld .hero__cta{justify-content:flex-start}

@media (min-width:901px){
  .hero--beeld{
    padding:0;min-height:min(90vh,880px);display:flex;align-items:center;
  }
  .hero--beeld .hero__inner{width:100%;padding-top:74px;position:static}
  .hero--beeld .hero__kolommen{display:block}
  .hero--beeld .hero__intro{max-width:min(560px,44vw)}
  /* het beeld raakt de bovenkant, de rechterkant en de sectie eronder */
  .hero--beeld .hero__beeld{
    position:absolute;top:74px;right:0;bottom:0;width:54vw;max-width:56%;
  }
  .hero--beeld .hero__beeld img{
    width:100%;height:100%;border-radius:0;object-fit:cover;
  }
  .hero--beeld .hero__beeld figcaption{
    position:absolute;right:18px;bottom:14px;margin:0;font-size:.78rem;
    color:rgba(255,255,255,.82);text-shadow:0 1px 3px rgba(0,0,0,.7);
  }
  /* geen verloop tussen tekst en beeld: een scherpe rand, zoals in het ontwerp */
  .hero--beeld .hero__beeld::before{content:none}
}
@media (max-width:900px){
  .hero--beeld .hero__beeld img{max-height:260px}
}

/* de hero staat er meteen, die fadet niet in: dat is het eerste wat je ziet */
.hero .reveal{opacity:1 !important;transform:none !important}

/* geel op ivoor: kleine tekst wordt donker, zodat het leesbaar blijft */
.sec--warm .klant__sector,.sec--warm .aanbod__belofte{color:#6E6757}
.sec--warm .klant__meer,.sec--warm .rijk strong{color:#101010}
.sec--warm .step__n,.sec--warm .motor__getal,.sec--warm .vac__type{color:#836000}
/* de laatste stap van de trap is goud: op ivoor krijgt die een gele vulling
   met zwarte tekst, dan blijft het accent zichtbaar en leesbaar */
.sec--warm .trap__stap:last-child{background:var(--gold);border-color:var(--gold);color:#101010}

/* ---------- Drie ingangen, ivoren kaarten op zwart ---------- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.route{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  background:var(--warm,#F5F1E8);color:#101010;
  border-radius:var(--radius);padding:32px 30px 30px;
}
.route__ico{
  width:58px;height:58px;border-radius:50%;background:#101010;color:var(--warm,#F5F1E8);
  display:grid;place-items:center;flex:0 0 auto;
}
.route__ico svg{width:26px;height:26px}
.route__label{
  font-family:var(--ff-head);font-size:0.78rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:#6E6757;margin:6px 0 0;
}
.route h3{font-size:1.3rem;line-height:1.25;color:#101010;margin:0 0 6px}
.route .btn{margin-top:auto}
@media (max-width:900px){
  .routes{grid-template-columns:1fr;gap:16px}
}

/* ---------- Merkband: het merkmoment tussen twee secties ---------- */
.merkband{
  background:var(--ink);padding:clamp(56px,9vw,104px) 0;text-align:center;
  background-size:cover;background-position:center;position:relative;
}
.merkband--beeld::before{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.62);
}
.merkband .wrap{position:relative}
.merkband__tekst{
  font-family:var(--ff-head);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.9rem,6.2vw,4.2rem);line-height:1.08;margin:0;color:var(--text);
  text-wrap:balance;
}
.merkband__oog{display:block;margin:22px auto 0;width:44px;color:var(--gold)}
.merkband__oog svg{width:44px;height:44px}

/* ---------- Casekaarten in twee of drie kolommen ---------- */
.klanten--2{grid-template-columns:repeat(2,1fr)}
.klanten--3{grid-template-columns:repeat(3,1fr)}
.klanten--2 h3,.klanten--3 h3{font-size:1.4rem}
@media (max-width:860px){
  .klanten--2,.klanten--3{grid-template-columns:1fr}
}

/* ---------- Compacte slotacties ---------- */
.routes--kort .route{padding:24px 24px 22px;gap:10px}
.routes--kort .route__ico{display:none}
.routes--kort .route h3{font-size:1.1rem}
.routes--kort .route__label{margin:0}

/* ---------- Portretten ---------- */
.portretten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.portret{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 24px 26px}
.portret__foto{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-sm);
  margin-bottom:18px}
.portret__leeg{width:100%;aspect-ratio:4/5;border:1px dashed var(--line-2);
  border-radius:var(--radius-sm);margin-bottom:18px;display:grid;place-items:center;
  text-align:center;padding:16px}
.portret__leeg span{font-size:.86rem;color:var(--muted)}
.portret h3{margin:0 0 2px}
.portret__rol{font-family:var(--ff-head);font-size:.8rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.sec--warm .portret__rol{color:#836000}
.portret p{color:var(--muted);font-size:.94rem;margin:0}
@media (max-width:860px){
  .portretten{grid-template-columns:1fr}
}

/* op mobiel blijven de drie keuzes boven de grote foto, zoals in het voorstel */
@media (max-width:900px){
  .hero--beeld .hero__beeld img{max-height:230px;object-position:center}
}

/* ---------- Drie beelden met label ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.trio__vak{margin:0}
.trio__vak img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm)}
.trio__leeg{width:100%;aspect-ratio:4/3;border:1px dashed var(--line-2);
  border-radius:var(--radius-sm);display:grid;place-items:center;text-align:center;padding:14px}
.trio__leeg span{font-size:.86rem;color:var(--muted)}
.trio__vak figcaption{margin-top:12px;font-family:var(--ff-head);font-weight:600;font-size:.98rem}
@media (max-width:860px){
  .trio{grid-template-columns:1fr}
}

/* ---------- Titel links, inhoud rechts (visual 01) ---------- */
.naast{display:grid;grid-template-columns:minmax(230px,1fr) 1.9fr;gap:clamp(28px,4vw,56px);
  align-items:start}
.naast__kop h2{margin:0}
.naast__kop .sec__lede{margin-top:16px}
@media (max-width:900px){
  .naast{grid-template-columns:1fr;gap:24px}
}

/* twee lichte secties op elkaar krijgen een haarlijn, zoals in het ontwerp */
.sec--warm + .sec--warm{border-top:1px solid rgba(16,16,16,.10)}

/* de vergelijking op ivoor: goud wordt donker genoeg om te lezen */
.sec--warm .verg__kop span:last-child{color:#836000}
.sec--warm .verg__pijl{color:#836000}

/* elke gouden tekst wordt op ivoor een donkerder goud, anders leest ze niet */
.sec--warm .aanbod .aanbod__belofte,
.sec--warm .aanbod:hover .dienst__meer,
.sec--warm .agenda__tab.is-aan,
.sec--warm .art .art__datum,
.sec--warm .boek .boek__duur,
.sec--warm .btn--ghost:hover,
.sec--warm .card__ico,
.sec--warm .contactlist a:hover,
.sec--warm .contactlist span,
.sec--warm .cyclus span,
.sec--warm .dienst__meer,
.sec--warm .duo__kol h3,
.sec--warm .eyebrow,
.sec--warm .form__klaar .form__vink,
.sec--warm .form__note.is-ok,
.sec--warm .kl--goud,
.sec--warm .klant .klant__sector,
.sec--warm .klant__meer,
.sec--warm .opgelet h2,
.sec--warm .portret__rol,
.sec--warm .price__tag,
.sec--warm .quote__wie,
.sec--warm .res__blok .res__afl,
.sec--warm .res__klaar .res__vink,
.sec--warm .res__pijl:hover,
.sec--warm .res__samenvatting strong,
.sec--warm .res__tab.is-aan,
.sec--warm .rijk a,
.sec--warm .rijk li::marker,
.sec--warm .sig span,
.sec--warm .step__n,
.sec--warm .tijd__n,
.sec--warm .vac .vac__type,
.sec--warm .vac__hoe a,
.sec--warm .vac__meer summary,
.sec--warm .vac__rijk h3,
.sec--warm .verg__kop span:last-child,
.sec--warm .verg__pijl,
.sec--warm .verg__straks::before{color:#836000}

/* ---------- Beeldcollage in de hero: één groot en twee kleine ---------- */
.hero__beeld--collage{display:grid;grid-template-columns:1.3fr 1fr;gap:8px}
.hero__beeld--collage > img{width:100%;height:100%;object-fit:cover}
.hero__beeld-klein{display:grid;grid-template-rows:1fr 1fr;gap:8px;min-height:0}
.hero__beeld-klein img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .hero__beeld--collage{grid-template-columns:1fr;max-height:none}
  .hero__beeld--collage > img{max-height:200px}
  .hero__beeld-klein{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .hero__beeld-klein img{max-height:110px}
}

/* ---------- Kaarten met een icoon in een rondje (visual 07) ---------- */
.cards--cirkel .card{background:transparent;border:0;padding:0 18px;text-align:center}
.cards--cirkel .card:hover{background:transparent;transform:none}
.cards--cirkel .card__ico{
  width:54px;height:54px;border-radius:50%;margin:0 auto 16px;
  background:transparent;border:1px solid currentColor;color:inherit;
}
.cards--cirkel .card__ico svg{width:24px;height:24px}
.cards--cirkel .card h3{font-size:1.02rem;margin-bottom:8px}
.cards--cirkel .card p{font-size:.92rem}
@media (max-width:760px){
  .cards--cirkel .card{padding:0}
}

/* ---------- Hero op de home: de maten uit het ontwerp ---------- */
.hero--beeld .hero__intro h1{
  font-size:clamp(2.6rem,5.4vw,5rem);line-height:1.02;letter-spacing:-.03em;
  margin-bottom:.42em;
}
.hero--beeld .eyebrow{font-size:.82rem;letter-spacing:.2em;margin-bottom:22px}
.hero--beeld .lede{color:#E7E5E1;font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.62;
  max-width:26em;margin-bottom:36px}
.hero--beeld .hero__cta .btn{padding:17px 30px;font-size:1rem}
@media (min-width:901px){
  .hero--beeld{min-height:min(90vh,880px)}
  .hero--beeld .hero__inner{padding-top:96px;padding-bottom:56px}
  .hero--beeld .hero__intro{max-width:min(600px,46vw)}
}

/* casekaart als fototegel: het beeld voorop, tekst eronder */
.klanten--2 .klant--foto .klant__foto{aspect-ratio:16/11}
.klanten--2 .klant--foto{background:transparent;border:0;border-radius:0}
.klanten--2 .klant--foto:hover{background:transparent;border:0;transform:translateY(-3px)}
.klanten--2 .klant--foto .klant__foto{border-radius:var(--radius-sm)}
.klanten--2 .klant--foto .klant__sector{margin:16px 0 6px}
.klanten--2 .klant--foto h3{margin:0}
.klanten--2 .klant--foto .klant__doen{margin:8px 0 0}
.klanten--2 .klant--foto .klant__meer{margin:12px 0 0}
.klanten--2 .klant--foto .klant__logo{display:none}
.klanten--2 .klant--foto .klant__merk{display:none}

/* de gloed achter de titel blijft weg wanneer er een beeld naast staat */
.hero--beeld .hero__glow{display:none}

/* De inhoud volgt de breedte van het scherm, met ruimte aan de zijkanten.
   Zo blijft er links geen lege zwarte strook staan op een breed scherm. */
@media (min-width:900px){
  .wrap{max-width:min(var(--wrap),94vw)}
}
@media (min-width:1200px){
  .wrap{padding-inline:32px}
}

/* §6 ontwerpbrief: touchdoelen ruim, ongeveer 44 pixels */
@media (max-width:900px){
  .btn,.btn--sm,.nav__links a,.drop__btn,.foot__links a{min-height:44px;display:inline-flex;
    align-items:center}
  .nav__links a,.drop__btn{padding-block:10px}
}
/* §5 ontwerpbrief: rustige overgangen, en respect voor minder beweging */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important}
}

/* klein label onder een gouden lijntje, zoals bij het aanbod in het ontwerp */
.card__label{
  font-family:var(--ff-head);font-size:.86rem;font-weight:600;margin:0 0 10px;
  padding-top:12px;position:relative;color:var(--text);
}
.card__label::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;
  background:var(--gold)}
.cards--cirkel .card__label{padding-top:14px}
.cards--cirkel .card__label::before{left:50%;transform:translateX(-50%)}

/* ---------- Lichte pagina-kop (Over ons in het ontwerp) ---------- */
.hero--licht{
  --text:#101010;--muted:#5C5850;--line:rgba(16,16,16,.12);--line-2:rgba(16,16,16,.26);
  background:var(--warm,#F5F1E8);color:#101010;
}
.hero--licht .hero__glow{display:none}
.hero--licht .eyebrow{color:#6E6757}
.hero--licht .grad{background:none;color:#101010;-webkit-text-fill-color:#101010}
.hero--licht .lede{color:#5C5850}
.hero--licht .btn--ghost{color:#101010;border-color:rgba(16,16,16,.28)}

/* ---------- Casepagina: dienstchips en breed beeld ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.hero--sub .chips{justify-content:center}
.chip{
  font-family:var(--ff-head);font-size:.82rem;font-weight:600;letter-spacing:.04em;
  border:1px solid var(--line-2);border-radius:100px;padding:8px 16px;color:var(--text);
}
.case__beeld{margin:0}
.case__beeld img{width:100%;height:clamp(240px,42vh,460px);object-fit:cover;display:block}
.case__beeld figcaption{font-size:.82rem;color:var(--muted);padding:10px 24px 0;
  max-width:var(--wrap);margin-inline:auto}

/* de drie ingangen sluiten direct aan op de hero, zoals in visual 07 */
.hero--beeld + .sec{padding-top:clamp(28px,3.4vw,48px)}

/* ---------- Galerij met opgeleverd werk ---------- */
.galerij{display:grid;gap:18px}
.galerij--2{grid-template-columns:repeat(2,1fr)}
.galerij--3{grid-template-columns:repeat(3,1fr)}
.galerij--4{grid-template-columns:repeat(4,1fr)}
.galerij__vak{margin:0}
.galerij__vak img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-sm);
  display:block}
.galerij__leeg{width:100%;aspect-ratio:4/5;border:1px dashed var(--line-2);
  border-radius:var(--radius-sm);display:grid;place-items:center;text-align:center;padding:14px}
.galerij__leeg span{font-size:.84rem;color:var(--muted)}
.galerij__vak figcaption{margin-top:10px;font-size:.86rem;color:var(--muted)}
@media (max-width:900px){
  .galerij--3,.galerij--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .galerij--2,.galerij--3,.galerij--4{grid-template-columns:1fr}
}


/* ===========================================================
   Brutaler, op vraag van Kenji: vlakke kleuren, scherpe vormen,
   geen gradients en geen gloed. Zwart, gebroken wit, fel geel.
   =========================================================== */
:root{--grad:var(--gold)}
.grad{background:none;color:var(--gold);-webkit-text-fill-color:var(--gold)}
.btn{background:var(--gold);color:#101010;border-radius:2px;box-shadow:none}
.btn:hover{background:var(--gold-lt);box-shadow:none;transform:none}
.btn--ghost{background:transparent;color:var(--text);border:2px solid var(--text);border-radius:2px}
.btn--ghost:hover{background:var(--text);color:#101010;border-color:var(--text)}
.hero__glow{display:none !important}
.sec--cta{background:var(--ink);border-top:2px solid var(--gold)}
.sec--cta::before,.sec--cta::after{content:none !important}
.card,.klant,.route,.portret,.price,.vac{border-radius:2px}
.card:hover,.klant:hover{transform:none}
.galerij__vak img,.trio__vak img,.portret__foto,.beeldtekst__beeld img,
.klanten--2 .klant--foto .klant__foto{border-radius:0}
.trap__stap{border-radius:2px}
.chip{border-radius:2px}
.tijd__stap::after{background:var(--gold)}


/* ===========================================================
   Eerste scherm: de drie woorden bepalen de compositie, het
   beeld schuift er deels achter. Eén gele knop.
   =========================================================== */
.hero--reus{padding:120px 0 0;text-align:left;min-height:auto;display:block;overflow:hidden}
.hero--reus .hero__inner{position:relative;z-index:2}
.hero--reus .eyebrow{margin-bottom:18px}
.hero__reus{
  font-family:var(--ff-head);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.9rem,12.4vw,12rem);line-height:.86;letter-spacing:-.045em;
  margin:0 0 clamp(24px,4vw,56px);position:relative;z-index:2;
  text-wrap:balance;
}
.hero__reus span{display:block}
.hero__reus .grad{color:var(--gold);-webkit-text-fill-color:var(--gold)}
.hero--reus .hero__onder{
  display:grid;grid-template-columns:minmax(0,32em) auto;gap:clamp(20px,3vw,48px);
  align-items:end;padding-bottom:clamp(40px,6vw,88px);position:relative;z-index:2;
}
.hero--reus .lede{margin:0;color:#DEDCD7;font-size:clamp(1.02rem,1.2vw,1.2rem)}
.hero--reus .hero__cta{justify-content:flex-start;margin:0}
.hero--reus .hero__cta .btn{padding:20px 34px;font-size:1.04rem}
/* de tweede actie is een tekstlink, niet nog een knop */
.hero--reus .hero__cta .btn--ghost{
  background:transparent;border:0;color:var(--text);padding:20px 4px;
  border-bottom:2px solid var(--gold);border-radius:0;
}
.hero--reus .hero__cta .btn--ghost:hover{background:transparent;color:var(--gold)}
.hero--reus .hero__cta .btn--ghost::after{content:" \2192"}

/* het beeld: rechts, deels achter de letters */
.hero--reus .hero__beeld{
  position:absolute;right:0;top:clamp(90px,12vw,190px);
  width:min(58vw,880px);height:clamp(260px,42vw,620px);margin:0;z-index:1;
}
.hero--reus .hero__beeld img{width:100%;height:100%;object-fit:cover;border-radius:0}
.hero--reus .hero__beeld::after{
  content:"";position:absolute;inset:0;background:rgba(16,16,16,.34);
}
.hero--reus .hero__beeld figcaption{display:none}
@media (max-width:900px){
  .hero--reus{padding-top:96px}
  .hero--reus .hero__beeld{position:relative;top:auto;width:100%;height:220px;
    margin:0 0 28px}
  .hero--reus .hero__onder{grid-template-columns:1fr;align-items:start}
}

/* ---------- Het oog, uitvergroot, met werk erin ---------- */
.oog{position:relative;margin-top:clamp(24px,4vw,48px);max-width:900px;margin-inline:auto}
.oog svg{width:100%;height:auto;display:block}
.oog__iris{transition:transform .18s ease-out}
.oog__knop{margin-top:clamp(20px,3vw,36px)}
@media (prefers-reduced-motion:reduce){.oog__iris{transition:none}}

/* ---------- Gele sectie met één zin ---------- */
.geelvlak{background:var(--gold);color:#101010;padding:clamp(56px,8vw,120px) 0}
.geelvlak__zin{
  font-family:var(--ff-head);font-weight:700;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(1.9rem,5.4vw,4.6rem);margin:0;max-width:22em;text-wrap:balance;
}
.geelvlak__bij{margin:22px 0 0;font-size:1.06rem;max-width:34em;color:#2A2308}

/* effen navigatiebalk: geen wazig vlak waar secties door schijnen */
.nav{background:var(--ink)}
.nav.is-stuck{background:var(--ink);backdrop-filter:none;border-bottom-color:rgba(255,255,255,.12)}

/* korte, menselijke regel naast de knop */
.hero__actie{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hero__bij{margin:0;font-size:.95rem;color:#B9B6B0;max-width:30em;line-height:1.5}

/* De extra regels onder een bevestigde sollicitatie: wanneer de bevestiging
   komt, en wanneer we laten weten of we iemand uitnodigen. */
.form__klaar-bij{font-size:.9rem;color:var(--muted);max-width:38em;margin:0 auto !important}
.form__klaar-bij strong{color:var(--text)}

/* ---------- Reservatiekalender compacter ----------
   De dagvakjes waren vierkant (aspect-ratio 1). In een brede kolom wordt
   zo'n vakje dus ook 170 pixels hoog en vult de kalender het hele scherm.
   Een vaste, kleinere maat laat je de maand in één oogopslag zien. */
.res__kop,.res__raster,.res__legende{max-width:460px;margin-left:auto;margin-right:auto}
.res__kop{margin-bottom:14px}
.res__dag,.res__leeg{aspect-ratio:auto;height:54px}
.res__dag{border-radius:10px;font-size:.9rem}
.res__legende{margin-top:16px}

@media (max-width:520px){
  .res__dag,.res__leeg{height:44px}
  .res__dag{font-size:.82rem;border-radius:8px}
  .res__raster{gap:4px}
}

/* ---------- Formuliervelden, overal leesbaar ----------
   Er waren drie soorten formulieren met elk een eigen klasse: .form,
   .scan-form en .res__form. Die laatste, het boekingsformulier, kreeg
   enkel een raster mee en geen kleuren. Zo'n veld valt terug op wat de
   browser zelf verzint, en op een telefoon in donkere modus wordt dat
   tekst in dezelfde kleur als de achtergrond. Onleesbaar dus.

   Daarom staat het hier één keer voor elk invoerveld op de site, welke
   klasse het formulier ook heeft. Een nieuw formulier kan nu niet meer
   onopgemerkt zonder kleur blijven. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
select,
textarea{
  background:var(--veld-vlak);
  color:var(--veld-tekst);
  border:1px solid var(--veld-rand);
  border-radius:var(--radius-sm);
  font-family:var(--ff-body);
  font-size:.96rem;
  width:100%;
  max-width:100%;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):focus,
select:focus,
textarea:focus{border-color:var(--gold);outline:none}

/* De grijze hulptekst in een leeg veld. Zonder dit kiest de browser die
   kleur zelf, en op een donkere achtergrond is dat vaak onleesbaar. */
::placeholder{color:#7A7A82;opacity:1}

/* Chrome verft een automatisch ingevuld veld lichtgeel met zwarte tekst.
   Op een donkere site zie je dan niets. Deze schaduwtruc is de enige
   manier om die achtergrond te overschrijven. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--veld-tekst);
  -webkit-box-shadow:0 0 0 1000px var(--veld-vlak) inset;
  box-shadow:0 0 0 1000px var(--veld-vlak) inset;
  caret-color:var(--veld-tekst);
}

/* Vertelt de browser dat deze site donker is, zodat ook zijn eigen
   onderdelen meegaan: de datumkiezer, de schuifbalk en het klavier. */
:root{color-scheme:dark}

/* Op een telefoon zoomt Safari in zodra een veld kleiner is dan 16px.
   Daardoor springt de pagina scheef bij het aantikken van een veld. */
@media (max-width:640px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
  select,
  textarea{font-size:1rem}
}
.trio--duo{grid-template-columns:1fr 1fr}
/* Op een telefoon onder elkaar. Zonder deze regel wint .trio--duo van de
   algemene mobiele regel voor .trio, omdat ze even zwaar weegt en later
   in het bestand staat. De beelden stonden dan 157 pixels breed naast
   elkaar in plaats van gestapeld. */
@media (max-width:760px){.trio--duo{grid-template-columns:1fr}}
.trio--duo .trio__vak img{aspect-ratio:11/10}
.trio__vak figcaption span{
  display:block;margin-top:4px;font-family:var(--ff-body);font-weight:400;
  font-size:.88rem;color:var(--muted);line-height:1.55;
}