/* =========================================================
   Suuz & Zo 2.0 — scènes, layout & beweging
   Concept "Belichting": beelden komen uit het donker tevoorschijn,
   met een meelopende glasstrook als ontwikkelrand.
   ========================================================= */

@property --reveal{ syntax:'<percentage>'; inherits:false; initial-value:0%; }

/* --p = scrollvoortgang 0..1, door app.js per [data-scene] gezet */
[data-scene]{ --p:0; }

/* ---------- generieke reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--d-reveal) var(--e-out) var(--delay,0s),
             transform var(--d-reveal) var(--e-out) var(--delay,0s);
}
.reveal.in{ opacity:1; transform:none; }

/* hero-teksten: zelfde beweging, maar puur CSS — niet wachten op app.js,
   zodat de eerste tekst direct geschilderd wordt (LCP) */
.hero-in{ animation:heroIn var(--d-reveal) var(--e-out) var(--delay,0s) both; }
@keyframes heroIn{ from{ opacity:.01; transform:translateY(18px); } }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  padding-block:var(--s-3);
  padding-top:calc(var(--s-3) + env(safe-area-inset-top,0px));
  transition:background var(--d-base) var(--e-soft);
}
.nav-inner{ display:flex; align-items:center; gap:var(--s-5); }

.brand{ text-decoration:none; display:flex; flex-direction:column; justify-content:center;
        line-height:1; min-height:44px; margin-inline-end:auto; }
.brand{ flex-direction:row; align-items:center; gap:.75rem; }
.brand-mark{ width:34px; height:34px; flex-shrink:0; color:var(--c-accent); transition:color var(--d-base) var(--e-soft); }
.brand-text{ display:flex; flex-direction:column; }
.brand-name{ font-family:var(--f-display); font-size:1.6rem; font-weight:400; line-height:1; }
.brand-sub{ font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--c-ink-2); margin-top:.3rem; }

.nav-list{ display:flex; gap:var(--s-5); list-style:none; margin:0; padding:0; }
.nav-link{
  text-decoration:none; font-size:.9375rem; font-weight:500; color:var(--c-ink);
  position:relative;
  display:inline-flex; align-items:center; min-height:44px;
}
.nav-link::after{
  content:''; position:absolute; left:0; right:0; bottom:9px; height:2px;
  background:var(--c-accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-base) var(--e-out);
}
.nav-link:hover::after,.nav-link.active::after{ transform:scaleX(1); }
.nav-link.active{ color:var(--c-accent); }

.btn-sm{ padding:.65rem 1.25rem; font-size:.875rem; }

/* mobiel menu */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; margin-inline-start:var(--s-2);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-pill); cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  flex-direction:column; gap:5px;
}
.nav-toggle-bar{ display:block; width:18px; height:1.5px; background:#fff; border-radius:2px;
  transition:transform var(--d-base) var(--e-out), opacity var(--d-fast) linear; }
.nav.scrolled .nav-toggle,.nav.menu-open .nav-toggle{ background:rgba(58,47,40,.06); border-color:var(--c-border); }
.nav.scrolled .nav-toggle-bar,.nav.menu-open .nav-toggle-bar{ background:var(--c-ink); }
.nav.menu-open .brand-name{ color:var(--c-ink); }
.nav.menu-open .brand-sub{ color:var(--c-ink-2); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); }

.mobiel-menu{
  position:fixed; inset:0; z-index:99;
  display:flex; flex-direction:column; justify-content:center; gap:var(--s-6);
  padding:var(--gutter);
  padding-top:calc(var(--gutter) + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg,rgba(246,240,231,.94),rgba(231,216,193,.94));
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
}
.mobiel-menu ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s-4); }
.mobiel-menu .nav-link{
  font-family:var(--f-display); font-size:clamp(1.75rem,1.2rem + 3vw,2.5rem);
  font-weight:400; color:var(--c-ink); letter-spacing:var(--ls-head);
}
.menu-acties{ display:flex; flex-wrap:wrap; gap:var(--s-3); }

