:root{
  --inkt:#0E1B23;
  --inkt-zacht:#16262F;
  --petrol-700:#0B4F55;
  --petrol-500:#12808A;
  --petrol-300:#63B3B7;
  --petrol-100:#E4F1F1;
  --koraal-500:#FF5A36;
  --koraal-600:#E8451F;
  --koraal-700:#D93A17;
  --zand-300:#F3C77B;
  --grijs-500:#54666C;
  --grijs-300:#A9B8BC;
  --grijs-200:#DDE5E7;
  --wit:#FFFFFF;

  --display:"Bricolage Grotesque","Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --marge:clamp(20px,5vw,56px);
  --breed:1220px;
  --radius:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--wit);color:var(--inkt);
  font-family:var(--body);font-size:17px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--petrol-700);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--koraal-500);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.028em;line-height:1.06;margin:0}
h1{font-size:clamp(2.5rem,6.2vw,4.5rem)}
h2{font-size:clamp(1.95rem,3.7vw,2.95rem)}
h3{font-size:clamp(1.12rem,1.6vw,1.32rem);letter-spacing:-.015em;line-height:1.25}
p{margin:0}

.omhulsel{max-width:var(--breed);margin-inline:auto;padding-inline:var(--marge)}
.label{
  font-family:var(--mono);font-size:.66rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--petrol-500);margin:0 0 18px;
}
.op-donker .label{color:var(--petrol-300)}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--body);
  font-size:.98rem;font-weight:600;padding:15px 26px;border-radius:10px;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.knop-primair{background:var(--koraal-500);color:var(--inkt)}
.knop-primair:hover{background:var(--koraal-600);transform:translateY(-1px)}
.knop-rand{background:transparent;color:var(--inkt);border-color:var(--grijs-200)}
.knop-rand:hover{border-color:var(--petrol-700);background:var(--petrol-100)}
.op-donker .knop-rand{color:var(--wit);border-color:rgba(255,255,255,.24)}
.op-donker .knop-rand:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.5)}

/* ---------- koptekst ---------- */
.kop{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--grijs-200);
}
.kop-binnen{display:flex;align-items:center;gap:20px;height:76px}
.kop-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.kop-logo .logo-mark{display:none}
.kop-nav{display:flex;gap:26px;margin-left:auto}
.kop-nav a{
  font-size:.94rem;font-weight:500;color:var(--inkt);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;transition:border-color .18s ease;
}
.kop-nav a:hover{border-bottom-color:var(--koraal-500)}
.kop .knop{padding:11px 20px;font-size:.9rem;white-space:nowrap}

/* uitklapmenu voor smalle schermen */
.menu{margin-left:auto;display:none}
.menu>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1.5px solid var(--grijs-200);border-radius:10px;
}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{
  content:"";width:18px;height:2px;background:var(--inkt);
  box-shadow:0 -6px 0 var(--inkt),0 6px 0 var(--inkt);
}
.menu[open]>summary::after{box-shadow:none;transform:rotate(45deg);position:relative}
.menu[open]>summary::before{
  content:"";position:absolute;width:18px;height:2px;background:var(--inkt);transform:rotate(-45deg);
}
.menu-paneel{
  position:absolute;left:0;right:0;top:76px;background:var(--wit);
  border-bottom:1px solid var(--grijs-200);padding:10px var(--marge) 22px;
  display:flex;flex-direction:column;
}
.menu-paneel a{
  font-size:1.05rem;font-weight:500;color:var(--inkt);text-decoration:none;
  padding:14px 0;border-bottom:1px solid var(--grijs-200);
}
.menu-paneel a:last-child{border-bottom:none}

@media(max-width:900px){
  .kop-nav{display:none}
  .menu{display:block}
}
@media(max-width:560px){
  .kop-logo .logo-vol{display:none}
  .kop-logo .logo-mark{display:block}
  .kop .knop{padding:11px 15px;font-size:.85rem}
}

