/* ===================================================================
   TOKENS — één lettertype (Inter), licht, goud & warm zwart
   =================================================================== */
:root{
  --bg:        #FFFFFF;
  --bg-soft:   #FAF7F0;
  --bg-gold:   #FBF3DF;
  --dark:      #161208;
  --dark-2:    #221B0D;

  --ink:       #16130C;
  --body:      #524B3D;
  --muted:     #8C8474;
  --line:      #ECE6DA;
  --line-2:    #E0D7C4;

  --gold:      #C8941B;
  --gold-deep: #A87A10;
  --gold-lite: #E6AD2E;
  --gold-grad: linear-gradient(135deg,#F0B73A,#C8941B);

  --font:"Inter", system-ui, -apple-system, sans-serif;

  --bar:70px;
  --shell:1280px;
  --pad:clamp(20px,4vw,56px);
  --shadow:0 18px 50px rgba(30,24,8,.08);
  --shadow-lg:0 34px 90px rgba(20,16,6,.14);
}
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; padding-top:var(--bar);
  background:var(--bg); color:var(--body);
  font-family:var(--font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,output{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--bar) + 12px); }

.shell{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }

h1,h2,h3{ font-family:var(--font); color:var(--ink); font-weight:700; line-height:1.12; letter-spacing:-.025em; margin:0; }
h1{ font-size:clamp(2.3rem,5.2vw,4rem); font-weight:800; letter-spacing:-.035em; }
h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); font-weight:800; letter-spacing:-.03em; }
h3{ font-size:1.2rem; }

.eyebrow{ font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 14px; }
.meta{ font-size:.74rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.lede{ color:var(--body); font-size:clamp(1rem,1.3vw,1.14rem); max-width:58ch; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.85em 1.5em; border:1px solid transparent; border-radius:4px;
  background:var(--gold-grad); color:#14110A;
  font-size:.82rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; cursor:pointer;
  transition:filter .18s, transform .18s, background .18s, color .18s, border-color .18s;
}
.btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn--ghost{ background:none; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-deep); filter:none; }
.btn--onDark{ background:none; color:#fff; border-color:rgba(255,255,255,.35); }
.btn--onDark:hover{ border-color:var(--gold-lite); color:var(--gold-lite); filter:none; }
.btn--block{ width:100%; }

.section{ padding:clamp(58px,7vw,104px) 0; }
.section--soft{ background:var(--bg-soft); border-block:1px solid var(--line); }
.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,44px); }
.section__head p{ margin:14px 0 0; }

/* ===================================================================
   TOPBAR — blijft altijd in beeld
   =================================================================== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{ display:flex; align-items:center; gap:clamp(12px,2.4vw,34px); height:var(--bar); max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; color:var(--gold); }
.brand svg{ width:27px; height:27px; flex:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-weight:800; font-size:1.2rem; letter-spacing:-.03em; color:var(--ink); }
.brand__tag{ font-size:.6rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:5px; }

.nav{ display:flex; align-items:center; gap:clamp(10px,1.7vw,24px); }
.nav a,.nav button{
  font-size:.78rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--ink);
  background:none; border:0; padding:6px 0; cursor:pointer; white-space:nowrap;
  border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
}
.nav a:hover,.nav button:hover,.nav [aria-expanded="true"]{ color:var(--gold-deep); border-color:var(--gold); }
.nav .caret{ display:inline-block; margin-left:.4em; transition:transform .2s; }
.nav [aria-expanded="true"] .caret{ transform:rotate(180deg); }
.topbar .btn{ padding:.6em 1.05em; }

/* Het paneel hangt onder de balk en staat buiten de flow: dicht neemt het
   geen enkele ruimte in, dus je ziet gewoon de achtergrond.

   De animatie bestaat uit twee delen die samen lopen (--mega-tijd):
   de hoogte groeit via grid-template-rows 0fr -> 1fr (naar de werkelijke
   hoogte van de inhoud), en de inhoud zelf schuift binnen dat venster van
   translateY(-100%) naar 0. Daardoor glijdt het menu echt van achter de
   balk naar beneden in plaats van ter plekke te verschijnen. */
