/* ============ Design tokens ============ */
:root{
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal-backdrop: 30;
  --z-modal: 40;
  --z-fab: 45;
  --z-toast: 50;
  --z-tooltip: 60;

  /* Licht, verkoopgericht ontwerp — wit canvas, afgeronde kaarten, blauwe
     merkgradiënt als enige accentkleur. Geen donkere achtergrond-effecten. */
  --page-bg: #ffffff;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: oklch(0.965 0.02 255);
  --border: oklch(0.89 0.025 255);
  --ink: oklch(0.22 0.02 258);
  --muted: oklch(0.46 0.02 258);
  --card-blur: none;

  /* 60-30-10: zachte ijsblauwe tint als secundaire laag (30%) — afwisselend
     met wit (60%) per sectie, zie .bg-tint hieronder. */
  --tint-bg: #EDF3FE;
  --tint-border: oklch(0.85 0.035 255);

  /* Donkerblauw als anker (onderdeel van de 30%-laag): offerte-blok, footer,
     en op de homepage de "waarom wij"-sectie. */
  --navy-1: #0f1b3d;
  --navy-2: #142a5c;
  --navy-3: #0b3a66;

  --hero-bg: #ffffff;
  --hero-bg-2: oklch(0.965 0.012 255);
  --hero-ink: oklch(0.22 0.02 258);
  --hero-muted: oklch(0.46 0.02 258);
  --hero-border: oklch(0.90 0.014 258);

  /* Merkblauw — de gradiënt die overal terugkomt: logo, koppen, knoppen.
     --site-accent/--site-accent-2 zijn de enige twee kleuren die "Website zelf
     verbouwen" → Kleuren aanpast (via een <style>:root{...}</style>-override die
     na dit bestand geladen wordt) — de rest van de schaal hieronder wordt er met
     color-mix() automatisch van afgeleid, dus die hoeft nooit los aangepast te worden. */
  --site-accent: #2E6BFF;
  --site-accent-2: #00C2FF;

  --aurora-1: var(--site-accent);
  --aurora-2: var(--site-accent-2);

  --accent-900: color-mix(in oklch, var(--site-accent) 65%, black);
  --accent-700: color-mix(in oklch, var(--site-accent) 85%, black);
  --accent-600: var(--site-accent);
  --accent-400: color-mix(in oklch, var(--site-accent) 78%, white);
  --accent-200: color-mix(in oklch, var(--site-accent) 40%, white);
  --accent-glow: color-mix(in oklch, var(--site-accent) 30%, transparent);
  /* Tekstveilige variant van het accent — voldoet aan contrastregels op wit */
  --accent-ink: var(--accent-700);
  --accent-ink-hover: var(--accent-900);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;

  --shadow-s: 0 1px 2px oklch(0.10 0.02 258 / 0.05), 0 1px 1px oklch(0.10 0.02 258 / 0.04);
  --shadow-m: 0 12px 32px oklch(0.10 0.02 258 / 0.08), 0 2px 8px oklch(0.10 0.02 258 / 0.05);
  --shadow-l: 0 24px 64px oklch(0.10 0.02 258 / 0.13), 0 4px 16px oklch(0.10 0.02 258 / 0.06);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --container: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Unbounded", "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============ Reset ============ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

::selection{ background: var(--accent-600); color: #fff; }
::-moz-selection{ background: var(--accent-600); color: #fff; }

/* Custom scrollbar — desktop/webkit + Firefox */
html{ scrollbar-width: thin; scrollbar-color: var(--accent-600) var(--page-bg); }
::-webkit-scrollbar{ width: 11px; }
::-webkit-scrollbar-track{ background: var(--page-bg); }
::-webkit-scrollbar-thumb{
  background: var(--accent-600); border-radius: 999px;
  border: 3px solid var(--page-bg); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{ background: var(--accent-400); background-clip: padding-box; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }
h1, h2, h3, h4{ margin: 0; font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
p{ margin: 0; text-wrap: pretty; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
section{ position: relative; }
:focus-visible{ outline: 2px solid var(--accent-600); outline-offset: 3px; border-radius: 4px; }

.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.prose{ max-width: 62ch; }

.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link{
  position: absolute; left: 1rem; top: -3rem;
  background: var(--accent-700); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: var(--radius-s); z-index: var(--z-toast);
  transition: top 0.2s var(--ease-out-quart);
}
.skip-link:focus{ top: 1rem; }

/* ============ Hero-gloed ============ */
/* Eén zachte, statische blauwe gloed rechtsboven in de hero — geen aurora-
   wolken, geen scroll-reactief puntjesveld. Puur CSS, geen canvas/JS. */
.hero-glow{
  position: absolute; top: -12%; right: -8%; z-index: 0; pointer-events: none;
  width: clamp(360px, 42vw, 680px); height: clamp(360px, 42vw, 680px);
  background: radial-gradient(circle at 60% 40%, color-mix(in oklab, var(--aurora-1) 20%, transparent), transparent 70%);
  filter: blur(40px);
}
.hero > .container{ position: relative; z-index: 1; }

/* ============ Buttons ============ */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 1.05rem 2.1rem;
  border-radius: 999px;
  font-weight: 600; font-size: 1.02rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), background 0.3s ease, border-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
  position: relative; overflow: hidden;
}
/* Klik-ripple: main.js zet deze span met --ripple-x/--ripple-y/--ripple-d op het klikpunt. */
.btn-ripple{
  position: absolute; left: 0; top: 0;
  width: var(--ripple-d, 100%); height: var(--ripple-d, 100%);
  transform: translate(-50%, -50%) scale(0);
  left: var(--ripple-x, 50%); top: var(--ripple-y, 50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
  pointer-events: none;
  animation: btn-ripple 0.6s var(--ease-out-quart);
}
@keyframes btn-ripple{
  from{ transform: translate(-50%, -50%) scale(0); opacity: 1; }
  to{ transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .btn-ripple{ display: none; }
}
.btn-primary{
  background: linear-gradient(120deg, var(--accent-700), var(--accent-600));
  color: #fff;
  box-shadow: 0 10px 28px oklch(0.42 0.19 255 / 0.38);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 46px oklch(0.50 0.205 255 / 0.5), 0 0 0 7px oklch(0.50 0.205 255 / 0.14);
  background: linear-gradient(120deg, var(--accent-600), var(--accent-400));
}
.btn-ghost-light{
  background: transparent; color: var(--ink); border-color: var(--border);
}
.btn-ghost-light:hover{ transform: translateY(-2px); border-color: var(--accent-600); color: var(--accent-ink); background: var(--surface-2); }

.section-link{
  position: relative; display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 2rem; font-weight: 600; font-size: 0.98rem; color: var(--accent-ink);
}
.section-link svg{ width: 16px; height: 16px; transition: transform 0.25s var(--ease-out-quart); }
.section-link::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; border-radius: 2px;
  background: linear-gradient(120deg, var(--accent-700), var(--accent-400));
  transition: right 0.35s var(--ease-out-expo);
}
.section-link:hover{ color: var(--accent-ink-hover); }
.section-link:hover::after{ right: 0; }
.section-link:hover svg{ transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){ .section-link::after{ transition: none; } }

/* ============ Nav ============ */
.nav{
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: oklch(1 0 0 / 0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.nav-row{ display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
/* Wordmark logo — "FE" in gradient Unbounded 700, "-webdesign" in Unbounded 400 */
.logo-word{
  position: relative; display: inline-flex; align-items: baseline;
  font-family: "Unbounded", var(--font-heading); font-size: 1.05rem; line-height: 1;
  padding-bottom: 0.4rem;
}
.logo-fe{
  font-weight: 700;
  background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo-suffix{ font-weight: 400; color: var(--hero-ink); }
.logo-glow{
  position: absolute; left: 2px; right: 2px; bottom: -1px; height: 10px;
  background: radial-gradient(ellipse at center, oklch(0.60 0.20 255 / 0.6), transparent 72%);
  opacity: 0.4; filter: blur(2px); transform: scaleX(0.65);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.logo-word:hover .logo-glow{ opacity: 0.9; transform: scaleX(1); }
.logo-glow-static{ opacity: 0.7; transform: scaleX(1); }
.nav-links{ display: flex; align-items: center; gap: 2.1rem; }
.nav-links a{
  color: var(--muted); font-size: 0.94rem; font-weight: 500;
  transition: color 0.2s ease;
  position: relative;
}
.nav-links a:hover{ color: var(--hero-ink); }
.nav-links a[aria-current="page"]{ color: var(--hero-ink); }
.nav-links a[aria-current="page"]::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--accent-400); border-radius: 2px;
}
/* Onderstreping die bij hover van links naar rechts groeit — desktop met muis only;
   de actieve pagina behoudt zijn eigen vaste ::after-markering hierboven. */
@media (hover: hover) and (pointer: fine){
  .nav-links a:not([aria-current="page"])::before{
    content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0%;
    background: linear-gradient(90deg, var(--aurora-1), var(--aurora-2)); border-radius: 2px;
    transition: width 0.3s var(--ease-out-quart);
  }
  .nav-links a:not([aria-current="page"]):hover::before{ width: 100%; }
  @media (prefers-reduced-motion: reduce){
    .nav-links a:not([aria-current="page"])::before{ transition: none; }
  }
}
.nav-cta{ display: flex; align-items: center; gap: 1rem; }
.nav-cta .btn{ padding: 0.7rem 1.3rem; font-size: 0.9rem; }

.menu-toggle{
  display: none; background: none; border: 1px solid var(--hero-border); border-radius: var(--radius-s);
  width: 42px; height: 42px; align-items: center; justify-content: center; color: var(--hero-ink); cursor: pointer;
}
.menu-toggle svg{ width: 20px; height: 20px; }

.site-theme-toggle{
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: var(--radius-s); border: 1px solid var(--hero-border);
  background: none; color: var(--hero-ink); cursor: pointer; margin-right: 0.6rem;
}
.site-theme-toggle svg{ width: 19px; height: 19px; }
.site-theme-sun{ display: none; }
.site-theme-moon{ display: block; }
body.page-home[data-theme="light"] .site-theme-sun{ display: block; }
body.page-home[data-theme="light"] .site-theme-moon{ display: none; }

/* Licht/donker-item in het uitklapmenu: op desktop bestaat dit niet (de losse knop in de
   balk blijft daar staan), alleen zichtbaar zodra de balk zelf inklapt tot hamburger. */
.nav-theme-item{ display: none; }

@media (max-width: 860px){
  .nav-links{
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: flex-start;
    background: var(--hero-bg); padding: 1.5rem var(--pad) 2rem; gap: 1.1rem;
    border-bottom: 1px solid var(--hero-border);
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform 0.3s var(--ease-out-quart), opacity 0.3s var(--ease-out-quart), visibility 0.3s;
  }
  .nav-links.open{ transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-cta{ display: none; }
  .nav-links a{ font-size: 1.05rem; }
  .nav-links a[aria-current="page"]::after{ display: none; }
  .menu-toggle{ display: inline-flex; }
  /* Balk zelf oogt drukker met 3 losse elementen (logo, thema-knop, hamburger) — de
     thema-knop verhuist daarom bovenin het uitklapmenu, niet los in de balk. */
  .site-theme-toggle{ display: none; }
  .nav-theme-item{
    display: flex; width: 100%; padding-bottom: 1.1rem; margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--hero-border);
  }
  .nav-theme-item .site-theme-toggle{
    display: inline-flex; align-items: center; gap: 0.65rem;
    width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none;
    color: var(--hero-ink); font-family: inherit; font-size: 1.05rem; font-weight: 500;
  }
  .nav-theme-item .site-theme-toggle svg{ width: 20px; height: 20px; }
}

/* ============ Hero ============ */
/* Zacht ijsblauw verloop i.p.v. vlak wit — de hero is de eerste "tint"-laag
   in het 60-30-10-ritme (wit-tint-wit-tint), niet nog een wit vlak. */
.hero{
  color: var(--hero-ink);
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2.75rem, 6vw, 4.5rem);
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--tint-bg) 0%, #ffffff 55%);
}
.hero.is-compact{
  padding-block: clamp(3.5rem, 9vw, 6rem) clamp(3.5rem, 9vw, 6rem);
}
/* .hero-inner/.hero-grid delen altijd dezelfde breedte/positie als .container
   (geen eigen max-width) — anders verspringt de linkerlijn van de hero t.o.v.
   de secties eronder. Leesbaarheid van de tekst wordt geregeld op .hero .lede
   en .hero-copy, niet op deze buitenste wrapper. */
.hero-inner{ max-width: var(--container); }
.hero.is-compact .hero-inner{ max-width: var(--container); }

/* Hero split layout (home): copy left, browser+phone mockup right */
.hero-grid{
  display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-copy{ max-width: 640px; }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-copy{ max-width: none; }
}

/* Drie vinkjes onder de intro-regel */
.hero-checks{ display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.25rem; }
.hero-checks li{ display: flex; align-items: center; gap: 0.7rem; font-size: 0.98rem; font-weight: 500; color: var(--ink); }
.hero-checks svg{
  flex-shrink: 0; width: 22px; height: 22px; padding: 3px; border-radius: 50%;
  background: linear-gradient(135deg, var(--aurora-1), var(--aurora-2)); color: #fff; stroke-width: 3;
}

/* Reviewbadge: sterren + gemiddelde score, verborgen zolang er geen reviews zijn */
.review-badge{ display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 1.5rem; }
.review-badge .stars{ display: inline-flex; gap: 2px; }
.review-badge .stars svg{ width: 18px; height: 18px; }
.review-badge-text{ font-size: 0.92rem; color: var(--muted); }
.review-badge-text strong{ color: var(--ink); font-weight: 700; }

.stars{ display: inline-flex; gap: 2px; color: var(--border); }
.stars svg{ width: 16px; height: 16px; }
.stars svg.is-filled{ color: #FFB020; fill: #FFB020; }

/* ============ Hero-mockup: getekende voorbeeldsite in browserkader + telefoon ============ */
.hero-visual{ position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }
.hero-mockup{ position: relative; width: min(680px, 100%); padding: 20px 40px 40px 0; }
.hero-mockup::before{
  content: ""; position: absolute; inset: -10% -5% -5% 5%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 45%, color-mix(in oklab, var(--aurora-1) 22%, transparent), transparent 72%);
  filter: blur(30px);
}
.mock-browser{
  position: relative; width: 100%; border-radius: var(--radius-l); overflow: hidden;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-l);
  animation: mockFloat 9s ease-in-out infinite;
}
@keyframes mockFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
.mock-browser-chrome{
  display: flex; align-items: center; gap: 7px; padding: 0.8rem 1rem;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.mock-browser-chrome span{ width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.mock-browser-chrome .mock-url{
  margin-left: 10px; font-size: 0.76rem; color: var(--muted); background: #fff;
  border: 1px solid var(--border); padding: 0.28rem 0.75rem; border-radius: 999px;
}
.mock-browser-body{ padding: 1.7rem 1.9rem 2.1rem; position: relative; perspective: 700px; }
/* Typ-effect dat omklapt naar de mini-site: main.js typt de coderegels en zet
   .is-flipped zodra hij klaar is. Reduced-motion verbergt dit blok volledig hieronder. */
.mock-code-overlay{
  position: absolute; inset: 0; z-index: 5;
  background: #161a2b; border-radius: inherit;
  padding: 1.4rem 1.5rem; overflow: hidden;
  transform-origin: top center; backface-visibility: hidden;
  transition: transform 0.7s var(--ease-out-quart), opacity 0.5s ease;
}
.mock-code-overlay.is-flipped{ transform: rotateX(-100deg); opacity: 0; pointer-events: none; }
.mock-code-text{
  margin: 0; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.74rem; line-height: 1.65; color: #9fd8ff; white-space: pre-wrap; word-break: break-word;
  display: inline;
}
.mock-code-cursor{
  display: inline-block; width: 6px; height: 0.9em; margin-left: 1px;
  background: var(--aurora-2); vertical-align: text-bottom;
  animation: mock-cursor-blink 0.9s steps(1) infinite;
}
@keyframes mock-cursor-blink{ 50%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){
  .mock-code-overlay{ display: none; }
}
.mock-nav{ display: flex; align-items: center; gap: 0.7rem; padding-bottom: 1.1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--border); }
.mock-logo{ font-family: "Unbounded", var(--font-heading); font-weight: 700; font-size: 1rem; background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mock-nav-links{ margin-left: auto; display: flex; gap: 1rem; font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.mock-nav-cta{ font-size: 0.7rem; font-weight: 700; color: #fff; padding: 0.35rem 0.85rem; border-radius: 999px; background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2)); flex-shrink: 0; }
.mock-hero-kicker{ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.6rem; }
.mock-hero-title{ font-family: "Unbounded", var(--font-heading); font-size: 1.5rem; line-height: 1.16; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 0.6rem; }
.mock-hero-title span{ background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mock-hero-lede{ font-size: 0.86rem; color: var(--muted); max-width: 85%; margin: 0 0 1.2rem; }
.mock-hero-btn{ display: inline-block; font-size: 0.78rem; font-weight: 700; color: #fff; padding: 0.6rem 1.3rem; border-radius: 999px; background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2)); box-shadow: 0 8px 18px oklch(0.50 0.205 255 / 0.3); }
.mock-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 1.6rem; }
.mock-card{ padding: 0.85rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.mock-card i{ display: block; width: 18px; height: 18px; border-radius: 5px; margin-bottom: 0.5rem; background: linear-gradient(135deg, var(--aurora-1), var(--aurora-2)); }
.mock-card span{ display: block; font-size: 0.66rem; font-weight: 600; color: var(--ink); }

.mock-phone{
  position: absolute; right: 0; bottom: 0; width: min(196px, 34%); aspect-ratio: 9 / 19.5; z-index: 2;
  border-radius: 34px; background: #fff; border: 9px solid #14171c;
  box-shadow: var(--shadow-l), 0 0 0 1px rgba(0,0,0,0.06); overflow: hidden;
  animation: mockFloat 9s ease-in-out infinite; animation-delay: 0.4s;
}
/* Dynamic-island-achtig detail, los boven het scherm zwevend i.p.v. een volle balk —
   maakt in één oogopslag duidelijk dat dit een telefoon is, geen willekeurig kaartje. */
.mock-phone-island{
  position: absolute; top: 9px; left: 50%; translate: -50% 0; z-index: 3;
  width: 42px; height: 15px; border-radius: 999px; background: #14171c;
}
.mock-phone-screen{ position: relative; height: 100%; padding: 1.9rem 0.75rem 0.85rem; display: flex; flex-direction: column; }
.mock-phone-nav{ display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.6rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.mock-phone-logo{ font-family: "Unbounded", var(--font-heading); font-weight: 700; font-size: 0.68rem; background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mock-phone-burger{ display: flex; flex-direction: column; gap: 2.5px; width: 15px; }
.mock-phone-burger i{ display: block; height: 1.6px; border-radius: 1px; background: var(--ink); }
.mock-phone-kicker{ font-size: 0.5rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.3rem; }
.mock-phone-title{ font-family: "Unbounded", var(--font-heading); font-size: 0.82rem; line-height: 1.18; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 0.35rem; }
.mock-phone-title span{ background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mock-phone-lede{ font-size: 0.52rem; line-height: 1.4; color: var(--muted); margin: 0 0 0.6rem; }
.mock-phone-btn{ align-self: flex-start; font-size: 0.52rem; font-weight: 700; color: #fff; padding: 0.4rem 0.7rem; border-radius: 999px; background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2)); box-shadow: 0 6px 14px oklch(0.50 0.205 255 / 0.3); margin-bottom: 0.75rem; }
.mock-phone-cards{ display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; }
.mock-phone-card{ display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.55rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.mock-phone-card i{ display: block; flex-shrink: 0; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, var(--aurora-1), var(--aurora-2)); }
.mock-phone-card span{ display: block; font-size: 0.52rem; font-weight: 600; color: var(--ink); }

@media (max-width: 900px){
  .hero-mockup{ width: min(480px, 100%); padding: 14px 28px 28px 0; }
}
@media (max-width: 640px){
  .hero-mockup{ padding: 0; }
  .mock-phone{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .mock-browser, .mock-phone{ animation: none; }
}

/* Word-by-word hero reveal (on load, not scroll) */
[data-word-reveal] .word{
  display: inline-block; opacity: 0; transform: translateY(0.35em); filter: blur(4px);
  transition: opacity 0.6s var(--ease-out-quart), transform 0.6s var(--ease-out-quart), filter 0.6s var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 45ms);
}
[data-word-reveal].is-revealed .word{ opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce){
  [data-word-reveal] .word{ opacity: 1; transform: none; filter: none; transition: none; }
}

/* Gradient accent text — brand blue, used on the last word of section headings */
.text-gradient{
  background: linear-gradient(100deg, var(--aurora-1), var(--aurora-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Eyebrow label above section headings */
.eyebrow{
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--accent-ink); font-size: 0.86rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.eyebrow::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-600); flex-shrink: 0;
  box-shadow: 0 0 0 4px oklch(0.50 0.205 255 / 0.16);
}
.hero-kicker{
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--accent-ink); font-size: 0.92rem; font-weight: 600; margin-bottom: 1.4rem;
}
.hero-kicker .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent-600); box-shadow: 0 0 0 4px oklch(0.64 0.185 255 / 0.18); }
.hero h1{
  font-size: clamp(2.5rem, 4.8vw + 0.9rem, 4.85rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--hero-ink);
}
.hero.is-compact h1{ font-size: clamp(2.1rem, 3.6vw + 0.9rem, 3.4rem); }
.hero .lede{
  margin-top: 1.6rem; font-size: clamp(1.05rem, 1vw + 0.9rem, 1.28rem);
  color: var(--ink); max-width: 56ch; font-weight: 500;
}
.hero-actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* ============ Section shell ============ */
/* One dark canvas, no zone transitions — every section just continues it. */
/* Sectie-ritme: elke sectie draagt ~de helft van de gewenste sectie-tot-
   sectie-afstand (streefdoel ±96-128px totaal, dus ±48-64px per kant). */
.section{ padding-block: clamp(3rem, 5vw, 4rem); position: relative; }
.section-tight{ padding-block: clamp(2.25rem, 4vw, 3rem); position: relative; }

/* De sectie die direct op de hero volgt telt niet ook nog de volledige
   sectie-top-padding op bij de hero's eigen bottom-padding — dat gaf een
   halve-scherm-hoogte leeg gat. Alleen de top-padding wordt verkleind; de
   afstand naar de sectie daarna blijft normaal. */
.hero + .section, .hero + .section-tight{ padding-top: clamp(1.5rem, 4vw, 2.5rem); }

/* Glans-koppen: a light sweep periodically crosses big Unbounded headings.
   Base gradient stops sit at the ink color so the heading reads as plain
   text at rest; the bright band is what animates through. */
.section-head h2, .about-text h2, .cta-band h2, .panel-feature-body h2{
  background-image: linear-gradient(100deg,
    var(--hero-ink) 42%, #eef5ff 47%, #ffffff 50%, #eef5ff 53%, var(--hero-ink) 58%);
  background-size: 240% 100%;
  background-position: 180% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: headingShine 8s ease-in-out infinite;
}
.about-text h2{ animation-delay: 1.2s; animation-duration: 9s; }
.cta-band h2{ animation-delay: 2.4s; animation-duration: 7.2s; }
.panel-feature-body h2{ animation-delay: 3.6s; animation-duration: 8.6s; }
@keyframes headingShine{
  0%, 60%{ background-position: 180% 0; }
  85%{ background-position: -60% 0; }
  100%{ background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce){
  .section-head h2, .about-text h2, .cta-band h2, .panel-feature-body h2{
    animation: none; background-image: none; -webkit-background-clip: initial;
    background-clip: initial; -webkit-text-fill-color: initial; color: var(--hero-ink);
  }
}

.section-head{ max-width: 680px; margin-bottom: clamp(3rem, 6vw, 4.75rem); }
.section-head h2{ font-family: "Unbounded", var(--font-heading); font-size: clamp(2.25rem, 3vw + 1.2rem, 3.25rem); letter-spacing: -0.025em; }
.section-head p{ margin-top: 1rem; color: var(--muted); font-size: 1.08rem; }

/* ============ 60-30-10: secundaire (tint) en donkere (navy) sectielagen ============ */
.bg-tint{ background: var(--tint-bg); }
.bg-tint .service-card, .bg-tint .why-card, .bg-tint .review-card, .bg-tint .step, .bg-tint .project-card{
  border-color: var(--tint-border);
}

.bg-navy{
  background: linear-gradient(135deg, var(--navy-1), var(--navy-2) 55%, var(--navy-3));
  color: oklch(0.85 0.02 255);
}
.bg-navy .eyebrow{ color: #7fd4ff; }
.bg-navy .eyebrow::before{ background: #7fd4ff; box-shadow: 0 0 0 4px oklch(0.7 0.15 220 / 0.25); }
.bg-navy .section-head h2{
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial; color: #fff; animation: none;
}
.bg-navy .section-head p{ color: oklch(0.82 0.02 255); }
.bg-navy .why-card{
  background: rgba(255,255,255,0.06); background-image: none;
  border: 1px solid rgba(255,255,255,0.14); box-shadow: none;
}
.bg-navy .why-card:hover{ background: rgba(255,255,255,0.1); }
.bg-navy .why-card h3{ color: #fff; }
.bg-navy .why-card p{ color: oklch(0.82 0.02 255); }

/* ============ Samenwerkingen (home) ============ */
.trust-label{
  text-align: center; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--muted); margin-bottom: 1.75rem;
}
.partner-grid{
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: clamp(2.25rem, 5vw, 3.75rem);
}
.partner-logo{
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 0.5rem;
}
.partner-logo img{
  height: 84px; width: auto; max-width: 220px; object-fit: contain;
  transition: transform 0.3s var(--ease-out-quart), filter 0.3s ease;
}
.partner-logo:hover img, .partner-logo:focus-visible img{
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 16px oklch(0.55 0.19 255 / 0.25));
}
@media (prefers-reduced-motion: reduce){
  .partner-logo img{ transition: none; }
}

/* "Website zelf verbouwen": zie toelichting bij .project-card hierboven — zelfde principe. */
.partner-logo{ order: var(--order-d, 0); }
@media (max-width: 760px){
  .partner-logo{ order: var(--order-m, var(--order-d, 0)); }
}
@media (min-width: 761px){ .partner-logo[data-hide-desktop="1"]{ display: none; } }
@media (max-width: 760px){ .partner-logo[data-hide-mobiel="1"]{ display: none; } }

/* Vertrouwens-quote onder de partnerlogo's — één instelbare klantquote (beheer/samenwerkingen.php) */
.trust-quote{
  max-width: 640px; margin: 3rem auto 0; text-align: center;
}
.trust-quote .quote{
  font-family: "Unbounded", var(--font-heading); font-weight: 700;
  font-size: clamp(1.1rem, 1vw + 1rem, 1.4rem); letter-spacing: -0.01em; line-height: 1.45;
  color: var(--ink); margin-bottom: 1.25rem;
}
.trust-quote .review-person{ justify-content: center; text-align: left; }

/* ============ Diensten — teaser grid (home) ============ */
/* Drie gelijke witte kaarten met strakke SVG-lijniconen — geen emoji's. */
.services-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.service-card{
  background: #fff; border-radius: var(--radius-l);
  padding: 2.25rem 2rem; position: relative;
  border: 1px solid var(--border); box-shadow: var(--shadow-s);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo), border-color 0.3s ease;
}
.service-card:hover{
  transform: translateY(-6px); box-shadow: var(--shadow-m); border-color: transparent;
}
.service-icon{
  width: 52px; height: 52px; border-radius: var(--radius-s);
  background: var(--tint-bg); color: var(--accent-ink);
  border: 1px solid var(--tint-border);
  display: grid; place-items: center; margin-bottom: 1.5rem;
}
.service-icon svg{ width: 24px; height: 24px; stroke-width: 1.7; }
.service-card h3{ font-size: 1.18rem; letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.service-card p{ color: var(--muted); font-size: 0.98rem; }

/* "Website zelf verbouwen": zie toelichting bij .project-card in portfolio.php — zelfde principe. */
.service-card{ order: var(--order-d, 0); }
@media (max-width: 760px){
  .service-card{ order: var(--order-m, var(--order-d, 0)); }
}
@media (min-width: 761px){ .service-card[data-hide-desktop="1"]{ display: none; } }
@media (max-width: 760px){ .service-card[data-hide-mobiel="1"]{ display: none; } }

/* ============ Diensten — genummerd raster met dunne lijntjes, muis-volgende gloed
   (zelfde .cap-patroon als het "Vier disciplines"-referentiebestand; hergebruikt de
   bestaande --mx/--my-koppeling en radial-gradient-formule van .service-card/.why-card). ============ */
.caps{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.cap{
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: clamp(30px, 3.6vw, 52px); position: relative; overflow: hidden;
  transition: background 0.5s var(--ease-out-quart);
}
.cap__n{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--ember); }
.cap__t{
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.3rem);
  letter-spacing: -0.02em; margin: 16px 0 14px; color: var(--ink);
}
.cap__d{ color: var(--muted); max-width: 42ch; position: relative; }
.cap__tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cap__tags li{
  list-style: none; font-family: var(--font-mono); font-size: 0.7rem; color: var(--bronze);
  border: 1px solid var(--border); border-radius: 2px; padding: 5px 11px;
}
@media (max-width: 760px){
  .caps{ grid-template-columns: 1fr; }
}

/* ---- Korte/lange tekstvariant: op mobiel scant iemand een pagina in een paar seconden,
   dus tonen we daar de korte, scanbare versie i.p.v. de volledige lopende zin — desktop
   blijft ongewijzigd de volledige tekst tonen. Beide staan in de HTML (allebei apart
   bewerkbaar via "Site bewerken"), CSS bepaalt welke zichtbaar is. ---- */
.copy-short{ display: none; }
@media (max-width: 760px){
  .copy-full{ display: none; }
  .copy-short{ display: block; }
}

/* ============ Portfolio — 2x2 grid, grotere kaarten ============ */
.portfolio-grid{
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 640px){ .portfolio-grid{ grid-template-columns: repeat(2, 1fr); } }

/* "Website zelf verbouwen": desktop- en mobiel-volgorde staan allebei tegelijk in de HTML
   (als --order-d / --order-m), de browser kiest zelf welke geldt op basis van schermbreedte —
   werkt dus ook als je het browserscherm smaller/breder trekt, zonder user-agent-detectie. */
.project-card{ order: var(--order-d, 0); }
@media (max-width: 760px){
  .project-card{ order: var(--order-m, var(--order-d, 0)); }
}
@media (min-width: 761px){ .project-card[data-hide-desktop="1"]{ display: none; } }
@media (max-width: 760px){ .project-card[data-hide-mobiel="1"]{ display: none; } }

.project-card{
  background: var(--surface); border-radius: var(--radius-l); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-s);
  display: flex; flex-direction: column;
  transition: transform 0.35s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart);
}
.project-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-m); }

.project-preview-wrap{ display: flex; flex-direction: column; }
.project-preview{
  position: relative; display: block; width: 100%; height: clamp(220px, 26vw, 320px); overflow: hidden;
  border: 0; padding: 0; margin: 0; cursor: zoom-in; background: var(--surface-2);
}
.project-preview img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 0.5s var(--ease-out-quart);
}
.project-card:hover .project-preview img{ transform: scale(1.04); }
@media (prefers-reduced-motion: reduce){
  .project-card:hover .project-preview img{ transform: none; }
}

/* Apparaat-wissel: Desktop/Tablet/Mobiel-knopjes boven de preview, .device-frame krimpt
   naar een ingekaderd tablet-/telefoonformaat en de bijbehorende .device-img's kruisvervagen. */
.device-toggle{ display: flex; gap: 0.4rem; padding: 0.6rem 0.75rem 0.55rem; background: var(--surface); }
.device-btn{
  font-size: 0.72rem; font-weight: 600; color: var(--muted); font-family: inherit;
  padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); background: #fff;
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.device-btn:hover{ border-color: var(--accent-600); color: var(--accent-ink); }
.device-btn.is-active{ background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2)); color: #fff; border-color: transparent; }
.device-frame{
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: 0; border: 0 solid #14171c; overflow: hidden; margin: 0 auto;
  transition: width 0.4s var(--ease-out-quart), height 0.4s var(--ease-out-quart), border-radius 0.4s var(--ease-out-quart), border-width 0.4s var(--ease-out-quart);
}
.device-frame.is-tablet{ width: 64%; height: 88%; border-radius: 16px; border-width: 7px; }
.device-frame.is-mobiel{ width: 34%; height: 92%; border-radius: 26px; border-width: 7px; }
.device-img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity 0.4s ease, transform 0.5s var(--ease-out-quart);
}
.device-img.is-active{ opacity: 1; }
.project-card:hover .device-img.is-active{ transform: scale(1.04); }
@media (prefers-reduced-motion: reduce){
  .device-frame, .device-img, .device-btn{ transition: none; }
  .project-card:hover .device-img.is-active{ transform: none; }
}

.project-body{ padding: 1.35rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.project-tags{ display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tag{
  font-size: 0.75rem; font-weight: 600; padding: 0.28rem 0.65rem; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.tag-featured{ background: var(--accent-700); color: #fff; border-color: transparent; }
.tag-panel{ background: var(--accent-200); color: var(--accent-900); border-color: transparent; }
.project-body h3{
  font-family: "Unbounded", var(--font-heading); font-size: 1.3rem; letter-spacing: -0.01em;
}
.project-body p{
  color: var(--muted); font-size: 0.98rem; margin: 0;
}
.project-link{
  position: relative; margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--accent-ink); font-weight: 600; font-size: 0.9rem; padding-top: 0.3rem; width: fit-content;
}
.project-link svg{ width: 15px; height: 15px; transition: transform 0.25s var(--ease-out-quart); }
.project-link::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(120deg, var(--accent-700), var(--accent-400));
  transition: right 0.35s var(--ease-out-expo);
}
.project-link:hover svg{ transform: translate(3px, -3px); }
.project-link:hover{ color: var(--accent-ink-hover); }
.project-link:hover::after{ right: 0; }
@media (prefers-reduced-motion: reduce){ .project-link::after{ transition: none; } }

/* Lightbox: klik op een portfolio-thumbnail voor een groter voorbeeld */
.lightbox{
  border: 0; border-radius: var(--radius-l); padding: 0; background: transparent;
  max-width: min(92vw, 1100px); max-height: 88vh; z-index: var(--z-modal);
}
.lightbox::backdrop{ background: oklch(0.12 0.02 258 / 0.75); backdrop-filter: blur(4px); }
.lightbox img{ display: block; width: 100%; height: auto; max-height: 88vh; object-fit: contain; }
.lightbox-close{
  position: absolute; top: 0.6rem; right: 0.6rem; width: 40px; height: 40px; border-radius: 50%;
  background: oklch(0.12 0.02 258 / 0.55); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease-out-quart);
}
.lightbox-close:hover{ background: oklch(0.12 0.02 258 / 0.8); }
.lightbox-close svg{ width: 18px; height: 18px; }

/* ============ Maatwerk-sectie (home) ============ */
.maatwerk{ max-width: 760px; }
.maatwerk h2{ font-size: clamp(2rem, 2.6vw + 1.1rem, 2.9rem); letter-spacing: -0.025em; margin-bottom: 1.25rem; }
.maatwerk p{ color: var(--muted); font-size: 1.08rem; max-width: 68ch; }
.maatwerk p + p{ margin-top: 1rem; }
.maatwerk-quote{
  margin-top: 2rem; font-family: "Unbounded", var(--font-heading); font-weight: 700;
  font-size: clamp(1.3rem, 1.6vw + 1rem, 1.85rem); letter-spacing: -0.02em; line-height: 1.3;
  background: linear-gradient(100deg, var(--aurora-1), var(--aurora-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============ Waarom wij (home) — 4 kaarten, dun gradient-randje boven ============ */
.why-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.why-card{
  background: #fff; border-radius: var(--radius-l); padding: 2rem 1.85rem;
  border: 1px solid var(--border); border-top: 3px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(120deg, var(--aurora-1), var(--aurora-2));
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: var(--shadow-s);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.why-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-m); }
.why-card h3{ font-size: 1.12rem; letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.why-card p{ color: var(--muted); font-size: 0.97rem; }

/* ============ Compact portfolio teaser (homepage) ============ */
.portfolio-teaser{
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius-l); border: 1px solid var(--border); background: var(--bg);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  box-shadow: var(--shadow-l);
  position: relative; z-index: 2;
  margin-top: clamp(-4.5rem, -6vw, -3rem);
}
.portfolio-teaser p{ font-size: 1.08rem; font-weight: 500; color: var(--ink); max-width: 46ch; }
@media (max-width: 640px){ .portfolio-teaser{ justify-content: center; text-align: center; } }

/* ============ Werkwijze (diensten.php) ============ */
.section-werkwijze{ color: var(--hero-ink); }
.section-werkwijze .section-head p{ color: var(--muted); }

.steps{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem 1.75rem; }
.step{
  position: relative; overflow: hidden; padding: 1.6rem 1.5rem 1.5rem;
  border-radius: var(--radius-l);
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-s);
}
.step-number-bg{
  position: absolute; top: -0.6rem; right: 0.4rem; z-index: 0;
  font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 4.75rem; line-height: 1;
  background: linear-gradient(160deg, oklch(0.94 0.015 255), oklch(0.72 0.15 255 / 0.55));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none; user-select: none;
}
.step-num, .step h3, .step p{ position: relative; z-index: 1; }
.step-num{
  font-size: 0.95rem; font-weight: 700; color: var(--accent-ink);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--surface-2);
  display: grid; place-items: center; margin-bottom: 1.1rem;
}
.step h3{ font-size: 1.12rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; color: var(--ink); }
.step p{ color: var(--muted); font-size: 0.96rem; }
.steps-note{
  margin-top: 2.25rem; text-align: center;
  color: var(--muted); font-size: 0.92rem;
  position: relative; z-index: 1;
}

/* ============ Over ons ============ */
.about{ display: grid; grid-template-columns: 300px 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 760px){ .about{ grid-template-columns: 1fr; } }

/* "Site bewerken" fase 7: foto/tekst van kant wisselen — desktop- en mobiel-variant staan
   allebei tegelijk in de HTML (data-fedesign-variant-d/-m), de browser kiest zelf via deze
   media queries welke geldt, zelfde principe als --order-d/--order-m elders op de site. */
@media (min-width: 761px){
  .about[data-fedesign-variant-d="omgekeerd"]{ grid-template-columns: 1fr 300px; }
  .about[data-fedesign-variant-d="omgekeerd"] > .about-photo{ order: 2; }
  .about[data-fedesign-variant-d="omgekeerd"] > .about-text{ order: 1; }
}
@media (max-width: 760px){
  .about[data-fedesign-variant-m="omgekeerd"] > .about-photo{ order: 2; }
  .about[data-fedesign-variant-m="omgekeerd"] > .about-text{ order: 1; }
}

/* "Site bewerken" fase 8/9: vrij sleepsysteem — gedeelde basis voor ELKE sectie die
   fedesign_freepos_container_class()/fedesign_freepos_attrs() gebruikt (niet alleen .about).
   Per sectie blijft alleen het vorm-specifieke deel nodig: display:block, een vaste hoogte
   (bewuste, simpele keuze — geen automatische hoogteberekening met absolute elementen) en
   voor elk kind een standaard-breedte/positie die de normale lay-out benadert. */
@media (min-width: 761px){
  .fedesign-freepos-zone.has-freepos-d{ position: relative; }
  /* Matcht op de AANWEZIGHEID van het data-attribuut (niet een aparte klasse) — dat staat
     server-side altijd op elk door dit systeem beheerd element, ook voor gewone bezoekers
     die de "Site bewerken"-JS nooit laden. */
  .fedesign-freepos-zone.has-freepos-d > [data-freepos-d]{ position: absolute; }
  .fedesign-freepos-zone.has-freepos-d > [data-freepos-d="1"]{ left: var(--fp-x-d); top: var(--fp-y-d); }
}
@media (max-width: 760px){
  .fedesign-freepos-zone.has-freepos-m{ position: relative; }
  .fedesign-freepos-zone.has-freepos-m > [data-freepos-m]{ position: absolute; }
  .fedesign-freepos-zone.has-freepos-m > [data-freepos-m="1"]{ left: var(--fp-x-m); top: var(--fp-y-m); }
}

/* "Site bewerken" fase 8 (proefstuk): "Over mij"-sectie (foto+tekst) — zodra minstens 1
   element in deze sectie een eigen positie heeft voor dit apparaat, schakelt de hele sectie
   over van de grid-layout naar losse, vrij geplaatste blokken. */
@media (min-width: 761px){
  .about.has-freepos-d{ display: block; position: relative; min-height: 700px; }
  /* Zodra de sectie in vrije-positiemodus staat, worden BEIDE elementen absoluut
     gepositioneerd — ook het element dat zelf nog niet versleept is. Anders zou dat element
     terugvallen op normale block-flow (leeg gestroomd vanaf de bovenkant, want de andere is
     al uit de flow gehaald) i.p.v. op zijn oorspronkelijke plek te blijven staan, wat zowel
     verrassende sprongen als een onbetrouwbare botsingscontrole zou geven. Links/boven hier
     zijn bewust dezelfde waarden als de normale grid-indeling (foto links, tekst ernaast). */
  .about.has-freepos-d > .about-photo{ position: absolute; width: 220px; margin: 0; left: 0; top: 0; }
  .about.has-freepos-d > .about-text{ position: absolute; width: min(420px, calc(100% - 260px)); margin: 0; left: 260px; top: 0; }
  .about.has-freepos-d > [data-freepos-d="1"]{ left: var(--fp-x-d); top: var(--fp-y-d); }
}
@media (max-width: 760px){
  .about.has-freepos-m{ display: block; position: relative; min-height: 640px; }
  .about.has-freepos-m > .about-photo{ position: absolute; width: 180px; margin: 0; left: 0; top: 0; }
  .about.has-freepos-m > .about-text{ position: absolute; width: calc(100% - 2rem); margin: 0; left: 0; top: 210px; }
  .about.has-freepos-m > [data-freepos-m="1"]{ position: absolute; left: var(--fp-x-m); top: var(--fp-y-m); }
}

/* "Site bewerken" fase 9: hero (kicker/H1/lede) — gedeeld door alle "is-compact"-hero's
   (portfolio/diensten/over-ons/contact/privacybeleid). Niet op index.php: die hero heeft de
   woord-voor-woord-animatie op de titel, die zou breken zodra de titel losraakt uit de
   normale flow. */
@media (min-width: 761px){
  .hero-inner.has-freepos-d{ min-height: 340px; }
  .hero-inner.has-freepos-d > .hero-kicker{ position: absolute; left: 0; top: 0; margin: 0; }
  .hero-inner.has-freepos-d > h1{ position: absolute; left: 0; top: 50px; width: min(680px, 100%); margin: 0; }
  .hero-inner.has-freepos-d > .lede{ position: absolute; left: 0; top: 220px; width: min(560px, 100%); margin: 0; }
}
@media (max-width: 760px){
  .hero-inner.has-freepos-m{ min-height: 420px; }
  .hero-inner.has-freepos-m > .hero-kicker{ position: absolute; left: 0; top: 0; margin: 0; }
  .hero-inner.has-freepos-m > h1{ position: absolute; left: 0; top: 40px; width: 100%; margin: 0; }
  .hero-inner.has-freepos-m > .lede{ position: absolute; left: 0; top: 190px; width: 100%; margin: 0; }
}

/* "Site bewerken" fase 9: Maatwerk-sectie (kop/tekst/quote) op de homepage. */
@media (min-width: 761px){
  .maatwerk.has-freepos-d{ min-height: 420px; }
  .maatwerk.has-freepos-d > h2{ position: absolute; left: 0; top: 0; width: 100%; margin: 0; }
  .maatwerk.has-freepos-d > p:not(.maatwerk-quote){ position: absolute; left: 0; top: 70px; width: 100%; margin: 0; }
  .maatwerk.has-freepos-d > .maatwerk-quote{ position: absolute; left: 0; top: 280px; width: 100%; margin: 0; }
}
@media (max-width: 760px){
  .maatwerk.has-freepos-m{ min-height: 480px; }
  .maatwerk.has-freepos-m > h2{ position: absolute; left: 0; top: 0; width: 100%; margin: 0; }
  .maatwerk.has-freepos-m > p:not(.maatwerk-quote){ position: absolute; left: 0; top: 70px; width: 100%; margin: 0; }
  .maatwerk.has-freepos-m > .maatwerk-quote{ position: absolute; left: 0; top: 320px; width: 100%; margin: 0; }
}

/* "Site bewerken" fase 9: Waarom-wij — 4 kaarten tegelijk vrij versleepbaar (elke kaart als
   geheel, niet de kop/tekst er los in). Standaardposities benaderen de oorspronkelijke
   4-op-een-rij-grid; op mobiel een verticale stapel (net als de normale responsive grid). */
@media (min-width: 761px){
  .why-grid.has-freepos-d{ display: block; position: relative; min-height: 260px; }
  .why-grid.has-freepos-d > .why-card{ position: absolute; width: 260px; margin: 0; top: 0; }
  .why-grid.has-freepos-d > .why-card:nth-child(1){ left: 0; }
  .why-grid.has-freepos-d > .why-card:nth-child(2){ left: 280px; }
  .why-grid.has-freepos-d > .why-card:nth-child(3){ left: 560px; }
  .why-grid.has-freepos-d > .why-card:nth-child(4){ left: 840px; }
}
@media (max-width: 760px){
  .why-grid.has-freepos-m{ display: block; position: relative; min-height: 900px; }
  .why-grid.has-freepos-m > .why-card{ position: absolute; width: calc(100% - 2rem); margin: 0; left: 0; }
  .why-grid.has-freepos-m > .why-card:nth-child(1){ top: 0; }
  .why-grid.has-freepos-m > .why-card:nth-child(2){ top: 220px; }
  .why-grid.has-freepos-m > .why-card:nth-child(3){ top: 440px; }
  .why-grid.has-freepos-m > .why-card:nth-child(4){ top: 660px; }
}

/* "Site bewerken" fase 9: CTA-band (kop+tekst | knop) — gedeeld door portfolio/diensten/
   over-ons.php, elke pagina heeft zijn eigen positie (los geregistreerd per page_slug). */
@media (min-width: 761px){
  .cta-band.has-freepos-d{ display: block; position: relative; min-height: 160px; }
  .cta-band.has-freepos-d > div{ position: absolute; width: min(560px, 100%); margin: 0; left: 0; top: 0; }
  .cta-band.has-freepos-d > a{ position: absolute; left: 620px; top: 40px; margin: 0; }
}
@media (max-width: 760px){
  .cta-band.has-freepos-m{ display: block; position: relative; min-height: 260px; }
  .cta-band.has-freepos-m > div{ position: absolute; width: 100%; margin: 0; left: 0; top: 0; }
  .cta-band.has-freepos-m > a{ position: absolute; left: 0; top: 180px; margin: 0; }
}

/* "Site bewerken" fase 9: werkwijze-stappen (diensten.php) — 4 stappen tegelijk vrij
   versleepbaar, zelfde principe als de Waarom-wij-kaarten. */
@media (min-width: 761px){
  .steps.has-freepos-d{ display: block; position: relative; min-height: 260px; }
  .steps.has-freepos-d > .step{ position: absolute; width: 260px; margin: 0; top: 0; }
  .steps.has-freepos-d > .step:nth-child(1){ left: 0; }
  .steps.has-freepos-d > .step:nth-child(2){ left: 280px; }
  .steps.has-freepos-d > .step:nth-child(3){ left: 560px; }
  .steps.has-freepos-d > .step:nth-child(4){ left: 840px; }
}
@media (max-width: 760px){
  .steps.has-freepos-m{ display: block; position: relative; min-height: 900px; }
  .steps.has-freepos-m > .step{ position: absolute; width: calc(100% - 2rem); margin: 0; left: 0; }
  .steps.has-freepos-m > .step:nth-child(1){ top: 0; }
  .steps.has-freepos-m > .step:nth-child(2){ top: 220px; }
  .steps.has-freepos-m > .step:nth-child(3){ top: 440px; }
  .steps.has-freepos-m > .step:nth-child(4){ top: 660px; }
}

/* "Site bewerken" fase 9/10: offerte-aanvraag.php + index.php gebruiken hetzelfde
   .offerte-band-copy-blok — alleen de linkerkolom-tekst (kop/lede/note), nooit het formulier
   ernaast. offerte-aanvraag.php gebruikt een h1, index.php's eigen offerte-CTA-blok een h2. */
@media (min-width: 761px){
  .offerte-band-copy.has-freepos-d{ min-height: 370px; position: relative; }
  .offerte-band-copy.has-freepos-d > h1, .offerte-band-copy.has-freepos-d > h2{ position: absolute; left: 0; top: 0; width: 100%; margin: 0; }
  .offerte-band-copy.has-freepos-d > p:not(.offerte-band-note){ position: absolute; left: 0; top: 140px; width: 100%; margin: 0; }
  .offerte-band-copy.has-freepos-d > .offerte-band-note{ position: absolute; left: 0; top: 210px; width: 100%; margin: 0; }
}
@media (max-width: 760px){
  .offerte-band-copy.has-freepos-m{ min-height: 420px; position: relative; }
  .offerte-band-copy.has-freepos-m > h1, .offerte-band-copy.has-freepos-m > h2{ position: absolute; left: 0; top: 0; width: 100%; margin: 0; }
  .offerte-band-copy.has-freepos-m > p:not(.offerte-band-note){ position: absolute; left: 0; top: 110px; width: 100%; margin: 0; }
  .offerte-band-copy.has-freepos-m > .offerte-band-note{ position: absolute; left: 0; top: 220px; width: 100%; margin: 0; }
}

/* "Site bewerken" fase 10: privacybeleid.php — elke kop+inhoud-sectie is als geheel vrij
   versleepbaar (niet de kop los van zijn tekst/lijst). Dit werkt ook voor secties met
   dynamische adresgegevens of mailto-/externe links: het hele blok verplaatst als starre
   eenheid, de inhoud zelf verandert niet (anders dan het potlood-tekstsysteem, waar dat wél
   een probleem zou zijn). Hoogtes per sectie zijn een schatting op basis van de werkelijke
   tekstlengte — bewust niet uniform, anders zou de kortste sectie een enorme lege ruimte
   krijgen of de langste juist overlappen. */
@media (min-width: 761px){
  .legal-content.has-freepos-d{ display: block; position: relative; min-height: 3050px; }
  .legal-content.has-freepos-d > .legal-section{ position: absolute; left: 0; width: 100%; margin: 0; }
  /* :not([data-freepos-d="1"]) is nodig zodat deze geschatte standaardposities nooit een
     echt opgeslagen sleeppositie overschrijven — zonder deze uitsluiting winnen ze door
     gelijke specificiteit + latere bronvolgorde t.o.v. de generieke var(--fp-y-d)-regel. */
  .legal-content.has-freepos-d > .legal-section-1:not([data-freepos-d="1"]){ top: 0; }
  .legal-content.has-freepos-d > .legal-section-2:not([data-freepos-d="1"]){ top: 200px; }
  .legal-content.has-freepos-d > .legal-section-3:not([data-freepos-d="1"]){ top: 568px; }
  .legal-content.has-freepos-d > .legal-section-4:not([data-freepos-d="1"]){ top: 780px; }
  .legal-content.has-freepos-d > .legal-section-5:not([data-freepos-d="1"]){ top: 1148px; }
  .legal-content.has-freepos-d > .legal-section-6:not([data-freepos-d="1"]){ top: 1388px; }
  .legal-content.has-freepos-d > .legal-section-7:not([data-freepos-d="1"]){ top: 1857px; }
  .legal-content.has-freepos-d > .legal-section-8:not([data-freepos-d="1"]){ top: 2153px; }
  .legal-content.has-freepos-d > .legal-section-9:not([data-freepos-d="1"]){ top: 2652px; }
  .legal-content.has-freepos-d > .legal-section-10:not([data-freepos-d="1"]){ top: 2864px; }
}
@media (max-width: 760px){
  .legal-content.has-freepos-m{ display: block; position: relative; min-height: 4000px; }
  .legal-content.has-freepos-m > .legal-section{ position: absolute; left: 0; width: 100%; margin: 0; }
  .legal-content.has-freepos-m > .legal-section-1:not([data-freepos-m="1"]){ top: 0; }
  .legal-content.has-freepos-m > .legal-section-2:not([data-freepos-m="1"]){ top: 260px; }
  .legal-content.has-freepos-m > .legal-section-3:not([data-freepos-m="1"]){ top: 716px; }
  .legal-content.has-freepos-m > .legal-section-4:not([data-freepos-m="1"]){ top: 984px; }
  .legal-content.has-freepos-m > .legal-section-5:not([data-freepos-m="1"]){ top: 1520px; }
  .legal-content.has-freepos-m > .legal-section-6:not([data-freepos-m="1"]){ top: 1816px; }
  .legal-content.has-freepos-m > .legal-section-7:not([data-freepos-m="1"]){ top: 2420px; }
  .legal-content.has-freepos-m > .legal-section-8:not([data-freepos-m="1"]){ top: 2800px; }
  .legal-content.has-freepos-m > .legal-section-9:not([data-freepos-m="1"]){ top: 3495px; }
  .legal-content.has-freepos-m > .legal-section-10:not([data-freepos-m="1"]){ top: 3791px; }
}

/* "Site bewerken" fase 9: contact-info-kaarten (e-mail, telefoon) op contact.php — elke kaart
   als geheel vrij versleepbaar. */
@media (min-width: 761px){
  .contact-info.has-freepos-d{ display: block; position: relative; min-height: 260px; }
  .contact-info.has-freepos-d > .contact-info-card{ position: absolute; width: 100%; margin: 0; left: 0; }
  .contact-info.has-freepos-d > .contact-info-card:nth-child(1){ top: 0; }
  .contact-info.has-freepos-d > .contact-info-card:nth-child(2){ top: 130px; }
}
@media (max-width: 760px){
  .contact-info.has-freepos-m{ display: block; position: relative; min-height: 260px; }
  .contact-info.has-freepos-m > .contact-info-card{ position: absolute; width: 100%; margin: 0; left: 0; }
  .contact-info.has-freepos-m > .contact-info-card:nth-child(1){ top: 0; }
  .contact-info.has-freepos-m > .contact-info-card:nth-child(2){ top: 130px; }
}
.about-photo{
  aspect-ratio: 4/5; border-radius: var(--radius-l);
  background: var(--tint-bg);
  border: 1px solid var(--tint-border);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.about-photo img{ position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.about-photo--logo{
  position: relative; z-index: 1; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; padding: 12%;
}
/* Geen fotolijst-vlak achter het logo — alleen relevant zolang er nog geen
   echte foto is ingesteld (zie fedesign_about_photo_block in site-footer.php).
   Hogere specificiteit dan body.page-home .about-photo hieronder, met opzet. */
.about-photo:has(.about-photo--logo),
body.page-home .about-photo:has(.about-photo--logo){ background: none; border: none; }
.about-photo--logo img{ width: 100%; height: auto; object-fit: contain; }
.about-text h2{ font-family: "Unbounded", var(--font-heading); font-size: clamp(1.9rem, 2.6vw + 1rem, 2.6rem); letter-spacing: -0.025em; margin-bottom: 1.3rem; }
.about-text p{ color: var(--muted); font-size: 1.06rem; max-width: 58ch; }
.about-text p + p{ margin-top: 1rem; }
.about-text strong{ color: var(--ink); }

/* ============ Reviews ============ */
.reviews-summary{ display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.reviews-summary .stars svg{ width: 20px; height: 20px; }
.reviews-summary-text{ font-size: 0.98rem; color: var(--muted); }
.reviews-summary-text strong{ color: var(--ink); font-weight: 700; }

.reviews-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.review-card{
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: 2rem 1.9rem; box-shadow: var(--shadow-s);
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), border-color 0.3s ease;
}
.review-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-m); border-color: transparent; }
.review-card .stars{ margin-bottom: 0.9rem; }
.review-card p.quote{ font-size: 1.03rem; color: var(--ink); margin-bottom: 1.5rem; }
.quote-toggle{
  background: none; border: 0; padding: 0; margin-left: 0.35rem; cursor: pointer;
  color: var(--accent-ink); font-weight: 600; font-size: 0.92rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.quote-toggle:hover{ color: var(--accent-ink-hover); }
.review-person{ display: flex; align-items: center; gap: 0.8rem; }
.review-avatar{
  width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; color: var(--accent-ink);
}
.review-person strong{ display: block; font-size: 0.94rem; }
.review-person span{ display: block; font-size: 0.85rem; color: var(--muted); }

/* Rustige slider — meer dan 3 reviews */
.reviews-slider-wrap{ position: relative; }
.reviews-slider{
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem; scrollbar-width: none;
}
.reviews-slider::-webkit-scrollbar{ display: none; }
.reviews-slider .review-card{ flex: 0 0 min(340px, 85vw); scroll-snap-align: start; }
.reviews-slider-nav{ display: flex; gap: 0.6rem; margin-top: 1.25rem; justify-content: center; }
.reviews-slider-nav button{
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: #fff;
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.reviews-slider-nav button:hover{ border-color: var(--accent-600); color: var(--accent-ink); transform: translateY(-2px); }
.reviews-slider-nav svg{ width: 18px; height: 18px; }
.reviews-actions{ text-align: center; margin-top: 2rem; }

/* Review-plaatsen: toggleformulier */
.review-cta{ text-align: center; margin-top: 2.5rem; }
.review-form-card{
  max-width: 560px; margin: 2rem auto 0; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: clamp(1.75rem, 4vw, 2.5rem); box-shadow: var(--shadow-s);
  text-align: left;
}
.review-form-card h3{ font-size: 1.2rem; margin-bottom: 1.4rem; }
/* Sterren staan in de DOM in omgekeerde volgorde (5..1) en worden met
   row-reverse weer 1->5 getoond — zo kan ~ zowel bij hover als bij :checked
   ook alle voorgaande (lager genummerde) sterren meekleuren. */
.star-input{ display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.4rem; margin-bottom: 1.25rem; }
.star-input label{ position: relative; cursor: pointer; display: inline-flex; }
.star-input label input{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.star-input label svg{ width: 28px; height: 28px; color: var(--border); transition: color 0.15s ease; }
.star-input:not(:hover) input:checked ~ label svg,
.star-input label:hover svg,
.star-input label:hover ~ label svg{ color: #FFB020; }
.review-form-note{ font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; }
.review-thanks{
  max-width: 480px; margin: 2rem auto 0; text-align: center; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-l); padding: 1.75rem; color: var(--ink); font-weight: 500;
}

/* ============ CTA band ============ */
/* No longer a boxed card — it sits directly in the dark zone, so it reads as
   one continuous space with the section around it. */
.cta-band{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem;
}
.cta-band h2{ font-family: "Unbounded", var(--font-heading); font-size: clamp(1.8rem, 2.6vw + 1.2rem, 2.6rem); letter-spacing: -0.02em; }
.cta-band p{ color: var(--hero-muted); margin-top: 0.6rem; max-width: 46ch; font-size: 1.05rem; }

/* ============ Offerte-blok (home) — donkerblauw gradient-kader ============ */
.offerte-band{
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--radius-l); overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--navy-1), var(--navy-2) 55%, var(--navy-3));
  padding: clamp(2.25rem, 4vw, 3.5rem);
}
.offerte-band::before{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 100% 0%, oklch(0.62 0.19 230 / 0.45), transparent 70%);
}
.offerte-band > *{ position: relative; z-index: 1; }
.offerte-band-copy h1, .offerte-band-copy h2{ font-size: clamp(1.75rem, 2.2vw + 1.1rem, 2.5rem); letter-spacing: -0.02em; color: #fff; }
.offerte-band-copy p{ color: oklch(0.88 0.02 255); font-size: 1.05rem; margin-top: 0.9rem; max-width: 42ch; }
.offerte-band-copy .offerte-band-note{ font-size: 0.92rem; color: oklch(0.78 0.02 255); margin-top: 1.1rem; max-width: 40ch; }
.offerte-band-form{ background: #fff; border-radius: var(--radius-m); padding: clamp(1.5rem, 3vw, 2rem); }
@media (max-width: 800px){
  .offerte-band{ grid-template-columns: 1fr; }
}

/* Bedankt-staat na het versturen van het offerteformulier — leeft binnen de bestaande witte
   .offerte-band-form-kaart, dus geen eigen achtergrond/schaduw (dat zou een dubbele kaart geven). */
.offerte-thanks{ text-align: center; padding: 0.5rem 0; }
.offerte-thanks-check{ display: inline-flex; margin-bottom: 1.1rem; }
.offerte-thanks-check svg{ width: 64px; height: 64px; }
.offerte-thanks-check-circle{
  stroke: var(--aurora-1); stroke-width: 3;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: offerte-thanks-circle 0.5s var(--ease-out-quart) forwards;
}
.offerte-thanks-check-mark{
  stroke: var(--aurora-1); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: offerte-thanks-mark 0.35s var(--ease-out-quart) 0.45s forwards;
}
@keyframes offerte-thanks-circle{ to{ stroke-dashoffset: 0; } }
@keyframes offerte-thanks-mark{ to{ stroke-dashoffset: 0; } }
.offerte-thanks h2{ font-family: "Unbounded", var(--font-heading); font-size: clamp(1.4rem, 1.6vw + 1rem, 1.7rem); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 0.5rem; }
.offerte-thanks-sub{ color: var(--muted); font-size: 1rem; margin: 0 0 1.3rem; }
.offerte-thanks-next{ font-size: 0.9rem; color: var(--muted); background: var(--surface-2); border-radius: var(--radius-s); padding: 0.85rem 1rem; margin: 0; }
@media (prefers-reduced-motion: reduce){
  .offerte-thanks-check-circle, .offerte-thanks-check-mark{ animation: none; stroke-dashoffset: 0; }
}

/* ============ FAQ-accordeon (homepage) ============ */
.faq-list{ max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 0.85rem; }
.faq-item{
  background: #fff; border: 1px solid var(--tint-border); border-radius: var(--radius-m);
  overflow: hidden;
}
.faq-item h3{ margin: 0; }
/* "Website zelf verbouwen": zie toelichting bij .project-card in portfolio.php — zelfde principe. */
.faq-item{ order: var(--order-d, 0); }
@media (max-width: 760px){
  .faq-item{ order: var(--order-m, var(--order-d, 0)); }
}
@media (min-width: 761px){ .faq-item[data-hide-desktop="1"]{ display: none; } }
@media (max-width: 760px){ .faq-item[data-hide-mobiel="1"]{ display: none; } }

/* "Site bewerken": hele homepage-secties herordenen/verbergen — #main wordt een kolom-
   flexcontainer (visueel identiek aan gewone blokstapeling zolang niemand een order zet),
   zodat losse <section>-elementen met CSS order() verplaatst kunnen worden, precies zoals
   bij portfolio-/diensten-/FAQ-items hierboven. */
#main{ display: flex; flex-direction: column; }
#main > section{ order: var(--order-d, 0); }
@media (max-width: 760px){
  #main > section{ order: var(--order-m, var(--order-d, 0)); }
}
@media (min-width: 761px){ #main > section[data-hide-desktop="1"]{ display: none; } }
@media (max-width: 760px){ #main > section[data-hide-mobiel="1"]{ display: none; } }
.faq-question{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.4rem; background: none; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 1.02rem; font-weight: 600; color: var(--ink);
}
.faq-chevron{ width: 20px; height: 20px; flex-shrink: 0; color: var(--accent-ink); transition: transform 0.3s var(--ease-out-quart); }
.faq-item.is-open .faq-chevron{ transform: rotate(180deg); }
.faq-answer{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease-out-quart); }
.faq-item.is-open .faq-answer{ grid-template-rows: 1fr; }
.faq-answer-inner{ overflow: hidden; }
.faq-answer-inner p{ margin: 0; padding: 0 1.4rem 1.15rem; color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce){
  .faq-chevron, .faq-answer{ transition: none; }
}

/* ============ Contact ============ */
.contact-grid{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }
.field{ margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.field label{ font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.field input, .field textarea{
  font: inherit; padding: 0.85rem 1rem; border-radius: var(--radius-s);
  border: 1.5px solid var(--border); background: var(--bg); color: var(--ink);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color: var(--hero-muted); opacity: 0.75; }
.field input:focus, .field textarea:focus{
  outline: none; border-color: var(--accent-600); box-shadow: 0 0 0 4px var(--accent-200);
}
.field textarea{ resize: vertical; min-height: 130px; }
.form-note{ font-size: 0.85rem; color: var(--muted); margin-top: 0.75rem; }
.form-success{
  display: none; align-items: flex-start; gap: 0.8rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-m);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  padding: 1.3rem 1.4rem; margin-top: 1.4rem; font-size: 0.96rem;
}
.form-success.visible{ display: flex; }
.form-success svg{ flex-shrink: 0; width: 22px; height: 22px; color: var(--accent-ink); margin-top: 2px; }

.contact-info{ display: flex; flex-direction: column; gap: 1.1rem; }
.contact-info-card{
  background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(var(--border), var(--border));
  background-origin: border-box; background-clip: padding-box, border-box;
  border: 1.5px solid transparent; border-radius: var(--radius-l);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), background-image 0.35s ease;
  padding: 1.6rem 1.7rem; display: flex; gap: 1rem; align-items: flex-start;
}
.contact-info-card:hover{
  transform: translateY(-5px); box-shadow: 0 20px 40px oklch(0.50 0.205 255 / 0.18);
  background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(120deg, var(--aurora-1), var(--aurora-2));
}
.contact-info-icon{
  width: 42px; height: 42px; border-radius: var(--radius-s);
  background: var(--tint-bg); color: var(--accent-ink);
  border: 1px solid var(--tint-border);
  display: grid; place-items: center; flex-shrink: 0;
}
.contact-info-icon svg{ width: 20px; height: 20px; }
.contact-info-card h2{ font-size: 1rem; margin-bottom: 0.3rem; }
.contact-info-card p, .contact-info-card a{ font-size: 0.95rem; color: var(--muted); }
.contact-info-card a:hover{ color: var(--accent-ink); }

/* ============ Footer — donkerblauw anker (samen met het offerte-blok) ============ */
.footer{
  background: linear-gradient(165deg, var(--navy-1), var(--navy-3));
  color: oklch(0.78 0.02 255); padding-block: 3.5rem 2.5rem;
}
.footer-top{
  display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer .logo-suffix{ color: #fff; }
.footer-brand .logo-word{ margin-bottom: 1.1rem; }
.footer-brand p{ max-width: 32ch; font-size: 0.92rem; }
.footer-legal{ max-width: 32ch; font-size: 0.82rem; margin-top: 1rem; line-height: 1.6; }
.footer-links{ display: flex; flex-wrap: wrap; gap: clamp(2.5rem, 6vw, 5rem); }
.footer-col-title{ color: #fff; font-size: 0.85rem; margin: 0 0 1rem; font-weight: 700; letter-spacing: 0.01em; }
.footer-col ul{ display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a{ font-size: 0.92rem; transition: color 0.2s ease; }
.footer-col a:hover{ color: #fff; }
.footer-bottom{
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding-top: 1.8rem; font-size: 0.85rem;
}

/* ============ Legal / prose content ============ */
.legal-content{ max-width: 72ch; margin-inline: auto; }
.legal-updated{ color: var(--muted); font-size: 0.88rem; margin-bottom: 2.5rem; }
.legal-content h2{
  font-family: "Unbounded", var(--font-heading); font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink);
  margin-top: 2.5rem; margin-bottom: 0.9rem;
}
/* :first-of-type werkt hier niet: sinds fase 10 zit elke kop in haar eigen .legal-section-N
   wrapper, dus elke kop is "eerste van haar type binnen haar eigen wrapper". :first-child ook
   niet: .legal-updated (laatst-bijgewerkt-datum) staat vóór .legal-section-1 als sibling.
   Target daarom de eerste sectie direct via haar eigen klasse. */
.legal-content > .legal-section-1 h2{ margin-top: 0; }
.legal-content p{ color: var(--ink); font-size: 1rem; line-height: 1.75; margin-bottom: 1.1rem; }
.legal-content ul{ margin: 0 0 1.1rem; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; }
.legal-content li{ color: var(--ink); font-size: 1rem; line-height: 1.6; }
.legal-content a{ color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover{ color: var(--accent-ink-hover); }
.legal-content strong{ font-weight: 700; }

/* ============ WhatsApp-knop (zwevend) ============ */
.whatsapp-fab{
  position: fixed; right: 24px; bottom: var(--wa-fab-bottom, 24px); z-index: var(--z-fab);
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: bottom 0.3s var(--ease-out-quart), transform 0.25s var(--ease-out-quart), box-shadow 0.25s var(--ease-out-quart);
}
.whatsapp-fab:hover, .whatsapp-fab:focus-visible{
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 4px 10px rgba(0, 0, 0, 0.14);
}
.whatsapp-fab svg{ width: 30px; height: 30px; fill: currentColor; }
@media (max-width: 640px){
  .whatsapp-fab{ right: 16px; bottom: var(--wa-fab-bottom, 16px); width: 52px; height: 52px; }
  .whatsapp-fab svg{ width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-fab{ transition: bottom 0.3s var(--ease-out-quart); }
  .whatsapp-fab:hover, .whatsapp-fab:focus-visible{ transform: none; }
}

/* ============ WhatsApp-tekstwolkje ============ */
.whatsapp-bubble{
  position: fixed; right: 24px; bottom: calc(var(--wa-fab-bottom, 24px) + 72px); z-index: var(--z-fab);
  max-width: min(230px, calc(100vw - 48px));
  background: #fff; color: var(--ink); font-size: 0.88rem; font-weight: 500; line-height: 1.4;
  padding: 0.75rem 1rem; border-radius: var(--radius-m);
  box-shadow: var(--shadow-m); border: 1px solid var(--border);
  text-align: left; text-decoration: none;
  opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity 0.35s var(--ease-out-quart), transform 0.35s var(--ease-out-quart), visibility 0.35s;
}
.whatsapp-bubble.is-visible{ opacity: 1; transform: translateY(0); visibility: visible; }
.whatsapp-bubble::after{
  content: ""; position: absolute; right: 20px; top: 100%;
  border: 7px solid transparent; border-top-color: #fff;
}
.whatsapp-bubble:hover{ color: var(--accent-ink); }
@media (max-width: 640px){
  .whatsapp-bubble{ right: 16px; bottom: calc(var(--wa-fab-bottom, 16px) + 66px); }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-bubble{ transition: none; }
}

/* ============ Cookie banner ============ */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 1.25rem var(--pad) calc(1.25rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--hero-bg-2) 90%, transparent);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  border-top: 1px solid var(--hero-border);
  box-shadow: 0 -12px 40px rgba(0,0,0,0.35);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.3s var(--ease-out-quart), transform 0.3s var(--ease-out-quart);
}
.cookie-banner.is-visible{ opacity: 1; transform: translateY(0); }
.cookie-banner-inner{
  max-width: 1180px; margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
}
.cookie-banner-inner p{ color: var(--hero-muted); font-size: 0.92rem; max-width: 62ch; margin: 0; }
.cookie-banner-inner p a{ color: var(--hero-ink); text-decoration: underline; }
.cookie-banner-actions{ display: flex; gap: 0.75rem; flex-shrink: 0; }
.cookie-banner-actions .btn{ font-size: 0.92rem; padding: 0.7rem 1.15rem; white-space: nowrap; }
@media (max-width: 640px){
  .cookie-banner-actions{ width: 100%; }
  .cookie-banner-actions .btn{ flex: 1; }
}

/* ============ Reveal animation ============ */
.js-ready [data-reveal]{
  opacity: 0; transform: translateY(22px); filter: blur(6px);
  transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart), filter 0.7s var(--ease-out-quart);
}
.js-ready [data-reveal].in-view{ opacity: 1; transform: translateY(0); filter: blur(0); }
.js-ready [data-reveal-group] > *{ transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .js-ready [data-reveal]{ opacity: 1; transform: none; filter: none; transition: none; }
  .btn, .service-card, .project-card, .why-card, .review-card, .step, .contact-info-card{ transition: none; }
}

/* ============ Glow-rand op kaarten ============
   Dunne (2px) huisstijl-gloed op de kaartrand die de muispositie volgt — alleen op
   apparaten met een muis. main.js zet --glow-angle per kaart; hier alleen de ring
   getekend via een gemaskerd pseudo-element (mask laat enkel de rand zien, niet het vlak). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  .service-card, .service-visual-panel, .why-card, .review-card, .project-card, .step, .contact-info-card{
    position: relative;
  }
  .service-card::after, .service-visual-panel::after, .why-card::after, .review-card::after,
  .project-card::after, .step::after, .contact-info-card::after{
    content: "";
    position: absolute; inset: 0; z-index: 3;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--glow-angle, 0deg) at 50% 50%,
      var(--aurora-2) 0deg, transparent 45deg, transparent 315deg, var(--aurora-1) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .service-card.is-glowing::after, .service-visual-panel.is-glowing::after, .why-card.is-glowing::after,
  .review-card.is-glowing::after, .project-card.is-glowing::after, .step.is-glowing::after, .contact-info-card.is-glowing::after{
    opacity: 1;
  }
}

/* ================================================================
   NIEUWE HUISSTIJL — "precisie-atelier" (donker koper/brons)
   Bron: FEwebdesign.html (aangeleverd voorbeeldbestand) — de VISUELE
   stijl is overgenomen (kleuren, typografie, effecten, componenten),
   niet de inhoud, tekst of één-pagina-structuur van dat bestand.

   Fase 2: alleen de homepage (body.page-home). Fase 3 breidt dit uit
   naar de overige pagina's — andere pagina's blijven tot die tijd
   ongemoeid, want vrijwel alles hieronder is geschoold onder
   body.page-home.

   Kleuraccent zit op eigen tokens (--ember/--ember-2/--ember-deep),
   NIET op --site-accent/--site-accent-2 — die twee blijven gereserveerd
   voor de bestaande "Website zelf verbouwen → Kleuren"-functie in het
   beheerpaneel, zodat die niet per ongeluk buitenspel komt te staan. */

body.page-home{
  --bg: #17120E;
  --bg-2: #1E1813;
  --bg-3: #261E17;
  --page-bg: #17120E;
  --surface: #1E1813;
  --surface-2: #261E17;

  --border: rgba(234,223,201,.10);
  --tint-border: rgba(234,223,201,.18);
  --hero-border: rgba(234,223,201,.10);

  --ink: #EADFC9;
  --muted: #B0A488;
  --dim: #7C7059;
  --hero-ink: #EADFC9;
  --hero-muted: #B0A488;
  --hero-bg: #17120E;
  --hero-bg-2: #1E1813;

  --tint-bg: #1E1813;

  --ember: #C77B45;
  --ember-2: #E6AE73;
  --ember-deep: #8A4E28;
  --bronze: #9A805C;
  --metal: linear-gradient(115deg,#7A431F 0%,#B87333 22%,#E6B87E 45%,#FBEBD2 52%,#C77B45 62%,#8A4E28 82%,#6E3C1B 100%);

  /* --aurora-1/2 zijn (anders dan --site-accent/--site-accent-2) niet aan de
     kleurenkiezer in het beheerpaneel gekoppeld — hier gewoon overschrijven
     kleurt in één keer alle decoratieve details mee (de mini-site-illustratie
     in de hero, het vinkje bij "aanvraag verstuurd", de sleep-onderstreping
     onder "Bekijk al onze diensten", de gloed-rand op de kaarten). */
  --aurora-1: var(--ember);
  --aurora-2: var(--ember-2);

  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-s: 2px;
  --radius-m: 3px;
  --radius-l: 4px;
  --shadow-s: none;
  --shadow-m: none;
  --shadow-l: none;

  --nav-glass: rgba(23,18,14,0);
  --nav-glass-scrolled: rgba(23,18,14,.82);

  color-scheme: dark;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

/* Lichte variant van dezelfde koperstijl — crème achtergrond i.p.v. donker, zelfde
   koperen accentkleur en fonts. Wordt gezet via data-theme="light" op <body> (zie
   main.js: fedesign-site-theme-toggle + localStorage, met een server-side default
   uit Instellingen als niemand nog gekozen heeft). Alle overige body.page-home-regels
   in dit bestand gebruiken deze zelfde custom properties, dus die volgen automatisch mee. */
body.page-home[data-theme="light"]{
  --bg: #FAF7F2; --bg-2: #F1EBE1; --bg-3: #E8E0D2; --page-bg: #FAF7F2;
  --surface: #F1EBE1; --surface-2: #E8E0D2;

  --border: rgba(33,26,19,.10); --tint-border: rgba(33,26,19,.14); --hero-border: rgba(33,26,19,.10);

  --ink: #211A13; --muted: #7A6F60; --dim: #A89C8C;
  --hero-ink: #211A13; --hero-muted: #7A6F60; --hero-bg: #FAF7F2; --hero-bg-2: #F1EBE1;

  --tint-bg: #F1EBE1;

  --ember: #C77B45; --ember-2: #8A4E28; --ember-deep: #8A4E28; --bronze: #6B5A42;

  --shadow-s: 0 1px 2px rgba(33,26,19,.06), 0 1px 1px rgba(33,26,19,.04);
  --shadow-m: 0 12px 32px rgba(33,26,19,.09), 0 2px 8px rgba(33,26,19,.05);
  --shadow-l: 0 24px 64px rgba(33,26,19,.13), 0 4px 16px rgba(33,26,19,.06);

  --nav-glass: rgba(250,247,242,0);
  --nav-glass-scrolled: rgba(250,247,242,.85);

  color-scheme: light;
}
body.page-home ::selection{ background: var(--ember); color: #17120E; }
body.page-home ::-moz-selection{ background: var(--ember); color: #17120E; }
body.page-home{ scrollbar-color: var(--ember) var(--bg); }
body.page-home ::-webkit-scrollbar-thumb{ background: var(--ember); border-color: var(--bg); }
body.page-home ::-webkit-scrollbar-thumb:hover{ background: var(--ember-2); }
body.page-home ::-webkit-scrollbar-track{ background: var(--bg); }
body.page-home :focus-visible{ outline-color: var(--ember); }

/* Reduced-motion vangnet: dooft elke transitie/animatie die hieronder
   nieuw wordt toegevoegd, mocht een losse @media-guard iets gemist
   hebben — dezelfde blanket-regel als in het voorbeeldbestand. */
@media (prefers-reduced-motion: reduce){
  body.page-home *, body.page-home *::before, body.page-home *::after{
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Glowfield: twee vaste, wazige kopergloeden achter de hele pagina ---- */
.page-home-glowfield{ position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.page-home-glowfield i{ position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; font-style: normal; }
.page-home-glowfield i:nth-child(1){
  width: 520px; height: 520px; top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(199,123,69,.22), transparent 70%);
}
.page-home-glowfield i:nth-child(2){
  width: 420px; height: 420px; bottom: -140px; right: -100px;
  background: radial-gradient(circle, rgba(154,128,92,.16), transparent 70%);
}

/* ---- Custom cursor: zachte gloeiende cirkel die de muis volgt.
   Alleen aangemaakt/aangestuurd door JS op apparaten met een muis
   (main.js checkt hover:hover vóórdat er ook maar iets wordt aangesloten);
   deze CSS-regel is de tweede, onafhankelijke vangrail op puur CSS-niveau. ---- */
.page-home-cursor{
  position: fixed; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,174,115,.7), rgba(199,123,69,0) 70%);
  transform: translate(-50%, -50%); pointer-events: none; z-index: 9998; mix-blend-mode: screen;
  transition: width 0.3s var(--ease-out-quart), height 0.3s var(--ease-out-quart);
  will-change: transform;
}
.page-home-cursor.is-big{ width: 64px; height: 64px; }
@media (hover: none){ .page-home-cursor{ display: none; } }

/* ---- Logo: geborsteld-koper-glans i.p.v. de blauwe verlooptekst — dit is
   het ENE bewuste, merk-specifieke gradient-tekst-moment op de pagina
   (net als in het voorbeeldbestand), niet een generieke stijl voor
   willekeurige koppen (die krijgen hieronder juist een egale kleur). ---- */
body.page-home .logo-fe, body.page-home .logo-suffix{
  background: var(--metal); background-size: 230% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: page-home-sheen 6s linear infinite;
}
body.page-home .logo-glow{ display: none; }
@keyframes page-home-sheen{ to{ background-position: 230% 0; } }
@media (prefers-reduced-motion: reduce){
  body.page-home .logo-fe, body.page-home .logo-suffix{ animation: none; }
}

/* ---- Nav: donker glas i.p.v. wit, dezelfde functionele opbouw ---- */
body.page-home .nav{
  background: var(--nav-glass); border-bottom-color: transparent;
  transition: transform 0.45s var(--ease-out-quart), background 0.3s ease, border-color 0.3s ease;
}
body.page-home .nav.is-scrolled{
  background: var(--nav-glass-scrolled); backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%); border-bottom-color: var(--border);
}
body.page-home .nav.is-hidden{ transform: translateY(-105%); }
body.page-home .logo-suffix{ color: var(--ink); }
body.page-home .nav-links a{ font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); }
body.page-home .nav-links a:hover{ color: var(--ink); }
body.page-home .nav-links a[aria-current="page"]{ color: var(--ink); }
body.page-home .nav-links a[aria-current="page"]::after{ background: var(--ember); }
body.page-home .nav-links a:not([aria-current="page"])::before{ background: var(--ember); }
body.page-home .menu-toggle{ border-color: var(--border); color: var(--ink); background: rgba(234,223,201,.05); }
@media (max-width: 860px){
  body.page-home .nav-links{ background: var(--bg-2); border-bottom-color: var(--border); }
}

/* ---- Knoppen: koper i.p.v. blauw, verder dezelfde opbouw/klassen (.btn/.btn-primary/.btn-ghost-light blijven functioneel identiek) ---- */
body.page-home .btn{ font-family: var(--font-mono); font-size: 0.88rem; border-radius: var(--radius-s); }
body.page-home .btn-primary{
  background: var(--ember); color: #241606; box-shadow: none;
}
body.page-home .btn-primary:hover{ background: var(--ember-2); transform: translateY(-2px); box-shadow: none; }
body.page-home .btn-ghost-light{ border-color: var(--border); color: var(--ink); }
body.page-home .btn-ghost-light:hover{ border-color: var(--ember); color: var(--ember); background: rgba(234,223,201,.04); }

/* ---- Eyebrow: mono + vierkante haken i.p.v. bolletje-kicker (zelfde als bron) ---- */
body.page-home .eyebrow{
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em; color: var(--ember);
}
body.page-home .eyebrow::before{ content: "["; background: none; box-shadow: none; width: auto; height: auto; color: var(--dim); font-size: 1em; border-radius: 0; }
body.page-home .eyebrow::after{ content: "]"; color: var(--dim); font-size: 1em; }

/* ---- Koppen: Archivo, egale inktkleur, geen glans-animatie ---- */
body.page-home h1, body.page-home h2, body.page-home h3, body.page-home h4{
  letter-spacing: -0.03em;
}
body.page-home .section-head h2, body.page-home .about-text h2{
  background-image: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial; color: var(--ink); animation: none;
}
body.page-home .bg-navy .section-head h2{ color: var(--ink); }
body.page-home .text-gradient{
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial; color: var(--ember);
}

/* ---- Hero: canvas-vonken i.p.v. de blauwe gloed-vlek, scramble op het accentdeel ---- */
body.page-home .hero{ background: var(--bg); overflow: visible; }
body.page-home .hero-glow{ display: none; }
/* width/height:100% is NIET overbodig naast inset:0 — canvas is een "vervangen
   element" (replaced element) en valt bij afwezigheid daarvan terug op zijn
   eigen intrinsieke maat (300x150px) i.p.v. de hele hero te vullen. Dit was
   precies de bug die de vonken tot een klein vakje linksboven beperkte. */
body.page-home .hero__canvas{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
body.page-home .hero > .container{ position: relative; z-index: 1; }
body.page-home .hero-kicker{ font-family: var(--font-mono); font-size: 0.82rem; color: var(--ember); }
body.page-home .hero-kicker .dot{ background: var(--ember); box-shadow: 0 0 12px var(--ember); animation: page-home-blink 2.4s infinite; }
@keyframes page-home-blink{ 0%, 100%{ opacity: 1; } 50%{ opacity: .35; } }
body.page-home .hero h1{ color: var(--hero-ink); }
body.page-home .hero .lede{ color: var(--muted); }
body.page-home .hero-checks svg{ background: none; color: var(--ember); padding: 0; stroke-width: 2.5; }
body.page-home .hero-checks li{ color: var(--ink); }
body.page-home .review-badge-text{ color: var(--muted); }
body.page-home .review-badge-text strong{ color: var(--ink); }

/* ---- Mock-browser hero-illustratie: donker kader i.p.v. wit ---- */
body.page-home .hero-mockup::before{ display: none; }
body.page-home .mock-browser{
  background: var(--bg-2); border-color: var(--border); box-shadow: none;
}
body.page-home .mock-browser-chrome{ background: var(--bg-3); border-bottom-color: var(--border); }
body.page-home .mock-browser-chrome span{ background: var(--border); }
body.page-home .mock-browser-chrome .mock-url{ background: var(--bg); border-color: var(--border); color: var(--muted); }
body.page-home .mock-nav{ border-bottom-color: var(--border); }
body.page-home .mock-nav-links{ color: var(--muted); }
body.page-home .mock-hero-title{ color: var(--ink); }
body.page-home .mock-hero-lede{ color: var(--muted); }
body.page-home .mock-card{ background: var(--bg); border-color: var(--border); }
body.page-home .mock-card span{ color: var(--ink); }
body.page-home .mock-phone{ background: var(--bg-2); border-color: #0c0906; }
body.page-home .mock-phone-nav{ border-bottom-color: var(--border); }
body.page-home .mock-phone-burger i{ background: var(--ink); }
body.page-home .mock-phone-title{ color: var(--ink); }
body.page-home .mock-phone-lede{ color: var(--muted); }
body.page-home .mock-phone-card{ background: var(--bg); border-color: var(--border); }
body.page-home .mock-phone-card span{ color: var(--ink); }

/* ---- Diensten & Waarom wij: genummerde "capability"-tegels met muis-
   volgende gloed, i.p.v. simpele witte kaartjes — beide zijn al echte
   opsommingen (3 diensten / 4 redenen), dus nummering is hier gegrond. ---- */
body.page-home .services-grid, body.page-home .why-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
body.page-home .service-card, body.page-home .why-card{
  background: none; background-image: none; border: none; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: clamp(1.75rem, 3.6vw, 2.6rem); position: relative; overflow: hidden;
  transition: background 0.5s var(--ease-out-quart);
}
body.page-home .service-card::before, body.page-home .why-card::before, body.page-home .cap::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(400px 200px at var(--mx,50%) var(--my,0%), rgba(199,123,69,.10), transparent 60%);
  opacity: 0; transition: opacity 0.4s ease;
}
body.page-home .service-card:hover::before, body.page-home .why-card:hover::before, body.page-home .cap:hover::before{ opacity: 1; }
body.page-home .service-card:hover, body.page-home .why-card:hover{ background: var(--bg-2); transform: none; box-shadow: none; }
body.page-home .cap:hover{ background: var(--bg-2); }
body.page-home .service-card::after, body.page-home .why-card::after{ display: none; }
body.page-home .service-num, body.page-home .why-num{
  display: block; font-family: var(--font-mono); font-size: 0.82rem; color: var(--ember); margin-bottom: 1rem;
}
body.page-home .service-icon{ display: none; }
body.page-home .service-card h3, body.page-home .why-card h3{
  font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); letter-spacing: -0.02em; margin: 0 0 0.9rem; color: var(--ink);
}
body.page-home .service-card p, body.page-home .why-card p{ color: var(--muted); max-width: 42ch; }

/* ---- Maatwerk: groot Archivo statement, egale kleur i.p.v. gradient-quote ---- */
body.page-home .maatwerk h2{ color: var(--ink); }
body.page-home .maatwerk p{ color: var(--muted); }
body.page-home .maatwerk-quote{
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial; color: var(--ember);
}

/* ---- Samenwerkingen/vertrouwen ---- */
body.page-home .trust-label{ font-family: var(--font-mono); letter-spacing: 0.06em; color: var(--muted); }
body.page-home .trust-quote .quote{ color: var(--ink); }
body.page-home .partner-logo img{ filter: grayscale(1) brightness(1.6) contrast(0.9); opacity: 0.7; }
body.page-home .partner-logo:hover img, body.page-home .partner-logo:focus-visible img{
  filter: none; opacity: 1; transform: translateY(-2px);
}

/* ---- Reviews, over ons, FAQ: hergebruiken de omgetoonde basistokens
   (--surface-2/--border/--ink/--muted) die deze onderdelen al gebruikten,
   dus geen aparte regels nodig voor de meeste kleuren — alleen wat
   detailcorrecties. ---- */
body.page-home .about-photo{ background: var(--bg-2); border-color: var(--border); }
body.page-home .faq-item{ background: var(--bg-2); border-color: var(--border); }
body.page-home .faq-question{ color: var(--ink); }
body.page-home .faq-chevron{ color: var(--ember); }
body.page-home .review-card{ background: var(--bg-2); border-color: var(--border); }
body.page-home .review-avatar{ background: var(--bg-3); border-color: var(--border); color: var(--ember); }
body.page-home .reviews-slider-nav button{ background: var(--bg-2); border-color: var(--border); color: var(--ink); }

/* ---- Offerte-CTA-band: donker paneel i.p.v. het blauwe gradient-kader;
   het formulier zelf (velden/knop) blijft functioneel exact hetzelfde,
   alleen het uiterlijk verandert. ---- */
body.page-home .offerte-band{
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-l);
}
body.page-home .offerte-band::before{ display: none; }
body.page-home .offerte-band-copy h1, body.page-home .offerte-band-copy h2{ color: var(--ink); }
body.page-home .offerte-band-copy p{ color: var(--muted); }
body.page-home .offerte-band-copy .offerte-band-note{ color: var(--dim); }
body.page-home .offerte-band-form{ background: var(--bg-3); border: 1px solid var(--border); }
body.page-home .offerte-band-form .field label{ font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
body.page-home .offerte-band-form input{
  background: var(--bg); border-color: var(--border); color: var(--ink);
}
body.page-home .field input:focus, body.page-home .field textarea:focus{
  border-color: var(--ember); box-shadow: 0 0 0 4px rgba(199,123,69,.22);
}
body.page-home .offerte-thanks h2{ color: var(--ink); }
body.page-home .offerte-thanks-sub{ color: var(--muted); }
body.page-home .offerte-thanks-next{ background: var(--bg); color: var(--muted); }

/* ---- Footer (LET OP: de site gebruikt .footer, niet .foot uit het
   voorbeeldbestand — zelfde donkere basis als de rest van de pagina). ---- */
body.page-home .footer{ background: var(--bg); color: var(--muted); border-top: 1px solid var(--border); }
body.page-home .footer-top{ border-bottom-color: var(--border); }
body.page-home .footer .logo-suffix{ color: var(--ink); }
body.page-home .footer-col-title{ color: var(--ink); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.76rem; }
body.page-home .footer-col a:hover{ color: var(--ember); }
body.page-home .footer-bottom{ font-family: var(--font-mono); font-size: 0.78rem; }

/* ---- diensten.php: werkwijze-stappen + CTA-band ---- */
body.page-home .section-werkwijze{ color: var(--ink); }
body.page-home .section-werkwijze .section-head p{ color: var(--muted); }
body.page-home .step{ background: var(--bg-2); border-color: var(--border); box-shadow: none; }
body.page-home .step-number-bg{
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial; color: var(--border);
}
body.page-home .step-num{ background: var(--bg-3); border-color: var(--border); color: var(--ember); font-family: var(--font-mono); }
body.page-home .step h3{ color: var(--ink); }
body.page-home .step p{ color: var(--muted); }
body.page-home .steps-note{ color: var(--dim); font-family: var(--font-mono); font-size: 0.86rem; }

body.page-home .cta-band h2{ color: var(--ink); background-image: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; animation: none; }
body.page-home .cta-band p{ color: var(--muted); }

/* ---- portfolio.php: projectkaarten, apparaat-wissel, lightbox ---- */
body.page-home .device-btn{ background: var(--bg); }
body.page-home .device-btn:hover{ border-color: var(--ember); color: var(--ember); }
body.page-home .device-btn.is-active{ background: var(--ember); color: #241606; }
body.page-home .tag-featured{ background: var(--ember); color: #241606; }
body.page-home .tag-panel{ background: rgba(199,123,69,.16); color: var(--ember); }
body.page-home .project-link{ color: var(--ember); }
body.page-home .project-link::after{ background: linear-gradient(120deg, var(--ember), var(--ember-2)); }
body.page-home .project-link:hover{ color: var(--ember-2); }
body.page-home .lightbox::backdrop{ background: rgba(0,0,0,.82); }
body.page-home .lightbox-close{ background: rgba(0,0,0,.55); }
body.page-home .lightbox-close:hover{ background: rgba(0,0,0,.8); }

/* ---- contact.php: het echte contactformulier blijft functioneel exact
   hetzelfde (zelfde method/action/velden/CSRF) — alleen kleuren/typografie. ---- */
body.page-home .form-success svg{ color: var(--ember); }
body.page-home .form-note{ color: var(--dim); font-family: var(--font-mono); font-size: 0.8rem; }
body.page-home .contact-info-icon{ background: var(--bg); color: var(--ember); border-color: var(--border); }
body.page-home .contact-info-card h2{ color: var(--ink); }
body.page-home .contact-info-card a:hover{ color: var(--ember); }

/* ---- privacybeleid.php: de juridische tekst zelf blijft ongewijzigd, alleen kleuren ---- */
body.page-home .legal-content a{ color: var(--ember); }
body.page-home .legal-content a:hover{ color: var(--ember-2); }

/* ================================================================
   HERO v2 — exacte herbouw volgens het goedgekeurde hero.html:
   bovenbalk, gecentreerde kicker+wordmark, onderaan statement+tekst
   +knoppen, scroll-cue. Het vonken-canvas (.hero__canvas) hieronder
   is functioneel ongewijzigd — alleen de indeling eromheen is nieuw.
   ================================================================ */
body.page-home .hero--v2{
  min-height: 92vh; display: flex; flex-direction: column; justify-content: center;
  padding-block: 70px 40px;
}
body.page-home .hero--v2 .hero-inner{ position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; }

body.page-home .hero__grid{
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
body.page-home .hero__copy{ max-width: 46ch; min-width: 0; }
body.page-home .hero__sub{
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.1rem, 2.6vw + 1.3rem, 3.2rem);
  line-height: 1.07; letter-spacing: -0.028em; max-width: 14ch; text-wrap: balance; color: var(--ink); margin: 0 0 1.3rem;
}
body.page-home .hero__sub b{ color: var(--ember); font-weight: 700; }
body.page-home .hero__support{ color: var(--muted); font-size: 1.04rem; max-width: 42ch; margin: 0 0 1.8rem; }
body.page-home .hero__actions{ display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
body.page-home .hero__link{
  font-weight: 600; font-size: 0.96rem; color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid var(--ember); padding-bottom: 2px;
}
body.page-home .hero__link:hover{ color: var(--ember); }

/* ---- Bewijs i.p.v. beweringen: drie echte projecten als losse afdrukken op
   een werktafel, licht scheef, elk met een leesbaar naamplaatje onder de foto
   (geen tekst-in-beeld waar je van afhankelijk bent voor leesbaarheid).
   Zachte doorlopende drijfbeweging; de sitebrede reduced-motion-vangrail
   hierboven zet dat vanzelf stil. ---- */
body.page-home .hero__proof{ position: relative; height: clamp(360px, 40vw, 460px); }
body.page-home .hero__print{
  position: absolute; width: 60%; margin: 0; border-radius: 4px; overflow: hidden;
  background: #fff; border: 5px solid #fff; display: flex; flex-direction: column;
  box-shadow: 0 18px 38px rgba(20,14,8,.28), 0 3px 8px rgba(20,14,8,.14);
  animation: hero-print-float 7s ease-in-out infinite alternate;
}
body.page-home .hero__print img{ display: block; width: 100%; height: auto; }
body.page-home .hero__print figcaption{
  padding: 9px 11px 7px; font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.01em; color: #241C12; background: #fff;
}
body.page-home .hero__print--1{ top: 0; left: 0; width: 62%; z-index: 3; --rot: -5deg; animation-duration: 6.5s; }
body.page-home .hero__print--2{ top: 20%; right: 0; width: 56%; z-index: 2; --rot: 3.5deg; animation-duration: 8s; animation-delay: -2.3s; }
body.page-home .hero__print--3{ bottom: 0; left: 22%; width: 56%; z-index: 1; --rot: -2.5deg; animation-duration: 7.5s; animation-delay: -4.6s; }
@keyframes hero-print-float{
  from{ transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  to{ transform: translate(6px, -22px) rotate(calc(var(--rot, 0deg) + 2.5deg)); }
}

body.page-home .scrollcue{
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--dim);
  writing-mode: vertical-rl; display: flex; align-items: center; gap: 10px; z-index: 2;
}
body.page-home .scrollcue::after{
  content: ""; width: 1px; height: 44px; background: linear-gradient(var(--ember), transparent);
}

@media (max-width: 760px){
  body.page-home .hero--v2{ min-height: auto; }
  body.page-home .hero__grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  body.page-home .hero__copy{ max-width: none; }
  body.page-home .hero__proof{ height: clamp(220px, 62vw, 300px); }
  body.page-home .scrollcue{ display: none; }
}

/* ---- Koperen metaal-gradiënt op de primaire knop, verschuivend bij hover —
   overal op de site (nav-CTA, hero, cta-banden, formulierknoppen delen deze
   ene .btn-primary-klasse), i.p.v. de eerder platte ember-kleur. ---- */
body.page-home .btn-primary{
  background: var(--metal); background-size: 230% 100%; background-position: 0 0;
  color: #241606; box-shadow: none;
  transition: background-position 0.45s var(--ease-out-quart);
}
body.page-home .btn-primary:hover{ background-position: 120% 0; transform: translateY(-2px); box-shadow: none; }
@media (prefers-reduced-motion: reduce){
  body.page-home .btn-primary{ transition: none; }
}

/* ---- Magnetische knoppen: JS (main.js) verplaatst de knop zelf subtiel
   richting de cursor (geen aparte binnenste span nodig — dat zou botsen
   met het potlood-bewerksysteem, dat zijn eigen tekstknoop verwacht). ---- */
body.page-home [data-mag]{ will-change: transform; }

@media (max-width: 900px){
  body.page-home .services-grid, body.page-home .why-grid{ grid-template-columns: 1fr; }
}

body.page-home .section-link{ color: var(--ember); }
body.page-home .section-link::after{ background: linear-gradient(120deg, var(--ember), var(--ember-2)); }
body.page-home .section-link:hover{ color: var(--ember-2); }

/* ---- "Waarom wij": lichte beige contrastband i.p.v. het oude donkerblauw —
   dezelfde "art direction per sectie"-truc als het voorbeeldbestand (die
   heeft juist één lichte band op een verder donkere site, voor de
   Lighthouse-score-sectie). Hier op de plek die al een aparte, contrasterende
   achtergrond had, zodat het ritme van de pagina behouden blijft. ---- */
body.page-home .bg-navy{
  background: var(--bg-3); color: var(--ink);
}
body.page-home .bg-navy .eyebrow{ color: var(--ember-2); }
body.page-home .bg-navy .eyebrow::before, body.page-home .bg-navy .eyebrow::after{ color: var(--dim); }
body.page-home .bg-navy .section-head h2{ color: var(--ink); }
body.page-home .bg-navy .section-head p{ color: var(--muted); }
body.page-home .bg-navy .text-gradient{ color: var(--ember-2); }
body.page-home .bg-navy .services-grid, body.page-home .bg-navy .why-grid{ border-color: var(--border); }
body.page-home .bg-navy .service-card, body.page-home .bg-navy .why-card{ border-color: var(--border); }
body.page-home .bg-navy .service-card::before, body.page-home .bg-navy .why-card::before{
  background: radial-gradient(400px 200px at var(--mx,50%) var(--my,0%), rgba(199,123,69,.14), transparent 60%);
}
body.page-home .bg-navy .service-num, body.page-home .bg-navy .why-num{ color: var(--ember-2); }
body.page-home .bg-navy .service-card h3, body.page-home .bg-navy .why-card h3{ color: var(--ink); }
body.page-home .bg-navy .service-card p, body.page-home .bg-navy .why-card p{ color: var(--muted); }

/* ---- Secties na de hero waren platte, hard afgesneden kleurblokken zonder
   relatie met de hero-gloed erboven (achtergrond-kritiek). Zelfde soort zachte
   kopergloed + fijne korrel als de hero, nu doorlopend over elke sectie, met
   een dunne koperen lijn tussen secties i.p.v. een harde kleurcut. ---- */
body.page-home .section, body.page-home .section-tight{ overflow: hidden; }
body.page-home .section::before, body.page-home .section-tight::before{
  content: ""; position: absolute; inset: -18% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(560px 420px at 8% -12%, rgba(199,123,69,.11), transparent 65%),
    radial-gradient(520px 460px at 96% 112%, rgba(154,128,92,.08), transparent 68%);
}
body.page-home .section::after, body.page-home .section-tight::after{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
body.page-home .section > .container, body.page-home .section-tight > .container{ position: relative; z-index: 1; }
body.page-home .section + .section, body.page-home .section-tight + .section,
body.page-home .section + .section-tight, body.page-home .section-tight + .section-tight{
  border-top: 1px solid rgba(199,123,69,.16);
}

/* ---- WhatsApp-tekstwolkje: hardgecodeerd wit vlak in de basisstijl,
   dus expliciet donker maken (anders wordt de tekst hier --ink, dat op
   de homepage nu lichtgekleurd is — licht-op-wit zou onleesbaar worden). ---- */
body.page-home .whatsapp-bubble{ background: var(--bg-2); border: 1px solid var(--border); color: var(--ink); }
body.page-home .whatsapp-bubble::after{ border-top-color: var(--bg-2); }
body.page-home .whatsapp-bubble:hover{ color: var(--ember); }