/* =====================================================================
   Adequate Administraties — Premium Dark / Gold · Futuristic
   ===================================================================== */

:root {
  --bg: #08080a;
  --bg-2: #0e0e11;
  --bg-3: #141418;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-strong: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.09);
  --border-gold: rgba(212, 175, 55, 0.35);

  --gold: #d4af37;
  --gold-2: #f3d97a;
  --gold-3: #a67c1a;
  --gold-glow: rgba(212, 175, 55, 0.35);

  --text: #f4f2ec;
  --text-2: #b4b0a6;
  --text-3: #7f7b73;

  --font-head: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --radius: 8px;
  --radius-sm: 8px;
  --radius-btn: 8px;
  --card-bg: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  --card-shadow: none;
  --ghost-bg: rgba(255,255,255,0.04);
  --input-bg: rgba(8,8,10,0.6);
  --container: 1200px;

  --focus: var(--gold-2);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 600ms;
}

*, *::before, *::after { box-sizing: border-box; }

/* Koppen verdelen hun woorden gelijk over de regels; lopende tekst laat geen
   los woord op de laatste regel achter. */
h1, h2, h3, h4, .hero__title { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

/* Vertel de browser dat wij de kleuren zelf regelen. Zonder deze regel past
   Chrome op Android zijn eigen donkere thema toe en wordt goud bruin. */
/* 'only light' zet de automatische donkere modus van Chrome (o.a. in
   batterijspaarstand) uit; anders verandert het goud daar in bruin. */
:root, :root.pagina-licht { color-scheme: light; }
:root, :root.pagina-licht { color-scheme: only light; }   /* 'only' = harde opt-out, oudere browsers houden de regel erboven */
.pagina-licht body { background: #ffffff; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.1; margin: 0 0 0.5em; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.6rem, 6.5vw, 5.2rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.container { width: min(var(--container), 100% - 2.5rem); margin-inline: auto; }
.container--narrow { max-width: 820px; }

/* ---------- Utilities ---------- */
.gold-text {
  background: linear-gradient(100deg, var(--gold-3) 0%, var(--gold) 30%, var(--gold-2) 50%, var(--gold) 70%, var(--gold-3) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 var(--gold-glow); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--gold-glow); } 100% { box-shadow: 0 0 0 12px rgba(212,175,55,0); } }

.section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }
.section--dark { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.section__head { text-align: center; max-width: 760px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.section__lead { color: var(--text-2); font-size: 1.08rem; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.9rem 1.7rem; border-radius: var(--radius-btn); border: 1px solid transparent;
  font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), background 300ms, border-color 300ms;
  min-height: 48px; cursor: pointer;
}
.btn > * { position: relative; z-index: 2; }
.btn--sm { padding: 0.6rem 1.2rem; min-height: 42px; font-size: 0.88rem; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn svg { transition: transform 300ms var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--gold {
  /* vaste waarden: op lichte secties worden de goudtokens donkerder gezet voor
     leesbare tekst, maar de knop moet overal even helder blijven als die in het menu */
  color: #14110a;
  background: linear-gradient(135deg, #f7e196 0%, #e2c559 38%, #d4af37 72%, #bb9429 100%);
  box-shadow: 0 8px 30px -8px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn--gold::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.7) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform 700ms var(--ease-out);
}
.btn--gold:hover::before { transform: translateX(120%); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px rgba(212,175,55,0.45), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn--gold:active { transform: translateY(0) scale(0.98); }

.btn--ghost {
  color: var(--text); background: var(--ghost-bg); border-color: var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.btn--ghost:hover { border-color: var(--border-gold); background: rgba(212,175,55,0.08); transform: translateY(-2px); }

/* ---------- Scroll progress & cursor ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 1001;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-2));
  transform-origin: left; transform: scaleX(0); pointer-events: none;
}
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 520px; height: 520px; pointer-events: none; z-index: 0;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0) 60%);
  transform: translate(-50%, -50%); transition: opacity 600ms;
  will-change: transform;
}
body.has-mouse .cursor-glow { opacity: 1; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1rem 0; transition: padding 400ms var(--ease-out), background 400ms, border-color 400ms;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  padding: 0.55rem 0;
  background: rgba(8,8,10,0.72);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-color: var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav__brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.nav__brand img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(212,175,55,0.35)); transition: transform 500ms var(--ease-spring); }
.nav__brand:hover img { transform: rotate(-8deg) scale(1.06); }
.nav__brand-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-head); }
.nav__brand-text strong { font-size: 1.05rem; letter-spacing: 0.06em; font-weight: 700; }
.nav__brand-text small { font-size: 0.6rem; letter-spacing: 0.32em; color: var(--text-2); margin-top: 3px; }

.nav__links { display: flex; align-items: center; gap: 1.8rem; }
.nav__links > a:not(.btn) {
  position: relative; font-weight: 500; font-size: 0.93rem; color: var(--text-2); padding: 0.3rem 0;
  transition: color 250ms;
}
.nav__links > a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform: scaleX(0); transform-origin: right;
  transition: transform 350ms var(--ease-out);
}
.nav__links > a:not(.btn):hover, .nav__links > a.is-active { color: var(--text); }
.nav__links > a:not(.btn):hover::after, .nav__links > a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { margin-left: 0.4rem; }

.nav__burger {
  display: none; flex-direction: column; gap: 5px; padding: 10px; background: none; border: 0;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav__burger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 300ms, opacity 300ms; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  /* hoogte begrensd: op hoge schermen bleef er anders een groot gat onder de knoppen */
  position: relative; min-height: min(100svh, 780px); display: flex; align-items: center;
  padding: 7rem 0 3.5rem; overflow: hidden; isolation: isolate;
}

/* Lichte hero: de foto van Rotterdam blijft de achtergrond, maar onder een lichte
   sluier in plaats van een donkere, zodat de kop in donkere letters leesbaar is. */
.hero--licht {
  --text: #14120f; --text-2: #4d4a43; --text-3: #6f6a61;
  --border: rgba(20,18,15,0.10); --border-gold: rgba(166,124,26,0.40);
  --gold: #8a6a15; --gold-2: #a67c1a; --gold-3: #6f5310; --gold-glow: rgba(166,124,26,0.18);
  --card-bg: #ffffff; --ghost-bg: #ffffff; --focus: #8a6a15;
  color: var(--text); background: #ffffff;
  min-height: min(100svh, 640px);   /* zonder het puntenblok eronder hoeft de hero minder hoog */
}
/* de dienstensectie sluit direct aan op de hero */
.hero--licht + .section { padding-top: clamp(3rem, 5vw, 4.5rem); }
.hero--licht .hero__img { filter: contrast(1.02) brightness(1.08); }
.hero--licht .hero__overlay {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.92) 46%, rgba(255,255,255,0.58) 74%, rgba(255,255,255,0.3) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.05) 26%, rgba(255,255,255,0.85) 88%, #ffffff 100%);
}
.hero--licht .hero__content { max-width: min(1000px, 100%); }
@media (max-width: 860px) {
  /* op smalle schermen loopt de tekst tot de rand, dus daar een gelijkmatige sluier */
  .hero--licht .hero__overlay {
    background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.88) 50%, rgba(255,255,255,0.95) 88%, #ffffff 100%);
  }
}
.hero--licht .hero__google { background: rgba(255,255,255,0.9); border-color: var(--border); }
.hero--licht .hero__google:hover { border-color: var(--border-gold); }

.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  filter: grayscale(1) contrast(1.1) brightness(0.55);
  transform: scale(1.12); animation: heroZoom 18s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,10,0.96) 0%, rgba(8,8,10,0.75) 45%, rgba(8,8,10,0.35) 100%),
    linear-gradient(180deg, rgba(8,8,10,0.4) 0%, rgba(8,8,10,0) 40%, rgba(8,8,10,1) 100%);
}
.hero__particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.8; }
.hero__grid {
  position: absolute; inset: 0; opacity: 0.35;
  background-image:
    linear-gradient(rgba(212,175,55,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 60%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 60%, #000 20%, transparent 80%);
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; pointer-events: none;
  animation: orbFloat 14s ease-in-out infinite alternate;
}
.orb--1 { width: 520px; height: 520px; left: -160px; top: 10%; background: radial-gradient(circle, rgba(212,175,55,0.45), transparent 65%); }
.orb--2 { width: 640px; height: 640px; right: -220px; bottom: -180px; background: radial-gradient(circle, rgba(243,217,122,0.28), transparent 65%); animation-delay: -6s; }
@keyframes orbFloat { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, -50px) scale(1.15); } }

.hero__content { max-width: min(1000px, 100%); position: relative; }
/* Formaat zo gekozen dat de kop vanaf tabletbreedte op twee regels past */
.hero__title { margin-bottom: 1.4rem; font-size: clamp(2.4rem, 5.6vw, 4.8rem); }
.hero__title .word {
  display: inline-block; opacity: 0; transform: translateY(40px) rotateX(-40deg);
  animation: wordIn 900ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 150ms);
}
@keyframes wordIn { to { opacity: 1; transform: none; } }
.hero__lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-2); max-width: 580px; margin-bottom: 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 3.2rem; }

/* Google-beoordeling in de hero */
.hero__actions:has(+ .hero__google) { margin-bottom: 1.4rem; }
.hero__google {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: 1.6rem; padding: 0.6rem 1.1rem; border-radius: var(--radius-btn);
  border: 1px solid var(--border); background: rgba(8,8,10,0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text-2); font-size: 0.85rem; text-decoration: none;
  transition: border-color 300ms, transform 300ms var(--ease-out);
}
.hero__google:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.hero__google strong { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--text); line-height: 1; }
@media (max-width: 420px) { .hero__google { font-size: 0.8rem; gap: 0.45rem; padding: 0.55rem 0.9rem; } }