.mega{
  --mega-tijd:.5s;
  --mega-easing:cubic-bezier(.25,.8,.3,1);   /* start meteen, loopt zacht uit */
  position:absolute; top:100%; left:0; right:0;
  display:grid; grid-template-rows:0fr;
  visibility:hidden; pointer-events:none;
  background:var(--bg); border-bottom:1px solid transparent; box-shadow:var(--shadow);
  max-height:calc(100vh - var(--bar)); overflow:auto;
  transition:grid-template-rows var(--mega-tijd) var(--mega-easing),
             border-color var(--mega-tijd) linear,
             visibility var(--mega-tijd);
}
.mega[data-open="true"]{
  grid-template-rows:1fr;
  visibility:visible; pointer-events:auto;
  border-bottom-color:var(--line);
}
.mega__inner{ overflow:hidden; min-height:0; }
.mega__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:34px;
  max-width:var(--shell); margin-inline:auto; padding:34px var(--pad) 40px;
  transform:translateY(-100%);
  transition:transform var(--mega-tijd) var(--mega-easing);
}
.mega[data-open="true"] .mega__grid{ transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .mega{ --mega-tijd:.01s; }
  .mega__grid{ transform:none; transition:none; }
}
.mega h4{ font-size:.73rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 13px; }
.mega ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.mega li a{ font-size:.94rem; color:var(--body); }
.mega li a:hover{ color:var(--gold-deep); }
/* Blok met de items die op de telefoon uit de balk verdwijnen; op grote
   schermen staan die gewoon in de balk zelf. */
.mega__mobiel{ display:none; }

/* ===================================================================
   HERO — videoachtergrond, tekst linksonder
   =================================================================== */
.hero{ position:relative; overflow:hidden; isolation:isolate; background:var(--dark); min-height:clamp(560px,82vh,860px); display:flex; align-items:flex-end; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__still,.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(1.18) saturate(1.04); }
.hero__video{ opacity:0; transition:opacity .8s ease; }
.hero__video.is-on{ opacity:1; }
/* Sluier over de video. Links blijft hij donker genoeg om de tekst te dragen,
   naar rechts loopt hij ver open zodat je het beeld zelf goed ziet. */
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(102deg, rgba(12,10,5,.82) 0%, rgba(12,10,5,.58) 44%, rgba(12,10,5,.10) 80%, rgba(12,10,5,.28) 100%),
    linear-gradient(180deg, rgba(12,10,5,.34) 0%, transparent 30%, rgba(12,10,5,.52) 100%);
}
.hero__body{ width:100%; padding-block:clamp(110px,15vw,190px) clamp(40px,4.5vw,64px); color:#fff; text-align:left; }
.hero h1{ color:#fff; max-width:16ch; }
.hero .eyebrow{ color:var(--gold-lite); }
.hero .lede{ color:#E4DCCA; margin:24px 0 32px; max-width:52ch; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.hero__facts{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.18); margin-top:clamp(40px,5.5vw,72px); }
.hero__fact{ padding:24px 18px 4px; text-align:center; border-right:1px solid rgba(255,255,255,.18); }
.hero__fact:last-child{ border-right:0; }
.hero__fact .meta{ color:#B9AF9A; }
.hero__fact strong{ display:block; font-weight:800; font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:-.03em; margin:8px 0 4px; color:#fff; }
.hero__fact .sub{ display:block; color:#B9AF9A; font-size:.92rem; }

/* ===================================================================
   KEUZE particulier / zakelijk
   =================================================================== */
.choice__intro{ text-align:center; }
.choice__intro h2{ margin-top:8px; }
.choice__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px); margin-top:clamp(28px,4vw,44px); }
.choice__card{
  display:flex; flex-direction:column; gap:12px;
  padding:clamp(26px,3.4vw,42px); border:1px solid var(--line-2); border-radius:6px;
  background:var(--bg); box-shadow:var(--shadow);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.choice__card:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.choice__card svg{ width:30px; height:30px; color:var(--gold); }
.choice__card h3{ font-size:clamp(1.5rem,2.4vw,2rem); font-weight:800; letter-spacing:-.03em; }
.choice__card p{ margin:0; max-width:38ch; }
.choice__card .go{ margin-top:auto; padding-top:14px; font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); }

/* ===================================================================
   VOORDEEL BEREKENEN
   =================================================================== */
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.check{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:11px; }
.check li{ position:relative; padding-left:30px; }
.check li::before{ content:""; position:absolute; left:0; top:.5em; width:14px; height:8px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg); }
.calc__card{ border:1px solid var(--line-2); border-radius:8px; background:var(--bg); box-shadow:var(--shadow-lg); padding:clamp(24px,3vw,38px); }
.calc__out{ display:block; font-weight:800; font-size:clamp(2.2rem,4vw,3rem); letter-spacing:-.035em; margin:10px 0 20px; color:var(--ink); }

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; margin:0;
  background:linear-gradient(90deg,var(--gold) var(--p,35%), var(--line) var(--p,35%)); cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--gold); border:4px solid #fff; box-shadow:0 2px 10px rgba(30,24,8,.28); }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--gold); border:4px solid #fff; box-shadow:0 2px 10px rgba(30,24,8,.28); }
.calc__scale{ display:flex; justify-content:space-between; margin-top:10px; }
.calc__result{ margin:26px 0 22px; border-top:1px solid var(--line); }
.calc__row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); }
.calc__row strong{ color:var(--ink); font-weight:700; font-size:1.35rem; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.calc__row.is-lead strong{ font-size:1.85rem; color:var(--gold-deep); }
.calc__note{ margin:14px 0 0; color:var(--muted); font-size:.82rem; }

/* ===================================================================
   REVIEWS — twee naast elkaar, tekst inklapbaar
   =================================================================== */
.reviews{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px); align-items:start; }
.review{
  margin:0; border:1px solid var(--line); border-radius:6px; background:var(--bg);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
}
.review[hidden]{ display:none; }
.review__img{ width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--bg-soft); }
.review__text{ padding:clamp(20px,2.2vw,26px); display:flex; flex-direction:column; gap:12px; flex:1; }
.review__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.review .stars{ color:var(--gold); letter-spacing:.12em; font-size:.95rem; }
.review .src{ font-size:.64rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-2); border-radius:3px; padding:4px 8px; white-space:nowrap; }
.review blockquote{ margin:0; color:var(--ink); font-size:.98rem; line-height:1.62; }
.review blockquote.is-clamped{ display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.review__toggle{
  align-self:flex-start; background:none; border:0; padding:0; cursor:pointer;
  font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep);
  border-bottom:1px solid var(--line-2);
}
.review__toggle:hover{ border-color:var(--gold); }
.review figcaption{ margin-top:auto; padding-top:4px; }
.reviews__more{ display:flex; justify-content:center; margin-top:clamp(24px,3vw,36px); }
.google-link{ display:inline-flex; align-items:center; gap:9px; border-bottom:1px solid var(--line-2); padding-bottom:3px; font-size:.92rem; }
.google-link:hover{ border-color:var(--gold); color:var(--gold-deep); }

