/* ============================================================
   ADAM DIGITAL AGENCY — styles.css
   ------------------------------------------------------------
   Homepage opgemaakt naar het ontwerp in ADA.pdf.

   Wat ongewijzigd blijft t.o.v. de Brand Guidelines:
   - De fonts: Outfit (koppen), Manrope (broodtekst),
     Sora (buttons, labels, navigatie en cijfers).
   - De merkkleuren: Adam Blue, Adam Violet, Adam Magenta en
     de gradient blauw -> indigo -> magenta.
   - Het logo: assets/logo-primary-dark.png (ring met de A).

   Wat het nieuwe ontwerp toevoegt:
   - Zachte hoeken (kaarten 20 px, tegels 14 px, knoppen rond).
   - Gradient-tegels per dienst, per processtap en per usp.
   - Diepe donkere kaarten op een bijna-zwarte drager, met
     subtiele kleurgloed achter hero, secties en de slot-CTA.
   ============================================================ */

:root {
  /* --- Merkkleuren --- */
  --blue:            #0190F1;
  --violet:          #45409B;
  --magenta:         #E8106B;
  --purple:          #9333EA;
  --indigo:          #5B5BD6;

  /* --- Neutralen --- */
  --bg:              #08080B;   /* drager                       */
  --bg-raised:       #0B0B11;   /* iets opgelichte sectie       */
  --card:            #111117;   /* kaartvlak                    */
  --card-2:          #15151C;   /* kaart hover / accordeon open */
  --line:            rgba(255, 255, 255, .08);
  --line-strong:     rgba(255, 255, 255, .16);

  /* --white is de sterkste tekstkleur op de drager; die klapt om in de
     lichte modus. --on-accent is tekst OP een gekleurd vlak (knop, tegel,
     avatar) en blijft in beide modi wit. */
  --white:           #FFFFFF;
  --on-accent:       #FFFFFF;
  --ink-100:         #F4F4F7;
  --ink-200:         #C9C9D2;
  --ink-300:         #9A9AA6;
  --ink-400:         #7C7C88;
  --ink-500:         #5C5C68;

  --star:            #F5B301;

  /* Vlakken en lijnen die per modus van richting wisselen */
  --tint:            rgba(255, 255, 255, .035);  /* pillen, chips, metric  */
  --tint-hover:      rgba(255, 255, 255, .04);   /* knop-hover             */
  --line-hover:      rgba(255, 255, 255, .38);
  --grid-line:       rgba(255, 255, 255, .028);  /* raster in de hero      */
  --stripe:          rgba(255, 255, 255, .035);  /* beeld-placeholders     */
  --placeholder:     #14141A;
  --tag-bg:          rgba(0, 0, 0, .45);
  --header-bg:       rgba(8, 8, 11, .82);
  --header-bg-solid: rgba(8, 8, 11, .94);
  --shadow-float:    0 18px 40px rgba(0, 0, 0, .55);
  --shadow-nav:      0 24px 48px rgba(0, 0, 0, .6);
  --media-blue:      #16202E;
  --media-violet:    #241A31;
  --media-magenta:   #2A1626;
  --glow-blue:       rgba(1, 144, 241, .20);
  --glow-magenta:    rgba(232, 16, 107, .16);
  --glow-cta:        radial-gradient(closest-side, rgba(123, 63, 214, .30), rgba(232, 16, 107, .10) 55%, transparent 78%);

  /* --- Gradient (blauw -> indigo -> magenta) --- */
  --grad:            linear-gradient(90deg, #0190F1 0%, #7B5BE0 50%, #E8106B 100%);
  --grad-btn:        linear-gradient(90deg, #0190F1 0%, #7B3FD6 50%, #E8106B 100%);
  --grad-btn-hover:  linear-gradient(90deg, #0177C6 0%, #6A32BC 50%, #C00D58 100%);

  /* --- Typografie --- */
  --font-head: "Outfit", system-ui, sans-serif;                   /* koppen en subkoppen */
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;   /* lopende tekst       */
  --font-btn:  "Lato", system-ui, sans-serif;                     /* knoppen             */
  --font-ui:   "Sora", system-ui, sans-serif;                     /* labels, navigatie, cijfers */
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --t-display: clamp(2.25rem, 1.35rem + 3.9vw, 4.25rem);
  --t-h2:      clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --t-h3:      clamp(1.125rem, 1.03rem + .4vw, 1.375rem);
  --t-lead:    clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --t-body:    1rem;
  --t-small:   .875rem;
  --t-label:   .75rem;

  /* --- Raster --- */
  --maxw: 1240px;
  --pad:  clamp(1.25rem, 4.5vw, 4rem);
  --sec:  clamp(4.5rem, 8vw, 8rem);

  /* --- Vorm --- */
  --r-card: 20px;
  --r-tile: 14px;
  --r-pill: 999px;

  --header-h: 96px;
  --t: 180ms;
}

/* ---------- Reset & basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink-300);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
}
h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
p  { margin: 0; }
/* Browsers geven een dl standaard marge boven en onder, en springen een dd
   40px in. Beide zetten een definitielijst uit de pas met alles eromheen.
   Hoort bij de reset, net als p en ul. */
dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
blockquote { margin: 0; }

::selection { background: var(--blue); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

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

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  font-family: var(--font-ui); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--white); color: var(--bg); padding: .75rem 1.5rem;
}
.skip-link:focus { left: 0; }

/* ---------- Gedeelde tekstonderdelen ---------- */
.grad {
  color: var(--blue);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad { -webkit-text-fill-color: currentColor; color: var(--blue); background: none; }
}

/* Sectielabel — Sora, kapitalen, in de merkgradient */
.eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  color: var(--blue);
}

.label {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.arrow { display: inline-block; transition: transform var(--t) ease; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px;
  padding: 13px 26px;
  font-family: var(--font-btn);
  font-size: .875rem;
  /* Lato heeft geen 600; 700 is het eerstvolgende echte gewicht.
     Zonder dit zou de browser een nep-vet renderen. */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  /* De 1 px transparante rand valt buiten het padding-box. Zonder deze twee
     regels herhaalt de gradient zich daarin en zie je links een magenta en
     rechts een blauw streepje. */
  background-origin: border-box;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: background-image var(--t) ease, color var(--t) ease,
              border-color var(--t) ease, box-shadow var(--t) ease;
}
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary {
  background-image: var(--grad-btn);
  color: var(--on-accent);
  box-shadow: 0 8px 30px rgba(123, 63, 214, .28);
}
.btn-primary:hover { background-image: var(--grad-btn-hover); box-shadow: 0 10px 34px rgba(123, 63, 214, .40); }

.btn-ghost { color: var(--ink-100); border-color: var(--line-strong); }
.btn-ghost:hover { color: var(--white); border-color: var(--line-hover); background: var(--tint-hover); }

.btn-lg { min-height: 56px; padding: 17px 34px; font-size: .9375rem; }
.btn-sm { min-height: 44px; padding: 11px 22px; font-size: .8125rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  transition: border-color var(--t) ease, background-color var(--t) ease;
}
.site-header.is-scrolled { background: var(--header-bg-solid); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--header-h);
}

/* Bureaubladbalk: logo links, en rechts het menu met de offerteknop er
   direct naast. Het menu neemt alleen de ruimte die het nodig heeft, dus
   het schuift vanzelf tegen de knop aan. */
@media (min-width: 901px) {
  .site-header .nav { gap: 1.25rem; }
  .site-header .nav-links { gap: 1.25rem; }
}

/* Logo-lockup: het merkteken met het woordmerk ernaast */
.brand { display: inline-flex; align-items: center; gap: .75rem; }
.brand-mark { width: 80px; height: 80px; border-radius: 50%; }

/* In de footer staat het merkteken naast het woordmerk; daar blijft het kleiner. */
.footer-brand .brand-mark { width: 100px; height: 100px; }
.brand-word {
  font-family: var(--font-head);
  font-size: 1.3125rem;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink-300);
  white-space: nowrap;
}
.brand-word strong { font-weight: 700; color: var(--white); }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav-links { display: flex; align-items: center; gap: 1.75rem; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-300);
  transition: color var(--t) ease;
}
.nav-links a:hover { color: var(--white); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: none; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer;
}
/* Hele pixels: op 1,5 px rendert de ene streep dikker dan de andere,
   afhankelijk van waar hij op het scherm valt. */