.hero__stats {
  list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: rgba(255,255,255,0.03); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: hidden; max-width: 680px;
}
.hero__stats li {
  flex: 1 1 140px; padding: 1.1rem 1.4rem; display: flex; flex-direction: column; gap: 0.1rem;
  border-right: 1px solid var(--border);
}
.hero__stats li:last-child { border-right: 0; }
.hero__stats strong { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--gold-2); line-height: 1; }
.hero__stats span:not(.counter) { font-size: 0.8rem; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,0.25); border-radius: 14px;
  display: flex; justify-content: center; padding-top: 6px;
}
.hero__scroll span { width: 4px; height: 8px; border-radius: 2px; background: var(--gold); animation: scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- USP strip ---------- */
.usp { padding: 0 0 3.5rem; margin-top: -2.5rem; position: relative; z-index: 2; }
.pagina-licht .usp {
  --text: #14120f; --text-2: #4d4a43; --border: rgba(20,18,15,0.10); --border-gold: rgba(166,124,26,0.40); --gold: #8a6a15;
  margin-top: 0; padding: 0 0 clamp(2.5rem, 5vw, 4rem); color: var(--text); background: #f7f6f2;
}
.pagina-licht .usp__item:hover { background: rgba(20,18,15,0.02); }
.usp__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.usp__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  column-gap: 0.6rem; row-gap: 0.15rem;
  padding: 1.25rem 1.4rem; border-left: 1px solid var(--border);
  transition: background 300ms;
}
.usp__item > div { display: contents; }
.usp__item:first-child { border-left: 0; padding-left: 0; }
.usp__item:last-child { padding-right: 0; }
.usp__item:hover { background: rgba(255,255,255,0.02); }
.usp__item h3 { grid-area: 1 / 2; font-size: 0.98rem; margin: 0; }
.usp__item p { grid-column: 1 / -1; margin: 0; font-size: 0.86rem; color: var(--text-2); }
.usp__icon {
  grid-area: 1 / 1; align-self: center;
  width: 30px; height: 30px; border-radius: 4px; display: grid; place-items: center;
  color: var(--gold); background: none; border: 1px solid var(--border-gold);
}
.usp__icon svg { width: 22px; height: 22px; }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(212,175,55,0.04); padding: 0.9rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 38s linear infinite; align-items: center; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--font-head); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8rem; color: var(--text-2); white-space: nowrap; }
.marquee__track i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Cards (services) ---------- */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
/* Kaart: icoon naast de titel, haarlijn eromheen, beweging alleen bij hover */
.card {
  position: relative; padding: 1.6rem; border-radius: var(--radius);
  background: var(--card-bg); box-shadow: var(--card-shadow);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: transform 350ms var(--ease-out), border-color 300ms;
}
.card__kop { display: flex; align-items: center; gap: 0.75rem; }
.card:hover { transform: translateY(-3px); border-color: var(--border-gold); }
.card__icon {
  flex: none;
  width: 38px; height: 38px; border-radius: 4px; display: grid; place-items: center;
  color: var(--gold); background: none; border: 1px solid var(--border-gold);
  transition: border-color 300ms, color 300ms;
}
.card:hover .card__icon { border-color: var(--gold); }
.card__icon svg { width: 20px; height: 20px; }
.card__kop h3 { margin: 0; font-size: 1.1rem; }
.card > p { flex: 1 1 auto; color: var(--text-2); font-size: 0.93rem; margin: 0; }
.card__link {
  font-family: var(--font-head); font-weight: 600; font-size: 0.86rem; color: var(--gold);
  display: inline-flex; gap: 0.4rem; align-items: center;
}
.card > .card__link {
  color: var(--text); display: flex; justify-content: flex-start;
  border-top: 1px solid var(--border); padding-top: 0.8rem; margin-top: auto;
}
.card__link i { font-style: normal; color: var(--gold); transition: transform 300ms var(--ease-out); }
.card:hover .card__link i { transform: translateX(4px); }

/* Dienstkaart met foto bovenaan, in dezelfde vorm als de blogkaarten */
.card--foto { padding: 0; gap: 0; overflow: hidden; }
.card__foto { aspect-ratio: 3 / 2; overflow: hidden; background: #efede8; }
.card__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease-out); }
.card--foto:hover .card__foto img { transform: scale(1.04); }
.card__body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.25rem 1.35rem 1.2rem; flex: 1 1 auto; }
.card__body h3 { margin: 0; font-size: 1.1rem; }
.card__body p { margin: 0; flex: 1 1 auto; color: var(--text-2); font-size: 0.93rem; }
.card__body .card__link {
  display: flex; color: var(--text); margin-top: auto;
  border-top: 1px solid var(--border); padding-top: 0.8rem;
}

/* =====================================================================
   Hero en dienstensectie volgens het aangeleverde ontwerp (30-09-2026)
   ===================================================================== */