/* ---------- hero ---------- */
.hero{
  padding:clamp(64px,9vw,120px) 0 clamp(56px,7vw,96px);
  position:relative;overflow:hidden;background:var(--inkt);color:var(--wit);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(100deg,
      rgba(14,27,35,.97) 0%,
      rgba(14,27,35,.93) 30%,
      rgba(14,27,35,.74) 58%,
      rgba(14,27,35,.58) 100%),
    url("../beeld/hero-foto.webp");
  background-size:cover;background-position:center right;
  z-index:0;pointer-events:none;
}
.hero>.omhulsel{position:relative;z-index:1}
@media(max-width:700px){
  .hero::before{
    background-image:
      linear-gradient(180deg,rgba(14,27,35,.9) 0%,rgba(14,27,35,.82) 55%,rgba(14,27,35,.72) 100%),
      url("../beeld/hero-foto-mobiel.webp");
    background-size:cover;background-position:60% center;
  }
}
.hero-raster{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center}
@media(max-width:940px){.hero-raster{grid-template-columns:1fr;gap:44px}}

.hero h1{margin-bottom:26px;color:var(--wit);text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--zand-300)}
.hero-antwoord{
  font-size:1.16rem;line-height:1.6;color:var(--wit);max-width:52ch;
  padding:20px 24px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px 18px 18px 5px;margin-bottom:30px;
}
.hero-acties{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.hero-feiten{
  display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs-300);
}
.hero-feiten span{display:flex;align-items:center;gap:8px}
.hero-feiten span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--koraal-500)}

/* ---------- gesprek in hero ---------- */
.draad{display:flex;flex-direction:column;gap:12px}
.bericht{max-width:86%;padding:15px 19px;font-size:1rem;line-height:1.55;position:relative}
.bericht-in{
  align-self:flex-start;background:var(--wit);border:1px solid var(--grijs-200);
  color:var(--inkt);border-radius:18px 18px 18px 5px;
}
.bericht-uit{
  align-self:flex-end;background:#0D5F66;color:var(--wit);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px 18px 5px 18px;
}
.bericht-tijd{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  color:var(--grijs-500);margin-top:7px;display:block;
}
.bericht-uit .bericht-tijd{color:#B4D9DB}
.typt{
  align-self:flex-end;display:flex;gap:5px;padding:15px 19px;background:#0D5F66;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px 18px 5px 18px;
}
.typt i{width:7px;height:7px;border-radius:50%;background:var(--koraal-500);display:block}

@media(prefers-reduced-motion:no-preference){
  .draad>*{opacity:0;animation:opkomen .5s cubic-bezier(.2,.7,.3,1) forwards}
  .draad>*:nth-child(1){animation-delay:.15s}
  .draad>*:nth-child(2){animation-delay:.75s}
  .draad>*:nth-child(3){animation-delay:1.25s}
  .draad>*:nth-child(4){animation-delay:1.75s}
  .typt i{animation:stuiter 1.15s ease-in-out infinite}
  .typt i:nth-child(2){animation-delay:.16s}
  .typt i:nth-child(3){animation-delay:.32s}
}
@keyframes opkomen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes stuiter{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}

/* ---------- secties ---------- */
.sectie{padding:clamp(64px,8vw,110px) 0}
.sectie-zacht{background:var(--petrol-100)}
.sectie-donker{background:var(--inkt);color:var(--wit)}
.sectie-donker h2,.sectie-donker h3{color:var(--wit)}
.sectie-kop{max-width:60ch;margin-bottom:clamp(36px,4vw,56px)}
.sectie-kop p{margin-top:18px;font-size:1.08rem;color:var(--grijs-500)}
.sectie-donker .sectie-kop p{color:var(--grijs-300)}

/* ---------- diensten ---------- */
.diensten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.diensten{grid-template-columns:1fr}}
.dienst{
  background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);
  padding:30px 28px 26px;display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease;
}
.dienst:hover{border-color:var(--petrol-500);transform:translateY(-3px)}
.dienst h3{margin-bottom:12px}
.dienst p{color:var(--grijs-500);font-size:.99rem;margin-bottom:20px}
.dienst ul{margin:0 0 24px;padding:0;list-style:none;font-size:.95rem}
.dienst li{padding:8px 0 8px 24px;position:relative;border-top:1px solid var(--grijs-200)}
.dienst li::before{
  content:"";position:absolute;left:2px;top:16px;width:9px;height:9px;
  border-radius:50% 50% 2px 50%;background:var(--petrol-500);
}
.dienst a{
  margin-top:auto;font-weight:600;font-size:.95rem;color:var(--petrol-700);
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;
}
.dienst a:hover{color:var(--koraal-700)}
.dienst a::after{content:"→";transition:transform .18s ease;display:inline-block}
.dienst a:hover::after{transform:translateX(4px)}

