/* ============================================================
   ELITE LASER CLINIC RIJEN — "Just for you" (rose, definitief)
   De site als privé-uitnodiging: blush-waterverf, ivoorkaarten,
   goudfolie die glanst bij binnenkomst, polaroids met goud-speld.
   Haar wereld voorop; voor hem een eigen mokka-kamer.
   Fraunces (display) · Allura (script) · Manrope (tekst)
   ============================================================ */

:root{
  --creme:#FBF5EE;
  --blush:#F4DFD3;
  --blush-diep:#EDCDBC;
  --kaart:#FDFAF5;
  --espresso:#2E2118;
  --inkt-soft:#7E6555;
  --rose:#A55538;
  --rose-diep:#8F4429;
  --goud-1:#8F6A22; --goud-2:#D8B36A; --goud-3:#B98A2F;
  --mokka:#4A3626; --mokka-2:#5C4430; --mokka-lijn:rgba(245,233,221,.16);
  --ivoor:#F5E9DD; --ivoor-soft:#CBB49F;
  --lijn:rgba(46,33,24,.13);
  --goudlijn:rgba(185,138,47,.55);
  --schaduw:0 16px 40px rgba(122,84,60,.16);
  --font-display:"Fraunces", "Didot", serif;
  --font-script:"Allura", cursive;
  --font-body:"Manrope", system-ui, sans-serif;
  --section-y:clamp(3.6rem, 6.5vw, 6rem);
  --wrap:1180px;

  /* Eli-chat thema */
  --casa-accent:#C98A5F; --casa-accent-2:#D8B36A;
  --casa-surface:rgba(52,38,27,.96); --casa-text:#F5E9DD;
  --casa-font:"Manrope", system-ui, sans-serif; --casa-radius:16px;
  --font-mono:"Manrope", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }
html, body{ overflow-x:hidden; overflow-x:clip; }
body{ margin:0; background:var(--creme); color:var(--espresso);
  font-family:var(--font-body); font-weight:430; font-size:clamp(1rem,1.02vw,1.06rem);
  line-height:1.75; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--rose); color:#FFF6EF; }

/* papier-grain over alles (diepte) */
body::before{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); }
main, header, footer, .mobile-menu{ position:relative; z-index:2; }

/* ---------- typografie ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-optical-sizing:auto; font-weight:460; line-height:1.08; margin:0; letter-spacing:.005em; }
.display{ font-size:clamp(2.7rem,6.6vw,5.9rem); line-height:1.02; }
.h2{ font-size:clamp(1.9rem,4vw,3.2rem); }
.h3{ font-size:clamp(1.25rem,2.1vw,1.7rem); }
p{ margin:0 0 1rem; }
.lede{ font-size:clamp(1.02rem,1.4vw,1.22rem); line-height:1.72; color:var(--inkt-soft); max-width:58ch; }
strong{ font-weight:700; }

/* script-accent ín koppen — het "voor jou"-handschrift */
.script{ font-family:var(--font-script); font-weight:400; font-style:normal; letter-spacing:.01em;
  font-size:1.22em; line-height:.9; color:var(--rose); display:inline-block; transform:rotate(-2.2deg); }