/* Koppen in twee gewichten: vet, dan dun, met een gouden punt */
.kop-duo strong, .kop-duo .kop-duo__licht { display: block; }
.kop-duo strong { font-weight: 800; letter-spacing: -0.035em; }
.kop-duo .kop-duo__licht { font-weight: 300; letter-spacing: -0.03em; }
.gouden-punt { color: #b8912a; }

/* Klein label boven een kop (alleen waar het ontwerp erom vraagt) */
.hero__label, .sectie-label {
  font-family: var(--font-head); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: #8a6a15; margin: 0 0 1.1rem;
}
.hero__label span { color: #c9a94f; margin: 0 0.35em; }

/* Hero: tekst links, het beeld rechts, lichte studio-achtergrond */
.hero--studio {
  min-height: min(100svh, 760px); display: flex; align-items: center;
  padding: clamp(6.5rem, 9vw, 7.5rem) 0 clamp(3.5rem, 6vw, 5rem);
  background:
    radial-gradient(60% 70% at 72% 40%, rgba(255,255,255,0.9), transparent 70%),
    linear-gradient(90deg, #fbfbfa 0%, #f6f6f4 45%, #efefee 100%);
}
.hero__studio { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.hero--studio .hero__content { max-width: none; }
.hero--studio .hero__title { font-size: clamp(2.7rem, 5.6vw, 4.8rem); line-height: 1.02; margin-bottom: 1.5rem; color: #14120f; }
.hero--studio .hero__lead { font-size: clamp(1rem, 1.35vw, 1.12rem); max-width: 46ch; margin-bottom: 2rem; color: #4d4a43; }
.hero--studio .hero__actions { margin-bottom: 1.4rem; }
.hero__beeld { justify-self: end; width: 100%; max-width: 600px; }
.hero__beeld img {
  width: 100%; height: auto; display: block;
  /* randen zacht laten overlopen in de achtergrond */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.hero__google--kaal { border: 0; background: none; padding: 0; gap: 0.5rem; }
.hero--licht .hero__google--kaal { background: none; border: 0; }
.hero__google--kaal:hover { transform: none; }
.hero__google--kaal:hover span:last-child { color: #14120f; }
.hero__scrol {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.5rem; text-decoration: none;
  font-family: var(--font-head); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: #8b857a;
}
.hero__scrol i { width: 1px; height: 26px; background: linear-gradient(180deg, #b8912a, transparent); }
@media (max-width: 860px) {
  /* tablet: tekst en beeld blijven naast elkaar, de tekst krijgt iets meer ruimte */
  .hero__studio { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 1.25rem; }
  .hero__scrol { display: none; }
}
/* smalle telefoons: label bovenaan op één regel houden */
@media (max-width: 400px) { .hero__label { letter-spacing: 0.18em; font-size: 0.66rem; } .hero__label span { margin: 0 0.2em; } }
/* telefoon: geen herobeeld, alleen de tekst */
@media (max-width: 700px) {
  .hero__studio { grid-template-columns: 1fr; }
  .hero__beeld { display: none; }
}

/* Dienstensectie: 'Grip op uw cijfers' */
.hero--studio + .grip-sectie { padding-top: clamp(3.5rem, 6vw, 5rem); }
.grip-sectie .section__head h2 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.05; }

/* Kaart volgens het voorbeeld 'Advies op maat': de foto is de hele kaart, de tekst
   staat op het lichte deel ervan. Alle maten zijn in cqw (procent van de
   kaartbreedte), gemeten op het voorbeeld, zodat de verhoudingen op elke
   breedte gelijk blijven en de tekst precies op zijn plek in de foto valt. */
.grip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.3rem; margin-bottom: 2.5rem; }
.grip__kaart {
  container-type: inline-size;
  position: relative; isolation: isolate; overflow: hidden; display: block;
  aspect-ratio: 206 / 282; border-radius: 10px;
  border: 1px solid rgba(20, 18, 15, 0.07);
  background: #f4f4f3; color: #141414; text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 18, 15, 0.04), 0 18px 36px -24px rgba(20, 18, 15, 0.3);
  transition: transform 350ms var(--ease-out), box-shadow 350ms;
}
.grip__kaart:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(20, 18, 15, 0.04), 0 26px 46px -24px rgba(20, 18, 15, 0.38); }
.grip__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 800ms var(--ease-out); }
.grip__kaart:hover .grip__foto { transform: scale(1.035); }
/* Boekhouding: de laptop staat hoger dan in het ontwerp; iets naar rechts schuiven
   zodat de tekst niet over het scherm valt (pen en notitieboek blijven in beeld) */
.grip__kaart--boekhouding .grip__foto { transform-origin: 0% 30%; scale: 1.15; }
.grip__kaart--arbeidswetgeving .grip__foto { transform-origin: 0% 25%; scale: 1.14; }
/* zachte lichte sluier bovenin, zoals in het voorbeeld */
.grip__kaart::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.62) 34%, rgba(255, 255, 255, 0) 60%);
}
.grip__laag { display: block; padding: 5.8cqw 9.5cqw 0; }
.grip__icoon {
  display: grid; place-items: center; width: 25.2cqw; aspect-ratio: 1; border-radius: 50%;
  background: #f7eee1; color: #9a7430; margin: 0 0 1.6cqw -0.2cqw;
}
.grip__icoon svg { width: 11.5cqw; height: 11.5cqw; }
.grip__kaart h3 {
  font-family: var(--font-head); font-weight: 750; font-size: 8.1cqw; line-height: 1.3;
  letter-spacing: -0.02em; margin: 0; color: #141414; max-width: 70cqw;
}
.grip__kaart p { font-size: 5.45cqw; line-height: 1.45; color: #3f3c37; margin: 3.2cqw 0 0; max-width: 72cqw; }
.grip__pijl {
  position: absolute; right: 4.85cqw; bottom: 4.4cqw; width: 16.5cqw; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: #fdfdfd; color: #a47e3f;
  box-shadow: 0 4px 12px -4px rgba(20, 18, 15, 0.3); transition: transform 300ms var(--ease-out);
}
.grip__pijl svg { width: 7.4cqw; height: 7.4cqw; }
.grip__kaart:hover .grip__pijl { transform: translateX(3px); }
/* drie kaarten (gerelateerde diensten, tarievenpagina): zelfde kaart, gecentreerd */
.grip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
/* kleinere schermen: de kaarten blijven naast elkaar, je swipet erdoorheen */
@media (max-width: 1024px) {
  .grip {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(250px, 70vw);
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.4rem 0.2rem 1.2rem; margin: -0.4rem -0.2rem 1.6rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .grip::-webkit-scrollbar { display: none; }
  .grip__kaart { scroll-snap-align: start; }
}

/* ---------- Diensten-carrousel ---------- */
.carrousel { position: relative; }
.carrousel__spoor {
  display: flex; gap: 1.2rem; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* ruimte voor de schaduw van een kaart die omhoog komt */
  padding: 0.7rem 0.4rem 1.6rem; margin: -0.7rem -0.4rem -0.6rem;
  scroll-padding-left: 0.4rem;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.carrousel__spoor::-webkit-scrollbar { display: none; }
.carrousel__spoor:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--radius); }
.carrousel__spoor > .card {
  flex: 0 0 calc((100% - 3 * 1.2rem) / 4);
  scroll-snap-align: start;
}
.carrousel__nav { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.4rem; }
.carrousel__knop {
  width: 48px; height: 48px; border-radius: var(--radius-btn);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ghost-bg); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: border-color 300ms, color 300ms, transform 300ms var(--ease-out), opacity 300ms;
}
.carrousel__knop:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.carrousel__knop:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 1100px) { .carrousel__spoor > .card { flex-basis: calc((100% - 2 * 1.2rem) / 3); } }
@media (max-width: 860px)  { .carrousel__spoor > .card { flex-basis: calc((100% - 1.2rem) / 2); } }
@media (max-width: 620px)  {
  .carrousel__spoor > .card { flex-basis: 84%; }
  .carrousel__nav { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .carrousel__spoor { scroll-behavior: auto; } }

@media (max-width: 900px) {
  .usp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usp__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .usp__item:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .usp__item:nth-child(2) { padding-right: 0; }
}
@media (max-width: 560px) {
  .usp__grid { grid-template-columns: minmax(0, 1fr); }
  .usp__item { border-left: 0; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--border); }
  .usp__item:last-child { border-bottom: 0; }
}

/* ---------- Split sections ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__text p { color: var(--text-2); }
.frame { position: relative; border-radius: var(--radius); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.02); transition: transform 1.2s var(--ease-out), filter 800ms; aspect-ratio: 4/3; }
.frame:hover img { transform: scale(1.04); filter: saturate(1.12) contrast(1.04); }
.frame__glow {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(212,175,55,0.35), inset 0 0 60px rgba(212,175,55,0.08);
  background: linear-gradient(180deg, transparent 60%, rgba(8,8,10,0.6));
}
.split__media { position: relative; }
.split__media::before {
  content: ''; position: absolute; inset: 12% -6% -6% 12%; border-radius: var(--radius); z-index: -1;
  border: 1px solid var(--border-gold);
  background: linear-gradient(135deg, rgba(212,175,55,0.14), transparent 60%);
}
.float-badge {
  color: var(--text-light-fixed, #f4f2ec);
  position: absolute; left: -1.2rem; bottom: -1.2rem; display: flex; gap: 0.8rem; align-items: center;
  padding: 0.9rem 1.2rem; border-radius: 14px; border: 1px solid var(--border-gold);
  background: rgba(14,14,17,0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.9); animation: floatY 6s ease-in-out infinite;
}
.float-badge strong { font-family: var(--font-head); color: var(--gold-2); font-size: 1.15rem; display: block; line-height: 1; }
.float-badge span { font-size: 0.75rem; color: var(--text-2); }
@keyframes floatY { 50% { transform: translateY(-8px); } }

.checks { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; display: grid; gap: 0.7rem; }
.checks li { position: relative; padding-left: 2rem; color: var(--text); }
.checks li::before {
  content: ''; position: absolute; left: 0; top: 0.2rem; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-3));
  box-shadow: 0 4px 12px -4px var(--gold-glow);
}
.checks li::after {
  content: ''; position: absolute; left: 6px; top: 0.55rem; width: 8px; height: 4px;
  border-left: 2px solid #14110a; border-bottom: 2px solid #14110a; transform: rotate(-45deg);
}

[hidden] { display: none !important; }

/* ---------- Steps ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.steps__line { position: absolute; top: 34px; left: 8%; right: 8%; height: 1px; background: var(--border); }
.steps__line span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); box-shadow: 0 0 12px var(--gold-glow); transition: width 1.8s var(--ease-out); }
.steps.is-visible .steps__line span { width: 100%; }
.step { position: relative; padding: 0 0.5rem; text-align: center; }
.step__num {
  width: 68px; height: 68px; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--gold-2);
  background: var(--bg-2); border: 1px solid var(--border-gold);
  box-shadow: 0 0 0 6px var(--bg), 0 0 30px -8px var(--gold-glow); position: relative; z-index: 1;
  transition: transform 500ms var(--ease-spring), box-shadow 400ms;
}
.step:hover .step__num { transform: scale(1.1); box-shadow: 0 0 0 6px var(--bg), 0 0 40px -4px var(--gold-glow); }
.step h3 { font-size: 1.1rem; }
.step p { color: var(--text-2); font-size: 0.93rem; margin: 0; }

/* ---------- Tabs & Pricing ---------- */
.tabs {
  position: relative; display: flex; gap: 0.25rem; padding: 0.3rem; margin: 0 auto 2.5rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--ghost-bg);
  width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tab {
  position: relative; z-index: 1; padding: 0.6rem 1.2rem; border-radius: 7px; border: 0; background: transparent;
  font-family: var(--font-head); font-weight: 500; font-size: 0.9rem; color: var(--text-2); white-space: nowrap;
  transition: color 300ms; min-height: 42px;
}
.tab.is-active { color: #14110a; }
.tabs__indicator {
  position: absolute; top: 0.3rem; bottom: 0.3rem; left: 0; width: 0; border-radius: 7px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 6px 18px -6px var(--gold-glow);
  transition: left 450ms var(--ease-spring), width 450ms var(--ease-spring);
}
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; }
.price {
  position: relative; display: flex; flex-direction: column; padding: 2.2rem 1.9rem; border-radius: var(--radius);
  background: var(--card-bg); box-shadow: var(--card-shadow);
  border: 1px solid var(--border); transition: transform 500ms var(--ease-out), border-color 400ms, box-shadow 400ms;
}
.price:hover { transform: translateY(-6px); border-color: var(--border-gold); }
.price--featured {
  border-color: var(--border-gold);
  border-top: 3px solid var(--gold);
  padding-top: calc(2.2rem - 2px);
  box-shadow: 0 30px 70px -30px var(--gold-glow);
}
@media (min-width: 900px) { .price--featured { transform: scale(1.04); } .price--featured:hover { transform: scale(1.04) translateY(-6px); } }
.price header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; }
.price h3 { margin: 0; font-size: 1.3rem; }
.price__tag { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.price__amount {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 0.45rem;
  padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--border);
}
.price__va { grid-column: 1 / -1; margin-bottom: 0.15rem; }
.price__amount strong { grid-column: 1; }
.price__per { grid-column: 2; }
.price__amount strong { font-family: var(--font-head); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price--featured .price__amount strong { color: var(--gold-2); }
.price__amount small { color: var(--text-3); font-size: 0.85rem; }
.price__amount.is-changing strong { animation: priceFlip 500ms var(--ease-out); }
@keyframes priceFlip { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
.price__list { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: 0.7rem; flex: 1; }
.price__list li { position: relative; padding-left: 1.7rem; font-size: 0.93rem; color: var(--text-2); }
.price__list li::before {
  content: ''; position: absolute; left: 0; top: 0.35rem; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(212,175,55,0.15); border: 1px solid var(--border-gold);
  -webkit-mask: none;
}
.price__list li::after {
  content: ''; position: absolute; left: 4px; top: 0.6rem; width: 8px; height: 5px;
  border-left: 2px solid var(--gold-2); border-bottom: 2px solid var(--gold-2); transform: rotate(-45deg);
}
.pricing__note { text-align: center; color: var(--text-3); font-size: 0.88rem; margin-top: 2rem; }
.pricing__note a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Exact panel ---------- */
.exact-panel {
  padding: 2rem; border-radius: var(--radius); border: 1px solid var(--border-gold);
  background: var(--card-bg);
  box-shadow: var(--card-shadow), 0 40px 80px -40px rgba(0,0,0,0.5);
  position: relative; overflow: hidden;
}
.exact-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%); animation: sheen 6s linear infinite; }
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.exact-panel > img { width: 200px; height: auto; margin-bottom: 1.5rem; }
.exact-panel__rows { display: grid; gap: 0.6rem; margin-bottom: 1.6rem; }
.exact-row { display: flex; gap: 0.8rem; align-items: center; padding: 0.8rem 1rem; border-radius: var(--radius-sm); background: var(--input-bg); border: 1px solid var(--border); font-size: 0.9rem; }
.exact-row__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); flex: 0 0 auto; }
.exact-panel__chart { display: flex; gap: 8px; align-items: flex-end; height: 90px; padding: 0 0.4rem; }
.exact-panel__chart span {
  flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3)); opacity: 0.9;
  transform-origin: bottom; transform: scaleY(0); transition: transform 900ms var(--ease-out);
}
.is-visible .exact-panel__chart span { transform: scaleY(1); }
.exact-panel__chart span:nth-child(2) { transition-delay: 80ms; }
.exact-panel__chart span:nth-child(3) { transition-delay: 160ms; }
.exact-panel__chart span:nth-child(4) { transition-delay: 240ms; }
.exact-panel__chart span:nth-child(5) { transition-delay: 320ms; }
.exact-panel__chart span:nth-child(6) { transition-delay: 400ms; }
.exact-panel__chart span:nth-child(7) { transition-delay: 480ms; }

