/* 01 — kop: badge, merk, nav, mobiel menu, zwevende CTA en WhatsApp */
.kop {
  --kop-krijt: #E9E8E3;
  --kop-grijs: #9A9A95;
  --kop-rand: rgba(233, 232, 227, .16);
  --kop-glas: rgba(24, 24, 24, .45);
  --kop-groen: #25D366;
  --kop-ease: cubic-bezier(.2, .7, .2, 1);
  --kop-ease-uit: cubic-bezier(.65, 0, .35, 1);
  --kop-zij: 32px;
  --kop-breed: var(--kop-vb, 100%);
}

/* balk */
.kop .kop__balk {
  position: fixed; top: 0; left: 0; width: var(--kop-breed); z-index: 60;
  pointer-events: none;
}
.kop .kop__balk::before { /* zachte leesbaarheidsschaduw zodra er gescrold is */
  content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,10,10,.82) 0%, rgba(10,10,10,.5) 55%, rgba(10,10,10,0) 100%);
  opacity: 0; transition: opacity .5s ease;
}
.kop.is-gescrold .kop__balk::before { opacity: 1; }
.kop .kop__rij {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  height: 100px; padding: 0 var(--kop-zij);
  transition: height .5s var(--kop-ease);
}
.kop.is-gescrold .kop__rij { height: 76px; }
.kop .kop__rij > * { pointer-events: auto; }

/* badge */
.kop .kop__badge { justify-self: start; display: inline-flex; align-items: center; gap: 13px; color: var(--kop-krijt); border-radius: 999px; }
.kop .kop__ring { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
.kop .kop__ring-svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.kop .kop__ring-spoor { fill: none; stroke: rgba(233, 232, 227, .14); stroke-width: 1.5; }
.kop .kop__ring-boog {
  fill: none; stroke: var(--kop-krijt); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 98 100; stroke-dashoffset: 98; /* 4,9 van 5 = 98% */
  animation: kop-ring 1.8s .35s var(--kop-ease-uit) forwards;
}
@keyframes kop-ring { to { stroke-dashoffset: 0; } }
.kop .kop__ster { color: var(--kop-krijt); animation: kop-draai 18s linear infinite; }
@keyframes kop-draai { to { transform: rotate(360deg); } }
.kop .kop__badge:hover .kop__ster { animation-duration: 4s; }
.kop .kop__badge-tekst { display: grid; font-size: 13px; line-height: 1.22; letter-spacing: -0.005em; }
.kop .kop__badge-tekst strong { font-weight: 700; color: #fff; font-size: 13.5px; }
.kop .kop__badge-tekst span { color: var(--kop-grijs); font-weight: 500; }

/* merk */
.kop .kop__merk { justify-self: center; display: block; padding: 6px; border-radius: 10px; }
.kop .kop__merk img {
  width: 104px; height: auto;
  transition: transform .6s var(--kop-ease);
  transform-origin: 50% 60%;
}
.kop .kop__merk:hover img { transform: rotate(-4deg) scale(1.04); }
.kop.is-gescrold .kop__merk img { transform: scale(.9); }

/* nav */
.kop .kop__nav { justify-self: end; display: flex; align-items: center; gap: 32px; }
.kop .kop__nav a {
  position: relative; display: block; padding: 8px 0; color: var(--kop-krijt);
  font-size: 15.5px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
}
.kop .kop__nav a span { display: block; }
.kop .kop__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--kop-ease);
}
.kop .kop__nav a:hover::after, .kop .kop__nav a[aria-current="location"]::after { transform: scaleX(1); transform-origin: left; }

