/* ==========================================================================
   IT-Solutions by Thomas — stylesheet (v5)

   Stijl: zwart, wit, grijs. Geen accentkleur.
   De structuur komt uit afwisseling tussen zuiver wit en lichtgrijs (#F5F5F7),
   uit ruime witruimte en uit één duidelijke typografische hiërarchie.
   Koppen staan gecentreerd, tekstblokken blijven smal genoeg om vlot te lezen.

   Twee regels die deze stijl leesbaar houden voor een oudere doelgroep:
   1. Grijs voor tekst is altijd #6E6E73 (5,07:1 op wit) — lichter grijs
      haalt de norm niet en is precies de fout die de meeste sites maken.
   2. Niets kleiner dan ongeveer 16 px, hoofdtekst rond 18,5 px, en alles in
      rem zodat de tekstinstelling van de bezoeker zelf blijft werken.

   Eén vaste lichte look: de site volgt NIET de donkere modus van het toestel.
   ========================================================================== */

/* ------------------------------ 1. Tokens -------------------------------- */

:root {
  --black:   #1D1D1F;   /* titels, knoppen, voet    */
  --ink:     #2B2B2F;   /* lopende tekst            */
  --grey:    #6E6E73;   /* bijschriften             */
  --white:   #FFFFFF;
  --grey-bg: #F5F5F7;   /* de lichtgrijze secties   */
  --line:    #D2D2D7;
  --line-2:  #E6E6EB;

  /* De donkere blokken: geen zuiver zwart maar een grafietgrijs met een
     koele ondertoon. Zachter voor de ogen dan #000 en het geeft de site
     een eigen tint in plaats van standaardzwart.                        */
  --deep:      #1A1B1F;
  --deep-2:    #26272B;   /* kaart binnen een donker blok */
  --deep-line: #3A3B41;
  --deep-line-2: #2C2D32;

  --r-card: 18px;
  --r-pill: 980px;

  --gutter: clamp(20px, 5vw, 56px);
  --max: 1180px;
  --narrow: 62rem;
  --section-y: clamp(60px, 6.8vw, 100px);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Eén bewegingscurve voor alles op de site. Hij start snel en remt lang af
     — dat leest als "zwaar en duur" in plaats van als een schokje.         */
  --ease: cubic-bezier(.22, .72, .16, 1);
  --dur:  .7s;
  --dur-kort: .28s;
}

/* ------------------------------ 2. Basis --------------------------------- */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.16rem;          /* ~18,6 px, schaalt mee met de browserinstelling */
  line-height: 1.62;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--black);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.026em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 5.9vw, 4.6rem); letter-spacing: -.038em; line-height: 1.02; }
h2 { font-size: clamp(2rem, 3.9vw, 3rem); letter-spacing: -.03em; }
h3 { font-size: 1.32rem; letter-spacing: -.018em; line-height: 1.28; }

p { margin: 0; }

a { color: var(--black); }

:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section-grey { background: var(--grey-bg); }

/* Twee secties onder elkaar brengen élk hun volle marge mee — samen dus het
   dubbele. De onderste krijgt daarom nog maar de helft.                    */
.section + .section { padding-top: calc(var(--section-y) * .5); }

/* Een sectie waarvan de inhoud zelf al een ruim kader heeft (het intakeblok)
   heeft minder buitenruimte nodig.                                         */
.section-tight { padding-block: calc(var(--section-y) * .55); }

/* Zonder dit verdwijnt de titel van een sectie onder de vaste balk zodra je
   op een menulink klikt.                                                    */
section[id], div[id] { scroll-margin-top: 96px; }

/* --------------------------- Donkere blokken ------------------------------
   .dark herdefinieert de tokens in plaats van elk onderdeel apart te
   overschrijven. Alles binnen een .dark-blok klopt daardoor vanzelf.
   Tekst op zwart is #D2D2D7 in plaats van zuiver wit: dat vermindert het
   "uitbloeden" van felle letters op een donkere ondergrond.              */