/* ---------- het gesprek (signatuur) ---------- */
.gesprek{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:16px}
.vraag,.antwoord{max-width:78%;padding:17px 22px;font-size:1.03rem;line-height:1.58}
.vraag{
  align-self:flex-start;background:var(--inkt-zacht);color:var(--wit);
  border:1px solid rgba(255,255,255,.11);border-radius:20px 20px 20px 5px;font-weight:500;
}
.antwoord{
  align-self:flex-end;background:#0D5F66;color:var(--wit);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px 20px 5px 20px;
}
.antwoord strong{color:var(--zand-300);font-weight:600}
@media(max-width:640px){.vraag,.antwoord{max-width:94%}}

/* ---------- werkwijze ---------- */
.stappen{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--grijs-200);border:1px solid var(--grijs-200);
  border-radius:var(--radius);overflow:hidden;position:relative;
}
.stappen::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;z-index:2;
  background:linear-gradient(90deg,var(--petrol-500) 0%,var(--petrol-700) 55%,var(--koraal-500) 100%);
  transform:scaleX(0);transform-origin:left center;
}
@media(max-width:860px){.stappen{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.stappen{grid-template-columns:1fr}}
.stap{background:var(--wit);padding:28px 24px 30px;transition:background .25s ease}
.stap:hover{background:var(--petrol-100)}
.stap-nr{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  color:var(--koraal-700);margin-bottom:14px;
  display:flex;align-items:center;gap:9px;
}
.stap-nr::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--koraal-500);
  flex-shrink:0;transform:scale(0);
}
.stap h3{font-size:1.06rem;margin-bottom:10px}
.stap p{font-size:.94rem;color:var(--grijs-500)}

/* ---------- tarieven ---------- */
.pakketten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:900px){.pakketten{grid-template-columns:1fr}}
.pakket{
  background:var(--wit);border:1px solid var(--grijs-200);
  border-radius:var(--radius);padding:30px 28px;position:relative;
}
.pakket-uitgelicht{border:2px solid var(--petrol-700);padding:38px 28px 30px}
.pakket-badge{
  position:absolute;top:-13px;left:28px;background:var(--zand-300);color:var(--inkt);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:6px;
}
.pakket h3{margin-bottom:6px}
.pakket-wie{font-size:.92rem;color:var(--grijs-500);margin-bottom:22px}
.pakket-prijs{font-family:var(--display);font-size:2.5rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.pakket-per{font-family:var(--body);font-size:.9rem;font-weight:500;color:var(--grijs-500);margin-left:4px}
.pakket-btw{font-size:.82rem;color:var(--grijs-500);margin:8px 0 24px}
.pakket ul{margin:0 0 26px;padding:0;list-style:none;font-size:.95rem}
.pakket li{padding:9px 0 9px 25px;position:relative;border-top:1px solid var(--grijs-200)}
.pakket li::before{
  content:"";position:absolute;left:2px;top:17px;width:9px;height:9px;
  border-radius:50% 50% 2px 50%;background:var(--petrol-500);
}
.pakket .knop{width:100%;justify-content:center}
.tarief-noot{
  margin-top:28px;font-size:.92rem;color:var(--grijs-500);
  max-width:62ch;padding-left:16px;border-left:2px solid var(--zand-300);
}

/* ---------- over ---------- */
.over{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:860px){.over{grid-template-columns:1fr}}
.portret{
  aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;
  background:var(--petrol-100);position:relative;
}
.portret img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
/* Het label "voorbeeldfoto" is verwijderd: er staat nu een echte foto. */
.over blockquote{
  margin:0 0 26px;font-family:var(--display);font-weight:500;
  font-size:clamp(1.3rem,2.2vw,1.72rem);line-height:1.32;letter-spacing:-.02em;
}
.over p{color:var(--grijs-500);margin-bottom:16px}
.over-gegevens{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px;font-family:var(--mono);
  font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs-500);
}