/* ---------- Reviews ---------- */
.google-badge {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.5rem;
  padding: 0.6rem 1.2rem; border-radius: 8px; border: 1px solid var(--border); background: var(--ghost-bg);
  font-size: 0.85rem; color: var(--text-2);
}
.google-badge strong { font-family: var(--font-head); font-size: 1.1rem; color: var(--text); }
.stars { color: var(--gold); letter-spacing: 0.1em; font-size: 0.95rem; }
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.3rem; }
.review {
  --mx: 50%; --my: 50%;
  margin: 0; padding: 1.8rem; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card-bg); box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; gap: 1rem; position: relative; overflow: hidden;
  transition: border-color 400ms, box-shadow 400ms, transform 500ms var(--ease-out);
}
.review::before { content: '"'; position: absolute; right: 1.2rem; top: 0.4rem; font-family: var(--font-head); font-size: 6rem; line-height: 1; color: rgba(212,175,55,0.12); font-weight: 800; }
.review:hover { border-color: var(--border-gold); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8), 0 0 40px -20px var(--gold-glow); }
.review p { margin: 0; color: var(--text); font-size: 0.98rem; flex: 1; }
.review footer { display: flex; align-items: center; gap: 0.8rem; }
.review footer strong { display: block; font-family: var(--font-head); font-size: 0.95rem; }
.review footer small { color: var(--text-3); font-size: 0.78rem; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; color: #14110a; background: linear-gradient(135deg, var(--gold-2), var(--gold-3)); }

/* ---------- Switch steps ---------- */
.switch { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1.2rem; align-items: center; }
.switch__step {
  text-align: center; padding: 2rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card-bg); box-shadow: var(--card-shadow); transition: transform 500ms var(--ease-out), border-color 400ms;
}
.switch__step:hover { transform: translateY(-5px); border-color: var(--border-gold); }
.switch__step > span {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 1rem;
  font-family: var(--font-head); font-weight: 700; color: #14110a; background: linear-gradient(135deg, var(--gold-2), var(--gold-3));
  box-shadow: 0 10px 25px -10px var(--gold-glow);
}
.switch__step h3 { font-size: 1.15rem; }
.switch__step p { margin: 0; color: var(--text-2); font-size: 0.93rem; }
.switch__arrow { color: var(--gold); font-size: 1.8rem; font-weight: 300; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0.8rem; }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); box-shadow: var(--card-shadow); overflow: hidden; transition: border-color 300ms; }
.faq__item[open] { border-color: var(--border-gold); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 1.1rem 3.2rem 1.1rem 1.4rem; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; min-height: 48px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ''; position: absolute; right: 1.3rem; top: 50%; width: 12px; height: 12px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg); transition: transform 350ms var(--ease-out);
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__body { padding: 0 1.4rem 1.2rem; color: var(--text-2); font-size: 0.95rem; }
.faq__body p { margin: 0; }

/* ---------- CTA Banner ---------- */
.cta-banner {
  --text: #14120f; --text-2: #4d4a43; --gold: #8a6a15; --gold-2: #a67c1a;
  position: relative; padding: clamp(3.5rem, 7vw, 6rem) 0; overflow: hidden; isolation: isolate;
  color: var(--text);
  background: linear-gradient(135deg, #fbf6e8 0%, #fdfcf8 55%, #f7f6f2 100%);
  border-top: 1px solid rgba(20,18,15,0.08);
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 130% at 82% 12%, rgba(166,124,26,0.14), transparent 62%);
}
.cta-banner::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold-2), var(--gold-3)); }
.cta-banner__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-banner h2 { margin-bottom: 0.4rem; }
.cta-banner p:last-child { margin: 0; color: var(--text-2); }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact__info > p { color: var(--text-2); }
.contact__list { list-style: none; padding: 0; margin: 1.8rem 0; display: grid; gap: 1.1rem; }
.contact__list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact__list svg { width: 22px; height: 22px; color: var(--gold); flex: 0 0 auto; margin-top: 3px; }
.contact__list small { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.contact__list a { font-weight: 500; transition: color 200ms; }
.contact__list a:hover { color: var(--gold-2); }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16/9; }
.map iframe { width: 100%; height: 100%; border: 0; }   /* kaart in eigen kleuren */

.form {
  position: relative; padding: 2.2rem; border-radius: var(--radius); border: 1px solid var(--border-gold);
  background: var(--card-bg);
  box-shadow: var(--card-shadow), 0 40px 80px -40px rgba(0,0,0,0.5); overflow: hidden;
}
.form__glow { position: absolute; width: 400px; height: 400px; top: -200px; right: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(212,175,55,0.18), transparent 65%); pointer-events: none; }
.form h3 { margin-bottom: 1.4rem; font-size: 1.4rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; position: relative; }
.field label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 1rem; min-height: 48px; border-radius: var(--radius-sm); font: inherit; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--border); transition: border-color 250ms, box-shadow 250ms;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23d4af37' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.field select option { background: var(--bg-2); }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.2); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #e5484d; }
.form__error { color: #ff8589; font-size: 0.88rem; margin: -0.2rem 0 1rem; }
.form__success { display: flex; gap: 0.6rem; align-items: center; margin: 1rem 0 0; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: rgba(212,175,55,0.12); border: 1px solid var(--border-gold); font-size: 0.9rem; }
.form__success svg { width: 20px; height: 20px; color: var(--gold-2); flex: 0 0 auto; }
.btn.is-loading { pointer-events: none; opacity: 0.8; }
.btn.is-loading svg { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 4rem 0 1.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer__brand p { color: var(--text-2); font-size: 0.92rem; margin: 1.2rem 0; max-width: 320px; }
.footer h4 { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer ul a { color: var(--text-2); font-size: 0.93rem; transition: color 200ms, padding-left 200ms; }
.footer ul a:hover { color: var(--gold-2); padding-left: 4px; }
.footer__contact li { color: var(--text-2); font-size: 0.93rem; }
.socials { display: flex; gap: 0.6rem; }
.socials a { width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-2); transition: all 300ms var(--ease-out); }
.socials a:hover { color: #14110a; background: var(--gold); border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 10px 20px -8px var(--gold-glow); }
.socials svg { width: 18px; height: 18px; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-3); }
.footer__bottom a:hover { color: var(--gold-2); }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 900; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1rem 0.6rem 0.6rem; border-radius: 12px; background: #25d366; color: #fff; font-weight: 600; font-size: 0.85rem;
  box-shadow: 0 10px 30px -8px rgba(37,211,102,0.6); transition: transform 300ms var(--ease-spring), box-shadow 300ms;
}
.wa-float svg { width: 32px; height: 32px; }
.wa-float:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 36px -8px rgba(37,211,102,0.7); }


