/* Tokens */
:root{
  --bg:#ffffff; --fg:#0b0b0c; --muted:#6b7280; --line:#e5e7eb;
  --accent:#e11d2a; --accent-ink:#ffffff; --surface:#f9fafb;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --glow:radial-gradient(60% 60% at 70% 10%, rgba(225,29,42,.10) 0%, rgba(225,29,42,0) 60%);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92%);margin-inline:auto}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.animate-in{transition:none}}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#000;color:#fff;border-radius:8px;z-index:10000}

/* Header (glass) */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.72);backdrop-filter:saturate(1.35) blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.55rem}
.brand-mark{width:18px;height:18px;border-radius:5px;background:var(--accent);box-shadow:inset 0 -4px 10px rgba(0,0,0,.2)}
.brand-name{font-weight:700}
.brand-sub{color:var(--muted);font-size:.9rem}
.main-nav .nav-toggle{display:none;background:none;border:0;width:40px;height:40px;border-radius:12px}
.main-nav .bar{display:block;height:2px;width:22px;background:#111;margin:5px auto}
.nav-list{display:flex;gap:.25rem;align-items:center;list-style:none;margin:0;padding:0} /* <-- puntjes weg */
.nav-list>li>a{padding:.5rem .7rem;border-radius:10px}
.nav-list>li>a:hover{background:var(--surface)}
.nav-cta .btn{padding:.5rem .85rem}
[data-elevate].scrolled{box-shadow:0 6px 24px rgba(0,0,0,.06)}

/* Buttons & icons */
.btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;padding:.72rem 1rem;border-radius:14px;border:1px solid var(--line);font-weight:600;transition:transform .06s ease,box-shadow .25s ease,background .25s ease;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn-primary:hover{box-shadow:0 14px 36px rgba(225,29,42,.24)}
.btn-ghost{background:#fff}
.i{width:18px;height:18px;display:inline-block}
a:focus-visible,.btn:focus-visible{outline:3px solid rgba(225,29,42,.35);outline-offset:2px;border-radius:12px}

/* Hero */
.hero{position:relative;padding:5.5rem 0 2.5rem;background:linear-gradient(180deg,#fff,#fff 60%,#f7f7f9)}
.hero-glow{position:absolute;inset:0;background:var(--glow);pointer-events:none;transform:translateY(0)}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center}
.lead{font-size:1.125rem;color:#222}
.hero-media img{border-radius:24px;box-shadow:var(--shadow);transform:translateY(0);will-change:transform}
.trust-badges{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.25rem;color:var(--muted)}
.btw-note{display:block;margin-top:.5rem;color:var(--muted);font-size:.85rem}

/* Counters */
.section-counters{padding:1.25rem 0;background:#fff}
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.counter-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem;text-align:center;box-shadow:var(--shadow)}
.counter-number{display:block;font-weight:700;font-size:2rem;line-height:1}
.counter-label{display:block;color:var(--muted);margin-top:.25rem}

/* Sections / grids */
.section{padding:4rem 0}
.section-alt{background:var(--surface)}
.section-head h2{font-size:1.8rem;margin:0 0 .5rem}
.section-head p{color:var(--muted);margin:0 0 2rem}
.grid{display:grid;gap:1rem}

/* Services */
.services{grid-template-columns:repeat(4,1fr)}
.service{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.service:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
.service-icon{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;margin-bottom:.35rem}

/* Portfolio */
.portfolio{grid-template-columns:repeat(3,1fr)}
.portfolio-card{padding:.65rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.portfolio-card figcaption{margin-top:.5rem;color:var(--muted);font-size:.95rem}
.portfolio-card img{cursor:zoom-in;border-radius:14px}

/* Lightbox */
.lb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:2000;padding:2rem}
.lb-backdrop img{max-width:min(96vw,1400px);max-height:86vh;border-radius:14px}
.lb-backdrop .lb-caption{color:#fff;margin-top:.75rem;text-align:center}

/* Before/After */
.before-after{position:relative;overflow:hidden}
.ba-img{display:block;width:100%;height:auto;border-radius:14px}
.ba-after{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ba-range{position:absolute;left:0;right:0;bottom:10px;width:calc(100% - 2rem);margin:0 1rem;cursor:ew-resize}

/* Contact & form */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:1rem}
.map-card iframe{width:100%;height:340px;border:0;border-radius:12px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.25rem;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field input,.field textarea{width:100%;padding:.8rem .9rem;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff}
.field input:focus,.field textarea:focus{outline:3px solid rgba(225,29,42,.18);border-color:var(--accent)}
.span-2{grid-column:1/-1}
.actions{display:flex;align-items:center;gap:1rem;margin-top:.5rem}
.form-note{color:var(--muted);font-size:.95rem}

/* Sticky CTA dock (mobile) */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:1200;display:none;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);padding:.35rem env(safe-area-inset-right) calc(.35rem + env(safe-area-inset-bottom)) env(safe-area-inset-left);
}
.sticky-cta a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem 0;color:#111}
.sticky-cta .i{width:20px;height:20px}
@media (max-width:720px){.sticky-cta{display:flex;justify-content:space-around}}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:#fff;padding:2rem 0;color:var(--muted);text-align:center}

/* Animations */
.animate-in{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.animate-in.is-visible{opacity:1;transform:none}

/* Helpers */
.stars{letter-spacing:2px;font-size:1.05rem;color:#f5a623}
.accent{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Responsive */
@media (max-width:1100px){.portfolio{grid-template-columns:repeat(2,1fr)}}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:1.25rem}
  .services{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .main-nav .nav-toggle{display:block}
  .nav-list{position:absolute;right:1rem;top:60px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:.6rem;display:none;flex-direction:column;gap:.25rem;width:min(92vw,420px);box-shadow:var(--shadow)}
  .nav-list.open{display:flex}
  .services,.portfolio,.counters{grid-template-columns:1fr}
}
/* ===== Reviews ===== */
.reviews{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.review-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.1rem 1.1rem 1rem;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.review-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.08) }

.review-top{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.5rem;
}
.g-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:600; font-size:.95rem;
  background:#fff; border:1px solid var(--line);
  padding:.25rem .5rem; border-radius:999px;
}
.i-g{ width:18px; height:18px }

.stars{ display:flex; gap:.15rem; color:#f5a623 }
.stars .i{ width:16px; height:16px }

.review-text{
  margin:.25rem 0 .75rem;
  color:#111;
}
.review-meta{
  display:flex; align-items:center; gap:.25rem; color:var(--muted); font-size:.95rem;
}
.reviewer{ font-weight:600 }

/* Responsive */
@media (max-width:980px){ .reviews{ grid-template-columns:1fr 1fr } }
@media (max-width:720px){ .reviews{ grid-template-columns:1fr } }
/* Hero tweaks */
.eyebrow{font-weight:600; letter-spacing:.02em; color:var(--muted); margin:0 0 .25rem}
.hero h1{font-size:clamp(1.8rem, 3.6vw, 2.4rem); line-height:1.15; margin:.1rem 0 .5rem}
.hero .microcopy{margin:.5rem 0 0; color:var(--muted); font-size:.95rem}

/* Proof bar */
.proofbar{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin:.5rem 0 1rem; color:#111}
.proofbar .sep{opacity:.35}
.open-chip{padding:.15rem .55rem; border:1px solid var(--line); border-radius:999px; font-weight:600; font-size:.9rem; background:#fff}

/* Quick chips */
.quickchips{display:flex; flex-wrap:wrap; gap:.4rem; margin: .35rem 0 1rem}
.chip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:.45rem .7rem; font-weight:600; cursor:pointer; transition:transform .06s ease, box-shadow .2s ease}
.chip:hover{box-shadow:0 8px 24px rgba(0,0,0,.06)}
.chip:active{transform:translateY(1px)}

/* Werkgebied chips */
.areas{display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; margin:.25rem 0 0}
.areas li{border:1px solid var(--line); border-radius:999px; padding:.3rem .6rem; color:var(--muted); background:#fff}

/* Media + overlay voor leesbaarheid */
.hero-media{position:relative}
.hero-media img{border-radius:24px; box-shadow:var(--shadow); display:block}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(0,0,0,.12), rgba(0,0,0,0) 45%);
  border-radius:24px;
  pointer-events:none;
}

/* Kleine responsieve fine-tunes */
@media (max-width:980px){
  .proofbar{gap:.35rem}
  .hero .hero-actions{gap:.6rem}
}
/* Hero proofbar (zonder open/gesloten chip) */
.proofbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  margin:.5rem 0 1.1rem; color:#111;
}
.proofbar .sep{opacity:.35}

/* Hero counters in glasstijl */
.hero-counters{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.75rem; margin-top:1.1rem;
}
.hero-counter{
  display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  padding:.9rem 1rem; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.75); backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.hero-counter .num{font-weight:700; font-size:1.8rem; line-height:1}
.hero-counter .label{color:var(--muted); font-size:.95rem}

/* Kleine tuning voor mobiel */
@media (max-width: 720px){
  .hero-counters{ grid-template-columns:1fr; }
  .hero-counter{ align-items:center; text-align:center; }
}
/* --- Override: alleen de hero-achtergrond vervangen --- */
/* --- Alleen hero-achtergrond vervangen --- */
.hero,
section.hero{
  background-color: #ffffff !important;
  background-image: url("../assets/bg/background.png") !important; /* CSS zit in /css/, dus ../ */
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* ===== Portfolio: clean grid + cinematic viewer ===== */

/* GRID */
.clean-mag .p-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem; list-style:none; padding:0; margin:0;
}
.clean-mag .p-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
  outline:none;
}
.clean-mag .p-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.10) }
.clean-mag .p-card:focus-visible{ outline:3px solid rgba(225,29,42,.35); outline-offset:3px }
.clean-mag .p-media{aspect-ratio: 16 / 9; background:#fff}
.clean-mag .p-media img{width:100%; height:100%; object-fit:cover; display:block}
.clean-mag .p-info{padding:.8rem 1rem}
.clean-mag .p-info h3{margin:.1rem 0 .2rem; font-size:1.05rem}
.clean-mag .muted{color:var(--muted); margin:0}

/* Viewer (modal) */
.pv[hidden]{display:none}
.pv{
  position:fixed; inset:0; z-index:3000;
  display:grid; place-items:center;
}
.pv-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(6px);
}
.pv-frame{
  position:relative; width:min(1200px, 94vw); background:#fff; border-radius:18px; border:1px solid var(--line);
  box-shadow:0 40px 80px rgba(0,0,0,.25); overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto;
}
.pv-x{
  position:absolute; top:10px; right:10px; z-index:2;
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.9); border-radius:12px; cursor:pointer;
  backdrop-filter:blur(8px);
}
.pv-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.9); border-radius:12px; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.12); backdrop-filter:blur(8px);
}
.pv-arrow.prev{left:10px}
.pv-arrow.next{right:10px}
.pv .i{width:18px; height:18px}