/* ---------- slot-cta ---------- */
#contact-blok{position:relative;overflow:hidden;isolation:isolate;padding:clamp(88px,11vw,150px) 0}
#contact-blok::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(180deg,rgba(14,27,35,.9) 0%,rgba(14,27,35,.8) 50%,rgba(14,27,35,.92) 100%),
    url("../beeld/slot-foto.webp");
  background-size:cover;background-position:center;
}
@media(max-width:700px){
  #contact-blok::before{
    background-image:
      linear-gradient(180deg,rgba(14,27,35,.92) 0%,rgba(14,27,35,.86) 50%,rgba(14,27,35,.94) 100%),
      url("../beeld/slot-foto-mobiel.webp");
  }
}
.slot{text-align:center;max-width:640px;margin-inline:auto}
.slot h2{margin-bottom:20px}
.slot p{color:var(--grijs-300);font-size:1.1rem;margin-bottom:32px}
.slot-acties{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- voettekst ---------- */
.voet{background:var(--inkt);color:var(--grijs-300);padding:56px 0 32px;border-top:1px solid rgba(255,255,255,.09)}
.voet-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:40px}
@media(max-width:760px){.voet-raster{grid-template-columns:1fr}}
.voet h3{font-size:.68rem;font-family:var(--mono);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol-300);margin-bottom:16px}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:10px}
.voet a{color:var(--grijs-300);text-decoration:none;font-size:.95rem}
.voet a:hover{color:var(--wit)}
.voet-adres{font-size:.95rem;line-height:1.8;margin-top:18px}
/* Credit onderin. De .voet a-regel zet 0.95rem; in de kleine onderbalk zou die
   uit de toon vallen, dus daar erft de link de maat van de balk zelf.
   Onderstreept, want zonder streep is een link tussen platte tekst niet te
   herkennen als je geen kleurverschil ziet. Contrast 8.56:1. */
.voet-onder a{font-size:inherit;text-decoration:underline;text-underline-offset:3px}
.voet-maker{white-space:nowrap}
.voet-onder{
  border-top:1px solid rgba(255,255,255,.09);padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
}

/* ---------- scroll-onthulling ---------- */
@media(prefers-reduced-motion:no-preference){
  .onthul{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
  .onthul.zichtbaar{opacity:1;transform:none}

  /* de vier stappen komen op volgorde binnen, met een lijn die de maand aftelt */
  .stappen.onthul{opacity:1;transform:none;transition:none}
  .stappen::after{transition:transform 1.6s cubic-bezier(.22,.75,.25,1) .1s}
  .stappen.zichtbaar::after{transform:scaleX(1)}

  .stap{opacity:0;transform:translateY(16px);
        transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1),background .25s ease}
  .stappen.zichtbaar .stap{opacity:1;transform:none}
  .stappen.zichtbaar .stap:nth-child(1){transition-delay:.20s}
  .stappen.zichtbaar .stap:nth-child(2){transition-delay:.55s}
  .stappen.zichtbaar .stap:nth-child(3){transition-delay:.90s}
  .stappen.zichtbaar .stap:nth-child(4){transition-delay:1.25s}

  .stap-nr::before{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
  .stappen.zichtbaar .stap:nth-child(1) .stap-nr::before{transform:scale(1);transition-delay:.35s}
  .stappen.zichtbaar .stap:nth-child(2) .stap-nr::before{transform:scale(1);transition-delay:.70s}
  .stappen.zichtbaar .stap:nth-child(3) .stap-nr::before{transform:scale(1);transition-delay:1.05s}
  .stappen.zichtbaar .stap:nth-child(4) .stap-nr::before{transform:scale(1);transition-delay:1.40s}
}
@media(prefers-reduced-motion:reduce){
  .stappen::after{transform:scaleX(1)}
  .stap-nr::before{transform:scale(1)}
}

/* ---------- paginakop voor onderliggende pagina's ---------- */
.paginakop{background:var(--petrol-100);padding:clamp(44px,6vw,76px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--grijs-200)}
.kruimels{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grijs-500);margin-bottom:20px}
.kruimels a{color:var(--grijs-500);text-decoration:none}
.kruimels a:hover{color:var(--petrol-700)}
.kruimels span{margin:0 8px;opacity:.55}
.paginakop h1{max-width:19ch;margin-bottom:22px;text-wrap:balance}
.paginakop .antwoord{
  font-size:1.12rem;line-height:1.6;max-width:56ch;color:var(--inkt);
  background:var(--wit);border:1px solid var(--grijs-200);
  border-radius:18px 18px 18px 5px;padding:20px 24px;
}

/* ---------- tekstblokken op onderliggende pagina's ---------- */
.tekst{max-width:68ch}
.tekst h2{margin:0 0 18px}
.tekst h3{margin:34px 0 10px}
.tekst p{margin:0 0 18px;color:var(--inkt)}
.tekst p.stil{color:var(--grijs-500)}
.tekst ul{margin:0 0 22px;padding:0;list-style:none}
.tekst li{padding:9px 0 9px 26px;position:relative;border-top:1px solid var(--grijs-200)}
.tekst li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:9px;border-radius:50% 50% 2px 50%;background:var(--petrol-500)}
.tekst>*:last-child{margin-bottom:0}