.nav-toggle span {
  display: block; width: 18px; height: 2px;
  background: var(--ink-100); border-radius: 2px;
  transition: transform var(--t) ease, opacity var(--t) ease;
}

/* Open menu: de buitenste strepen kruisen, de middelste verdwijnt.
   De strepen liggen 7 px uit elkaar (2 px hoog + 5 px tussenruimte),
   dus die afstand schuiven ze naar het midden. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }

.hero-inner {
  position: relative; z-index: 2;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.5rem);
}

/* Fijn raster op de achtergrond */
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}

/* Kleurgloed: blauw linksboven, magenta rechts */
.hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.hero-glow-blue    { top: -18%; left: -12%; width: 46rem; height: 34rem; background: var(--glow-blue); }
.hero-glow-magenta { top: 4%; right: -16%; width: 44rem; height: 38rem; background: var(--glow-magenta); }

.pill-badge {
  display: inline-flex; align-items: center;
  padding: .6rem 1.15rem;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 500;
  color: var(--ink-200);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.hero-title {
  max-width: 20ch;
  margin-top: 2rem;
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.035em;
}
.hero-title .grad { display: inline; }

.hero-lead {
  max-width: 58ch;
  margin-top: 1.75rem;
  font-size: var(--t-lead);
  line-height: 1.75;
  color: var(--ink-300);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

/* Cijfers onder de hero */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: clamp(2rem, 6vw, 5rem);
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
}
.stat-num {
  font-family: var(--font-ui);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.375rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--white);
}
.stat-label {
  margin: .5rem 0 0;
  font-size: var(--t-small);
  color: var(--ink-400);
}

/* Vertrouwd door */
.trustbar { position: relative; z-index: 2; border-top: 1px solid var(--line); }
.trustbar-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: 2.25rem;
}
.trust-widget { flex: 1 1 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.trust-widget .ti-widget { width: 100%; margin-bottom: 0 !important; }

/* ---------- Sectie ---------- */
.section { position: relative; padding-block: var(--sec); }
.section-raised { background: var(--bg-raised); }
/* Case studies zijn lange pagina's met korte tekstblokken; de volle --sec
   maakte daar te veel lucht van. Krapper ritme, zelfde opbouw. */
.section-tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section-tight .section-head { margin-bottom: clamp(1.25rem, 2.2vw, 2rem); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head h2 { font-size: var(--t-h2); }
.section-intro { margin-top: 1.5rem; font-size: var(--t-lead); color: var(--ink-300); }

.section-head-row {
  max-width: none;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5rem;
}
/* De kop houdt zelf zijn regellengte vast (ch telt hier op de kopgrootte),
   de knop rechts krimpt niet mee. */
.section-head-row > div { flex: 1 1 auto; min-width: 0; }
.section-head-row > div h2 { max-width: 20ch; }
.section-head-row .btn { flex: none; }

.section-head-center { max-width: 60ch; margin-inline: auto; text-align: center; }

/* ---------- Kaart ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color var(--t) ease, background-color var(--t) ease, transform var(--t) ease;
}

/* Gekleurde tegel met de letter, het cijfer of het icoon */
.tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  font-family: var(--font-ui); font-size: 1.375rem; font-weight: 700;
  color: var(--on-accent);
  background: linear-gradient(140deg, var(--accent), var(--accent-2, var(--accent)));
  border-radius: var(--r-tile);
}
.tile-grad { background: linear-gradient(140deg, #E8106B, #7B3FD6 55%, #0190F1); }
.tile-num  { width: 52px; height: 52px; font-size: 1.0625rem; letter-spacing: .02em; }
.tile-sm   { width: 46px; height: 46px; font-size: .9375rem; flex: none; }

/* ---------- Diensten ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}
.service { padding: clamp(1.75rem, 2.6vw, 2.25rem); }
.service:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--card-2); }
.service h3 { margin-top: 1.75rem; }
.service p  { margin-top: .875rem; color: var(--ink-300); }
.card-link {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.5rem;
  font-family: var(--font-ui); font-size: .875rem; font-weight: 600;
  color: var(--accent);
}
.card-link:hover .arrow { transform: translateX(4px); }

/* ---------- Over ons ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.about-copy h2 { font-size: var(--t-h2); }
.about-copy p  { margin-top: 1.5rem; color: var(--ink-300); }

.chips { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.chips li {
  padding: .7rem 1.35rem;
  font-family: var(--font-ui); font-size: .875rem; font-weight: 600;
  color: var(--ink-100);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.about-media { position: relative; }

/* Plaatsvervangend beeld — vervang door een echte foto */
.media-frame,
.work-media {
  position: relative;
  display: grid; place-items: center;
  border-radius: var(--r-card);
  background-color: var(--placeholder);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--stripe) 0 14px,
    transparent 14px 28px
  );
  border: 1px solid var(--line);
}
.media-frame { aspect-ratio: 4 / 3; }
/* Met een echte foto vervalt het streepjespatroon. De brede foto (2,6:1)
   zou in een 4:3-kader bijna helemaal wegvallen; 16:9 houdt de compositie
   heel en de kolom hoog genoeg naast de tekst ernaast. */
.media-photo {
  aspect-ratio: 16 / 9;
  background-image: none;
  overflow: hidden;
}
.media-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-tag {
  font-family: var(--font-mono); font-size: .8125rem;
  color: var(--ink-300);
  background: var(--tag-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .45rem .9rem;
}

.badge-card {
  position: absolute; left: -1.25rem; bottom: 0;
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1.5rem .9rem 1rem;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
}
.badge-card img { width: 52px; height: 52px; border-radius: 50%; }
.badge-card strong { display: block; font-family: var(--font-head); font-size: 1.125rem; font-weight: 600; color: var(--white); }
.badge-card span   { display: block; font-size: var(--t-small); color: var(--ink-400); }

/* ---------- Werk ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}
.work { overflow: hidden; padding: 0; }
.work:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.work-media { aspect-ratio: 4 / 3; border: 0; border-radius: 0; }
.work-media-blue    { background-color: var(--media-blue); }
.work-media-violet  { background-color: var(--media-violet); }
.work-media-magenta { background-color: var(--media-magenta); }

.work-body { padding: clamp(1.5rem, 2.4vw, 2rem); }
.work-cat {
  display: block;
  font-family: var(--font-ui); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.work-body h3 { margin-top: .9rem; font-size: 1.5rem; font-weight: 600; }

.metric {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 1.25rem;
  padding: .6rem 1.15rem;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 600;
  color: var(--ink-100);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.metric .tri { color: var(--accent); font-size: .75rem; }

/* Meetbare winst op de projectkaart, alleen bij cases met cijfers */
.work-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.work-stats div { display: flex; flex-direction: column-reverse; }
.work-stats dd {
  margin: 0;
  font-family: var(--font-ui); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1;
  color: var(--white);
}
.work-stats dt {
  margin-top: .3rem;
  font-family: var(--font-ui); font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-400);
}

/* ---------- Proces ---------- */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}
/* Vier stappen horen op een breed scherm op een rij te staan. auto-fit
   viel bij 260px terug op drie kolommen plus een losse vierde eronder.
   De :has-test zorgt dat alleen rasters met vier of meer items dit
   krijgen - de tijdlijn op Over ons heeft er drie en blijft driekoloms. */
@media (min-width: 1000px) {
  .step-grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
}

.step { padding: clamp(1.5rem, 2.4vw, 2rem); }
.step:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.step h3 { margin-top: 1.5rem; }
.step p  { margin-top: .75rem; color: var(--ink-300); }