@media (max-width:860px){
  .nav-list{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta{ display:none; }
}
@media (min-width:861px){
  .mobiel-menu{ display:none!important; }
}

/* =========================================================
   HERO — de ontwikkelrand
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:var(--s-10) var(--s-9);
  overflow:hidden;
  background:var(--c-photo-bg);
  isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }

.hero-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:64% 22%;
}
/* onderlaag: rauw, donker, ongeretoucheerd */
.hero-img--raw{ filter:brightness(.28) contrast(.8) saturate(0) sepia(.5); }
/* bovenlaag: ontwikkeld — onthuld door het masker */
.hero-img--dev{
  filter:brightness(.78) contrast(1.02) saturate(0) sepia(.42) hue-rotate(-6deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0 calc(var(--reveal) - 9vh),transparent var(--reveal));
          mask-image:linear-gradient(180deg,#000 0 calc(var(--reveal) - 9vh),transparent var(--reveal));
  animation:develop 2.1s var(--e-out) .15s both;
}
/* de meelopende glasstrook: dít is de ontwikkelrand.
   Beweegt via transform (niet via top), anders telt elke frame als layout-shift (CLS).
   De wrapper is heroboog hoog; zijn onderrand ligt op --reveal, de strook hangt daaronder. */
.develop-edge{
  position:absolute; inset:0;
  transform:translateY(calc(var(--reveal) - 100%));
  animation:develop 2.1s var(--e-out) .15s both;
  pointer-events:none;
}
.develop-edge::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:9vh;
  backdrop-filter:blur(14px) saturate(1.8) brightness(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.8) brightness(1.25);
  border-bottom:1px solid var(--c-accent-soft);
  box-shadow:0 8px 30px -6px rgba(156,90,60,.5);
}
@keyframes develop{ from{ --reveal:0%; } to{ --reveal:118%; } }

.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(30,24,20,.55) 0%,rgba(30,24,20,0) 32%),
    linear-gradient(0deg,rgba(30,24,20,.86) 0%,rgba(30,24,20,.35) 42%,rgba(30,24,20,0) 70%);
}

.hero-content{ position:relative; z-index:2; color:#fff; }
.hero-content .eyebrow{ color:var(--c-accent-soft); }

.hero-kicker{
  font-family:var(--f-body); line-height:1.4; letter-spacing:var(--ls-eyebrow);
  max-width:none;
}
.hero-title{
  font-family:var(--f-display);
  font-size:var(--t-hero);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-hero);
  font-weight:400;
  margin:0 0 var(--s-5);
  max-width:14ch;
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line-i{
  display:block;
  transform:translateY(105%);
  animation:riseIn 1.1s var(--e-out) both;
}
.hero-title .line:nth-child(1) .line-i{ animation-delay:.5s; }
.hero-title .line:nth-child(2) .line-i{ animation-delay:.62s; }
.hero-title .line:nth-child(3) .line-i{ animation-delay:.74s; }
@keyframes riseIn{ to{ transform:none; } }

.hero-content .lead{ color:rgba(255,255,255,.8); margin:0 0 var(--s-6); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); }

