/* Lettertypen komen uit assets/css/fonts.css, lokaal geleverd.
   Bewust geen @import naar Google: dat is render-blokkerend en
   laat elke bezoeker een verzoek naar Google doen. */

/* =========================================================
   mkb coffee  |  thema-stijl ForestTree
   Donker gebrand: warme diepzwarten, ember-accent, filmisch
   ========================================================= */


:root{
  --ink:        #16110E;
  --ink-2:      #201A16;
  --ink-3:      #2A221D;
  --ink-4:      #392E27;

  --ember:      #A14131;
  --ember-lit:  #CB5B41;
  --ember-soft: rgba(203,91,65,.16);
  --pine:       #114D49;
  --pine-lit:   #1E7A72;

  --cream:      #F7F5F2;
  --cream-2:    rgba(247,245,242,.74);
  --cream-3:    rgba(247,245,242,.48);
  --line:       rgba(247,245,242,.13);
  --line-2:     rgba(247,245,242,.22);

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1560px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* afgeleide tokens: alles wat van thema wisselt loopt hierlangs,
     zodat de lichte versie geen enkele hardgecodeerde kleur hoeft te overrulen */
  --glass:       rgba(22,17,14,.82);
  --glass-solid: rgba(22,17,14,.97);
  --veil:        rgba(22,17,14,.70);
  --veil-soft:   rgba(22,17,14,.46);
  --shade:       rgba(0,0,0,.55);
  --shade-hard:  rgba(0,0,0,.72);
  --hover-tint:  rgba(247,245,242,.09);
  --btn-inset:   rgba(255,255,255,.13);
  --on-accent:   #F7F5F2;   /* tekst op een ember-vlak, blijft in beide thema's licht */
  --logo-filter: brightness(0) invert(1);
  --mark-filter: invert(1) brightness(1.7);
  --prose-ink: rgba(247,245,242,.82);
  --grain-blend: overlay;
  --grain-op:    .22;
  --img-dim:     .38;
  --hero-video-bright: 1.02;
  --hero-scrim-mid: rgba(22,17,14,.52);
  --hero-scrim-edge: rgba(22,17,14,.22);
  --scheme:      dark;
}

/* ---------------- lichte versie ---------------- */
:root[data-theme="light"]{
  --ink:        #F4F1EC;
  --ink-2:      #FBFAF8;
  --ink-3:      #FFFFFF;
  --ink-4:      #E8E2D9;

  --ember:      #97392A;
  --ember-lit:  #B4472F;
  --ember-soft: rgba(151,57,42,.12);
  --pine:       #0E403D;
  --pine-lit:   #14615B;

  --cream:      #1A1310;
  --cream-2:    rgba(26,19,16,.72);
  --cream-3:    rgba(26,19,16,.50);
  --line:       rgba(26,19,16,.12);
  --line-2:     rgba(26,19,16,.22);

  --glass:       rgba(244,241,236,.82);
  --glass-solid: rgba(244,241,236,.98);
  --veil:        rgba(26,19,16,.62);
  --veil-soft:   rgba(26,19,16,.32);
  --shade:       rgba(60,40,30,.20);
  --shade-hard:  rgba(60,40,30,.28);
  --hover-tint:  rgba(26,19,16,.06);
  --btn-inset:   rgba(255,255,255,.28);
  --on-accent:   #F7F5F2;
  --logo-filter: brightness(0) saturate(0) opacity(.72);
  --mark-filter: none;
  --prose-ink: rgba(26,19,16,.86);
  --grain-blend: multiply;
  --grain-op:    .13;
  --img-dim:     .46;
  --hero-video-bright: 1.04;
  --hero-scrim-mid: rgba(244,241,236,.78);
  --hero-scrim-edge: rgba(244,241,236,.50);
  --scheme:      light;
}

html{ color-scheme:var(--scheme); }

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

/* ---------- filmische korrel over alles ---------- */
body::after{
  content:'';
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:var(--grain-op); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* =========================================================
   Typografie
   ========================================================= */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}

.t-hero{ font-size:clamp(3.1rem, 9.2vw, 9.6rem); font-weight:900; letter-spacing:-.05em; }
.t-xl  { font-size:clamp(2.3rem, 5.4vw, 5.1rem); }
.t-lg  { font-size:clamp(1.8rem, 3.3vw, 3.1rem); }
.t-md  { font-size:clamp(1.28rem, 1.9vw, 1.75rem); letter-spacing:-.025em; }
.t-sm  { font-size:clamp(1.05rem, 1.3vw, 1.22rem); letter-spacing:-.015em; font-weight:700; }

.lede{
  font-size:clamp(1.06rem, 1.42vw, 1.32rem);
  line-height:1.6; color:var(--cream-2); font-weight:300;
  max-width:60ch; text-wrap:pretty;
}

.muted{ color:var(--cream-2); }
.dim{ color:var(--cream-3); }
.em{ color:var(--ember-lit); }

/* label: klein, gespatieerd, zonder bolletje */
.label{
  font-family:var(--display);
  font-size:.68rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream-3);
}

/* =========================================================
   Layout
   ========================================================= */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(80px, 11vw, 190px); position:relative; }
.section--tight{ padding-block:clamp(56px, 7vw, 110px); }

.grid{ display:grid; gap:clamp(20px,2.6vw,42px); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1080px){ .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

/* WordPress geeft een flow-groep een marge op elk kind behalve het eerste.
   Op een raster duwt dat kaart twee en verder omlaag, waardoor ze korter
   worden dan de eerste. In een raster doet de gap dat werk al. */
.grid > *{ margin-block-start:0; margin-block-end:0; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* =========================================================
   Navigatie
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px var(--pad);
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease),
             border-color .45s var(--ease), padding .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom-color:var(--line);
  padding-block:13px;
}
.nav__brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.nav__brand img{ height:34px; width:auto; filter:var(--mark-filter); }
/* het echte logo heeft al een lichte en een donkere versie, dus daar
   moet alleen het omkeerfilter vanaf. Niet de maten aanraken: die staan
   verderop bij .merk en zijn specifieker dan je zou denken. */
.nav__brand .merk img,
.foot__brand .merk img{ filter:none; }
/* in de voettekst mag het merk iets groter dan in de balk */
.foot__brand .merk{ margin-bottom:18px; }
.foot__brand .merk__teken img{ height:36px; width:36px; }
.foot__brand .merk__woord img{ height:20px; }
.nav__brand b{
  font-family:var(--display); font-weight:800; font-size:1.06rem;
  letter-spacing:-.03em;
}
.nav__links{ display:flex; gap:clamp(18px,2.3vw,38px); align-items:center; }
.nav__links a{
  font-size:.9rem; font-weight:500; color:var(--cream-2);
  position:relative; padding-block:6px; transition:color .3s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--ember-lit); transition:right .4s var(--ease-out);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ right:0; }
.nav__links a.is-current{ color:var(--cream); }
.nav__links a.is-current::after{ right:0; background:var(--cream-3); }

.nav__side{ display:flex; align-items:center; gap:14px; }


/* =========================================================
   Knoppen
   ========================================================= */
.btn{
  --bg:var(--ember);
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 26px; border-radius:999px;
  background:var(--bg); color:var(--on-accent);
  font-family:var(--display); font-weight:700; font-size:.92rem;
  letter-spacing:-.015em; border:0; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease);
  box-shadow:0 1px 0 var(--btn-inset) inset;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--ember-lit);
  transform:translateY(101%); transition:transform .45s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(203,91,65,.6); }
.btn:hover::before{ transform:translateY(0); }
.btn svg{ transition:transform .4s var(--ease-out); }
.btn:hover svg{ transform:translate(3px,-3px); }

.btn--ghost{ background:transparent; border:1px solid var(--line-2); color:var(--cream); }
.btn--ghost::before{ background:var(--hover-tint); }
.btn--ghost:hover{ box-shadow:none; }

.btn--sm{ padding:10px 19px; font-size:.84rem; }

/* tekstlink met pijl */
.arrow-link{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:.92rem;
  color:var(--cream); letter-spacing:-.015em;
}
.arrow-link svg{ transition:transform .4s var(--ease-out); }
.arrow-link:hover svg{ transform:translate(4px,-4px); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:150px clamp(46px,6vw,84px);
  overflow:hidden;
}
.hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(120vw,1500px); aspect-ratio:1; border-radius:50%;
  left:50%; top:44%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,
      rgba(203,91,65,.30) 0%,
      rgba(161,65,49,.15) 32%,
      transparent 66%);
  filter:blur(30px);
}
.hero__machine{
  position:absolute; z-index:1; pointer-events:none;
  right:clamp(-40px,4vw,110px); bottom:0;
  height:min(86svh,880px); width:auto;
  filter:drop-shadow(0 46px 90px rgba(0,0,0,.85))
         drop-shadow(0 0 70px rgba(203,91,65,.20));
  opacity:.97;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
}
@media (max-width:1180px){ .hero__machine{ height:min(56svh,520px); opacity:.34; right:-8%; } }

.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__title span{ display:block; }
.hero__title .ln2{ color:var(--cream-2); font-weight:400; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,68px);
  margin-top:clamp(34px,4.4vw,60px);
  padding-top:26px; border-top:1px solid var(--line);
  align-items:flex-end; justify-content:space-between;
}
.hero__stats{ display:flex; gap:clamp(22px,3.6vw,60px); flex-wrap:wrap; }
.hero__stat b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.5rem,2.5vw,2.3rem); letter-spacing:-.04em; line-height:1;
}
.hero__stat > span{ font-size:.79rem; color:var(--cream-3); letter-spacing:.04em; }
.hero__stat b span{ font-size:inherit; color:inherit; letter-spacing:inherit; }

.scrollcue{
  position:absolute; left:var(--pad); bottom:26px; z-index:3;
  display:flex; align-items:center; gap:11px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream-3); font-family:var(--display); font-weight:700;
}
.scrollcue i{
  display:block; width:1px; height:40px; background:var(--line-2); position:relative; overflow:hidden;
}
.scrollcue i::after{
  content:''; position:absolute; inset:0; background:var(--ember-lit);
  animation:cue 2.3s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }
@media (max-width:1180px){ .scrollcue{ display:none; } }

/* =========================================================
   Lopende band
   ========================================================= */
.marquee{
  border-block:1px solid var(--line);
  padding-block:17px; overflow:hidden; background:var(--ink-2);
}
.marquee__track{ display:flex; gap:56px; width:max-content; animation:slide 46s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  font-family:var(--display); font-weight:700; font-size:.88rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cream-3);
  display:flex; align-items:center; gap:56px; white-space:nowrap;
}
.marquee__track span::after{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--ember);
  display:block; flex:0 0 auto;
}
@keyframes slide{ to{ transform:translateX(-50%); } }

/* =========================================================
   Sectiekop
   ========================================================= */
.shead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; margin-bottom:clamp(34px,4.4vw,70px); flex-wrap:wrap;
}
.shead > .lede{ flex:0 1 26rem; }
/* let op: ch rekent tegen de fontgrootte van deze div (16px), niet tegen
   die van de kop erin. Daarom hier een maat in rem. */
.shead__t{ flex:1 1 min(100%, 34rem); max-width:46rem; }
.shead .label{ display:block; margin-bottom:15px; }

/* =========================================================
   Kaarten
   ========================================================= */
.card{
  position:relative; background:var(--ink-2);
  border:1px solid var(--line); border-radius:18px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .45s var(--ease), transform .55s var(--ease-out),
             background .45s var(--ease);
}
.card:hover{ border-color:var(--line-2); transform:translateY(-5px); background:var(--ink-3); }

/* product */
.pcard__stage{
  position:relative; aspect-ratio:1/1;
  background:radial-gradient(circle at 50% 62%, rgba(203,91,65,.11), transparent 68%);
  overflow:hidden;
}
.pcard__stage::after{
  content:''; position:absolute; left:50%; bottom:11%; transform:translateX(-50%);
  width:58%; height:14px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.6), transparent 72%);
  filter:blur(7px);
}
/* absoluut positioneren: een percentage-hoogte lost niet betrouwbaar op
   binnen een container die zijn hoogte uit aspect-ratio haalt */
/* expliciete binnenmaat plus object-fit: max-height:100% zou tegen de
   volledige kaart rekenen en het beeld tot aan de rand laten lopen */
.pcard__stage img{
  position:absolute; inset:0; margin:auto; z-index:1;
  width:calc(100% - 56px); height:calc(100% - 56px);
  object-fit:contain; object-position:center;
  transition:transform .8s var(--ease-out);
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.6));
}
.card:hover .pcard__stage img{ transform:scale(1.06) translateY(-5px); }
.pcard__body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1; }
.pcard__cat{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-3); }
.pcard__name{ font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.02em; line-height:1.24; }
.pcard__foot{
  margin-top:auto; padding-top:15px; display:flex;
  align-items:baseline; justify-content:space-between; gap:12px;
}
.pcard__price{ font-family:var(--display); font-weight:800; font-size:1.16rem; letter-spacing:-.03em; }
.pcard__price small{ font-size:.68rem; font-weight:500; color:var(--cream-3); letter-spacing:.04em; margin-left:5px; }
.pcard__go{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--line-2); display:grid; place-items:center;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.card:hover .pcard__go{ background:var(--ember); border-color:var(--ember); color:var(--on-accent); }

/* artikel */
.acard__img{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--ink-3); }
.acard__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.card:hover .acard__img img{ transform:scale(1.06); }
.acard__img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 42%, var(--veil) 100%);
}
.acard__body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:11px; flex:1; }
.acard__meta{ display:flex; gap:14px; align-items:center; font-size:.72rem; color:var(--cream-3); letter-spacing:.05em; }
.acard__meta em{ font-style:normal; color:var(--ember-lit); }
.acard h3{ font-size:1.16rem; line-height:1.22; letter-spacing:-.025em; }
.acard p{ margin:0; font-size:.9rem; color:var(--cream-2); line-height:1.6; font-weight:300; }
.acard__foot{ margin-top:auto; padding-top:16px; }

/* uitgelicht artikel */
.feature{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  border:1px solid var(--line); border-radius:22px; overflow:hidden;
  background:var(--ink-2); transition:border-color .45s var(--ease);
}
.feature:hover{ border-color:var(--line-2); }
.feature__img{ position:relative; overflow:hidden; min-height:340px; }
.feature__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.feature:hover .feature__img img{ transform:scale(1.05); }
.feature__body{ padding:clamp(28px,3.4vw,56px); display:flex; flex-direction:column; justify-content:center; gap:17px; }
@media (max-width:900px){ .feature{ grid-template-columns:1fr; } .feature__img{ min-height:250px; } }

/* =========================================================
   Diensten / kolommen met icoon
   ========================================================= */
.svc{ padding:30px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:13px; }
.svc__ico{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--ember-soft); color:var(--ember-lit); margin-bottom:5px;
}
.svc h3{ font-size:1.14rem; letter-spacing:-.025em; }
.svc p{ margin:0; color:var(--cream-2); font-size:.92rem; font-weight:300; line-height:1.62; }

/* =========================================================
   Cijfers
   ========================================================= */
.figs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border-block:1px solid var(--line); }
@media (max-width:820px){ .figs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.fig{ background:var(--ink); padding:clamp(28px,3.6vw,54px) clamp(18px,2vw,34px); }
.fig b{
  display:block; font-family:var(--display); font-weight:900;
  font-size:clamp(2.5rem,4.6vw,4.4rem); letter-spacing:-.055em; line-height:.92;
  background:linear-gradient(160deg, var(--cream) 30%, var(--ember-lit));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fig > span{ display:block; margin-top:11px; font-size:.83rem; color:var(--cream-3); line-height:1.45; }
.fig b span{ font:inherit; color:inherit; display:inline; }

/* =========================================================
   Verhaal-blok met parallax
   ========================================================= */
.story{ position:relative; overflow:hidden; }
.story__bg{ position:absolute; inset:-14% 0; z-index:0; }
.story__bg img{ width:100%; height:100%; object-fit:cover; opacity:var(--img-dim); }
.story__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 8%, var(--veil-soft) 55%, var(--ink) 100%);
}
.story__inner{ position:relative; z-index:1; max-width:660px; }
.story__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(30px,4.6vw,84px); align-items:center;
}
@media (max-width:940px){ .story__grid{ grid-template-columns:1fr; } }