.tabelomhulsel{overflow-x:auto;margin:0 0 26px}
.tabel{border-collapse:collapse;width:100%;min-width:520px;font-size:.96rem}
.tabel th,.tabel td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--grijs-200);vertical-align:top}
.tabel th{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--petrol-700);background:var(--petrol-100);border-bottom:1px solid var(--grijs-200)}
.tabel td:first-child{font-weight:600}

.vraaglijst{max-width:68ch}
.vraaglijst details{border-top:1px solid var(--grijs-200);padding:4px 0}
.vraaglijst details:last-of-type{border-bottom:1px solid var(--grijs-200)}
.vraaglijst summary{
  list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-weight:600;font-size:1.03rem;
}
.vraaglijst summary::-webkit-details-marker{display:none}
.vraaglijst summary::after{
  content:"";position:absolute;right:6px;top:26px;width:10px;height:10px;
  border-right:2px solid var(--petrol-700);border-bottom:2px solid var(--petrol-700);
  transform:rotate(45deg);transition:transform .22s ease;
}
.vraaglijst details[open] summary::after{transform:rotate(-135deg);top:30px}
.vraaglijst p{margin:0 0 20px;color:var(--grijs-500);max-width:62ch}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:860px){.duo{grid-template-columns:1fr}}

.verwant{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.verwant{grid-template-columns:1fr}}
.verwant a{
  display:block;background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);
  padding:22px 24px;text-decoration:none;transition:border-color .2s ease,transform .2s ease;
}
.verwant a:hover{border-color:var(--petrol-500);transform:translateY(-3px)}
.verwant strong{display:block;font-family:var(--display);font-size:1.05rem;color:var(--inkt);margin-bottom:6px}
.verwant span{font-size:.93rem;color:var(--grijs-500)}

.kop-nav a[aria-current="page"]{border-bottom-color:var(--petrol-700)}
.menu-paneel a[aria-current="page"]{color:var(--petrol-700)}

/* labels op lichte petrolvlakken: petrol-500 haalt daar 4,05 en zakt door WCAG AA */
.sectie-zacht .label,
.paginakop .label{color:var(--petrol-700)}

/* ---------- contactformulier ---------- */
.formulier{
  background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);
  padding:clamp(24px,3vw,36px);
}
.formulier .velden{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.formulier .velden{grid-template-columns:1fr}}
.veld{display:flex;flex-direction:column;gap:7px}
.veld-breed{grid-column:1 / -1}
.veld label{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--petrol-700);
}
.veld label .optioneel{color:var(--grijs-500);letter-spacing:.1em}
.veld input,.veld select,.veld textarea{
  font-family:var(--body);font-size:1rem;color:var(--inkt);
  background:var(--wit);border:1.5px solid var(--grijs-200);border-radius:9px;
  padding:13px 14px;width:100%;transition:border-color .18s ease;
}
.veld textarea{min-height:132px;resize:vertical;line-height:1.55}
.veld input:hover,.veld select:hover,.veld textarea:hover{border-color:var(--petrol-300)}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--petrol-700);outline-offset:1px}
.veld input:user-invalid,.veld textarea:user-invalid{border-color:var(--koraal-700)}
.veld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--petrol-700) 50%),linear-gradient(135deg,var(--petrol-700) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.honingpot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulier-voet{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}
.formulier-voet p{font-size:.86rem;color:var(--grijs-500);max-width:38ch;margin:0}
.formulier-melding{
  margin-top:18px;padding:14px 16px;border-radius:9px;font-size:.95rem;
  background:var(--petrol-100);border:1px solid var(--petrol-300);color:var(--inkt);
}
.formulier-melding[hidden]{display:none}
/* Geslaagd of mislukt onderscheiden met kleur en een balk links, zodat het
   verschil ook zichtbaar is zonder kleurwaarneming. Contrast gecontroleerd:
   8.56:1 en 15.13:1, ruim boven de 4.5:1 die WCAG AA vraagt. */
.formulier-melding.melding-goed{
  background:var(--petrol-100);border-color:var(--petrol-300);
  border-left:4px solid var(--petrol-500);color:var(--inkt);
}
.formulier-melding.melding-fout{
  background:#FDEBE6;border-color:#F3C3B4;
  border-left:4px solid var(--koraal-500);color:#7A2711;
}

/* ---------- zwevende WhatsApp-knop ---------- */
.wa-zwevend{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:70;
  display:inline-flex;align-items:center;gap:0;
  background:var(--petrol-700);color:var(--wit);text-decoration:none;
  border-radius:999px;padding:15px;box-shadow:0 6px 22px rgba(14,27,35,.26);
  transition:background .2s ease,transform .2s ease,gap .2s ease,padding .2s ease;
}
.wa-zwevend:hover,.wa-zwevend:focus-visible{background:#0d6169;transform:translateY(-2px);gap:10px;padding:15px 22px 15px 18px}
.wa-zwevend svg{width:26px;height:26px;flex-shrink:0;display:block}
.wa-zwevend span{
  max-width:0;overflow:hidden;white-space:nowrap;font-weight:600;font-size:.95rem;
  transition:max-width .25s ease;
}
.wa-zwevend:hover span,.wa-zwevend:focus-visible span{max-width:170px}
@media(prefers-reduced-motion:reduce){
  .wa-zwevend,.wa-zwevend span{transition:none}
}
@media(max-width:520px){
  .wa-zwevend span{display:none}
}

/* ---------- contactkeuzes ---------- */
.kanalen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:12px}
@media(max-width:760px){.kanalen{grid-template-columns:1fr}}
.kanaal{
  display:flex;gap:14px;align-items:flex-start;text-decoration:none;
  background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);
  padding:20px;transition:border-color .2s ease,transform .2s ease;
}
.kanaal:hover{border-color:var(--petrol-500);transform:translateY(-3px)}
.kanaal svg{width:22px;height:22px;flex-shrink:0;margin-top:2px;color:var(--petrol-700)}
.kanaal strong{display:block;font-family:var(--display);font-size:1.02rem;color:var(--inkt);margin-bottom:3px}
.kanaal span{font-size:.92rem;color:var(--grijs-500)}