/* menuknop */
.kop .kop__menuknop {
  display: none; justify-self: end; width: 48px; height: 48px; border-radius: 50%;
  background: var(--kop-krijt); color: #0A0A0A;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  transition: transform .4s var(--kop-ease), background-color .25s ease;
}
.kop .kop__menuknop:hover { transform: scale(1.06); background: #fff; }
.kop .kop__streep { display: block; width: 17px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .45s var(--kop-ease); }
.kop .kop__menuknop[aria-expanded="true"] .kop__streep:nth-child(2) { transform: translateY(3.3px) rotate(45deg); }
.kop .kop__menuknop[aria-expanded="true"] .kop__streep:nth-child(3) { transform: translateY(-3.3px) rotate(-45deg); }
.kop.is-gescrold .kop__nav { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.kop .kop__nav { transition: opacity .35s ease, transform .45s var(--kop-ease), visibility .35s; }
.kop.is-gescrold .kop__menuknop { display: inline-flex; grid-column: 3; grid-row: 1; animation: kop-in .45s var(--kop-ease); }
.kop.is-gescrold .kop__nav { grid-column: 3; grid-row: 1; pointer-events: none; }
@keyframes kop-in { from { transform: scale(.6); opacity: 0; } }

/* menu (paneel op desktop, volledig scherm op mobiel) */
.kop .kop__menu:not([hidden]) {
  position: absolute; z-index: 1; top: 0; right: 0; pointer-events: auto;
  width: min(420px, 100%); padding: 88px 16px 16px;
  animation: kop-menu .5s var(--kop-ease);
}
@keyframes kop-menu { from { opacity: 0; transform: translateY(-12px); } }
.kop .kop__menu-binnen {
  padding: 28px 28px 26px; border-radius: 20px;
  background: rgba(20, 17, 15, .94); border: 1px solid var(--kop-rand);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.kop .kop__menu-nav { display: grid; margin-bottom: 28px; }
.kop .kop__menu-nav a {
  display: flex; align-items: baseline; gap: 14px; padding: 8px 0;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: 38px; line-height: .9; letter-spacing: -0.03em; color: var(--kop-krijt);
  border-bottom: 1px solid rgba(233, 232, 227, .08);
  transition: color .25s ease, padding-left .45s var(--kop-ease);
}
.kop .kop__menu-nav a:hover { padding-left: 8px; color: #fff; }
.kop .kop__menu-nr { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; font-size: 11px; letter-spacing: .06em; color: var(--kop-grijs); transform: translateY(-14px); }
.kop .kop__menu-voet { display: grid; gap: 20px; }
.kop .kop__menu-knop { width: 100%; height: 52px; }
.kop .kop__menu-contact { display: grid; gap: 4px; font-size: 14px; color: var(--kop-grijs); }
.kop .kop__menu-contact a { color: var(--kop-krijt); }
.kop .kop__menu-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* zwevende CTA */
.kop .kop__zweef {
  position: fixed; z-index: 45; top: calc(var(--kop-hoog, 100dvh) - 78px); left: calc(var(--kop-breed) / 2);
  display: inline-flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 7px 0 20px; border-radius: 999px;
  background: var(--kop-glas); color: var(--kop-krijt);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  transform: translate(-50%, 160%); opacity: 0;
  transition: transform .7s var(--kop-ease), opacity .45s ease, background-color .3s ease;
}
.kop .kop__zweef.is-zichtbaar { transform: translate(-50%, 0); opacity: 1; }
.kop .kop__zweef:hover { background: rgba(40, 40, 40, .62); }
.kop .kop__zweef-stip { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--kop-groen); }
.kop .kop__zweef-stip::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--kop-groen);
  opacity: 0; animation: kop-puls 2.4s ease-out infinite;
}
@keyframes kop-puls { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.kop .kop__zweef-pijl {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--kop-krijt); color: #0A0A0A;
  transition: transform .45s var(--kop-ease);
}
.kop .kop__zweef:hover .kop__zweef-pijl { transform: rotate(45deg); }

/* WhatsApp */
.kop .kop__whatsapp {
  position: fixed; z-index: 45; top: calc(var(--kop-hoog, 100dvh) - 78px); left: calc(var(--kop-breed) - 24px - 54px);
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--kop-groen); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 -2px 0 rgba(0, 0, 0, .08);
  transition: transform .45s var(--kop-ease);
}
.kop .kop__whatsapp::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--kop-groen);
  animation: kop-puls-groot 3s ease-out 1.5s infinite; opacity: 0;
}
@keyframes kop-puls-groot { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
.kop .kop__whatsapp:hover { transform: scale(1.07) rotate(-6deg); }
.kop .kop__whatsapp svg { position: relative; }

/* tablet en mobiel */
@media (max-width: 1000px) {
  .kop .kop__nav { display: none; }
  .kop .kop__menuknop { display: inline-flex; }
}
@media (max-width: 700px) {
  .kop { --kop-zij: 20px; }
  .kop .kop__rij { height: 92px; gap: 12px; padding-right: 16px; }
  .kop.is-gescrold .kop__rij { height: 72px; }
  .kop .kop__badge-tekst { display: none; }
  .kop .kop__merk img { width: 96px; }
  .kop .kop__menu:not([hidden]) { position: fixed; top: 0; left: 0; right: auto; width: var(--kop-breed); height: var(--kop-hoog, 100dvh); padding: 0; }
  .kop .kop__menu-binnen {
    height: 100%; border-radius: 0; border: 0; box-shadow: none; background: #0A0A0A;
    padding: 112px 20px 28px; display: flex; flex-direction: column; justify-content: space-between;
    -webkit-backdrop-filter: none; backdrop-filter: none; overflow-y: auto;
  }
  .kop .kop__menu-nav a { font-size: clamp(34px, calc(var(--kop-breed) * .115), 52px); padding: 12px 0; }
  .kop .kop__menu-nr { transform: translateY(-20px); }
  .kop .kop__zweef { top: calc(var(--kop-hoog, 100dvh) - 72px); left: calc((var(--kop-breed) - 74px) / 2 + 4px); height: 52px; }
  .kop .kop__whatsapp { top: calc(var(--kop-hoog, 100dvh) - 71px); left: calc(var(--kop-breed) - 16px - 50px); width: 50px; height: 50px; }
}

/* schermafdruk en minder beweging: eindtoestand */
.is-shot .kop .kop__ring-boog { animation: none; stroke-dashoffset: 0; }
.is-shot .kop .kop__ster, .is-shot .kop .kop__zweef-stip::after, .is-shot .kop .kop__whatsapp::before { animation: none; }
.is-shot .kop .kop__zweef { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .kop .kop__ring-boog { animation: none; stroke-dashoffset: 0; }
  .kop .kop__ster, .kop .kop__zweef-stip::after, .kop .kop__whatsapp::before, .kop .kop__menuknop, .kop .kop__menu:not([hidden]) { animation: none; }
  .kop *, .kop *::before, .kop *::after { transition-duration: .01ms !important; }
}

/* uitgebreid menu: sectienav links, diensten en doelgroepen rechts, contact onderaan */
.kop .kop__menu:not([hidden]) { width: min(460px, 100%); }
.kop .kop__menu-binnen { display: grid; grid-template-columns: 1fr; padding: 30px 30px 26px; }
.kop .kop__menu-nav { margin-bottom: 0; align-content: start; }
.kop .kop__menu-nav a { font-size: 30px; padding: 9px 0; }
.kop .kop__menu-nr { transform: translateY(-10px); }
.kop .kop__menu-zij { display: grid; gap: 26px; align-content: start; padding-top: 6px; }
.kop .kop__menu-kopje { margin: 0 0 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--kop-grijs); }
.kop .kop__menu-groep ul { display: grid; gap: 2px; }
.kop .kop__menu-groep a { display: inline-block; padding: 4px 0; font-size: 15px; color: var(--kop-krijt); transition: color .2s ease, transform .35s var(--kop-ease); }
.kop .kop__menu-groep a:hover { color: #fff; transform: translateX(4px); }
.kop .kop__menu-voet { grid-column: 1 / -1; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(233, 232, 227, .1);
  display: grid; grid-template-columns: 1fr auto; gap: 18px 20px; align-items: center; }
.kop .kop__menu-knop { grid-column: 1 / -1; width: 100%; }
.kop .kop__menu-knop { width: auto; padding: 0 28px; }
.kop .kop__menu-contact { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; }
.kop .kop__menu-adres { color: var(--kop-grijs); }
.kop .kop__menu-score { display: grid; text-align: right; line-height: 1.2; }
.kop .kop__menu-score strong { font-size: 24px; color: var(--kop-krijt); letter-spacing: -0.02em; }
.kop .kop__menu-score span { font-size: 12px; color: var(--kop-grijs); }
@media (max-width: 700px) {
  .kop .kop__menu-binnen { display: flex; flex-direction: column; justify-content: flex-start; gap: 28px; padding: 112px 20px 28px; }
  .kop .kop__menu-nav a { font-size: clamp(24px, calc(var(--kop-breed) * .078), 38px); padding: 10px 0; }
  .kop .kop__menu-zij { grid-template-columns: 1fr 1fr; gap: 20px; }
  .kop .kop__menu-groep a { font-size: 14px; }
  .kop .kop__menu-voet { grid-template-columns: 1fr; margin-top: auto; gap: 16px; }
  .kop .kop__menu-knop { width: 100%; }
  .kop .kop__menu-score { text-align: left; }
}
.kop .kop__whatsapp { transition: opacity .35s ease, transform .35s ease; }
.kop .kop__whatsapp.is-weg { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; }

/* rechterkant: navigatie, taalwissel en menuknop naast elkaar */
.kop .kop__rechts { justify-self: end; display: flex; align-items: center; gap: 28px; }
.kop.is-gescrold .kop__nav { display: none; }
.kop .kop__taal { display: inline-flex; align-items: center; height: 34px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--kop-rand); }
.kop .kop__taal a {
  display: grid; place-items: center; min-width: 34px; height: 28px; padding: 0 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--kop-grijs);
  transition: background-color .2s ease, color .2s ease;
}
.kop .kop__taal a:hover { color: var(--kop-krijt); }
html[lang="nl"] .kop .kop__taal [data-taal="nl"], html[lang="en"] .kop .kop__taal [data-taal="en"] { background: var(--kop-krijt); color: #F5F4F2; }
@media (max-width: 700px) {
  .kop .kop__rechts { gap: 10px; }
  .kop .kop__taal { height: 32px; }
  .kop .kop__taal a { min-width: 30px; height: 26px; padding: 0 6px; font-size: 12px; }
}
@media (max-width: 380px) {
  .kop .kop__rij { gap: 6px; }
  .kop .kop__rechts { gap: 6px; }
  .kop .kop__taal { height: 28px; padding: 2px; }
  .kop .kop__taal a { min-width: 24px; height: 24px; padding: 0 5px; font-size: 11px; }
  .kop .kop__menuknop { width: 42px; height: 42px; }
  .kop .kop__ring { width: 42px; height: 42px; }
}