/* ===================================================================
   JULLIX
   =================================================================== */
.jullix{ background:var(--bg-gold); border-block:1px solid var(--line-2); }
.jullix__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,76px); align-items:center; padding-block:clamp(56px,7vw,100px); }
.jullix h2{ max-width:14ch; }
.jullix__badges{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.jullix__shot{ border:1px solid var(--line-2); border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow-lg); max-width:420px; margin-inline:auto; }
.jullix__cap{ margin-top:14px; text-align:center; }

/* ===================================================================
   NETWERK
   =================================================================== */
.mains{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,24px); margin-bottom:clamp(20px,2.6vw,30px); }
.main-co{
  display:flex; flex-direction:column; gap:12px; padding:clamp(26px,3.2vw,38px);
  border:1px solid var(--line-2); border-radius:6px;
  background:linear-gradient(155deg, var(--bg-gold), #fff 62%); box-shadow:var(--shadow);
}
.main-co h3{ font-size:clamp(1.4rem,2.2vw,1.9rem); font-weight:800; letter-spacing:-.03em; }
.main-co p{ margin:0; max-width:46ch; }

.partners{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); }
.partner{ display:flex; flex-direction:column; gap:10px; padding:clamp(22px,2.6vw,30px); border:1px solid var(--line); border-radius:6px; background:var(--bg); transition:border-color .2s, transform .2s, box-shadow .2s; }
.partner:hover,.main-co:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.partner p{ margin:0; font-size:.95rem; }
.role{ align-self:flex-start; font-size:.65rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); background:var(--bg-gold); border:1px solid var(--line-2); border-radius:3px; padding:4px 9px; }
.go{ margin-top:auto; padding-top:12px; font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); }

/* ===================================================================
   CTA + FOOTER
   =================================================================== */
