/* ============================================================
   EnjoyToCarry — demo 3 "Avonduur"
   Donkere mosgroene modus. Mint (#6DDB96) is hier tekstkleur
   (10,41:1 op #0D1A13), amber (#F0C68A) draagt de prijzen.
   Signatuur: mintgloed achter beeld en prijskaarten + filmkorrel 3,5%.
   ============================================================ */

/* Lettertypen staan hier in de demo zelf, niet bij Google.
   Twee redenen: geen IP-adres van een bezwarende bezoeker naar een derde
   partij (AVG), en geen layout shift doordat het lettertype pas na een
   extra DNS- en TLS-ronde naar een externe host binnenkomt. Variabele
   assen, dus 400 t/m 700 komt uit een enkel bestand. */
@font-face{
  font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/lora-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/lora-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#0D1A13;
  --surface:#16261D;
  --surface-2:#1E3327;
  --primary:#6DDB96;          /* 10,41:1 op --bg: hier WEL tekst */
  --primary-ink:#0D1A13;      /* tekst op een mintknop */
  --accent:#F0C68A;           /* 11,20:1 op --bg, voor prijzen */
  --text:#EDF4EF;             /* 16,00:1 op --bg */
  --muted:#9CB2A5;            /* 7,94:1 op --bg */
  --border:#4E6E5B;           /* 3,16:1 op --bg, kaartranden */
  --border-strong:#688A73;    /* bedieningselementen: 4,66:1 op --bg,
                                 4,12:1 op --surface, 3,51:1 op --surface-2.
                                 --border haalt op die twee vlakken maar
                                 2,79:1 en 2,38:1 en voldoet daar niet aan
                                 WCAG 1.4.11 voor invoervelden en knoppen. */
  --border-soft:#26382C;      /* alleen decoratief */
  --focus:#6DDB96;
  --mat:#1E3327;

  --font-head:'Lora',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --h1:clamp(2.15rem,5.6vw,3.4rem);
  --h2:clamp(1.6rem,3.6vw,2.25rem);
  --h3:1.1875rem;
  --body:1.0625rem;
  --small:.875rem;
  --lh-head:1.16;
  --lh-body:1.75;
  --ls-head:-.01em;

  --measure:66ch;
  --wrap:1140px;
  --section-y:clamp(68px,11vw,124px);
  --radius-card:20px;
  --radius-btn:12px;
  --header-h:66px;
  --glow:rgba(109,219,150,.30);
  --grain-opacity:.035;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- fundament ---------- */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-padding-top:calc(var(--header-h) + 12px);
  -webkit-text-size-adjust:100%;
  /* het gesloten menupaneel staat rechts buiten beeld. `clip` haalt dat uit de
     scrollbreedte zonder een scroll-container te maken, zodat de plakkende
     header blijft werken. `hidden` zou dat wel breken. */
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--body);
  line-height:var(--lh-body);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* ruimte voor de vaste duimbalk op mobiel */
  padding-bottom:86px;
}
@media (min-width:768px){ body{padding-bottom:0} }

img{max-width:100%;display:block}
/* <picture> is een wrapper zonder eigen box. In een vak met alleen een
   aspect-ratio lost `height:100%` op zo'n wrapper niet betrouwbaar op: het
   beeld werd dan hoger dan zijn vak en `object-fit:contain` gedroeg zich als
   `cover`. Absoluut positioneren geeft de wrapper wel een vaste maat. */
.hero__media picture,
.shot__frame picture,
.product-card__media picture{position:absolute;inset:0;display:block}

h1,h2{
  font-family:var(--font-head);
  font-weight:600;
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  margin:0 0 .55em;
  color:var(--text);
}
h1{font-size:var(--h1)}
h2{font-size:var(--h2);line-height:1.22}
h3{
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--h3);
  line-height:1.35;
  margin:0 0 .5em;
}
p{margin:0 0 1.15em;max-width:var(--measure)}
p:last-child{margin-bottom:0}

a{color:var(--primary);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 40px,860px)}

.section{position:relative;padding-block:var(--section-y);overflow:hidden}
.section--surface{background:var(--surface)}
.section--surface2{background:var(--surface-2)}
.section--tight{padding-block:clamp(44px,7vw,72px)}