/* ---------- Light sections ---------- */
.section--light {
  --text: #14120f; --text-2: #4d4a43; --text-3: #7d786f;
  --border: rgba(20,18,15,0.09); --border-gold: rgba(166,124,26,0.45);
  --gold: #b8912a; --gold-2: #d4af37; --gold-3: #8a6a15; --gold-glow: rgba(184,145,42,0.3);
  --card-bg: #ffffff; --card-shadow: 0 10px 30px -18px rgba(20,18,15,0.25);
  --ghost-bg: rgba(20,18,15,0.03); --input-bg: #fafaf8;
  --bg: #ffffff; --bg-2: #f6f5f1;
  background: var(--bg); color: var(--text);
}
.section--light.section--alt { --bg: #f6f5f1; --bg-2: #ffffff; }
.section--light .card:hover, .section--light .review:hover, .section--light .price:hover, .section--light .usp__item:hover {
  box-shadow: 0 30px 60px -30px rgba(20,18,15,0.35), 0 0 40px -20px var(--gold-glow);
}
.section--light .card::before { background: radial-gradient(400px circle at var(--mx) var(--my), rgba(184,145,42,0.10), transparent 45%); }
.section--light .gold-text { background-image: linear-gradient(100deg, #8a6a15 0%, #b8912a 30%, #d4af37 50%, #b8912a 70%, #8a6a15 100%); }
.section--light .price--featured { background: #fff; }   /* geen gele vulling meer: de gouden streep bovenaan markeert het pakket */
.section--light .price__amount strong, .section--light .price--featured .price__amount strong { color: var(--text); }
.section--light .btn--ghost { color: var(--text); }
.section--light .split__media::before { background: linear-gradient(135deg, rgba(184,145,42,0.12), transparent 60%); }
.section--light .exact-panel::before { background: linear-gradient(115deg, transparent 30%, rgba(184,145,42,0.06) 50%, transparent 70%); }
.section--light .avatar, .section--light .switch__step > span { color: #fff; }
.section--light .form__glow { background: radial-gradient(circle, rgba(212,175,55,0.22), transparent 65%); }
.section--light .review::before { color: rgba(184,145,42,0.14); }
.section--light .field select option { background: #fff; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.4rem; }
  .steps__line { display: none; }
  .pricing { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .contact { grid-template-columns: 1fr; }
  .switch { grid-template-columns: 1fr; }
  .switch__arrow { transform: rotate(90deg); text-align: center; animation: none; }
  .float-badge { left: 0.8rem; bottom: 0.8rem; }
  .split__media::before { inset: 10% 0 -4% 10%; }
}
@media (max-width: 560px) {
  .hero { padding-top: 7rem; }
  .hero__stats li { flex-basis: 50%; border-bottom: 1px solid var(--border); }
  .hero__stats li:nth-child(even) { border-right: 0; }
  .hero__stats li:nth-last-child(-n+2) { border-bottom: 0; }
  .form { padding: 1.5rem; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .wa-float span { display: none; }
  .wa-float { padding: 0.6rem; }
  .btn--lg { width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal, .hero__title .word { opacity: 1; transform: none; }
  .hero__particles, .cursor-glow, .orb { display: none; }
  .steps__line span, .exact-panel__chart span { width: 100%; transform: none; }
}

/* =====================================================================
   Multi-page additions
   ===================================================================== */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; padding: 0.6rem 1rem; background: var(--gold); color: #14110a; border-radius: 0 0 8px 0; font-weight: 600; }
.skip-link:focus { left: 0; }
.center { text-align: center; margin-top: 2.5rem; }

/* Nav dropdown */
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; position: relative; font-weight: 500; font-size: 0.93rem; color: var(--text-2); padding: 0.3rem 0; transition: color 250ms; }
.nav__link::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform: scaleX(0); transform-origin: right; transition: transform 350ms var(--ease-out); }
.nav__item:hover .nav__link, .nav__link.is-active, .nav__item:focus-within .nav__link { color: var(--text); }
.nav__item:hover .nav__link::after, .nav__link.is-active::after, .nav__item:focus-within .nav__link::after { transform: scaleX(1); transform-origin: left; }
.nav__sub-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0 0 0 0.3rem; color: var(--text-2); cursor: pointer; }
.nav__sub-toggle svg { transition: transform 300ms; }
.nav__item:hover .nav__sub-toggle svg, .nav__item:focus-within .nav__sub-toggle svg, .nav__item.is-open .nav__sub-toggle svg { transform: rotate(180deg); }
.nav__item:hover .nav__sub-toggle, .nav__item:focus-within .nav__sub-toggle { color: var(--text); }
.nav__backdrop { display: none; }
.nav__panel-foot { display: none; }
.dropdown {
  list-style: none; margin: 0; padding: 0.5rem; position: absolute; top: calc(100% + 12px); left: -0.5rem; min-width: 280px;
  background: rgba(14,14,17,0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-gold); border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), visibility 250ms;
}
.dropdown::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav__item:hover .dropdown, .nav__item:focus-within .dropdown, .nav__item.is-open .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.9rem; color: var(--text-2); transition: background 200ms, color 200ms; }
.dropdown a svg { color: var(--gold); flex: 0 0 auto; }
.dropdown a:hover { background: rgba(212,175,55,0.1); color: var(--text); }

/* Page hero (subpagina's) */
.page-hero { position: relative; padding: 9rem 0 4.5rem; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(212,175,55,0.12), transparent 60%), var(--bg); }
.page-hero--small { padding-bottom: 3.5rem; }
.page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-hero__bg .orb--1 { top: -200px; left: -200px; opacity: 0.35; }
.page-hero__img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); }
.page-hero--post { padding: 10rem 0 5rem; }
.page-hero--post .page-hero__bg .hero__overlay { background: linear-gradient(180deg, rgba(8,8,10,0.85), rgba(8,8,10,0.6) 60%, var(--bg)); }
/* Tekst en beeld even zwaar; de kop mag niet over vier regels lopen */
.page-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4.5vw, 3.5rem); align-items: center; }
.page-hero__grid--single { grid-template-columns: 1fr; max-width: 820px; }
.page-hero h1 { font-size: clamp(1.85rem, 3.2vw, 2.6rem); margin-bottom: 1rem; }
.page-hero .hero__lead { margin-bottom: 1.8rem; max-width: 60ch; }
.page-hero .hero__actions { margin-bottom: 0; }
.page-hero__media .frame img { aspect-ratio: 5/4; }

.breadcrumbs { margin-bottom: 1.5rem; font-size: 0.82rem; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; color: var(--text-3); }
.breadcrumbs li + li::before { content: '/'; margin-right: 0.4rem; color: var(--text-3); }
.breadcrumbs a { color: var(--text-2); transition: color 200ms; }
.breadcrumbs a:hover { color: var(--gold-2); }
.breadcrumbs [aria-current] { color: var(--gold); }

/* Cards */
.services--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card--compact { padding: 1.4rem; }
.card--compact .card__icon { width: 34px; height: 34px; }
.card--compact .card__icon svg { width: 18px; height: 18px; }
.card--compact .card__kop h3 { font-size: 1.04rem; }
.card--compact > p { font-size: 0.9rem; }
a.card { color: inherit; }   /* display komt van .card zelf (flexkolom) */

.checks--cards { margin: 0; gap: 0.9rem; }
.checks--cards li { padding: 1.1rem 1.2rem 1.1rem 3rem; border-radius: var(--radius); background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--card-shadow); color: var(--text-2); font-size: 0.95rem; }
.checks--cards li strong { color: var(--text); font-family: var(--font-head); font-weight: 600; }
.checks--cards li::before { left: 1.1rem; top: 1.25rem; }
.checks--cards li::after { left: calc(1.1rem + 6px); top: calc(1.25rem + 5px); }

.stats-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; }
.stats-grid li { text-align: center; padding: 2rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-bg); }
.stats-grid strong { display: block; font-family: var(--font-head); font-size: 2.8rem; font-weight: 700; line-height: 1; color: var(--gold-2); margin-bottom: 0.4rem; }
.stats-grid span:not(.counter) { font-size: 0.85rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }

.timeline { list-style: none; padding: 0; margin: 1.5rem 0 0; counter-reset: tl; display: grid; gap: 1.2rem; }
.timeline li { position: relative; padding-left: 3.4rem; counter-increment: tl; }
.timeline li::before { content: counter(tl, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; color: #14110a; background: linear-gradient(135deg, var(--gold-2), var(--gold-3)); box-shadow: 0 8px 20px -8px var(--gold-glow); }
.timeline li::after { content: ''; position: absolute; left: 20px; top: 46px; bottom: -1.2rem; width: 1px; background: var(--border-gold); }
.timeline li:last-child::after { display: none; }
.timeline strong { display: block; font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 0.2rem; color: var(--text); }
.timeline p { margin: 0; font-size: 0.93rem; }

/* Blog */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.posts--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 900px; margin-inline: auto; }
.post-card { display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-bg); box-shadow: var(--card-shadow); overflow: hidden; color: inherit; transition: transform 500ms var(--ease-out), border-color 400ms, box-shadow 400ms; }
.post-card:hover { transform: translateY(-6px); border-color: var(--border-gold); box-shadow: 0 30px 60px -30px rgba(20,18,15,0.35), 0 0 40px -20px var(--gold-glow); }
.post-card__img { aspect-ratio: 16/9; overflow: hidden; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out), filter 500ms; }
.post-card:hover .post-card__img img { transform: scale(1.05); filter: saturate(1.1); }
.post-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.post-card__body small { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.post-card__body h2, .post-card__body h3 { font-size: 1.15rem; margin: 0; }
.post-card__body p { color: var(--text-2); font-size: 0.92rem; margin: 0; flex: 1; }

.prose { font-size: 1.05rem; line-height: 1.75; }
.prose h2 { font-size: 1.7rem; margin: 2.2rem 0 0.7rem; }
.prose h3 { font-size: 1.25rem; margin: 1.6rem 0 0.5rem; }
.prose p, .prose ul, .prose ol { color: var(--text-2); margin-bottom: 1.1rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.4rem; }
.prose li::marker { color: var(--gold); font-weight: 600; }
.prose strong { color: var(--text); }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--gold-3); }
.doc-image { border: 1px solid var(--border); border-radius: var(--radius); margin: 1.5rem 0; }
.author { display: flex; gap: 1rem; align-items: center; margin-top: 3rem; padding: 1.4rem; border-radius: var(--radius); border: 1px solid var(--border-gold); background: var(--card-bg); }
.author img { width: 56px; height: 56px; }
.author strong { display: block; font-family: var(--font-head); }
.author span { font-size: 0.9rem; color: var(--text-2); }
.form__privacy { font-size: 0.78rem; color: var(--text-3); margin: 1rem 0 0; }
.form__privacy a { text-decoration: underline; }

@media (max-width: 860px) {
  .page-hero { padding: 7.5rem 0 3rem; }
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__media .frame img { aspect-ratio: 3/2; }
}

.post-meta { font-size: 0.85rem; color: var(--text-3); margin-bottom: 0.8rem; }
.section__head h2, .split__text h2, .page-hero h1 { margin-top: 0; }

/* =====================================================================
   Ambient motion — rustige, doorlopende animaties
   ===================================================================== */

/* Exact-grafiek: balken ademen na de eerste onthulling, met glanslaag */
.exact-panel__chart span:nth-child(1) { --i: 0; --amp: 0.86; }
.exact-panel__chart span:nth-child(2) { --i: 1; --amp: 0.80; }
.exact-panel__chart span:nth-child(3) { --i: 2; --amp: 0.90; }
.exact-panel__chart span:nth-child(4) { --i: 3; --amp: 0.78; }
.exact-panel__chart span:nth-child(5) { --i: 4; --amp: 0.88; }
.exact-panel__chart span:nth-child(6) { --i: 5; --amp: 0.84; }
.exact-panel__chart span:nth-child(7) { --i: 6; --amp: 0.82; }
.is-visible .exact-panel__chart span {
  animation: barBreath calc(4.2s + var(--i) * 0.35s) ease-in-out infinite alternate;
  animation-delay: calc(1.1s + var(--i) * 0.25s);
  position: relative; overflow: hidden;
}
@keyframes barBreath { from { transform: scaleY(1); } to { transform: scaleY(var(--amp, 0.85)); } }
.exact-panel__chart span::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent 55%);
  opacity: 0; animation: barGlint 5s ease-in-out infinite; animation-delay: calc(var(--i) * 0.6s);
}
@keyframes barGlint { 0%, 70%, 100% { opacity: 0; } 82% { opacity: 1; } }
.exact-panel__chart { position: relative; }
.exact-panel__chart::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6; animation: lineGlow 3s ease-in-out infinite alternate;
}
@keyframes lineGlow { from { opacity: 0.25; } to { opacity: 0.8; } }
.exact-row__dot { animation: dotPulse 2.6s ease-in-out infinite; }
.exact-row:nth-child(2) .exact-row__dot { animation-delay: 0.8s; }
.exact-row:nth-child(3) .exact-row__dot { animation-delay: 1.6s; }
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 6px var(--gold); transform: scale(1); } 50% { box-shadow: 0 0 16px var(--gold), 0 0 0 5px rgba(212,175,55,0.15); transform: scale(1.15); } }
.exact-panel > img { animation: floatY 7s ease-in-out infinite; }