.dark {
  --black:   #FFFFFF;   /* koppen             */
  --ink:     #D2D2D7;   /* lopende tekst      */
  --grey:    #A1A1A6;   /* bijschriften       */
  --white:   var(--deep-2);   /* kaart binnen een donker blok */
  --grey-bg: var(--deep);
  --line:    var(--deep-line);
  --line-2:  var(--deep-line-2);

  background: var(--deep);
  color: var(--ink);
}

.dark .btn-primary { background: #FFFFFF; color: var(--deep); }
.dark .btn-primary:hover { background: #DEDEE2; }
.dark .btn-secondary { color: #FFFFFF; border-color: #4A4B52; }
.dark .btn-secondary:hover { border-color: #FFFFFF; }
.dark :focus-visible { outline-color: #FFFFFF; }

/* Gecentreerde sectiekop, smal genoeg om te lezen */
.section-head {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: clamp(40px, 5vw, 68px);
  text-align: center;
}
.section-head p { margin-top: 20px; font-size: 1.2rem; color: var(--grey); }

.eyebrow {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--grey);
  margin-bottom: 14px;
}

.lead { font-size: clamp(1.16rem, 1.8vw, 1.46rem); line-height: 1.5; color: var(--grey); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--black);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ------------------------------ 3. Knoppen -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;             /* ruime tapdoelen */
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn svg { flex: none; }

.btn-primary { background: var(--black); color: #fff; }
.btn-primary:hover { background: #3A3A3E; }

.btn-secondary {
  background: transparent;
  color: var(--black);
  border-color: var(--line);
}
.btn-secondary:hover { border-color: var(--black); }

.btn-block { width: 100%; }

/* ------------------------------ 4. Kop ------------------------------------ */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line-2); }

.site-header.dark { background: var(--deep); }
.site-header.dark.is-stuck { border-bottom-color: var(--deep-line-2); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding-block: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  text-decoration: none;
  color: var(--black);
}
.brand-mark { flex: none; color: var(--black); display: grid; place-items: center; }
.brand-name {
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -.024em;
  line-height: 1.15;
}
.brand-name span {
  display: block;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 1px;
}

.nav { display: flex; align-items: center; gap: 4px; position: relative; }
.nav a {
  position: relative;
  z-index: 1;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  color: var(--grey);
  font-weight: 500;
  font-size: 1.02rem;
  text-decoration: none;
  transition: color .18s ease;
}
.nav a:hover,
.nav a:focus-visible { color: var(--black); }
/* Geen vetter lettertype voor de actieve link: dat zou de breedte veranderen
   en de hele balk laten verspringen. De kleur en de pil doen het werk.      */
.nav a.is-active { color: var(--black); }

.nav-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  height: 40px;
  width: 0;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .06);
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -50%);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1),
              width .3s cubic-bezier(.32, .72, 0, 1),
              opacity .22s ease;
}
.dark .nav-indicator { background: rgba(255, 255, 255, .12); }
.nav-call { display: none; }

.header-cta { margin-left: 14px; min-height: 44px; padding: 10px 22px; font-size: 1.02rem; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--black);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .nav, .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }

  .nav.is-open {
    display: flex;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--gutter) 26px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line-2);
  }
  .nav.is-open a { padding: 17px 2px; border-bottom: 1px solid var(--line-2); font-size: 1.1rem; }
  .nav.is-open .nav-call { display: inline-flex; margin-top: 20px; border-bottom: 0; }
  .site-header.dark .nav.is-open { background: var(--deep); border-bottom-color: var(--deep-line-2); }
}

/* ------------------------------ 5. Hero ----------------------------------- */

.hero {
  padding-block: clamp(56px, 8vw, 112px) clamp(48px, 6vw, 84px);
  text-align: center;
}
.hero-inner { max-width: 56rem; margin-inline: auto; }
.hero .lead { margin-top: 26px; margin-inline: auto; max-width: 40rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 38px;
}
.hero-note { margin-top: 24px; font-size: 1.02rem; color: var(--grey); }

/* Vertrouwensstrook */
.trust { border-top: 1px solid var(--line-2); }
.trust dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust dl > div {
  padding: 30px clamp(14px, 2vw, 28px);
  border-left: 1px solid var(--line-2);
  text-align: center;
}
.trust dl > div:first-child { border-left: 0; }
.trust dt {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--black);
  letter-spacing: -.015em;
  margin-bottom: 5px;
}
.trust dd { margin: 0; color: var(--grey); font-size: 1.02rem; line-height: 1.5; }