.lede{font-size:1.1875rem;line-height:1.6;color:var(--text)}
.muted{color:var(--muted)}
.small{font-size:var(--small)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--primary);color:var(--primary-ink);
  padding:12px 18px;border-radius:0 0 12px 0;font-weight:600;
}
.skip:focus{left:0}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- filmkorrel (signatuur 2) ---------- */
.grain{
  position:fixed;
  inset:-160px;
  z-index:60;
  pointer-events:none;
  opacity:var(--grain-opacity);
  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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:korrel 1s steps(3) infinite;
  will-change:transform;
}
.korrel-pauze .grain{animation-play-state:paused}
@keyframes korrel{
  0%  {transform:translate3d(0,0,0)}
  33% {transform:translate3d(-42px,22px,0)}
  66% {transform:translate3d(26px,-32px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ---------- mintgloed (signatuur 1) ---------- */
.glow{position:relative;display:flex}
/* Deze gloed stond op filter:blur(46px) over een radiaal verloop. Een blur
   moet bij elke transform opnieuw gerasterd worden, en de gloed verschuift
   met het licht mee. Gemeten op /consulten-en-prijzen: 67 van de 149 beelden
   te traag. De zachtheid zit nu in het verloop zelf, met zes stops in plaats
   van twee. Gemeten kleurverschil met de geblurde versie: hoogstens 10 van
   255, gemiddeld 0,51, en 0,67% van de pixels wijkt meer dan 8 af. */
.glow::before{
  content:"";
  position:absolute;
  inset:-26%;
  z-index:0;
  /* De alfa's zijn 1,39x hoger dan de gemeten gelijkwaardige waarde, omdat de
     laag in rust op dekking .72 staat. 0,72 x 1,39 = 1, dus in rust ziet hij
     er precies zo uit als de geblurde versie; bij aanwijzen gaat de dekking
     naar 1 en is hij 1,39x sterker, zoals de ontwerpnota vraagt. */
  background:radial-gradient(58% 54% at 50% 45%,
    rgba(109,219,150,.327) 0%,
    rgba(109,219,150,.285) 20%,
    rgba(109,219,150,.188) 40%,
    rgba(109,219,150,.097) 58%,
    rgba(109,219,150,.036) 74%,
    rgba(109,219,150,0)    90%);
  opacity:.72;
  pointer-events:none;
  transition:opacity .24s var(--ease);
}
.glow > *{position:relative;z-index:1;width:100%}

/* De gloed wordt sterker naarmate het licht dichterbij komt: dekking, niet
   verplaatsing. Dat is niet alleen goedkoper maar ook juister, want dichterbij
   hoort helderder te zijn en niet verschoven.

   In rust staat er expres géén transform op deze laag. Gemeten op
   /consulten-en-prijzen met zes van deze gloeden naast elkaar:
     translate3d(...,-60px) scale(1)   9 tot 12 trage beelden van de 149
     alleen scale(1)                   5 tot 7
     zonder transform                  1 tot 2
   Een element met een transform binnen een preserve-3d-context wordt elk
   beeld apart afgehandeld, ook als de waarde niet verandert. De vergroting
   bij aanwijzen blijft, maar staat nu alleen in de hover-regel, zodat er
   hooguit één zo'n laag tegelijk bestaat. */
.price-grid > .glow::before{opacity:calc(.72 + var(--licht,0) * .28)}
/* Ook bij aanwijzen geen transform. Met een scale erbij liep de teller op de
   prijzenpagina van 1 a 2 trage beelden naar 6 a 7, omdat er tijdens het
   scrollen steeds een andere gloed onder de aanwijzer komt. De ontwerpnota
   vraagt dat de gloed bij aanwijzen "sterker" wordt, niet groter, en dat is
   precies wat dekking doet. */
.glow:hover::before,
.price-grid > .glow:focus-within::before{opacity:1}

/* ---------- beeld: matje + zachte vignettering ----------
   De foto's zijn licht en buiten geschoten. Op bijna zwart
   steken ze hard af. Oplossing: passe-partout van 6px in
   --surface, een rand, en een vignet dat alleen de uiterste
   rand raakt. Geen donkere overlay over de foto zelf.        */
.shot{
  padding:6px;
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:calc(var(--radius-card) + 6px);
}
.shot__frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-card);
  background:var(--surface-2);
}
.shot__frame::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(78,110,91,.55),
    inset 0 0 44px 6px rgba(13,26,19,.34);
}
.shot img{
  width:100%;height:100%;
  object-fit:cover;
}
/* De helderheid van een foto wordt niet meer met filter geregeld maar met
   een lichtlaag in het kader: zie de interactiesectie onderaan. filter
   dwingt een verfstap over de hele foto af, elke keer opnieuw. */

