/* ==========================================================================
   EnjoyToCarry — demo 5 "Groenvlak"
   Mint is geen accent maar de achtergrond. Volle kleurblokken, oversized Syne,
   cirkels die het ronde logo herhalen, harde randen en slagschaduwen.
   Palet en maten komen uit design/tokens.md, richting 5.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts --
   Zelf gehost in plaats van via de Google Fonts CDN. Twee redenen:
   1. geen derde partij die het IP van de bezoeker ziet (AVG)
   2. met preload verdwijnt de layout shift van font-swap: CLS gaat naar ~0
   Variabele fonts, exact de bestanden die Google Fonts zelf uitlevert.        */

@font-face{
  font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/syne-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:'Syne';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/syne-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:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/outfit-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:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/outfit-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{
  --mint:#6DDB96;             /* HOOFDkleur: volle sectievlakken */
  --deep:#0F3D28;             /* afwisselend sectievlak */
  --ink:#0B2018;              /* ALLE tekst op mint. 9,91:1 */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --muted:#4C5A52;            /* 7,26:1 op wit */
  --coral:#FF7A4D;            /* badge, altijd met --ink tekst EN --ink rand */
  --yellow:#FFD166;           /* badge, altijd met --ink tekst EN --ink rand */
  --border:#0B2018;
  --focus:#0B2018;            /* op mint; op --ink en --deep gebruik je --mint */

  --font-head:'Syne',system-ui,sans-serif;
  --font-body:'Outfit',system-ui,sans-serif;
  --h1:clamp(2.8rem,11vw,6.5rem);
  --h1-fit:clamp(2.1rem,7.6vw,4.6rem);
  --h2:clamp(2rem,6vw,3.6rem);
  --h3:1.25rem;
  --price:clamp(3rem,9vw,4.5rem);
  --body:1.125rem;
  --small:.8125rem;
  --lh-head:.94;
  --lh-body:1.65;
  --ls-head:-.035em;
  --ls-caps:.1em;

  --measure:64ch;
  --wrap:1140px;
  --section-y:clamp(64px,10vw,120px);
  --radius-card:0;            /* alleen cirkels en pillen zijn rond */
  --radius-circle:50%;
  --border-w:2px;
  --shadow-hard:6px 6px 0 var(--ink);
  --header-h:64px;
  --ease:cubic-bezier(.16,1,.3,1);

  --mat:#FFFFFF;              /* mat achter de Tula-productfoto's */
}

/* --------------------------------------------------------------- basis --- */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 12px);
  /* de schuifbalkbreedte blijft altijd gereserveerd: het openen van het mobiele
     menu zet overflow op hidden en dat zou anders de hele pagina laten springen */
  scrollbar-gutter:stable;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--body);
  line-height:var(--lh-body);
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%}
picture{display:contents}

h1,h2,h3,h4{
  font-family:var(--font-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  margin:0;
  text-wrap:balance;
  hyphens:none;
  overflow-wrap:normal;
}

/* Kop past zich aan de container aan, niet aan het venster.
   --wfit is de breedte van het langste woord in em, gemeten in de echte Syne
   (zie tools-meting). Zo raakt een kop de rand maar steekt hij er nooit overheen,
   en hoeft geen enkel woord op een rare plek te breken.                         */
.cq{container-type:inline-size}

h1{font-size:min(var(--h1),calc(100cqi / var(--wfit,4)));font-weight:800}
h2{font-size:min(var(--h2),calc(100cqi / var(--wfit,4)));font-weight:800}
h3{font-size:min(var(--h3),calc(100cqi / var(--wfit,4)));
   font-weight:700;line-height:1.25;letter-spacing:-.01em}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:inherit}

ul{margin:0;padding:0}

/* --------------------------------------------------------- hulpmiddelen --- */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:20px;
}
@media (min-width:768px){ .wrap{padding-inline:32px} }

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:12px;z-index:200;
  background:var(--mint);color:var(--ink);
  border:var(--border-w) solid var(--ink);
  padding:12px 18px;font-weight:600;text-decoration:none;
  top:12px;translate:0 -76px;
  transition:translate .2s var(--ease);
}
.skip-link:focus{translate:0 0}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.site-header :focus-visible,
.site-footer :focus-visible,
.block--deep :focus-visible,
.marquee :focus-visible{outline-color:var(--mint)}

.eyebrow{
  font-family:var(--font-body);
  font-size:var(--small);
  font-weight:600;
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  margin:0 0 14px;
}

.lead{
  font-size:clamp(1.2rem,2.6vw,1.6rem);
  line-height:1.4;
  font-weight:500;
  max-width:24ch;
}

.measure{max-width:var(--measure)}

/* ------------------------------------------------------------- blokken --- */

.block{
  padding-block:var(--section-y);
  position:relative;
  overflow:clip;
}
/* de decoratieve vlakken worden door JS in .block en .hero gezet en liggen op
   z-index 0; alle inhoud moet daar met zekerheid bovenop staan */
.block > .wrap,.hero > .wrap,.block > .marquee{position:relative;z-index:1}