.story__media{
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--line-2); aspect-ratio:4/5;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
/* de bronfoto heeft een lichte achtergrond; warm en donker trekken
   zodat hij in de rest van de pagina past */
.story__media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.8) contrast(1.08) brightness(.62) sepia(.22);
}
.story__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, var(--veil) 100%);
}
.story__tag{
  position:absolute; z-index:2; left:22px; right:22px; bottom:20px;
  display:grid; gap:3px;
}
.story__tag b{
  font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:-.02em;
}
.story__tag span{ font-size:.8rem; color:var(--cream-2); }

.story__pills{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:9px;
  margin-top:clamp(34px,4.4vw,64px);
  padding-top:clamp(28px,3.4vw,44px); border-top:1px solid var(--line);
}
.story__pills span{
  padding:9px 17px; border-radius:999px; border:1px solid var(--line-2);
  font-size:.83rem; color:var(--cream-2); background:var(--veil-soft);
}

/* =========================================================
   CTA
   ========================================================= */
.cta{ position:relative; overflow:hidden; background:var(--ink-2); border-block:1px solid var(--line); }
.cta__glow{
  position:absolute; width:900px; aspect-ratio:1; border-radius:50%;
  left:50%; top:120%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(203,91,65,.26), transparent 65%);
  filter:blur(20px); pointer-events:none;
}
.cta__inner{ position:relative; z-index:1; text-align:center; display:grid; gap:26px; justify-items:center; }

/* =========================================================
   Footer
   ========================================================= */
.foot{ background:var(--ink); padding-top:clamp(56px,6.5vw,96px); }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(24px,3vw,52px); }
@media (max-width:920px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot__grid{ grid-template-columns:1fr; } }
.foot h4{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-3); font-weight:700; margin-bottom:17px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot a{ font-size:.9rem; color:var(--cream-2); transition:color .3s var(--ease); }
.foot a:hover{ color:var(--ember-lit); }
.foot__bar{
  margin-top:clamp(40px,5vw,72px); padding-block:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:.8rem; color:var(--cream-3);
}
.foot__brand img{ height:40px; filter:var(--mark-filter); margin-bottom:16px; }

/* =========================================================
   Shop
   ========================================================= */
.phead{ padding-top:clamp(120px,13vw,190px); padding-bottom:clamp(28px,3.4vw,54px); }
.phead__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }

.filters{
  display:flex; gap:9px; flex-wrap:wrap; padding-block:22px;
  border-block:1px solid var(--line); margin-bottom:clamp(30px,3.6vw,52px);
}
.filters button{
  padding:9px 17px; border-radius:999px; border:1px solid var(--line-2);
  background:transparent; color:var(--cream-2); font-size:.83rem; font-weight:500;
  cursor:pointer; transition:all .34s var(--ease); white-space:nowrap;
}
.filters button:hover{ color:var(--cream); border-color:var(--cream-3); }
.filters button.is-on{ background:var(--cream); color:var(--ink); border-color:var(--cream); font-weight:600; }
.filters .count{ opacity:.5; margin-left:6px; font-size:.76rem; }

.pgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,26px); }
@media (max-width:1180px){ .pgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){ .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .pgrid{ grid-template-columns:1fr; } }
.pgrid > *{ transition:opacity .45s var(--ease), transform .45s var(--ease); }
.pgrid > .is-hidden{ display:none; }

/* =========================================================
   Productdetail
   ========================================================= */
.pdp{ padding-top:clamp(112px,12vw,168px); }
.crumbs{ display:flex; gap:9px; font-size:.79rem; color:var(--cream-3); margin-bottom:clamp(24px,3vw,44px); flex-wrap:wrap; }
.crumbs a:hover{ color:var(--cream); }

.pdp__main{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,4.4vw,84px); align-items:start; }
@media (max-width:960px){ .pdp__main{ grid-template-columns:1fr; } }

.pdp__stage{
  position:relative; border:1px solid var(--line); border-radius:22px;
  background:
    radial-gradient(circle at 50% 58%, rgba(203,91,65,.15), transparent 66%),
    var(--ink-2);
  aspect-ratio:1/1; display:grid; place-items:center; padding:clamp(26px,4vw,64px);
  overflow:hidden; position:sticky; top:96px;
}
/* let op: 'static' zou de positioneringscontext weghalen, waardoor de
   absoluut geplaatste foto uit de kaart ontsnapt. 'relative' zet alleen
   het sticky-gedrag uit en houdt de context in stand. */
@media (max-width:960px){ .pdp__stage{ position:relative; top:auto; } }
.pdp__stage img{
  position:absolute; inset:0; margin:auto;
  width:calc(100% - clamp(64px,8vw,140px)); height:calc(100% - clamp(64px,8vw,140px));
  object-fit:contain; filter:drop-shadow(0 40px 60px rgba(0,0,0,.72));
}
.pdp__stage::after{
  content:''; position:absolute; left:50%; bottom:11%; transform:translateX(-50%);
  width:56%; height:20px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.66), transparent 70%); filter:blur(10px);
}

.pdp__price{ display:flex; align-items:baseline; gap:13px; margin-block:22px 8px; }
.pdp__price b{ font-family:var(--display); font-weight:900; font-size:clamp(2rem,3.4vw,2.9rem); letter-spacing:-.045em; }
.pdp__price span{ font-size:.85rem; color:var(--cream-3); }

.specs{ margin-top:clamp(26px,3.2vw,44px); border-top:1px solid var(--line); }
.spec{ display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.spec dt{ color:var(--cream-3); margin:0; }
.spec dd{ margin:0; font-weight:500; text-align:right; }

.usps{ display:grid; gap:13px; margin-top:clamp(24px,3vw,38px); }
.usp{ display:flex; gap:13px; align-items:flex-start; font-size:.9rem; color:var(--cream-2); }
.usp svg{ flex:0 0 auto; margin-top:2px; color:var(--ember-lit); }

.buybar{ display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(24px,3vw,36px); }

/* =========================================================
   Artikel-hero (blog)
   ========================================================= */
.bhero{ position:relative; padding-top:clamp(130px,14vw,210px); padding-bottom:clamp(40px,5vw,80px); overflow:hidden; }
.bhero__glow{
  position:absolute; width:1100px; aspect-ratio:1; border-radius:50%;
  right:-14%; top:-46%; pointer-events:none;
  background:radial-gradient(circle, rgba(17,77,73,.34), transparent 64%); filter:blur(24px);
}
.bhero__inner{ position:relative; z-index:1; }

/* =========================================================
   Onthulling bij scrollen
   ========================================================= */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.09s } .rv-d2{ transition-delay:.18s }
.rv-d3{ transition-delay:.27s } .rv-d4{ transition-delay:.36s }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
}

/* toegankelijkheid */
:focus-visible{ outline:2px solid var(--ember-lit); outline-offset:3px; border-radius:4px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--ember); color:var(--on-accent); padding:12px 20px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

/* =========================================================
   Artikelpagina
   ========================================================= */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:1200;
  background:transparent; pointer-events:none;
}
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--ember), var(--ember-lit));
  box-shadow:0 0 12px rgba(203,91,65,.75);
}

.ahero{ position:relative; padding-top:clamp(120px,13vw,180px); overflow:hidden; }
.ahero__glow{
  position:absolute; width:1200px; aspect-ratio:1; border-radius:50%;
  left:-16%; top:-58%; pointer-events:none;
  background:radial-gradient(circle, rgba(203,91,65,.24), transparent 62%); filter:blur(26px);
}
.ahero__inner{ position:relative; z-index:1; max-width:1000px; }
.ahero h1{ font-size:clamp(2.1rem,4.4vw,4rem); margin-block:16px 24px; }
.ameta{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  padding-top:22px; border-top:1px solid var(--line); font-size:.85rem; color:var(--cream-3);
}
.ameta b{ color:var(--cream); font-weight:600; }
.ameta .dot{ width:3px; height:3px; border-radius:50%; background:var(--cream-3); }

.acover{
  margin-top:clamp(30px,4vw,56px); border-radius:20px; overflow:hidden;
  border:1px solid var(--line); aspect-ratio:21/9; position:relative;
}
.acover img{ width:100%; height:100%; object-fit:cover; }
.acover::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, var(--veil));
}
@media (max-width:720px){ .acover{ aspect-ratio:16/10; } }

/* twee kolommen: inhoudsopgave naast de tekst */
.alayout{
  display:grid; grid-template-columns:250px minmax(0,1fr);
  gap:clamp(30px,5vw,90px); align-items:start;
  padding-block:clamp(48px,6vw,96px);
}
@media (max-width:1040px){ .alayout{ grid-template-columns:1fr; } }

.toc{ position:sticky; top:104px; }
@media (max-width:1040px){
  .toc{ position:static; border:1px solid var(--line); border-radius:16px; padding:22px; background:var(--ink-2); }
}
.toc h2{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-3); margin-bottom:16px; font-weight:700; }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; display:grid; gap:2px; }
.toc a{
  display:block; padding:8px 0 8px 26px; position:relative;
  font-size:.87rem; color:var(--cream-3); line-height:1.4;
  transition:color .3s var(--ease);
}
.toc a::before{
  counter-increment:toc; content:counter(toc,decimal-leading-zero);
  position:absolute; left:0; top:8px; font-size:.7rem; color:var(--cream-3);
  font-family:var(--display); font-weight:700; opacity:.6;
}
.toc a:hover{ color:var(--cream); }
.toc a.is-active{ color:var(--ember-lit); }
.toc a.is-active::before{ color:var(--ember-lit); opacity:1; }

/* de tekst zelf */
.prose{ max-width:70ch; font-size:clamp(1rem,1.13vw,1.13rem); line-height:1.78; color:var(--prose-ink); }
.prose > p{ margin:0 0 1.35em; }
.prose > p:first-of-type{
  font-size:clamp(1.12rem,1.5vw,1.36rem); line-height:1.6;
  color:var(--cream); font-weight:300; margin-bottom:1.7em;
}
.prose h2{
  font-size:clamp(1.5rem,2.3vw,2.1rem); margin:2.2em 0 .7em;
  scroll-margin-top:110px; color:var(--cream);
}
.prose h3{
  font-size:clamp(1.12rem,1.5vw,1.34rem); margin:1.9em 0 .5em;
  color:var(--cream); letter-spacing:-.025em;
}
.prose strong{ color:var(--cream); font-weight:600; }
.prose em{ color:var(--cream-2); }
.prose a{
  color:var(--ember-lit); text-decoration:underline;
  text-decoration-color:rgba(203,91,65,.42); text-underline-offset:3px;
  transition:text-decoration-color .3s var(--ease);
}
.prose a:hover{ text-decoration-color:var(--ember-lit); }
.prose ul,.prose ol{ margin:0 0 1.5em; padding-left:0; list-style:none; display:grid; gap:12px; }
.prose li{ position:relative; padding-left:30px; }
.prose ul li::before{
  content:''; position:absolute; left:8px; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--ember);
}
.prose ol{ counter-reset:pl; }
.prose ol li{ counter-increment:pl; }
.prose ol li::before{
  content:counter(pl); position:absolute; left:0; top:0;
  font-family:var(--display); font-weight:700; font-size:.86rem; color:var(--ember-lit);
}

/* kernpunt in de tekst */
.keypoint{
  margin:2.4em 0; padding:clamp(22px,2.6vw,34px);
  border:1px solid var(--line-2); border-radius:18px;
  background:linear-gradient(150deg, rgba(203,91,65,.10), rgba(20,17,16,.9));
}
.keypoint b{
  display:block; font-family:var(--display); font-size:.68rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ember-lit); margin-bottom:11px;
}
.keypoint p{ margin:0; color:var(--cream); font-size:1.02rem; line-height:1.62; }

/* productblok binnen het artikel */
.inline-shop{
  margin:2.6em 0; padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--line); border-radius:18px; background:var(--ink-2);
}
.inline-shop__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.inline-shop__head h2{ font-size:1.16rem; margin:0; }
.inline-shop__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:680px){ .inline-shop__grid{ grid-template-columns:1fr; } }
.mini{
  display:flex; gap:14px; align-items:center; padding:12px;
  border:1px solid var(--line); border-radius:13px; background:var(--ink);
  transition:border-color .35s var(--ease), transform .4s var(--ease-out);
}
.mini:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.mini__img{
  width:56px; height:56px; flex:0 0 auto; border-radius:9px;
  background:radial-gradient(circle at 50% 60%, rgba(203,91,65,.14), transparent 70%);
  position:relative; overflow:hidden;
}
.mini__img img{ position:absolute; inset:0; margin:auto; width:calc(100% - 12px); height:calc(100% - 12px); object-fit:contain; }
.mini__t{ font-family:var(--display); font-weight:700; font-size:.83rem; line-height:1.25; letter-spacing:-.015em; }
.mini__p{ font-size:.76rem; color:var(--cream-3); margin-top:3px; }

/* auteur */
.author{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  margin-top:clamp(40px,5vw,64px); padding-top:clamp(28px,3.4vw,40px);
  border-top:1px solid var(--line);
}
.author__av{
  width:56px; height:56px; border-radius:50%; flex:0 0 auto;
  background:var(--ember-soft); color:var(--ember-lit);
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.02rem;
  border:1px solid var(--line-2);
}
.author__t b{ display:block; font-family:var(--display); font-weight:700; letter-spacing:-.02em; }
.author__t span{ font-size:.85rem; color:var(--cream-3); }

/* deel-knoppen */
.share{ display:flex; gap:9px; margin-left:auto; }
.share a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; color:var(--cream-2);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.share a:hover{ background:var(--ember); color:var(--on-accent); border-color:var(--ember); }

/* het productblok staat binnen .prose en mag de tekstlink-stijl niet erven */
.prose .inline-shop a{ text-decoration:none; color:inherit; }
.prose .inline-shop .arrow-link{ color:var(--cream); }
.prose .inline-shop .arrow-link:hover{ color:var(--ember-lit); }
.mini__t, .mini__p{ display:block; }
.mini > span:last-child{ display:block; min-width:0; }
.mini__t{ overflow-wrap:anywhere; }

/* =========================================================
   Vallende bonen (canvas achter de hero)
   ========================================================= */
/* =========================================================
   Hero met echte video
   ========================================================= */
.hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
/* speelt al 3x vertraagd uit ffmpeg; playbackRate zet er nog wat bovenop */
.hero__media video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  /* kleurcorrectie zit al in het videobestand zelf; hier alleen nog
     een fractie helderheid, anders stapelen twee correcties zich op */
  filter:brightness(var(--hero-video-bright));
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, var(--ink) 2%, var(--hero-scrim-mid) 42%, transparent 78%),
    linear-gradient(0deg, var(--ink) 2%, transparent 34%),
    radial-gradient(120% 80% at 78% 30%, transparent 30%, var(--hero-scrim-edge) 100%);
}
.hero__inner{ z-index:3; }
.scrollcue{ z-index:4; }

/* =========================================================
   Blokken: waarom bedrijven kiezen
   ========================================================= */
.blok{
  display:flex; flex-direction:column; gap:13px;
  padding:28px 26px 26px;
  border:1px solid var(--line); border-radius:18px;
  background:var(--ink-2);
  transition:border-color .45s var(--ease), transform .5s var(--ease-out), background .45s var(--ease);
}
.blok:hover{ border-color:var(--line-2); transform:translateY(-5px); background:var(--ink-3); }
.blok h3{ font-size:1.1rem; letter-spacing:-.025em; line-height:1.22; }
.blok p{ margin:0; color:var(--cream-2); font-size:.92rem; font-weight:300; line-height:1.62; }
.blok .arrow-link{ margin-top:auto; padding-top:12px; font-size:.85rem; }