/* Datumlabel in de tijdlijn op Over ons */
.step-datum {
  display: block; margin-top: 1.5rem;
  font-family: var(--font-ui); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400);
}
.step-datum + h3 { margin-top: .4rem; }
.check-list a { color: var(--ink-100); text-decoration: underline; text-underline-offset: .2em; }
.check-list a:hover { color: var(--blue); }

/* ---------- Waarom wij ---------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.why-copy { position: sticky; top: calc(var(--header-h) + 3rem); }
.why-copy h2 { font-size: var(--t-h2); }
.why-copy p  { margin-top: 1.5rem; color: var(--ink-300); }

.why-list { display: grid; gap: 1.25rem; }
.why { display: flex; gap: 1.25rem; padding: 1.75rem; }
.why:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.why p { margin-top: .5rem; color: var(--ink-300); }

/* ---------- Reviews ---------- */
.rating { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.stars { color: var(--star); letter-spacing: .18em; font-size: 1.0625rem; }
.rating-text { font-family: var(--font-ui); font-weight: 600; color: var(--ink-200); }

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}
.review { display: flex; flex-direction: column; padding: clamp(1.75rem, 2.6vw, 2.25rem); }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review-src { font-family: var(--font-ui); font-size: var(--t-small); font-weight: 600; color: var(--ink-400); }
.review blockquote { margin-top: 1.75rem; color: var(--ink-200); }

.review-author { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: 2rem; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  font-family: var(--font-ui); font-size: .875rem; font-weight: 600;
  color: var(--on-accent);
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
}
.review-who strong { display: block; font-family: var(--font-ui); font-size: .9375rem; font-weight: 600; color: var(--white); }
.review-who span   { display: block; font-size: var(--t-small); color: var(--ink-400); }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 1rem; max-width: 900px; margin-inline: auto; }
/* Bij een kop die links staat, lijnt de lijst uit met die kop. */
.faq-list-links { margin-inline: 0; }
/* Losse knop onder een raster of een lijst, gecentreerd. */
.section-more { margin-top: clamp(2.25rem, 4vw, 3.25rem); text-align: center; }

.faq { padding: 0; }
.faq[open] { background: var(--card-2); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem clamp(1.5rem, 2.4vw, 2rem);
  font-family: var(--font-head); font-size: 1.125rem; font-weight: 500;
  letter-spacing: -.01em;
  color: var(--white);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ink-100); }

/* Rond plusje in de merkgradient; wordt een minnetje als het item open staat */
.faq-icon {
  position: relative; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background-image: var(--grad-btn);
}
.faq-icon::before,
.faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px; border-radius: 2px; background: var(--on-accent);
  transform: translate(-50%, -50%);
  transition: opacity var(--t) ease, transform var(--t) ease;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq[open] .faq-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

.faq > p {
  padding: 0 clamp(1.5rem, 2.4vw, 2rem) 1.75rem;
  color: var(--ink-300);
}

/* ---------- Vragenindex bovenaan de FAQ-pagina ----------
   Een kolom per onderwerp; de kop kleurt mee met het accent dat de
   groep in de HTML meekrijgt. De links wijzen naar het anker van de
   vraag, script.js klapt hem daar open. */
.faq-index {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.faq-index-col h3 { color: color-mix(in srgb, var(--accent, var(--blue)) 75%, var(--white)); }
.faq-index-col ul { display: grid; gap: .85rem; margin-top: 1.25rem; }
.faq-index-col a {
  display: flex; gap: .6rem;
  font-size: var(--t-small); line-height: 1.5;
  color: var(--ink-300);
  transition: color var(--t) ease;
}
.faq-index-col a::before {
  content: "›"; flex: none;
  font-family: var(--font-ui); color: var(--ink-500);
  transition: color var(--t) ease, transform var(--t) ease;
}
.faq-index-col a:hover { color: var(--white); }
.faq-index-col a:hover::before { color: var(--accent, var(--blue)); transform: translateX(2px); }

/* Antwoord met meer dan een alinea erin - bijvoorbeeld een opsomming.
   De omhulling houdt dezelfde binnenmarge aan als een los antwoord. */
.faq > .faq-body {
  padding: 0 clamp(1.5rem, 2.4vw, 2rem) 1.75rem;
  color: var(--ink-300);
}
.faq > .faq-body > * + * { margin-top: 1.25rem; }
.faq > .faq-body .check-list { margin-top: 1.25rem; }
/* Links in een antwoord: onderstreept, niet alleen een kleurverschil. */
.faq > .faq-body a,
.faq > p a {
  color: var(--ink-100);
  text-decoration: underline; text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, var(--blue) 55%, transparent);
}
.faq > .faq-body a:hover,
.faq > p a:hover { color: var(--blue); text-decoration-color: currentColor; }

/* Een uitgeschakelde knop moet er ook uit zien alsof hij uit staat. */
.btn:disabled { opacity: .4; filter: grayscale(.4); cursor: not-allowed; }
.btn:disabled:hover { transform: none; }

/* ---------- Offerteformulier ----------
   Twee kolommen: links de gegevens, rechts het formulier in een kaart.
   De velden volgen dezelfde maatvoering als de knoppen (44 px hoog) en
   dezelfde randen als de kaarten. */
.offerte-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
.offerte-zij { position: sticky; top: calc(var(--header-h) + 2.5rem); }
.offerte-zij h2 { font-size: var(--t-h3, 1.5rem); }
.offerte-zij > p { margin-top: 1rem; color: var(--ink-300); }
.offerte-zij .check-list { margin-top: 2rem; }
.offerte-zij .check-list li { font-size: var(--t-small); }

.contact-lijst { display: grid; gap: 1.1rem; margin-top: 2rem; }
.contact-lijst li { display: grid; gap: .25rem; }
.contact-lijst a { color: var(--ink-100); }
.contact-lijst a:hover { color: var(--blue); }

.offerte-kaart { padding: clamp(1.5rem, 3vw, 2.5rem); }
.offerte-kaart > h2 { font-size: var(--t-h3, 1.5rem); }
.offerte-intro { margin-top: .75rem; color: var(--ink-300); font-size: var(--t-small); }

.offerte-form { display: grid; gap: 1.25rem; margin-top: 2rem; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.veld { display: grid; gap: .5rem; }
.veld label {
  font-family: var(--font-ui); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400);
  transition: color var(--t) ease;
}
.veld label span { color: var(--magenta); }
.veld input,
.veld select,
.veld textarea {
  width: 100%; min-height: 48px; padding: .75rem 1rem;
  font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6;
  color: var(--ink-100);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  transition: border-color var(--t) ease, background-color var(--t) ease;
}
.veld textarea { min-height: 150px; resize: vertical; }
.veld input::placeholder, .veld textarea::placeholder { color: var(--ink-500); }
.veld select { appearance: none; cursor: pointer; }
/* Het pijltje van het keuzemenu als achtergrond, zodat de eigen stijl blijft. */
.veld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7C88' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px;
  padding-right: 2.75rem;
}
.veld select option { background: var(--card); color: var(--ink-100); }
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none; border-color: color-mix(in srgb, var(--blue) 60%, transparent);
  background: var(--card-2);
}
.veld:focus-within label { color: var(--ink-200); }
.veld input:user-invalid, .veld textarea:user-invalid { border-color: var(--magenta); }

/* Het lokaas voor bots hoort onzichtbaar te zijn, maar niet display:none -
   sommige bots slaan verborgen velden juist over. */
.veld-val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.offerte-verzenden { display: grid; gap: 1rem; justify-items: start; margin-top: .5rem; }
.offerte-fijndruk { font-size: var(--t-small); color: var(--ink-400); }
.offerte-fijndruk a { color: var(--ink-200); text-decoration: underline; text-underline-offset: .2em; }
.offerte-fijndruk a:hover { color: var(--blue); }