.block--mint{background:var(--mint);color:var(--ink)}
.block--white{background:#fff;color:var(--ink)}
.block--deep{background:var(--deep);color:#fff}
.block--ink{background:var(--ink);color:#fff}
.block--tight{padding-block:clamp(40px,6vw,64px)}

.block--deep h2,.block--deep h3{color:var(--mint)}
.block--deep .muted,.block--ink .muted{color:#CFE4D8}

.muted{color:var(--muted)}

.prose h2{margin:0 0 clamp(18px,2.2vw,30px)}
.prose > .eyebrow + h2{margin-top:0}

.split{display:grid;gap:36px;align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  .split--wide-text{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .split--rev .split__media{order:-1}
}

.stack > * + *{margin-top:clamp(28px,4vw,48px)}

/* --------------------------------------------------------------- header --- */

.site-header{
  position:sticky;top:0;z-index:80;
  background:var(--ink);
  color:#fff;
  height:var(--header-h);
}
.site-header__inner{
  height:var(--header-h);
  display:flex;align-items:center;gap:20px;
}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand img{width:44px;height:44px;display:block;border-radius:50%}
.brand__name{
  font-family:var(--font-head);font-weight:800;font-size:1.0625rem;
  letter-spacing:-.02em;
}
@media (max-width:400px){ .brand__name{display:none} }

.nav{margin-left:auto;display:none}
@media (min-width:1024px){ .nav{display:block} }
.nav__list{display:flex;align-items:center;gap:4px;list-style:none}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 12px;
  font-weight:600;font-size:.9375rem;
  color:#fff;text-decoration:none;position:relative;
}
.nav__link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:10px;height:3px;
  background:var(--mint);transform:scaleX(0);transform-origin:left;
  transition:transform .26s var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after{transform:scaleX(1)}

.nav__chev{width:14px;height:14px;flex:0 0 auto}

.nav__sub{
  position:absolute;top:100%;left:0;min-width:270px;
  background:var(--ink);border:var(--border-w) solid var(--mint);
  padding:8px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.nav__item--group:hover .nav__sub,
.nav__item--group:focus-within .nav__sub,
.nav__sub.is-open{opacity:1;visibility:visible;transform:none}
.nav__sub a{
  display:block;padding:12px 14px;min-height:44px;
  color:#fff;text-decoration:none;font-weight:500;font-size:.9375rem;
}
.nav__sub a:hover,.nav__sub a:focus-visible{background:var(--mint);color:var(--ink)}

.header__cta{margin-left:auto}
@media (min-width:1024px){ .header__cta{margin-left:16px} }
@media (max-width:1023px){ .header__cta{display:none} }

/* hamburger */
.burger{
  margin-left:auto;
  width:48px;height:48px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:var(--border-w) solid var(--mint);
  color:var(--mint);cursor:pointer;padding:0;
}
@media (min-width:1024px){ .burger{display:none} }
.burger__bars{display:block;width:22px;height:2px;background:currentColor;position:relative}
.burger__bars::before,.burger__bars::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;
}
.burger__bars::before{top:-7px}
.burger__bars::after{top:7px}

/* schermvullend mintpaneel */
.mobile-nav{
  position:fixed;inset:0;z-index:90;
  background:var(--mint);color:var(--ink);
  display:flex;flex-direction:column;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  overflow:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;
  /* visibility schakelt bij openen meteen om, zodat focus() in hetzelfde frame
     al kan landen; bij sluiten pas na de fade. Het paneel zelf verschuift niet
     meer: alleen de regels erin komen op, dat scheelt een schermgroot herteken. */
  transition:opacity .2s var(--ease),visibility 0s linear .2s;
}
.mobile-nav.is-open{
  opacity:1;visibility:visible;
  transition:opacity .2s var(--ease),visibility 0s linear 0s;
}
@media (min-width:1024px){ .mobile-nav{display:none} }

/* De binnenlaag draagt de kolom, niet het paneel zelf. Zonder dit had de
   margin-top:auto op de voet niets om tegenaan te duwen en stond de knop
   Contact halverwege het scherm te zweven in plaats van onderaan. */
.mobile-nav__inner{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}

.mobile-nav__top{display:flex;align-items:center;justify-content:flex-end;min-height:48px}
.mobile-nav__close{
  width:48px;height:48px;border-radius:50%;
  background:var(--ink);color:var(--mint);border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.mobile-nav__list{list-style:none;margin:12px 0 0}
/* de regels komen na elkaar op, 45ms uit elkaar */
.mobile-nav__list > li,.mobile-nav__foot,.mobile-nav__close{
  opacity:0;translate:0 22px;
  transition:opacity .34s var(--ease),translate .34s var(--ease);
}
.mobile-nav__close{translate:0 0;scale:.72;transition:opacity .24s var(--ease),scale .24s var(--ease)}
.mobile-nav.is-open .mobile-nav__list > li,
.mobile-nav.is-open .mobile-nav__foot{
  opacity:1;translate:0 0;transition-delay:calc(var(--i,0) * 45ms + 40ms);
}
.mobile-nav.is-open .mobile-nav__close{opacity:1;scale:1}
.rm .mobile-nav__list > li,.rm .mobile-nav__foot,.rm .mobile-nav__close{
  opacity:1!important;translate:none!important;scale:1!important;
}
.mobile-nav__row{
  display:flex;align-items:center;border-bottom:2px solid rgba(11,32,24,.18);
  container-type:inline-size;
}
.mobile-nav__link{
  flex:1 1 0;min-width:0;
  display:flex;align-items:center;min-height:64px;
  font-family:var(--font-head);font-weight:800;
  font-size:min(2rem,calc(100cqi / var(--wfit,4)));
  letter-spacing:-.03em;line-height:1.05;
  color:var(--ink);text-decoration:none;padding:8px 0;
}
/* in de accordeonrij deelt de link de breedte met een tikdoel van 48px + 8px marge */
.mobile-nav__row--acc .mobile-nav__link{
  font-size:min(2rem,calc((100cqi - 56px) / var(--wfit,4)));
}
.mobile-nav__toggle{
  width:48px;height:48px;flex:0 0 auto;margin-left:8px;
  background:transparent;border:2px solid var(--ink);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.mobile-nav__toggle svg{transition:transform .24s var(--ease)}
.mobile-nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.mobile-nav__sub{list-style:none;display:none;padding:0 0 10px 18px}
.mobile-nav__sub.is-open{display:block}
.mobile-nav__sub a{
  display:flex;align-items:center;min-height:56px;
  font-weight:600;font-size:1.125rem;color:var(--ink);text-decoration:none;
  border-bottom:2px solid rgba(11,32,24,.12);
}
.mobile-nav__foot{margin-top:auto;padding-top:24px}
.mobile-nav__foot .btn{width:100%}

body.is-locked{overflow:hidden}

/* ---------------------------------------------------------------- hero --- */

.hero{
  background:var(--mint);color:var(--ink);
  padding-block:clamp(48px,8vw,96px);
  min-height:520px;
  display:flex;align-items:center;
  position:relative;overflow:clip;
}
.hero__grid{display:grid;gap:32px;align-items:center;width:100%}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}
}
/* de kop loopt over de volle containerbreedte: dat is de hele richting */
.hero h1{margin-bottom:clamp(24px,3vw,40px)}
.hero .eyebrow{margin-bottom:10px}
.hero__text{max-width:34ch;font-size:clamp(1.0625rem,2vw,1.1875rem)}
.hero__text a{font-weight:600;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.hero__text a:hover{background:var(--ink);color:var(--mint);text-decoration-color:transparent}

.hero__media{position:relative;display:flex;justify-content:center;z-index:1}
.hero__photo{
  width:min(320px,74vw);aspect-ratio:1;
  border-radius:50%;border:var(--border-w) solid var(--ink);
  overflow:hidden;background:#fff;
}
/* de foto staat 12% ruimer in zijn masker zodat hij binnen de cirkel kan
   meebewegen zonder dat er een rand vrijkomt */
.hero__photo img{
  width:100%;height:100%;object-fit:cover;object-position:48% 34%;display:block;
  scale:1.12;
}
.rm .hero__photo img{scale:1}

/* het ronde logo als stempel: op mint zou het wegvallen, dus met een inkt-ring */
.stamp{
  position:absolute;right:-6px;top:-24px;z-index:2;
  width:112px;height:112px;pointer-events:none;
  border-radius:50%;border:var(--border-w) solid var(--ink);
  background:#fff;overflow:hidden;
  transform:rotate(-8deg);
}
.rm .stamp{transform:rotate(-8deg)!important}
@media (min-width:900px){ .stamp{width:190px;height:190px;right:-24px;top:-56px} }
.stamp img{width:100%;height:100%;display:block;transform:scale(1.3)}

.btn-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px;align-items:center}

/* -------------------------------------------------------------- knoppen --- */

/* Twee losse vlakken in plaats van een box-shadow: het knopvlak (::before) en de
   slagschaduw (::after). Bij indrukken schuift de knop 3px en compenseert de
   schaduw met 1px, waardoor die op zijn plek blijft liggen en de kier van 4px naar
   1px krimpt. Zo wordt alleen `translate` geanimeerd, nooit box-shadow.          */
.btn{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:12px 26px;
  font-family:var(--font-body);font-weight:600;font-size:1rem;
  letter-spacing:.01em;text-decoration:none;cursor:pointer;
  --btn-face:var(--ink);--btn-edge:var(--ink);--btn-shade:var(--mint);
  background:transparent;color:#fff;
  border:var(--border-w) solid transparent;
  border-radius:0;
  transition:translate .16s var(--ease),color .16s var(--ease);
}
.btn::before,.btn::after{
  content:"";position:absolute;inset:calc(-1 * var(--border-w));pointer-events:none;
}
.btn::before{z-index:-1;background:var(--btn-face);border:var(--border-w) solid var(--btn-edge)}
.btn::after{
  z-index:-2;background:var(--btn-shade);
  translate:4px 4px;transition:translate .16s var(--ease);
}
.btn:hover,.btn:focus-visible{translate:3px 3px}
.btn:hover::after,.btn:focus-visible::after{translate:1px 1px}
.btn:active{translate:4px 4px}
.btn:active::after{translate:0 0}
.btn--sm{min-height:44px;padding:8px 18px;font-size:.9375rem}
.btn--full{width:100%}
.btn--mint{--btn-face:var(--mint);--btn-edge:var(--mint);--btn-shade:#fff;color:var(--ink)}
.btn--ghost{--btn-face:transparent;--btn-edge:var(--ink);color:var(--ink)}

.block--mint .btn,.hero .btn,.mobile-nav .btn{--btn-shade:#fff}
.hero .btn--ghost,.block--mint .btn--ghost{color:var(--ink)}
.block--deep .btn{--btn-face:var(--mint);--btn-edge:var(--mint);--btn-shade:#fff;color:var(--ink)}

.textlink{
  font-weight:600;text-decoration:underline;
  text-decoration-thickness:3px;text-underline-offset:4px;
  text-decoration-color:var(--mint);
}
.textlink:hover{text-decoration-color:currentColor}
.block--deep .textlink,.block--ink .textlink{text-decoration-color:var(--mint)}

/* --------------------------------------------------------------- badges --- */

.badge{
  display:inline-block;
  background:var(--yellow);color:var(--ink);
  border:var(--border-w) solid var(--ink);
  border-radius:999px;
  padding:6px 14px;
  font-family:var(--font-body);font-weight:600;font-size:var(--small);
  letter-spacing:var(--ls-caps);text-transform:uppercase;line-height:1.2;
  transform:rotate(-3deg);
}
.badge--coral{background:var(--coral)}
.badge--block{
  display:block;border-radius:0;transform:none;
  text-transform:none;letter-spacing:0;font-size:.9375rem;
  padding:12px 16px;line-height:1.4;
}

/* --------------------------------------------------------------- lijsten --- */

.checklist{list-style:none;display:grid;gap:14px}
.checklist li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}

/* lijsten met een eigen mint vierkantje (bron heeft daar geen teken) */
.checklist--sq li::before{
  content:"";flex:0 0 auto;width:9px;height:9px;
  background:var(--mint);margin-top:.6em;
}
.block--mint .checklist--sq li::before{background:var(--ink)}
.block--deep .checklist--sq li::before{background:var(--mint)}

/* lijsten waar het opsommingsteken in de brontekst staat: niet dubbel zetten */
.checklist__b{
  flex:0 0 auto;font-size:.85em;line-height:1.8;color:var(--mint);
  font-family:var(--font-head);font-weight:800;
}
.block--mint .checklist__b,.hero .checklist__b{color:var(--ink)}
.block--white .checklist__b{color:var(--ink)}   /* mint haalt 1,72:1 op wit */
.block--deep .checklist__b{color:var(--mint)}

.q-list{list-style:none;display:grid;gap:12px;margin-bottom:28px}
.q-list li{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.05rem,2.2vw,1.375rem);line-height:1.3;letter-spacing:-.01em;
  display:flex;
}
.q-dash{flex:0 0 auto}

/* twee kolommen voor de bevalcursus-kaart met 14 punten */
@media (min-width:640px){
  .checklist--two{grid-template-columns:1fr 1fr;column-gap:32px}
}

/* ---------------------------------------------------------- dienstcirkels --- */

.services{
  list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:36px 20px;
}
@media (min-width:900px){ .services{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 28px} }

.service-card{text-align:center}
/* de kanteling zit op de link, niet op de cirkel: daardoor staan de cirkel en het
   label werkelijk op verschillende diepte in dezelfde 3D-ruimte */
.service-card__link{
  display:block;text-decoration:none;color:inherit;
  --ring:var(--mint);
  transform:perspective(760px);
  transform-style:preserve-3d;
  transition:transform .45s var(--ease);
}
.block--mint .service-card__link{--ring:#fff}
.service-card__media{
  position:relative;display:block;width:min(150px,40vw);aspect-ratio:1;margin:0 auto;
  border-radius:50%;border:var(--border-w) solid var(--ink);
  background:#fff;
  transform:translateZ(26px);
  transition:transform .45s var(--ease);
}
@media (min-width:900px){ .service-card__media{width:200px} }
.service-card__media img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}
/* de mintring is een echt vlak dat opschaalt, geen box-shadow die van maat verandert */
.service-card__media::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:8px solid var(--ring);
  opacity:0;scale:.88;
  transition:opacity .32s var(--ease),scale .32s var(--ease);
}
.service-card__link:hover .service-card__media::after,
.service-card__link:focus-visible .service-card__media::after{opacity:1;scale:1}
.service-card__link:focus-visible{transform:perspective(760px) translateZ(18px) rotateX(-4deg)}
.service-card__link:active{scale:.97}
.service-card__label{
  display:block;
  transform:translateZ(8px);
  font-family:var(--font-head);font-weight:700;
  font-size:min(1.125rem,calc(100cqi / var(--wfit,4)));
  line-height:1.2;letter-spacing:-.01em;
  margin-top:16px;
}
@media (min-width:900px){
  .service-card__label{font-size:min(1.25rem,calc(100cqi / var(--wfit,4)))}
}
.service-card__more{
  display:inline-block;margin-top:8px;font-size:var(--small);font-weight:600;
  letter-spacing:var(--ls-caps);text-transform:uppercase;
}

/* ---------------------------------------------------------------- beeld --- */

/* de foto's zitten 12% ruimer in hun kader; binnen dat kader schuiven ze mee met
   het scrollen. Het kader zelf verandert niet van maat, dus CLS blijft 0 */
.shot{position:relative;display:block;margin:0;overflow:hidden}
.shot img{display:block;width:100%;height:100%;object-fit:cover;scale:1.12}
.rm .shot img,.rm .portrait__img img{scale:1}

.shot--rect{border:var(--border-w) solid var(--ink);aspect-ratio:4/3}
.shot--frame{border:8px solid var(--ink);aspect-ratio:4/5}
.shot--tall{aspect-ratio:3/4}
.shot--wide{aspect-ratio:16/10}
.shot--plain{border:0}

.shot--circle{
  border-radius:50%;border:var(--border-w) solid var(--ink);
  overflow:hidden;aspect-ratio:1;
  width:min(280px,78vw);margin-inline:auto;
}

.portrait{position:relative;isolation:isolate}
.portrait__img{
  position:relative;z-index:1;display:block;overflow:hidden;
  border:var(--border-w) solid var(--ink);
  height:clamp(380px,62vw,600px);
}
.portrait__img img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;scale:1.12;
}
.portrait::after{
  content:"";position:absolute;z-index:0;
  left:24px;top:24px;right:-24px;bottom:-24px;
  background:var(--mint);border:var(--border-w) solid var(--ink);
  /* --pv wordt door script.js per beeld geschreven; het vlak schuift de andere
     kant op dan de foto erin, zodat de twee zichtbaar langs elkaar glijden */
  transform:translate3d(0,var(--pv,0px),0);
}
@media (min-width:900px){
  .portrait{margin-right:40px}
  .portrait::after{left:40px;top:40px;right:-40px;bottom:-40px}
}
.block--mint .portrait::after{background:#fff}

.caption{
  font-size:var(--small);letter-spacing:var(--ls-caps);
  text-transform:uppercase;font-weight:600;margin-top:12px;
}

/* ---------------------------------------------------------- prijskaarten --- */

/* de kaarten staan op één toneel: de kanteling zit per kaart in de transform zelf,
   dus elke kaart heeft zijn eigen vluchtpunt */
.price-grid{display:grid;gap:28px;align-items:stretch}
@media (min-width:768px){ .price-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px} }
@media (min-width:1100px){ .price-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.price-grid--one{grid-template-columns:1fr;max-width:760px;margin-inline:auto}
@media (min-width:768px){ .price-grid--one{grid-template-columns:1fr} }

/* Drie echte lagen in plaats van een vlakke kaart met een box-shadow:
     ::after  de inktschaduw, 25px NAAR ACHTEREN in de ruimte
     ::before het witte kaartvlak met de inktrand
     inhoud   op z=0, de prijs en de knop komen daar nog eens bovenuit
   Doordat de schaduw echt achter de kaart hangt, verschuift hij vanzelf mee met de
   kanteling: de lichtval klopt zonder dat er ooit een box-shadow wordt geanimeerd. */
.price-card{
  background:transparent;color:var(--ink);
  border:0;border-radius:var(--radius-card);
  box-shadow:none;
  padding:28px;
  display:flex;flex-direction:column;
  position:relative;
  transform:perspective(1200px);
  transform-style:preserve-3d;
  transition:transform .45s var(--ease);
}
.price-card::before,.price-card::after{
  content:"";position:absolute;inset:calc(-1 * var(--border-w));pointer-events:none;
}
.price-card::before{
  background:#fff;border:var(--border-w) solid var(--ink);
  transform:translateZ(-1px);
}
.price-card::after{
  z-index:-1;                       /* vangnet voor de platte weergave */
  background:var(--ink);
  transform:translateZ(-25px) translate(7px,7px) scale(1.021);
}
.price-card:focus-within{transform:perspective(1200px) translateZ(14px) rotateX(-2.4deg)}
.price-card > *{position:relative}
.price-card__title{
  transform:translateZ(14px);
  font-family:var(--font-head);font-weight:700;
  font-size:min(1.5rem,calc(100cqi / var(--wfit,4)));
  line-height:1.15;letter-spacing:-.02em;margin:0 0 18px;
}
.price-card__pricewrap{position:relative;margin-bottom:18px;transform:translateZ(30px)}
.price-card__pricewrap--action{padding-top:30px}

.price-card__price{
  font-family:var(--font-head);font-weight:800;
  font-size:min(var(--price),calc(100cqi / var(--wfit,4)));
  line-height:.95;letter-spacing:-.04em;
  color:var(--ink);margin:0;
}
.ul-mint{white-space:nowrap;
  display:inline-block;
  background-image:linear-gradient(var(--mint),var(--mint));
  background-repeat:no-repeat;
  background-size:100% 14px;
  background-position:0 100%;
  padding-bottom:2px;
}
.price-card__price--text{
  font-size:clamp(1.375rem,3.4vw,1.75rem);line-height:1.25;font-weight:700;
}
.price-card__price--text .ul-mint{white-space:normal;background-size:100% 10px}
.price-card__unit{margin:12px 0 0}
.price-card__note{margin:14px 0 0}

/* kaart zonder prijs: het cijferveld wordt een mintband over de volle kaartbreedte */
.price-card__stamp{
  background:var(--mint);
  border-bottom:var(--border-w) solid var(--ink);
  margin:-28px -28px 22px;padding:26px 28px;
  display:flex;align-items:center;min-height:150px;
  transform:translateZ(16px);
}
/* Op een mintblok viel die band volledig weg: mint op mint. De bovenste 150px
   van de Workshop-kaart leek dan geen deel van de kaart, terwijl elke meting
   (aanwezig, opacity 1, juiste hoogte) zei dat het goed stond. Alleen een
   screenshot liet het zien. Op mint wordt de band daarom diepgroen met
   minttekst: 7,11:1, en de kaart weegt weer even zwaar als de andere vier. */
.block--mint .price-card__stamp{background:var(--deep)}
.block--mint .price-card__stamp h3{color:var(--mint)}
.price-card__stamp h3{
  font-size:min(clamp(1.5rem,4vw,2.1rem),calc(100cqi / var(--wfit,4)));
  font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink);
}

.sticker{
  position:absolute;top:0;left:-10px;z-index:2;
  transform-origin:70% 100%;
  display:inline-block;
  background:var(--coral);color:var(--ink);
  border:var(--border-w) solid var(--ink);
  padding:5px 12px;
  font-family:var(--font-body);font-weight:600;font-size:.9375rem;
  letter-spacing:.04em;line-height:1.2;
  transform:rotate(-4deg);
  text-decoration-thickness:2px;
}

.price-card__text{margin:0 0 20px;font-size:1.0625rem;line-height:1.6}
.price-card .checklist{margin:0 0 26px;font-size:1rem}
.price-card .btn{margin-top:auto;width:100%;transform:translateZ(22px)}

/* ----------------------------------------------------------- productgrid --- */

.product-grid{
  list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
}
@media (min-width:768px){ .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} }
@media (min-width:1100px){ .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* zelfde laagopbouw als de prijskaart, maar de schaduw komt pas op bij aanwijzen */
.product-card{
  background:transparent;color:var(--ink);
  border:0;
  display:flex;flex-direction:column;
  position:relative;
  transform:perspective(900px);
  transform-style:preserve-3d;
  transition:transform .45s var(--ease);
}
.product-card::before,.product-card::after{
  content:"";position:absolute;inset:calc(-1 * var(--border-w));pointer-events:none;
}
.product-card::before{
  background:#fff;border:var(--border-w) solid var(--ink);
  transform:translateZ(-1px);
}
/* De harde slagschaduw stond eerst op opacity 0 en kwam alleen bij aanwijzen.
   Dat was het enige effect op de hele site dat uitsluitend achter de muis zat:
   een productkaart bevat geen link en geen knop, dus met een toetsenbord of op
   een aanraakscherm kwam je er nooit bij, en de elf kaarten bleven plat terwijl
   de prijskaarten wél hun schaduw dragen. De schaduw staat nu altijd aan en
   wordt bij aanwijzen dieper. Niets zit meer alleen achter hover. */
.product-card::after{
  z-index:-1;
  background:var(--ink);opacity:1;
  transform:translateZ(-20px) translate(5px,5px) scale(1.018);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.product-card:hover::after,.product-card:focus-within::after{
  transform:translateZ(-20px) translate(9px,9px) scale(1.028);
}
.product-card > *{position:relative}
.product-card__media{
  aspect-ratio:4/5;background:var(--mat);
  display:grid;place-items:center;overflow:hidden;
  border-bottom:var(--border-w) solid var(--ink);
}
/* object-fit blijft contain met de getinte mat eronder: de verhoudingen lopen van
   0,562 tot 1,820 en cover zou tot 54% wegsnijden. Alleen een lichte vergroting. */
.product-card__media img{
  width:100%;height:100%;object-fit:contain;padding:10px;
  transition:scale .4s var(--ease);
}
.product-card:hover .product-card__media img{scale:1.05}
.rm .product-card:hover .product-card__media img{scale:1}
.product-card__body{
  padding:16px;display:flex;flex-direction:column;gap:10px;flex:1;
  transform:translateZ(12px);
}
.product-card__title{
  font-family:var(--font-head);font-weight:700;
  font-size:min(1rem,calc(100cqi / var(--wfit,4)));line-height:1.25;
}
.product-card__price{
  font-family:var(--font-head);font-weight:800;font-size:1.375rem;letter-spacing:-.03em;
}
.product-card__text{font-size:.875rem;line-height:1.5;color:var(--muted);margin:0}

/* -------------------------------------------------------------- marquee --- */

.marquee{
  background:var(--ink);color:var(--mint);
  padding-block:20px;overflow:hidden;
  border-block:var(--border-w) solid var(--ink);
}
/* De strook loopt niet meer op een timer. Hij verschuift met de scrollpositie:
   niets op deze site beweegt uit zichzelf, alles reageert op de bezoeker. */
.marquee__track{
  display:flex;width:max-content;
  will-change:transform;
}
.marquee__item{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(1rem,2.2vw,1.5rem);letter-spacing:-.01em;
  white-space:nowrap;padding-right:48px;
}


.regio-strip{
  background:var(--ink);color:var(--mint);
  border:var(--border-w) solid var(--ink);
  padding:clamp(24px,4vw,40px);
}
.regio-strip p{
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.0625rem,2.4vw,1.5rem);line-height:1.4;letter-spacing:-.015em;
  margin:0;
}

/* -------------------------------------------------------------- formulier --- */

.contact-layout{display:grid;gap:40px}
@media (min-width:900px){ .contact-layout{grid-template-columns:1.15fr .85fr;gap:64px} }

.contact-form{
  background:#fff;border:var(--border-w) solid var(--ink);
  box-shadow:var(--shadow-hard);
  padding:clamp(20px,4vw,32px);
  display:grid;gap:20px;
}
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;position:relative}
.field label{
  font-weight:600;font-size:1rem;
  justify-self:start;position:relative;isolation:isolate;
}
/* het mintvlak achter het label schuift in zodra het veld focus krijgt */
.field label::before{
  content:"";position:absolute;inset:-3px -8px;z-index:-1;
  background:var(--mint);
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.field:focus-within label::before{transform:scaleX(1)}
.field .opt{font-weight:400;color:var(--muted);font-size:.9375rem}
.field input,.field textarea{
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  color:var(--ink);background:#fff;
  border:var(--border-w) solid var(--ink);border-radius:0;
  padding:12px 44px 12px 14px;min-height:48px;width:100%;
}
/* Het teken naast het veld is de niet-kleurgebonden aanduiding (WCAG 1.4.1);
   de foutzin eronder is de tekstuele beschrijving die WCAG 3.3.1 vraagt.

   Het teken staat NIET absoluut ten opzichte van .field. Dat ging mis zodra de
   foutregel eronder verscheen: het vak werd hoger en het vinkje zakte mee uit
   het invoerveld. Het teken deelt nu de rasterrij met het invoerveld, dus het
   blijft staan waar het hoort, met of zonder foutregel eronder. */
   Let op: alle vier de kinderen krijgen een expliciete rij. Zonder dat schoof
   het invoerveld naar rij 3, omdat een raster eerst de expliciet geplaatste
   items neerzet en de automatische plaatsing daarna om de bezette cel heen
   loopt. Het kruisje stond dan bóven het invoerveld in plaats van erin. */
.field > label{grid-row:1;grid-column:1}
.field > input,.field > textarea{grid-row:2;grid-column:1}
.field__mark{
  grid-row:2;grid-column:1;
  justify-self:end;align-self:center;
  margin-right:12px;
  width:24px;height:24px;
  display:grid;place-items:center;pointer-events:none;
  position:relative;z-index:2;
  opacity:0;scale:.6;
  transition:opacity .22s var(--ease),scale .22s var(--ease);
}
.field--area .field__mark{align-self:start;margin-top:12px}
.field__mark svg{width:22px;height:22px;display:none}
.field.is-goed .field__mark,.field.is-fout .field__mark{opacity:1;scale:1}
.field.is-goed .field__mark .mark-ok{display:block;color:var(--ink)}
.field.is-fout .field__mark .mark-nee{display:block;color:var(--ink)}
.field.is-goed .field__mark{background:var(--mint)}
.field.is-fout .field__mark{background:var(--coral)}
.field.is-fout input,.field.is-fout textarea{border-color:var(--coral);border-width:3px}
/* de koraalvlag links naast een fout veld */
.field::after{
  content:"";position:absolute;left:-16px;top:26px;bottom:0;width:6px;
  background:var(--coral);
  transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--ease);
}
.field.is-fout::after{transform:scaleY(1)}
@media (max-width:520px){ .field::after{left:-10px;width:4px} }

/* De foutregel: een koraal sticker met inktrand en inkt-tekst, dezelfde
   vormtaal als de badges. Koraal haalt 2,58:1 op wit en kan zichzelf niet
   begrenzen, vandaar de 2px inktrand (tokens.md, harde regel 2 van deze
   richting). Inkt op koraal is 6,60:1 en dus AA.
   De zin komt letterlijk uit BOUWOPDRACHT paragraaf 1 en verschijnt pas nadat
   de bezoeker zelf een fout heeft gemaakt, nooit bij het laden. */
.field__fout{
  grid-row:3;
  margin:0;
  background:var(--coral);color:var(--ink);
  border:var(--border-w) solid var(--ink);
  padding:8px 12px;
  font-size:.9375rem;line-height:1.4;font-weight:600;
  justify-self:start;
}
.field__fout[hidden]{display:none}
.field textarea{min-height:132px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.form-note{
  margin:0;padding:12px 14px;
  background:var(--yellow);border:var(--border-w) solid var(--ink);
  font-size:.9375rem;line-height:1.45;
  opacity:0;translate:0 10px;
  transition:opacity .3s var(--ease),translate .3s var(--ease);
}
.form-note.is-zichtbaar{opacity:1;translate:0 0}
.rm .form-note{opacity:1!important;translate:none!important}

.contact-details{list-style:none;display:grid;gap:6px}
.contact-details a,.contact-details span{
  display:flex;align-items:center;gap:12px;min-height:48px;
  text-decoration:none;font-weight:600;font-size:1.0625rem;
}
.contact-details a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.contact-details svg{flex:0 0 auto;width:22px;height:22px}

/* ---------------------------------------------------------------- footer --- */

.site-footer{background:var(--ink);color:#fff;padding-block:clamp(48px,7vw,80px)}
.site-footer a{color:#fff}
.footer-grid{display:grid;gap:36px}
@media (min-width:768px){ .footer-grid{grid-template-columns:1.2fr 1fr 1fr} }
.footer__logo{display:flex;align-items:center;gap:12px;margin-bottom:16px;
  text-decoration:none;min-width:0;flex-wrap:wrap}
.footer__logo img{width:52px;height:52px;border-radius:50%;display:block;flex:0 0 auto}
.footer__logo span{font-family:var(--font-head);font-weight:800;
  font-size:clamp(1.0625rem,3.2vw,1.25rem);letter-spacing:-.02em;min-width:0}
.site-footer h2{
  font-family:var(--font-body);font-size:var(--small);font-weight:600;
  letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--mint);margin:0 0 14px;line-height:1.4;
}
.footer-list{list-style:none;display:grid;gap:2px}
.footer-list a{
  display:flex;align-items:center;min-height:44px;
  text-decoration:none;font-size:1rem;
}
.footer-list a:hover{color:var(--mint)}
.footer-social{display:flex;gap:12px;margin-top:18px}
.footer-social a{
  width:48px;height:48px;border-radius:50%;
  border:var(--border-w) solid var(--mint);color:var(--mint);
  display:inline-flex;align-items:center;justify-content:center;
}
.footer-social a:hover{background:var(--mint);color:var(--ink)}
.footer-bottom{
  margin-top:44px;padding-top:22px;border-top:var(--border-w) solid rgba(109,219,150,.35);
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;
  font-size:.9375rem;
}
.footer-bottom a{display:inline-flex;align-items:center;gap:8px;min-height:44px}

/* ----------------------------------------------------------- scroll reveal --- */

/* De reveal gebruikt de losse eigenschappen `translate` en `scale`, niet `transform`.
   Daardoor blijft `transform` vrij voor de parallax en de kanteling en botsen de
   twee nooit met elkaar.                                                          */
[data-rv]{
  opacity:0;translate:0 40px;
  transition:opacity .62s var(--ease),translate .62s var(--ease),scale .62s var(--ease);
  transition-delay:var(--rv-delay,0ms);
}
[data-rv].in{opacity:1;translate:none;scale:none}
/* De kaarten met echte 3D-lagen komen ZONDER opacity op. Reden: opacity kleiner
   dan 1 dwingt transform-style terug naar flat, en dan klapt de schaduw voor het
   kaartvlak. Ze schuiven en schalen dus alleen; dat past ook beter bij de harde
   randen van deze richting.                                                      */
.price-card[data-rv],.product-card[data-rv],.service-card[data-rv],
.shot[data-rv],.portrait[data-rv]{scale:.965}
.price-card[data-rv],.product-card[data-rv]{opacity:1;translate:0 46px}
.rm [data-rv]{opacity:1!important;translate:none!important;scale:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .marquee__track{transform:none!important}
  .hero__photo img,.shot img,.portrait__img img{scale:1!important}
  .service-card__link,.price-card,.product-card{transform:none!important}
  .service-card__media,.service-card__label,.price-card__title,
  .price-card__pricewrap,.price-card__stamp,.price-card .btn,
  .product-card__body{transform:none!important}
  .price-card::before,.product-card::before{transform:none!important}
  .price-card::after{transform:translate(6px,6px)!important}
  .product-card::after{transform:translate(5px,5px)!important}
  /* De vlakken blijven staan, ze bewegen alleen niet meer. Wie beweging uitzet
     hoort niet ook het ontwerp kwijt te raken: de cirkels en banden zijn decor,
     geen animatie. */
  .plane{transform:none!important}
  .portrait::after{transform:none!important}
  .scroll-progress{display:none}
}

/* ==========================================================================
   INTERACTIE — de vlakken, de cirkels en de diepte
   Groenvlak is de gedurfde van de zes en mag dat in beweging ook zijn. Grote
   vlakken schuiven bij het scrollen langs elkaar, cirkels hebben hun eigen
   snelheid en herhalen de ronde vorm van het logo, kaarten kantelen zichtbaar.
   Alles hieronder animeert uitsluitend transform, translate, scale of opacity.
   Geen enkel effect start uit zichzelf: er moet gescrold of aangewezen worden.
   ========================================================================== */

/* ------------------------------------------------------- decoratieve vlakken --
   Door JS in elke .block en .hero gezet, nooit in de HTML. Ze staan absoluut in
   een blok met overflow:clip, raken de layout dus niet en kunnen geen enkele
   layout shift veroorzaken. Elk vlak krijgt zijn eigen parallaxsnelheid.       */

.plane{
  position:absolute;z-index:0;pointer-events:none;
  transform:translate3d(0,0,0);
}
.plane--circle{
  border-radius:50%;
  width:min(58vw,640px);aspect-ratio:1;
}
.plane--band{
  left:-12vw;right:-12vw;
  height:clamp(150px,24vw,320px);
}

/* stand: even blokken spiegelen, zodat het ritme niet voorspelbaar wordt */
.plane--a{right:-14vw;top:-16%}
.plane--b{left:-16vw;bottom:-14%}
.block[data-vlak="2"] .plane--a{right:auto;left:-16vw;top:auto;bottom:-18%}
.block[data-vlak="2"] .plane--b{left:auto;right:-14vw;bottom:auto;top:-12%}

/* de tinten zijn zo gekozen dat de tekst er overheen kan lopen zonder onder
   4,5:1 te zakken. Nagemeten: ink op #E6F8EE 15,1:1, muted op #D6F2E2 6,1:1,
   ink op #7FE2A6 10,8:1, wit op #175038 9,4:1, mint op #175038 5,5:1.        */
.block--white .plane--circle{background:#E6F8EE}
.block--white .plane--band{background:#D6F2E2}
.block--mint  .plane--circle{background:#7FE2A6}
.block--mint  .plane--band{background:#5FCB88}
.block--deep  .plane--circle{background:#175038}
.block--deep  .plane--band{background:#0B3221}
.hero .plane--circle{background:#7FE2A6}
.hero .plane--band{background:#5FCB88}

/* --------------------------------------------------------- scrollvoortgang --
   Een mintlijn van 3px onderaan de inkt-header die met de scrollpositie
   meegroeit. Alleen scaleX, dus geen enkele herberekening van de layout.      */

.scroll-progress{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--mint);
  transform:scaleX(0);transform-origin:left center;
  pointer-events:none;
}

/* ------------------------------------------------------------- kanteling ----
   De kanteling zelf wordt per frame door JS geschreven. Deze klasse zet de
   overgang uit zolang de muis het element stuurt, zodat er geen dubbele
   animatie ontstaat.                                                          */

.is-kantelt{transition:none!important}

/* op een aanraakscherm geen kanteling maar een ingedrukt gevoel */
@media (hover:none){
  .price-card:active,.product-card:active{scale:.985}
  .service-card__link:active{scale:.95}
}

/* ------------------------------------------------------- veld met een fout --
   De koraalvlag, het teken en de rand zijn de zichtbare aanduiding; de uitleg
   staat in een sr-only tekst die via aria-describedby aan het veld hangt. Er
   komt daardoor geen enkele zichtbare tekst bij op de pagina.                  */

.contact-form{position:relative}

/* --------------------------------------------------------- toetsenbord ------
   Elk effect dat op :hover zit, staat ook op :focus-visible of :focus-within.
   Voor de kaarten gebeurt dat via de knop erin, want de kaart zelf krijgt geen
   focus.                                                                      */

.product-card:focus-within{transform:perspective(900px) translateZ(10px) rotateX(-2deg)}