/* ------------------------------ 6. Diensten ------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}

.card {
  background: var(--white);
  border-radius: var(--r-card);
  padding: clamp(28px, 2.8vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .22s cubic-bezier(.32, .72, 0, 1), box-shadow .22s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .04), 0 18px 40px rgba(0, 0, 0, .08);
}
.card-head { display: grid; gap: 16px; justify-items: start; }
.card-icon { color: var(--black); }
.card p { color: var(--ink); font-size: 1.06rem; }
.card ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 1.02rem;
  color: var(--grey);
}
.card li { display: flex; gap: 11px; align-items: baseline; }
.card li::before {
  content: "";
  flex: none;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--grey);
  transform: translateY(-3px);
}

.services-foot {
  margin: 34px auto 0;
  max-width: 46rem;
  text-align: center;
  font-size: 1.08rem;
  color: var(--grey);
}
.services-foot strong { color: var(--black); font-weight: 600; }

/* ------------------------------ 7. Werkwijze ------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  max-width: var(--narrow);
  margin-inline: auto;
  text-align: center;
}
.step { display: grid; gap: 12px; align-content: start; }
.step-num {
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
}
.step p { color: var(--grey); font-size: 1.06rem; }

/* ----------------------- 8. Over mij + beloftes --------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}
.about-text h2 { text-align: left; }
.about-text p { color: var(--grey); font-size: 1.14rem; }
.about-text p + p { margin-top: 18px; }

.quote {
  margin: 30px 0 0;
  font-size: clamp(1.32rem, 2.2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -.026em;
  line-height: 1.28;
  color: var(--black);
}

.promise-panel {
  background: var(--white);
  border-radius: var(--r-card);
  padding: clamp(28px, 3vw, 40px);
}
.promise-panel h3 { margin-bottom: 6px; }
.promises { list-style: none; margin: 0; padding: 0; display: grid; }
.promises li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  padding-block: 18px;
  border-top: 1px solid var(--line-2);
}
.promises svg { color: var(--black); margin-top: 5px; }
.promises strong { display: block; color: var(--black); font-weight: 600; }
.promises span span { color: var(--grey); font-size: 1.04rem; }

/* ------------------------------ 9. Intake --------------------------------- */

.intake {
  max-width: var(--narrow);
  margin-inline: auto;
  background: var(--grey-bg);
  border-radius: clamp(20px, 2.4vw, 28px);
  padding: clamp(32px, 4.2vw, 60px);
  text-align: center;
}
.intake > p { margin: 20px auto 0; max-width: 38rem; color: var(--grey); font-size: 1.14rem; }

.check-list {
  list-style: none;
  margin: 34px auto 0;
  padding: 0;
  max-width: 40rem;
  display: grid;
  text-align: left;
}
.check-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  padding-block: 15px;
  border-top: 1px solid var(--line);
  font-size: 1.06rem;
}
.check-list svg { color: var(--black); margin-top: 5px; }

.intake .btn { margin-top: 34px; }
.intake-foot { margin-top: 18px; font-size: 1rem; color: var(--grey); }

/* ------------------------------ 10. Vragen -------------------------------- */