.form-notice {
  margin-top: 1.5rem; padding: 1rem 1.25rem;
  font-size: var(--t-small); color: var(--ink-200);
  background: color-mix(in srgb, var(--magenta) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--magenta) 40%, transparent);
  border-radius: var(--r-tile);
}
.form-notice code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; color: var(--white);
}

@media (max-width: 900px) {
  .offerte-grid { grid-template-columns: 1fr; }
  .offerte-zij { position: static; }
}
@media (max-width: 560px) {
  .veld-rij { grid-template-columns: 1fr; }
  .offerte-verzenden .btn { width: 100%; }
}

/* ---------- Slot-CTA ---------- */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(5rem, 9vw, 8.5rem);
  text-align: center;
}
.cta-glow {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; bottom: -55%; translate: -50% 0;
  width: min(120rem, 190%); height: 55rem;
  border-radius: 50%;
  background: var(--glow-cta);
  filter: blur(60px);
}
.cta-inner { position: relative; z-index: 1; display: grid; justify-items: center; }
.cta h2 {
  max-width: 24ch;
  margin-top: 2.25rem;
  /* Zelfde maat en gewicht als elke andere h2 op de site. */
  font-size: var(--t-h2);
}
.cta > .container > p { max-width: 54ch; margin-top: 1.5rem; font-size: var(--t-lead); color: var(--ink-300); }
.cta .btn { margin-top: 2.5rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(3.5rem, 6vw, 5rem);
}
.footer-brand p { margin-top: 1.5rem; max-width: 34ch; color: var(--ink-400); }

/* Social als icoonrij onder de merktekst, in plaats van een tekstkolom.
   De iconen zijn inline SVG (currentColor), zodat ze meekleuren met de
   hover-status en er niets extern geladen hoeft te worden. */
.footer-social { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  color: var(--ink-300);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: color var(--t) ease, border-color var(--t) ease,
              background-color var(--t) ease, transform var(--t) ease;
}
.footer-social a:hover {
  color: var(--white);
  border-color: var(--line-hover);
  background: var(--tint-hover);
  transform: translateY(-2px);
}
.footer-social a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.footer-social svg { width: 19px; height: 19px; }

.footer-col { display: grid; align-content: start; gap: .35rem; }
.footer-col .label { margin-bottom: .9rem; }
.footer-col a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-family: var(--font-ui); font-size: .9375rem; font-weight: 500;
  color: var(--ink-200);
  transition: color var(--t) ease;
}
.footer-col a:hover { color: var(--white); }

/* Contact staat als derde kolom in het raster, dus geen eigen strook meer. */
.footer-contact { align-content: start; }
.footer-contact .label { display: block; margin-bottom: .9rem; }
.footer-contact ul { display: grid; gap: .35rem; }
.footer-contact li {
  font-family: var(--font-ui); font-size: .9375rem; font-weight: 500;
  color: var(--ink-200);
  min-height: 36px; display: flex; align-items: center;
}
.footer-contact a:hover { color: var(--white); }

.footer-bottom { margin-top: clamp(3rem, 5vw, 4.5rem); border-top: 1px solid var(--line); }
.footer-bottom-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem;
  font-size: var(--t-small);
  color: var(--ink-400);
}
.footer-legal { display: flex; gap: 2rem; }
.footer-legal a:hover { color: var(--white); }

/* ============================================================
   RESPONSIEF
   ============================================================ */

@media (max-width: 1080px) {
  .about-grid,
  .why-grid { grid-template-columns: 1fr; }
  .why-copy { position: static; }
  .about-media { order: -1; }
  .badge-card { left: 0; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem var(--pad) 1.75rem;
    background: var(--bg);            /* dekkend: de pagina mag er niet doorheen schijnen */
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-nav);
  }
  .nav.is-open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { min-height: 52px; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 1.25rem; }

  .section-head-row { flex-direction: column; align-items: flex-start; }
  .section-head-row > div { max-width: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --header-h: 76px; }
  .brand-mark { width: 60px; height: 60px; }
  .footer-brand .brand-mark { width: 64px; height: 64px; }
  .brand-word { font-size: 1.125rem; }

  .hero-actions .btn { width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.5rem; }

  .trustbar-inner { gap: 1.25rem; }

  .why { flex-direction: column; gap: .9rem; }

  .faq summary { font-size: 1rem; padding: 1.25rem 1.25rem; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   DIENSTENPAGINA'S EN LOCATIEPAGINA'S
   ------------------------------------------------------------
   Zelfde bouwstenen als de homepage; alleen deze onderdelen
   komen er nog bij.
   ============================================================ */

/* ---------- Kruimelpad ---------- */
.breadcrumb { padding-top: 2rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; font-size: 12px; color: var(--ink-400); }
.breadcrumb li + li::before { content: "/"; color: var(--ink-500); }
.breadcrumb a { color: var(--ink-300); transition: color var(--t) ease; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb [aria-current="page"] { color: var(--ink-200); }

/* Kruimelpad binnen de paginakop: geen losse strook erboven, maar op
   dezelfde achtergrond als de hero zelf. Pagina's zonder .page-hero
   (latere case studies en blogartikelen) houden het pad boven de kop,
   met de padding uit de basisregel hierboven. */
.page-hero .breadcrumb { padding-top: 0; margin-bottom: 1.5rem; }

/* ---------- Paginakop ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 6vw, 5.5rem); }
.page-hero .hero-grid,
.page-hero .hero-glow { position: absolute; z-index: 0; }
.page-hero-inner { position: relative; z-index: 2; }
.page-hero h1 { max-width: 18ch; margin-top: 1.5rem; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 700; letter-spacing: -.03em; }
.page-hero .hero-lead { max-width: 60ch; }

/* Losse pluspunten onder de paginakop */
.usp-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.usp-row li {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem 1.15rem;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 600;
  color: var(--ink-100);
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.usp-row li::before { content: "✓"; color: var(--blue); font-size: .8125rem; }

/* ---------- Vinklijst in tekstkolommen ---------- */
.check-list { display: grid; gap: .9rem; margin-top: 1.75rem; }
/* Bewust geen flex op de li: dan zouden de losse tekst en een <strong>
   twee aparte flex-items worden en uit elkaar getrokken worden. */
.check-list li { position: relative; padding-left: 2.2rem; color: var(--ink-300); }
.check-list li::before {
  content: "✓";
  position: absolute; left: 0; top: .28em;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: .6875rem; line-height: 1; color: var(--on-accent);
  background: linear-gradient(140deg, var(--blue), var(--magenta));
  border-radius: 50%;
}
.check-list strong { color: var(--white); font-weight: 600; }

/* ---- PROEF: gekleurde vinkjes ----------------------------------------
   In plaats van dezelfde gradient op elk vinkje wisselen de vinkjes om en
   om: blauw, magenta, blauw, magenta. Dit
   blok is bedoeld om te bekijken; weghalen zet alles terug op de gradient
   uit de regel hierboven. */
.check-list li:nth-child(odd)::before  { background: var(--blue); }
.check-list li:nth-child(even)::before { background: var(--magenta); }
/* ---- einde proef ----------------------------------------------------- */

/* ---------- Pakketten ---------- */
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.25rem, 2.2vw, 1.75rem); align-items: start; }
.package { display: flex; flex-direction: column; padding: clamp(1.75rem, 2.6vw, 2.25rem); }
.package.is-featured { border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.package-tag {
  align-self: flex-start; margin-bottom: 1.25rem;
  padding: .35rem .85rem;
  font-family: var(--font-ui); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-accent); background-image: var(--grad-btn);
  border-radius: var(--r-pill);
}
.package h3 { font-size: 1.375rem; font-weight: 600; }
.package .price {
  display: block; margin-top: 1rem;
  font-family: var(--font-ui); font-size: 2rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--white);
}
.package .price small { display: block; margin-top: .35rem; font-size: var(--t-small); font-weight: 500; color: var(--ink-400); letter-spacing: 0; }
.package .check-list { margin-top: 1.75rem; margin-bottom: 2rem; }
.package .check-list li { font-size: var(--t-small); }
.package .btn { margin-top: auto; }
/* Kleine lettertjes onder de pakketten: levervoorwaarden en meerwerk. */
.pakket-noot {
  /* 93ch in plaats van de gebruikelijke 70: circa 200px breder, zodat de
     noot minder regels kost. Blijft in ch zodat hij meeschaalt als de
     lettergrootte of het lettertype verandert. */
  max-width: 93ch; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  font-size: var(--t-small); line-height: 1.7; color: var(--ink-400);
  text-align: center;
}
.pakket-noot strong { color: var(--ink-100); font-weight: 600; }
/* Een betalingsvoorwaarde hoort niet weg te vallen als voetnoot: iets
   meer contrast en een lijntje erboven om hem los te trekken. */