.shot--tall .shot__frame{aspect-ratio:4/5}
.shot--wide .shot__frame{aspect-ratio:16/10}
.shot--square .shot__frame{aspect-ratio:1/1}
.shot--pano .shot__frame{aspect-ratio:16/9}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:rgba(13,26,19,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.site-header__in{
  height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:44px;height:44px;border-radius:50%}

.nav{display:none}
@media (min-width:1024px){
  .nav{display:flex;align-items:center;gap:4px}
}
.nav a{
  position:relative;
  color:var(--text);text-decoration:none;font-weight:500;font-size:.9375rem;
  padding:10px 12px;border-radius:10px;display:inline-flex;align-items:center;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.nav a:hover,
.nav a:focus-visible{color:var(--primary);background:rgba(109,219,150,.08)}
.nav a[aria-current="page"]{color:var(--primary)}
.nav a[aria-current="page"]::after{
  content:"";display:block;position:absolute;left:12px;right:12px;bottom:2px;
  height:2px;background:var(--primary);border-radius:2px;
}
.nav li{position:relative;list-style:none}
.nav ul{display:flex;align-items:center;gap:2px;margin:0;padding:0}

.nav-group{display:flex;align-items:center}
.nav-group__toggle{
  background:none;border:0;color:var(--text);cursor:pointer;
  width:40px;height:44px;display:grid;place-items:center;border-radius:10px;
}
.nav-group__toggle:hover,
.nav-group__toggle:focus-visible{color:var(--primary);background:rgba(109,219,150,.08)}
.nav-group__toggle svg{width:16px;height:16px;transition:transform .24s var(--ease)}
.nav-group.open .nav-group__toggle svg{transform:rotate(180deg)}
.nav-drop{
  position:absolute;top:calc(100% + 10px);left:0;min-width:264px;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  border-radius:16px;padding:8px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  box-shadow:0 24px 48px rgba(0,0,0,.45);
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop,
.nav-item.open .nav-drop{opacity:1;visibility:visible;transform:none}
.nav-drop a{width:100%;font-size:.9375rem}

/* .site-header ervoor, anders wint de latere .btn-regel van display:none */
.site-header .header-cta{display:none}
@media (min-width:1024px){ .site-header .header-cta{display:inline-flex} }

/* hamburger */
.burger{
  width:48px;height:48px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--border-strong);border-radius:12px;
  color:var(--text);cursor:pointer;
}
.burger svg{width:22px;height:22px}
@media (min-width:1024px){ .burger{display:none} }

/* ---------- mobiel paneel ---------- */
.panel{
  position:fixed;inset:0 0 0 auto;width:min(92vw,420px);z-index:70;
  background:var(--bg);
  border-left:1px solid var(--border-soft);
  transform:translateX(102%);
  visibility:hidden;               /* gesloten paneel hoort niet in de tabvolgorde */
  transition:transform .34s var(--ease),visibility .34s;
  display:flex;flex-direction:column;
  overflow-y:auto;
  padding:0;
}
.panel.open{transform:none;visibility:visible}
.panel__top{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);padding:0 20px;
  border-bottom:1px solid var(--border-soft);
}
.panel__close{
  width:48px;height:48px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--border-strong);border-radius:12px;
  color:var(--text);cursor:pointer;
}
.panel__close svg{width:20px;height:20px}
.panel ul{list-style:none;margin:0;padding:8px 20px 24px}
.panel li{border-bottom:1px solid var(--border-soft)}
.panel li:last-child{border-bottom:0}
.panel__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* :not(.btn) is hier geen sierlijkheid maar een reparatie. Zonder die
   uitzondering won deze regel op specificiteit van .btn--primary en kreeg de
   Contact-knop onderin het paneel lichte letters op mint: gemeten 1,54:1,
   waar 3:1 het minimum is voor grote tekst. Op /contact kwam daar
   aria-current overheen en werd het mint op mint, oftewel 1:1 en dus letterlijk
   onleesbaar. Een knop hoort zijn eigen kleuren te houden. */
.panel a:not(.btn){
  display:flex;align-items:center;
  min-height:56px;padding:8px 2px;
  font-family:var(--font-head);font-size:1.5rem;line-height:1.25;
  color:var(--text);text-decoration:none;flex:1;
}
.panel a[aria-current="page"]:not(.btn){color:var(--primary);box-shadow:inset 0 -2px 0 var(--primary)}
.panel__sub{padding:0 0 10px !important}
.panel__sub a{font-size:1.125rem;min-height:48px;color:var(--muted)}
.panel__sub a:hover,
.panel__sub a:focus-visible{color:var(--primary)}
.panel__sub[hidden]{display:none}
.panel__chev{
  width:44px;height:44px;display:grid;place-items:center;flex:none;
  background:transparent;border:1px solid var(--border-strong);border-radius:10px;
  color:var(--text);cursor:pointer;
}
.panel__chev svg{width:16px;height:16px;transition:transform .24s var(--ease)}
.panel__chev[aria-expanded="true"] svg{transform:rotate(180deg)}
.panel__cta{padding:4px 20px 32px}

.scherm{
  position:fixed;inset:0;z-index:65;background:rgba(5,11,8,.6);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.scherm.open{opacity:1;visibility:visible}

/* ---------- vaste duimbalk (alleen deze richting) ---------- */
.thumbbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(13,26,19,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border-soft);
}
.thumbbar .btn{flex:1;min-height:48px;font-size:.9375rem}
@media (min-width:768px){ .thumbbar{display:none} }

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 24px;
  border-radius:var(--radius-btn);
  border:1px solid transparent;
  font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1.2;
  text-decoration:none;text-align:center;cursor:pointer;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),
             background-color .24s var(--ease),border-color .24s var(--ease);
}
.btn--primary{background:var(--primary);color:var(--primary-ink)}
.btn--primary:hover,
.btn--primary:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 5px rgba(109,219,150,.16),0 12px 28px rgba(109,219,150,.14)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover,
.btn--ghost:focus-visible{transform:translateY(-2px);border-color:var(--primary);color:var(--primary)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn-row .btn{flex:1 1 200px}
@media (min-width:600px){ .btn-row .btn{flex:0 0 auto} }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:560px;
  display:grid;
  isolation:isolate;
  overflow:hidden;
}
@media (min-width:1024px){ .hero{min-height:720px} }
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:56% 26%}
.hero__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,#0D1A13 0%,rgba(13,26,19,.86) 26%,transparent 62%);
}
/* Op een smal scherm staat dezelfde tekst over veel meer beeldhoogte. Het
   verloop loopt daar hoger door zodat de kop leesbaar blijft. Het is nog
   steeds een verloop vanaf de onderkant, geen laag over de hele foto: het
   gezicht in de bovenste 40% blijft onaangeraakt. */