.faq { max-width: 52rem; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item:first-child { border-top: 1px solid var(--line-2); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--black);
  line-height: 1.32;
}
.faq-icon {
  flex: none;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  color: var(--grey);
  transition: transform .25s ease;
}
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.32, .72, 0, 1);
  color: var(--grey);
}
.faq-a.is-open { grid-template-rows: 1fr; }
.faq-a[hidden] { display: none; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner > p { padding: 0 2px 28px; max-width: 44rem; }

.faq-q { transition: color .18s ease; }
.faq-q:hover { color: var(--grey); }
.dark .faq-q:hover { color: #FFFFFF; }

/* ------------------------------ 11. Contact ------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(34px, 4.6vw, 70px);
  align-items: start;
}
.contact-intro h2 { text-align: left; }
.contact-intro .lead { margin-top: 18px; }

.contact-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; }
.contact-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 16px;
  align-items: start;
  padding-block: 20px;
  border-top: 1px solid var(--line);
}
.contact-list li:last-child { border-bottom: 1px solid var(--line); }
.ci { color: var(--black); margin-top: 6px; }
.contact-label {
  display: block;
  font-size: 1rem;
  color: var(--grey);
  margin-bottom: 1px;
}
.contact-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--black);
  text-decoration: none;
  word-break: break-word;
}

.form-card {
  background: var(--white);
  border-radius: var(--r-card);
  padding: clamp(28px, 3.4vw, 46px);
}

.field { display: grid; gap: 8px; margin-bottom: 22px; }
.field label { font-weight: 600; color: var(--black); font-size: 1.04rem; }
.field .hint { font-size: 1rem; color: var(--grey); }
.optional { font-weight: 400; color: var(--grey); }

input, textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 17px;
  font: inherit;
  font-size: 1.06rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
textarea { min-height: 142px; resize: vertical; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--grey); opacity: 1; }
input:hover, textarea:hover { border-color: #B9B9C0; }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 4px rgba(29, 29, 31, .1);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #B3261E; }

.error { font-size: 1rem; font-weight: 600; color: #B3261E; }
.error[hidden] { display: none; }

.radio-fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.radio-fieldset legend { padding: 0; margin-bottom: 11px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 9px; }
.radio-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  cursor: pointer;
  font-weight: 500;
  font-size: 1.04rem;
  color: var(--ink);
}
.radio-chip input { width: auto; min-height: 0; margin: 0; accent-color: var(--black); }
.radio-chip:has(input:checked) { border-color: var(--black); color: var(--black); font-weight: 600; }

.form-foot { margin-top: 14px; font-size: 1rem; color: var(--grey); }

.form-success {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 15px;
  padding: 26px;
  border-radius: var(--r-card);
  background: var(--grey-bg);
  color: var(--ink);
}
.form-success[hidden] { display: none; }
.form-success svg { color: var(--black); margin-top: 5px; }
.form-success strong { display: block; color: var(--black); font-size: 1.1rem; margin-bottom: 3px; }

/* ------------------------------ 12. Slotoproep ---------------------------- */

.closing {
  text-align: center;
  padding-block: clamp(72px, 9vw, 120px);
}
.closing h2 { max-width: 20ch; margin-inline: auto; }
.closing .btn { margin-top: 34px; }

/* ------------------------------ 13. Voet ---------------------------------- */

.site-footer {
  background: var(--grey-bg);
  border-top: 1px solid var(--line-2);
  padding-block: clamp(44px, 5vw, 62px) 34px;
  font-size: 1.02rem;
  color: var(--grey);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 34px;
  padding-bottom: clamp(32px, 4vw, 46px);
}
.footer-grid h4 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--black);
  letter-spacing: -.012em;
  margin-bottom: 14px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-grid a { color: var(--grey); text-decoration: none; }
.footer-grid a:hover { color: var(--black); text-decoration: underline; }
.footer-note { margin-top: 16px; max-width: 25rem; }

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  justify-content: space-between;
  font-size: .98rem;
}

/* ------------------------------ 14. Mobiel -------------------------------- */

@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .trust dl { grid-template-columns: repeat(2, 1fr); }
  .trust dl > div:nth-child(3) { border-left: 0; }
  .trust dl > div:nth-child(3),
  .trust dl > div:nth-child(4) { border-top: 1px solid var(--line-2); }
}

@media (max-width: 880px) {
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 1.12rem; }
  .cards { grid-template-columns: 1fr; }
  .trust dl { grid-template-columns: 1fr; }
  .trust dl > div { border-left: 0; padding-block: 24px; }
  .trust dl > div:nth-child(n+2) { border-top: 1px solid var(--line-2); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn, .closing .btn, .intake .btn { width: 100%; }
  .brand-name span { display: none; }
}