/* Hero-raster drijft langzaam */
.hero__grid { animation: gridDrift 16s linear infinite; }
@keyframes gridDrift { from { background-position: 0 0, 0 0; } to { background-position: 64px 64px, 64px 64px; } }

/* Gouden knoppen: periodieke glans, ook zonder hover */
.btn--gold::before { animation: autoSheen 7s ease-in-out infinite; animation-delay: 2s; }
.btn--gold:hover::before { animation: none; transform: translateX(120%); }
@keyframes autoSheen { 0%, 78%, 100% { transform: translateX(-120%); } 92% { transform: translateX(120%); } }

/* Iconen en stapnummers staan stil; ze reageren alleen op hover */
.step:nth-child(5) .step__num { animation-delay: 2.4s; }
.switch__step > span { --bg: transparent; }
.timeline li:nth-child(2)::before { animation-delay: 0.7s; }
.timeline li:nth-child(3)::before { animation-delay: 1.4s; }
.timeline li:nth-child(4)::before { animation-delay: 2.1s; }
.timeline li:nth-child(5)::before { animation-delay: 2.8s; }
.timeline li::after { background: linear-gradient(180deg, var(--gold), rgba(212,175,55,0.15)); background-size: 100% 200%; animation: lineFlow 3s linear infinite; }
@keyframes lineFlow { from { background-position: 0 0; } to { background-position: 0 200%; } }
.steps.is-visible .steps__line span { animation: lineShimmer 4s linear infinite; background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--gold-3)); background-size: 200% 100%; }
@keyframes lineShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Cijfers gloeien zacht */
.hero__stats strong, .stats-grid strong, .price--featured .price__amount strong { animation: textGlow 4s ease-in-out infinite alternate; }
.hero__stats li:nth-child(2) strong, .stats-grid li:nth-child(2) strong { animation-delay: -1s; }
.hero__stats li:nth-child(3) strong, .stats-grid li:nth-child(3) strong { animation-delay: -2s; }
.hero__stats li:nth-child(4) strong, .stats-grid li:nth-child(4) strong { animation-delay: -3s; }
@keyframes textGlow { from { text-shadow: 0 0 0 rgba(212,175,55,0); } to { text-shadow: 0 0 18px rgba(212,175,55,0.45); } }

/* Beeld: langzame idle-zoom (Ken Burns), post-kaarten pannen */
.frame img { animation: kenBurns 18s ease-in-out infinite alternate; }
@keyframes kenBurns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.5%, 1%); } }
.frame:hover img { animation-play-state: paused; }
.post-card__img img { animation: kenBurns 22s ease-in-out infinite alternate; }
.post-card:nth-child(2) .post-card__img img { animation-delay: -7s; }
.post-card:nth-child(3) .post-card__img img { animation-delay: -14s; }
.frame__glow { animation: frameGlow 5s ease-in-out infinite alternate; }
@keyframes frameGlow { from { box-shadow: inset 0 0 0 1px rgba(212,175,55,0.25), inset 0 0 40px rgba(212,175,55,0.04); } to { box-shadow: inset 0 0 0 1px rgba(212,175,55,0.55), inset 0 0 70px rgba(212,175,55,0.12); } }

/* Uitgelicht pakket en formulier: zachte glansveeg */
.price--featured, .form { position: relative; overflow: hidden; }
.price--featured::before, .form::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%);
  transform: translateX(-120%); animation: cardSheen 9s ease-in-out infinite; animation-delay: 3s;
}
.section--light .price--featured::before, .section--light .form::before { background: linear-gradient(115deg, transparent 35%, rgba(212,175,55,0.18) 50%, transparent 65%); }
@keyframes cardSheen { 0%, 80%, 100% { transform: translateX(-120%); } 92% { transform: translateX(120%); } }
.price--featured > *, .form > *:not(.form__glow) { position: relative; z-index: 1; }
.form__glow { z-index: 0; }

/* Google-badge sterren twinkelen */

/* WhatsApp-knop: subtiele aandachtspuls */
.wa-float { animation: waPulse 4s ease-in-out infinite; }
@keyframes waPulse { 0%, 100% { box-shadow: 0 10px 30px -8px rgba(37,211,102,0.6); } 50% { box-shadow: 0 10px 30px -8px rgba(37,211,102,0.6), 0 0 0 8px rgba(37,211,102,0.12); } }

/* Pagina-hero achtergrondgloed pulseert */
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 40% at 75% 30%, rgba(212,175,55,0.14), transparent 70%); animation: heroGlow 8s ease-in-out infinite alternate; }
@keyframes heroGlow { from { opacity: 0.4; transform: scale(1); } to { opacity: 1; transform: scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
  .exact-panel__chart span, .exact-panel__chart span::after, .hero__grid, .btn--gold::before, .timeline li::before, .timeline li::after, .steps__line span, .hero__stats strong, .stats-grid strong, .price__amount strong, .frame img, .post-card__img img, .frame__glow, .price--featured::before, .form::before, .wa-float, .page-hero::before, .exact-row__dot, .exact-panel > img { animation: none !important; }
}

/* Home-hero: rustig, zonder bewegende onderdelen */
.hero__img { animation: none; transform: none; }
.hero .gold-text { animation: none; background-position: 50% center; }
.hero__stats strong { animation: none; text-shadow: none; }
.hero .btn--gold::before { animation: none; }
.hero__title .word.gold-text { animation: wordIn 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 150ms); background-position: 0 center; }

/* Werkgebied */
.regio-box { padding: 1.8rem; border-radius: var(--radius); border: 1px solid var(--border-gold); background: var(--card-bg); box-shadow: var(--card-shadow); }
.regio-box h3 { margin-bottom: 1rem; }
.regio-box > p { margin: 1rem 0 0; font-size: 0.88rem; color: var(--text-3); }
.regio-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem 1rem; }
.regio-list li { position: relative; padding-left: 1.4rem; font-size: 0.93rem; color: var(--text-2); }
.regio-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-2), var(--gold-3)); }

/* Plaatspagina's */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.loc-card { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-bg); box-shadow: var(--card-shadow); color: inherit; transition: transform 400ms var(--ease-out), border-color 300ms; }
.loc-card:hover { transform: translateY(-4px); border-color: var(--border-gold); }
.loc-card svg { color: var(--gold); flex: 0 0 auto; }
.loc-card strong { display: block; font-family: var(--font-head); font-size: 1rem; }
.loc-card span { font-size: 0.82rem; color: var(--text-3); }
.regio-list a { color: inherit; }
.regio-list a:hover { color: var(--gold-3); text-decoration: underline; }


/* =====================================================================
   Mobiel menu — volledig scherm, schuift van boven naar beneden
   Onder 1024px past de horizontale balk niet meer: dan het hamburgermenu.
   ===================================================================== */
@media (max-width: 1024px) {
  .nav__inner { position: relative; z-index: 3; }
  .nav__brand { position: relative; z-index: 4; }
  .nav__burger { display: flex; position: relative; z-index: 4; }
  .nav__backdrop { display: none; }

  /* Volledig scherm */
  .nav__links {
    position: fixed; inset: 0; z-index: 2; width: 100%;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: calc(5.2rem + env(safe-area-inset-top)) clamp(1.4rem, 7vw, 3.5rem) calc(2rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #101014 0%, #08080a 60%, #0c0c10 100%);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    transform: translateY(-100%); visibility: hidden;
    transition: transform 450ms var(--ease-out), visibility 450ms;
  }
  .nav__links.is-open { transform: none; visibility: visible; }
  /* gouden gloed linksboven, in stijl met de rest van de site */
  .nav__links::after {
    content: ''; position: absolute; top: -140px; right: -120px; width: 380px; height: 380px;
    border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.16), transparent 68%);
  }
  /* dekkende strook onder logo en sluitknop */
  .nav__links::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0;
    height: calc(4.6rem + env(safe-area-inset-top)); pointer-events: none; z-index: 1;
    background: linear-gradient(180deg, #101014 72%, rgba(16, 16, 20, 0) 100%);
  }

  /* Menu-items */
  .nav__links > a:not(.btn),
  .nav__item,
  .nav__cta,
  .nav__panel-foot { position: relative; z-index: 1; }

  .nav__links > a:not(.btn),
  .nav__item > .nav__link {
    font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em;
    color: var(--text); padding: 1.1rem 0.1rem; min-height: 60px;
    display: flex; align-items: center; border-bottom: 1px solid var(--border);
  }
  .nav__links > a:not(.btn)::after, .nav__item > .nav__link::after { display: none; }
  .nav__links > a.is-active, .nav__item > .nav__link.is-active { color: var(--gold-2); }
  .nav__links > a:not(.btn):active, .nav__item > .nav__link:active { color: var(--gold-2); }

  /* Diensten met uitklapbaar submenu */
  .nav__item { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--border); }
  .nav__item > .nav__link { border-bottom: 0; }
  .nav__sub-toggle {
    grid-column: 2; width: 46px; height: 46px; padding: 0; border-radius: 10px;
    border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); color: var(--gold);
  }
  .nav__item.is-open .nav__sub-toggle { border-color: var(--border-gold); background: rgba(212, 175, 55, 0.1); }

  .dropdown {
    grid-column: 1 / -1; position: static; min-width: 0; padding: 0; margin: 0;
    opacity: 1; transform: none;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height 400ms var(--ease-out), visibility 400ms;
  }
  .nav__item.is-open .dropdown { max-height: 660px; visibility: visible; }
  .dropdown::before { display: none; }
  .dropdown li:first-child a { margin-top: 0.4rem; }
  .dropdown li:last-child a { margin-bottom: 1rem; }
  .dropdown a { font-size: 1rem; padding: 0.75rem 0.8rem; min-height: 48px; border-radius: 10px; }
  .dropdown a:active { background: rgba(212, 175, 55, 0.12); color: var(--text); }

  /* Knop en snelcontact onderin */
  .nav__cta { margin: 1.8rem 0 0; width: 100%; min-height: 54px; }
  .nav__panel-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 0.8rem; }
  .nav__quick {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 50px;
    padding: 0.6rem 0.5rem; border-radius: 10px; border: 1px solid var(--border);
    font-size: 0.9rem; font-weight: 600; color: var(--text-2); background: rgba(255, 255, 255, 0.03);
  }
  .nav__quick svg { color: var(--gold); flex: 0 0 auto; }
  .nav__quick:active { border-color: var(--border-gold); color: var(--text); }

  /* items komen rustig mee naar beneden */
  .nav__links.is-open > * { animation: menuItemIn 420ms var(--ease-out) backwards; }
  .nav__links.is-open > *:nth-child(1) { animation-delay: 120ms; }
  .nav__links.is-open > *:nth-child(2) { animation-delay: 165ms; }
  .nav__links.is-open > *:nth-child(3) { animation-delay: 210ms; }
  .nav__links.is-open > *:nth-child(4) { animation-delay: 255ms; }
  .nav__links.is-open > *:nth-child(5) { animation-delay: 300ms; }
  .nav__links.is-open > *:nth-child(6) { animation-delay: 345ms; }
  .nav__links.is-open > *:nth-child(7) { animation-delay: 390ms; }
  .nav__links.is-open > *:nth-child(8) { animation-delay: 435ms; }
  @keyframes menuItemIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .nav__links, .nav__backdrop, .dropdown { transition: none; }
  .nav__links.is-open > * { animation: none; }
}