/* =========================================================
   Referenties
   ========================================================= */
.quotes{
  columns:3; column-gap:clamp(16px,1.8vw,26px);
}
@media (max-width:1080px){ .quotes{ columns:2; } }
@media (max-width:680px){  .quotes{ columns:1; } }
.quote{
  break-inside:avoid; margin:0 0 clamp(16px,1.8vw,26px);
  padding:clamp(24px,2.4vw,32px);
  border:1px solid var(--line); border-radius:18px; background:var(--ink-2);
  transition:border-color .45s var(--ease), background .45s var(--ease);
}
.quote:hover{ border-color:var(--line-2); background:var(--ink-3); }
.quote blockquote{
  margin:0 0 20px; font-size:.97rem; line-height:1.68;
  color:var(--cream-2); font-weight:300;
}
.quote blockquote::before{
  content:'\201C'; display:block;
  font-family:var(--display); font-size:2.6rem; font-weight:800; line-height:.6;
  color:var(--ember); margin-bottom:12px;
}
.quote figcaption{
  display:flex; align-items:center; gap:14px;
  padding-top:17px; border-top:1px solid var(--line);
}
.quote figcaption img{
  height:26px; width:auto; max-width:88px; object-fit:contain;
  filter:var(--logo-filter); opacity:.72;
}
.quote figcaption > span{ display:grid; gap:1px; min-width:0; }
.quote figcaption b{ font-family:var(--display); font-weight:700; font-size:.9rem; letter-spacing:-.02em; }
.quote figcaption span span{ font-size:.78rem; color:var(--cream-3); }

/* =========================================================
   Klantlogo's, onderaan de pagina
   ========================================================= */
.klanten{
  padding-block:clamp(50px,6vw,86px) clamp(46px,5.4vw,78px);
  border-top:1px solid var(--line);
}
.logobar{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.logobar__track{
  display:flex; align-items:center; gap:clamp(38px,4.6vw,78px);
  width:max-content; animation:logoslide 62s linear infinite;
}
.logobar:hover .logobar__track{ animation-play-state:paused; }
@keyframes logoslide{ to{ transform:translateX(-50%); } }
.logobar__track span{ flex:0 0 auto; display:grid; place-items:center; height:52px; }
.logobar__track img{
  max-height:44px; width:auto; max-width:150px; object-fit:contain;
  /* de bronlogo's zijn kleurrijk en staan op wit; dit maakt er een
     rustige witte reeks van die op donker leesbaar blijft */
  filter:var(--logo-filter);
  opacity:.52; transition:opacity .4s var(--ease);
}
.logobar__track span:hover img{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .logobar__track{ animation:none; } }


/* =========================================================
   Licht / donker schakelaar
   ========================================================= */
.themetoggle{
  width:44px; height:44px; flex:0 0 auto;
  border:1px solid var(--line-2); border-radius:999px;
  background:transparent; cursor:pointer;
  display:grid; place-items:center; color:var(--cream-2);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.themetoggle:hover{ color:var(--cream); border-color:var(--cream-3); background:var(--hover-tint); }
.themetoggle svg{ width:18px; height:18px; }
/* toon de maan in donker, de zon in licht */
.themetoggle .i-sun{ display:none; }
:root[data-theme="light"] .themetoggle .i-sun{ display:block; }
:root[data-theme="light"] .themetoggle .i-moon{ display:none; }

/* het thema wisselt zacht, maar zonder de scroll-animaties te storen */
body{ transition:background .5s var(--ease), color .5s var(--ease); }

/* in de lichte versie hebben de donkere sfeerbeelden minder sluier nodig */
:root[data-theme="light"] .story__media img{
  filter:saturate(.94) contrast(1.02) brightness(.92) sepia(.08);
}
:root[data-theme="light"] .hero__glow{
  background:radial-gradient(circle,
      rgba(151,57,42,.16) 0%, rgba(151,57,42,.08) 32%, transparent 66%);
}
:root[data-theme="light"] .hero__machine{
  filter:drop-shadow(0 46px 90px rgba(60,40,30,.32))
         drop-shadow(0 0 70px rgba(151,57,42,.12));
}
:root[data-theme="light"] .pcard__stage img,
:root[data-theme="light"] .pdp__stage img{
  filter:drop-shadow(0 22px 30px rgba(60,40,30,.26));
}
:root[data-theme="light"] .acover::after{
  background:linear-gradient(180deg, transparent, rgba(26,19,16,.36));
}

/* =========================================================
   Oprichter en bewijsmateriaal
   ========================================================= */
.founder{
  display:flex; gap:18px; align-items:center; margin:clamp(26px,3.2vw,38px) 0 0;
  padding:16px; border:1px solid var(--line); border-radius:16px;
  background:var(--ink-2);
}
.founder img{
  width:96px; height:96px; flex:0 0 auto; border-radius:12px;
  /* Luca staat links in het kader, dus daar naartoe uitsnijden */
  object-fit:cover; object-position:32% 26%;
}
.founder figcaption{ display:flex; flex-direction:column; min-width:0; }
.founder b{ font-family:var(--display); font-weight:800; font-size:1.02rem; letter-spacing:-.025em; }
.founder span{ font-size:.87rem; color:var(--cream-2); line-height:1.5; margin-top:3px; }
@media (max-width:520px){
  .founder{ flex-direction:column; align-items:flex-start; }
  .founder img{ width:100%; height:190px; }
}

.proof__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);
}
@media (max-width:1000px){ .proof__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){  .proof__grid{ grid-template-columns:1fr; } }
.proof__item{
  margin:0; position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2);
  aspect-ratio:4/5;
}
.proof__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease-out);
}
.proof__item:hover img{ transform:scale(1.05); }
.proof__item::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 45%, var(--veil) 100%);
}
.proof__item figcaption{
  position:absolute; z-index:1; left:18px; right:18px; bottom:16px;
  font-size:.85rem; line-height:1.4; color:#F7F5F2;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}

/* .foot a is specifieker dan .btn en overschreef de knoptekst */
.foot .btn{ color:var(--on-accent); }
.foot .btn:hover{ color:var(--on-accent); }
.foot .btn--ghost{ color:var(--cream); }


/* =========================================================
   Aansluiting op WordPress-blokken
   ========================================================= */
.wp-site-blocks{ background:var(--ink); color:var(--cream); }
.wp-block-button__link{
  font-family:var(--display); font-weight:700; font-size:.92rem;
  border-radius:999px; padding:14px 26px; color:var(--on-accent);
  background:var(--ember); transition:background .35s var(--ease), transform .35s var(--ease-out);
}
.wp-block-button__link:hover{ background:var(--ember-lit); transform:translateY(-2px); color:var(--on-accent); }
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent; border:1px solid var(--line-2); color:var(--cream);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{ background:var(--hover-tint); }

/* de bewerker toont dezelfde ondergrond als de site */
.editor-styles-wrapper{ background:var(--ink); color:var(--cream); }

/* =========================================================
   Header binnen WordPress-blokken
   De blokopmaak brengt eigen flex-regels mee (is-layout-flex,
   is-nowrap). Zonder deze correcties knijpt de knop dicht tot
   een kolom van een letter breed.
   ========================================================= */
.nav{ flex-wrap:nowrap; gap:clamp(14px,2vw,32px); }
.nav__brand{ flex:0 0 auto; }
.nav__brand .wp-block-site-title{ font-family:var(--display); font-weight:800; font-size:1.06rem; letter-spacing:-.03em; }
.nav__brand .wp-block-site-title a{ color:var(--cream); text-decoration:none; }

.nav__links{ flex:1 1 auto; min-width:0; }
.nav__links ul{ flex-wrap:nowrap; }
.nav__links .wp-block-navigation-item__label{ white-space:nowrap; }

.nav__side{ flex:0 0 auto; }
.nav__side .wp-block-buttons{ flex-wrap:nowrap; margin:0; }
.nav__side .wp-block-button{ margin:0; }
.nav__side .wp-block-button__link{ white-space:nowrap; }

/* het logo van de site mag de balk niet oprekken */
.nav__brand .wp-block-site-logo img{ height:34px; width:auto; }

@media (max-width:1100px){
  .nav__links .wp-block-navigation__responsive-container-open{ color:var(--cream); }
}

/* het onderschrift op het portret moet leesbaar blijven, ook in de
   lichte versie waar de sluier van zichzelf lichter is */
.story__media::after{
  background:linear-gradient(180deg, transparent 40%, rgba(12,9,7,.55) 72%, rgba(12,9,7,.86) 100%);
}
.story__tag b, .story__tag span{ color:#F7F5F2; text-shadow:0 1px 10px rgba(0,0,0,.65); }
.proof__item figcaption{ text-shadow:0 1px 10px rgba(0,0,0,.7); }

/* =========================================================
   WooCommerce
   ========================================================= */
.woo-lijst .pgrid{ margin-bottom:clamp(30px,4vw,56px); }

/* de kaart in de winkel gebruikt post-featured-image; die brengt een
   eigen figure mee die we naar onze sokkel moeten trekken */
.pcard__stage.wp-block-post-featured-image{
  margin:0; aspect-ratio:1/1; position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 62%, var(--ember-soft), transparent 68%);
}
.pcard__stage.wp-block-post-featured-image a,
.pcard__stage.wp-block-post-featured-image img{
  position:absolute; inset:0; margin:auto;
  width:calc(100% - 56px); height:calc(100% - 56px);
  object-fit:contain;
}
.pcard__cat{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-3); }
.pcard__cat a{ color:inherit; text-decoration:none; }
.pcard__name a{ color:inherit; text-decoration:none; }
.pcard__price .woocommerce-Price-amount{
  font-family:var(--display); font-weight:800; font-size:1.16rem; letter-spacing:-.03em; color:var(--cream);
}
.pcard__price del{ opacity:.5; margin-right:6px; }

/* productpagina */
.pdp__kolom-beeld .wp-block-woocommerce-product-image-gallery{
  border:1px solid var(--line); border-radius:22px; overflow:hidden;
  background:radial-gradient(circle at 50% 58%, var(--ember-soft), transparent 66%), var(--ink-2);
  padding:clamp(20px,3vw,44px);
}
.wp-block-woocommerce-product-price .woocommerce-Price-amount{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2rem,3.4vw,2.9rem); letter-spacing:-.045em; color:var(--cream);
}
.woo-pagina{ padding-top:clamp(112px,12vw,168px); padding-bottom:clamp(60px,8vw,120px); }

/* formulieren en knoppen van Woo mee laten lopen */
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.wc-block-components-button{
  font-family:var(--display); font-weight:700; border-radius:999px;
  background:var(--ember); color:var(--on-accent); border:0; padding:13px 24px;
}
.woocommerce button.button:hover, .woocommerce a.button:hover,
.wc-block-components-button:hover{ background:var(--ember-lit); color:var(--on-accent); }

.woocommerce .quantity input, .woocommerce input[type=text], .woocommerce input[type=email],
.woocommerce input[type=tel], .woocommerce textarea, .woocommerce select,
.wc-block-components-text-input input{
  background:var(--ink-2); color:var(--cream);
  border:1px solid var(--line-2); border-radius:10px; padding:11px 14px;
}
.woocommerce table.shop_table, .wc-block-components-sidebar{
  border:1px solid var(--line); border-radius:16px; background:var(--ink-2);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td{ border-color:var(--line); }
.crumbs.wc-block-breadcrumbs a{ color:var(--cream-3); text-decoration:none; }
.crumbs.wc-block-breadcrumbs a:hover{ color:var(--cream); }

/* beeld binnen een gemigreerde pagina */
.paginabeeld{ margin-block:clamp(28px,3.4vw,48px); }
.paginabeeld img{
  width:100%; border-radius:18px; border:1px solid var(--line);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.7);
}

/* de gemigreerde pagina's gebruiken het standaard page-sjabloon:
   tekst leesbaar houden en de koppen ruimte geven */
.wp-block-post-content > p{ max-width:70ch; }
.wp-block-post-content > .wp-block-list{ max-width:70ch; }
.wp-block-post-content > h2{ margin-top:2em; }
.wp-block-post-content > h3{ margin-top:1.6em; }
.phead{ padding-top:clamp(120px,13vw,190px); padding-bottom:clamp(20px,2.6vw,40px); }

/* onze eigen rasters mogen niet in de tekstbreedte geperst worden;
   die is 760px en bedoeld voor lopende tekst, niet voor vier kolommen */
.wp-block-group.grid, .wp-block-group.pgrid, .wp-block-group.quotes,
.wp-block-group.proof__grid, .wp-block-group.figs{
  max-width:var(--maxw); width:100%; margin-inline:auto;
}
.alignwide.grid, .alignwide.pgrid{ max-width:var(--maxw); }

/* =========================================================
   Breedtes
   contentSize is 760px en dat is goed voor lopende tekst, maar te
   smal voor de footer, sectiekoppen en alles wat in kolommen staat.
   ========================================================= */
.foot__grid, .foot__bar{ max-width:var(--maxw); margin-inline:auto; width:100%; }
.foot .wp-block-columns{ gap:clamp(24px,3vw,52px); }
.foot__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot__list li{ margin:0; }

/* de gemigreerde pagina's: kop breed, tekst leesbaar */
.phead{ max-width:var(--maxw); margin-inline:auto; width:100%; }
.wp-block-post-content{ max-width:var(--maxw); margin-inline:auto; }
.wp-block-post-content > *{ max-width:74ch; margin-inline:auto; }
.wp-block-post-content > .alignwide,
.wp-block-post-content > .paginabeeld,
.wp-block-post-content > .wp-block-buttons,
.wp-block-post-content > section,
.wp-block-post-content > .wp-block-query{ max-width:none; }
.wp-block-post-content > .paginabeeld{ max-width:1000px; }

/* =========================================================
   Kennisbank-overzicht
   ========================================================= */
.uitgelicht-lus{ margin-bottom:clamp(40px,5vw,72px); }
.feature{ display:grid; grid-template-columns:1.15fr .85fr; gap:0; }
.feature .feature__img{ margin:0; min-height:340px; }
.feature .feature__img img{ width:100%; height:100%; object-fit:cover; }
.feature .wp-block-post-title{ font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1.1; }
.feature .wp-block-post-title a{ color:var(--cream); text-decoration:none; }
.feature .wp-block-post-excerpt__excerpt{ color:var(--cream-2); font-weight:300; }

/* artikelkaarten in de lus */
.artikel-lus .acard{ height:100%; }
.acard .wp-block-post-title{ font-size:1.16rem; line-height:1.22; letter-spacing:-.025em; margin:0; }
.acard .wp-block-post-title a{ color:var(--cream); text-decoration:none; }
.acard .wp-block-post-excerpt{ margin:0; }
.acard .wp-block-post-excerpt__excerpt{
  font-size:.9rem; color:var(--cream-2); line-height:1.6; font-weight:300;
}
.acard .wp-block-post-excerpt__more-text{ display:none; }
.acard .acard__img{ margin:0; }
.acard .acard__img img{ width:100%; height:100%; object-fit:cover; }
.acard .acard__meta .wp-block-post-date,
.acard .acard__meta p{ margin:0; font-size:.72rem; color:var(--cream-3); }
.acard .acard__meta em{ font-style:normal; color:var(--ember-lit); }