/* ---------- Regio / plaatsen ---------- */
.region-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.region-grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: .85rem 1.25rem;
  font-family: var(--font-ui); font-size: .9375rem; font-weight: 500;
  color: var(--ink-200);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  transition: color var(--t) ease, border-color var(--t) ease, background-color var(--t) ease;
}
.region-grid a::after { content: "→"; color: var(--ink-500); transition: color var(--t) ease, transform var(--t) ease; }
.region-grid a:hover { color: var(--white); border-color: var(--line-strong); background: var(--card-2); }
.region-grid a:hover::after { color: var(--blue); transform: translateX(3px); }
.region-grid a[aria-current="page"] { color: var(--white); border-color: color-mix(in srgb, var(--blue) 50%, transparent); }

/* ---------- Tekstblok met twee kolommen ---------- */
.prose-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.prose-split h2 { font-size: var(--t-h2); }
.prose-split p + p { margin-top: 1.25rem; }
.prose-split .lead-col p { color: var(--ink-300); }
#missie-visie .lead-col h2 + p { margin-top: 1.5rem; }

/* ---------- Juridische pagina's (privacy, voorwaarden) ---------- */
.legal-prose { max-width: 74ch; }
.legal-prose > * + * { margin-top: 1.25rem; }
.legal-prose h2 {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
  font-weight: 600; letter-spacing: -.02em; color: var(--white);
}
.legal-prose h3 {
  margin-top: 2rem;
  font-family: var(--font-head); font-size: 1.0625rem; font-weight: 600;
  color: var(--ink-100);
}
.legal-prose p, .legal-prose li { color: var(--ink-300); line-height: 1.75; }
.legal-prose a { color: var(--ink-100); text-decoration: underline; text-underline-offset: .2em; }
.legal-prose a:hover { color: var(--blue); }
.legal-prose ul, .legal-prose ol { padding-left: 1.35rem; }
.legal-prose li + li { margin-top: .6rem; }
.legal-prose ul li { list-style: disc; }
.legal-prose ol li { list-style: decimal; }
.legal-prose table {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-small); color: var(--ink-300);
}
.legal-prose .table-scroll { overflow-x: auto; }
.legal-prose th, .legal-prose td {
  padding: .85rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.legal-prose th { font-family: var(--font-ui); font-weight: 600; color: var(--ink-100); white-space: nowrap; }
.legal-prose .legal-meta {
  padding: 1.25rem 1.5rem;
  font-size: var(--t-small); color: var(--ink-400);
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-card);
}

/* ---------- Case studies ---------- */
/* auto-fill in plaats van auto-fit: bij een of twee cases blijven de
   kaarten hun eigen breedte houden in plaats van uit te rekken. */
.work-grid-fill { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* ---------- Projectcarrousel ----------
   Vier kaarten in beeld, de rest schuift ernaast. De track scrollt uit
   zichzelf (touch, trackpad, shift+wiel), dus zonder JavaScript werkt hij
   ook; script.js voegt alleen de pijlknoppen toe. Daarom geen vaste
   hoogte of transform: puur overflow met scroll-snap. */
.work-carousel { position: relative; }
.work-track {
  display: flex;
  gap: 1.15rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* De schuifbalk is overbodig naast de pijlknoppen en zou onder de
     kaarten een streep trekken. Swipen en scrollen blijven werken. */
  scrollbar-width: none;
  /* Alleen verticale ruimte voor de focusring: horizontale padding zou de
     rustpositie van scroll-snap verschuiven, waardoor de vorige-knop aan
     het begin niet uitgeschakeld raakt. */
  padding: 4px 0;
}
.work-track::-webkit-scrollbar { display: none; }
.work-track:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Standaard een kaart in beeld, met een randje van de volgende zodat
   zichtbaar is dat er meer staat. Per breedte komen er kaarten bij. */
.work-track > .work { flex: 0 0 82%; scroll-snap-align: start; }

@media (min-width: 620px)  { .work-track > .work { flex-basis: calc((100% - 1.15rem) / 2); } }
@media (min-width: 900px)  { .work-track > .work { flex-basis: calc((100% - 2.3rem) / 3); } }
@media (min-width: 1150px) { .work-track > .work { flex-basis: calc((100% - 3.45rem) / 4); } }

/* Bij vier naast elkaar is een kaart circa 265px: krapper dan het gewone
   raster, dus de binnenkant schaalt mee. */
@media (min-width: 1150px) {
  .work-track .work-body { padding: 1.3rem 1.4rem 1.5rem; }
  .work-track .work-cat { font-size: .6875rem; letter-spacing: .12em; line-height: 1.4; }
  .work-track .work-body h3 { margin-top: .65rem; font-size: 1.1875rem; line-height: 1.28; }
  .work-track .metric {
    margin-top: .9rem; padding: .5rem .85rem; gap: .45rem;
    font-size: .75rem; line-height: 1.4; align-items: flex-start;
  }
  .work-track .metric .tri { font-size: .65rem; margin-top: .22em; }
  .work-track .work-media { aspect-ratio: 16 / 11; }
}

/* De pijlen staan in de sectiekop naast 'Alle cases', niet over de
   kaarten heen: zo dekken ze nooit een projectbeeld af. */
.section-head-acties { display: flex; align-items: center; gap: .75rem; }
.work-nav { display: flex; gap: .5rem; }
.carousel-knop {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  font-size: 1.125rem; line-height: 1; color: var(--white);
  background: var(--tint);
  border: 1px solid var(--line-strong); border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--t) ease, border-color var(--t) ease, opacity var(--t) ease;
}
.carousel-knop:hover:not([disabled]) { background: var(--card-2); border-color: var(--line-hover); }
.carousel-knop:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.carousel-knop[disabled] { opacity: .3; cursor: default; }
.carousel-knop[hidden] { display: none; }

/* Op een telefoon kun je swipen, maar dat ziet niemand aan de kaarten af.
   De pijlen blijven daarom staan: 'Alle cases' links, bladeren rechts. */