.cta{ background:var(--dark); color:#EFE9DB; }
.cta h2{ color:#fff; }
.cta .eyebrow{ color:var(--gold-lite); }
.cta__inner{ display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,60px); align-items:center; padding-block:clamp(46px,6vw,80px); }
.cta p{ margin:14px 0 0; max-width:46ch; color:#B9AF9A; }
.cta__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.foot{ background:var(--dark-2); color:#B9AF9A; padding-top:clamp(48px,6vw,72px); }
.foot .brand__name{ color:#fff; }
.foot__top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:34px; }
.foot__mission{ margin:18px 0 22px; max-width:34ch; font-size:.95rem; }
.foot h4{ font-size:.73rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:#fff; margin:0 0 15px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot li a{ font-size:.93rem; }
.foot li a:hover{ color:var(--gold-lite); }
.foot__legal{ margin-top:clamp(36px,5vw,60px); padding:20px 0 34px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; gap:10px 24px; flex-wrap:wrap; align-items:center; font-size:.75rem; letter-spacing:.03em; color:#8C8474; }
.foot__legal a:hover{ color:var(--gold-lite); }
.foot__legal .spacer{ margin-left:auto; }

/* ===================================================================
   PROSE — lopende tekst op de juridische pagina's
   =================================================================== */
.prose{ max-width:68ch; }
.prose h2{ font-size:1.4rem; letter-spacing:-.02em; margin:44px 0 12px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.02rem; margin:26px 0 8px; }
.prose p{ margin:0 0 16px; }
.prose ul,.prose ol{ margin:0 0 18px; padding-left:1.2em; }
.prose li{ margin-bottom:7px; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--gold-deep); border-bottom:1px solid var(--line-2); }
.prose a:hover{ border-color:var(--gold); }
.prose__updated{ margin-bottom:34px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.prose__box{ background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; padding:20px 22px; margin:0 0 22px; }
.prose__box p:last-child{ margin-bottom:0; }
.prose dl{ margin:0 0 18px; display:grid; grid-template-columns:auto 1fr; gap:7px 18px; }
.prose dt{ color:var(--ink); font-weight:600; }
.prose dd{ margin:0; }

/* PLAATSEN — plaatsnamenlijst op de werkgebiedpagina */
.places{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px 24px; }
.places li{ padding-left:20px; position:relative; font-size:.96rem; }
.places li::before{ content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:50%; background:var(--gold); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1000px){
  .mega__grid{ grid-template-columns:repeat(2,1fr); }
  .choice__grid,.calc,.jullix__inner,.cta__inner,.mains{ grid-template-columns:1fr; }
  .partners{ grid-template-columns:1fr 1fr; }
  .foot__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  :root{ --bar:64px; }
  body{ font-size:16px; }
  .nav .hide-sm{ display:none; }

  /* De balk moet op één regel passen: minder ruimte, kortere merknaam,
     en een compactere knop. */
  .topbar__inner{ gap:12px; }
  .brand__tag{ display:none; }
  .brand svg{ width:24px; height:24px; }
  .nav{ gap:14px; }
  .topbar .btn{ padding:.62em .85em; font-size:.72rem; }
  .nav button{ font-size:.74rem; }

  /* Besparen, Reviews en bellen staan niet meer in de balk, dus komen ze
     bovenaan in het uitklapmenu te staan. */
  .mega__mobiel{ display:block; }
  .mega__grid{ padding-block:22px 26px; }
  .mega li a{ display:block; padding:9px 0; font-size:1rem; }
  .mega h4{ margin-bottom:8px; }
  /* Op de telefoon staat de tekst over de volle breedte van de video, dus
     ook over lichte plekken. Een zachte schaduw houdt hem leesbaar zonder
     dat het beeld er weer donker van wordt. */
  .hero__body{ text-shadow:0 1px 14px rgba(8,6,2,.62); }
  .hero__facts{ grid-template-columns:1fr; }
  .hero__fact{ border-right:0; border-bottom:1px solid rgba(255,255,255,.18); padding:16px 0; }
  .hero__fact:last-child{ border-bottom:0; }
  .reviews,.partners{ grid-template-columns:1fr; }
  .mega__grid{ grid-template-columns:1fr; gap:24px; }
  .foot__top{ grid-template-columns:1fr; }
  .wa{ height:50px; width:50px; padding:0; justify-content:center; right:14px; bottom:14px; border-radius:25px; }
  .wa svg{ width:28px; height:28px; }
  .wa__label{ display:none; }
  .wa::after{ border-radius:25px; }
}

/* telefoonknop in de topbalk */
.btn--tel{ padding:.6em .95em; gap:.5em; }
.btn--tel svg{ width:16px; height:16px; flex:none; }

/* klikbare kop boven elke kolom in het menu */
.mega h4 a{ display:inline-block; border-bottom:1px solid transparent; }
.mega h4 a:hover{ border-color:var(--gold); }

/* ===================================================================
   WHATSAPP — zweeft rechtsonder, altijd in beeld
   =================================================================== */
.wa{
  position:fixed; right:clamp(16px,2.4vw,28px); bottom:clamp(16px,2.4vw,28px); z-index:90;
  display:inline-flex; align-items:center; gap:0;
  height:60px; padding:0 12px; border-radius:30px;
  background:#25D366; color:#fff;
  box-shadow:0 10px 30px rgba(18,140,60,.38), 0 2px 8px rgba(0,0,0,.16);
  transition:gap .22s ease, padding .22s ease, transform .18s ease, box-shadow .18s ease;
}
.wa:hover,.wa:focus-visible{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(18,140,60,.46), 0 2px 8px rgba(0,0,0,.18); }
.wa svg{ width:36px; height:36px; flex:none; }
.wa__label{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-size:.92rem; font-weight:600; letter-spacing:-.01em;
  transition:max-width .22s ease, margin .22s ease;
}
.wa:hover .wa__label,.wa:focus-visible .wa__label{ max-width:190px; margin-right:8px; }
.wa::after{
  content:""; position:absolute; inset:0; border-radius:30px;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:waPuls 2.8s ease-out infinite; pointer-events:none;
}
@keyframes waPuls{ 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .hero__video{ display:none; }
  .wa::after{ display:none; }
}
/* ===================================================================
   SUBPAGINA'S — pagina-hero en productblokken
   =================================================================== */
.pagehero{ background:var(--dark); color:#EFE9DB; position:relative; overflow:hidden; }
.pagehero::after{
  content:""; position:absolute; inset:auto -20% -60% 30%; height:150%;
  background:radial-gradient(45% 50% at 50% 50%, rgba(230,173,46,.20), transparent 70%);
  pointer-events:none;
}
.pagehero__inner{ position:relative; padding-block:clamp(52px,7vw,96px); }
.pagehero h1{ color:#fff; max-width:16ch; font-size:clamp(2.1rem,4.4vw,3.4rem); }
.pagehero .eyebrow{ color:var(--gold-lite); }
.pagehero .lede{ color:#D8CFBC; margin:20px 0 30px; }
.pagehero__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.crumbs{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:.85rem; color:var(--muted); }
.crumbs a:hover{ color:var(--gold-deep); }
.crumbs span[aria-current]{ color:var(--ink); }

.prod{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.prod + .prod{ margin-top:clamp(56px,7vw,100px); }
.prod--flip .prod__media{ order:2; }
.prod__media{ border:1px solid var(--line-2); border-radius:8px; overflow:hidden; background:var(--bg-soft); box-shadow:var(--shadow); }
.prod__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
/* Voor foto's die staand genomen zijn: een hoger kader, zodat er nauwelijks
   iets wegvalt in plaats van dat de boven- en onderkant eraf gesneden worden. */
.prod__media--staand img{ aspect-ratio:4/5; }
.prod h2{ scroll-margin-top:calc(var(--bar) + 20px); }
.prod__spec{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.prod__spec div{ border:1px solid var(--line); border-radius:6px; background:var(--bg); padding:16px 14px; }
.prod__spec strong{ display:block; color:var(--ink); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; margin-bottom:2px; }
.prod__spec span{ font-size:.85rem; color:var(--muted); }
.prod__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

.usps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,22px); }
.usp{ border:1px solid var(--line); border-radius:6px; background:var(--bg); padding:clamp(20px,2.4vw,28px); }
.usp h3{ font-size:1.05rem; margin-bottom:8px; }
.usp p{ margin:0; font-size:.94rem; }
.usp .num{ display:block; font-size:.75rem; font-weight:600; letter-spacing:.14em; color:var(--gold-deep); margin-bottom:12px; }

@media (max-width:1000px){
  .prod,.prod--flip .prod__media{ grid-template-columns:1fr; order:0; }
  .usps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .usps{ grid-template-columns:1fr; }
  .prod__spec{ grid-template-columns:1fr; }
}