/* paginering */
.wp-block-query-pagination{ margin-top:clamp(34px,4vw,60px); gap:8px; }
.wp-block-query-pagination a, .wp-block-query-pagination span{
  padding:9px 15px; border-radius:999px; border:1px solid var(--line-2);
  color:var(--cream-2); text-decoration:none; font-size:.88rem;
}
.wp-block-query-pagination .current{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.wp-block-query-pagination a:hover{ color:var(--cream); border-color:var(--cream-3); }

/* =========================================================
   Correcties op de blok-wikkels
   ========================================================= */

/* WordPress zet een post-template-wikkel tussen het raster en de items.
   Het raster moet dus op die wikkel staan, niet op de groep eromheen. */
.pgrid, .grid.g-3, .grid.g-4{ display:block; }
.pgrid > .wp-block-post-template,
.grid.g-3 > .wp-block-post-template,
.grid.g-4 > .wp-block-post-template{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(14px,1.8vw,26px);
}
.pgrid > .wp-block-post-template{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid.g-3 > .wp-block-post-template{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.g-4 > .wp-block-post-template{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.wp-block-post-template > li{ margin:0; }
@media (max-width:1180px){
  .pgrid > .wp-block-post-template{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid.g-3 > .wp-block-post-template,
  .grid.g-4 > .wp-block-post-template{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px){ .pgrid > .wp-block-post-template{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){
  .pgrid > .wp-block-post-template,
  .grid.g-3 > .wp-block-post-template,
  .grid.g-4 > .wp-block-post-template{ grid-template-columns:1fr; }
}

/* rasters zonder wikkel (patronen met vaste html) blijven zoals ze waren */
.grid.g-3:not(:has(> .wp-block-post-template)),
.grid.g-4:not(:has(> .wp-block-post-template)){
  display:grid; gap:clamp(20px,2.6vw,42px);
}
.grid.g-3:not(:has(> .wp-block-post-template)){ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.g-4:not(:has(> .wp-block-post-template)){ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1080px){
  .grid.g-3:not(:has(> .wp-block-post-template)),
  .grid.g-4:not(:has(> .wp-block-post-template)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  .grid.g-3:not(:has(> .wp-block-post-template)),
  .grid.g-4:not(:has(> .wp-block-post-template)){ grid-template-columns:1fr; }
}

/* =========================================================
   Artikel: één consistente leesmaat
   ========================================================= */
.prose{ max-width:70ch; margin-inline:0; }
.prose > *{ max-width:none; margin-inline:0; }
.prose > p, .prose > ul, .prose > ol, .prose > h2, .prose > h3, .prose > h4{ max-width:70ch; }
.prose > .wp-block-image, .prose > figure{ max-width:none; margin-block:2em; }
.prose > .wp-block-image img, .prose > figure img{ border-radius:16px; }
.prose .wp-block-heading{ color:var(--cream); }
.prose h2.wp-block-heading{ font-size:clamp(1.5rem,2.3vw,2.1rem); margin:2.2em 0 .7em; scroll-margin-top:110px; }
.prose h3.wp-block-heading{ font-size:clamp(1.12rem,1.5vw,1.34rem); margin:1.9em 0 .5em; letter-spacing:-.025em; }
.prose p{ margin:0 0 1.35em; }
.prose > p:first-child{
  font-size:clamp(1.12rem,1.5vw,1.36rem); line-height:1.6;
  color:var(--cream); font-weight:300; margin-bottom:1.7em;
}

/* kaarten even hoog en netjes uitgelijnd */
.wp-block-post-template > li{ display:flex; }
.wp-block-post-template > li > .wp-block-group{ width:100%; }
.pcard, .acard{ height:100%; display:flex; flex-direction:column; }
.pcard__body, .acard__body{ flex:1; display:flex; flex-direction:column; }
.pcard__foot{ margin-top:auto; }

/* de grote prijs hoort alleen op de productpagina, niet op de kaarten */
.pcard__price .woocommerce-Price-amount,
.pcard__price .wc-block-components-product-price,
.pcard__price{
  font-family:var(--display); font-weight:800;
  font-size:1.1rem; letter-spacing:-.03em; line-height:1.2; color:var(--cream);
}
.pcard__price .woocommerce-Price-amount{ font-size:1.1rem; }
.pdp .wp-block-woocommerce-product-price .woocommerce-Price-amount{
  font-size:clamp(2rem,3.4vw,2.9rem);
}

/* de bestelknop op de kaart klein en rustig houden */
.pcard__foot .wp-block-button__link,
.pcard__foot .wc-block-components-product-button__button{
  padding:9px 16px; font-size:.8rem;
  background:transparent; border:1px solid var(--line-2); color:var(--cream);
}
.pcard:hover .pcard__foot .wp-block-button__link,
.pcard:hover .pcard__foot .wc-block-components-product-button__button{
  background:var(--ember); border-color:var(--ember); color:var(--on-accent);
}

/* productfoto's staan op wit; op donker met multiply laten opgaan,
   op licht gewoon laten staan */

/* productblok binnen een inhoudspagina */
.prodblok{ margin-block:clamp(48px,6vw,88px); max-width:var(--maxw); }
.prodblok__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:clamp(24px,3vw,40px);
}
.prodblok__head .label{ display:block; margin-bottom:10px; }
.prodblok__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);
}
@media (max-width:1080px){ .prodblok__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){  .prodblok__grid{ grid-template-columns:1fr; } }
.prodblok .pcard{ text-decoration:none; }
.prodblok .pcard__stage{ display:block; }
.prodblok .pcard__body{ display:flex; flex-direction:column; gap:8px; }
.prodblok .pcard__name{ font-family:var(--display); font-weight:700; font-size:1rem; line-height:1.24; letter-spacing:-.02em; }
.prodblok .pcard__price{ font-family:var(--display); font-weight:800; font-size:1.05rem; }
.prodblok .pcard__price del{ opacity:.5; font-size:.85em; }

/* =========================================================
   Inhoudspagina's: één tekstkolom, koppen erboven uitgelijnd
   Let op: 'ch' rekent tegen de eigen fontgrootte, dus op een kop van
   47px is 74ch ruim 1700px en begrenst het niets. Daarom rem.
   ========================================================= */
.wp-block-post-content{ font-size:clamp(1rem,1.06vw,1.09rem); line-height:1.75; }
.wp-block-post-content > *{ max-width:44rem; margin-inline:0; }
.wp-block-post-content > h2,
.wp-block-post-content > h3,
.wp-block-post-content > h4{ max-width:34rem; }

.wp-block-post-content > h2{ font-size:clamp(1.5rem,2.2vw,2rem); margin:2.4em 0 .6em; }
.wp-block-post-content > h3{ font-size:clamp(1.14rem,1.5vw,1.34rem); margin:2em 0 .5em; }
.wp-block-post-content > p{ margin:0 0 1.3em; color:rgba(247,245,242,.82); }
:root[data-theme="light"] .wp-block-post-content > p{ color:rgba(26,19,16,.86); }
.wp-block-post-content > p:first-child{
  font-size:clamp(1.1rem,1.45vw,1.3rem); line-height:1.6;
  color:var(--cream); font-weight:300; margin-bottom:1.8em; max-width:40rem;
}
.wp-block-post-content > ul,
.wp-block-post-content > ol{ margin:0 0 1.6em; padding-left:0; list-style:none; display:grid; gap:11px; }
.wp-block-post-content > ul li{ position:relative; padding-left:28px; }
.wp-block-post-content > ul li::before{
  content:''; position:absolute; left:7px; top:.7em;
  width:6px; height:6px; border-radius:50%; background:var(--ember);
}
.wp-block-post-content > .wp-block-buttons{ margin-block:2em; max-width:none; }

/* volle breedte blijft voor beeld en de blokken */
.wp-block-post-content > .paginabeeld{ max-width:56rem; }
.wp-block-post-content > .prodblok,
.wp-block-post-content > section,
.wp-block-post-content > .alignwide,
.wp-block-post-content > .wp-block-query{ max-width:none; }

/* WordPress' is-layout-constrained centreert kinderen met
   'margin-inline:auto' en wint op specificiteit. Hier links uitlijnen. */
.wp-block-post-content.is-layout-constrained > *,
.wp-block-post-content > *:where(:not(.alignwide):not(.alignfull)){
  margin-left:0; margin-right:auto;
}
.wp-block-post-content{ max-width:min(100%, 78rem); margin-inline:auto; }

/* De layout-CSS die WordPress zelf genereert (.wp-container-xxx) komt na
   deze stylesheet in de head. Daarom hier een selector die het wint. */
body .wp-block-post-content > *,
body .wp-block-post-content.is-layout-constrained > *{
  margin-left:0 !important;
  margin-right:auto !important;
}
body .wp-block-post-content > .alignwide,
body .wp-block-post-content > .alignfull,
body .wp-block-post-content > .prodblok,
body .wp-block-post-content > section{
  margin-left:0 !important; margin-right:0 !important;
}

/* =========================================================
   Machineblok: tekst links, productfoto rechts
   ========================================================= */
body .wp-block-post-content > .machineblok{
  max-width:none !important;
  margin-block:clamp(48px,5.5vw,84px) !important;
  gap:clamp(24px,3.4vw,56px);
  align-items:center;
}
.machineblok .wp-block-column > *{ max-width:none; }
.machineblok h2, .machineblok h3{ margin-top:0; }
.machineblok__beeld{
  border:1px solid var(--line); border-radius:20px;
  background:radial-gradient(circle at 50% 58%, var(--ember-soft), transparent 68%), var(--ink-2);
  padding:clamp(20px,2.6vw,40px);
}
.machinefoto{ margin:0; }
.machinefoto img{
  width:100%; height:auto; max-height:360px; object-fit:contain;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));
}
@media (max-width:860px){
  body .wp-block-post-content > .machineblok{ flex-direction:column-reverse; }
  .machineblok .wp-block-column{ flex-basis:100% !important; }
}

/* =========================================================
   Machineblokken: duidelijk gescheiden en om en om gespiegeld
   ========================================================= */
body .wp-block-post-content > .machineblok{
  margin-block:0 !important;
  padding-block:clamp(44px,5vw,76px);
  border-top:1px solid var(--line);
}
/* de eerste heeft geen streep nodig, die volgt op een kop */
body .wp-block-post-content > .machineblok:first-of-type{ border-top:0; padding-top:clamp(20px,2.4vw,36px); }

/* om en om: even blokken met de foto links */
body .wp-block-post-content > .machineblok:nth-of-type(even){ flex-direction:row-reverse; }

/* de foto wisselt mee van kant, dus de sokkel moet symmetrisch blijven */
.machineblok__beeld{ align-self:stretch; display:flex; align-items:center; justify-content:center; }

/* een rustig nummer per machine geeft houvast in een lange lijst */
.machineblok{ position:relative; counter-increment:machine; }
.wp-block-post-content{ counter-reset:machine; }
.machineblok::before{
  content:counter(machine,decimal-leading-zero);
  position:absolute; top:clamp(44px,5vw,76px); left:0;
  font-family:var(--display); font-weight:700; font-size:.72rem;
  letter-spacing:.18em; color:var(--cream-3);
}
body .wp-block-post-content > .machineblok:first-of-type::before{ top:clamp(20px,2.4vw,36px); }
.machineblok .wp-block-column:first-child{ padding-top:26px; }

@media (max-width:860px){
  body .wp-block-post-content > .machineblok,
  body .wp-block-post-content > .machineblok:nth-of-type(even){ flex-direction:column-reverse; }
  .machineblok::before{ top:clamp(20px,3vw,34px); }
}

/* de productfoto's zijn nu echt uitgeknipt naar transparant, dus geen
   blend-trucs meer nodig; alleen nog een schaduw voor diepte */
.machinefoto img, .pcard__stage img{ filter:drop-shadow(0 22px 34px rgba(0,0,0,.35)); }

/* =========================================================
   De reis van boon tot kop
   Horizontale baan met scroll-snap. Bewust geen slider-bibliotheek:
   dit werkt met de gewone scroll van het apparaat, ook met een veeg
   op mobiel en met het toetsenbord.
   ========================================================= */
.reis{ padding-block:clamp(80px,10vw,170px); overflow:hidden; }
.reisbaan{
  margin-top:clamp(30px,3.6vw,54px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-inline:var(--pad);
  padding-bottom:14px;
}
.reisbaan::-webkit-scrollbar{ display:none; }
.reisbaan__spoor{
  list-style:none; margin:0; padding:0;
  display:flex; gap:clamp(14px,1.8vw,26px); width:max-content;
}
.reisstap{ scroll-snap-align:start; flex:0 0 auto; width:clamp(240px,26vw,340px); }
.reisstap figure{ margin:0; display:flex; flex-direction:column; gap:16px; height:100%; }
.reisstap__beeld{
  position:relative; display:block; aspect-ratio:4/5;
  border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--ink-2);
}
.reisstap__beeld img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease-out);
}
.reisstap:hover .reisstap__beeld img{ transform:scale(1.05); }
.reisstap__beeld::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(12,9,7,.55) 100%);
}
.reisstap__nr{
  position:absolute; z-index:1; left:16px; top:14px;
  font-family:var(--display); font-weight:800; font-size:.72rem;
  letter-spacing:.16em; color:#F7F5F2; text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.reisstap figcaption{ display:grid; gap:6px; }
.reisstap figcaption b{
  font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:-.025em;
  color:var(--cream);
}
.reisstap figcaption span{ font-size:.88rem; line-height:1.55; color:var(--cream-2); font-weight:300; }
.reisbaan__hint{ margin-top:18px; font-size:.8rem; letter-spacing:.04em; }

@media (max-width:640px){
  .reisstap{ width:76vw; }
}
@media (prefers-reduced-motion:reduce){
  .reisbaan{ scroll-behavior:auto; }
  .reisstap:hover .reisstap__beeld img{ transform:none; }
}

/* =========================================================
   Oproep midden in een pagina
   Een kop met alleen een knop eronder leest als een losgeslagen
   sectie. Dit maakt er een duidelijk afgebakend blok van.
   ========================================================= */
body .wp-block-post-content > .inline-cta{
  max-width:none !important;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,44px); flex-wrap:wrap;
  margin-block:clamp(40px,5vw,72px) !important;
  padding:clamp(24px,3vw,40px);
  border:1px solid var(--line-2); border-radius:20px;
  background:linear-gradient(150deg, var(--ember-soft), var(--ink-2));
}
.inline-cta__tekst{ flex:1 1 30rem; max-width:38rem; }
.inline-cta h3{ margin:0 0 8px; font-size:clamp(1.2rem,1.7vw,1.5rem); }
.inline-cta p{ margin:0; color:var(--cream-2); font-size:.95rem; line-height:1.6; }
.inline-cta .wp-block-buttons{ margin:0; flex:0 0 auto; }
@media (max-width:700px){
  body .wp-block-post-content > .inline-cta{ flex-direction:column; align-items:flex-start; }
}

/* de paginakop stond ingesprongen terwijl de inhoud eronder links begint;
   dezelfde constrained-centrering als eerder bij de post-content */
body .phead{ max-width:var(--maxw) !important; margin-inline:auto !important; }
body .phead > *{ margin-left:0 !important; margin-right:auto !important; max-width:26ch; }
body .phead .wp-block-post-title{ max-width:18ch; }
body .phead > .label{ max-width:none; }
/* de winkelkop regelt zijn eigen breedte en mag niet in die 26ch geknepen
   worden; 26ch komt op een gewone alinea neer op zo'n 234 pixels */
body .phead > .winkelkop{ max-width:var(--maxw); width:100%; }

/* =========================================================
   Productpagina, herzien
   De kolommen zaten in de tekstbreedte van 760px geknepen; hier
   krijgen ze de volle wrap-breedte en een werkbare verhouding.
   ========================================================= */
.pdp{ padding-top:clamp(100px,11vw,156px); padding-bottom:clamp(40px,5vw,72px); }
.pdp .wrap, .pdp__details .wrap{ max-width:var(--maxw); margin-inline:auto; }

body .pdp__main{
  max-width:none !important;
  display:flex; gap:clamp(28px,4vw,72px); align-items:flex-start;
  margin-top:clamp(20px,2.6vw,36px);
}
body .pdp__main > .wp-block-column{ margin:0 !important; min-width:0; }