@media (max-width: 720px) {
  .section-head-acties {
    width: 100%;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .carousel-knop { width: 38px; height: 38px; font-size: 1rem; }
}a.work { display: block; color: inherit; }
/* Een echt projectbeeld vult de 4:3-kader van .work-media; object-position
   top houdt de bovenkant van een lange paginaschermafdruk in beeld. */
.work-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
a.work:hover h3 { color: var(--accent); }

/* Kop links, feitenblok rechts - binnen de hero zelf. */
.case-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
/* Kop links, feitenblok rechts. De recensiewidget stond hier eerst onder
   de kop, maar kreeg in die halve kolom te weinig breedte; die staat nu als
   volle balk onder de hero. */
.case-hero-copy { min-width: 0; }
.case-hero .case-facts { align-self: start; }
.case-hero .case-facts { background: rgba(255, 255, 255, .04); backdrop-filter: blur(6px); }

/* Twee tekstblokken naast elkaar (De uitdaging / Onze aanpak). */
.case-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* Kop links, tekst ernaast; de blokken staan onder elkaar. Gebruikt voor
   "De uitdaging" en "Onze aanpak": zo blijft de leesregel kort terwijl de
   koppen als vaste kolom links een rustig raster vormen. */
.case-rows { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.case-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.case-row .section-head { margin-bottom: 0; }
.case-duo > div { min-width: 0; }

/* Loopt over de volle breedte van de container. De blogartikelen houden
   hun eigen leesbreedte via .post-body, die verderop staat. */
.case-prose { max-width: none; }
.case-prose > * + * { margin-top: 1.25rem; }
.case-prose p { color: var(--ink-300); line-height: 1.75; }
.case-prose .check-list { margin-top: 1.5rem; }
.case-prose a { color: var(--blue); text-decoration: underline; text-underline-offset: .2em; }
.case-prose a:hover { color: var(--white); }

/* De resultaten in cijfers op een casepagina */
.case-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
}
.case-stat {
  display: flex; flex-direction: column;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.case-stat dt {
  order: 2; margin-top: .6rem;
  font-family: var(--font-ui); font-size: var(--t-small); font-weight: 600;
  color: var(--ink-100);
}
.case-stat-num {
  order: 1; margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.05;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.case-stat-note {
  order: 3; margin: .3rem 0 0;
  font-size: var(--t-small); color: var(--ink-400);
}
.case-stats-shot {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.case-stats-shot img { display: block; width: 100%; height: auto; }
.case-stats-bron { margin-top: 1rem; font-size: .8125rem; color: var(--ink-500); }

.case-facts {
  display: grid; gap: 1.5rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
}
.case-facts dt {
  font-family: var(--font-ui); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400);
}
.case-facts dd { margin-top: .5rem; color: var(--ink-100); }

/* Voor-en-na van een case study */
/* Carrousel: een paar per scherm, zijwaarts scrollen of vegen om naar het
   volgende te gaan. scroll-snap laat hem netjes op een paar uitkomen. */
.ba-carousel { position: relative; }
.ba-track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  padding-bottom: 1rem;
}
.ba-track::-webkit-scrollbar { height: 6px; }
.ba-track::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
/* start, niet center: anders staat de track bij het laden al 40px
   ingescrold en blijft de vorige-knop actief. */
.ba-track > .ba-pair { flex: 0 0 100%; scroll-snap-align: start; }

/* Pijlknoppen; verborgen zodra er maar een paar in de carrousel zit. */
.ba-nav {
  position: absolute; top: calc(50% - 1.5rem); z-index: 3;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  font-size: 1.5rem; line-height: 1; color: var(--white);
  background: var(--header-bg-solid);
  border: 1px solid var(--line-strong); border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--t) ease, border-color var(--t) ease, opacity var(--t) ease;
}
.ba-nav:hover { background: var(--card-2); border-color: var(--line-hover); }
.ba-nav[disabled] { opacity: .3; cursor: default; }
.ba-nav[hidden] { display: none; }
.ba-prev { left: -12px; }
.ba-next { right: -12px; }

@media (max-width: 720px) {
  .ba-nav { display: none; }
}
/* margin: 0 is nodig: een <figure> krijgt van de browser standaard
   40 px marge links en rechts, en dan loopt het beeld niet door tot
   de rand. */
.ba-pair { display: grid; gap: .9rem; margin: 0; }

/* Voor en na in een beeld: beide liggen op elkaar, de schuif knipt het
   "voor"-beeld weg met clip-path. Zo blijft de foto zelf op ware grootte
   staan in plaats van mee te krimpen met de zichtbare strook. */
.ba-compare {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--placeholder);
  /* Staat binnen de tekstbreedte, dus een volle rand met ronde hoeken,
     gelijk aan .ba-shot-smal. */
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  user-select: none;
  touch-action: pan-y;      /* verticaal scrollen blijft mogelijk */
}

/* Los schermbeeld binnen de tekstbreedte, heel en onbijgesneden. */
.ba-shot-smal {
  overflow: hidden;
  background: var(--placeholder);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.ba-shot-smal img { display: block; width: 100%; height: auto; }

/* Klikbare beelden: openen groot in een overlay (script.js) of, zonder
   JavaScript, gewoon als los beeld. */
.beeld-zoom { display: block; cursor: zoom-in; }
.beeld-zoom img { transition: transform var(--t) ease; }
.beeld-zoom:hover img { transform: scale(1.01); }
.beeld-zoom:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.beeld-overlay {
  width: 100vw; max-width: none; height: 100vh; max-height: none;
  margin: 0; padding: clamp(1rem, 3vw, 2.5rem);
  border: 0; background: transparent;
  cursor: zoom-out;
}
.beeld-overlay[open] { display: grid; place-items: center; }
.beeld-overlay::backdrop { background: rgba(8, 8, 11, .92); }
.beeld-overlay img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
}
.beeld-overlay-sluit {
  position: fixed; top: 1rem; right: 1rem;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  font-size: 1.5rem; line-height: 1;
  color: var(--white);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
}

.ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}
.ba-before {
  position: absolute; inset: 0; z-index: 1;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  z-index: 3;
  width: 2px; margin-left: -1px;
  background: var(--white);
  pointer-events: none;
}
.ba-grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 42px; height: 42px;
  /* Wit, in lijn met de scheidingslijn zelf; de pijltjes donker zodat ze
     leesbaar blijven op zowel een licht als een donker schermbeeld. */
  color: var(--bg);
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
}
.ba-grip svg { width: 20px; height: 20px; }

/* Het bereikveld ligt onzichtbaar over het hele beeld: slepen, ergens
   klikken en de pijltjestoetsen werken daardoor zonder extra code. */
.ba-range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; cursor: ew-resize;
  touch-action: pan-y;
}
.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 46px; height: 46px; opacity: 0; cursor: ew-resize;
}
.ba-range::-moz-range-thumb { width: 46px; height: 46px; opacity: 0; border: 0; cursor: ew-resize; }
.ba-range:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.ba-pair figcaption {
  font-family: var(--font-ui); font-size: var(--t-small); color: var(--ink-400);
}

/* Klantlogo boven het feitenblok */
/* Het logo is een PNG met een witte ondergrond; afgeronde hoeken maken er
   een bewuste tegel van in plaats van een los wit blok op de donkere kaart. */
.case-logo { max-width: 116px; height: auto; margin-bottom: .5rem; border-radius: var(--r-tile); }

@media (max-width: 720px) {
}

/* Trustindex-recensies binnen een case study; zelfde aanpak als de
   balk op de homepage: binnen de kolom houden en niet laten uitrekken. */

.case-quote { padding: clamp(1.75rem, 3vw, 2.75rem); max-width: 80ch; margin-inline: auto; }
.case-quote blockquote { margin-top: 1.25rem; font-size: var(--t-lead); color: var(--ink-200); line-height: 1.7; }
.case-quote figcaption { margin-top: 1.5rem; font-family: var(--font-ui); font-weight: 600; color: var(--white); }
.case-quote figcaption span { font-weight: 400; color: var(--ink-400); }

@media (max-width: 900px) {
  .case-hero { grid-template-columns: 1fr; }
  .case-duo  { grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 3rem); }
  .case-row  { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---------- Interne doorverwijzing naar andere diensten ---------- */
.next-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.next-services a {
  display: block; padding: 1.5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color var(--t) ease, background-color var(--t) ease;
}
.next-services a:hover { border-color: var(--line-strong); background: var(--card-2); }
.next-services strong { display: block; font-family: var(--font-head); font-size: 1.125rem; font-weight: 600; color: var(--white); }
.next-services span { display: block; margin-top: .35rem; font-size: var(--t-small); color: var(--ink-400); }

@media (max-width: 1080px) {
  .prose-split { grid-template-columns: 1fr; }
}

/* ---------- Submenu onder "Diensten" ---------- */
.nav-drop { position: relative; }

.nav-drop-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: 0;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-300);
  background: none; border: 0; cursor: pointer;
  transition: color var(--t) ease;
}
.nav-drop-btn:hover,
.nav-drop:hover .nav-drop-btn,
.nav-drop-btn[aria-expanded="true"] { color: var(--white); }