/* ======================= 15. In beeld komen bij scrollen ===================
   Wordt alleen toegepast wanneer JavaScript draait én de bezoeker beweging
   niet heeft beperkt. Zonder JavaScript staat alles gewoon meteen op zijn
   plaats — de inhoud hangt dus nooit af van een animatie.                  */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease) var(--d, 0ms),
              transform var(--dur) var(--ease) var(--d, 0ms);
  will-change: opacity, transform;
}
/* De beginstand moet één keer vastgezet worden zónder overgang. Anders staat
   het blok al zichtbaar op het scherm wanneer JavaScript het op onzichtbaar
   zet, en fadet het eerst wég voor het weer binnenkomt — wat eruitziet alsof
   er helemaal niets gebeurt.                                               */
.js .reveal.prep { transition: none !important; }

.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal.is-done { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================ 16. Zwevende knoppen ========================= */

.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--deep);
  color: #FFFFFF;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
  transition: opacity .25s ease, transform .25s cubic-bezier(.32, .72, 0, 1),
              background-color .2s ease;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: #33343A; }

/* Vaste belbalk op telefoon: het snelste pad naar een telefoongesprek, en
   voor deze doelgroep de belangrijkste knop van de hele site.              */
.call-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
.call-bar.is-visible { transform: none; }
.call-bar .btn { width: 100%; }

@media (max-width: 640px) {
  .call-bar { display: block; }
  .to-top { display: none; }
  body { padding-bottom: 88px; }   /* ruimte zodat de balk niets afdekt */
}


/* ======================= 17. Diepte in de donkere blokken ==================
   Een vlak zwart vlak oogt goedkoop. Twee zachte lichtbronnen en een heel
   fijne korrel geven het blok diepte, zonder dat je het als effect opmerkt.
   De korrel is een ingesloten SVG: geen extra bestand om te laden.        */

/* De korrel hieronder heeft een positiecontext nodig, maar de vaste balk
   bovenaan mag die NIET krijgen: die staat op sticky, en relative zou dat
   overschrijven waardoor de balk gewoon mee naar boven wegscrolt.         */
.dark:not(.site-header) { position: relative; }
.dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%27.5%27%2F%3E%3C%2Fsvg%3E");
  background-size: 160px 160px;
  opacity: .04;
  pointer-events: none;
}
.site-header.dark::after { content: none; }