/* beeld: groot, op een sokkel, blijft in beeld tijdens het lezen */
.pdp__kolom-beeld{ position:sticky; top:104px; }
.pdp__kolom-beeld .wp-block-woocommerce-product-image-gallery{
  border:1px solid var(--line); border-radius:22px; overflow:hidden;
  background:radial-gradient(circle at 50% 56%, var(--ember-soft), transparent 66%), var(--ink-2);
  padding:clamp(24px,3.4vw,56px);
  display:flex; align-items:center; justify-content:center;
  min-height:min(62vh,560px);
}
.pdp__kolom-beeld .wp-block-woocommerce-product-image-gallery img{
  width:auto; max-width:100%; max-height:min(56vh,500px); object-fit:contain;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.4));
}
@media (max-width:900px){
  body .pdp__main{ flex-direction:column; }
  body .pdp__main > .wp-block-column{ flex-basis:100% !important; width:100%; }
  .pdp__kolom-beeld{ position:static; }
}

/* informatiekolom */
.pdp__cat{ display:block; margin-bottom:10px; }
.pdp__cat a{ color:var(--cream-3); text-decoration:none; }
.pdp__kolom-info .wp-block-post-title{ margin:0 0 14px; }
.pdp__kolom-info .wp-block-post-excerpt{ margin:0 0 22px; }
.pdp__kolom-info .wp-block-post-excerpt__more-text{ display:none; }
.pdp__price{ margin:0 0 20px; }
.pdp__price .woocommerce-Price-amount{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.9rem,3vw,2.6rem); letter-spacing:-.045em; color:var(--cream);
}
.pdp__price .wp-block-woocommerce-product-price{ display:block; }

/* hulpblok onder de zekerheden */
.pdp__hulp{
  margin-top:clamp(22px,2.6vw,34px); padding:18px 20px;
  border:1px solid var(--line-2); border-radius:14px;
  background:var(--ink-2); display:grid; gap:4px;
}
.pdp__hulp b{ font-family:var(--display); font-weight:700; font-size:.95rem; }
.pdp__hulp span{ font-size:.88rem; color:var(--cream-2); }

/* de lange beschrijving als eigen leesbare sectie eronder */
.pdp__details{ padding-block:clamp(48px,6vw,90px); border-top:1px solid var(--line); }
.pdp__tabs{ max-width:none; }
.pdp__tabs .wc-tabs, .pdp__tabs ul.tabs{
  list-style:none; margin:0 0 clamp(24px,3vw,40px); padding:0;
  display:flex; gap:8px; flex-wrap:wrap; border:0;
}
.pdp__tabs .wc-tabs li, .pdp__tabs ul.tabs li{
  margin:0; padding:0; background:none; border:0;
}
.pdp__tabs .wc-tabs li a, .pdp__tabs ul.tabs li a{
  display:block; padding:10px 18px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--cream-2);
  font-size:.86rem; text-decoration:none;
}
.pdp__tabs .wc-tabs li.active a, .pdp__tabs ul.tabs li.active a{
  background:var(--cream); color:var(--ink); border-color:var(--cream); font-weight:600;
}
.pdp__tabs .woocommerce-Tabs-panel{ max-width:74ch; }
.pdp__tabs .woocommerce-Tabs-panel h2{
  font-size:clamp(1.4rem,2vw,1.9rem); margin:0 0 .7em;
}
.pdp__tabs .woocommerce-Tabs-panel h3{ font-size:1.2rem; margin:1.8em 0 .5em; }
.pdp__tabs .woocommerce-Tabs-panel p{ margin:0 0 1.3em; line-height:1.75; color:var(--cream-2); }
.pdp__tabs .woocommerce-Tabs-panel ul{ display:grid; gap:10px; padding-left:0; list-style:none; margin:0 0 1.5em; }
.pdp__tabs .woocommerce-Tabs-panel li{ position:relative; padding-left:28px; color:var(--cream-2); }
.pdp__tabs .woocommerce-Tabs-panel li::before{
  content:''; position:absolute; left:7px; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--ember);
}
.pdp__tabs table{ width:100%; border-collapse:collapse; margin:0 0 1.5em; }
.pdp__tabs table th, .pdp__tabs table td{
  text-align:left; padding:12px 0; border-bottom:1px solid var(--line); font-size:.92rem;
}
.pdp__tabs table th{ color:var(--cream-3); font-weight:500; width:34%; }

/* =========================================================
   Productbeschrijving: leesbaar houden zonder eindeloze kolom
   31 opsommingsitems onder elkaar in een smalle kolom maakt de
   pagina 3500px hoog met de halve breedte ongebruikt.
   ========================================================= */
.pdp__tabs .woocommerce-Tabs-panel{ max-width:none; }

/* lopende tekst blijft op leesmaat */
.pdp__tabs .woocommerce-Tabs-panel > p,
.pdp__tabs .woocommerce-Tabs-panel > h2,
.pdp__tabs .woocommerce-Tabs-panel > h3{ max-width:70ch; }

/* specificaties en kenmerken in twee kolommen */
.pdp__tabs .woocommerce-Tabs-panel > ul{
  columns:2; column-gap:clamp(28px,4vw,64px);
  max-width:none; gap:0; display:block;
}
.pdp__tabs .woocommerce-Tabs-panel > ul > li{
  break-inside:avoid; margin:0 0 11px; padding-left:26px; line-height:1.6;
}
@media (max-width:820px){
  .pdp__tabs .woocommerce-Tabs-panel > ul{ columns:1; }
}

/* De tabbladen stonden op sticky. Zodra er twee tabbladen zijn (sinds de
   beoordelingen weer aanstaan) schoof die rij bij het scrollen over de kop
   van de beschrijving heen. Ze horen gewoon in de tekststroom mee te lopen. */
.pdp__tabs .wc-tabs, .pdp__tabs ul.tabs{
  position:static; z-index:auto; background:none;
  padding-block:0; margin-bottom:clamp(20px,2.6vw,32px);
}

/* het reactieformulier hoort hier niet zo prominent */
.pdp__tabs #reviews .comment-form{ max-width:44rem; }
.pdp__tabs #reviews input[type=text],
.pdp__tabs #reviews input[type=email],
.pdp__tabs #reviews textarea{ width:100%; max-width:36rem; }

/* =========================================================
   Downloads in de productbeschrijving
   Productsheet, materialenpaspoort en energielabel stonden als
   kale tekstlinks tussen de alinea's; hier worden het knoppen.
   ========================================================= */
.pdp__tabs a[href$=".pdf"], .pdp__tabs a[href$=".PDF"]{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 10px 10px 0; padding:10px 16px;
  border:1px solid var(--line-2); border-radius:999px;
  color:var(--cream); text-decoration:none;
  font-family:var(--display); font-weight:600; font-size:.85rem;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.pdp__tabs a[href$=".pdf"]:hover{ background:var(--hover-tint); border-color:var(--cream-3); }
.pdp__tabs a[href$=".pdf"]::before{
  content:''; width:15px; height:15px; flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7.5 10.5 12 15l4.5-4.5M4 19h16'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7.5 10.5 12 15l4.5-4.5M4 19h16'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* de alinea die alleen downloads bevat mag compacter */
.pdp__tabs p:has(> a[href$=".pdf"]){ margin-bottom:.6em; }

/* =========================================================
   Correcties productpagina
   ========================================================= */

/* 1. Het productblok stond tegen de linkerrand: geen paginamarge. */
.prodblok{
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad);
}

/* 2. WooCommerce toont zowel een kop als een tabblad-pil met dezelfde
      tekst. De sticky-pil schoof daar bovenop. De kop is duidelijker,
      dus de pillenrij verdwijnt zodra er maar één tabblad is. */
.pdp__tabs .wc-tabs, .pdp__tabs ul.tabs{
  position:static; background:none; padding-block:0;
  margin-bottom:clamp(18px,2.2vw,28px);
}
.pdp__tabs .wc-tabs:has(li:only-child),
.pdp__tabs ul.tabs:has(li:only-child){ display:none; }

/* de kop van het paneel netjes uitlijnen met de rest */
.pdp__tabs h2:first-child,
.pdp__tabs .woocommerce-Tabs-panel > h2:first-child{
  font-size:clamp(1.5rem,2.2vw,2rem); margin:0 0 .8em;
}
.pdp__tabs .woocommerce-Tabs-panel{ padding-top:0; }

/* =========================================================
   Breedte van de post-content
   De leeskap van 78rem hoort op tekstpagina's, niet op pagina's die
   uit volle-breedte patronen bestaan. Daar telde hij bovendien op bij
   de opvulling van de secties, waardoor die 1104 breed werden terwijl
   de footer 1296 is.
   ========================================================= */
.wp-block-post-content.postinhoud-breed{ max-width:none !important; }
body .wp-block-post-content.postinhoud-breed > *{ max-width:none; }

/* de sectie-opvulling van WordPress (72px) geeft precies dezelfde
   marge als de footer; niet weghalen dus. Alleen de inhoud begrenzen. */
.postinhoud-breed .wrap{ max-width:var(--maxw); margin-inline:auto; }
.postinhoud-breed .shead,
.postinhoud-breed .grid,
.postinhoud-breed .story__grid,
.postinhoud-breed .story__pills,
.postinhoud-breed .proof__grid,
.postinhoud-breed .quotes,
.postinhoud-breed .figs{
  max-width:var(--maxw); margin-inline:auto;
}

/* =========================================================
   Artikelkop, herzien
   Stond op 760px in het midden met een foto die tot een strook
   werd afgesneden. Nu tekst links, beeld rechts op volle breedte.
   ========================================================= */
.ahero{ padding-top:clamp(110px,12vw,168px); padding-bottom:clamp(30px,4vw,56px); position:relative; overflow:hidden; }
.ahero__glow{
  position:absolute; width:1100px; aspect-ratio:1; border-radius:50%;
  left:-14%; top:-56%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, var(--ember-soft), transparent 62%); filter:blur(28px);
}
.ahero__inner{
  position:relative; z-index:1;
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4.4vw,76px); align-items:center;
}
@media (max-width:940px){
  .ahero__inner{ grid-template-columns:1fr; gap:clamp(24px,4vw,40px); }
}

.ahero__tekst{ display:grid; gap:0; }
.ahero .crumbs{ margin-bottom:18px; }
.ahero .crumbs p{ margin:0; font-size:.79rem; color:var(--cream-3); }
.ahero__cat{ display:block; margin-bottom:14px; }
.ahero__cat a{ color:var(--ember-lit); text-decoration:none; }
.ahero .wp-block-post-title{
  font-size:clamp(2rem,4vw,3.6rem); line-height:1.02; letter-spacing:-.04em;
  margin:0 0 20px; max-width:18ch;
}
.ahero__lede{ margin:0 0 26px; max-width:44ch; }
.ahero__lede .wp-block-post-excerpt__more-text{ display:none; }
.ahero .ameta{
  padding-top:20px; border-top:1px solid var(--line);
  gap:10px 22px; font-size:.85rem; color:var(--cream-3);
}
.ahero .ameta .wp-block-post-date{ margin:0; }

/* het beeld: staand kader dat elk bronformaat aankan */
.ahero__beeld{ position:relative; }
.ahero__beeld .acover{
  margin:0; border-radius:22px; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2);
  aspect-ratio:4/3; position:relative;
}
.ahero__beeld .acover img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s var(--ease-out);
}
.ahero__beeld:hover .acover img{ transform:scale(1.03); }
.ahero__beeld .acover::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg, transparent 55%, rgba(12,9,7,.30));
}
/* een warme rand achter het beeld geeft diepte */
.ahero__beeld::before{
  content:''; position:absolute; inset:14px -14px -14px 14px; z-index:-1;
  border-radius:22px; background:var(--ember-soft);
}
@media (max-width:940px){
  .ahero__beeld .acover{ aspect-ratio:16/10; }
  .ahero__beeld::before{ display:none; }
}

/* de sectie onder het artikel volgde de tekstbreedte van 760px;
   die hoort net als de rest op de volle wrap-breedte te staan */
.single .wp-block-post-content ~ *, 
article > .section .wrap{ max-width:var(--maxw); margin-inline:auto; }

/* =========================================================
   Contactblok
   ========================================================= */
.contactblok{ padding-block:clamp(70px,9vw,140px); }
.contactblok__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,4.6vw,80px); align-items:center;
  max-width:var(--maxw); margin-inline:auto;
}
@media (max-width:940px){ .contactblok__grid{ grid-template-columns:1fr; } }
.contactblok__tekst .label{ display:block; margin-bottom:14px; }
.contactblok__tekst h2{ margin:0 0 20px; }
.contactblok__tekst .lede{ margin:0 0 clamp(26px,3vw,38px); }

.contactblok__kanalen{ display:grid; gap:12px; }
.kanaal{
  display:flex; align-items:center; gap:16px;
  padding:16px 18px; border:1px solid var(--line); border-radius:16px;
  background:var(--ink-2); text-decoration:none; color:inherit;
  transition:border-color .35s var(--ease), transform .35s var(--ease-out), background .35s var(--ease);
}
.kanaal:hover{ border-color:var(--line-2); transform:translateY(-2px); background:var(--ink-3); }
.kanaal__ico{
  width:44px; height:44px; flex:0 0 auto; border-radius:12px;
  display:grid; place-items:center; background:var(--ember-soft); color:var(--ember-lit);
}
.kanaal > span:last-child{ display:grid; gap:2px; min-width:0; }
.kanaal b{ font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.02em; }
.kanaal span span{ font-size:.85rem; color:var(--cream-2); }

.contactblok__extra{
  display:grid; gap:16px; margin-top:clamp(24px,3vw,36px);
  padding-top:clamp(22px,2.6vw,30px); border-top:1px solid var(--line);
}
.contactblok__extra div{ display:grid; gap:3px; }
.contactblok__extra b{ font-family:var(--display); font-weight:700; font-size:.95rem; }
.contactblok__extra span{ font-size:.88rem; color:var(--cream-2); line-height:1.6; }

.contactblok__beeld{
  position:relative; border-radius:22px; overflow:hidden;
  border:1px solid var(--line-2); aspect-ratio:4/5;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.6);
}
.contactblok__beeld img{ width:100%; height:100%; object-fit:cover; }
.contactblok__beeld::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 52%, rgba(12,9,7,.85));
}
.contactblok__kaart{
  position:absolute; z-index:1; left:22px; right:22px; bottom:20px; display:grid; gap:3px;
}
.contactblok__kaart b{ font-family:var(--display); font-weight:800; font-size:1.05rem; color:#F7F5F2; }
.contactblok__kaart span{ font-size:.85rem; color:rgba(247,245,242,.8); }

/* =========================================================
   Over ons
   ========================================================= */
.overons{ padding-block:clamp(70px,9vw,140px); }
.overons .wrap{ max-width:var(--maxw); margin-inline:auto; }
.overons__top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(24px,4vw,64px); flex-wrap:wrap; margin-bottom:clamp(30px,4vw,54px);
}
.overons__top .label{ display:block; margin-bottom:14px; }
.overons__top h2{ margin:0; max-width:16ch; }
.overons__top .lede{ margin:0; flex:0 1 34rem; }

.overons__groot{
  margin:0 0 clamp(36px,4.6vw,72px); position:relative;
  border-radius:24px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:21/9;
}
.overons__groot img{ width:100%; height:100%; object-fit:cover; }
.overons__groot::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 48%, rgba(12,9,7,.88));
}
.overons__groot figcaption{
  position:absolute; z-index:1; left:clamp(20px,3vw,40px); bottom:clamp(18px,2.6vw,32px);
  display:grid; gap:3px;
}
.overons__groot b{ font-family:var(--display); font-weight:800; font-size:1.1rem; color:#F7F5F2; }
.overons__groot figcaption span{ font-size:.9rem; color:rgba(247,245,242,.82); }
@media (max-width:720px){ .overons__groot{ aspect-ratio:4/3; } }

.overons__kolommen{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,54px); margin-bottom:clamp(36px,4.6vw,72px);
}
@media (max-width:820px){ .overons__kolommen{ grid-template-columns:1fr; } }
.overons__kolommen h3{ font-size:1.16rem; margin:0 0 10px; letter-spacing:-.025em; }
.overons__kolommen p{ margin:0; color:var(--cream-2); font-size:.94rem; line-height:1.7; font-weight:300; }