.nav-chev { width: 14px; height: 14px; transition: transform var(--t) ease; }
.nav-drop-btn[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); left: -1rem;
  z-index: 120;
  display: grid; gap: .1rem;
  min-width: 244px;
  padding: .6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--t) ease, transform var(--t) ease, visibility var(--t) ease;
}
/* Openen op hover én op focus (toetsenbord) én op klik (aanraakscherm) */
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop-btn[aria-expanded="true"] + .nav-drop-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* Onzichtbare brug, zodat de muis van de knop naar het menu kan */
.nav-drop-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}

.nav-drop-menu a {
  display: flex; align-items: center;
  min-height: 42px; padding: .5rem .85rem;
  font-family: var(--font-ui); font-size: .875rem; font-weight: 500;
  color: var(--ink-200);
  border-radius: 10px;
  transition: color var(--t) ease, background-color var(--t) ease;
}
.nav-drop-menu a:hover { color: var(--white); background: var(--tint-hover); }
.nav-drop-menu a[aria-current="page"] { color: var(--white); background: var(--tint); }

/* In het mobiele menu klapt het submenu gewoon mee open in de lijst */
@media (max-width: 900px) {
  .nav-drop { width: 100%; }
  .nav-drop-btn {
    width: 100%; justify-content: space-between;
    min-height: 52px; font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-drop-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none;
    min-width: 0; margin: .25rem 0 .5rem;
    padding: .25rem 0 .25rem .5rem;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .nav-drop-btn[aria-expanded="true"] + .nav-drop-menu { display: grid; }
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu { display: none; }
  .nav-drop-btn[aria-expanded="true"] + .nav-drop-menu { display: grid; }
  .nav-drop-menu a { min-height: 46px; border-bottom: 1px solid var(--line); border-radius: 0; }
}

/* ============================================================
   BLOG
   Overzicht (/blog/), categoriepagina's en artikelen. Alles hangt
   aan de bestaande tokens en aan --accent, zodat een categorie zijn
   kleur meekrijgt via een style-attribuut in de HTML.
   ============================================================ */

/* ---------- Categoriefilter ---------- */
.cat-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.cat-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px; padding: .4rem 1rem;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 600;
  color: var(--ink-200);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: color var(--t) ease, border-color var(--t) ease, background-color var(--t) ease;
}
.cat-pill:hover { color: var(--white); border-color: var(--line-hover); }
/* De huidige categorie kleurt mee met haar eigen accent */
.cat-pill.is-current {
  color: var(--white);
  border-color: color-mix(in srgb, var(--accent, var(--blue)) 55%, transparent);
  background: color-mix(in srgb, var(--accent, var(--blue)) 14%, transparent);
}
.cat-count {
  font-size: .6875rem; font-variant-numeric: tabular-nums;
  color: var(--ink-400);
}
.cat-pill.is-current .cat-count { color: var(--ink-200); }

/* ---------- Filter op /werk/ ----------
   Hergebruikt de pillen van het blogfilter, maar met knoppen in plaats
   van links: er wordt in de pagina gefilterd, niet genavigeerd. */
button.cat-pill { font: inherit; font-family: var(--font-ui); font-size: .8125rem;
                  font-weight: 600; cursor: pointer; }
button.cat-pill:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.werk-filter .cat-row { margin-bottom: .75rem; }
.werk-filter-telling {
  margin: 0 0 clamp(1.5rem, 2.6vw, 2rem);
  font-family: var(--font-ui); font-size: .8125rem; color: var(--ink-400);
}
/* Een verborgen kaart moet echt weg zijn uit het raster, anders laat
   grid er een lege cel voor staan. */
.work-grid > .work[hidden] { display: none; }

/* In de hero van een artikel staat de pil los boven de kop */
.page-hero-article .cat-pill { margin-bottom: 1.25rem; }

/* ---------- Kaartenraster ---------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
  align-items: start;
}
.post {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  color: inherit;
}
.post:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--card-2); }
.post:hover h3 { color: var(--accent); }
.post-cat {
  display: block;
  font-family: var(--font-ui); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.post h3 {
  margin-top: .9rem;
  font-size: 1.375rem; font-weight: 600;
  transition: color var(--t) ease;
}
.post-excerpt { margin-top: .9rem; color: var(--ink-300); font-size: .9375rem; }
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin-top: 1.5rem;
  font-family: var(--font-ui); font-size: .75rem; font-weight: 500;
  color: var(--ink-400);
}
.post-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-500); }

/* Het uitgelichte artikel bovenaan het overzicht: twee kolommen breed
   en een grotere kop, zodat de nieuwste tekst ook echt voorop staat. */
.post-grid-lead .post-lead { grid-column: 1 / -1; }
.post-lead { padding: clamp(1.75rem, 3vw, 2.75rem); }
.post-lead h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); }
.post-lead .post-excerpt { font-size: var(--t-lead); max-width: 60ch; }

/* ---------- Artikelpagina ---------- */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* .post-body erft de alinea-opmaak van .case-prose; hier komen alleen
   de onderdelen bij die een case study niet heeft. */
.post-body { max-width: 68ch; }
.post-body h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.post-body h3 { margin-top: 2rem; font-size: 1.1875rem; color: var(--ink-100); }
.post-body > h2:first-child { margin-top: 0; }
.post-body a { color: var(--blue); text-decoration: underline; text-underline-offset: .2em; }
.post-body a:hover { color: var(--white); }
.post-body code {
  font-family: var(--font-mono); font-size: .875em;
  color: var(--ink-100); background: var(--tint); padding: .1em .4em; border-radius: 6px;
}
.post-body em { color: var(--ink-200); font-style: italic; }

.post-list { display: grid; gap: .7rem; margin-top: 1.25rem; padding-left: 1.35rem; }
.post-list li { color: var(--ink-300); }
.post-list li::marker { color: var(--blue); }
.post-list strong { color: var(--white); font-weight: 600; }

.post-quote {
  margin-top: 1.75rem; padding: 1.25rem 0 1.25rem 1.5rem;
  border-left: 2px solid var(--blue);
}
.post-quote p { font-family: var(--font-head); font-size: var(--t-lead); color: var(--ink-100); line-height: 1.6; }
.post-quote cite {
  display: block; margin-top: .75rem;
  font-family: var(--font-ui); font-size: .8125rem; font-style: normal; color: var(--ink-400);
}

/* Kernpunten onder het artikel — dezelfde kaart als elders, met een
   gradientrand bovenlangs zodat het als afsluiting leest. */
.post-takeaway {
  margin-top: 3rem; padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  position: relative; overflow: hidden;
}
.post-takeaway::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad);
}
.post-takeaway h2 { margin-top: 0; font-size: 1.25rem; }
.post-takeaway .check-list { margin-top: 1.25rem; }

/* ---------- Affiliate-melding ----------
   Staat boven de eerste betaalde link in een artikel. Bewust rustig: het
   is een mededeling, geen waarschuwing, dus geen rood en geen icoon dat
   de lezer laat schrikken. */
.aff-note {
  margin: 2rem 0; padding: 1rem 1.15rem;
  background: var(--tint); border: 1px solid var(--line);
  border-left: 3px solid var(--indigo); border-radius: var(--r-sm, 10px);
}
.aff-note p { margin: 0; font-size: .875rem; color: var(--ink-400); line-height: 1.65; }

/* ---------- Vergelijkingstabel ----------
   Geen schuifbalk. Op een breed scherm is het een gewone tabel die zich
   naar de tekstkolom voegt; onder 780px klapt elke rij om naar een eigen
   kaartje, waarbij de kolomkop uit data-label voor de waarde komt te
   staan. Zo hoeft er op geen enkele schermbreedte horizontaal gescrold
   te worden.

   Een grid-item krijgt standaard min-width:auto en weigert kleiner te
   worden dan zijn inhoud; zonder de regel hieronder duwt een brede tabel
   de hele artikelkolom op. */