.hero.dark {
  /* Het licht zit achter de titel, niet aan de bovenrand. Stond het bovenaan,
     dan was de hero daar lichter dan de vaste balk erboven — en dat las als
     een witte gloed onder de balk zodra je begon te scrollen.              */
  background:
    radial-gradient(115% 72% at 50% 46%, #31333A 0%, rgba(49, 51, 58, 0) 62%),
    radial-gradient(90% 60% at 50% 118%, #24262B 0%, rgba(36, 38, 43, 0) 60%),
    var(--deep);
}

/* Haarlijn met verloop waar de hero eindigt: een detail dat je niet bewust
   ziet, maar dat de rand afwerkt.                                          */
.hero.dark::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0),
              rgba(255, 255, 255, .18) 25%,
              rgba(255, 255, 255, .18) 75%,
              rgba(255, 255, 255, 0));
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 1; }
.hero .lead { color: #C7C7CE; }

/* ============================== 18. Statuspil ============================= */

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  margin-bottom: 26px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05);
  color: #D2D2D7;
  font-size: 1rem;
  font-weight: 500;
}
.hero-badge .dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EBEBF0;
  flex: none;
}
.hero-badge .dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(235, 235, 240, .5);
  animation: pols 2.6s ease-out infinite;
}
@keyframes pols {
  0%   { transform: scale(.55); opacity: .9; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ===================== 19. De hero komt binnen bij het laden ==============
   Eén keer, kort, en met oplopende vertraging zodat het oog de volgorde
   volgt: pil, titel, tekst, knoppen.                                       */

@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.hero-inner > * { animation: heroIn .8s cubic-bezier(.22, .7, .2, 1) both; }
.hero-inner > *:nth-child(1) { animation-delay: .05s; }
.hero-inner > *:nth-child(2) { animation-delay: .13s; }
.hero-inner > *:nth-child(3) { animation-delay: .22s; }
.hero-inner > *:nth-child(4) { animation-delay: .31s; }
.hero-inner > *:nth-child(5) { animation-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .hero-inner > * { animation: none; }
  .hero-badge .dot::after { animation: none; opacity: .5; transform: none; }
}

/* ===================== 20. Knoppen met wat meer aanwezigheid ============== */

.dark .btn-primary { box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35); }
.btn-primary { box-shadow: 0 1px 2px rgba(11,12,15,.12), 0 8px 24px rgba(11,12,15,.14); }
.btn-primary:active, .btn-secondary:active { transform: translateY(1px); }


/* ================== 21. Overgang tussen licht en donker ===================
   Een donker blok dat kaarsrecht tegen wit botst leest als twee losse
   stukken. Door het blok aan de boven- en onderkant iets op te lichten
   krijgt de rand diepte en loopt het oog er vloeiend overheen.            */

.section.dark {
  background:
    linear-gradient(180deg,
      #24262C 0%,
      var(--deep) 16%,
      var(--deep) 84%,
      #24262C 100%);
}

.closing.dark {
  background: linear-gradient(180deg, #24262C 0%, var(--deep) 22%);
}

/* Dezelfde haarlijn met verloop als onder de hero, nu ook boven en onder de
   donkere tussensectie.                                                    */
.section.dark::before,
.closing.dark::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
              rgba(255,255,255,0),
              rgba(255,255,255,.16) 25%,
              rgba(255,255,255,.16) 75%,
              rgba(255,255,255,0));
  pointer-events: none;
  z-index: 2;
}

/* Het intakeblok zweeft als een kaart op wit; daar hoort een schaduw bij die
   het van de pagina tilt.                                                   */
.intake.dark {
  box-shadow: 0 2px 8px rgba(11,12,15,.10), 0 30px 70px rgba(11,12,15,.22);
}


/* ========================= 22. Bewegingssysteem ===========================
   Alles hieronder gebruikt dezelfde curve en dezelfde twee snelheden. Dat is
   wat een site samenhangend doet aanvoelen: niet méér animatie, maar animatie
   die overal hetzelfde ritme volgt.                                        */

/* De balk krimpt zodra je scrolt — het logo blijft, de hoogte niet. */
.header-inner {
  transition: min-height var(--dur-kort) var(--ease);
}
.site-header.is-stuck .header-inner { min-height: 60px; }
.brand-mark { transition: transform var(--dur-kort) var(--ease); }
.site-header.is-stuck .brand-mark { transform: scale(.9); }

/* Voortgangslijn onder de balk: laat zien hoe ver je op de pagina bent. */
.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: rgba(255, 255, 255, .55);
  pointer-events: none;
}

/* De hero schuift iets trager weg dan de pagina en vervaagt daarbij. */
.hero-inner { will-change: transform, opacity; }

/* Knoppen: het pictogram zet een stap mee bij hover. */
.btn svg { transition: transform var(--dur-kort) var(--ease); }
.btn:hover svg { transform: translateX(2px); }
.btn { transition: background-color var(--dur-kort) var(--ease),
                   border-color var(--dur-kort) var(--ease),
                   color var(--dur-kort) var(--ease),
                   transform var(--dur-kort) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Kaarten: het pictogram komt mee omhoog, net iets later dan de kaart zelf. */
.card-icon { transition: transform var(--dur-kort) var(--ease) 40ms; }
.card:hover .card-icon { transform: translateY(-3px); }
.card { transition: transform var(--dur-kort) var(--ease),
                    box-shadow var(--dur-kort) var(--ease); }

/* Menu-items en voetlinks: een streep die uitschuift. */
.footer-grid a { position: relative; }
.footer-grid a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-kort) var(--ease);
}
.footer-grid a:hover { text-decoration: none; }
.footer-grid a:hover::after { transform: scaleX(1); }

/* Contactgegevens en de vinkjes lichten mee op bij hover. */
.contact-list li { transition: transform var(--dur-kort) var(--ease); }
.contact-list li:hover { transform: translateX(3px); }

/* De vraagteken-plus draait al; de vraag zelf schuift een haartje mee. */
.faq-q { transition: color var(--dur-kort) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .hero-inner { transform: none !important; opacity: 1 !important; }
  .btn:hover, .card:hover, .contact-list li:hover { transform: none; }
  .btn:hover svg, .card:hover .card-icon { transform: none; }
}