.overons__strook{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);
}
@media (max-width:820px){ .overons__strook{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.overons__strook figure{
  margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:1/1;
}
.overons__strook img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.overons__strook figure:hover img{ transform:scale(1.06); }

/* =========================================================
   Formulierband (Gravity Forms)
   ========================================================= */
.formband{
  padding-block:clamp(64px,8vw,120px);
  background:var(--ink-2); border-top:1px solid var(--line);
}
.formband .wrap{ max-width:var(--maxw); margin-inline:auto; }
.formband__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,88px); align-items:start;
}
.formband__zij h2{ margin:.35em 0 .5em; }
.formband__zij p{ color:var(--cream-2); line-height:1.75; max-width:34rem; }
.formband__punten{
  list-style:none; margin:clamp(22px,2.8vw,32px) 0 0; padding:0; display:grid; gap:12px;
}
.formband__punten li{
  position:relative; padding-left:30px; font-size:.94rem; color:var(--cream-2); line-height:1.6;
}
.formband__punten li::before{
  content:''; position:absolute; left:0; top:.42em; width:16px; height:16px;
  border-radius:50%; border:1.5px solid var(--ember-lit);
  background:radial-gradient(circle at 50% 50%, var(--ember-lit) 0 3px, transparent 3.5px);
}

/* het formulier zelf naar onze eigen hand zetten */
.formband__form{
  background:var(--ink); border:1px solid var(--line-2); border-radius:24px;
  padding:clamp(26px,3.4vw,44px);
  box-shadow:0 40px 90px -46px rgba(0,0,0,.55);
}
.formband__form .gform_wrapper.gravity-theme .gform_fields{ gap:20px 22px; }
.formband__form .gform_wrapper.gravity-theme .gfield_label,
.formband__form .gform_wrapper .gfield_label{
  font-family:var(--display); font-weight:700; font-size:.9rem;
  color:var(--cream); letter-spacing:.01em; margin-bottom:8px;
}
.formband__form .gform_wrapper .gfield_required{ color:var(--ember-lit); }
.formband__form .gform_wrapper input[type=text],
.formband__form .gform_wrapper input[type=email],
.formband__form .gform_wrapper input[type=tel],
.formband__form .gform_wrapper input[type=url],
.formband__form .gform_wrapper input[type=number],
.formband__form .gform_wrapper select,
.formband__form .gform_wrapper textarea{
  width:100%; box-sizing:border-box;
  background:var(--ink-2); color:var(--cream);
  border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; font-family:var(--body); font-size:.97rem; line-height:1.5;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.formband__form .gform_wrapper textarea{ min-height:150px; resize:vertical; }
.formband__form .gform_wrapper input::placeholder,
.formband__form .gform_wrapper textarea::placeholder{ color:var(--cream-3, var(--cream-2)); opacity:.6; }
.formband__form .gform_wrapper input:focus,
.formband__form .gform_wrapper select:focus,
.formband__form .gform_wrapper textarea:focus{
  outline:none; border-color:var(--ember-lit);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ember-lit) 22%, transparent);
}
.formband__form .gform_wrapper .gfield_description,
.formband__form .gform_wrapper .gform_required_legend{
  font-size:.83rem; color:var(--cream-2); opacity:.85;
}
.formband__form .gform_wrapper .gform_footer{ margin:clamp(20px,2.4vw,28px) 0 0; padding:0; }
.formband__form .gform_wrapper .gform_button{
  appearance:none; cursor:pointer;
  background:var(--ember); color:#fff; border:0; border-radius:999px;
  font-family:var(--display); font-weight:700; font-size:.97rem;
  padding:15px 32px; letter-spacing:.01em;
  transition:background .2s var(--ease-out), transform .2s var(--ease-out);
}
.formband__form .gform_wrapper .gform_button:hover{ background:var(--ember-lit); transform:translateY(-2px); }
.formband__form .gform_wrapper .gfield_error input,
.formband__form .gform_wrapper .gfield_error textarea,
.formband__form .gform_wrapper .gfield_error select{ border-color:#D9614C; }
.formband__form .gform_wrapper .validation_message,
.formband__form .gform_wrapper .gform_validation_errors{
  background:transparent; border:1px solid #D9614C; border-radius:12px;
  color:#E58572; font-size:.87rem; padding:10px 14px; box-shadow:none;
}
.formband__form .gform_wrapper .gform_confirmation_message{
  font-family:var(--display); font-size:1.05rem; color:var(--cream);
  border:1px solid var(--line-2); border-radius:16px; padding:22px 24px;
}

@media (max-width:900px){
  .formband__grid{ grid-template-columns:minmax(0,1fr); gap:34px; }
}

/* =========================================================
   Verhaal met verticale video
   ========================================================= */
.verhaalvideo{ padding-block:clamp(60px,7.5vw,110px); }
.verhaalvideo .wrap{ max-width:var(--maxw); margin-inline:auto; }
.verhaalvideo__grid{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px); align-items:center;
}
.verhaalvideo__speler{
  position:relative; aspect-ratio:9/16; border-radius:22px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--ink-2);
  box-shadow:0 44px 100px -40px rgba(0,0,0,.6);
}
.verhaalvideo__speler iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.verhaalvideo__tekst h2{ margin:.35em 0 .55em; }
.verhaalvideo__tekst p{ color:var(--cream-2); line-height:1.8; margin:0 0 1.05em; max-width:36rem; }
.verhaalvideo__link a{
  color:var(--ember-lit); font-family:var(--display); font-weight:700;
  text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--ember-lit) 45%, transparent);
  padding-bottom:2px;
}
.verhaalvideo__link a:hover{ border-bottom-color:var(--ember-lit); }

@media (max-width:900px){
  .verhaalvideo__grid{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .verhaalvideo__speler{ max-width:340px; margin-inline:auto; }
}

/* =========================================================
   Donatieteller
   ========================================================= */
.tellerband{ padding-block:clamp(60px,7.5vw,110px); }
.tellerband .wrap{ max-width:var(--maxw); margin-inline:auto; }

.teller{
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:26px;
  padding:clamp(28px,4vw,56px);
  box-shadow:0 46px 100px -50px rgba(0,0,0,.55);
}
.teller__kop h2{ margin:.35em 0 .5em; max-width:20em; }
.teller__kop h2 em{ font-style:normal; color:var(--ember-lit); }
.teller__kop p{ color:var(--cream-2); line-height:1.7; max-width:38rem; margin:0; }

.teller__stand{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px,4vw,60px); flex-wrap:wrap;
  margin:clamp(30px,4vw,54px) 0 clamp(22px,2.6vw,32px);
}
.teller__bedrag{ text-align:right; display:grid; gap:6px; margin-left:auto; }
.teller__bedrag b{
  font-family:var(--display); font-weight:800; line-height:1;
  font-size:clamp(2.4rem,5.4vw,4.1rem); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.teller__bedrag > span{ font-size:.9rem; color:var(--cream-2); }

/* de mok loopt vol naarmate het doel dichterbij komt */
.teller__kop-beeld{ position:relative; flex:0 0 auto; padding-right:34px; }
/* het oor hangt buiten de mok, dus die kan zelf niet clippen */
.teller__kop-beeld::after{
  content:''; position:absolute; left:110px; top:22px; width:32px; height:44px;
  border:3px solid var(--cream); border-left:0; border-radius:0 24px 24px 0;
}
.teller__mok{
  position:relative; display:block; width:110px; height:118px;
  border:3px solid var(--cream); border-top:0;
  border-radius:6px 6px 46px 46px; overflow:hidden;
}
.teller__vulling{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, var(--ember-lit), var(--ember));
  transition:height 1.4s var(--ease-out);
}
.teller__damp{ position:absolute; left:22px; top:-28px; display:flex; gap:9px; }
.teller__damp i{
  display:block; width:5px; height:20px; border-radius:99px;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--cream) 40%, transparent));
  animation:mkbc-damp 3.4s var(--ease-out) infinite;
}
.teller__damp i:nth-child(2){ animation-delay:.5s; height:26px; }
.teller__damp i:nth-child(3){ animation-delay:1s; }
@keyframes mkbc-damp{
  0%,100%{ opacity:0; transform:translateY(6px) scaleY(.7); }
  45%    { opacity:.85; transform:translateY(-4px) scaleY(1); }
}
@media (prefers-reduced-motion:reduce){
  .teller__damp i{ animation:none; opacity:.6; }
  .teller__vulling{ transition:none; }
}

.teller__balk{
  height:12px; border-radius:99px; background:var(--ink-4, var(--line));
  overflow:hidden; border:1px solid var(--line);
}
.teller__balk span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--ember), var(--ember-lit));
}
.teller__onder{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:12px; font-size:.88rem; color:var(--cream-2);
}

.teller__vakken{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px; margin-top:clamp(26px,3vw,38px);
}
.teller__vakken div{
  border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; display:grid; gap:4px; background:var(--ink);
}
.teller__vakken b{
  font-family:var(--display); font-weight:800; font-size:clamp(1.05rem,2vw,1.3rem);
  font-variant-numeric:tabular-nums;
}
.teller__vakken span{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-2);
}

.teller--compact{ padding:clamp(24px,3vw,34px); }
.teller--compact .teller__kop p,
.teller--compact .teller__vakken{ display:none; }

@media (max-width:640px){
  .teller__stand{ justify-content:center; }
  .teller__bedrag{ text-align:left; margin-left:0; width:100%; }
  .teller__vakken{ grid-template-columns:minmax(0,1fr); }
}

/* =========================================================
   Kruimelpad
   ========================================================= */
/* De balk is het eerste wat onder de vaste kop komt, dus die houdt de
   ruimte vrij. Wat erop volgt hoeft dat niet nog een keer te doen, anders
   begint elke pagina honderd pixels lager dan nodig. */
.kruimelbalk{ padding-top:clamp(116px,8.6vw,132px); padding-bottom:0; }
.kruimelbalk + .phead,
.kruimelbalk + .bkop,
.kruimelbalk + section,
.kruimelbalk + .wp-block-post-content > *:first-child{
  padding-top:clamp(22px,2.8vw,42px) !important;
}
.kruimels ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.82rem; color:var(--cream-2);
}
.kruimels li{ display:flex; align-items:center; gap:8px; }
.kruimels li + li::before{ content:'/'; color:var(--cream-3, var(--cream-2)); opacity:.55; }
.kruimels a{ color:var(--cream-2); text-decoration:none; transition:color .2s var(--ease-out); }
.kruimels a:hover{ color:var(--ember-lit); }
.kruimels [aria-current]{ color:var(--cream); }
/* in de artikelkop staat hij al binnen een eigen kolom */
.ahero__tekst .kruimels{ margin-bottom:16px; }

/* =========================================================
   Veelgestelde vragen
   ========================================================= */
.faqband{
  padding-block:clamp(60px,7.5vw,110px);
  border-top:1px solid var(--line);
}
.faqband .wrap{ max-width:var(--maxw); margin-inline:auto; }
.faqband__grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,5vw,80px); align-items:start;
}
.faqband__zij h2{ margin:.35em 0 .55em; }
.faqband__zij p{ color:var(--cream-2); line-height:1.75; max-width:30rem; }
.faqband__zij a{ color:var(--ember-lit); text-decoration:none; font-weight:600; }

.faqlijst{ display:grid; gap:12px; }
.faqitem{
  border:1px solid var(--line); border-radius:16px; background:var(--ink-2);
  transition:border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.faqitem[open]{ border-color:var(--line-2); background:var(--ink); }
.faqitem summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  cursor:pointer; list-style:none;
  padding:18px 22px;
  font-family:var(--display); font-weight:700; font-size:1rem; line-height:1.45;
}
.faqitem summary::-webkit-details-marker{ display:none; }
.faqitem summary svg{
  flex:0 0 auto; color:var(--ember-lit);
  transition:transform .3s var(--ease-out);
}
.faqitem[open] summary svg{ transform:rotate(45deg); }
.faqitem__antwoord{ padding:0 22px 20px; }
.faqitem__antwoord p{
  margin:0; color:var(--cream-2); line-height:1.8; font-size:.96rem; max-width:44rem;
}

@media (max-width:900px){
  .faqband__grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
}

/* de ondertitels onder de nieuwe h1's */
.contactblok__sub,
.overons__sub{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.15rem,2.2vw,1.55rem); line-height:1.35;
  color:var(--cream); margin:.1em 0 .6em;
}

/* adres en KvK onder de contactkolom in de voettekst */
.foot__adres{
  margin-top:14px; font-size:.86rem; line-height:1.75; color:var(--cream-2);
}

/* =========================================================
   Merk in de balk
   ========================================================= */
.merk{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; line-height:0;
}
.merk__teken{ display:block; position:relative; }
.merk__teken img{
  display:block; height:32px; width:32px;
  transition:transform .55s var(--ease-out);
}
.merk:hover .merk__teken img{ transform:rotate(-9deg) scale(1.06); }
.merk__woord img{
  display:block; height:18px; width:auto;
  transition:opacity .3s var(--ease);
}
/* het beeldmerk krult mee met de balk die krimpt bij scrollen */
.nav.is-stuck .merk__teken img{ height:29px; width:29px; }
.nav.is-stuck .merk__woord img{ height:16px; }

/* per thema de juiste kleurversie, zonder filters.
   De klassen moeten twee klassen diep, anders wint `.merk__teken img`. */
.merk .merk--licht{ display:none; }
:root[data-theme="dark"] .merk .merk--donker{ display:none; }
:root[data-theme="dark"] .merk .merk--licht{ display:block; }

/* =========================================================
   Navigatiebalk: vervolgmenu's
   ========================================================= */
.nav__links .wp-block-navigation-item__content{
  font-size:.9rem; font-weight:500; color:var(--cream-2);
  text-decoration:none; padding-block:7px;
  transition:color .3s var(--ease);
}
.nav__links > ul > li > .wp-block-navigation-item__content:hover,
.nav__links .wp-block-navigation-submenu:hover > .wp-block-navigation-item__content{
  color:var(--cream);
}
.nav__links .wp-block-navigation__submenu-icon{ transition:transform .3s var(--ease-out); }
.nav__links .wp-block-navigation-submenu:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon{
  transform:rotate(180deg);
}

/* het paneel dat uitklapt */
.nav .nav__links .wp-block-navigation__submenu-container{
  background:var(--glass-solid); color:var(--cream);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--line-2); border-radius:18px;
  padding:8px; min-width:250px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.55);
  margin-top:12px;
}
.nav .nav__links .wp-block-navigation__submenu-container::before{
  /* een brugje, anders valt het menu dicht tussen knop en paneel */
  content:''; position:absolute; left:0; right:0; top:-14px; height:14px;
}
.nav .nav__links .wp-block-navigation__submenu-container li{ width:100%; }
.nav .nav__links .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  display:block; width:100%; box-sizing:border-box;
  padding:11px 14px; border-radius:12px;
  font-size:.92rem; color:var(--cream-2);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease-out);
}
.nav .nav__links .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
  background:var(--hover-tint, var(--ink-2)); color:var(--cream); transform:translateX(3px);
}

/* =========================================================
   Mobiel menu
   ========================================================= */
.nav__links .wp-block-navigation__responsive-container-open,
.nav__links .wp-block-navigation__responsive-container-close{
  display:none;
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--line-2); background:transparent;
  color:var(--cream); cursor:pointer;
  align-items:center; justify-content:center;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav__links .wp-block-navigation__responsive-container-open:hover,
.nav__links .wp-block-navigation__responsive-container-close:hover{
  border-color:var(--ember-lit); background:var(--ember-soft);
}
.nav__links .wp-block-navigation__responsive-container-open svg,
.nav__links .wp-block-navigation__responsive-container-close svg{ width:20px; height:20px; fill:currentColor; }

.menustaart{ display:none; }