.script.goud{ background:linear-gradient(100deg, var(--goud-1), var(--goud-3) 45%, var(--goud-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* micro-label met ✦ */
.eyebrow{ display:inline-flex; align-items:center; gap:.75em; margin:0 0 1.15rem;
  font-size:.72rem; font-weight:800; letter-spacing:.34em; text-transform:uppercase; color:var(--rose); }
.eyebrow .st{ font-style:normal; font-size:.85rem; line-height:1; color:var(--goud-3); }
.eyebrow.center{ justify-content:center; }
.eyebrow.licht{ color:var(--goud-2); }

/* goudfolie-tekst + shimmer (signature motion: folie glanst bij binnenkomst) */
.goudtxt{ background:linear-gradient(105deg, var(--goud-1) 0%, var(--goud-2) 38%, #F2DFAE 50%, var(--goud-2) 62%, var(--goud-3) 100%);
  background-size:230% 100%; background-position:105% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.in .goudtxt, .in.goudtxt{ animation:foil 1.5s cubic-bezier(.3,.6,.3,1) .15s both; }
@keyframes foil{ from{ background-position:105% 0 } to{ background-position:0% 0 } }

/* gouden hairline met shimmer */
.foil-lijn{ height:1.5px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, var(--goud-2) 22%, #F2DFAE 50%, var(--goud-2) 78%, transparent);
  background-size:220% 100%; background-position:110% 0; }
.in .foil-lijn, .in.foil-lijn{ animation:foil 1.6s cubic-bezier(.3,.6,.3,1) .2s both; }

/* ---------- layout ---------- */
.wrap{ width:min(var(--wrap), 92vw); margin-inline:auto; }
.section{ padding-block:var(--section-y); position:relative; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.6rem); align-items:center; }
.center{ text-align:center; } .center .lede{ margin-inline:auto; }
.sectiekop{ margin-bottom:clamp(2.2rem,4.5vw,3.6rem); }

/* ---------- knoppen ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.65em; cursor:pointer;
  font-family:var(--font-body); font-weight:800; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  padding:1.1em 1.9em; border-radius:999px; color:#2A1D12; border:none; position:relative; overflow:hidden;
  background:linear-gradient(105deg, #E6C078, #F1D9A6 45%, #D9AE5F);
  box-shadow:0 6px 18px rgba(122,84,60,.28), 0 0 36px rgba(217,174,95,.28), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(143,106,34,.35);
  transition:transform .28s cubic-bezier(.22,.8,.3,1), box-shadow .3s; }
.btn::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 66%);
  background-size:240% 100%; background-position:120% 0; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(122,84,60,.36), 0 0 52px rgba(217,174,95,.4), inset 0 1px 0 rgba(255,255,255,.75); }
.btn:hover::after{ animation:foil 0.9s ease both; }
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn-ghost{ background:none; color:var(--espresso); border:1px solid rgba(46,33,24,.32); box-shadow:none; }
.btn-ghost::after{ display:none; }
.btn-ghost:hover{ border-color:var(--rose); background:rgba(180,105,78,.07); box-shadow:none; }
.btn-licht{ color:#2A1D12; }
.btn-ghost.op-donker{ color:var(--ivoor); border-color:var(--mokka-lijn); }
.btn-ghost.op-donker:hover{ border-color:var(--goud-2); background:rgba(216,179,106,.08); }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:1.3rem;
  padding:.7rem clamp(1rem,3vw,2.4rem); transition:background .4s, box-shadow .4s;
  background:rgba(251,245,238,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.site-header.scrolled{ background:rgba(253,250,245,.97); box-shadow:0 1px 0 var(--lijn), 0 12px 30px rgba(122,84,60,.12); }
.brand{ display:inline-flex; align-items:center; gap:12px; white-space:nowrap; }
.brand .naam{ display:flex; flex-direction:column; }
.brand .n1{ font-family:var(--font-display); font-size:1.32rem; font-weight:500; letter-spacing:.14em; line-height:1; color:var(--espresso); }
.brand .n2{ font-size:.53rem; font-weight:800; letter-spacing:.4em; color:var(--rose); text-transform:uppercase; margin-top:4px; }
.main-nav{ display:flex; gap:clamp(1rem,2vw,2rem); margin-left:auto; align-items:center; }
.main-nav a{ font-weight:700; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--inkt-soft);
  position:relative; padding:.3em 0; transition:color .25s; }
.main-nav a::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1.5px;
  background:linear-gradient(90deg, var(--goud-3), var(--goud-2)); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.22,.8,.3,1); }
.main-nav a:hover, .main-nav a[aria-current]{ color:var(--espresso); }
.main-nav a:hover::after, .main-nav a[aria-current]::after{ transform:scaleX(1); }
.header-cta{ margin-left:.4rem; padding:.78em 1.5em; font-size:.72rem; }
.menu-btn{ display:none; background:none; border:1px solid rgba(46,33,24,.3); border-radius:999px;
  color:var(--espresso); padding:.55em .95em; cursor:pointer; font-family:var(--font-body); font-weight:800;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }

/* zegel (monogram-ruit) — ook chat/favicon-motief */
.zegel{ position:relative; width:40px; height:40px; display:inline-block; flex:none; }
.zegel .ruit{ position:absolute; inset:3px; transform:rotate(45deg); border:1.2px solid var(--goud-3); border-radius:4px; }
.zegel .ruit::after{ content:""; position:absolute; inset:2.4px; border:.8px solid rgba(185,138,47,.45); border-radius:3px; }
.zegel .mono{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display); font-size:19px; font-weight:520; color:var(--espresso); }
.zegel .st{ position:absolute; top:-8px; left:50%; transform:translateX(-50%); font-size:7.5px; font-style:normal;
  background:linear-gradient(100deg, var(--goud-1), var(--goud-2) 50%, var(--goud-3));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.zegel.op-donker .mono{ color:var(--ivoor); }

/* ---------- HERO: de uitnodiging ---------- */
.hero{ position:relative; overflow:hidden;
  background:
    radial-gradient(56% 44% at 86% -8%, rgba(222,160,130,.42), transparent 70%),
    radial-gradient(50% 38% at -10% 28%, rgba(226,178,152,.36), transparent 70%),
    radial-gradient(44% 34% at 106% 82%, rgba(214,150,120,.28), transparent 72%),
    linear-gradient(150deg, #F8EBE1, var(--blush) 56%, #F1D7C8); }
.hero-grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(2rem,4.5vw,4rem); align-items:center;
  padding-block:clamp(3.4rem,7vw,6.2rem) clamp(3.8rem,7vw,6.4rem); min-height:min(88vh,860px); }
.hero-copy .display em{ font-style:normal; }
.hero-copy .script{ font-size:clamp(3rem,7vw,6.2rem); margin-top:.08em; }
.hero-sub{ max-width:54ch; margin:1.5rem 0 0; color:#6E5A4C; font-size:clamp(1.02rem,1.35vw,1.18rem); }
.hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2.1rem; }
.hero-note{ margin-top:1.5rem; font-size:.8rem; letter-spacing:.07em; color:#8A7060; font-weight:600; }
.hero-note b{ color:var(--rose-diep); }

/* de scène rechts: goudkader + polaroids + vonken */
.hero-scene{ position:relative; min-height:520px; }
.hero-scene .blob{ position:absolute; inset:-12% -18% -6% -10%; z-index:0; filter:blur(46px); opacity:.75;
  background:radial-gradient(52% 46% at 58% 42%, rgba(224,164,134,.55), transparent 70%); }
.kader{ position:absolute; inset:4% 5% 9% 9%; border:1.6px solid var(--goudlijn); border-radius:8px; z-index:1;
  background:linear-gradient(160deg, rgba(253,250,245,.6), rgba(253,250,245,.15)); }
.kader::after{ content:""; position:absolute; inset:8px; border:1px solid rgba(185,138,47,.3); border-radius:5px; }
.kader .k-woord{ position:absolute; left:clamp(1rem,2.4vw,2rem); bottom:clamp(.9rem,2.2vw,1.8rem);
  font-family:var(--font-script); font-size:clamp(2rem,3.1vw,2.9rem); color:var(--rose); white-space:nowrap; transform:rotate(-3deg); }
.kader .k-micro{ position:absolute; right:clamp(1rem,2.2vw,1.8rem); bottom:clamp(1.15rem,2.4vw,2rem);
  font-size:.6rem; font-weight:800; letter-spacing:.34em; text-transform:uppercase; color:rgba(143,106,34,.75); }
.hero-scene .vonk{ position:absolute; font-size:15px; z-index:3; color:var(--goud-3); opacity:.9; }
.hero-scene .vonk.v1{ top:3%; right:10%; font-size:19px; }
.hero-scene .vonk.v2{ top:38%; left:2%; }
.hero-scene .vonk.v3{ bottom:10%; right:4%; font-size:12px; }

/* polaroid met goud-speld — signatuur-beeldbehandeling */
.polaroid{ background:#FFFDFA; padding:10px 10px 14px; border-radius:4px; position:relative;
  box-shadow:0 12px 34px rgba(90,58,40,.22), 0 3px 10px rgba(90,58,40,.12);
  transition:transform .5s cubic-bezier(.22,.8,.3,1), box-shadow .4s; }
.polaroid img{ border-radius:2px; }
.polaroid::before{ content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:14px; height:14px;
  border-radius:50%; z-index:2; background:radial-gradient(circle at 34% 30%, #F2DFAE, var(--goud-3) 58%, var(--goud-1));
  box-shadow:0 2px 5px rgba(90,58,40,.35); }
.polaroid .onderschrift{ margin:9px 4px 0; font-size:.78rem; letter-spacing:.05em; color:var(--inkt-soft);
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.polaroid .onderschrift .script{ font-size:1.35rem; transform:rotate(-2deg); }
.polaroid:hover{ box-shadow:0 18px 44px rgba(90,58,40,.28), 0 4px 12px rgba(90,58,40,.14); }
.hero-scene .polaroid{ position:absolute; z-index:2; }
.hero-scene .p1{ width:min(60%, 330px); top:5%; left:-1%; transform:rotate(-3.4deg); }
.hero-scene .p2{ width:min(44%, 245px); right:-2%; top:52%; transform:rotate(2.6deg); }
.hero-scene .polaroid.in-settle{ transform:rotate(-1.2deg); }

/* trust-strip */
.trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem clamp(1.2rem,3.5vw,2.8rem); padding:1.15rem 1rem;
  border-top:1px solid rgba(185,138,47,.35); border-bottom:1px solid rgba(185,138,47,.35);
  font-size:.73rem; letter-spacing:.13em; text-transform:uppercase; font-weight:800; color:var(--inkt-soft);
  background:rgba(253,250,245,.72); }
.trust span{ display:inline-flex; align-items:center; gap:.6em; }
.trust .st{ color:var(--goud-3); font-style:normal; font-size:.8rem; }
.trust b{ color:var(--espresso); }

/* ---------- menu-kaart (de gegraveerde prijskaart) ---------- */
.menu-kaart{ background:var(--kaart); border:1.5px solid var(--goudlijn); border-radius:10px; position:relative;
  padding:clamp(1.6rem,3.2vw,2.8rem); box-shadow:var(--schaduw), inset 0 1px 0 rgba(255,255,255,.85); }
.menu-kaart::after{ content:""; position:absolute; inset:9px; border:1px solid rgba(185,138,47,.28); border-radius:6px; pointer-events:none; }
/* pointer-glow (motion.js zet --mx/--my op [data-lux]): goudglans die met je muis meereist over de kaart */
.menu-kaart[data-lux]::after{ background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(216,179,106,.14), transparent 65%); }
.menu-kaart.donker[data-lux]::after{ background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(216,179,106,.1), transparent 65%); }
.menu-kaart .mk-kop{ text-align:center; margin-bottom:1.6rem; }
.menu-kaart .mk-kop h3{ font-size:clamp(1.35rem,2.2vw,1.8rem); letter-spacing:.16em; text-transform:uppercase; font-weight:500; }
.menu-kaart .mk-kop .mk-sub{ margin-top:.45rem; font-size:.68rem; font-weight:800; letter-spacing:.36em; text-transform:uppercase; color:var(--rose); }
.mk-divider{ display:flex; align-items:center; gap:10px; margin:.4rem auto 0; max-width:240px; }
.mk-divider::before, .mk-divider::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--goud-3)); }
.mk-divider::after{ background:linear-gradient(90deg, var(--goud-3), transparent); }
.mk-divider .st{ color:var(--goud-3); font-size:.72rem; font-style:normal; }
.mk-groepen{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem clamp(1.6rem,3vw,2.6rem); }
.mk-groep h4{ font-family:var(--font-body); font-size:.72rem; font-weight:800; letter-spacing:.3em; text-transform:uppercase;
  color:var(--goud-1); margin:0 0 .55rem; display:flex; align-items:center; gap:.6em; }
.mk-groep h4 .st{ font-style:normal; font-size:.62rem; color:var(--goud-3); }
.mk-groep ul{ list-style:none; margin:0; padding:0; display:grid; gap:.34rem; }
.mk-groep li{ display:flex; justify-content:space-between; align-items:baseline; gap:.9rem; font-size:.94rem; color:#5C4B3E;
  border-bottom:1px dashed rgba(46,33,24,.12); padding-bottom:.34rem; }
.mk-groep li b{ font-family:var(--font-display); font-weight:560; color:var(--espresso); font-size:1.02rem;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.mk-noot{ margin:1.5rem 0 0; text-align:center; font-size:.82rem; color:var(--inkt-soft); font-style:italic; }
/* donkere variant (heren, mokka-kamer) */
.menu-kaart.donker{ background:var(--mokka-2); border-color:rgba(216,179,106,.5); box-shadow:0 18px 44px rgba(30,18,8,.4), inset 0 1px 0 rgba(255,255,255,.08); }
.menu-kaart.donker::after{ border-color:rgba(216,179,106,.24); }
.menu-kaart.donker .mk-kop h3{ color:var(--ivoor); }
.menu-kaart.donker .mk-kop .mk-sub{ color:var(--goud-2); }
.menu-kaart.donker .mk-groep h4{ color:var(--goud-2); }
.menu-kaart.donker .mk-groep li{ color:#D9C6B2; border-bottom-color:rgba(245,233,221,.14); }
.menu-kaart.donker .mk-groep li b{ color:var(--ivoor); }
.menu-kaart.donker .mk-noot{ color:#C9B49E; }

/* ---------- voor-haar hoofdstuk ---------- */
.haar-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,4.5vw,4rem); align-items:start; }
.haar-zij{ position:sticky; top:110px; display:grid; gap:1.6rem; }
.haar-zij .polaroid{ transform:rotate(-2deg); max-width:440px; }
.haar-cta-kaart{ background:linear-gradient(150deg, #F8EBE1, var(--blush)); border:1.5px solid var(--goudlijn); border-radius:10px;
  padding:1.6rem 1.7rem; box-shadow:var(--schaduw); }
.haar-cta-kaart .h3{ margin-bottom:.5rem; }
.haar-cta-kaart p{ color:var(--inkt-soft); font-size:.95rem; }

/* ---------- de hem-kamer (mokka) ---------- */
.hem{ --section-y:clamp(3.2rem,6vw,5.2rem);
  background:
    radial-gradient(60% 80% at 84% 10%, rgba(216,179,106,.13), transparent 65%),
    radial-gradient(50% 70% at 6% 90%, rgba(180,105,78,.14), transparent 70%),
    var(--mokka);
  color:var(--ivoor); }
/* inklapbare herenlijst op de homepage (volledige lijst op behandelingen) */
.mk-vouw > summary{ list-style:none; cursor:pointer; text-align:center; display:inline-flex; align-items:center; gap:.7em;
  margin:0 auto; padding:.85em 1.7em; border:1px solid rgba(216,179,106,.55); border-radius:999px;
  font-size:.74rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--goud-2);
  transition:background .3s, border-color .3s; }
.mk-vouw > summary::-webkit-details-marker{ display:none; }
.mk-vouw > summary:hover{ background:rgba(216,179,106,.1); border-color:var(--goud-2); }
.mk-vouw > summary .st{ font-style:normal; transition:transform .35s; }
.mk-vouw[open] > summary{ margin-bottom:1.4rem; }
.mk-vouw[open] > summary .st{ transform:rotate(180deg); }
.mk-vouw{ text-align:center; }
.mk-vouw .mk-groepen, .mk-vouw .mk-noot{ text-align:left; }
.hem .h2, .hem .h3{ color:var(--ivoor); }
.hem .lede{ color:#D9C6B2; }
.hem-grid{ display:grid; grid-template-columns:.62fr 1fr; gap:clamp(2rem,5vw,4.6rem); align-items:center; }
.hem .polaroid{ background:#3B2A1C; transform:rotate(-2.6deg); max-width:360px; margin-inline:auto;
  box-shadow:0 18px 44px rgba(0,0,0,.42), 0 4px 12px rgba(0,0,0,.25); }
.hem .polaroid .onderschrift{ color:#C9B49E; }
.hem-noot{ display:flex; align-items:center; gap:.7em; margin-top:1.3rem; font-size:.85rem; color:#C9B49E; }
.hem-noot .st{ color:var(--goud-2); font-style:normal; }

/* ---------- stappen (zo werkt het) ---------- */
.stappen-band{ background:linear-gradient(160deg, #F8EBE1, var(--blush) 60%, #F2D9C9); }
.stappen{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.8vw,2.2rem); }
.stap{ position:relative; background:var(--kaart); border:1px solid rgba(185,138,47,.35); border-radius:10px;
  padding:2rem 1.7rem 1.8rem; box-shadow:var(--schaduw), inset 0 1px 0 rgba(255,255,255,.9); }
.stap .nr{ font-family:var(--font-display); font-size:2.6rem; font-weight:460; line-height:1; display:block; margin-bottom:.7rem; }
.stap h3{ font-size:1.22rem; margin-bottom:.45rem; }
.stap p{ color:var(--inkt-soft); font-size:.94rem; margin:0; }
.stap .stap-st{ position:absolute; top:1.4rem; right:1.5rem; font-style:normal; color:var(--goud-3); opacity:.8; }

/* ---------- waarom elite (✦-tegels) ---------- */
.usp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.2vw,1.7rem); }
.usp{ background:var(--kaart); border:1px solid var(--lijn); border-radius:10px; padding:1.5rem 1.4rem;
  box-shadow:0 10px 26px rgba(122,84,60,.1), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .32s cubic-bezier(.22,.8,.3,1), box-shadow .32s; }
.usp:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(122,84,60,.16), 0 0 40px rgba(216,179,106,.14); }
.usp .st{ font-style:normal; font-size:1.05rem; display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #F7E8C4, #E4C384 55%, #C99F4C); color:#5E4522;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 9px rgba(143,106,34,.3); margin-bottom:.85rem; }
.usp h3{ font-size:1.06rem; font-family:var(--font-body); font-weight:800; letter-spacing:.02em; margin-bottom:.3rem; }
.usp p{ font-size:.88rem; color:var(--inkt-soft); margin:0; }
.usp-band{ margin-top:clamp(1.2rem,2.4vw,1.8rem); background:linear-gradient(120deg, #F4E3CE, #EFD7B8 55%, #EACD99);
  border:1.5px solid var(--goudlijn); border-radius:12px; padding:1.7rem clamp(1.4rem,3vw,2.4rem);
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; justify-content:space-between;
  box-shadow:var(--schaduw), inset 0 1px 0 rgba(255,255,255,.8); }
.usp-band .tekst{ max-width:56ch; }
.usp-band h3{ margin-bottom:.35rem; }
.usp-band p{ margin:0; color:#6E5A4C; font-size:.95rem; }

/* ---------- review-band ---------- */
.review-band{ background:
    radial-gradient(46% 60% at 50% 30%, rgba(216,179,106,.14), transparent 70%), var(--creme); }
.review-grid{ display:grid; grid-template-columns:1fr .8fr; gap:clamp(2rem,4.5vw,4rem); align-items:center; }
.review-kaart{ background:linear-gradient(150deg, #7C4E2E, #6A4126 60%, #5C3820); color:#F7ECE0;
  border-radius:14px; padding:clamp(1.7rem,3.2vw,2.6rem); position:relative;
  box-shadow:0 20px 48px rgba(74,44,20,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.review-kaart .sterren{ color:#F0C75E; letter-spacing:.28em; font-size:1.15rem; text-shadow:0 1px 4px rgba(0,0,0,.3); }
.review-kaart blockquote{ margin:1.1rem 0 0; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.68; font-weight:430; }
.review-kaart figcaption{ margin-top:1.2rem; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.review-kaart .wie{ font-family:var(--font-script); font-size:1.7rem; color:#F0C75E; }
.review-kaart .bron{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#D9BFA4; font-weight:700; }
.review-cijfer{ text-align:center; }
.review-cijfer .groot{ font-family:var(--font-display); font-size:clamp(3.4rem,7vw,5.4rem); line-height:1; }
.review-cijfer small{ display:block; color:var(--inkt-soft); font-size:.8rem; letter-spacing:.1em; margin-top:.5rem; }

/* ---------- fabels & feiten (over-ons, uit hun eigen IG-post) ---------- */
.fabel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.4vw,1.8rem); }
@media(max-width:900px){ .fabel-grid{ grid-template-columns:1fr; } }
.fabel-kaart{ background:var(--kaart); border:1px solid var(--lijn); border-radius:10px; padding:1.6rem 1.5rem;
  box-shadow:0 10px 26px rgba(122,84,60,.1), inset 0 1px 0 rgba(255,255,255,.9); }
.fabel-kaart .f-label{ margin:0 0 .4rem; font-size:.66rem; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--rose-diep); }
.fabel-kaart .f-label.goud{ color:var(--goud-1); }
.fabel-kaart .f-fabel{ font-style:italic; color:var(--inkt-soft); text-decoration:line-through; text-decoration-color:rgba(165,85,56,.45); text-decoration-thickness:1px; margin-bottom:1rem; }
.fabel-kaart .foil-lijn{ margin:0 0 1rem; }
.fabel-kaart .f-feit{ margin:0; color:#4A3A2E; font-size:.95rem; }

/* ---------- cadeau ---------- */
.cadeau{ background:linear-gradient(160deg, var(--blush) 0%, #F6E6DA 55%, var(--creme) 100%); }
.cadeau .polaroid{ transform:rotate(2deg); max-width:460px; margin-inline:auto; }

/* ---------- bezoek/uren/contact ---------- */
.info-kaart{ background:var(--kaart); border:1.5px solid var(--goudlijn); border-radius:10px; position:relative;
  padding:1.8rem 1.7rem; box-shadow:var(--schaduw), inset 0 1px 0 rgba(255,255,255,.85); }
.info-kaart::after{ content:""; position:absolute; inset:8px; border:1px solid rgba(185,138,47,.22); border-radius:6px; pointer-events:none; }
.info-kaart > *{ position:relative; z-index:1; }
.uren{ display:grid; gap:.42rem; margin:0; padding:0; list-style:none; font-size:.95rem; }
.uren li{ display:flex; justify-content:space-between; gap:1rem; color:var(--inkt-soft);
  border-bottom:1px dashed rgba(46,33,24,.12); padding-bottom:.42rem; }
.uren li b{ color:var(--espresso); font-weight:700; }
.uren li.avond span{ color:var(--rose-diep); font-weight:700; }
.avond-badge{ display:inline-flex; align-items:center; gap:.6em; margin-top:1rem; font-size:.68rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:#5E4522;
  background:linear-gradient(105deg, #E9C88A, #F2DFAE 50%, #DDB264); border-radius:999px; padding:.55em 1.2em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 10px rgba(143,106,34,.25); }
.contact-rows{ display:grid; gap:.95rem; }
.contact-row{ display:flex; align-items:center; gap:1rem; background:var(--kaart); border:1px solid var(--lijn);
  border-radius:12px; padding:1rem 1.15rem; transition:transform .3s, box-shadow .3s, border-color .3s; }
.contact-row:hover{ transform:translateY(-2px); border-color:var(--goudlijn);
  box-shadow:0 14px 30px rgba(122,84,60,.16), 0 0 36px rgba(216,179,106,.14); }
.contact-row .ic{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:radial-gradient(circle at 34% 30%, #F7E8C4, #E4C384 55%, #C99F4C); color:#5E4522;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 9px rgba(143,106,34,.3); }
.contact-row .ic svg{ width:20px; height:20px; }
.contact-row b{ display:block; font-size:.98rem; }
.contact-row span{ color:var(--inkt-soft); font-size:.84rem; }
.map-box{ border-radius:12px; overflow:hidden; border:1.5px solid var(--goudlijn); aspect-ratio:16/10.5;
  box-shadow:var(--schaduw); }
.map-box iframe{ width:100%; height:100%; border:0; filter:saturate(.82) contrast(1.02) sepia(.08); }

/* ---------- band-CTA (uitnodiging onderaan pagina's) ---------- */
.uitnodiging-band{ text-align:center; background:
    radial-gradient(50% 75% at 50% 45%, rgba(216,179,106,.16), transparent 72%),
    linear-gradient(160deg, #F8EBE1, var(--blush) 65%, #F1D7C8); }
.uitnodiging-band .binnen{ max-width:760px; margin-inline:auto; border:1.6px solid var(--goudlijn); border-radius:12px;
  padding:clamp(2.2rem,4.5vw,3.6rem) clamp(1.4rem,4vw,3rem); position:relative; background:rgba(253,250,245,.55); }
.uitnodiging-band .binnen::after{ content:""; position:absolute; inset:8px; border:1px solid rgba(185,138,47,.28); border-radius:8px; pointer-events:none; }
.uitnodiging-band .binnen > *{ position:relative; z-index:1; }

/* ---------- footer ---------- */
.site-footer{ background:#241A11; color:#CBB49F; padding:3rem 0 2rem; }
.footer-lockup{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:.4rem; }
.footer-lockup .n1{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:.15em; color:var(--ivoor); line-height:1; }
.footer-lockup .n2{ font-size:.6rem; font-weight:800; letter-spacing:.42em; text-transform:uppercase; color:var(--goud-2); }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1.6rem; }
.site-footer .fnav{ display:flex; flex-wrap:wrap; gap:1.3rem; font-size:.8rem; letter-spacing:.08em; }
.site-footer .fnav a:hover{ color:var(--ivoor); }
.footer-bottom{ margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid rgba(245,233,221,.12);
  font-size:.78rem; display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between; }
.footer-bottom .script{ font-size:1.3rem; color:var(--goud-2); transform:rotate(-2deg); }

/* ============================================================
   DECOR-LAAG (éclat-pas): botanische goudhoeken, bladschaduwen,
   twinkel-vonken, zwevende polaroids, doorlopende folie-glans.
   Elke sectie ≥ 1 sfeerlaag — kale vlakken bestaan niet.
   ============================================================ */

/* botanische goudhoek (naar de hoek-ornamenten van hun prijskaart) */
.hoek{ position:absolute; width:clamp(30px,4.2vw,46px); height:clamp(30px,4.2vw,46px); pointer-events:none; z-index:2; opacity:.85;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23B98A2F' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M45 45C45 20 28 3 3 3'/%3E%3Cpath d='M3 3c6 0 10 2 12 6M45 45c0-6-2-10-6-12'/%3E%3C/g%3E%3Cg fill='%23D8B36A'%3E%3Cellipse cx='16' cy='7' rx='4.6' ry='1.9' transform='rotate(24 16 7)'/%3E%3Cellipse cx='30' cy='13' rx='4.6' ry='1.9' transform='rotate(42 30 13)'/%3E%3Cellipse cx='40' cy='26' rx='4.6' ry='1.9' transform='rotate(64 40 26)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }
.hoek.h-lb{ left:10px; top:10px; }
.hoek.h-rb{ right:10px; top:10px; transform:scaleX(-1); }
.hoek.h-lo{ left:10px; bottom:10px; transform:scaleY(-1); }
.hoek.h-ro{ right:10px; bottom:10px; transform:scale(-1,-1); }
.menu-kaart .hoek, .binnen .hoek{ opacity:.9; }

/* bladschaduw — de zachte bladeren uit hun feed, traag wiegend */
.blad{ position:absolute; width:clamp(140px,20vw,260px); aspect-ratio:120/220; pointer-events:none; z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 220'%3E%3Cpath d='M60 8C88 52 108 96 96 150c-8 34-24 56-36 62-12-6-28-28-36-62C12 96 32 52 60 8z' fill='%233A2A1E'/%3E%3Cpath d='M60 22v182' stroke='%233A2A1E' stroke-width='4'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:blur(17px); opacity:.14; animation:blad-wieg 16s ease-in-out infinite; transform-origin:50% 8%; }
.blad.b2{ animation-duration:21s; animation-delay:-7s; }
@keyframes blad-wieg{ 0%,100%{ transform:rotate(var(--tilt,14deg)) } 50%{ transform:rotate(calc(var(--tilt,14deg) + 5deg)) } }

/* twinkelende vonk */
@keyframes twinkel{ 0%,100%{ opacity:.35; transform:scale(.82) } 50%{ opacity:1; transform:scale(1.12) } }
.vonk{ position:absolute; font-style:normal; font-size:14px; color:var(--goud-3); z-index:1; pointer-events:none;
  animation:twinkel 3.6s ease-in-out infinite; }
.hem .vonk{ color:var(--goud-2); }
.vonk.v2{ animation-delay:-1.2s; } .vonk.v3{ animation-delay:-2.3s; }
.vonk.v4{ animation-delay:-.6s; } .vonk.v5{ animation-delay:-1.8s; } .vonk.v6{ animation-delay:-2.9s; }

/* zwevende polaroids (start pas ná de reveal) */
@keyframes zweef{ 0%,100%{ transform:rotate(var(--rot,-2deg)) translateY(0) } 50%{ transform:rotate(calc(var(--rot,-2deg) + .7deg)) translateY(-7px) } }
.polaroid.reveal.in{ animation:zweef 7.5s ease-in-out 1.1s infinite; }

/* doorlopende folieglans op het hero-script */
@keyframes glint{ 0%{ background-position:120% 0 } 45%{ background-position:0% 0 } 100%{ background-position:0% 0 } }
.foil-loop{ animation:glint 5.6s cubic-bezier(.3,.6,.3,1) 1.4s infinite !important; }

/* trust-strip: goudwaas + trage lichtstreep */
.trust{ position:relative; overflow:hidden;
  background:linear-gradient(100deg, rgba(244,227,206,.85), rgba(253,250,245,.9) 45%, rgba(240,213,182,.8)); }
.trust::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, rgba(216,179,106,.22) 50%, transparent 58%);
  background-size:300% 100%; animation:glint 5s linear 2; animation-fill-mode:both; }

/* stappen: nummer als gouden zegel-munt */
.stap .nr{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; font-size:1.5rem;
  background:radial-gradient(circle at 34% 28%, #F7E8C4, #E9CD8F 55%, #D3A855);
  -webkit-background-clip:border-box; background-clip:border-box; -webkit-text-fill-color:#5E4522; color:#5E4522;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8), inset 0 -2px 4px rgba(143,106,34,.35), 0 5px 14px rgba(143,106,34,.3); position:relative; }
.stap .nr::after{ content:""; position:absolute; inset:4px; border-radius:50%; border:1px solid rgba(94,69,34,.35); }
.stap{ transition:transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s; }
.stap:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(122,84,60,.2), 0 0 46px rgba(216,179,106,.16), inset 0 1px 0 rgba(255,255,255,.9); }

/* header krijgt bij scroll een goud-hairline */
.site-header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; opacity:0; transition:opacity .4s;
  background:linear-gradient(90deg, transparent, var(--goud-2) 30%, var(--goud-3) 50%, var(--goud-2) 70%, transparent); }
.site-header.scrolled::after{ opacity:.8; }

/* grote sier-ellips die traag draait (hero-diepte) */
.ring{ position:absolute; border:1.2px solid rgba(185,138,47,.28); border-radius:50%; pointer-events:none; z-index:0;
  animation:ring-draai 70s linear infinite; }
@keyframes ring-draai{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }

/* mini-review onder de hero-CTA's */
.hero-review{ display:flex; align-items:center; gap:.7em; margin-top:1.5rem; font-size:.86rem; color:#6E5A4C; }
.hero-review .sterren-mini{ color:var(--goud-3); letter-spacing:.14em; font-size:.92rem; text-shadow:0 1px 3px rgba(185,138,47,.3); }
.hero-review em{ font-style:italic; }

/* wax-zegel op de uitnodiging (hero) */
.hero-zegel{ position:absolute; z-index:4; transform:rotate(-8deg) scale(1.35); transform-origin:center;
  filter:drop-shadow(0 6px 14px rgba(122,84,60,.35)); }

/* ============ HERO v5 — NOIR: cinematic title-scene, geen beeld ============
   Diep mokka-goud openingsscherm: ademende gloeden, draaiende lichtwaaier,
   zwevend goudstof, en dé signatuur: een gouden laserlijn die zichzelf
   tekent en waarop "just for you" wordt geschreven — verzegeld met het zegel. */
.hero-noir{ position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:min(94vh, 900px); color:var(--ivoor);
  background:
    radial-gradient(62% 55% at 82% 6%, rgba(216,179,106,.16), transparent 65%),
    radial-gradient(55% 60% at 4% 100%, rgba(180,105,78,.22), transparent 70%),
    linear-gradient(158deg, #3B2A1C 0%, #2C1F13 48%, #241A11 100%); }
/* ademende kleurgloeden — géén filter:blur (radial is al zacht); alleen opacity/transform = composited */
.hero-noir .gloed{ position:absolute; width:60vw; height:60vw; border-radius:50%; z-index:0; pointer-events:none; will-change:transform,opacity; }
.hero-noir .gloed.g-goud{ top:-26vw; right:-18vw; background:radial-gradient(circle, rgba(216,179,106,.17) 0%, rgba(216,179,106,.07) 38%, transparent 66%);
  animation:gloed-op 1.6s ease .2s both; }
.hero-noir .gloed.g-rose{ bottom:-28vw; left:-20vw; background:radial-gradient(circle, rgba(180,105,78,.22) 0%, rgba(180,105,78,.09) 38%, transparent 66%);
  animation:gloed-op 1.6s ease .5s both; }
@keyframes gloed-op{ from{ opacity:0; transform:scale(.92) } to{ opacity:1; transform:scale(1) } }
/* traag draaiende lichtwaaier — begrensd in px en op de compositor */
.hero-noir .waaier{ position:absolute; left:50%; top:50%; width:min(150vmax,1500px); height:min(150vmax,1500px);
  transform:translate(-50%,-50%) rotate(-8deg); z-index:0; pointer-events:none; opacity:0;
  animation:waaier-op 2.4s cubic-bezier(.22,.8,.3,1) .3s both;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(216,179,106,.05) 14deg, transparent 30deg,
    transparent 120deg, rgba(216,179,106,.04) 136deg, transparent 152deg,
    transparent 240deg, rgba(216,179,106,.05) 255deg, transparent 272deg, transparent 360deg); }
@keyframes waaier-op{ from{ opacity:0; transform:translate(-50%,-50%) rotate(-8deg) } to{ opacity:.45; transform:translate(-50%,-50%) rotate(0deg) } }
/* twee lagen zwevend goudstof (naadloze tile van 340px die omhoog reist) */
.hero-noir .stof{ position:absolute; inset:0; z-index:1; pointer-events:none; background-repeat:repeat; background-size:340px 340px;
  animation:zin 2s ease .6s both; }
.hero-noir .stof.s1{ opacity:.8;
  background-image:radial-gradient(2.2px 2.2px at 40px 60px, rgba(242,223,174,.8), transparent 60%),
    radial-gradient(1.7px 1.7px at 150px 200px, rgba(216,179,106,.65), transparent 60%),
    radial-gradient(2.6px 2.6px at 250px 110px, rgba(216,179,106,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 90px 300px, rgba(242,223,174,.55), transparent 60%),
    radial-gradient(2px 2px at 300px 280px, rgba(242,223,174,.6), transparent 60%); }
.hero-noir .stof.s2{ opacity:.5;
  background-image:radial-gradient(1.4px 1.4px at 70px 140px, rgba(242,223,174,.5), transparent 60%),
    radial-gradient(1.8px 1.8px at 200px 40px, rgba(216,179,106,.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 320px 190px, rgba(242,223,174,.4), transparent 60%),
    radial-gradient(1.6px 1.6px at 130px 260px, rgba(216,179,106,.4), transparent 60%); }
@keyframes stof-zweef{ from{ transform:translateY(0) } to{ transform:translateY(340px) } }
/* botanisch goudframe om het hele scherm */
.hero-noir .kaderrand{ position:absolute; inset:clamp(10px,1.4vw,18px); z-index:2; pointer-events:none;
  border:1.2px solid rgba(216,179,106,.4); border-radius:10px; }
.hero-noir .kaderrand::after{ content:""; position:absolute; inset:5px; border:1px solid rgba(216,179,106,.18); border-radius:7px; }
.hero-noir .hoek{ z-index:3; opacity:.95; }
.hero-noir .hoek.h-lb{ left:clamp(16px,2vw,26px); top:clamp(16px,2vw,26px); }
.hero-noir .hoek.h-rb{ right:clamp(16px,2vw,26px); top:clamp(16px,2vw,26px); }
.hero-noir .hoek.h-lo{ left:clamp(16px,2vw,26px); bottom:clamp(16px,2vw,26px); }
.hero-noir .hoek.h-ro{ right:clamp(16px,2vw,26px); bottom:clamp(16px,2vw,26px); }
/* enorm ruit-watermerk dat traag draait */
.hero-noir .ruit-wm{ position:absolute; right:-10vw; top:50%; width:44vw; height:44vw; margin-top:-22vw; z-index:1; pointer-events:none;
  border:1.4px solid rgba(216,179,106,.2); border-radius:3vw; transform:rotate(45deg); animation:zin 2.2s ease .5s both; }
.hero-noir .ruit-wm::after{ content:""; position:absolute; inset:2.6vw; border:1px solid rgba(216,179,106,.12); border-radius:2vw; }
@keyframes ruit-drift{ 0%,100%{ transform:rotate(42deg) } 50%{ transform:rotate(48deg) } }
/* inhoud */
.hero-noir .hero-inhoud{ position:relative; z-index:4; width:100%;
  padding-left:max(5vw, calc((100vw - 1180px) / 2));
  padding-right:max(5vw, calc((100vw - 1180px) / 2));
  padding-block:clamp(4rem,7vw,6rem); }
.hero-noir .eyebrow{ color:var(--goud-2); }
.hero-noir .display{ color:var(--ivoor); font-size:clamp(3.2rem,9vw,8rem); line-height:.98; }
.hero-noir .hero-sub{ color:#D9C6B2; max-width:52ch; }
.hero-noir .hero-feiten{ color:#C9B49E; }
.hero-noir .hero-feiten b{ color:var(--goud-2); }
/* de handtekening-regel: laserlijn + script + zegel */
.handtekening{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.5rem); margin:clamp(1.2rem,2.6vw,2rem) 0 0; max-width:820px; }
/* lijn mét reizende lichtpuls als background-laag (paint van 2px-strook, geen layout) */
.handtekening .laserlijn{ position:relative; flex:1; height:2px; min-width:60px;
  background-image:linear-gradient(90deg, transparent, rgba(255,244,214,.95) 45%, rgba(255,244,214,.95) 55%, transparent),
    linear-gradient(90deg, transparent, var(--goud-2) 18%, var(--goud-3) 55%, var(--goud-2) 100%);
  background-size:70px 100%, 100% 100%; background-repeat:no-repeat;
  background-position:-80px 0, 0 0;
  transform-origin:left; animation:naad-teken-h 1.1s cubic-bezier(.22,.8,.3,1) .35s both,
    puls-reis 7s cubic-bezier(.45,0,.4,1) 1.8s infinite; }
.handtekening .laserlijn .puls{ display:none; }
.handtekening .laserlijn.kort{ flex:0 0 clamp(48px,7vw,110px);
  background-image:linear-gradient(90deg, var(--goud-2), var(--goud-3) 45%, transparent);
  background-size:100% 100%; background-position:0 0;
  animation:naad-teken-h 1.1s cubic-bezier(.22,.8,.3,1) .5s both; }
@keyframes puls-reis{ 0%{ background-position:-80px 0, 0 0 } 40%{ background-position:calc(100% + 80px) 0, 0 0 } 100%{ background-position:calc(100% + 80px) 0, 0 0 } }
.handtekening .script{ font-size:clamp(2.6rem,5.2vw,4.4rem); transform:rotate(-3deg); flex:none;
  clip-path:inset(-20% 100% -20% 0); }
/* schrijf-reveal + doorlopende folieglans in één declaratie (wint van .foil-loop's !important) */
.handtekening .script.foil-loop{ animation:schrijf 1.1s cubic-bezier(.3,.5,.3,1) .95s both,
  glint 5.6s cubic-bezier(.3,.6,.3,1) 2.3s infinite !important; }
@keyframes schrijf{ from{ clip-path:inset(-20% 100% -20% 0) } to{ clip-path:inset(-20% -8% -20% 0) } }
.handtekening .zegel{ flex:none; animation:stempel .95s cubic-bezier(.34,1.56,.64,1) 1.9s both; }
.handtekening .zegel .ruit{ background:linear-gradient(150deg, #FDFAF5, #F4E3CE); }
.handtekening .zegel .mono{ color:var(--espresso); }
/* glas-chip op donker — zweeft rechts in de open ruimte bij het watermerk */
.hero-noir .glaschip{ position:absolute; right:max(5vw, calc((100vw - 1180px) / 2)); bottom:clamp(7rem,17vh,11.5rem);
  width:min(380px, 30vw); margin:0;
  background:rgba(245,233,221,.09); border-color:rgba(216,179,106,.45);
  box-shadow:0 18px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1); animation:zin 1s ease 1.7s both; }
.hero-noir .glaschip .g-sterren{ color:var(--goud-2); }
.hero-noir .glaschip .g-sterren b{ color:var(--ivoor); }
.hero-noir .glaschip .g-quote{ color:#E4D4C2; }
.hero-noir .glaschip .g-micro{ color:var(--goud-2); }
/* scroll-hint */
.scrollhint{ position:absolute; left:50%; bottom:clamp(1.1rem,2vw,1.8rem); transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:.4rem; color:rgba(216,179,106,.8);
  font-size:.58rem; font-weight:800; letter-spacing:.42em; text-indent:.42em; text-transform:uppercase;
  animation:zin 1s ease 2.2s both; }
.scrollhint::before{ content:"✦"; font-size:.7rem; animation:hint-dans 2.6s ease-in-out 2.4s infinite; }
.scrollhint::after{ content:""; width:1.5px; height:30px; background:linear-gradient(180deg, var(--goud-3), transparent); }
@keyframes hint-dans{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } }
/* choreografie linkerdeel */
.hero-noir .eyebrow{ animation:zin .8s ease .15s both; }
.hero-noir .hero-sub{ animation:zin .9s ease 1.25s both; }
.hero-noir .hero-cta{ animation:zin .9s ease 1.45s both; }
.hero-noir .hero-feiten{ animation:zin .9s ease 1.65s both; }
.hero-noir .rijs > span{ animation-duration:.8s; animation-delay:.05s; }
.hero-noir .rijs.r2 > span{ animation-duration:.8s; animation-delay:.2s; }
@media(max-width:900px){
  .hero-noir{ min-height:0; }
  .hero-noir .hero-inhoud{ padding-block:3.2rem 4.2rem; }
  .hero-noir .display{ font-size:clamp(2.9rem,13vw,4.6rem); }
  .hero-noir .ruit-wm{ right:-34vw; width:80vw; height:80vw; margin-top:-40vw; }
  .handtekening{ gap:.7rem; }
  .handtekening .laserlijn.kort{ flex-basis:34px; }
  .hero-noir .glaschip{ position:relative; right:auto; bottom:auto; width:100%; margin-top:1.8rem; }
  .scrollhint{ display:none; }
}

/* ============ HERO v4 — editorial: typografie naast paginahoge zijde ============ */
.hero-editorial{ --zijde-w:clamp(340px, 44vw, 640px); position:relative; overflow:hidden;
  min-height:min(92vh, 860px); display:flex; align-items:center;
  background:
    radial-gradient(50% 40% at 12% -6%, rgba(226,178,152,.4), transparent 70%),
    radial-gradient(40% 34% at -8% 70%, rgba(222,160,130,.28), transparent 70%),
    linear-gradient(150deg, #F8EBE1, var(--blush) 62%, #F1D7C8); }
.hero-editorial .zijde{ position:absolute; top:0; right:0; height:100%; width:var(--zijde-w);
  object-fit:cover; z-index:1; }
.hero-editorial .zijde-sluier{ position:absolute; top:0; right:0; height:100%; width:var(--zijde-w); z-index:2; pointer-events:none;
  background:linear-gradient(90deg, #F5DDCE 0%, rgba(245,221,206,0) 16%),
             linear-gradient(180deg, rgba(58,42,30,.08), transparent 22%),
             linear-gradient(180deg, transparent 62%, rgba(58,42,30,.34)); }
.hero-editorial .naad{ position:absolute; top:0; bottom:0; right:var(--zijde-w); width:2px; z-index:3;
  background:linear-gradient(180deg, transparent, var(--goud-2) 22%, var(--goud-3) 50%, var(--goud-2) 78%, transparent); }
.hero-editorial .hero-zegel2{ position:absolute; right:calc(var(--zijde-w) - 29px); top:15%; z-index:5;
  transform:rotate(-9deg) scale(1.5); transform-origin:center; filter:drop-shadow(0 7px 16px rgba(122,84,60,.4)); }
.hero-editorial .hero-zegel2 .ruit{ background:linear-gradient(150deg, #FDFAF5, #F4E3CE); }
.hero-inhoud{ position:relative; z-index:4; width:100%;
  padding-left:max(4vw, calc((100vw - 1180px) / 2));
  padding-right:calc(var(--zijde-w) + 4vw);
  padding-block:clamp(3.4rem,6vw,5rem); }
.hero-inhoud .display{ font-size:clamp(2.9rem,6.9vw,6.3rem); }
.hero-inhoud .hero-sub{ max-width:46ch; }
.hero-feiten{ display:flex; flex-wrap:wrap; align-items:center; gap:.5em 1em; margin-top:1.6rem;
  font-size:.82rem; font-weight:600; color:#6E5A4C; letter-spacing:.04em; }
.hero-feiten .st{ font-style:normal; color:var(--goud-3); font-size:.72rem; }
.hero-feiten b{ color:var(--rose-diep); }
/* op de zijde: glas-chip met echte review */
.glaschip{ position:absolute; z-index:4; right:clamp(4.6rem,6.5vw,6.2rem); bottom:clamp(2rem,3.4vw,3.2rem);
  width:min(calc(var(--zijde-w) - clamp(2.8rem,4.4vw,5.2rem)), 340px);
  background:rgba(253,250,245,.6); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(185,138,47,.6); border-radius:14px; padding:1.15rem 1.3rem;
  box-shadow:0 18px 44px rgba(74,44,20,.28), inset 0 1px 0 rgba(255,255,255,.7); }
.glaschip .hoek{ width:24px; height:24px; opacity:.85; }
.glaschip .hoek.h-lb{ left:7px; top:7px; } .glaschip .hoek.h-ro{ right:7px; bottom:7px; }
.glaschip .g-sterren{ color:var(--goud-1); letter-spacing:.16em; font-size:.95rem; }
.glaschip .g-sterren b{ font-family:var(--font-display); font-size:1.15rem; color:var(--espresso); margin-left:.35em; letter-spacing:0; }
.glaschip .g-quote{ margin:.5rem 0 .55rem; font-size:.86rem; line-height:1.55; color:#4A3A2E; font-style:italic; }
.glaschip .g-micro{ margin:0; font-size:.6rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--goud-1); }
.hero-editorial .vonk{ z-index:4; }

/* ====== WOW-opening: entree-choreografie (eerste 1,5 s) ====== */
@keyframes zin{ from{ opacity:0 } to{ opacity:1 } }
@keyframes zijde-in{ from{ transform:scale(1.08); opacity:.3 } to{ transform:scale(1); opacity:1 } }
@keyframes zijde-adem{ from{ transform:scale(1) } to{ transform:scale(1.05) } }
@keyframes naad-teken{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
@keyframes naad-teken-h{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes stempel{ 0%{ transform:rotate(-32deg) scale(.25); opacity:0 } 62%{ transform:rotate(-6deg) scale(1.64); opacity:1 } 100%{ transform:rotate(-9deg) scale(1.5); opacity:1 } }
@keyframes rijs-op{ from{ transform:translateY(108%) } to{ transform:none } }
.hero-editorial .zijde{ animation:zijde-in 1.25s cubic-bezier(.22,.8,.3,1) both, zijde-adem 24s ease-in-out 1.4s infinite alternate; }
.hero-editorial .naad{ transform-origin:top; animation:naad-teken 1.05s cubic-bezier(.22,.8,.3,1) .25s both; }
.hero-editorial .hero-zegel2{ animation:stempel .95s cubic-bezier(.34,1.56,.64,1) 1s both; }
.rijs{ display:block; overflow:hidden; }
.rijs > span{ display:block; animation:rijs-op .95s cubic-bezier(.22,.8,.3,1) .12s both; }
.hero-copy .display .script.foil-loop{ animation:zin 1s ease .5s both, glint 5.6s cubic-bezier(.3,.6,.3,1) 1.9s infinite !important; }
.hero-copy .eyebrow{ animation:zin .8s ease both; }
.hero-copy .hero-sub{ animation:zin .9s ease .65s both; }
.hero-copy .hero-cta{ animation:zin .9s ease .85s both; }
.hero-copy .hero-feiten{ animation:zin .9s ease 1.05s both; }
@media(max-width:900px){
  .hero-editorial{ --zb:clamp(360px, 92vw, 470px); display:block; min-height:0; padding-bottom:var(--zb); }
  .hero-editorial .zijde, .hero-editorial .zijde-sluier{ top:auto; bottom:0; left:0; right:0; width:100%; height:var(--zb); }
  .hero-editorial .naad{ top:auto; right:0; left:0; bottom:var(--zb); width:auto; height:2px; transform-origin:left;
    animation:naad-teken-h 1.05s cubic-bezier(.22,.8,.3,1) .25s both;
    background:linear-gradient(90deg, transparent, var(--goud-2) 25%, var(--goud-3) 50%, var(--goud-2) 75%, transparent); }
  .hero-editorial .hero-zegel2{ right:auto; left:50%; top:auto; bottom:calc(var(--zb) - 29px); margin-left:-29px; }
  .hero-inhoud{ padding:2.6rem 5vw 2.4rem; }
  .glaschip{ right:auto; left:calc(50% - 1.6rem); transform:translateX(-50%); bottom:4.6rem; width:min(76vw, 330px); }
  .hero-editorial .vonk.ve1{ top:auto !important; bottom:calc(var(--zb) - 2.2rem) !important; }
}

/* ============ HERO v3: de uitnodiging op een mokka-goud paneel ============ */
/* watermerk-ruit links (vult de open ruimte onder de copy) */
.hero::before{ content:""; position:absolute; left:-90px; bottom:-120px; width:340px; height:340px; z-index:0;
  border:1.6px solid rgba(185,138,47,.3); border-radius:26px; transform:rotate(45deg); pointer-events:none; }
.hero::after{ content:""; position:absolute; left:-64px; bottom:-94px; width:288px; height:288px; z-index:0;
  border:1px solid rgba(185,138,47,.2); border-radius:20px; transform:rotate(45deg); pointer-events:none; }
.hero-paneel{ position:relative; border-radius:22px; min-height:600px; overflow:hidden; z-index:1;
  background:
    radial-gradient(70% 55% at 82% 8%, rgba(216,179,106,.22), transparent 65%),
    radial-gradient(55% 45% at 8% 96%, rgba(180,105,78,.25), transparent 70%),
    linear-gradient(155deg, #5C4430, #4A3626 55%, #3B2A1C);
  box-shadow:0 30px 70px rgba(74,44,20,.4), 0 8px 22px rgba(74,44,20,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.hero-paneel .hp-rand{ position:absolute; inset:13px; border:1.4px solid rgba(216,179,106,.55); border-radius:14px; pointer-events:none; }
.hero-paneel .hp-rand::after{ content:""; position:absolute; inset:5px; border:1px solid rgba(216,179,106,.28); border-radius:10px; }
.hero-paneel .hoek{ opacity:1; filter:drop-shadow(0 1px 3px rgba(0,0,0,.3)); }
.hero-paneel .hoek.h-lb{ left:17px; top:17px; } .hero-paneel .hoek.h-rb{ right:17px; top:17px; }
.hero-paneel .hoek.h-lo{ left:17px; bottom:17px; } .hero-paneel .hoek.h-ro{ right:17px; bottom:17px; }
.hp-script{ position:absolute; top:clamp(1.6rem,3vw,2.6rem); left:0; right:0; text-align:center; z-index:2;
  font-family:var(--font-script); font-size:clamp(2.4rem,3.6vw,3.4rem); line-height:1; transform:rotate(-2.5deg); }
.hp-micro{ position:absolute; bottom:clamp(1.5rem,2.6vw,2.2rem); left:clamp(1.8rem,3vw,2.6rem); z-index:2;
  font-size:.62rem; font-weight:800; letter-spacing:.42em; text-transform:uppercase; color:rgba(216,179,106,.75); }
.hero-paneel .polaroid{ position:absolute; z-index:3;
  box-shadow:0 22px 50px rgba(0,0,0,.45), 0 5px 14px rgba(0,0,0,.3); }
.hero-paneel .p1{ width:min(56%, 300px); top:21%; left:7%; }
.hero-paneel .p2{ width:min(43%, 235px); right:5%; top:52%; }
.hero-paneel .hero-zegel{ left:-14px; top:-14px; transform:rotate(-10deg) scale(1.5); transform-origin:top left; }
.hero-paneel .hero-zegel .ruit{ background:linear-gradient(150deg,#FDFAF5,#F4E3CE); }
.hero-paneel .vonk{ color:var(--goud-2); text-shadow:0 0 10px rgba(216,179,106,.6); }
.hero-paneel .ring{ border-color:rgba(216,179,106,.22); }
/* goudstof onderin het paneel */
.hp-stof{ position:absolute; inset:auto 0 0 0; height:42%; z-index:1; pointer-events:none; opacity:.65;
  background:
    radial-gradient(2.5px 2.5px at 12% 78%, rgba(216,179,106,.8), transparent 60%),
    radial-gradient(2px 2px at 30% 62%, rgba(242,223,174,.7), transparent 60%),
    radial-gradient(3px 3px at 48% 84%, rgba(216,179,106,.65), transparent 60%),
    radial-gradient(2px 2px at 64% 58%, rgba(242,223,174,.6), transparent 60%),
    radial-gradient(2.5px 2.5px at 78% 76%, rgba(216,179,106,.75), transparent 60%),
    radial-gradient(2px 2px at 90% 64%, rgba(242,223,174,.6), transparent 60%),
    radial-gradient(2px 2px at 22% 90%, rgba(242,223,174,.55), transparent 60%),
    radial-gradient(2.5px 2.5px at 56% 94%, rgba(216,179,106,.6), transparent 60%),
    radial-gradient(2px 2px at 84% 92%, rgba(242,223,174,.55), transparent 60%); }

/* feiten-chips + review-kaartje links */
.hero-chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.hero-chips .chip{ display:inline-flex; align-items:center; gap:.55em; padding:.55em 1.05em; border-radius:999px;
  background:rgba(253,250,245,.75); border:1px solid rgba(185,138,47,.5); font-size:.76rem; font-weight:700;
  letter-spacing:.05em; color:#5C4B3E; box-shadow:0 4px 12px rgba(122,84,60,.12), inset 0 1px 0 rgba(255,255,255,.8); }
.hero-chips .chip .st{ font-style:normal; color:var(--goud-3); font-size:.7rem; }
.hero-review{ margin-top:1.3rem; display:inline-flex; align-items:center; gap:.8em; padding:.8em 1.2em;
  background:rgba(253,250,245,.8); border:1px solid rgba(185,138,47,.45); border-radius:12px;
  box-shadow:0 6px 16px rgba(122,84,60,.14), inset 0 1px 0 rgba(255,255,255,.85); font-size:.84rem; }

/* stappen-band: alles binnen één gegraveerd kader */
.band-kader{ position:relative; border:1.5px solid var(--goudlijn); border-radius:14px;
  padding:clamp(1.8rem,3.5vw,3rem) clamp(1.2rem,3vw,2.6rem); background:rgba(253,250,245,.55);
  box-shadow:0 14px 36px rgba(122,84,60,.12), inset 0 1px 0 rgba(255,255,255,.7); }
.band-kader::after{ content:""; position:absolute; inset:8px; border:1px solid rgba(185,138,47,.26); border-radius:9px; pointer-events:none; }
.band-kader > *{ position:relative; z-index:1; }

/* waterverf-washes per sectie — geen kale creme-vlakken */
.wash-tr{ background:radial-gradient(44% 36% at 103% -4%, rgba(226,178,152,.4), transparent 70%),
  radial-gradient(30% 24% at -6% 84%, rgba(222,160,130,.22), transparent 70%), var(--creme); }
.wash-l{ background:radial-gradient(40% 52% at -8% 30%, rgba(226,178,152,.36), transparent 70%),
  radial-gradient(26% 22% at 106% 90%, rgba(214,150,120,.2), transparent 70%), var(--creme); }
.wash-r{ background:radial-gradient(42% 48% at 106% 22%, rgba(226,178,152,.34), transparent 70%),
  radial-gradient(28% 26% at -6% 96%, rgba(222,160,130,.22), transparent 70%), var(--creme); }

/* subpagina-hero's krijgen automatisch bladschaduwen */
.page-hero{ position:relative; overflow:hidden; }
.page-hero::before, .page-hero::after{ content:""; position:absolute; width:clamp(150px,18vw,240px); aspect-ratio:120/220;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 220'%3E%3Cpath d='M60 8C88 52 108 96 96 150c-8 34-24 56-36 62-12-6-28-28-36-62C12 96 32 52 60 8z' fill='%233A2A1E'/%3E%3Cpath d='M60 22v182' stroke='%233A2A1E' stroke-width='4'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:blur(22px); opacity:.09; pointer-events:none; animation:blad-wieg 18s ease-in-out infinite; transform-origin:50% 8%; }
.page-hero::before{ --tilt:20deg; left:-4%; top:-18%; }
.page-hero::after{ --tilt:-26deg; right:-3%; bottom:-30%; animation-duration:23s; animation-delay:-8s; }
.page-hero > .wrap{ position:relative; z-index:1; }

/* footer: folie-hairline bovenaan */
.site-footer{ position:relative; }
.site-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1.5px;
  background:linear-gradient(90deg, transparent, var(--goud-2) 30%, var(--goud-3) 50%, var(--goud-2) 70%, transparent); opacity:.65; }

/* consistente micro-lift op alle sfeer-kaarten */
.fabel-kaart, .zorg-kaart, .info-kaart, .haar-cta-kaart{ transition:transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s; }
.fabel-kaart:hover, .zorg-kaart:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(122,84,60,.16), 0 0 40px rgba(216,179,106,.12); }

/* ---------- reveals ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .95s cubic-bezier(.22,.8,.3,1), transform .95s cubic-bezier(.22,.8,.3,1); transition-delay:var(--d,0s); }
.reveal.rev-l{ transform:translateX(-34px); }
.reveal.rev-r{ transform:translateX(34px); }
.reveal.in{ opacity:1; transform:none; }
/* polaroids vallen op hun plek: komen scheler binnen en draaien recht naar hun rustkanteling */
.polaroid.reveal{ transform:translateY(30px) rotate(calc(var(--rot,-2deg) * 2.6)); transition-duration:1.05s; }
.polaroid.reveal.in{ transform:rotate(var(--rot,-2deg)); }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none }
  .in .goudtxt, .in.goudtxt, .in .foil-lijn, .in.foil-lijn, .btn:hover::after{ animation:none }
  .blad, .vonk, .polaroid.reveal.in, .foil-loop, .trust::after, .ring{ animation:none !important }
  .hero-editorial .zijde, .hero-editorial .naad, .hero-editorial .hero-zegel2, .rijs > span,
  .hero-copy .eyebrow, .hero-copy .hero-sub, .hero-copy .hero-cta, .hero-copy .hero-feiten,
  .hero-copy .display .script.foil-loop{ animation:none !important; opacity:1; transform:none }
  .hero-editorial .hero-zegel2{ transform:rotate(-9deg) scale(1.5) }
  .hero-noir .gloed, .hero-noir .waaier, .hero-noir .stof, .hero-noir .ruit-wm,
  .handtekening .laserlijn, .handtekening .laserlijn .puls, .handtekening .script,
  .handtekening .zegel, .hero-noir .glaschip, .scrollhint, .scrollhint::before{ animation:none !important; opacity:1; transform:none }
  .handtekening .script{ clip-path:none; transform:rotate(-3deg) }
  .handtekening .laserlijn .puls{ opacity:0 }
  .hero-noir .ruit-wm{ transform:rotate(45deg) }
}

/* ---------- FAQ (behandelingen) ---------- */
.faq{ display:grid; gap:.9rem; max-width:820px; margin-inline:auto; }
.faq details{ background:var(--kaart); border:1px solid var(--lijn); border-radius:10px; padding:1.05rem 1.3rem;
  box-shadow:0 8px 22px rgba(122,84,60,.08); transition:border-color .3s, box-shadow .3s; }
.faq details[open]{ border-color:var(--goudlijn); box-shadow:0 12px 30px rgba(122,84,60,.14); }
.faq summary{ cursor:pointer; font-weight:800; font-size:.98rem; display:flex; align-items:center; gap:.8em; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .st{ font-style:normal; color:var(--goud-3); transition:transform .3s; flex:none; }
.faq details[open] summary .st{ transform:rotate(180deg); }
.faq details p{ margin:.8rem 0 0; color:var(--inkt-soft); font-size:.94rem; }

/* voorbereiding/nazorg lijstkaarten */
.zorg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2.6vw,2rem); }
.zorg-kaart{ background:var(--kaart); border:1px solid var(--lijn); border-radius:10px; padding:1.7rem 1.6rem;
  box-shadow:0 10px 26px rgba(122,84,60,.1); }
.zorg-kaart h3{ margin-bottom:.7rem; }
.zorg-kaart ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.zorg-kaart li{ display:flex; gap:.7em; color:var(--inkt-soft); font-size:.94rem; }
.zorg-kaart li .st{ font-style:normal; color:var(--goud-3); flex:none; margin-top:.1em; }

/* ---------- pagina-hero (subpagina's) — donker mokka-goud materiaal-anker (RIJK, zelfde taal als de noir-hero & hem-kamer) ---------- */
.page-hero{ background:
    radial-gradient(56% 46% at 86% -8%, rgba(216,179,106,.17), transparent 66%),
    radial-gradient(48% 42% at -6% 42%, rgba(180,105,78,.20), transparent 70%),
    linear-gradient(155deg, #3B2A1C 0%, #2C1F13 52%, #241A11 100%);
  color:var(--ivoor);
  padding-block:clamp(3rem,6vw,4.6rem) clamp(2.6rem,5vw,4rem); text-align:center;
  box-shadow:inset 0 0 0 1px rgba(216,179,106,.16), inset 0 -70px 90px -60px rgba(0,0,0,.5); }
/* botanische bladeren worden goud i.p.v. mokka zodat ze op donker leesbaar blijven */
.page-hero::before, .page-hero::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 220'%3E%3Cpath d='M60 8C88 52 108 96 96 150c-8 34-24 56-36 62-12-6-28-28-36-62C12 96 32 52 60 8z' fill='%23D8B36A'/%3E%3Cpath d='M60 22v182' stroke='%23D8B36A' stroke-width='4'/%3E%3C/svg%3E");
  opacity:.13; }
.page-hero .eyebrow, .page-hero .eyebrow .st{ color:var(--goud-2); }
.page-hero .h2{ color:var(--ivoor); }
.page-hero .lede{ margin-inline:auto; margin-top:1rem; color:#D9C6B2; }
.page-hero .hero-cta{ justify-content:center; }
.page-hero .btn-ghost{ color:var(--ivoor); border-color:var(--mokka-lijn); }
.page-hero .btn-ghost:hover{ border-color:var(--goud-2); background:rgba(216,179,106,.08); }
.page-hero .vonk{ color:var(--goud-2); text-shadow:0 0 10px rgba(216,179,106,.5); }
.page-hero .ring{ border-color:rgba(216,179,106,.24); }

/* ---------- mobiel ---------- */
.mobile-menu{ position:fixed; inset:0; z-index:150; background:linear-gradient(160deg, #F8EBE1, var(--blush) 70%);
  transform:translateY(-102%); visibility:hidden;
  transition:transform .45s cubic-bezier(.22,.8,.3,1), visibility 0s .45s;
  display:flex; flex-direction:column; padding:5.4rem 2rem 2rem; gap:.2rem; }
.mobile-menu.open{ transform:none; visibility:visible; transition:transform .45s cubic-bezier(.22,.8,.3,1), visibility 0s 0s; }
.mobile-menu a{ font-family:var(--font-display); font-size:1.9rem; padding:.6rem 0; border-bottom:1px solid rgba(185,138,47,.3); }
.mobile-menu .mm-cta{ margin-top:1.4rem; border-bottom:none;
  font-family:var(--font-body); font-size:.8rem; padding:1.1em 1.9em; }
.mm-close{ position:absolute; top:1.15rem; right:1.15rem; background:rgba(253,250,245,.8); border:1px solid rgba(46,33,24,.25);
  color:var(--espresso); border-radius:50%; width:46px; height:46px; cursor:pointer; font-size:1.05rem; }
.mobile-menu .mm-sub{ margin-top:auto; font-size:.8rem; color:var(--inkt-soft); border:none; font-family:var(--font-body); }

@media(max-width:1020px){
  .usp-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:900px){
  .hero-grid{ grid-template-columns:1fr; min-height:0; padding-top:2.6rem; }
  .hero::before, .hero::after{ display:none; }
  .hero-paneel{ min-height:560px; margin-top:.8rem; }
  .hero-paneel .p1{ width:58%; left:6%; top:19%; }
  .hero-paneel .p2{ width:46%; right:5%; top:54%; }
  .two-col, .haar-grid, .hem-grid, .review-grid, .zorg-grid{ grid-template-columns:1fr; }
  .haar-zij{ position:static; }
  .hem .polaroid{ margin-inline:0; }
  .stappen{ grid-template-columns:1fr; }
}
@media(max-width:800px){
  .main-nav{ display:none; }
  .menu-btn{ display:inline-flex; }
  .header-cta{ display:none; }
  .mk-groepen{ grid-template-columns:1fr; }
  /* zij-reveals verticaal — translateX steekt buiten beeld op iOS */
  .reveal.rev-l, .reveal.rev-r{ transform:translateY(26px); }
  .reveal.rev-l.in, .reveal.rev-r.in{ transform:none; }
  .usp-band{ flex-direction:column; align-items:flex-start; }
}
@media(max-width:560px){
  .usp-grid{ grid-template-columns:1fr; }
  .hero-paneel{ min-height:520px; }
  .hero-paneel .p1{ width:62%; left:5%; top:18%; }
  .hero-paneel .p2{ width:48%; right:4%; top:56%; }
  .hp-script{ font-size:2.1rem; }
  .hero-cta .btn{ width:100%; }
  .trust{ font-size:.66rem; }
}
/* Eli-launcher compacter op mobiel — geen overlap met CTA's/onderschriften */
@media(max-width:800px){
  .casa-root{ right:.8rem; bottom:.8rem; }
  .casa-launcher{ width:52px; height:52px; }
  .casa-launcher svg{ width:24px; height:24px; }
}