/* contactafdrukken die met verschillende snelheid meelopen */
.hero-strips{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.strip{
  position:absolute; overflow:hidden;
  border-radius:var(--r-sm);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  outline:1px solid rgba(255,255,255,.14);
  will-change:transform;
}
.strip img{ width:100%; height:100%; object-fit:cover; filter:saturate(0) sepia(.4) contrast(1.05); }
.strip-1{ width:clamp(110px,13vw,190px); aspect-ratio:3/4; top:16%; right:6%; }
.strip-2{ width:clamp(90px,10vw,150px); aspect-ratio:3/4; top:54%; right:23%; }

@media (max-width:860px){ .hero-strips{ display:none; } }

.scroll-hint{
  position:absolute; bottom:var(--s-5); right:var(--gutter); z-index:3;
  display:flex; align-items:center; gap:var(--s-3);
  color:rgba(255,255,255,.65); font-size:var(--t-small);
  letter-spacing:.12em; text-transform:uppercase;
}
.scroll-line{
  display:block; width:62px; height:1px; background:rgba(255,255,255,.3); position:relative; overflow:hidden;
}
.scroll-line::after{
  content:''; position:absolute; inset:0; background:var(--c-accent-soft);
  transform:translateX(-100%); animation:sweep 2.4s var(--e-soft) infinite;
}
@keyframes sweep{ 50%{ transform:none; } 100%{ transform:translateX(100%); } }

/* =========================================================
   MANIFEST — tekst die belicht wordt
   ========================================================= */
.manifest{ padding-block:clamp(4rem,3rem + 6vw,8rem) clamp(3rem,2rem + 4vw,5rem); }
.manifest-text{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,1rem + 2.6vw,3rem);
  line-height:1.25; font-weight:400; letter-spacing:-.01em;
  max-width:24ch; margin:0;
}
.ml{
  display:block;
  background:linear-gradient(90deg,var(--c-ink) 0 50%,#D8CBB8 50% 100%);
  background-size:300% 100%;
  background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  transition:background-position 1.4s var(--e-soft);
}
.ml.in{ background-position:0 0; }
.ml + .ml{ margin-top:.22em; }

/* =========================================================
   SPECIALISATIES — panelen die over beeld schuiven
   ========================================================= */
.specialisaties{ padding-block:clamp(2rem,1rem + 3vw,4rem) 0; }
.spec-stack{ margin-top:var(--s-7); }

.spec{
  position:relative;
  min-height:92svh;
  display:grid; place-items:end start;
  padding:var(--gutter);
  padding-block:var(--s-9);
  overflow:hidden;
  border-radius:var(--r-xl);
  margin-inline:var(--gutter);
  margin-bottom:var(--s-5);
  background:var(--c-photo-bg);
  isolation:isolate;
}
.spec-photo{ position:absolute; inset:0; z-index:-1; }
.spec-photo img{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--pos,50% 30%);
  /* van rauw naar ontwikkeld op scroll */
  filter:saturate(0) sepia(.42) brightness(calc(.3 + var(--p) * .55)) contrast(calc(.8 + var(--p) * .25));
  transform:scale(calc(1.06 - var(--p) * .06));
  transform-origin:50% 45%;
}
.spec-card{
  max-width:34rem;
  padding:var(--s-6);
  /* glas dat méédoet: blur en kleur schalen met de scroll */
  backdrop-filter:blur(calc(6px + var(--p) * 16px)) saturate(calc(1 + var(--p) * .5)) brightness(.62);
  -webkit-backdrop-filter:blur(calc(6px + var(--p) * 16px)) saturate(calc(1 + var(--p) * .5)) brightness(.62);
  opacity:clamp(0,calc(var(--p) * 3),1);
  transform:translateY(calc((1 - clamp(0,var(--p) * 2.4,1)) * 40px));
  transition:opacity 60ms linear, transform 60ms linear;
}
.spec-num{
  display:block; font-family:var(--f-display); font-size:var(--t-small);
  letter-spacing:.2em; color:var(--c-accent-soft); margin-bottom:var(--s-3);
}
.spec-card h3{ font-size:var(--t-h3); margin-bottom:var(--s-2); color:#fff; }
.spec-card p{ margin:0; color:rgba(255,255,255,.82); }

@media (max-width:640px){
  .spec{ min-height:70svh; margin-inline:var(--s-4); border-radius:var(--r-lg); }
}

/* =========================================================
   OVER SUUZ — diagonale onthulling
   ========================================================= */
.over{ padding-block:var(--section-y); }
.over-grid{
  display:grid; gap:clamp(2rem,5vw,5rem);
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  align-items:center;
}
.over-media{ position:relative; }
.over-plate{
  position:absolute; inset:0;
  transform:translate(24px,24px);
  background:var(--c-sand);
  border-radius:var(--r-md);
  opacity:.9;
}
.over-frame{
  aspect-ratio:4/5;
  /* onthuld langs de richting van het strijklicht: linksonder → rechtsboven */
  -webkit-mask-image:linear-gradient(42deg,#000 0 calc(var(--p) * 145% - 25%),transparent calc(var(--p) * 145%));
          mask-image:linear-gradient(42deg,#000 0 calc(var(--p) * 145% - 25%),transparent calc(var(--p) * 145%));
}
.over-text > * + *{ margin-top:var(--s-4); }
.over-text h2{ font-size:var(--t-h2); margin-bottom:var(--s-5); }
.over-text p:not(.eyebrow){ color:var(--c-ink-2); max-width:36rem; }

@media (max-width:860px){
  .over-grid{ grid-template-columns:1fr; }
  .over-media{ max-width:22rem; }
}

/* =========================================================
   WERKWIJZE — horizontale strip in een sticky scène
   ========================================================= */
.werkwijze{ height:200svh; position:relative; background:var(--c-sand); }
.ww-sticky{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center; gap:var(--s-7);
  overflow:hidden;
}
.ww-head h2{ font-size:var(--t-h2); }
.ww-track{
  display:flex; gap:var(--s-5);
  padding-inline:var(--gutter);
  transform:translate3d(calc(var(--p) * var(--shift,0px) * -1),0,0);
  will-change:transform;
}
.ww-step{
  flex:0 0 clamp(18rem,40vw,30rem);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  box-shadow:var(--sh-2);
}
.ww-num{
  display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(3rem,7vw,5.5rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--c-accent);
  margin-bottom:var(--s-4);
}
.ww-step h3{ font-size:var(--t-h3); margin-bottom:var(--s-2); }
.ww-step p{ margin:0; color:var(--c-ink-2); }

@media (max-width:860px){
  .werkwijze{ height:auto; }
  .ww-sticky{ position:static; height:auto; padding-block:var(--section-y); }
  .ww-track{ flex-direction:column; transform:none; }
  .ww-step{ flex:1 1 auto; }
}

/* =========================================================
   INVESTERING
   ========================================================= */
.investering{ background:linear-gradient(180deg,var(--c-bg) 0%,var(--c-sand-2) 100%); overflow:hidden; }
.investering .wrap{ position:relative; }
.investering .wrap::before{
  content:''; position:absolute; z-index:0;
  inset:30% 26% 12% 34%;
  background:
    radial-gradient(48% 52% at 32% 28%,rgba(226,196,164,.75),transparent 72%),
    radial-gradient(52% 48% at 72% 70%,rgba(156,90,60,.22),transparent 74%);
  filter:blur(28px);
  pointer-events:none;
}
.investering .section-head,.investering .prijs-panel{ position:relative; z-index:1; }
.prijs-panel{ padding:clamp(1.5rem,4vw,3.5rem); max-width:64rem; }
.prijs-cat{
  font-size:var(--t-small); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  font-family:var(--f-body); font-weight:600; color:var(--c-accent);
  margin:var(--s-6) 0 var(--s-3);
}
.prijs-cat:first-child{ margin-top:0; }
.prijs-lijst{ list-style:none; margin:0; padding:0; }
.prijs-rij{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-5);
  padding-block:var(--s-4);
  border-top:1px solid var(--c-border);
  /* elke regel "ontwikkelt" van links */
  -webkit-mask-image:linear-gradient(90deg,#000 0 calc(var(--p) * 130%),transparent calc(var(--p) * 130% + 12%));
          mask-image:linear-gradient(90deg,#000 0 calc(var(--p) * 130%),transparent calc(var(--p) * 130% + 12%));
}
.prijs-rij strong{ font-family:var(--f-display); font-size:1.3rem; font-weight:400; display:block; }
.prijs-meta{ display:block; color:var(--c-ink-2); font-size:var(--t-small); margin-top:var(--s-1); max-width:44ch; }
.prijs{
  font-family:var(--f-display); font-size:1.15rem; font-weight:400; color:var(--c-accent);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.pill{
  display:inline-block; vertical-align:middle; margin-left:var(--s-2);
  background:var(--c-accent-2); color:#FBF8F3;
  font-family:var(--f-body); font-size:.6875rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.2rem .6rem; border-radius:var(--r-pill);
}
.prijs-voet{ margin:var(--s-6) 0 0; color:var(--c-ink-2); font-size:var(--t-small); }

@media (max-width:640px){
  .prijs-rij{ flex-direction:column; gap:var(--s-2); }
}

/* =========================================================
   CONTACT — de lichtveeg keert terug
   ========================================================= */
.contact{ overflow:hidden; }
.light-sweep{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 55% at 78% calc(120% - var(--p,0) * 90%),
             rgba(226,196,164,.2) 0%, rgba(156,90,60,.1) 38%, transparent 72%);
}
.contact .wrap{ position:relative; }
.contact-head{ max-width:30ch; }
.kanalen{ list-style:none; margin:var(--s-8) 0 var(--s-8); padding:0; }
.kanaal{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-4);
  padding-block:var(--s-5);
  border-top:1px solid rgba(255,255,255,.14);
  opacity:clamp(0,calc(var(--p) * 2.5),1);
  transform:translateY(calc((1 - clamp(0,var(--p) * 2.5,1)) * 20px));
}
.kanaal-label{
  flex:0 0 8rem; font-size:var(--t-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--c-accent-soft); font-weight:600;
}
.kanaal a{
  font-family:var(--f-display); font-size:var(--t-h3); text-decoration:none; color:#fff;
  display:inline-flex; align-items:center; min-height:44px;
  transition:color var(--d-base) var(--e-out);
}
.kanaal a:hover{ color:var(--c-accent-soft); }
.contact-cta{ display:flex; flex-wrap:wrap; gap:var(--s-3); }

/* =========================================================
   FOOTER + lichtmeter
   ========================================================= */
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4); }
.footer-brand{ display:inline-flex; align-items:center; gap:.75rem; font-family:var(--f-display); font-size:1.6rem; color:#fff; }
.footer-brand .brand-mark{ width:30px; height:30px; color:var(--c-accent-soft); }
.footer-inner p{ margin:0; font-size:var(--t-small); }
.footer-meta{ display:flex; flex-direction:column; gap:var(--s-1); text-align:right; }
@media (max-width:640px){ .footer-meta{ text-align:left; } }

.lightmeter{
  position:fixed; right:calc(var(--s-4) + env(safe-area-inset-right,0px)); top:50%;
  transform:translateY(-50%); z-index:90;
  width:2px; height:26svh; border-radius:2px;
  background:rgba(110,96,84,.22);
}
.lightmeter-needle{
  position:absolute; left:-3px; width:8px; height:8px; border-radius:50%;
  background:var(--c-accent);
  top:0; /* via transform i.p.v. top: geen layout per scrollframe */
  transform:translateY(calc(var(--scroll,0) * 26svh - 50%));
  box-shadow:0 0 0 4px rgba(156,90,60,.18);
}
@media (max-width:860px){ .lightmeter{ display:none; } }

/* =========================================================
   Toegankelijkheid: alles in de eindstaat
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-in{ animation:none; }
  .hero-img--dev,.develop-edge{ animation:none; }
  .hero-img--dev{ -webkit-mask-image:none; mask-image:none; }
  .develop-edge{ display:none; }
  .hero-title .line-i{ transform:none; animation:none; }
  .scroll-line::after{ animation:none; transform:none; }
  .ml{ background-position:0 0; transition:none; }
  .spec-photo img{ filter:saturate(0) sepia(.42) brightness(.85) contrast(1.05); transform:none; }
  .spec-card{ opacity:1; transform:none; backdrop-filter:blur(20px) saturate(1.4) brightness(.62); }
  .over-frame{ -webkit-mask-image:none; mask-image:none; }
  .ww-track{ transform:none; }
  .prijs-rij{ -webkit-mask-image:none; mask-image:none; }
  .kanaal{ opacity:1; transform:none; }
  .werkwijze{ height:auto; }
  .ww-sticky{ position:static; height:auto; padding-block:var(--section-y); }
  .ww-track{ flex-direction:column; }
}

/* nav wint aan glas zodra je scrolt */
.nav{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
      border-bottom-color:transparent; box-shadow:none; }
.nav .brand-name,.nav .brand-sub,.nav .nav-link{ color:#fff; }
.nav.scrolled{
  background:linear-gradient(180deg,rgba(246,240,231,.84),rgba(246,240,231,.68));
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:rgba(255,255,255,.55);
  box-shadow:var(--sh-inset),0 8px 28px -14px rgba(58,47,40,.35);
}
.nav.scrolled .brand-name{ color:var(--c-ink); }
.nav.scrolled .brand-sub{ color:var(--c-ink-2); }
.nav.scrolled .nav-link{ color:var(--c-ink); }
.nav.scrolled .nav-link.active{ color:var(--c-accent); }

/* beeldmerk in de navigatie: zandkleur boven de foto, klei zodra de balk licht wordt */
.nav .brand-mark{ color:var(--c-accent-soft); }
.nav.scrolled .brand-mark,.nav.menu-open .brand-mark{ color:var(--c-accent); }
.brand-name em{ font-style:italic; }
.over-frame img{ filter:sepia(.18); }
.werkwijze .eyebrow{ color:var(--c-accent-hover); } /* klei op zand haalt 4.5:1 niet */

/* =========================================================
   WhatsApp per pakket
   ========================================================= */
.prijs-app{
  display:inline-flex; align-items:center; gap:.35rem; min-height:44px;
  margin-top:var(--s-1); font-size:var(--t-small); font-weight:600;
  color:var(--c-accent); text-decoration:none;
}
.prijs-app:hover{ color:var(--c-accent-hover); text-decoration:underline; text-underline-offset:3px; }
.prijs-app span{ transition:transform var(--d-base) var(--e-out); }
.prijs-app:hover span{ transform:translateX(3px); }

/* =========================================================
   VRAGEN — uitklapbare lijst (details/summary, geen JS nodig)
   ========================================================= */
.vragen{ background:var(--c-bg); }
.vragen-grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.vragen .section-head{ position:sticky; top:7rem; margin-bottom:0; }
.vragen .lead a{ color:var(--c-accent); text-underline-offset:3px; }
.vragen-lijst{ border-top:1px solid var(--c-border); }
.vraag{ border-bottom:1px solid var(--c-border); }
.vraag summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
  min-height:44px; padding:var(--s-5) 0;
  font-family:var(--f-display); font-size:var(--t-h3); line-height:1.2; color:var(--c-ink);
}
.vraag summary::-webkit-details-marker{ display:none; }
.vraag summary:hover{ color:var(--c-accent); }
.vraag-plus{ position:relative; flex:0 0 1.1rem; height:1.1rem; }
.vraag-plus::before,.vraag-plus::after{
  content:''; position:absolute; left:0; right:0; top:50%; height:1.5px; margin-top:-.75px;
  background:var(--c-accent); transition:transform var(--d-base) var(--e-out);
}
.vraag-plus::after{ transform:rotate(90deg); }
.vraag[open] .vraag-plus::after{ transform:rotate(0); }
.vraag p{ margin:0 0 var(--s-5); max-width:58ch; color:var(--c-ink-2); }
.vraag p a{ color:var(--c-accent); text-underline-offset:3px; }
@media (max-width:860px){
  .vragen-grid{ grid-template-columns:1fr; }
  .vragen .section-head{ position:static; }
}

/* =========================================================
   Vaste WhatsApp-knop (alleen mobiel, na de hero)
   ========================================================= */
.wa-float{
  position:fixed; right:calc(var(--s-4) + env(safe-area-inset-right,0px)); bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0px)); z-index:95;
  display:none; align-items:center; gap:.5rem; min-height:48px; padding:.7rem 1.15rem .7rem 1rem;
  border-radius:var(--r-pill); background:var(--c-accent); color:#fff; text-decoration:none;
  font-weight:600; font-size:.9375rem; box-shadow:0 12px 28px -12px rgba(58,47,40,.6);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), background var(--d-base) var(--e-soft);
}
.wa-float svg{ width:20px; height:20px; }
.wa-float:hover{ background:var(--c-accent-hover); }
.wa-float.zichtbaar{ opacity:1; transform:none; pointer-events:auto; }
@media (max-width:860px){ .wa-float{ display:inline-flex; } }
@media (prefers-reduced-motion:reduce){ .wa-float{ transition:none; } }