/* Credit in de footer */
.footer__credit a { color: var(--gold); font-weight: 600; transition: color 200ms; }
.footer__credit a:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.6rem; } }

/* =====================================================================
   Contact: keuze tussen formulier en online agenda
   ===================================================================== */
.contact__keuze { display: flex; flex-direction: column; }
.ctabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; padding: 0.35rem; margin-bottom: 1.2rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--ghost-bg);
}
.ctab {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.6rem 0.8rem; border: 0; border-radius: 9px; background: transparent;
  font-family: var(--font-head); font-size: 0.92rem; font-weight: 600; color: var(--text-2);
  transition: background 250ms, color 250ms, box-shadow 250ms;
}
.ctab svg { flex: 0 0 auto; }
.ctab:hover { color: var(--text); }
.ctab.is-active {
  color: #14110a; background: linear-gradient(135deg, var(--gold-2), var(--gold));
  box-shadow: 0 8px 20px -10px var(--gold-glow);
}
.cpanel { animation: paneelIn 400ms var(--ease-out); }
@keyframes paneelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.agenda-kaart h3 { margin-bottom: 0.6rem; }
.agenda-intro { color: var(--text-2); font-size: 0.95rem; margin-bottom: 1.4rem; }
.agenda-embed { min-height: 320px; }
.agenda-embed .calendly-inline-widget { border-radius: var(--radius); overflow: hidden; }

.agenda-preview { border: 1px dashed var(--border-gold); border-radius: var(--radius); padding: 1.4rem; background: var(--ghost-bg); }
.agenda-preview__head { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.agenda-preview__icon {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
  color: var(--gold-2); background: linear-gradient(145deg, rgba(212,175,55,0.22), rgba(212,175,55,0.05));
  border: 1px solid var(--border-gold);
}
.agenda-preview__head strong { display: block; font-family: var(--font-head); font-size: 1.05rem; color: var(--text); }
.agenda-preview__head span { font-size: 0.85rem; color: var(--text-3); }
.agenda-preview__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.agenda-dag { display: flex; flex-direction: column; gap: 0.45rem; }
.agenda-dag__naam { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.15rem; }
.agenda-slot {
  display: block; text-align: center; padding: 0.55rem 0.3rem; border-radius: 8px; font-size: 0.86rem; font-weight: 600;
  color: var(--text-2); border: 1px solid var(--border); background: var(--card-bg); opacity: 0.75;
}
.agenda-preview__note { margin: 1.2rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-3); }
.agenda-fallback { margin: 1.2rem 0 0; font-size: 0.88rem; color: var(--text-2); }
.agenda-fallback a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .ctabs { grid-template-columns: 1fr; }
  .agenda-preview__grid { grid-template-columns: 1fr; }
  .agenda-dag { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
  .agenda-dag__naam { width: 100%; margin: 0; }
  .agenda-slot { flex: 1; }
}
.agenda-preview__knop { margin-top: 1.1rem; }

/* =====================================================================
   Toegankelijkheid en correcties (contrast volgens WCAG AA)
   ===================================================================== */