.blog-layout > * { min-width: 0; }

.table-wrap { margin: 2.25rem 0; max-width: 100%; }

.table-kop {
  margin-bottom: .7rem;
  font-family: var(--font-ui); font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-400); line-height: 1.5;
}

.post-table {
  width: 100%; max-width: 100%; table-layout: auto;
  border-collapse: separate; border-spacing: 0; font-size: .875rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
}
.post-table thead th {
  padding: .8rem .8rem; text-align: left; vertical-align: bottom;
  font-family: var(--font-ui); font-size: .76rem; font-weight: 600;
  color: var(--white); background: var(--card-2);
  border-bottom: 1px solid var(--line-strong);
  word-break: normal; overflow-wrap: normal;
}
.post-table tbody th,
.post-table tbody td {
  padding: .8rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); color: var(--ink-300); line-height: 1.5;
  word-break: normal; overflow-wrap: normal;
}
.post-table tbody th {
  font-weight: 600; color: var(--ink-100);
  border-right: 1px solid var(--line);
}
/* De eerste kolom draagt de rijlabels en heeft dus meer ruimte nodig dan
   de kolommen met alleen een vinkje of een kruisje. */
.post-table thead th:first-child,
.post-table tbody th:first-child { width: 26%; }
.post-table tbody tr:last-child th,
.post-table tbody tr:last-child td { border-bottom: 0; }
.post-table tbody tr:hover th { background: var(--card-2); }
.post-table tbody tr:hover td { background: var(--tint); }
.post-table a { color: var(--ink-100); text-decoration: underline; text-underline-offset: .2em; }
.post-table a:hover { color: var(--blue); }
.post-table strong { color: var(--white); font-weight: 600; }

/* Ja, nee en deels. Nooit alleen kleur: elk teken heeft een eigen vorm en
   een aria-label, zodat het ook zonder kleurwaarneming te lezen is. */
.post-table .ja    { color: #34D399; font-weight: 700; }
.post-table .nee   { color: var(--ink-500); font-weight: 700; }
.post-table .deels { color: var(--star); font-weight: 700; }

.table-foot {
  margin: .8rem 0 0; font-size: .8rem; color: var(--ink-400); line-height: 1.6;
}
.table-foot em { color: var(--ink-300); font-style: normal; font-weight: 600; }

/* Onder deze grens wordt een tabel met vijf of zeven kolommen onleesbaar
   smal. Elke rij wordt dan een kaartje met label-waardeparen. */
@media (max-width: 780px) {
  .post-table,
  .post-table tbody,
  .post-table tbody tr,
  .post-table tbody th,
  .post-table tbody td { display: block; width: auto; }
  .post-table {
    border: 0; background: none; border-radius: 0;
    table-layout: auto; font-size: .875rem;
  }
  .post-table thead { display: none; }

  .post-table tbody tr {
    margin-bottom: .9rem; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  }
  .post-table tbody tr:last-child { margin-bottom: 0; }
  .post-table tbody tr:hover th,
  .post-table tbody tr:hover td { background: none; }

  /* De 26%-breedte van de labelkolom geldt alleen voor de echte tabel;
     als kaartkop moet hij de volle breedte pakken. */
  .post-table thead th:first-child,
  .post-table tbody th:first-child { width: auto; }
  .post-table tbody th {
    background: var(--card-2); border-right: 0;
    border-bottom: 1px solid var(--line);
    font-size: .9rem; color: var(--white); padding: .7rem .9rem;
  }
  .post-table tbody td {
    display: flex; gap: 1rem; justify-content: space-between; align-items: baseline;
    padding: .6rem .9rem; border-bottom: 1px solid var(--line);
    text-align: right;
  }
  .post-table tbody tr td:last-child { border-bottom: 0; }
  /* De kolomkop komt links te staan, de waarde rechts: twee kolommen in
     plaats van een doorlopende regel. */
  .post-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto; max-width: 55%; text-align: left;
    font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
    color: var(--ink-400);
  }
  /* Een lege kolomkop (eerste kolom heeft er geen) levert een leeg blokje
     op; die dan niet reserveren. */
  .post-table tbody td[data-label=""]::before { display: none; }
}

/* ---------- Zijkolom ---------- */
.post-aside {
  position: sticky; top: calc(var(--header-h) + 16px);
  display: grid; gap: 1rem;
}
.post-toc-card, .post-aside-cta { padding: 1.5rem; }
.post-toc { display: grid; gap: .6rem; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: toc; }
.post-toc li { counter-increment: toc; display: flex; gap: .6rem; }
.post-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-ui); font-size: .6875rem; font-weight: 700;
  color: var(--ink-500); line-height: 1.7; font-variant-numeric: tabular-nums;
}
.post-toc a { font-size: .875rem; color: var(--ink-300); line-height: 1.5; }
.post-toc a:hover { color: var(--white); }

.post-aside-cta h2 { font-size: 1.125rem; }
.post-aside-cta p { margin-top: .6rem; font-size: .875rem; color: var(--ink-300); }
.post-aside-cta .btn { margin-top: 1.25rem; }

@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  /* Op mobiel hoort de inhoudsopgave bovenaan, niet onder het artikel */
  .post-aside { position: static; order: -1; }
  .post-aside-cta { display: none; }
  .post-body { max-width: none; }
}

/* ---------- Klanten en samenwerkingen ---------- */
/* Twee soorten tegels in hetzelfde raster: een tegel met een echt
   klantlogo (.klant-logo, op een licht plaatje omdat klantlogo's vrijwel
   altijd voor een witte achtergrond zijn gemaakt) en een tegel met alleen
   de naam (.klant-naam), voor klanten waarvan wij het logobestand nog niet
   hebben. Zo blijft het raster gevuld en gelijk van maat. */
.klant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(.75rem, 1.4vw, 1rem);
}
.klant {
  display: flex; align-items: center; justify-content: center;
  min-height: 116px;
  text-align: center;
  /* Geen kaartrand en geen binnenmarge: het witte vlak van het logo is
     zelf de kaart, zodat het beeld tot aan de hoeken doorloopt. */
  padding: 0; background: none; border: 0;
}

.klant-logo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: .5rem .75rem;
  background: var(--white);
  border-radius: var(--r-tile);
  /* In rust 20% minder verzadiging, zodat elf logo's samen geen kermis
     worden; bij hover komt de eigen kleur van de klant terug. */
  filter: saturate(.8);
  transition: filter var(--t) ease;
}
.klant:hover .klant-logo { filter: none; }
.klant-logo img { max-width: 100%; max-height: 96px; width: auto; height: auto; object-fit: contain; }

.klant-naam {
  font-family: var(--font-ui); font-size: .9375rem; font-weight: 600;
  line-height: 1.35; color: var(--ink-200);
  transition: color var(--t) ease;
}
.klant-naam span {
  display: block; margin-top: .35rem;
  font-size: .6875rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-500);
}
.klant:hover .klant-naam { color: var(--white); }

@media (max-width: 520px) {
  .klant-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .klant { min-height: 96px; }
}


/* ---------- Zwevende WhatsApp-knop ---------- */
/* WhatsApp-groen staat bewust buiten de merkhierarchie: het is een
   herkenningskleur van het platform, geen accent van ons. Daarom ook de
   enige plek op de site waar deze kleur voorkomt. */
.whatsapp-fab {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 95;   /* onder de sticky header (100) en het uitklapmenu (120) */
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  transition: transform var(--t) ease, box-shadow var(--t) ease;
}
.whatsapp-fab:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.whatsapp-fab:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.whatsapp-fab img { display: block; width: 36px; height: 36px; }

@media (max-width: 640px) {
  .whatsapp-fab { width: 54px; height: 54px; }
  .whatsapp-fab img { width: 32px; height: 32px; }
}