/* Stage */
.pv-stage{ position:relative; background:#000; }
.pv-track{
  margin:0; padding:0; list-style:none;
  display:flex; transition:transform .45s cubic-bezier(.2,.8,.2,1); will-change:transform;
}
.pv-slide{
  position:relative; flex:0 0 100%;
  aspect-ratio: 16 / 10; display:grid; place-items:center; background:#000;
}
.pv-slide img{width:100%; height:100%; object-fit:contain; background:#000}

/* Before/After inside viewer */
.pv-ba{overflow:hidden}
.pv-ba .ba-img{display:block;width:100%;height:100%;object-fit:cover}
.pv-ba .ba-after{position:absolute; inset:0; clip-path:inset(0 50% 0 0)}
.pv-ba .ba-handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:rgba(255,255,255,.95); box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.pv-ba .ba-range{position:absolute; left:0; right:0; bottom:12px; width:calc(100% - 2rem); margin:0 1rem}
.pv-ba .ba-tag{position:absolute; top:10px; left:12px; right:12px; display:flex; justify-content:space-between; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); pointer-events:none}

/* Filmstrip */
.pv-strip-wrap{
  background:#fff; border-top:1px solid var(--line);
  padding:.5rem .75rem;
}
.pv-strip{
  margin:0; padding:0; list-style:none; display:flex; gap:.5rem;
  overflow:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.pv-strip::-webkit-scrollbar{display:none}
.pv-thumb{
  flex:0 0 auto; width:120px; aspect-ratio: 16 / 10; border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer;
  opacity:.85; transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  background:#fff;
}
.pv-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.pv-thumb:hover{opacity:1; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.08)}
.pv-thumb.is-active{border-color:var(--accent); opacity:1; box-shadow:0 12px 28px rgba(225,29,42,.12)}

/* Responsief */
@media (max-width: 1100px){
  .clean-mag .p-grid{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width: 720px){
  .clean-mag .p-grid{ grid-template-columns:1fr }
  .pv-slide{ aspect-ratio: 4 / 3 }
  .pv-thumb{ width:96px }
}
/* ===== Services (Apple-clean met foto) ===== */
.section-services .svc-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1100px){ .section-services .svc-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:720px){ .section-services .svc-grid{ grid-template-columns:1fr } }

.section-services .svc-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.section-services .svc-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
  border-color:#eaecef;
}