/* Alleen voor schermlezers */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Spamval in het formulier */
.verborgen-veld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Lichte secties: donkerder goud (5,1:1 op wit) en leesbaarder grijs */
.section--light {
  --focus: #8a6a15;
  --gold: #8a6a15;
  --gold-3: #6f5310;
  --text-3: #6f6a61;
  --border: rgba(20, 18, 15, 0.12);
}
/* --gold-2 is bedoeld voor glans op donker; als tekst op licht is hij onleesbaar */
.section--light .stats-grid strong,
.section--light .step__num,
.section--light .switch__step > span,
.section--light .float-badge strong,
.section--light .form__success svg,
.pagina-licht .breadcrumbs a:hover,
.hero--licht .float-badge strong { color: #6f5310; }
.section--light .gold-text {
  background-image: linear-gradient(100deg, #6f5310 0%, #7a5e12 30%, #96731a 50%, #7a5e12 70%, #6f5310 100%);
}
/* Randen van invoervelden: 3,4:1 tegen wit */
.section--light .field input,
.section--light .field select,
.section--light .field textarea { border-color: #8e8a80; }
.section--light .field input:focus,
.section--light .field select:focus,
.section--light .field textarea:focus { border-color: var(--gold-3); box-shadow: 0 0 0 3px rgba(138, 106, 21, 0.18); }

/* WhatsApp-knop: donkere tekst op het herkenbare groen (7,8:1) */
.wa-float, .wa-float svg { color: #ffffff; }   /* wit op groen, zoals het WhatsApp-merk zelf */

/* Bron bij de Google-beoordelingen */
.google-badge__link { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.google-badge__link:hover { color: var(--gold-3); }
.footer__kvk { color: var(--text-3); font-size: 0.85rem; }

/* Kaart met toestemming */
.map--vraag { display: grid; place-items: center; background: var(--card-bg); border: 1px solid var(--border); }
.map__vraag { text-align: center; padding: 1.6rem; max-width: 380px; }
.map__icoon {
  display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 0.9rem; border-radius: 12px;
  color: var(--gold); background: rgba(212, 175, 55, 0.12); border: 1px solid var(--border-gold);
}
.map__vraag p { font-size: 0.88rem; color: var(--text-2); margin-bottom: 1.1rem; }
.map__vraag strong { color: var(--text); font-family: var(--font-head); }
.map__knoppen { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.loc-grid--compact { grid-template-columns: 1fr; gap: 0.6rem; margin-top: 0.4rem; }
.loc-grid--compact .loc-card { padding: 0.8rem 1rem; }
.regio-box > p a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Dienstenlinks op plaatspagina's */
.dienst-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.dienst-chips a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 46px; padding: 0.6rem 1.1rem;
  border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); box-shadow: var(--card-shadow);
  font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; color: var(--text);
  transition: transform 300ms var(--ease-out), border-color 300ms;
}
.dienst-chips a svg { color: var(--gold); flex: 0 0 auto; }
.dienst-chips a:hover { transform: translateY(-3px); border-color: var(--border-gold); }
.prose-intro { font-size: 1.05rem; color: var(--text); }
.av-quote { margin: 1.6rem 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--gold); background: var(--ghost-bg); border-radius: 0 10px 10px 0; font-style: italic; color: var(--text-2); }
.av-doc { margin: 1.6rem 0; max-width: 420px; }

/* Menubalk iets compacter op smallere desktops */
@media (min-width: 1025px) and (max-width: 1240px) {
  .nav__links { gap: 1.25rem; }
  .nav__links > a:not(.btn), .nav__link { font-size: 0.88rem; }
}

/* =====================================================================
   Subpagina's: lichte, open hero in plaats van een donkere
   ===================================================================== */
.pagina-licht, .pagina-licht .page-hero, .pagina-licht .nav { --focus: #8a6a15; }
.pagina-licht .page-hero {
  --text: #14120f; --text-2: #4d4a43; --text-3: #6f6a61;
  --gold: #8a6a15; --gold-3: #6f5310;
  --border: rgba(20, 18, 15, 0.12); --border-gold: rgba(138, 106, 21, 0.35);
  --ghost-bg: rgba(20, 18, 15, 0.03); --card-bg: #ffffff;
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 70%, #f7f6f2 100%);
  border-bottom: 1px solid rgba(20, 18, 15, 0.07);
}
.pagina-licht .page-hero::before {
  background: radial-gradient(ellipse 52% 44% at 78% 26%, rgba(212, 175, 55, 0.16), transparent 70%);
}
.pagina-licht .page-hero .orb--1 {
  background: radial-gradient(circle, rgba(212, 175, 55, 0.22), transparent 66%);
  opacity: 0.55;
}
.pagina-licht .page-hero .gold-text {
  background-image: linear-gradient(100deg, #6f5310 0%, #7a5e12 30%, #96731a 50%, #7a5e12 70%, #6f5310 100%);
}
.pagina-licht .page-hero .btn--ghost { color: var(--text); background: #fff; border-color: rgba(20, 18, 15, 0.16); }
.pagina-licht .page-hero .btn--ghost:hover { border-color: var(--border-gold); background: rgba(212, 175, 55, 0.08); }
.pagina-licht .page-hero .frame__glow { box-shadow: inset 0 0 0 1px rgba(138, 106, 21, 0.3), inset 0 0 50px rgba(212, 175, 55, 0.07); background: none; }
.pagina-licht .page-hero .frame img { box-shadow: 0 24px 50px -24px rgba(20, 18, 15, 0.35); }

/* Blogartikel: kop licht, foto eronder */
.page-hero--post { padding: 8.5rem 0 3rem; }
.post-beeld { margin: 2.2rem 0 0; }
.post-beeld img { width: 100%; border-radius: var(--radius); box-shadow: 0 24px 50px -24px rgba(20, 18, 15, 0.35); aspect-ratio: 16 / 9; object-fit: cover; }

/* Menubalk op lichte pagina's */
.pagina-licht .nav { --text: #14120f; --text-2: #4d4a43; --border: rgba(20, 18, 15, 0.10); }
.pagina-licht .nav.is-scrolled { background: rgba(255, 255, 255, 0.88); border-color: rgba(20, 18, 15, 0.08); }
.pagina-licht .nav__brand img { filter: none; }
.pagina-licht .nav__burger span { background: #14120f; }
.pagina-licht .dropdown { --text: #f4f2ec; --text-2: #b4b0a6; }
@media (max-width: 1024px) {
  .pagina-licht .nav__links { --text: #f4f2ec; --text-2: #b4b0a6; --text-3: #7f7b73; --border: rgba(255, 255, 255, 0.09); }
}

/* Rechtsvorm op mobiel: een keuzelijst in plaats van een blok van vier knoppen */
.tabs-keuze { display: none; }
@media (max-width: 620px) {
  .tabs { display: none; }
  .tabs-keuze {
    display: grid; gap: 0.35rem; width: 100%; max-width: 420px; margin: 0 auto 2.2rem; text-align: left;
  }
  .tabs-keuze label { font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; color: var(--text-2); }
  .tabs-keuze select {
    width: 100%; min-height: 48px; padding: 0.7rem 2.4rem 0.7rem 0.9rem; border-radius: var(--radius-btn);
    border: 1px solid var(--border); background-color: var(--card-bg); color: var(--text);
    font-family: var(--font-head); font-weight: 600; font-size: 1rem; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a15' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 18px;
  }
  .tabs-keuze select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .ctabs { grid-template-columns: 1fr; }
}
/* Kleur ook echt laten erven in de lichte menubalk */
.pagina-licht .nav { color: #14120f; }
.pagina-licht .nav__brand-text small { color: var(--text-2); }
@media (max-width: 1024px) {
  .pagina-licht .nav__links { color: var(--text); }
}

/* =====================================================================
   UX-detailronde (30-09-2026): hiërarchie, ritme en uitlijning
   ===================================================================== */

/* Eén hoekradius voor kaarten, foto's en panelen (knoppen houden 8px) */
:root { --radius: 10px; }

/* Koppenhiërarchie: de paginatitel is altijd de grootste kop op de pagina */
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.08; }
.grip-sectie .section__head h2 { font-size: clamp(2.1rem, 3.8vw, 3rem); }
.page-hero h1 { font-size: clamp(2.1rem, 3.6vw, 2.75rem); line-height: 1.05; margin-bottom: 1.1rem; }

/* H3 in twee vaste maten: tussenkop 20px, kaart- en staptitel 18px */
h3 { font-size: 1.25rem; font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; }
.card__kop h3, .card__body h3, .card--compact .card__kop h3, .step h3, .switch__step h3,
.usp__item h3, .post-card__body h2, .post-card__body h3 { font-size: 1.125rem; font-weight: 650; line-height: 1.3; }
.price h3, .form h3, .prose h3 { font-size: 1.25rem; font-weight: 650; }

/* Sectiekop: vaste ruimte tussen kop, inleiding en inhoud */
.section__head h2 { margin-bottom: 0.9rem; }
.section__lead { font-size: 1.06rem; line-height: 1.65; max-width: 62ch; margin-inline: auto; }

/* Knoppen: gewoon 48px, groot 56px (was 63px) */
.btn--lg { padding: 0 1.9rem; min-height: 56px; font-size: 1rem; }

/* Leesbare regellengte: lopende tekst nooit breder dan ~68 tekens */
.container--narrow { max-width: 740px; }
.faq__body p { max-width: 66ch; }
.prose p, .prose li { max-width: 68ch; }
.split__text p { max-width: 60ch; }

/* Het kader achter een foto hangt altijd naar de tekst toe, dus nooit
   buiten de uitlijnlijn van de pagina (stak eerst 34px rechts uit) */
@media (min-width: 861px) {
  .split__media::before { inset: 12% 12% -6% -6%; }
  .split:not(.split--reverse) > .split__media:first-child::before { inset: 12% -6% -6% 12%; }
  /* het '15+ jaar'-label binnen de linkerlijn houden */
  .float-badge { left: 1.2rem; }
}

/* ---------- Ritme: secties dichter op elkaar (klantwens 30-09-2026) ---------- */
.section { padding-block: clamp(3.25rem, 6vw, 5.5rem); }
.hero--licht + .section, .hero--studio + .grip-sectie { padding-top: clamp(2.75rem, 4.5vw, 4rem); }
.section__head { margin-bottom: clamp(1.9rem, 3.6vw, 2.9rem); }
.cta-banner { padding-block: clamp(3rem, 5.5vw, 4.75rem); }
.page-hero { padding-bottom: clamp(2.75rem, 5vw, 3.75rem); }

/* ---------- Mobiel: tikvlakken van minstens ~40px zonder dat de opmaak verschuift ---------- */
.contact__list a, .footer__contact a, .footer .container > span a, .regio-list a,
.google-badge__link, .agenda-fallback a {
  display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem;
}
.field label { font-size: 0.875rem; }

/* badge op foto: op lichte secties een lichte kaart (was donker glas met donkere tekst) */
.section--light .float-badge, .hero--licht .float-badge {
  background: rgba(255, 255, 255, 0.94); border-color: rgba(184, 145, 42, 0.28);
  box-shadow: 0 18px 40px -22px rgba(20, 18, 15, 0.45);
}
.section--light .float-badge span, .hero--licht .float-badge span { color: #4d4a43; }

/* ---------- Telefoon ---------- */
@media (max-width: 700px) {
  /* hero niet meer schermhoog: geen lege strook onder de Google-score */
  .hero--studio { min-height: 0; padding-bottom: 2.75rem; }
}
@media (max-width: 1024px) {
  /* swipe-rij loopt door tot de schermrand, eerste kaart blijft op de tekstlijn */
  .grip { margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-inline: 1.25rem; }
  .grip--3 { max-width: none; margin-inline: -1.25rem; }
}

/* kruimelpad op één regel; een lange paginatitel wordt afgekapt in plaats van door te lopen */
.breadcrumbs ol { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.breadcrumbs li { flex: none; }
.breadcrumbs li[aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* open mobiel menu: logo en sluitknop licht op het donkere paneel */
.nav.is-menu-open { --text: #f4f2ec; --text-2: #b4b0a6; background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pagina-licht .nav.is-menu-open { --text: #f4f2ec; --text-2: #b4b0a6; background: transparent; border-color: transparent; }
.nav.is-menu-open .nav__burger span { background: #f4f2ec; }
.nav.is-menu-open .nav__brand-text strong { color: #f4f2ec; }
.breadcrumbs li { white-space: nowrap; }
.hero__google--kaal { padding-block: 0.6rem; margin-block: -0.6rem; }

/* ---------- Leesbaarheid lange teksten (desktopronde) ---------- */
/* artikelen en juridische pagina's: iets grotere letter, ~72 tekens per regel */
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.75; max-width: 62ch; }
.prose .prose-intro { max-width: 62ch; }
/* FAQ-antwoorden: 16px en maximaal ~72 tekens */
.faq__body p { font-size: 1rem; line-height: 1.7; max-width: 60ch; }
/* intro onder sectiekoppen: ~70 tekens */
.section__lead { max-width: 56ch; }
/* geen losse woorden op de laatste regel van alinea's */
p, li { text-wrap: pretty; }
.section__lead, .section__head p, .center p { text-wrap: balance; }

/* 'waarom'-kaarten: altijd volle rijen (3 + 3), nooit 4 + 2 */
.services--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .services--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .services--3 { grid-template-columns: 1fr; } }

/* tussenkoppen in artikelen en juridische teksten: vet + dun op één regel (geen los woord op regel 2) */
.prose .kop-duo strong, .prose .kop-duo .kop-duo__licht { display: inline; }

/* plaatsenraster: onvolledige laatste rij gecentreerd in plaats van links */
.loc-grid:not(.loc-grid--compact) { display: flex; flex-wrap: wrap; justify-content: center; }
.loc-grid:not(.loc-grid--compact) > * { flex: 0 1 calc((100% - 4rem) / 5); min-width: 0; }
@media (max-width: 1024px) { .loc-grid:not(.loc-grid--compact) > * { flex-basis: calc((100% - 2rem) / 3); } }
@media (max-width: 640px) { .loc-grid:not(.loc-grid--compact) > * { flex-basis: 100%; } }
.prose p, .prose li, .prose .prose-intro { max-width: 58ch; }
/* blogfoto's zijn 600px breed: niet oprekken (anders onscherp), valt gelijk met de tekstkolom */
.post-beeld img { max-width: 600px; }
.post-beeld img { height: auto; }

/* ---------- Detailronde 3 ---------- */
/* footer: ruimte onder de laatste regel, zodat de zwevende WhatsApp-knop er niet overheen valt */
.footer { padding-bottom: 5.5rem; }
/* prijskaarten: lijstregels overal even ver uit elkaar, de knop blijft onderaan */
.price__list { align-content: start; }

/* ---------- Goudknop bestand tegen 'geforceerd donker' ----------
   Samsung Internet (en Chrome met de vlag 'force dark') keert bij batterijbesparing alle
   kleuren en CSS-verlopen om: goud wordt bruin. Foto-achtige afbeeldingen laat zo'n browser
   met rust, en een CSS-filter werkt pas ná die omkering. Daarom: het goudverloop als
   afbeelding (het CSS-verloop blijft als reserve eronder) en tekst/icoon via een filter
   altijd donker. In gewone browsers ziet de knop er exact hetzelfde uit. */
.btn--gold {
  background-image: url("assets/knop-goud.png"), linear-gradient(135deg, #f7e196 0%, #e2c559 38%, #d4af37 72%, #bb9429 100%);
  background-size: 100% 100%; background-repeat: no-repeat;
}
.btn--gold > * { filter: brightness(0); }