/* ---------- blog ---------- */
.artikel{max-width:68ch;margin-inline:auto}
.artikel-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grijs-500);margin-bottom:22px;
}
.artikel-meta span{display:flex;align-items:center;gap:8px}
.artikel-meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--petrol-500)}
.artikel h2{margin:44px 0 16px}
.artikel h3{margin:30px 0 10px}
.artikel p{margin:0 0 18px}
.artikel p.stil{color:var(--grijs-500)}
.artikel ul,.artikel ol{margin:0 0 22px;padding:0 0 0 0;list-style:none}
.artikel li{padding:9px 0 9px 26px;position:relative;border-top:1px solid var(--grijs-200)}
.artikel li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:9px;border-radius:50% 50% 2px 50%;background:var(--petrol-500)}
.artikel ol{counter-reset:stap}
.artikel ol li{counter-increment:stap}
.artikel ol li::before{
  content:counter(stap);width:auto;height:auto;background:none;border-radius:0;top:9px;
  font-family:var(--mono);font-size:.7rem;color:var(--koraal-700);
}
.artikel blockquote{
  margin:30px 0;padding:20px 24px;background:var(--petrol-100);
  border-radius:14px 14px 14px 5px;font-size:1.06rem;
}
.artikel blockquote p:last-child{margin-bottom:0}
.artikel .tabelomhulsel{margin:26px 0}
.artikel-slot{
  margin-top:44px;padding:26px 28px;border-radius:var(--radius);
  background:var(--inkt);color:var(--wit);
}
.artikel-slot h2{margin:0 0 12px;color:var(--wit);font-size:1.5rem}
.artikel-slot p{color:var(--grijs-300);margin-bottom:20px}

.blogrij{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.blogrij{grid-template-columns:1fr}}
.blogkaart{
  display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--grijs-200);
  border-radius:var(--radius);padding:26px 26px 24px;text-decoration:none;
  transition:border-color .2s ease,transform .2s ease;
}
.blogkaart:hover{border-color:var(--petrol-500);transform:translateY(-3px)}
.blogkaart .fase{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol-700);margin-bottom:12px}
.blogkaart h3{color:var(--inkt);margin-bottom:10px}
.blogkaart p{font-size:.95rem;color:var(--grijs-500);margin:0 0 18px}
.blogkaart .lees{margin-top:auto;font-weight:600;font-size:.94rem;color:var(--petrol-700)}
.blogkaart:hover .lees{color:var(--koraal-700)}
.binnenkort{
  border:1px dashed var(--grijs-200);border-radius:var(--radius);padding:22px 24px;
  background:var(--petrol-100);
}
.binnenkort h3{font-size:1.02rem;margin-bottom:6px}
.binnenkort p{font-size:.93rem;color:var(--grijs-500);margin:0}