@media (max-width:1100px){
  /* Alles hieronder staat bewust op vijf klassen diep. Het navigatieblok van
     WordPress brengt eigen regels mee voor achtergrond, uitlijning en marges,
     en die wegen zwaarder dan je op het eerste gezicht denkt. */
  .nav__links{ flex:0 0 auto; }
  .nav__links .wp-block-navigation__responsive-container-open{ display:flex; }
  .nav__side .btn{ display:none; }

  .nav .nav__links.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open{
    position:fixed; inset:0; z-index:1200;
    background:var(--ink);
    padding:22px var(--pad) 34px;
    display:flex; flex-direction:column; align-items:stretch;
    overflow-y:auto; overflow-x:hidden;
    animation:mkbc-menu-in .35s var(--ease-out) both;
  }
  /* een warme gloed, zodat het geen kale bak is */
  .nav .nav__links.wp-block-navigation .is-menu-open::before{
    content:''; position:absolute; z-index:0; pointer-events:none;
    width:150%; aspect-ratio:1; border-radius:50%;
    left:50%; top:-14%; transform:translateX(-50%);
    background:radial-gradient(circle, var(--ember-soft) 0%, transparent 62%);
  }
  @keyframes mkbc-menu-in{ from{ opacity:0 } to{ opacity:1 } }

  /* het kruisje hangt aan het scherm, niet aan de inhoud eronder */
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close{
    display:flex; position:fixed; right:var(--pad); top:22px; z-index:3;
  }

  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content{
    position:relative; z-index:1;
    margin-top:8px; width:100%;
    display:flex; flex-direction:column; align-items:stretch; gap:0;
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container{
    display:flex; flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:0; width:100%;
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container > li{
    width:100%; border-bottom:1px solid var(--line);
    animation:mkbc-item-in .3s var(--ease-out) both;
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container > li:nth-child(1){ animation-delay:.03s }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container > li:nth-child(2){ animation-delay:.06s }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container > li:nth-child(3){ animation-delay:.09s }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container > li:nth-child(4){ animation-delay:.12s }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container > li:nth-child(5){ animation-delay:.15s }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container > li:nth-child(6){ animation-delay:.18s }
  @keyframes mkbc-item-in{
    from{ opacity:0; transform:translateY(14px) }
    to{ opacity:1; transform:none }
  }

  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container > li > .wp-block-navigation-item__content{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    width:100%; box-sizing:border-box; padding:16px 0;
    font-family:var(--display); font-weight:700;
    font-size:clamp(1.45rem,6.4vw,1.9rem); letter-spacing:-.03em;
    color:var(--cream);
  }
  /* het uitklappaneel is op mobiel gewoon een inspringende lijst */
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container{
    position:static; background:transparent; border:0; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:0 0 14px; margin:0; min-width:0; width:100%;
    opacity:1; visibility:visible; transform:none;
    align-items:stretch;
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container > li{ width:100%; }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
    display:block; width:100%; box-sizing:border-box;
    padding:9px 0 9px 16px; margin:0;
    font-size:1rem; font-family:var(--body); font-weight:400;
    color:var(--cream-2); border-left:1px solid var(--line);
    border-radius:0; background:transparent;
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
    background:transparent; transform:none; color:var(--ember-lit);
  }

  .menustaart{
    display:flex; flex-direction:column; gap:20px;
    margin-top:auto; padding-top:34px;
  }
  .menustaart .btn{ justify-content:center; text-decoration:none; }
  .menustaart__contact{
    display:flex; flex-direction:column; gap:7px;
    font-size:.95rem; color:var(--cream-2);
  }
  .menustaart__contact a{ color:var(--cream-2); text-decoration:none; }
  .menustaart__contact a:hover{ color:var(--ember-lit); }
}

@media (prefers-reduced-motion:reduce){
  .nav__links .is-menu-open .wp-block-navigation__container > li,
  .nav__links .wp-block-navigation__responsive-container.is-menu-open{ animation:none; }
}

/* de klikrand van de browser is een witte blokdoos; die maken we onze eigen */
.nav__links .wp-block-navigation-item__content:focus{ outline:none; }
.nav__links .wp-block-navigation-item__content:focus-visible{
  outline:2px solid var(--ember-lit); outline-offset:3px; border-radius:8px;
}

/* het merk bovenin het geopende mobiele menu */
.menukop{ display:none; }
@media (max-width:1100px){
  .nav .nav__links.wp-block-navigation .is-menu-open .menukop{
    display:block; position:static; z-index:2;
    padding:2px 0 24px;
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .menukop .merk__teken img{ height:30px; width:30px; }
  .nav .nav__links.wp-block-navigation .is-menu-open .menukop .merk__woord img{ height:17px; }
}

/* =========================================================
   Winkelkop met categoriebalk
   ========================================================= */
.winkelkop{ max-width:var(--maxw); margin-inline:auto; }
.winkelkop__top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(24px,4vw,64px); flex-wrap:wrap;
}
.winkelkop__top h1{ margin:.22em 0 0; }
.winkelkop__top .lede{ max-width:32rem; margin:0; }

.katbalk{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:clamp(26px,3.4vw,44px);
  padding-top:clamp(22px,2.6vw,30px); border-top:1px solid var(--line);
}
.katchip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--line-2); background:transparent;
  font-family:var(--display); font-weight:700; font-size:.87rem;
  color:var(--cream-2); text-decoration:none; white-space:nowrap;
  transition:color .25s var(--ease), border-color .25s var(--ease),
             background .25s var(--ease), transform .25s var(--ease-out);
}
.katchip span{
  font-family:var(--body); font-weight:500; font-size:.76rem;
  color:var(--cream-3, var(--cream-2)); opacity:.75;
}
.katchip:hover{ color:var(--cream); border-color:var(--ember-lit); transform:translateY(-2px); }
.katchip.is-nu{
  background:var(--ember); border-color:var(--ember); color:var(--on-accent);
}
.katchip.is-nu span{ color:var(--on-accent); opacity:.7; }

@media (max-width:640px){
  .katbalk{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
  }
  .katbalk::-webkit-scrollbar{ display:none; }
}

/* =========================================================
   Sociale kanalen
   ========================================================= */
.sociaal{ display:flex; gap:10px; margin-top:20px; }
.sociaal__knop{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--cream-2);
  transition:color .25s var(--ease), border-color .25s var(--ease),
             background .25s var(--ease), transform .25s var(--ease-out);
}
.sociaal__knop:hover{
  color:var(--cream); border-color:var(--ember-lit);
  background:var(--ember-soft); transform:translateY(-2px);
}
.contactblok__volg{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:clamp(22px,2.6vw,30px);
}
.contactblok__volg > span{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-2);
}
.contactblok__volg .sociaal{ margin-top:0; }

/* =========================================================
   De strook boven de hero
   WordPress zet een blokafstand tussen de kop en de inhoud
   (.wp-site-blocks > * + *). De kopbalk staat vast bovenaan en telt
   dus niet mee in de stroom, waardoor die afstand als een kale strook
   van 19 pixels boven de video blijft staan.
   ========================================================= */
/* Niet alleen main: WooCommerce wikkelt de productpagina nog in een eigen
   groep, en die zou anders dezelfde strook krijgen. Daarom alles wat direct
   op de kopbalk volgt. */
.wp-site-blocks > header.wp-block-template-part + *{ margin-block-start:0; }
.wp-site-blocks > main{ margin-block-start:0; }
.wp-site-blocks > header.wp-block-template-part{ margin-block-end:0; }


/* =========================================================
   Impact per zak koffie
   ========================================================= */
.impact{ position:relative; padding-block:clamp(70px,9vw,140px); overflow:hidden; }
.impact__glow{
  position:absolute; inset:auto auto 0 50%; z-index:0; pointer-events:none;
  width:min(120vw,1200px); aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,38%);
  background:radial-gradient(circle, var(--ember-soft) 0%, transparent 62%);
}
.impact .wrap{ position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; }
.impact__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(34px,5vw,86px); align-items:center;
}
.impact__tekst h2{ margin:.3em 0 .5em; }
.impact__tekst .lede{ max-width:34rem; }
.impact__tekst strong{ color:var(--cream); font-weight:700; }

.impact__doelen{ display:flex; flex-wrap:wrap; gap:10px; margin:clamp(24px,3vw,34px) 0 0; }
.impact__doel{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--ink-2);
  font-family:var(--display); font-weight:700; font-size:.86rem; color:var(--cream);
}
.impact__doel::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--ember-lit);
}
.impact__doel-tekst{
  margin:clamp(20px,2.6vw,28px) 0 0; color:var(--cream-2);
  line-height:1.75; max-width:34rem;
}
.impact__knoppen{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,28px);
  flex-wrap:wrap; margin-top:clamp(26px,3.2vw,38px);
}

/* de kaart met de stand */
.impact__kaart{
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:26px;
  padding:clamp(26px,3.4vw,44px);
  box-shadow:0 46px 100px -50px rgba(0,0,0,.55);
}
.impact__munt{
  display:grid; justify-items:center; gap:4px; text-align:center;
  width:clamp(150px,17vw,190px); aspect-ratio:1; margin:0 auto clamp(24px,3vw,34px);
  border-radius:50%; border:2px dashed color-mix(in srgb, var(--ember-lit) 55%, transparent);
  align-content:center;
  background:radial-gradient(circle at 50% 40%, var(--ember-soft), transparent 70%);
}
.impact__munt span{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.8rem,3.4vw,2.5rem); color:var(--ember-lit); line-height:1;
}
.impact__munt small{ font-size:.78rem; color:var(--cream-2); }

.impact__stand{ text-align:center; display:grid; gap:6px; margin-bottom:18px; }
.impact__stand b{
  font-family:var(--display); font-weight:800; line-height:1;
  font-size:clamp(1.9rem,4vw,2.9rem); letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.impact__stand > span{ font-size:.88rem; color:var(--cream-2); }

.impact__balk{
  height:10px; border-radius:99px; background:var(--ink-4, var(--line));
  overflow:hidden; border:1px solid var(--line);
}
.impact__balk span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--ember), var(--ember-lit));
}
.impact__onder{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:11px; font-size:.84rem; color:var(--cream-2);
}

@media (max-width:900px){
  .impact__grid{ grid-template-columns:minmax(0,1fr); gap:34px; }
}


/* =========================================================
   Horizontale banen: knoppen, slepen, quotes
   ========================================================= */
.reisbaan__kop{ display:flex; align-items:flex-end; gap:clamp(20px,3vw,44px); flex-wrap:wrap; }
.baanknoppen{ display:flex; gap:10px; flex:0 0 auto; margin-left:auto; }
.baanknop{
  width:46px; height:46px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-2); background:transparent; color:var(--cream);
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .25s var(--ease), background .25s var(--ease),
             color .25s var(--ease), opacity .25s var(--ease);
}
.baanknop:hover:not(:disabled){ border-color:var(--ember-lit); background:var(--ember-soft); }
.baanknop:disabled{ opacity:.32; cursor:default; }

[data-baan]{ cursor:grab; }
[data-baan].is-sleepend{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
[data-baan].is-sleepend *{ user-select:none; }
[data-baan]:focus-visible{ outline:2px solid var(--ember-lit); outline-offset:6px; border-radius:14px; }
[data-baan] img{ -webkit-user-drag:none; user-select:none; }

/* de laatste kaart van de reis is geen foto maar de donatie */
.reisstap__gift{
  display:grid; align-content:center; justify-items:center; gap:6px;
  text-align:center; padding:24px;
  background:linear-gradient(160deg, var(--ember) 0%, var(--ember-lit) 100%);
  color:#fff;
}
.reisstap__bedrag{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(2rem,3.6vw,2.9rem); line-height:1;
}
.reisstap__perzak{ font-size:.84rem; opacity:.85; }
.reisstap__doelen{
  margin-top:14px; padding-top:14px; font-size:.78rem; line-height:1.6;
  border-top:1px solid rgba(255,255,255,.28); opacity:.92;
}
.reisstap--slot .reisstap__nr{ background:rgba(0,0,0,.3); color:#fff; }

/* referenties in een baan */
.quotebaan{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none;
  margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
  padding-bottom:10px;
}
.quotebaan::-webkit-scrollbar{ display:none; }
.quotebaan > .quotes{
  display:flex; flex-wrap:nowrap; align-items:stretch;
  gap:clamp(14px,1.8vw,26px); width:max-content;
  grid-template-columns:none;
}
.quotebaan .quote{
  scroll-snap-align:start; flex:0 0 auto;
  width:clamp(280px,30vw,400px); margin:0;
}

@media (max-width:720px){
  .quotebaan .quote{ width:80vw; }
  .baanknoppen{ margin-left:0; }
}


/* De cijfers tonen nu bedragen in plaats van losse getallen; die zijn langer
   en braken op twee regels. Iets kleiner en op een regel houden. */
.figs .fig b{
  font-size:clamp(1.7rem,3.1vw,2.9rem); white-space:nowrap;
}
@media (max-width:520px){
  .figs .fig b{ font-size:clamp(1.4rem,7vw,2rem); }
}


/* de punten op de contactpagina hebben nu een kop en een uitleg */
.formband__punten li{ padding-left:30px; display:grid; gap:4px; }
.formband__punten li b{
  font-family:var(--display); font-weight:700; font-size:.97rem;
  color:var(--cream); line-height:1.4;
}
.formband__punten li span{ font-size:.92rem; color:var(--cream-2); line-height:1.65; }

/* =========================================================
   Afsluitende oproep met foto
   ========================================================= */
.cta__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(30px,4.6vw,72px); align-items:center;
  max-width:var(--maxw); margin-inline:auto;
}
.cta__foto{
  position:relative; margin:0; border-radius:24px; overflow:hidden;
  border:1px solid var(--line-2); aspect-ratio:4/3;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.6);
}
.cta__foto img{ width:100%; height:100%; object-fit:cover; }
.cta__foto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 52%, rgba(12,9,7,.82));
}
.cta__foto figcaption{
  position:absolute; z-index:1; left:22px; bottom:18px; display:grid; gap:2px;
}
.cta__foto figcaption b{ font-family:var(--display); font-weight:800; font-size:1.02rem; color:#F7F5F2; }
.cta__foto figcaption span{ font-size:.84rem; color:rgba(247,245,242,.82); }
.cta__tekst h2{ margin:.3em 0 .5em; }
.cta__tekst .lede{ max-width:34rem; }
.cta__knoppen{ display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(24px,3vw,34px); }

@media (max-width:860px){
  .cta__grid{ grid-template-columns:minmax(0,1fr); }
  .cta__foto{ max-width:420px; }
}


/* de punten op de productpagina hebben nu een kop en een uitleg */
.usps--rijk{ display:grid; gap:14px; }
.usps--rijk .usp{ align-items:flex-start; gap:12px; }
.usps--rijk .usp svg{ margin-top:3px; flex:0 0 auto; color:var(--ember-lit); }
.usps--rijk .usp > span{ display:grid; gap:3px; }
.usps--rijk .usp b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:.95rem; color:var(--cream); line-height:1.4;
}
.usps--rijk .usp span b + *{ margin:0; }
.usps--rijk .usp > span{ font-size:.9rem; color:var(--cream-2); line-height:1.65; }

/* De rode gloed achter productfoto's viel op bij machines met een lichte
   achtergrond: die kregen een roze waas. Nu een neutrale sokkel, alleen
   nog een zweem warmte onderin. */
.pcard__stage,
.pcard__stage.wp-block-post-featured-image,
.pdp__kolom-beeld .wp-block-woocommerce-product-image-gallery{
  background:
    radial-gradient(ellipse 70% 45% at 50% 92%, color-mix(in srgb, var(--ember) 10%, transparent), transparent 70%),
    var(--ink-2);
}


/* =========================================================
   Melding over verzendkosten in de winkelwagen
   ========================================================= */