@media (max-width:767px){
  .hero{min-height:620px}
  .hero__media img{object-position:64% 18%}
  .hero__veil{
    background:linear-gradient(0deg,#0D1A13 4%,rgba(13,26,19,.9) 42%,
               rgba(13,26,19,.5) 60%,transparent 78%);
  }
  .hero .lede{font-size:1.0625rem}
}
.hero__glow{
  position:absolute;z-index:1;pointer-events:none;
  left:var(--gx,52%);top:var(--gy,42%);
  width:min(104vw,900px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  /* Zelfde reden als bij .glow::before: blur(58px) op een vlak dat de muis
     volgt kostte op de homepagina 77 van de 149 beelden. Zeven stops doen
     hetzelfde werk zonder verfstap. Kleurverschil hoogstens 7 van 255,
     geen enkele pixel wijkt meer dan 8 af. */
  background:radial-gradient(circle at 50% 50%,
    rgba(109,219,150,.335) 0%,
    rgba(109,219,150,.285) 14%,
    rgba(109,219,150,.185) 30%,
    rgba(109,219,150,.105) 44%,
    rgba(109,219,150,.048) 58%,
    rgba(109,219,150,.016) 72%,
    rgba(109,219,150,0)    86%);
  mix-blend-mode:screen;
}
.hero__inner{
  position:relative;z-index:3;
  align-self:end;
  padding-block:44px 56px;
  width:min(100% - 40px,var(--wrap));
  margin-inline:auto;
}
/* De kop staat deels boven het verloop, over de foto zelf. Een schaduw houdt
   de letters leesbaar zonder dat er een donkere laag over de foto komt. */
.hero h1,.hero .lede{text-shadow:0 1px 2px rgba(13,26,19,.8),0 2px 26px rgba(13,26,19,.75)}
.hero h1{max-width:16ch}
.hero .lede{max-width:60ch}

/* paginakop van de subpagina's: tekst naast een ingelijste foto.
   overflow:hidden houdt de gloed binnen het scherm: hij mag wel de
   paginamarge in lopen, maar nooit de pagina breder maken. */
.pagehead{
  padding-block:clamp(38px,6vw,74px) clamp(30px,5vw,58px);
  overflow:hidden;
}
.pagehead__grid{display:grid;gap:30px;align-items:center}
@media (min-width:900px){
  .pagehead__grid{grid-template-columns:1.02fr .98fr;gap:56px}
}
.pagehead h1{margin-bottom:.4em}

/* ---------- twee kolommen tekst + beeld ---------- */
.duo{display:grid;gap:30px;align-items:center}
.duo--top{align-items:start}   /* twee tekstkolommen beginnen op dezelfde lijn */
@media (min-width:900px){
  .duo{grid-template-columns:1.05fr .95fr;gap:58px}
  .duo--flip .duo__media{order:-1}
}
.duo + .duo{margin-top:clamp(56px,8vw,96px)}
.sub{
  font-family:var(--font-body);font-weight:600;
  color:var(--primary);font-size:1.0625rem;margin:-.3em 0 1em;
}

/* ---------- lijsten ---------- */
.dots{list-style:none;margin:0 0 1.4em;padding:0;display:grid;gap:12px;max-width:var(--measure)}
.dots li{display:flex;gap:.55em;align-items:baseline}
.dots .b{color:var(--primary);flex:none;font-size:.7em;line-height:1}

/* de vier vragen met een streepje ervoor, letterlijk uit de bron */
.dash{list-style:none;margin:0 0 1.4em;padding:0;display:grid;gap:10px;max-width:var(--measure)}
.dash li{padding-left:.85em;text-indent:-.85em;color:var(--text)}
.dash li::first-letter{color:var(--primary);font-weight:700}

.check{list-style:none;margin:0 0 1.4em;padding:0;display:grid;gap:11px;max-width:var(--measure)}
.check li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.ico{width:14px;height:14px;margin-top:.55em;color:var(--primary);flex:none}

.split-2{max-width:none}
@media (min-width:760px){
  .split-2{columns:2;column-gap:38px;display:block}
  .split-2 li{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:11px}
}

/* ---------- dienstenkaarten ---------- */
.services{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:600px){ .services{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .services{grid-template-columns:repeat(4,1fr)} }
.service-card{
  display:flex;flex-direction:column;gap:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:26px 24px;
  color:var(--text);text-decoration:none;
  min-height:100%;
  transition:transform .24s var(--ease),border-color .24s var(--ease),background-color .24s var(--ease);
}
.service-card:hover{transform:translateY(-3px);border-color:var(--primary);background:#182b21}
.service-card img{
  width:88px;height:88px;border-radius:50%;
  border:2px solid var(--border);object-fit:cover;
  transition:border-color .24s var(--ease);
}
.service-card:hover img{border-color:var(--primary)}
.service-card span{font-family:var(--font-head);font-size:1.125rem;line-height:1.3;font-weight:600}
.service-card .pijl{color:var(--primary);font-size:var(--small);font-weight:600;margin-top:auto}

/* ---------- prijskaarten ---------- */
.price-grid{display:grid;gap:20px;align-items:stretch;grid-template-columns:1fr}
@media (min-width:700px){
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid--1{grid-template-columns:1fr}   /* één brede kaart blijft breed */
}
@media (min-width:1080px){ .price-grid--3{grid-template-columns:repeat(3,1fr)} }
.price-grid > .glow{height:100%}

.price-card{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:28px;
  height:100%;
  transition:transform .24s var(--ease),border-color .24s var(--ease);
}
.glow:hover .price-card{transform:translateY(-3px);border-color:var(--primary)}
.price-card__title{
  font-family:var(--font-head);font-weight:600;
  font-size:1.3rem;line-height:1.25;margin:0 0 16px;color:var(--text);
}
.price-card p{max-width:none}
.price{margin:0 0 20px}
.price__row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price__amount{
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(2.1rem,5vw,2.75rem);line-height:1.05;
  color:var(--accent);
}
.price__old{color:var(--muted);font-size:1.125rem;text-decoration-thickness:2px}
.price__unit{display:block;margin-top:6px;color:var(--muted);font-size:var(--small)}
.price__note{
  display:block;margin-top:8px;color:var(--muted);
  font-size:var(--small);line-height:1.5;
}
.price--tekst{
  font-family:var(--font-head);font-weight:600;
  font-size:1.35rem;line-height:1.3;color:var(--accent);
  margin:0 0 20px;
}
/* Workshop/informatieavond heeft geen prijs. De kaart houdt haar hoogte
   door de padding, niet door een verzonnen regel. */
.price--leeg{height:14px;margin:0 0 20px}
.price-card__body{margin:0 0 22px;color:var(--text)}
.price-card .btn{margin-top:auto}

.price-card--breed{padding:32px}
@media (min-width:900px){
  .price-card--breed{padding:40px}
  .price-card--breed .price-card__title{font-size:1.7rem}
  .price-card--breed .btn{align-self:start;min-width:260px;width:auto}
}

/* ---------- productraster (verhuur) ---------- */
.product-grid{
  display:grid;gap:16px;grid-template-columns:repeat(2,1fr);
  list-style:none;margin:0;padding:0;
}
@media (min-width:768px){ .product-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ .product-grid{grid-template-columns:repeat(4,1fr)} }
.product-card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:16px;
  overflow:hidden;
  display:flex;flex-direction:column;height:100%;
  transition:border-color .24s var(--ease),transform .24s var(--ease);
}
.product-card:hover,
.product-card:focus-within{border-color:var(--border)}
.product-card__media{
  position:relative;
  aspect-ratio:4/5;background:var(--mat);
  overflow:hidden;
}
/* contain, niet cover: de beeldverhoudingen lopen van 0,46 tot 1,82 en cover
   snijdt bij de smalste foto meer dan de helft weg. De mat vult de rest. */
.product-card__media img{width:100%;height:100%;object-fit:contain;padding:10px}
.product-card__in{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.product-card h3{font-size:.9375rem;line-height:1.4;margin:0;font-weight:500;color:var(--text)}
.product-card .prijs{color:var(--accent);font-weight:600;font-size:1.0625rem;margin-top:auto}

/* ---------- formulier ---------- */
.form-grid{display:grid;gap:30px}
@media (min-width:900px){ .form-grid{grid-template-columns:1.15fr .85fr;gap:56px} }
.field{margin-bottom:18px}
.field label{display:block;font-size:var(--small);font-weight:500;color:var(--muted);margin-bottom:7px}
.field input,.field textarea{
  width:100%;min-height:50px;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  border-radius:12px;
  color:var(--text);
  font:inherit;
  padding:13px 15px;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{border-color:var(--primary)}
.form-status{
  margin-top:16px;padding:14px 16px;
  border:1px solid var(--border-strong);border-radius:12px;
  background:var(--surface-2);color:var(--text);font-size:var(--small);
}
.form-status[hidden]{display:none}

.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.contact-list a,.contact-list span{
  display:flex;align-items:center;gap:12px;
  min-height:48px;text-decoration:none;color:var(--text);
}
.contact-list a:hover,
.contact-list a:focus-visible{color:var(--primary)}
.contact-list .ico{width:18px;height:18px;margin:0;color:var(--primary)}

/* ---------- regio ---------- */
.regio{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-card);
  padding:26px 28px;
  color:var(--muted);
  max-width:none;
}

/* ---------- footer ---------- */
.site-footer{
  background:var(--surface);
  border-top:1px solid var(--border-soft);
  padding-block:56px 44px;
}
.footer-grid{display:grid;gap:36px}
@media (min-width:768px){ .footer-grid{grid-template-columns:1.1fr .9fr .9fr} }
.site-footer h2{font-size:1rem;font-family:var(--font-body);font-weight:600;color:var(--primary);margin:0 0 14px;letter-spacing:0}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li a{
  display:flex;align-items:center;min-height:44px;
  color:var(--text);text-decoration:none;font-size:.9375rem;
}
.site-footer li a:hover{color:var(--primary)}
.footer-brand img{width:56px;height:56px;border-radius:50%}
.footer-adres{color:var(--muted);font-size:.9375rem;margin:16px 0 0;line-height:1.7}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--border-strong);border-radius:12px;color:var(--text);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.socials a:hover,
.socials a:focus-visible{color:var(--primary);border-color:var(--primary)}
.socials svg{width:20px;height:20px}
.footer-onder{
  margin-top:36px;padding-top:22px;
  border-top:1px solid var(--border-soft);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
}
.footer-onder a{font-size:.875rem;color:var(--muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.footer-onder a:hover{color:var(--primary)}
.footer-onder .ico{width:16px;height:16px;margin:0;color:var(--primary)}

/* ---------- lange url's mogen nooit horizontaal scrollen ---------- */
.breeklink{overflow-wrap:anywhere;word-break:break-word}

/* ---------- scroll-reveal ---------- */
[data-rv]{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
[data-rv].in{opacity:1;transform:none}
.rm [data-rv]{opacity:1 !important;transform:none !important}

/* ---------- minder beweging: alles uit, niets onzichtbaar ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .grain{display:none}
  [data-rv]{opacity:1 !important;transform:none !important}
  .hero__glow{left:52% !important;top:42% !important}
}

/* ============================================================
   INTERACTIE — "licht in het donker"
   ------------------------------------------------------------
   Eén idee draagt alles op deze pagina: er is een lichtbron.
   Op een muis is dat de aanwijzer, op een aanraakscherm staat
   het licht stil boven het midden van het scherm.

   Wat dichter bij het licht ligt, is lichter. Diepte ontstaat
   hier dus door helderheid, niet door schaal, en dat is op een
   donkere achtergrond ook fysiek het enige dat klopt.

   Alles wat beweegt, beweegt met transform of opacity. Geen
   filter, geen box-shadow, geen inset: die dwingen de browser
   tot herberekenen en dat kost frames in een scroll-lus.
   ============================================================ */

:root{
  --tilt:4.5deg;        /* maximale kanteling, blijft onder de 6deg-grens */
  --druk:90ms;          /* ingedrukt: antwoord ruim binnen 100ms */
  --vlot:260ms;
  --zacht:420ms;
  --licht:0;            /* 0 tot 1: hoe dicht de lichtbron bij dit vlak is */
}

/* ---------- 1. de lichtbron zelf ----------
   De heroglow stond op left/top. Dat is layout-werk bij elke muisbeweging.
   Hij staat nu vast in het midden en verplaatst met translate3d, wat de
   compositor alleen hoeft door te geven. */
.hero__glow{
  left:50%;top:50%;
  transform:translate3d(calc(-50% + var(--gx,2%)),calc(-50% + var(--gy,-8%)),0);
  will-change:transform;
}

/* ---------- 2. parallax ----------
   De hero-foto loopt trager dan de tekst erboven. Zeven procent verschil:
   je ziet het niet als beweging, je ziet het als afstand. */
.hero__media img{
  transform:translate3d(0,var(--py,0px),0) scale(1.14);
  will-change:transform;
}
.hero__inner{transform:translate3d(0,var(--py2,0px),0)}

/* Een ingelijste foto zit achter zijn eigen lijst. De foto schuift binnen
   het kader mee, de lijst staat stil. scale(1.1) houdt de randen dicht. */
.shot img{transform:translate3d(0,var(--py,0px),0) scale(1.1)}

/* ---------- 3. licht dat op vlakken valt ----------
   Eén laag per kaart, alleen opacity verandert. De laag zit op z-index -1:
   boven de achtergrond van de kaart, onder de tekst. Zonder isolation zou
   hij door de sectie heen zakken. */
/* Hier stond isolation:isolate. Dat leek onschuldig, maar het dwingt
   transform-style terug naar flat: een element met isolation:isolate is
   geen 3D-renderomgeving meer. Alle translateZ hieronder deed dus niets,
   terwijl elke meting (de eigenschap staat er, de waarde klopt) zei dat het
   goed was. De kaarten hebben een eigen stapelcontext nodig zodat de
   lichtlaag op z-index -1 boven de kaartachtergrond blijft: die krijgen ze
   al van transform en van transform-style:preserve-3d zelf. */
.service-card,.price-card,.product-card{position:relative}
.service-card::before,
.price-card::before,
.product-card::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(46% 44% at 50% 40%,
    rgba(196,255,220,.19),rgba(109,219,150,.06) 55%,transparent 78%);
  opacity:var(--licht);
  transform:translate3d(var(--hx,0px),var(--hy,0px),0);
  transition:opacity var(--vlot) var(--ease);
}

/* Een foto vangt licht op dezelfde manier. Dit vervangt de oude
   filter:brightness-hover: dat was een verfstap over de hele foto. */
.shot__frame::before{
  content:"";
  position:absolute;inset:0;z-index:2;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(62% 58% at 50% 42%,
    rgba(214,255,230,.22),transparent 72%);
  opacity:var(--licht);
  mix-blend-mode:screen;
  transition:opacity var(--vlot) var(--ease);
}

/* ---------- 4. kanteling en echte diepte ----------
   perspective op het raster, translateZ op de lagen binnen de kaart.
   Alleen niet-tekstlagen krijgen Z: tekst die op afstand staat wordt door
   de browser eerst plat gerasterd en daarna geschaald, en dat is op een
   leessite zichtbaar als onscherpte. */
.services,.price-grid{perspective:1200px;perspective-origin:50% 42%}

.service-card{
  transform-style:preserve-3d;
  transform:translate3d(0,var(--lift,0px),0)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform var(--vlot) var(--ease),
             border-color var(--vlot) var(--ease),
             background-color var(--vlot) var(--ease);
}
.service-card:hover,
.service-card:focus-visible{
  --lift:-4px;
  border-color:var(--primary);
  background:#182b21;
  transform:translate3d(0,var(--lift),0)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.service-card img{
  transform:translateZ(0);
  transition:transform var(--vlot) var(--ease),border-color var(--vlot) var(--ease);
}
.service-card:hover img,
.service-card:focus-visible img{transform:translateZ(38px)}
.service-card .pijl{
  transform:translateZ(0);
  transition:transform var(--vlot) var(--ease);
}
.service-card:hover .pijl,
.service-card:focus-visible .pijl{transform:translate3d(7px,0,24px)}

/* De schaduw onder de kaart verschuift met de lichtval mee. Een echte
   box-shadow zou per frame opnieuw geverfd moeten worden; dit is één
   vooraf vervaagde vorm die alleen verschuift. */
.service-card::after,
.price-card::after{
  content:"";
  position:absolute;left:7%;right:7%;bottom:-14px;height:26px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 50%,rgba(0,0,0,.6),transparent 72%);
  opacity:calc(.14 + var(--licht) * .34);
  transform:translate3d(var(--sx,0px),0,-40px);
  transition:opacity var(--vlot) var(--ease);
}

/* Prijskaarten. De kanteling zit op de .glow-wikkel zodat de mintgloed
   mee de ruimte in draait; de kaart zelf blijft plat binnen die wikkel. */
.price-grid > .glow{
  transform-style:preserve-3d;
  transform:translate3d(0,var(--lift,0px),0)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform var(--vlot) var(--ease);
}
.price-grid > .glow:hover,
.price-grid > .glow:focus-within{--lift:-4px}
.price-card{transform-style:preserve-3d}
.glow:hover .price-card,
.glow:focus-within .price-card{transform:none;border-color:var(--primary)}
/* Hier stond een transform met een negatieve Z om de gloed achter de kaart te
   duwen. Dat was niet nodig: de kaart staat op z-index 1 binnen .glow en de
   gloed op 0, dus de volgorde klopt sowieso. Zie de meting bij .glow::before. */

.price-card__title,.price,.price-card .btn{
  transform:translateZ(0);
  transition:transform var(--vlot) var(--ease);
}
.glow:hover .price-card__title,
.glow:focus-within .price-card__title{transform:translateZ(14px)}
.glow:hover .price,
.glow:focus-within .price{transform:translateZ(26px)}
.glow:hover .price-card .btn,
.glow:focus-within .price-card .btn{transform:translateZ(20px)}

/* Productkaarten hebben overflow:hidden en kunnen dus geen 3D dragen.
   Ze krijgen alleen het licht en een lichte lift. */
.product-card{
  transform:translate3d(0,var(--lift,0px),0);
  transition:transform var(--vlot) var(--ease),border-color var(--vlot) var(--ease);
}
.product-card:hover,
.product-card:focus-within{--lift:-3px}

/* ---------- 5. micro-interacties ----------
   Ingedrukt moet meteen voelbaar zijn. 90ms is korter dan de 100ms
   waarbinnen een handeling antwoord hoort te geven. */
.btn:active,
.service-card:active,
.product-card:active{transition-duration:var(--druk)}
.btn:active{transform:translateY(0) scale(.982)}
.service-card:active{--lift:-1px}
.product-card:active{--lift:-1px}
.nav a:active,.panel a:active,.contact-list a:active{opacity:.72}

/* Toetsenbord krijgt hetzelfde antwoord als de muis. Zonder deze regels
   werkt de helft van de site alleen met een aanwijzer. */
.service-card:focus-visible,
.product-card:focus-within,
.price-grid > .glow:focus-within{--licht:.85}

/* ---------- 6. formulier ----------
   Een veld dat focus krijgt, licht op. De rand alleen is te stil op een
   donkere achtergrond. */
/* De foutmelding staat absoluut geplaatst, zodat het verschijnen ervan niets
   verschuift. Dan moet die ruimte er wel al zijn: zonder deze reservering
   landde "Dit telefoonnummer lijkt nog niet compleet." bovenop het label
   van het volgende veld. Dat was op de schermafdruk te zien en niet in een
   meetwaarde. De 18px marge is verhuisd naar 20px vulling, dus de afstand
   tussen twee velden blijft precies gelijk. */
.field{position:relative;padding-bottom:26px;margin-bottom:0}
.field::before{
  content:"";
  position:absolute;left:-6px;right:-6px;top:22px;bottom:20px;
  border-radius:16px;pointer-events:none;
  background:radial-gradient(70% 120% at 50% 50%,rgba(109,219,150,.22),transparent 72%);
  opacity:0;
  transition:opacity 180ms var(--ease);
}
.field:focus-within::before{opacity:1}
.field input,.field textarea{
  position:relative;z-index:1;
  transition:border-color 160ms var(--ease);
}
.field input:focus,.field textarea:focus{border-color:var(--primary)}

/* Fout- en goedmelding. Absoluut geplaatst: een melding die verschijnt mag
   de rest van het formulier niet verschuiven. */
/* top:100% klopte niet. Het bevattende blok van een absoluut geplaatst
   element is het OPVULvak van de ouder, dus 100% ligt onder de gereserveerde
   ruimte in plaats van erin, en de melding landde precies op het label van
   het volgende veld. Gemeten: 19,5px overlap. Vanaf de onderrand rekenen
   lost dat op. */
.veld-melding{
  position:absolute;left:0;right:0;top:auto;bottom:4px;
  margin:0;
  font-size:.8125rem;line-height:1.35;
  color:#F0C68A;
  opacity:0;
  transform:translate3d(0,-4px,0);
  transition:opacity 180ms var(--ease),transform 180ms var(--ease);
  pointer-events:none;
}
.field--fout .veld-melding{opacity:1;transform:none}
.field--fout input,.field--fout textarea{border-color:#F0C68A}
.field--goed input,.field--goed textarea{border-color:var(--primary)}
.veld-vink{
  position:absolute;right:15px;bottom:43px;
  width:16px;height:16px;
  color:var(--primary);
  opacity:0;transform:scale(.7);
  transition:opacity 180ms var(--ease),transform 180ms var(--ease);
  pointer-events:none;z-index:2;
}
.field--goed .veld-vink{opacity:1;transform:none}
/* in een tekstvak van 140px hoog hoort het vinkje bij de eerste regel te
   staan, niet 120px onder wat er getypt is */
.field--tekstvak .veld-vink{bottom:auto;top:46px}

/* ---------- 7. mobiel menu ----------
   Het paneel schoof in één blok binnen en dat voelde hard. Nu komt het
   paneel eerst en volgen de regels er net achteraan. */
/* visibility hoorde niet mee te lopen in de duur van de overgang. Zolang die
   loopt blijft de berekende waarde bij het openen nog een beeld lang hidden,
   en een focus() op een element in een onzichtbaar paneel doet stilzwijgend
   niets: gemeten bleef de focus op de hamburger staan. Nu schakelt visibility
   bij het openen meteen om en pas bij het sluiten na afloop, zodat het paneel
   tijdens het wegschuiven zichtbaar blijft en daarna uit de tabvolgorde gaat. */
.panel{transition:transform 380ms var(--ease),visibility 0s linear 380ms}
.panel.open{transition:transform 380ms var(--ease),visibility 0s linear 0s}
.panel li,.panel__cta{
  opacity:0;
  transform:translate3d(22px,0,0);
  transition:opacity 260ms var(--ease),transform 260ms var(--ease);
  transition-delay:0ms;
}
.panel.open li,.panel.open .panel__cta{
  opacity:1;transform:none;
  transition-delay:calc(90ms + var(--i,0) * 45ms);
}
.panel__chev{transition:transform var(--vlot) var(--ease),background-color 160ms var(--ease)}
.panel__chev:active{transform:scale(.9)}
.burger{transition:transform var(--druk) var(--ease)}
.burger:active{transform:scale(.9)}
.scherm{transition:opacity 340ms var(--ease),visibility 340ms}

/* ---------- 8. aanraakscherm ----------
   Geen aanwijzer, dus geen kanteling en geen lichtvolging. In plaats
   daarvan een ingedrukt-gevoel, en het licht staat stil. */
@media (hover:none){
  .service-card,.price-grid > .glow{--rx:0deg;--ry:0deg}
  .service-card:active,.price-grid > .glow:active{--lift:0px;--licht:.5}
  .service-card:active{transform:scale(.985)}
  .price-grid > .glow:active{transform:scale(.988)}
  .service-card::after,.price-card::after{opacity:.16}
}

/* ---------- 9. minder beweging ----------
   Alles uit. Niet afgezwakt: uit. In deze doelgroep zitten mensen die
   misselijk zijn van de zwangerschap. */
@media (prefers-reduced-motion:reduce){
  :root{--tilt:0deg}
  *{--licht:0 !important;--rx:0deg !important;--ry:0deg !important;
    --lift:0px !important;--py:0px !important;--py2:0px !important;
    --hx:0px !important;--hy:0px !important;--sx:0px !important;
    --gsx:0px !important;--gsy:0px !important;--gsc:1 !important}
  .hero__media img{transform:none !important}
  .hero__inner{transform:none !important}
  .shot img{transform:none !important}
  .hero__glow{transform:translate(-50%,-50%) !important}
  .service-card,.price-grid > .glow,.product-card{transform:none !important}
  .service-card img,.service-card .pijl,
  .price-card__title,.price,.price-card .btn{transform:none !important}
  .panel li,.panel__cta{opacity:1 !important;transform:none !important}
  .service-card::before,.price-card::before,.product-card::before,
  .shot__frame::before{opacity:0 !important}
  .service-card::after,.price-card::after{opacity:.16 !important}
  .grain{display:none !important}
}
.rm .service-card,.rm .price-grid > .glow,.rm .product-card{transform:none !important}
.rm .hero__media img,.rm .shot img,.rm .hero__inner{transform:none !important}
.rm .panel li,.rm .panel__cta{opacity:1 !important;transform:none !important}
.rm .grain{display:none !important}