/* ---------- uitgelichte afbeelding bij artikelen ---------- */
.artikel-beeld{
  max-width:1000px;margin:0 auto clamp(28px,4vw,44px);
  border-radius:var(--radius);overflow:hidden;background:var(--petrol-100);
}
.artikel-beeld img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.blogkaart-beeld{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:10px;margin-bottom:16px;background:var(--petrol-100);
}

/* ---------- mobiele reparaties ---------- */

/* Het uitklappaneel werd ook gerenderd als <details> dicht stond: het paneel
   is absoluut gepositioneerd, waardoor het aan de standaard-verbergregel van
   de browser ontsnapte. Links waren daardoor met Tab bereikbaar terwijl het
   menu gesloten was. */
.menu:not([open]) .menu-paneel{display:none}

/* Mono-labels waren 9,6px op mobiel — te klein om prettig te lezen. */
@media(max-width:620px){
  .label{font-size:.72rem}
  .bericht-tijd,.pakket-badge,.fase,.kruimels,.artikel-meta,
  .hero-feiten,.over-gegevens,.voet-onder,.stap-nr{font-size:.7rem}
  .voet h3{font-size:.74rem}
}

/* Aanraakvlakken van tekstlinks in kaarten naar 44px. */
@media(max-width:900px){
  .dienst a,.blogkaart .lees{padding-block:10px}
  .kruimels a{display:inline-block;padding-block:6px}
}

/* Voettekstlinks haalden 19px hoogte; WCAG 2.5.8 vraagt 24x24 als aanraakvlak. */
.voet li{margin-bottom:4px}
.voet li a{display:inline-block;padding-block:6px}
.voet-adres a{display:inline-block;padding-block:4px}

/* .blogkaart .fase won op specificiteit van de mobiele regel hierboven. */
@media(max-width:620px){
  .blogkaart .fase{font-size:.7rem}
}

/* Tabelkoppen waren 10px op mobiel; auteurslink in artikelen 18px hoog. */
@media(max-width:620px){
  .tabel th{font-size:.7rem}
}
.artikel-meta a{display:inline-block;padding-block:4px}

/* Formulierlabels waren 10px op mobiel — juist daar moeten ze leesbaar zijn. */
@media(max-width:620px){
  .veld label{font-size:.72rem}
}

/* ---------- bewegend beeld in de hero ---------- */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center right;
  z-index:-1;pointer-events:none;
}
/* Het verloop lag als ::before op de hero; met video eronder moet het erboven. */
.hero.heeft-video::before{z-index:0;background-image:
  linear-gradient(100deg,
    rgba(14,27,35,.97) 0%,
    rgba(14,27,35,.93) 30%,
    rgba(14,27,35,.74) 58%,
    rgba(14,27,35,.58) 100%)}
.hero.heeft-video{isolation:isolate}
@media(max-width:700px){
  .hero.heeft-video::before{background-image:
    linear-gradient(180deg,rgba(14,27,35,.9) 0%,rgba(14,27,35,.82) 55%,rgba(14,27,35,.72) 100%)}
  /* Op mobiel geen video: kost data en de meeste telefoons tonen hem toch klein. */
  .hero-video{display:none}
}
/* Wie beweging heeft uitgezet, krijgt de stilstaande foto. */
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none}
}

/* ---------- bewegend beeld in het contactblok ---------- */
#contact-blok{isolation:isolate}
.slot-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:-2;pointer-events:none;
}
/* Met een video eronder mag ::before alleen nog het verloop schilderen.
   Stond hier ook de foto, dan dekte die de video volledig af. */
#contact-blok.heeft-video::before{
  z-index:-1;
  background-image:linear-gradient(180deg,
    rgba(14,27,35,.86) 0%,rgba(14,27,35,.74) 50%,rgba(14,27,35,.9) 100%);
}
@media(max-width:700px){
  /* op mobiel geen video, dus daar blijft de foto wel nodig */
  #contact-blok.heeft-video::before{
    background-image:
      linear-gradient(180deg,rgba(14,27,35,.92) 0%,rgba(14,27,35,.86) 50%,rgba(14,27,35,.94) 100%),
      url("../beeld/slot-foto-mobiel.webp");
    background-size:cover;background-position:60% center;
  }
}
@media(max-width:700px){ .slot-video{display:none} }
@media(prefers-reduced-motion:reduce){ .slot-video{display:none} }