.verzendmelding{ margin-bottom:clamp(22px,3vw,34px); }
.verzendmelding__box{
  display:flex; align-items:flex-start; gap:15px;
  padding:18px 22px; border-radius:16px;
  border:1px solid var(--line-2); background:var(--ink-2);
}
.verzendmelding__ico{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background:var(--ember-soft); color:var(--ember-lit);
}
.verzendmelding__box b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:.98rem; color:var(--cream); margin-bottom:4px;
}
.verzendmelding__box > span:last-child{
  font-size:.92rem; line-height:1.65; color:var(--cream-2);
}

/* =========================================================
   Beoordelingen op de productpagina
   ========================================================= */
.pdp__reviews{
  max-width:var(--maxw); margin:clamp(46px,6vw,84px) auto 0;
  padding-top:clamp(34px,4vw,56px); border-top:1px solid var(--line);
}
.pdp__reviews h2{ margin:0 0 clamp(22px,2.6vw,34px); }
.pdp__reviews .wp-block-comment-author-name{ font-family:var(--display); font-weight:700; }
.pdp__reviews .wp-block-comment-date{ color:var(--cream-3); }

/* de pdf's in de producttekst stonden als kale linkjes achter elkaar,
   met "96% recyclebaar!" er los tussen. Als knopjes leest het rustiger. */
.pdp a[href$=".pdf"],
.pdp__tabs a[href$=".pdf"]{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; margin:4px 8px 4px 0; border-radius:999px;
  border:1px solid var(--line-2); background:var(--ink-2);
  font-family:var(--display); font-weight:700; font-size:.85rem;
  color:var(--cream); text-decoration:none;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.pdp a[href$=".pdf"]::before,
.pdp__tabs a[href$=".pdf"]::before{
  content:''; width:14px; height:16px; flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/></svg>") center/contain no-repeat;
}
.pdp a[href$=".pdf"]:hover,
.pdp__tabs a[href$=".pdf"]:hover{ border-color:var(--ember-lit); background:var(--ember-soft); }

/* de machines stonden te klein in hun kader */
.pcard__stage img,
.pcard__stage.wp-block-post-featured-image a,
.pcard__stage.wp-block-post-featured-image img{
  width:calc(100% - 26px); height:calc(100% - 26px);
}


/* WordPress schrijft bij het uitgelichte-afbeeldingsblok een inline
   object-fit:cover op de img zelf. Daar komt geen gewone regel overheen,
   dus hier wel !important: anders staan de producten uitgesneden in hun
   kader in plaats van er helemaal in. */
.pcard__stage.wp-block-post-featured-image img{
  object-fit:contain !important;
  object-position:center !important;
}


/* =========================================================
   Cookiebalk
   Weigeren moet net zo makkelijk zijn als accepteren, dus twee
   even zware knoppen naast elkaar en geen verstopte tekstlink.
   ========================================================= */
.cookiebalk{
  position:fixed; z-index:1300; left:0; right:0; bottom:0;
  padding:clamp(14px,2vw,22px);
  animation:mkbc-cookie-in .4s var(--ease-out) both;
}
@keyframes mkbc-cookie-in{
  from{ opacity:0; transform:translateY(18px) }
  to{ opacity:1; transform:none }
}
.cookiebalk__binnen{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(18px,3vw,44px); flex-wrap:wrap;
  background:var(--glass-solid);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--line-2); border-radius:22px;
  padding:clamp(18px,2.4vw,28px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.55);
}
.cookiebalk__tekst{ flex:1 1 340px; min-width:0; }
.cookiebalk__tekst b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:1.02rem; color:var(--cream); margin-bottom:6px;
}
.cookiebalk__tekst p{
  margin:0; font-size:.92rem; line-height:1.65; color:var(--cream-2); max-width:60ch;
}
.cookiebalk__tekst a{ color:var(--ember-lit); }

.cookiebalk__soorten{ display:grid; gap:12px; margin-top:18px; }
.cookiesoort{
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  font-size:.88rem; line-height:1.55; color:var(--cream-2);
}
.cookiesoort input{
  margin-top:3px; width:17px; height:17px; flex:0 0 auto;
  accent-color:var(--ember);
}
.cookiesoort input:disabled{ opacity:.55; cursor:default; }
.cookiesoort b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:.9rem; color:var(--cream); margin-bottom:1px;
}

.cookiebalk__knoppen{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:0 0 auto;
}
.cookiebalk__knoppen .btn{ padding:12px 22px; font-size:.88rem; }
.cookiebalk__link{
  background:none; border:0; cursor:pointer; padding:6px 4px;
  font-family:var(--body); font-size:.86rem; color:var(--cream-2);
  text-decoration:underline; text-underline-offset:3px;
}
.cookiebalk__link:hover{ color:var(--cream); }

@media (max-width:760px){
  .cookiebalk__binnen{ flex-direction:column; }
  .cookiebalk__knoppen{ width:100%; }
  .cookiebalk__knoppen .btn{ flex:1 1 auto; justify-content:center; }
}


/* display:grid en display:inline-flex winnen het van de browserregel voor
   [hidden], dus de panelen stonden meteen open. Hier terugduwen. */
.cookiebalk [hidden],
.cookiebalk[hidden]{ display:none !important; }


/* =========================================================
   Zwevende WhatsApp-knop
   ========================================================= */
.wa-knop{
  position:fixed; z-index:1200; right:clamp(16px,2.2vw,26px); bottom:clamp(16px,2.2vw,26px);
  display:inline-flex; align-items:center; gap:0;
  height:56px; padding:0 15px; border-radius:999px;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.5);
  transition:gap .35s var(--ease-out), padding .35s var(--ease-out),
             transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.wa-knop:hover{ transform:translateY(-3px); box-shadow:0 24px 50px -16px rgba(0,0,0,.55); gap:10px; padding-right:22px; }
.wa-knop__label{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--display); font-weight:700; font-size:.92rem;
  transition:max-width .35s var(--ease-out);
}
.wa-knop:hover .wa-knop__label{ max-width:120px; }
.wa-knop:focus-visible{ outline:3px solid var(--ember-lit); outline-offset:3px; }

/* de cookiebalk gaat voor; zolang die openstaat schuift de knop omhoog */
.cookies-open .wa-knop{ bottom:calc(clamp(16px,2.2vw,26px) + 210px); }

@media (max-width:640px){
  .wa-knop{ height:52px; padding:0 13px; }
  .cookies-open .wa-knop{ bottom:calc(clamp(16px,2.2vw,26px) + 320px); }
}
@media (prefers-reduced-motion:reduce){
  .wa-knop, .wa-knop__label{ transition:none; }
}


/* Zodra je scrollt krijgt de balk een backdrop-filter, en een element met
   backdrop-filter wordt het referentiekader voor alles wat position:fixed
   is. Het mobiele menu zit in die balk en kromp daardoor tot de hoogte van
   de balk zelf, waardoor het achter de inhoud leek te vallen. Zolang het
   menu open staat zetten we dat filter dus uit; je ziet er niets van, want
   het menu ligt er toch overheen. */
html.has-modal-open .nav,
html.has-modal-open .nav.is-stuck{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  /* Zonder dit draait het filter er in 450 ms uit, en zolang dat loopt is de
     balk nog steeds het bevattende blok: het menu blijft dan 70 pixels hoog
     en klapt daarna ineens open. Het moet dus in één keer weg. */
  transition:none;
}


/* de WhatsApp-knop hoort niet over het geopende menu heen te liggen */
html.has-modal-open .wa-knop{ display:none; }


/* =========================================================
   Mobiele kopbalk en menu, tweede ronde
   ========================================================= */
@media (max-width:1100px){
  /* Merk links, licht/donker in het midden, hamburger rechts.
     De twee buitenste vakken even breed maken, dan staat het knopje
     in het midden echt in het midden. */
  .nav__brand{ order:1; flex:1 1 0; }
  .nav__side{  order:2; flex:0 0 auto; }
  .nav__links{ order:3; flex:1 1 0; justify-content:flex-end; display:flex; }

  /* het overlay als drie lagen: merk vast, lijst schuifbaar, staart vast */
  .nav .nav__links.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open{
    padding-bottom:0;
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content{
    display:flex; flex-direction:column;
    height:calc(100dvh - 44px); min-height:0;
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .menukop{ flex:0 0 auto; }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container{
    flex:1 1 auto; min-height:0; overflow-y:auto;
    scrollbar-width:none;
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container::-webkit-scrollbar{ display:none; }

  /* de groepen klappen open en dicht */
  .nav .nav__links.wp-block-navigation .is-menu-open .mkbc-groep > .wp-block-navigation-item__content{
    cursor:pointer;
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .mkbc-groep .wp-block-navigation__submenu-container{
    overflow:hidden;
    transition:max-height .38s var(--ease-out), opacity .3s var(--ease);
    opacity:.35; padding-bottom:0;
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .mkbc-groep.is-uit .wp-block-navigation__submenu-container{
    opacity:1; padding-bottom:12px;
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .mkbc-groep > .wp-block-navigation-item__content
    .wp-block-navigation__submenu-icon{
    transition:transform .35s var(--ease-out); color:var(--ember-lit);
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .mkbc-groep.is-uit > .wp-block-navigation-item__content
    .wp-block-navigation__submenu-icon{
    transform:rotate(180deg);
  }
  /* iets rustiger regelhoogte nu alles op één scherm past */
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container > li > .wp-block-navigation-item__content{
    padding:15px 2px;
    font-size:clamp(1.35rem,5.8vw,1.7rem);
  }

  /* de staart blijft onderin staan */
  .menustaart{
    flex:0 0 auto; margin-top:0;
    padding:20px 0 calc(20px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    background:linear-gradient(180deg, transparent, var(--ink) 22%);
  }
  .menustaart .btn{ height:52px; }
}


/* WordPress verplaatst de menulijst zelf naar het overlay op het moment dat
   je hem opent, dus die komt in de DOM ná onze staart terecht. De volgorde
   op het scherm leggen we daarom met flex vast en niet met de DOM. */
@media (max-width:1100px){
  .nav .nav__links.wp-block-navigation .is-menu-open .menukop{ order:1; }
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__container{ order:2; }
  .nav .nav__links.wp-block-navigation .is-menu-open .menustaart{ order:3; }
}


/* Het pijltje van WordPress staat buiten de link en is nul pixels breed, dus
   zet er zelf een neer. Zo zie je dat er iets onder zit. */
@media (max-width:1100px){
  /* Het plusje is een echt element (zie site.js): pseudo-elementen bleven
     hier onzichtbaar. Getekend met twee verlopen, dus zonder afbeelding. */
  .nav .nav__links.wp-block-navigation .is-menu-open .mkbc-plus{
    display:block; flex:0 0 auto; width:18px; height:18px; margin-left:auto;
    background:
      linear-gradient(var(--ember-lit), var(--ember-lit)) center/2px 100% no-repeat,
      linear-gradient(var(--ember-lit), var(--ember-lit)) center/100% 2px no-repeat;
    transition:transform .35s var(--ease-out);
  }
  .nav .nav__links.wp-block-navigation .is-menu-open .mkbc-groep.is-uit .mkbc-plus{
    transform:rotate(45deg);
  }
  /* het lege knopje van WordPress ernaast helemaal weg */
  .nav .nav__links.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-icon{ display:none; }
}


/* De homepage toont nu dezelfde teller als Over ons. De kaart eromheen mag
   dan geen tweede rand en schaduw meer hebben, anders staat er een doos in
   een doos. */
.impact__kaart{
  background:none; border:0; padding:0; box-shadow:none;
}
.impact__kaart .teller{ margin:0; }

/* =========================================================
   Hero: onthullen zonder op javascript te wachten

   De rest van de pagina laat elementen invliegen zodra ze in beeld komen;
   daar houdt een waarnemer in site.js de klasse .in tegen. Voor de hero is
   dat onnodig, die staat altijd al in beeld. Erger nog: de kop stond tot dat
   moment op opacity 0, en een meting telt het grootste element pas als het er
   echt staat. Dat kostte ruim een seconde. Met een animatie die meteen bij
   het laden begint staat de tekst er vrijwel direct.
   ========================================================= */
.hero .rv{ animation:mkbc-onthul .55s var(--ease-out) both; }
.hero .rv-d1{ animation-delay:.06s }
.hero .rv-d2{ animation-delay:.12s }
.hero .rv-d3{ animation-delay:.18s }
.hero .rv-d4{ animation-delay:.24s }

@keyframes mkbc-onthul{
  from{ opacity:0; transform:translateY(26px) }
  to{ opacity:1; transform:none }
}

@media (prefers-reduced-motion:reduce){
  .hero .rv{ animation:none; opacity:1; transform:none }
}

/* =========================================================
   Producttabbladen: WooCommerce overrulen

   WooCommerce tekent zijn tabbladen met selectors als
   `.woocommerce div.product .woocommerce-tabs ul.tabs li a`. Die weegt
   zwaarder dan de onze, dus onze achtergrond op de link kwam er wel door
   maar de tekstkleur niet: donkergrijs op een donkere pil, onleesbaar. De
   lila randjes eromheen zijn zijn tabvorm, opgebouwd uit ::before en ::after.
   Hier gaan die stijlen er gericht af. Dat vraagt !important; met
   specificiteit alleen win je het niet zonder een selector die bij de eerste
   de beste opmaakwijziging van WooCommerce breekt.
   ========================================================= */
.pdp__tabs .woocommerce-tabs ul.tabs,
.pdp__tabs ul.wc-tabs{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.pdp__tabs .woocommerce-tabs ul.tabs::before,
.pdp__tabs .woocommerce-tabs ul.tabs::after,
.pdp__tabs .woocommerce-tabs ul.tabs li::before,
.pdp__tabs .woocommerce-tabs ul.tabs li::after{
  content:none !important;
  display:none !important;
}
.pdp__tabs .woocommerce-tabs ul.tabs li,
.pdp__tabs ul.wc-tabs li{
  background:none !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  margin:0 !important;
  padding:0 !important;
}
.pdp__tabs .woocommerce-tabs ul.tabs li a,
.pdp__tabs ul.wc-tabs li a{
  color:var(--cream-2) !important;
  text-shadow:none !important;
  font-weight:500;
}
.pdp__tabs .woocommerce-tabs ul.tabs li a:hover,
.pdp__tabs ul.wc-tabs li a:hover{
  color:var(--cream) !important;
  border-color:var(--cream-3, var(--line-2));
}
.pdp__tabs .woocommerce-tabs ul.tabs li.active a,
.pdp__tabs ul.wc-tabs li.active a{
  background:var(--cream) !important;
  color:var(--ink) !important;
  border-color:var(--cream) !important;
  font-weight:600;
}

/* Artikel zonder inhoudsopgave: één kolom over de volle breedte.
   Zie mkbc_artikel_indeling() in functions.php voor het waarom. */
.alayout--solo{ grid-template-columns:minmax(0,1fr); }
.alayout--solo .toc{ display:none; }

/* =========================================================
   YouTube-plaatsvervanger in de staande speler

   WP Rocket vervangt een YouTube-insluiting door een eigen voorbeeldplaatje,
   zodat YouTube pas laadt als de bezoeker klikt. Dat scheelt bijna een
   megabyte en voorkomt dat YouTube ongevraagd cookies zet. Maar hij legt er
   zijn eigen 16:9-kader in op (padding-bottom:56.23% met height:0), terwijl
   deze speler 9:16 is: het is een Short, dus staand. Daardoor werd het een
   plat vakje met een 4:3-miniatuur die er 383 pixels hoog in een vak van 287
   uit stak. Hier volgt de plaatsvervanger gewoon onze eigen verhouding.
   ========================================================= */
.verhaalvideo__speler .rll-youtube-player{
  position:absolute; inset:0;
  width:100%; height:100% !important;
  padding-bottom:0 !important;
  max-width:none;
}
.verhaalvideo__speler .rll-youtube-player img{
  position:absolute; inset:0; margin:0;
  width:100%; height:100%; max-width:none;
  object-fit:cover;
}
.verhaalvideo__speler .rll-youtube-player iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}