/* Media (vierkant) + subtiele zoom op hover */
.section-services .svc-media{ aspect-ratio:1 / 1; overflow:hidden; background:#fff }
.section-services .svc-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1); transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.section-services .svc-card:hover .svc-media img{ transform:scale(1.04) }

/* Body */
.section-services .svc-body{ padding:1rem }
.section-services h3{ margin:.1rem 0 .35rem; font-size:1.1rem }
.section-services .svc-copy{ margin:0 0 .6rem; color:#111 }
.section-services .svc-bullets{ list-style:none; padding:0; margin:0 0 .7rem; display:grid; gap:.25rem; color:#111 }
.section-services .svc-bullets .i{ width:16px; height:16px; margin-right:.35rem; }
.section-services .svc-bullets li{ display:flex; align-items:baseline; gap:.35rem }

.section-services .chip{
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--line); background:#fff; color:var(--muted);
  padding:.25rem .6rem; border-radius:999px; font-weight:600; font-size:.9rem;
}
.section-services .svc-meta{ display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.65rem }

.section-services .svc-actions{ display:flex; gap:.5rem; flex-wrap:wrap }

/* Reveal animaties (gebruikt je bestaande .animate-in + IntersectionObserver) */
.section-services .animate-in{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease }
.section-services .animate-in.is-visible{ opacity:1; transform:none }
/* ===== Reviews met parallax achtergrond ===== */
.section-reviews{
  position: relative;
  z-index: 0;            /* nieuwe stacking context */
  overflow: hidden;
  /* kleine extra ruimte zodat de bg veilig meescrollt */
  padding-block: 4rem;
}

/* Achtergrondlaag (mix-spiraal) */
.section-reviews::before{
  content:"";
  position:absolute;
  inset:-10% 0 -10% 0;  /* iets groter dan de sectie voor soepele scroll */
  background: url("../assets/bg/reviews-plaster.png") center/cover no-repeat;
  opacity: .14;          /* subtiel houden */
  transform: translateY(var(--parallax, 0px));
  will-change: transform;
  pointer-events: none;
  z-index: -1;
  filter: contrast(1.02) saturate(1);
}

/* Als gebruiker animaties wil verminderen: maak ‘m statisch */
@media (prefers-reduced-motion: reduce){
  .section-reviews::before{ transform: none !important; }
}

/* (Optioneel) op heel kleine schermen iets dichterbij voor detail */
@media (max-width: 720px){
  .section-reviews::before{ opacity: .18; }
}

/* — bestaande review card styles, voor de zekerheid wat spacing — */
.section-reviews .reviews{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
@media (max-width:980px){ .section-reviews .reviews{ grid-template-columns:1fr 1fr } }
@media (max-width:720px){ .section-reviews .reviews{ grid-template-columns:1fr } }

.section-reviews .review-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.section-reviews .review-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.08) }
.section-reviews .review-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem }
.section-reviews .g-badge{ display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--line); padding:.25rem .5rem; border-radius:999px; font-weight:600; background:#fff }
.section-reviews .i-g{ width:18px; height:18px }
.section-reviews .stars{ display:flex; gap:.15rem; color:#f5a623 }
.section-reviews .stars .i{ width:16px; height:16px }
.section-reviews .review-text{ margin:.25rem 0 .75rem; color:#111 }
.section-reviews .review-meta{ display:flex; gap:.25rem; color:var(--muted); font-size:.95rem }
.section-reviews .reviewer{ font-weight:600 }
/* ===== Reviews met zekere parallax-achtergrond ===== */
.section-reviews{
  position: relative;
  overflow: hidden;
  padding-block: 4rem;
  /* maak een eigen stacking context, maar laat de bg zichtbaar */
  z-index: 0;
}

/* Zorg dat de content altijd boven de bg ligt */
.section-reviews > *{
  position: relative;
  z-index: 1;
}

/* Achtergrondlaag */
.section-reviews::before{
  content: "";
  position: absolute;
  inset: -8% 0 -8% 0; /* iets groter voor smooth scroll */
  background: url("../assets/bg/reviews-plaster.png?v=1") center / cover no-repeat;
  opacity: 0.18;                     /* zie je meteen; pas later evt. terug naar .14 */
  transform: translate3d(0, var(--rvx, 0px), 0);
  will-change: transform;
  pointer-events: none;
  z-index: 0;                        /* niet meer negatief */
  filter: contrast(1.02) saturate(1);
}

/* Motion-safe: geen parallax bij reduce motion */
@media (prefers-reduced-motion: reduce){
  .section-reviews::before{ transform: none !important; }
}

/* (Bestaande review card layout mag blijven; dit is alleen zekerheid) */
.section-reviews .reviews{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
@media (max-width:980px){ .section-reviews .reviews{ grid-template-columns:1fr 1fr } }
@media (max-width:720px){ .section-reviews .reviews{ grid-template-columns:1fr } }
/* ===== Reviews BG - duidelijker & toch clean ===== */
.section-reviews{
  /* Tweaken kan hier: */
  --rv-opacity: .60;   /* zichtbaarheid van de swirl (0–1)  — was .18 */
  --rv-scale: 1;    /* beetje inzoomen zodat details groter zijn */
  --rv-contrast: 1.22; /* iets meer definitie */
}

/* vervangt alleen de styling van de achtergrondlaag */
.section-reviews::before{
  /* iets meer definitie via een heel zachte schaduw-gradient + de PNG */
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(0,0,0,.06), rgba(0,0,0,0) 60%),
    url("../assets/bg/reviews-plaster.png?v=2") center / cover no-repeat !important;
  opacity: var(--rv-opacity) !important;
  filter: contrast(var(--rv-contrast)) saturate(1.05) brightness(1.02);
  transform: translate3d(0, var(--rvx, 0px), 0) scale(var(--rv-scale));
  /* optioneel, iets meer punch:
     mix-blend-mode: multiply;  */
}
/* === Portfolio Viewer: anti-jitter tweaks === */
.pv-stage{
  touch-action: pan-y;            /* swipe horizontaal; verticale gestures storen niet */
  overflow: hidden;
}
.pv-track{
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);  /* forceer GPU, voorkomt subpixel-jitter */
}
.pv-slide{
  contain: layout paint;          /* isoleer reflows per slide */
}
/* ==== Before/After – betere grip op de streep ==== */
.pv-ba{ cursor: ew-resize; touch-action: none; }           /* laat horizontaal slepen toe */
.pv-ba .ba-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:3px; background:rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  pointer-events:none;                                      /* visueel element, niet blokkerend */
}
/* rond 'grip' knopje in het midden van de streep */
.pv-ba .ba-handle::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
/* range blijft als alternatief; wil je hem verbergen? zet display:none */
.pv-ba .ba-range{ touch-action: none; }
/* Viewer: wit canvas + contain (niet ingezoomd) */
.pv-stage{ background:#fff; }
.pv-slide{ background:#fff; }
.pv-slide img{
  width:100%; height:100%;
  object-fit: contain;   /* toont hele foto */
}

/* (houd anti-jitter tweaks die je al had) */
.pv-track{ will-change: transform; backface-visibility: hidden; transform: translate3d(0,0,0); }
.pv-slide{ contain: layout paint; }
/* ===== Header + logo ===== */
.site-header{
  position: sticky; top: 0; z-index: 2000;
  background: #fff; border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.site-header.scrolled{ box-shadow: 0 6px 24px rgba(0,0,0,.06); border-color: #eaecef; }

.nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px; }
.brand img{
  display:block; height: 36px; width:auto; max-height:36px; vertical-align:middle;
  image-rendering: -webkit-optimize-contrast;
  transition: transform .2s ease, opacity .2s ease, max-height .2s ease;
}
.site-header.scrolled .brand img{ max-height:32px; }

/* Desktop nav */
.primary-nav{ display:flex; align-items:center; gap:1rem; }
.nav-list{ display:flex; gap:1.1rem; list-style:none; margin:0; padding:0; }
.nav-list a{ font-weight:600; color:#111; text-decoration:none; padding:.35rem .25rem; border-radius:8px; }
.nav-list a:hover{ background:#f7f7f9; }

/* WhatsApp CTA posities */
.desktop-only{ display:inline-flex; }
.only-mobile{ display:none; }

/* Mobile nav */
.nav-toggle{
  display:none; border:1px solid var(--line); background:#fff; border-radius:12px;
  width:40px; height:40px; padding:0; cursor:pointer;
}
.nav-toggle .hamburger{ display:grid; gap:4px; }
.nav-toggle .hamburger span{
  display:block; width:20px; height:2px; border-radius:2px; background:#111; margin:0 auto;
}

@media (max-width: 980px){
  .nav-toggle{ display:inline-grid; place-items:center; }
  .desktop-only{ display:none; }
  .only-mobile{ display:block; }

  .nav-list{
    position:absolute; left:1rem; right:1rem; top:calc(100% + .5rem);
    display:none; flex-direction:column; gap:.25rem;
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:.6rem; box-shadow:0 24px 48px rgba(0,0,0,.08);
  }
  .nav-list.open{ display:flex; }
  .nav-list li a{ padding:.6rem .65rem; }
}

@media (max-width: 720px){
  .brand img{ height:30px; max-height:30px; }
}


/* ===== FAQ (clean + conversion) ===== */
.section-faq .trust-row{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem; }
.section-faq .chip{ display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--line); background:#fff; border-radius:999px; padding:.25rem .6rem; font-weight:600; color:var(--muted); }

.section-faq .faq-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:1rem; align-items:start; }
@media (max-width: 980px){ .section-faq .faq-grid{ grid-template-columns:1fr; } }

.section-faq .faq-item{
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); transition:box-shadow .25s ease, border-color .25s ease, transform .2s ease;
}
.section-faq .faq-item:hover{ box-shadow:0 14px 30px rgba(0,0,0,.08); transform: translateY(-1px); }
.section-faq summary{
  list-style:none; cursor:pointer; padding:1rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.section-faq summary::-webkit-details-marker{ display:none; }
.section-faq .q{ font-weight:700; }
.section-faq .chev{
  width:22px; height:22px; border:1px solid var(--line); border-radius:8px; display:inline-grid; place-items:center;
  position:relative; flex:0 0 auto; transition:transform .25s ease, background .25s ease;
}
.section-faq .chev::before{
  content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); display:block;
}
.section-faq details[open] .chev{ transform:rotate(180deg); background:#f7f7f9; }

.section-faq .faq-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.section-faq details[open] .faq-panel{ grid-template-rows:1fr; }
.section-faq .faq-panel > div{ overflow:hidden; padding:0 1rem 1rem; }
.section-faq .ticks{ list-style:none; padding:0; margin:.25rem 0 0; display:grid; gap:.25rem; }
.section-faq .ticks li{ display:flex; align-items:flex-start; gap:.4rem; }
.section-faq .ticks li::before{ content:""; width:14px; height:14px; margin-top:.2rem; border-radius:50%; border:2px solid var(--accent,#e11d2a); }
.section-faq .ticks.cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem .75rem; }
@media (max-width:720px){ .section-faq .ticks.cols{ grid-template-columns:1fr; } }
.section-faq .steps{ margin:.25rem 0 0 1.1rem; display:grid; gap:.25rem; }

.section-faq .mini-cta{ margin-top:.6rem; }
.section-faq .btn-block{ width:100%; }

/* Aside CTA */
.section-faq .faq-aside{ position:sticky; top:90px; }
.section-faq .cta-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:1rem; box-shadow:var(--shadow);
}
.section-faq .cta-card h3{ margin:.2rem 0 .25rem; }
.section-faq .muted{ color:var(--muted); }
.section-faq .quickchips{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0 .6rem; }
.section-faq .quickchips .chip{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:.35rem .65rem; font-weight:600; cursor:pointer; }
.section-faq .ticks.tiny{ font-size:.95rem; color:var(--muted); }
/* === Viewer: nooit ingezoomd === */
.pv-stage, .pv-slide{ background:#fff; }
.pv-slide img{
  width:100%;
  height:100%;
  object-fit: contain;       /* hele foto zichtbaar */
  object-position: center;
}

/* forceer override als ergens 'cover' stond */
.pv-slide img{ object-fit: contain !important; }

/* === (Optioneel) Kaarten zonder crop ===
   Gebruik <figure class="p-media fit"> voor kaarten die je NIET wilt bijsnijden. */
.p-media.fit{ background:#fff; }
.p-media.fit img{
  object-fit: contain;
  background:#fff;           /* witte brievenbus i.p.v. donkere randen */
}

/* === Viewer: geen zoom/crop, altijd hele foto tonen === */
.pv-stage, .pv-slide{ background:#fff; }

.pv-slide{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;                 /* centreer afbeelding */
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pv-slide > img{
  max-width: 100%;
  max-height: 100%;
  width: auto !important;        /* niet forceren naar 100% hoogte/breedte */
  height: auto !important;
  object-fit: contain !important;/* nooit croppen */
  object-position: center;
  display: block;
}
.pv-stage, .pv-slide{ background:#fff; }
.pv-slide{ display:flex; align-items:center; justify-content:center; }
.pv-slide img{ max-width:100%; max-height:100%; width:auto !important; height:auto !important; object-fit:contain !important; }
/* ===== Footer credit (gradient link) ===== */
.footer-credit{
  margin-top:.5rem;
  color:var(--muted, #667085);
}

.footer-credit a{
  --g1: #e11d2a;        /* merkrood */
  --g2: #ff4d4d;        /* lichter rood */
  --g3: #9b111e;        /* dieper rood */
  position: relative;
  font-weight: 800;
  text-decoration: none;
  color: #e11d2a; /* fallback kleur */

  /* gradient text */
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* activeer gradient */
}

.footer-credit a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  transform: scaleX(.25);
  transform-origin:left;
  transition: transform .25s ease;
  border-radius: 2px;
  opacity:.9;
}

.footer-credit a:hover::after,
.footer-credit a:focus-visible::after{ transform: scaleX(1); }

.footer-credit a:hover{ filter: saturate(1.08); }

/* duidelijke keyboard focus */
.footer-credit a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(225,29,42,.18);
  border-radius:6px;
  padding-inline:2px;
}