/* ---------- trage camerabeweging over de video's ----------
   De gegenereerde beelden bewegen te subtiel om op te vallen. Een langzame
   push-in maakt de beweging onmiskenbaar en kost geen enkele byte extra. */
.hero-video,.slot-video{
  transform-origin:center center;
  animation:camerabeweging 16s ease-in-out infinite alternate;
  will-change:transform;
}
.slot-video{animation-duration:19s;animation-delay:-6s;animation-name:camerabeweging-slot}
/* Zoom plus lichte pan: een pure zoom van 9% over 34s is 0,26% per seconde
   en dus onzichtbaar. Deze combinatie beweegt merkbaar zonder onrustig te worden. */
@keyframes camerabeweging{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-1.5%,-1%,0)}
}
@keyframes camerabeweging-slot{
  from{transform:scale(1.02) translate3d(1%,0,0)}
  to{transform:scale(1.18) translate3d(-2%,-1.5%,0)}
}
@media(prefers-reduced-motion:reduce){
  .hero-video,.slot-video{animation:none;transform:none}
}

/* ---------- citeerbaar blok voor AI-zoekmachines ----------
   Zelfstandige samenvatting van 130-170 woorden. Moet losgeknipt nog kloppen:
   mét bedragen, mét jaartal, mét bedrijfsnaam. */
.citeerbaar{
  background:var(--petrol-100);border-left:3px solid var(--petrol-700);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:24px 28px;margin:0 0 32px;max-width:70ch;
}
.citeerbaar h2{font-size:1.15rem;margin:0 0 12px;color:var(--petrol-700)}
.citeerbaar p{margin:0 0 12px;font-size:1.02rem;line-height:1.62}
.citeerbaar p:last-child{margin-bottom:0}

/* ---------- bewegend portret ---------- */
.portret video{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
  display:block;
}
@media(max-width:700px){
  /* op mobiel de stilstaande foto: scheelt bijna een halve megabyte */
  .portret video{display:none}
  .portret img{display:block}
}
@media(min-width:701px){
  .portret:has(video) img{display:none}
}
@media(prefers-reduced-motion:reduce){
  .portret video{display:none}
  .portret img{display:block}
}

/* ---------- scroll-gestuurde beweging in het contactblok ----------
   De beweging hangt aan de scrollpositie in plaats van aan een timer.
   animation-timeline: view() wordt door Chrome, Edge en Safari 26+
   ondersteund; browsers zonder ondersteuning houden de tijdgestuurde
   camerabeweging die hierboven staat. */
@supports (animation-timeline: view()) {
  .slot-video{
    animation-name:parallax-slot;
    animation-duration:auto;
    animation-timing-function:linear;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
    animation-iteration-count:1;
    animation-direction:normal;
  }
  @keyframes parallax-slot{
    from{transform:scale(1.28) translate3d(0,-9%,0)}
    to{transform:scale(1.28) translate3d(0,9%,0)}
  }
  /* Het verloop schuift een fractie de andere kant op: dat maakt de
     diepte zichtbaar zonder dat de tekst meebeweegt. */
  #contact-blok.heeft-video::before{
    animation-name:parallax-waas;
    animation-duration:auto;
    animation-timing-function:linear;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  @keyframes parallax-waas{
    from{transform:translate3d(0,2%,0)}
    to{transform:translate3d(0,-2%,0)}
  }
}
@media(prefers-reduced-motion:reduce){
  .slot-video,#contact-blok.heeft-video::before{animation:none;transform:none}
}

/* ---------- scroll-gestuurde beweging op het portret ----------
   Het portret schuift binnen zijn kader mee terwijl je erlangs scrolt.
   Kleinere uitslag dan bij het contactblok: bij een gezicht wordt een
   grote verschuiving snel onrustig. */
@supports (animation-timeline: view()) {
  .portret img,.portret video{
    animation-name:parallax-portret;
    animation-duration:auto;
    animation-timing-function:linear;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  @keyframes parallax-portret{
    from{transform:scale(1.14) translate3d(0,-5%,0)}
    to{transform:scale(1.14) translate3d(0,5%,0)}
  }
}
@media(prefers-reduced-motion:reduce){
  .portret img,.portret video{animation:none;transform:none}
}