/* ============================================================================
   REFORMR RECREATION — design tokens
   Every value here was measured from the live reference, not invented.
   To rebrand later: change this :root block and the images. Nothing else.
   ========================================================================== */
:root{
  /* colour */
  --bg:#0a0a0a;
  --surface:#121212;
  --surface-2:#1a1a1a;
  /* --- goud ---------------------------------------------------------------
     Eén gradient voor alles. Wil je een andere goudtint: pas --grad-gold
     en --accent aan, de rest volgt vanzelf.                                */
  --gold-deep:#8a6a1c;
  --gold:#d4af37;
  --gold-light:#f7e7a3;
  --gold-pale:#fbf5b7;
  --accent:var(--gold);
  --grad-gold:linear-gradient(135deg,
      #8a6a1c 0%, #b8912b 14%, #d4af37 30%,
      #f7e7a3 46%, #fbf5b7 52%, #f7e7a3 58%,
      #d4af37 74%, #a67c1a 88%, #8a6a1c 100%);
  --gold-glow:0 10px 30px rgba(212,175,55,.18);
  --on-gold:#100c02;              /* donkere tekst op goud = luxe contrast */

  --text:#ffffff;
  --muted:#bfbfbf;
  --border:rgba(255,255,255,.08);
  --border-gold:rgba(212,175,55,.22);

  /* layout */
  --container:1145px;
  --pad-x:60px;
  --pad-y:100px;
  --hero-pad-top:200px;

  /* radius */
  --r-card:24px;
  --r-btn:12px;
  --r-pill:999px;

  /* gap scale (observed) */
  --g-16:16px; --g-20:20px; --g-24:24px; --g-28:28px; --g-32:32px; --g-48:48px; --g-100:100px;

  /* type */
  --font:"Manrope",system-ui,-apple-system,sans-serif;
  --font-hand:"Covered By Your Grace",cursive;

  --fs-h1:72px;  --lh-h1:79.2px; --ls-h1:-0.72px;
  --fs-h2:60px;  --lh-h2:66px;   --ls-h2:-0.6px;
  --fs-h3:52px;  --lh-h3:62.4px; --ls-h3:-0.52px;
  --fs-h4:40px;  --lh-h4:52px;   --ls-h4:-0.8px;
  --fs-lead:20px;--lh-lead:34px; --ls-lead:0.2px;
  --fs-body:16px;--lh-body:26px;
  --fs-btn:14px; --lh-btn:21px;  --ls-btn:1.2px;
  --fs-eyebrow:12px;--lh-eyebrow:18px;--ls-eyebrow:1.6px;

  --btn-h:52px;
  --ease:cubic-bezier(.44,0,.22,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
body.is-locked{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- type ---------- */
h1,.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);font-weight:800;text-transform:uppercase}
h2,.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:800;text-transform:uppercase}
h3,.h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:800;text-transform:uppercase}
h4,.h4{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);font-weight:800;text-transform:uppercase}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-weight:500;color:var(--muted)}
/* goud verloop in de tekst zelf */
.accent{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
/* stats-cijfers krijgen hetzelfde verloop */
.stat h4{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

.eyebrow{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);
  font-weight:700;text-transform:uppercase;color:var(--muted)}

/* Sectielabels krijgen een kadertje, zoals in de referentie. Geldt alleen
   voor labels boven een sectiekop en bij de trainer — niet voor de badge in
   de hero of de categorie op een blogkaart. */
.headline > .eyebrow,
.headline__left > .eyebrow,
.trainer__body > .eyebrow{
  display:inline-flex;align-items:center;align-self:center;
  padding:9px 16px;border-radius:10px;
  background:var(--surface);
  border:1px solid var(--border-gold);
  /* lichte gouden gloed zodat het label loskomt van de donkere achtergrond */
  box-shadow:0 0 0 1px rgba(212,175,55,.06),
             0 0 16px rgba(212,175,55,.16),
             0 0 34px rgba(212,175,55,.08)}
.headline__left > .eyebrow,
.trainer__body > .eyebrow{align-self:flex-start}

/* ---------- layout ---------- */
.section{padding:var(--pad-y) var(--pad-x);display:flex;flex-direction:column;
  align-items:center;gap:var(--g-32)}
.container{width:100%;max-width:var(--container);margin-inline:auto}
.headline{display:flex;flex-direction:column;align-items:center;gap:var(--g-28);text-align:center;
  width:100%;max-width:var(--container)}
.headline .lead{max-width:640px}

/* ---------- verlichte kop -------------------------------------------------
   Verticaal verloop over de letters: bovenaan gedempt, onderaan helder wit.
   Zet .h2--lit op een kop om dit elders te hergebruiken.                  */
.headline--lit{position:relative}

/* gouden badge boven een sectiekop, zelfde behandeling als de icoontjes
   in de probleem-kaarten: donkere tekening op de gouden gradient */
.section-icon{width:64px;height:64px;border-radius:var(--r-pill);flex:0 0 auto;
  background:var(--grad-gold);box-shadow:var(--gold-glow);color:var(--on-gold);
  display:flex;align-items:center;justify-content:center;
  animation:icon-bob 3.6s ease-in-out infinite}
.section-icon svg{width:38px;height:38px;fill:currentColor}
.h2--lit{background:linear-gradient(180deg,
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.78) 38%, #ffffff 78%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--btn-h);padding:16px 20px;border-radius:var(--r-btn);
  font-size:var(--fs-btn);line-height:var(--lh-btn);letter-spacing:var(--ls-btn);
  font-weight:800;text-transform:uppercase;color:var(--text);
  background:var(--surface-2);position:relative;
  transition:transform .35s var(--ease),background .35s var(--ease)}
/* Halo die de knopvorm volgt: fel tegen de rand, uitgedoofd binnen ~60px.
   Bewust géén losse ovaal — die leest als een vlek achter de knop. */
.btn--accent{background:var(--grad-gold);background-size:200% 100%;background-position:0% 50%;
  color:var(--on-gold);
  box-shadow:
    0 0 22px 2px rgba(212,175,55,.55),
    0 0 48px 10px rgba(212,175,55,.32),
    0 0 96px 26px rgba(212,175,55,.16);
  transition:transform .35s var(--ease),background-position .8s var(--ease),box-shadow .35s var(--ease)}
.btn--accent:hover{background-position:100% 50%;
  box-shadow:
    0 0 26px 3px rgba(212,175,55,.7),
    0 0 60px 14px rgba(212,175,55,.4),
    0 0 120px 32px rgba(212,175,55,.2)}
.btn:hover{transform:translateY(-2px)}
/* neutrale knop krijgt een dunne gouden rand */
.btn:not(.btn--accent){border:1px solid var(--border-gold)}
.btn--full{width:100%}
/* label slide-swap on hover, as in the reference */
.btn__inner{position:relative;display:block;height:var(--lh-btn);overflow:hidden}
.btn__label{display:block;transition:transform .4s var(--ease)}
.btn__label--b{position:absolute;left:0;right:0;top:0;transform:translateY(100%)}
.btn:hover .btn__label--a{transform:translateY(-100%)}
.btn:hover .btn__label--b{transform:translateY(0)}

/* ---------- availability badge ---------- */
.badge{display:inline-flex;align-items:center;gap:8px}
.badge__dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--gold);
  box-shadow:0 0 0 0 rgba(212,175,55,.7);animation:pulse 2.4s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 7px rgba(212,175,55,0)}
  100%{box-shadow:0 0 0 0 rgba(212,175,55,0)}
}

/* ---------- header ---------- */
.header{position:fixed;top:20px;left:0;right:0;z-index:60;padding:0 var(--pad-x);
  transition:transform .45s var(--ease)}
.header.is-hidden{transform:translateY(-140%)}
.header__bar{max-width:var(--container);margin-inline:auto;height:53px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--g-24)}
/* min-height maakt het aanraakvlak 44px zonder het logo te verplaatsen */
.header__logo{display:flex;align-items:center;min-height:44px}
.header__logo img{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:var(--fs-btn);line-height:var(--lh-btn);letter-spacing:var(--ls-btn);
  font-weight:800;text-transform:uppercase;color:var(--muted);transition:color .3s var(--ease)}
.nav a:hover{color:var(--text)}
/* logo + menu links, socials + CTA rechts — geen pil eromheen */
.header__left{display:flex;align-items:center;gap:40px}
.header__right{display:flex;align-items:center;gap:12px}

/* social-icoon: gouden vlak met donkere tekening, zoals de knoppen */
.social{width:40px;height:40px;border-radius:10px;flex:0 0 auto;
  background:var(--grad-gold);color:var(--on-gold);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--gold-glow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.social:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(212,175,55,.34)}
.social svg{width:20px;height:20px}
/* tikvlak op 44px zonder het zichtbare vierkantje te vergroten */
.social{position:relative}
.social::after{content:"";position:absolute;inset:-4px;border-radius:inherit}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-btn);
  background:var(--surface-2);align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:var(--text);position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;
  background:var(--text);transition:.3s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.is-navopen .burger span{background:transparent}
.is-navopen .burger span::before{top:0;transform:rotate(45deg)}
.is-navopen .burger span::after{top:0;transform:rotate(-45deg)}

.mobilenav{position:fixed;inset:0;z-index:55;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;gap:var(--g-24);
  padding:0 var(--pad-x);opacity:0;visibility:hidden;transition:.4s var(--ease)}
.mobilenav.is-open{opacity:1;visibility:visible}
.mobilenav a{font-size:40px;line-height:52px;font-weight:800;text-transform:uppercase}

/* ---------- hero ---------- */
.hero{position:relative;padding:var(--hero-pad-top) var(--pad-x) var(--pad-y);
  min-height:904px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;background:var(--bg)}
.hero__bg video,.hero__bg img,.hero__bg .ph{width:100%;height:100%;object-fit:cover;
  object-position:50% 40%}
/* kleurbehandeling: donker en licht ontzadigd, zoals de referentie */
.hero__poster,.hero__video{position:absolute;inset:0;
  filter:saturate(.72) contrast(1.06) brightness(.82)}
.hero__video{opacity:0;transition:opacity .9s var(--ease)}
.hero__video.is-ready{opacity:1}
.hero__poster{transition:opacity .9s var(--ease)}
.hero__poster.is-faded{opacity:0}

/* donkere scrim + subtiele gouden gloed over de video */
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(60% 45% at 50% 38%,rgba(212,175,55,.10) 0%,rgba(212,175,55,0) 70%),
    radial-gradient(120% 90% at 50% 45%,rgba(10,10,10,.5) 0%,rgba(10,10,10,.85) 55%,var(--bg) 100%)}
/* zachte bloom onder de hero-knop; de knop heeft zelf al zijn halo, dus
   deze blijft bewust subtiel */
.hero__glow{position:absolute;z-index:1;left:50%;bottom:20%;transform:translateX(-50%);
  width:min(560px,86%);height:150px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
      rgba(212,175,55,.22) 0%, rgba(212,175,55,.08) 46%, rgba(212,175,55,0) 74%);
  filter:blur(44px)}

.hero__content{position:relative;z-index:2;width:100%;max-width:var(--container);
  display:flex;flex-direction:column;align-items:center;gap:var(--g-100)}
.hero__headline{display:flex;flex-direction:column;align-items:center;gap:var(--g-32)}
/* 940 en niet 811: de nieuwe kop heeft 903px nodig om per zin op een regel
   te passen. Past ruim binnen de container van 1145px. */
.hero__text{max-width:940px;display:flex;flex-direction:column;align-items:center;gap:var(--g-16);text-align:center}
.hero__title{display:flex;flex-direction:column;align-items:center}
/* Elke regel breekt zichzelf gelijkmatig af (text-wrap:balance) in plaats
   van tussen losse flexitems, zodat er nooit een regel met een enkel
   woord overblijft. */
.hero__regel{display:block;text-wrap:balance}
.hero__regel .accent{margin-inline:.14em}

.authority{display:flex;align-items:center;gap:18px}
/* lauwerkransen links en rechts van de beoordeling */
.laurel{display:block;color:var(--gold);flex:0 0 auto}
.laurel svg{width:34px;height:52px;display:block;fill:currentColor;
  filter:drop-shadow(0 2px 8px rgba(212,175,55,.35))}
.laurel--right svg{transform:scaleX(-1)}
.authority__meta{display:flex;flex-direction:column;gap:8px;align-items:center}
.stars{display:flex;gap:3.44px;justify-content:center}
.stars svg{width:22px;height:22px;fill:var(--gold);
  filter:drop-shadow(0 0 10px rgba(212,175,55,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.5))}

/* ---------- results / transformations ---------- */
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tab{padding:10px 18px;border-radius:var(--r-pill);background:var(--surface-2);
  font-size:var(--fs-btn);letter-spacing:var(--ls-btn);font-weight:800;text-transform:uppercase;
  color:var(--muted);transition:.3s var(--ease)}
.tab{border:1px solid transparent}
.tab[aria-selected="true"]{background:var(--grad-gold);color:var(--on-gold);
  box-shadow:var(--gold-glow);border-color:var(--border-gold)}
/* tekstkaart links, foto rechts */
.transform{display:grid;grid-template-columns:1fr 1fr;gap:var(--g-24);width:100%;
  align-items:stretch}
/* min-width:0 is nodig: zonder dat weigeren grid-kinderen te krimpen onder hun
   eigen inhoud en loopt de pagina horizontaal over */
.transform > *{min-width:0}
.transform__card{background:var(--surface);border-radius:var(--r-card);padding:40px;
  display:flex;flex-direction:column;justify-content:center;gap:var(--g-24)}
/* kop, citaat en toelichting binnen de transformatiekaart */
.transform__title{font-size:26px;line-height:34px;letter-spacing:-.2px;font-weight:800;
  text-transform:uppercase;color:var(--text)}
.transform__quote{margin:0;font-size:19px;line-height:32px;font-weight:600;
  color:var(--gold-light);border-left:2px solid var(--border-gold);padding-left:18px}
.transform__body{font-size:16px;line-height:27px;color:var(--muted)}
.transform__meta{display:flex;align-items:center;gap:10px;color:var(--muted);
  font-size:var(--fs-btn);letter-spacing:var(--ls-btn);font-weight:800;text-transform:uppercase}
/* geen aspect-ratio hier: die zou samen met stretch de breedte uit de rijhoogte
   afleiden. De foto rekt mee met de kaart en snijdt bij via object-fit. */
.transform__photo{border-radius:var(--r-card);overflow:hidden;background:var(--surface);
  min-height:460px}
.transform__photo picture{display:block;width:100%;height:100%}
.transform__photo img{width:100%;height:100%;object-fit:cover}
.panel[hidden]{display:none}
.panel{display:flex;flex-direction:column;gap:var(--g-28);width:100%}

/* ---------- problem cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g-24);width:100%}
.problem{background:var(--surface);border-radius:var(--r-card);padding:40px 32px;
  display:flex;flex-direction:column;gap:var(--g-16);min-height:306px;
  align-items:center;text-align:center;justify-content:flex-start}
.problem h3{font-size:22px;line-height:30px;letter-spacing:-.2px;text-transform:none}
.problem p{color:var(--muted);font-size:15px;line-height:24px}

/* gouden gezichtje in een ronde badge, donkere tekening op goud.
   Formaat gelijk aan de roze badges van de referentie. */
.problem__icon{width:64px;height:64px;border-radius:var(--r-pill);flex:0 0 auto;
  background:var(--grad-gold);box-shadow:var(--gold-glow);color:var(--on-gold);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.problem__icon svg{width:44px;height:44px;fill:currentColor;overflow:visible}

/* De beweging. Elke badge wiegt, en het gezichtje erin doet zijn eigen ding:
   nee schudden, happen naar adem, en een traan die valt. */
@keyframes icon-bob{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-4px) scale(1.04)}
}
.problem__icon{animation:icon-bob 3.6s ease-in-out infinite}
.grid-3 .problem:nth-child(2) .problem__icon{animation-delay:-1.2s}
.grid-3 .problem:nth-child(3) .problem__icon{animation-delay:-2.4s}

@keyframes icon-shake{
  0%,62%,100%{transform:rotate(0)}
  68%{transform:rotate(-13deg)} 76%{transform:rotate(11deg)}
  84%{transform:rotate(-8deg)}  92%{transform:rotate(5deg)}
}
.icon--shake svg{transform-box:fill-box;transform-origin:center;
  animation:icon-shake 3.4s ease-in-out infinite}

@keyframes icon-gasp{
  0%,100%{transform:scale(1)}
  35%    {transform:scale(1.55)}
  70%    {transform:scale(.92)}
}
.icon--gasp .mouth{transform-box:fill-box;transform-origin:center;
  animation:icon-gasp 2s ease-in-out infinite}

@keyframes icon-tear{
  0%  {opacity:0;transform:translateY(-4px) scale(.5)}
  18% {opacity:1;transform:translateY(0) scale(1)}
  70% {opacity:1;transform:translateY(11px) scale(1.05)}
  100%{opacity:0;transform:translateY(17px) scale(.75)}
}
.icon--tear .drop{transform-box:fill-box;transform-origin:center;
  animation:icon-tear 2.6s ease-in infinite}

/* ---------- solution ---------- */
/* gouden gloed achter de sectie, zoals de rode gloed in de referentie */
#solution{position:relative;isolation:isolate;overflow:hidden}
#solution::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1480px,100%);height:88%;
  background:
    radial-gradient(ellipse 42% 52% at 8% 46%, rgba(212,175,55,.30) 0%, rgba(212,175,55,0) 70%),
    radial-gradient(ellipse 42% 52% at 92% 46%, rgba(212,175,55,.30) 0%, rgba(212,175,55,0) 70%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(212,175,55,.13) 0%, rgba(212,175,55,0) 72%);
  filter:blur(56px)}

/* tekstkaart links, foto rechts — zelfde opzet als de transformaties */
/* stretch: beide kolommen delen dezelfde rijhoogte. De tekstkaart bepaalt die
   hoogte (die heeft echte inhoud), de fotokolom vult hem op. Zie
   .solution__photo--pair: die heeft height:100% en min-height:0, waardoor de
   foto's géén eigen hoogte meer inbrengen. */
.solution{display:grid;grid-template-columns:2fr 1fr;gap:var(--g-24);width:100%;
  align-items:stretch}
/* zachte gouden rand rondom de kaarten zelf */
.solution__card,.solution__photo{box-shadow:0 0 0 1px var(--border-gold),
  0 24px 70px rgba(212,175,55,.10)}
.solution > *{min-width:0}
.solution__card{background:var(--surface);border-radius:var(--r-card);padding:40px;
  display:flex;flex-direction:column;gap:var(--g-24);align-items:flex-start}
.solution__card > .eyebrow{display:inline-flex;align-items:center;
  padding:9px 16px;border-radius:10px;background:var(--surface-2);
  border:1px solid var(--border-gold);
  box-shadow:0 0 0 1px rgba(212,175,55,.06),
             0 0 16px rgba(212,175,55,.16),
             0 0 34px rgba(212,175,55,.08)}
.solution__card h2{text-align:left}
.solution__text{display:flex;flex-direction:column;gap:var(--g-16)}
.solution__text p{color:var(--muted);font-size:17px;line-height:29px}
/* geen min-height: de hoogte volgt de foto's, niet andersom */
.solution__photo{border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
/* kolommen die naar elkaar toe schuiven; JS zet de transform per frame,
   dus hier bewust géén transition — die zou achterlopen op het scrollen */
.solution--slide{perspective:1400px}
.solution--slide .solution__card,
.solution--slide .solution__photo{will-change:transform;backface-visibility:hidden}

/* Twee gelijke rijen die samen exact de rijhoogte vullen die de tekstkaart
   bepaalt. height:100% + min-height:0 zijn allebei nodig: zonder min-height:0
   brengen de foto's hun eigen hoogte in en rekken ze de rij alsnog op. */
.solution__photo--pair{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;
  gap:14px;height:100%;min-height:0;
  background:none;box-shadow:none;overflow:visible}
.award{margin:0;position:relative;border-radius:var(--r-card);overflow:hidden;
  min-height:0;background:var(--surface);box-shadow:0 0 0 1px var(--border-gold)}
/* Scroll-reveal: komt iets omhoog en schaalt van 0.96 naar 1. Bewust naar 1
   toe en niet eroverheen, zodat de foto nooit buiten zijn kader groeit en er
   dus ook nooit iets wordt bijgesneden. */
.award.reveal{transform:translateY(30px) scale(.96);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.award.reveal.is-in{transform:none}
.award picture{display:block;position:absolute;inset:0}
/* Absoluut gepositioneerd, en dat is de kern: een gewone <img> brengt zijn
   eigen beeldverhouding in als hoogte, waardoor de fotokolom de rijhoogte ging
   bepalen in plaats van andersom. Absoluut telt niet mee voor de layout, dus
   de tekstkaart bepaalt de hoogte en de foto's vullen wat er is. */
.solution__photo .award img{position:absolute;inset:0;
  display:block;width:100%;height:100%;object-fit:cover}
/* Twee klassen diep, anders wint de algemenere .solution__photo img-regel
   verderop en krijgen beide foto's dezelfde positie. */
/* 2024/2025: hij staat centraal met de oorkonde op borsthoogte. Iets naar
   boven kijken houdt gezicht én oorkonde in beeld als het kader smal wordt. */
.solution__photo .award--a img{object-position:50% 42%}
/* 2025/2026: zijn gezicht zit links van het midden, de gouden achterwand
   rechts. Een lichte linkse bias houdt het gezicht gecentreerd. */
.solution__photo .award--b img{object-position:44% 38%}
.award__year{position:absolute;left:12px;bottom:12px;
  padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(10,10,10,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:11px;line-height:1;letter-spacing:1.4px;font-weight:700;
  text-transform:uppercase;color:var(--gold)}

.solution__photo picture{display:block;width:100%;height:100%}
.solution__photo img,
.solution__photo video{width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  display:block}

/* cijferblok binnen de kaart: geen eigen kaartje, links uitgelijnd */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g-24);width:100%}
.stat{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;
  background:var(--surface);border-radius:var(--r-card);padding:32px 20px}
.stat span{color:var(--muted);font-size:var(--fs-body)}
/* margin-top:auto duwde de cijfers naar de onderrand van een uitgerekte kaart,
   met een gat tussen tekst en cijfers als gevolg */
/* Drie kolommen voor drie cijfers: op twee kolommen viel het derde item op een
   eigen rij, goed voor 110px lege ruimte. De labels zijn max 185px breed en
   passen ruim binnen een kolom van ~206px, dus ze blijven op één regel. */
.stats--inline{grid-template-columns:repeat(3,1fr);gap:24px var(--g-20);margin-top:8px}
.stats--inline .stat{background:none;padding:0;align-items:flex-start;text-align:left}
/* cijfers even breed, anders schokt het tijdens het omhoogtellen */
.stat h4{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- mid CTA ---------- */
.cta{position:relative;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:var(--g-32);padding:var(--pad-y) var(--pad-x);overflow:hidden}

/* ---------- CTA met de reviews als scrollende achtergrond ----------
   Drie lagen: de ticker onderop, een verduistering erover zodat de tekst
   leesbaar blijft, en de inhoud bovenop. pointer-events:none op de
   achtergrond, anders vangt die de klik op de knop op.               */
/* ruim genoeg voor beide rijen: te krap en overflow:hidden knipt de sterren
   (bovenkant rij 1) en de profielfoto's (onderkant rij 2) weg */
.cta--overlay{min-height:700px;justify-content:center;padding:120px var(--pad-x)}
/* reviews mogen goed leesbaar blijven — alleen strak achter de tekst dimmen */
.cta__bg{position:absolute;inset:0;z-index:0;display:flex;align-items:center;
  opacity:.92;pointer-events:none}
.cta__bg .ticker{width:100%}
.cta__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(42% 38% at 50% 50%,
      rgba(10,10,10,.92) 0%, rgba(10,10,10,.74) 42%,
      rgba(10,10,10,.28) 72%, rgba(10,10,10,0) 100%),
    linear-gradient(180deg,
      var(--bg) 0%, rgba(10,10,10,.12) 16%,
      rgba(10,10,10,.12) 84%, var(--bg) 100%)}

/* de gloed zit op de knop zelf (.btn--accent), niet als losse vlek erachter */
.cta__content{position:relative;z-index:2;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:var(--g-32)}
/* regels gelijkmatig verdelen, geen losse woorden op een eigen regel */
.cta__content h2{text-wrap:balance}

/* ---------- testimonial marquee ---------- */
.ticker{display:flex;flex-direction:column;gap:var(--g-24);width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* bovenste rij loopt rechts→links, onderste rij links→rechts */
.ticker__row{display:flex;gap:var(--g-24);width:max-content;animation:marquee 46s linear infinite}
.ticker__row--rev{animation-direction:reverse}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* vaste hoogte + links uitgelijnd, zoals de referentie. De sectie erboven
   staat op text-align:center; dat mag hier niet doorwerken. */
.tcard{width:420px;flex:0 0 auto;background:var(--surface);border-radius:var(--r-card);
  padding:32px;display:flex;flex-direction:column;gap:var(--g-20);
  height:290px;justify-content:space-between;text-align:left}
.tcard p{color:var(--muted);font-size:16px;line-height:27px}
/* vijf gouden sterren bovenaan de reviewkaart */
.tcard__stars{display:flex;gap:3px}
.tcard__stars svg{width:17px;height:17px;fill:var(--gold);
  filter:drop-shadow(0 1px 4px rgba(212,175,55,.4))}

.tcard__who{display:flex;align-items:center;gap:12px}
.tcard__who picture{display:block;flex:0 0 auto;line-height:0}
.tcard__who img,.tcard__who .ph{width:44px;height:44px;border-radius:var(--r-pill);
  object-fit:cover;display:block}
.tcard__name{font-weight:800;text-transform:uppercase;letter-spacing:var(--ls-btn);font-size:var(--fs-btn)}
.tcard__dur{color:var(--muted);font-size:13px}

/* ---------- benefits ---------- */
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:var(--g-24);width:100%}
/* Inhoud verticaal centreren. Met flex-end werd de tekst tegen de onderrand
   geduwd, wat een gat van ~280px liet zodra de chatkaart ernaast de rijhoogte
   bepaalde. */
.benefit{background:var(--surface);border-radius:var(--r-card);padding:34px;
  display:flex;flex-direction:column;gap:var(--g-16);justify-content:center;min-height:0}
.benefit h3{font-size:28px;line-height:36px;letter-spacing:-.3px}
.benefit p{color:var(--muted);font-size:15px;line-height:24px}
.benefit--tall{grid-row:span 2;justify-content:flex-start}
/* Tekst links, iPhone rechts binnen dezelfde tegel. De telefoon vult de
   hoogte die de chattegel ernaast bepaalt, zonder die hoogte zelf te sturen. */

/* Opsomming met gouden vinkjes. Het vinkje is een masker gevuld met
   --grad-gold, zodat het exact dezelfde goudtint heeft als de knoppen en
   iconen elders op de site. */
/* De lijst beslaat beide kolommen; elf punten naast de telefoon zouden een
   veel te smalle kolom opleveren. */
.benefit--lijst{grid-column:1 / -1}

.vinkjes{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;
  list-style:none;margin:0;padding:0}
.vinkjes li{position:relative;padding-left:32px;
  color:var(--muted);font-size:15px;line-height:23px}
.vinkjes li b{display:block;color:var(--text);font-weight:700;
  font-size:16px;line-height:24px;margin-bottom:1px}
.vinkjes li::before{content:"";position:absolute;left:0;top:7px;width:19px;height:14px;
  background:var(--grad-gold);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 14'><path d='M1.7 7.1l4.9 4.9L17.3 1.6' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 14'><path d='M1.7 7.1l4.9 4.9L17.3 1.6' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}

.benefit__cta{align-self:flex-start;margin-top:6px}

.phone{position:relative;width:196px;align-self:stretch;min-height:0}
/* absoluut: anders brengt de <img> zijn eigen hoogte in en rekt de tegel op */
.phone picture{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.phone img{max-width:100%;max-height:100%;width:auto;height:auto;
  filter:drop-shadow(0 22px 46px rgba(0,0,0,.6))}
/* zachte gouden gloed achter het toestel */
.phone::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:190%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(212,175,55,.15) 0%,rgba(212,175,55,0) 66%)}

/* tegel met alleen de chatmockup: geen tekst, dus verticaal gecentreerd */
.benefit--visual{justify-content:center}
.benefit--visual .chat{margin-bottom:0}
/* afsluitende zin krijgt iets meer nadruk dan de alinea's erboven */
.benefit .benefit__slot{color:var(--text);font-weight:600}
/* losse tekstkaart over de volle breedte, zonder tweede kolom ernaast */
/* ---------- personal training: tekst links, foto rechts ------------------
   De foto staat absoluut binnen zijn kader. Een gewone <img> zou zijn eigen
   beeldverhouding als hoogte inbrengen en zo de rij oprekken — dezelfde val
   als eerder in de oplossing-sectie. Nu bepaalt de tekst de hoogte.      */
.pt{display:flex;flex-direction:column;gap:var(--g-24);
  max-width:860px;margin-inline:auto}
.pt > *{min-width:0}

/* Fotostrook in dezelfde behandeling als de partnertegels: gelijke tegels,
   zelfde radius, gouden haarlijn en hover. Verschil: dit zijn foto's, dus
   cover op een donkere tegel in plaats van contain op wit. */
.ptfotos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g-24);
  width:100%;list-style:none;margin:0;padding:0}
.ptfoto{position:relative;aspect-ratio:1;overflow:hidden;
  border-radius:var(--r-card);background:var(--surface);
  box-shadow:0 0 0 1px var(--border-gold);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
@media (hover:hover){
  .ptfoto:hover{transform:translateY(-4px);
    box-shadow:0 0 0 1px rgba(212,175,55,.5),0 14px 34px rgba(212,175,55,.16)}
}
.ptfoto picture{position:absolute;inset:0;display:block}
.ptfoto img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- chatmockup ----------------------------------------------------
   Binnenpaneel met vier berichten. Client links (avatar vóór de bubbel),
   trainer rechts (bubbel vóór de avatar). Het tweede trainerbericht heeft
   geen avatar maar wel een spacer, zodat het onder het eerste uitlijnt.   */
.chat{background:#161616;border-radius:20px;padding:24px;
  display:flex;flex-direction:column;gap:15px;margin-bottom:auto}

.chat__row{display:flex;align-items:flex-start;gap:14px}
.chat__row--me{flex-direction:row-reverse}
.chat__row--group{margin-top:24px}          /* sprong bij wisseling van spreker */

.chat__avatar{width:46px;height:46px;border-radius:var(--r-pill);flex:0 0 auto;
  object-fit:cover;object-position:50% 30%}

/* .chat-prefix nodig: .benefit p wint anders op specificiteit en maakt de
   tekst grijs en 15px */
.chat .chat__bubble{max-width:68%;padding:14px 20px;border-radius:22px;
  font-size:16px;line-height:24px;color:var(--text);background:#232323;margin:0}
.chat .chat__bubble--me{background:var(--grad-gold);color:var(--on-gold);font-weight:600}

/* verschijnen in volgorde; opacity/transform verschuiven de layout niet */
.chat__step{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.chat.is-playing .chat__step.is-shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .chat__step{opacity:1;transform:none}
}

/* ---------- trainer ---------- */
.trainer{display:grid;grid-template-columns:1fr 1fr;gap:var(--g-48);align-items:center;width:100%}
.trainer__img{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;background:var(--surface)}
.trainer__img img,.trainer__img .ph{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.trainer__body{display:flex;flex-direction:column;gap:var(--g-24)}
.trainer__body p{color:var(--muted);font-size:17px;line-height:29px}
.signature{font-family:var(--font-hand);font-size:44px;line-height:1;text-transform:none;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* ---------- partners ------------------------------------------------------
   Logostrook. De logo's hebben zelf een lichte achtergrond met donkere tekst,
   dus ze staan op witte tegels — direct op het donkere vlak zouden ze
   wegvallen. Liggende tegels met contain: geen enkel logo wordt bijgesneden
   en de strook blijft laag.                                              */
.partners{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g-24);
  width:100%;list-style:none;margin:0;padding:0}
.partner{background:#fff;border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 0 0 1px var(--border-gold);
  aspect-ratio:3/2;padding:18px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.partner:hover{transform:translateY(-4px);
  box-shadow:0 0 0 1px rgba(212,175,55,.5),0 14px 34px rgba(212,175,55,.16)}
.partner picture{display:block;width:100%;height:100%}
.partner img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- blog ---------- */
.blog{display:grid;grid-template-columns:1fr 1fr;gap:var(--g-24);width:100%}
.post{display:flex;flex-direction:column;gap:var(--g-20);background:var(--surface);
  border-radius:var(--r-card);padding:20px;transition:transform .4s var(--ease)}
.post:hover{transform:translateY(-6px)}
.post__img{border-radius:var(--r-btn);overflow:hidden;aspect-ratio:16/10;background:var(--surface-2)}
.post__img img,.post__img .ph{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post:hover .post__img img,.post:hover .post__img .ph{transform:scale(1.05)}
.post__body{display:flex;flex-direction:column;gap:12px;padding:0 12px 16px}
.post h3{font-size:24px;line-height:32px;letter-spacing:-.2px;text-transform:none}
.post p{color:var(--muted);font-size:15px;line-height:24px}
.headline--split{flex-direction:row;justify-content:space-between;align-items:flex-end;text-align:left}
.headline--split .headline__left{display:flex;flex-direction:column;gap:var(--g-28);
  text-align:left;align-items:flex-start}

/* ---------- FAQ ---------- */
.faq{width:100%;max-width:900px;display:flex;flex-direction:column;gap:12px}
.faq__item{background:var(--surface);border-radius:var(--r-card);overflow:hidden}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--g-24);
  padding:26px 32px;text-align:left;font-size:20px;line-height:28px;font-weight:800}
.faq__icon{position:relative;width:20px;height:20px;flex:0 0 auto}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--grad-gold);
  transition:transform .4s var(--ease)}
.faq__icon::before{top:9px;left:0;width:20px;height:2px}
.faq__icon::after{left:9px;top:0;width:2px;height:20px}
.faq__item.is-open .faq__icon::after{transform:rotate(90deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding:0 32px 28px;color:var(--muted);font-size:16px;line-height:27px}

/* ---------- footer ---------- */
.footer{padding:var(--pad-y) var(--pad-x) 40px;border-top:1px solid var(--border)}
.footer__inner{max-width:var(--container);margin-inline:auto}
/* vier kolommen op desktop, twee op tablet, een op mobiel */
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1fr;gap:var(--g-48);
  align-items:start}
.footer__merk .header__logo{margin-bottom:16px}
.footer__merk p{color:var(--muted);font-size:15px;line-height:26px;max-width:34ch}
.footer__kop{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);
  font-weight:700;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
/* kolomlijsten: geen bullets, ruime raakvlakken */
.footer__lijst{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.footer__lijst a,.footer__nav a{color:var(--muted);font-size:15px;line-height:24px;
  transition:color .3s var(--ease);display:inline-flex;align-items:center;min-height:40px}
.footer__lijst a:hover,.footer__nav a:hover{color:var(--text)}
.footer__lijst a:focus-visible,.footer__nav a:focus-visible,.footer__adres a:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.footer__nav{display:flex;flex-direction:column;gap:2px}
/* adresblok: <address> zonder cursief, met dezelfde regelmaat als de lijsten */
.footer__adres{font-style:normal;color:var(--muted);font-size:15px;line-height:26px}
.footer__adres strong{display:block;color:var(--text);font-weight:700;margin-bottom:10px}
.footer__adres a{color:var(--muted);transition:color .3s var(--ease);
  display:inline-flex;align-items:center;min-height:40px;word-break:break-word}
.footer__adres a:hover{color:var(--gold)}
.footer__regel{display:block;margin-top:14px}
.footer__bottom{margin-top:var(--g-48);padding-top:24px;border-top:1px solid var(--border);
  color:var(--muted);font-size:13px;line-height:20px}

@media (max-width:1023px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--g-32)}
}
@media (max-width:639px){
  .footer__grid{grid-template-columns:1fr;gap:var(--g-32)}
  .footer__merk p{max-width:none}
}

/* ---------- replaceable image placeholder ----------
   Same box, same crop behaviour as a real photo. Swap <div class="ph"> for
   <img src="..." alt="..."> and nothing about the layout moves.            */
.ph{background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 12px,transparent 12px 24px),
    var(--surface-2);
  display:flex;align-items:center;justify-content:center;position:relative}
.ph::after{content:attr(data-label);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.28);text-align:center;padding:8px;line-height:1.5}

/* ---------- reveal animation (fade + rise, staggered) ---------- */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================================
   TABLET  810–1199
   ========================================================================== */
@media (max-width:1199px){
  :root{
    --pad-x:40px; --pad-y:80px; --hero-pad-top:160px;
    --fs-h1:56px; --lh-h1:61.6px;
    --fs-h2:46px; --lh-h2:50.6px;
    --fs-h3:40px; --lh-h3:48px;
    --fs-h4:34px; --lh-h4:44px;
    --fs-lead:18px;--lh-lead:30px;
    --g-100:64px;
  }
  .nav{display:none}
  .burger{display:flex}
  .hero{min-height:760px}
  .trainer{grid-template-columns:1fr;gap:var(--g-32)}
  .trainer__img{aspect-ratio:16/11}
  .benefits{grid-template-columns:1fr}
  .benefit--tall{grid-row:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .blog{grid-template-columns:1fr}
  .tcard{width:360px}
}

/* ============================================================================
   MOBILE  ≤809
   ========================================================================== */
@media (max-width:809px){
  :root{
    --pad-x:20px; --pad-y:64px; --hero-pad-top:132px;
    --fs-h1:38px; --lh-h1:41.8px; --ls-h1:-.38px;
    --fs-h2:32px; --lh-h2:35.2px; --ls-h2:-.32px;
    --fs-h3:28px; --lh-h3:33.6px;
    --fs-h4:30px; --lh-h4:40px;
    --fs-lead:16px;--lh-lead:27px;
    --g-48:28px; --g-100:44px; --g-32:24px;
    --r-card:20px;
  }
  .header{top:12px;padding:0 16px}
  .header__right{gap:8px}
  .social{width:36px;height:36px;border-radius:9px}
  .social svg{width:18px;height:18px}
  /* schermvullend op telefoons; dvh volgt de balken van mobiele browsers,
     100vh valt terug voor oudere browsers */
  .hero{min-height:100vh;min-height:100dvh;justify-content:center}
  .hero__glow{bottom:12%;height:180px;filter:blur(30px)}
  .hero__regel .accent{margin-inline:.1em}
  .grid-3{grid-template-columns:1fr}
  .problem{min-height:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:24px 14px}
  /* tekstblok eerst, foto eronder — zoals in de referentie op mobiel */
  .solution{grid-template-columns:1fr;gap:14px}
  .solution__card{padding:26px;order:1}
  /* geen opgelegde verhouding: de foto's bepalen zelf hun hoogte */
  .solution__photo{order:2;min-height:0}
  /* op mobiel naast elkaar: gestapeld kosten ze 714px paginahoogte, als paar
     nog geen 170px. Rijen en hoogte terug naar automatisch, anders blijft er
     een lege tweede rij van de desktopindeling staan. */
  .solution__photo--pair{grid-template-columns:1fr 1fr;grid-template-rows:auto;
    gap:10px;height:auto}
  /* de foto's zijn absoluut gepositioneerd en hebben dus geen eigen hoogte;
     hier geeft de verhouding van het kader die hoogte */
  .award{aspect-ratio:1}
  /* drie vierkanten naast elkaar worden op een telefoon te klein om iets op
     te herkennen; onder elkaar en breder uitgesneden houdt het leesbaar */
  .ptfotos{grid-template-columns:1fr;gap:12px}
  .ptfoto{aspect-ratio:4/3}
  /* vier logo's naast elkaar zijn op een telefoon onleesbaar klein */
  .partners{grid-template-columns:1fr 1fr;gap:12px}
  .partner{padding:14px}

  /* Cijfers op mobiel: drie kolommen worden hier te smal (labels breken in
     drieën) en twee kolommen laten het derde item als wees achter. Cijfer en
     label naast elkaar op één regel is compacter én beter leesbaar. */
  .stats--inline{grid-template-columns:1fr;gap:14px}
  .stats--inline .stat{flex-direction:row;align-items:baseline;gap:12px}
  .stats--inline .stat h4{font-size:26px;line-height:32px}
  .stats--inline .stat span{font-size:15px}
  .solution__photo .award img{aspect-ratio:1;height:auto}
  .solution__text p{font-size:16px;line-height:27px}
  .stats--inline .stat{padding:0}
  /* foto boven, tekst eronder op telefoons */
  .transform{grid-template-columns:1fr;gap:14px}
  .transform__card{padding:26px;order:2}
  .transform__photo{order:1;min-height:0;aspect-ratio:1/1}
  .transform__title{font-size:21px;line-height:28px}
  .transform__quote{font-size:16px;line-height:27px;padding-left:14px}
  .transform__body{font-size:15px;line-height:25px}
  .tile--text{padding:36px 24px}
  .tile--image{height:240px}
  .benefit{padding:28px;min-height:0}
  /* twee kolommen worden hier te smal voor kop + toelichting */
  .vinkjes{grid-template-columns:1fr;gap:16px}
  /* tekst boven, telefoon eronder gecentreerd; de verhouding geeft hier de
     hoogte, want de afbeelding zelf staat absoluut */
  .phone{width:min(190px,60%);margin-inline:auto;align-self:center;aspect-ratio:520/1160}
  /* Bubbels de ruimte geven zoals in de referentie: daar vult een bubbel
     ~77% van het paneel. Op 68% brak elke zin een regel te vroeg af,
     waardoor het paneel onnodig hoog werd. */
  .chat{padding:18px}
  .chat .chat__bubble{max-width:80%;padding:13px 17px}
  .chat__row{gap:11px}
  .chat__avatar{width:42px;height:42px}
  /* iets compacter, zodat beide rijen ruim binnen de sectie passen */
  .tcard{width:264px;padding:20px;gap:14px;height:270px}
  .tcard p{font-size:15px;line-height:24px}
  /* brede randvervaging: kaarten lossen op naar de schermrand in plaats van
     hard afgekapt te worden. Smal masker = zichtbaar afgesneden tekst. */
  .ticker{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 27%,#000 73%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 27%,#000 73%,transparent 100%)}
  /* rustiger tempo, anders is een review het scherm uit voor je hem uit hebt */
  .ticker__row{animation-duration:78s}
  /* De reviews moeten ook op mobiel gewoon te zien zijn: sterren, profielfoto's
     en kaartranden blijven zichtbaar. Alleen strak achter de tekst dimmen,
     zodat titel en knop leesbaar blijven zonder de kaarten weg te poetsen. */
  /* De sectie moet hoog genoeg zijn om beide rijen VOLLEDIG te tonen. Is hij
     te laag, dan knipt overflow:hidden de sterren (bovenkant rij 1) en de
     profielfoto's (onderkant rij 2) weg. */
  .cta--overlay{min-height:720px;padding:88px var(--pad-x)}
  .cta__bg{opacity:1}
  .cta__scrim{background:
    radial-gradient(62% 26% at 50% 50%,
      rgba(10,10,10,.88) 0%, rgba(10,10,10,.6) 52%,
      rgba(10,10,10,.18) 80%, rgba(10,10,10,0) 100%),
    linear-gradient(180deg,
      var(--bg) 0%, rgba(10,10,10,0) 7%,
      rgba(10,10,10,0) 93%, var(--bg) 100%)}
  /* op mobiel iets ingehouden, anders overstraalt de halo de kaarten */
  .btn--accent{box-shadow:
    0 0 18px 2px rgba(212,175,55,.5),
    0 0 40px 8px rgba(212,175,55,.28),
    0 0 78px 20px rgba(212,175,55,.14)}
  /* titel in vier gelijkmatige regels, geen losse "A" onderaan */
  .cta__content h2{max-width:15ch;margin-inline:auto}
  .faq__q{padding:20px 22px;font-size:17px;line-height:25px}
  .faq__a p{padding:0 22px 22px;font-size:15px;line-height:25px}
  .headline--split{flex-direction:column;align-items:flex-start}
  .footer__bottom{flex-direction:column;text-align:center;align-items:center}
  .mobilenav a{font-size:30px;line-height:42px}
  /* kransen blijven naast de beoordeling staan, ook op mobiel */
  .authority{flex-direction:row;gap:12px}
  .laurel svg{width:26px;height:40px}
  .stars svg{width:18px;height:18px}
}

/* ============================================================================
   GRATIS INTAKE — modal met 5 stappen
   Gebruikt de bestaande tokens: kleuren, radius, knoppen en typografie.
   ========================================================================== */
.intake{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:24px;opacity:0;transition:opacity .26s var(--ease)}
/* KRITIEK: zonder deze regel wint display:flex van het hidden-attribuut en
   ligt de onzichtbare modal over de hele pagina, waardoor niets meer
   aanklikbaar is. pointer-events is de tweede beveiliging. */
.intake[hidden]{display:none}
.intake:not(.is-open){pointer-events:none}
.intake.is-open{opacity:1;pointer-events:auto}
body.is-intake{position:fixed;width:100%;overflow:hidden}

.intake__backdrop{position:absolute;inset:0;background:rgba(6,6,6,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.intake__panel{position:relative;width:100%;max-width:620px;max-height:calc(100dvh - 48px);
  overflow-y:auto;background:var(--surface);border-radius:var(--r-card);
  border:1px solid var(--border-gold);padding:44px 44px 36px;
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 60px rgba(212,175,55,.07);
  transform:translateY(14px) scale(.985);transition:transform .3s var(--ease)}
.intake.is-open .intake__panel{transform:none}

.intake__close{position:absolute;top:16px;right:16px;width:40px;height:40px;
  border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted);
  transition:.25s var(--ease)}
.intake__close:hover{color:var(--text);border-color:var(--border-gold)}
.intake__close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}

/* voortgang */
.intake__voortgang{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.intake__balk{height:3px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.intake__balk span{display:block;height:100%;width:20%;border-radius:inherit;
  background:var(--grad-gold);transition:width .4s var(--ease)}

/* inhoud */
.intake__titel{font-size:30px;line-height:38px;letter-spacing:-.4px;font-weight:800;
  text-transform:uppercase;color:var(--text);margin-bottom:14px}
.intake__intro{color:var(--muted);font-size:16px;line-height:27px;margin-bottom:12px}
.intake__klein{color:var(--muted);font-size:14px;line-height:24px;margin-bottom:8px}
.intake__label{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);font-weight:700;
  text-transform:uppercase;color:var(--muted);margin:26px 0 12px}

/* keuzeknoppen */
.intake__opties{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.intake__opties--rij{flex-direction:row;flex-wrap:wrap;margin-top:0}
.intake__opties--rij .optie{flex:1 1 auto;text-align:center}

.optie{display:block;width:100%;text-align:left;padding:17px 20px;
  border-radius:var(--r-btn);background:var(--surface-2);
  border:1px solid var(--border);color:var(--text);
  font-size:16px;line-height:24px;font-weight:600;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),
             transform .2s var(--ease),box-shadow .2s var(--ease)}
@media (hover:hover){ .optie:hover{border-color:var(--border-gold);transform:translateY(-1px)} }
.optie.is-aan{border-color:var(--gold);background:rgba(212,175,55,.10);
  box-shadow:0 0 0 1px rgba(212,175,55,.35),0 0 18px rgba(212,175,55,.14)}

/* invoervelden */
.intake__velden{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.intake__veld{display:flex;flex-direction:column;gap:7px;margin:0}
.intake__veld label{font-size:13px;letter-spacing:.6px;font-weight:700;
  text-transform:uppercase;color:var(--muted)}
.intake__veld input{width:100%;padding:15px 18px;border-radius:var(--r-btn);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:24px;   /* 16px voorkomt inzoomen op iOS */
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.intake__veld input:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(212,175,55,.3)}
.intake__veld input::placeholder{color:rgba(191,191,191,.5)}

/* honeypot: uit beeld, maar wel invulbaar voor bots */
.intake__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.intake__fout{margin-top:16px;padding:12px 16px;border-radius:var(--r-btn);
  background:rgba(255,80,80,.10);border:1px solid rgba(255,120,120,.32);
  color:#ffb4b4;font-size:14px;line-height:22px}

.intake__nav{display:flex;gap:12px;align-items:center;margin-top:28px}
.intake__nav .btn--accent{flex:1}
.intake__terug{background:transparent;border:1px solid var(--border);color:var(--muted)}
.intake__terug:hover{color:var(--text);border-color:var(--border-gold)}
.btn.is-bezig{opacity:.72;cursor:progress}
.btn:disabled{pointer-events:none}

/* bedankt */
.intake__view--klaar{text-align:center}
.intake__view--klaar .intake__nav{justify-content:center}
.intake__vink{display:block;width:64px;height:64px;margin:0 auto 22px}
.intake__vink svg{width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.intake__vink circle{stroke-dasharray:151;stroke-dashoffset:151;
  animation:vink-cirkel .7s var(--ease) forwards}
.intake__vink path{stroke-dasharray:40;stroke-dashoffset:40;
  animation:vink-streep .4s var(--ease) .55s forwards}
@keyframes vink-cirkel{to{stroke-dashoffset:0}}
@keyframes vink-streep{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .intake,.intake__panel{transition:none}
  .intake__vink circle,.intake__vink path{animation:none;stroke-dashoffset:0}
}

@media (max-width:809px){
  .intake{padding:0;align-items:flex-end}
  .intake__panel{max-width:none;max-height:100dvh;height:100dvh;border-radius:0;
    border-left:0;border-right:0;padding:64px 20px 28px}
  .intake__titel{font-size:24px;line-height:31px}
  .optie{padding:16px 18px;font-size:15px}      /* ruim genoeg voor een duim */
  .intake__opties--rij{flex-direction:column}
  .intake__nav{flex-direction:column-reverse;align-items:stretch}
  .intake__nav .btn{width:100%}
}

/* optioneel vrij tekstveld op de laatste stap van de intake */
.intake__veld--tekst{margin-top:22px}
.intake__optioneel{color:rgba(191,191,191,.62);font-weight:600;letter-spacing:.4px}
.intake__veld textarea{width:100%;padding:15px 18px;border-radius:var(--r-btn);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:25px;   /* 16px = geen inzoomen op iOS */
  resize:vertical;min-height:96px;max-height:220px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.intake__veld textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(212,175,55,.3)}
.intake__veld textarea::placeholder{color:rgba(191,191,191,.5)}

/* ---------- diensten -------------------------------------------------------
   Drie delen: intro, de gedeelde voordelen (een keer, want ze gelden voor
   elk traject) en de trajectkeuze. Online Coaching is het hoofdproduct en
   krijgt daarom de gouden rand, de badge en de gevulde knop; PT/Duo blijft
   een volwaardige kaart maar met minder goud.                             */
.blok{background:var(--surface);border-radius:var(--r-card);padding:40px;
  display:flex;flex-direction:column;gap:var(--g-28);
  box-shadow:0 0 0 1px var(--border)}
.blok__kop{display:flex;flex-direction:column;gap:10px}
.blok__kop--midden{text-align:center;align-items:center;margin-bottom:var(--g-28)}
.blok__titel{font-size:28px;line-height:36px;letter-spacing:-.3px;
  font-weight:800;text-transform:uppercase;color:var(--text)}
.blok__sub{color:var(--muted);font-size:16px;line-height:26px;max-width:640px}

/* drie kolommen: elf punten blijven zo scanbaar in plaats van een tekstmuur */
.vinkjes--3{grid-template-columns:repeat(3,1fr);gap:22px 32px}
/* alle koppen in de gedeelde lijst in goud, zodat de opsomming een
   consistent beeld geeft in plaats van een mengeling wit/goud */
.vinkjes--3 li b{color:var(--gold-light)}

/* korte opsomming zonder kop: alleen de regel zelf */
.vinkjes--kort{grid-template-columns:1fr;gap:11px}
.vinkjes--kort li{color:var(--text);font-size:15px;line-height:23px}

/* ---------- trajectkaarten ---------- */
.trajecten{display:grid;grid-template-columns:1.12fr 1fr;gap:var(--g-24);
  align-items:start;width:100%}
.trajecten > *{min-width:0}

.traject{position:relative;background:var(--surface);border-radius:var(--r-card);
  padding:40px;display:flex;flex-direction:column;gap:var(--g-20);
  box-shadow:0 0 0 1px var(--border)}
.traject__kop{font-size:26px;line-height:34px;letter-spacing:-.2px;
  font-weight:800;text-transform:uppercase;color:var(--text)}
.traject__tekst{color:var(--muted);font-size:16px;line-height:26px}
.traject__incl{color:var(--gold-light);font-size:14px;line-height:22px;font-weight:700;
  letter-spacing:.2px}
.traject__cta{align-self:stretch;margin-top:4px}
.traject__micro{color:var(--muted);font-size:13px;line-height:20px;text-align:center}

/* Online Coaching: gouden rand, gloed en een fijn lijntje bovenaan. Bewust
   geen goud vlak — het blijft een accent. */
.traject--hoofd{box-shadow:0 0 0 1px rgba(212,175,55,.42),
  0 18px 50px rgba(212,175,55,.10);overflow:hidden}
.traject--hoofd::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad-gold)}
.traject__badge{position:absolute;top:18px;right:18px;
  padding:6px 13px;border-radius:var(--r-pill);
  background:var(--grad-gold);color:var(--on-gold);
  font-size:11px;line-height:1;letter-spacing:1.4px;font-weight:800;
  text-transform:uppercase;box-shadow:var(--gold-glow)}

/* de twee varianten binnen de PT-kaart */
.traject__duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--g-24)}
.traject__duo > div{display:flex;flex-direction:column;gap:12px;min-width:0}
.traject__duo h4{font-size:13px;line-height:18px;letter-spacing:1.4px;font-weight:800;
  text-transform:uppercase;color:var(--muted);margin:0}

/* visuals binnen de kaarten */
.traject .phone{width:100%;max-width:208px;margin-inline:auto;
  aspect-ratio:520/1160;align-self:center}
.traject .ptfotos{grid-template-columns:repeat(3,1fr);gap:10px}
.traject .ptfoto{border-radius:var(--r-btn)}

@media (max-width:1199px){
  .vinkjes--3{grid-template-columns:1fr 1fr}
  .trajecten{grid-template-columns:1fr}
  .blok{padding:32px}
  .traject{padding:32px}
}

@media (max-width:809px){
  /* alles onder elkaar; drie kolommen worden hier onleesbaar smal */
  .blok{padding:26px;gap:var(--g-24)}
  .blok__titel{font-size:22px;line-height:30px}
  .blok__sub{font-size:15px;line-height:25px}
  .vinkjes--3{grid-template-columns:1fr;gap:16px}
  .traject{padding:26px}
  .traject__kop{font-size:21px;line-height:29px}
  .traject__tekst{font-size:15px;line-height:25px}
  .traject__duo{grid-template-columns:1fr;gap:var(--g-20)}
  .traject__badge{top:14px;right:14px;padding:5px 11px;font-size:10px}
  .traject .phone{max-width:170px}
  .traject .ptfotos{grid-template-columns:repeat(3,1fr);gap:8px}
  .traject .ptfoto{aspect-ratio:1}
}

/* ---------- drie app-schermen naast elkaar --------------------------------
   Training, Voeding en Community. De gouden gloed zit op de groep, niet op
   elk toestel apart — drie losse gloeden worden een wolk.                 */
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  align-items:end;position:relative;width:100%;margin-top:4px}
.phones::before{content:"";position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:118%;aspect-ratio:1.35;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(212,175,55,.13) 0%,rgba(212,175,55,0) 66%)}

/* binnen de groep gelden de maten van de groep, niet die van de losse
   telefoon uit de oude opzet */
.traject .phones .phone{width:100%;max-width:none;margin:0;
  aspect-ratio:440/951;align-self:end}
.phones .phone::before{content:none}          /* gloed staat op de groep */
.phones .phone img{filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}

@media (max-width:809px){
  .phones{gap:8px}
}

/* De introzin smaller dan de kop: 940px gaf 84 tekens per regel en een
   scheve verdeling (99 om 68). Nu een rustiger leesbreedte, gelijkmatig
   afgebroken. */
.hero__text .lead{max-width:760px;text-wrap:balance}

/* ══════════════════ LOSSE PAGINA'S (contact, juridisch) ══════════════════
   Zelfde tokens, tekstkolom, en ruimte bovenin zodat de vaste header de
   kop niet overlapt. Geen nieuwe kleuren of fonts.                        */
.pagina{padding:var(--hero-pad-top) var(--pad-x) var(--pad-y)}
.pagina__inner{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--g-32)}
.pagina__kop{display:flex;flex-direction:column;gap:var(--g-16)}
.pagina__kop h1{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.pagina__blok{display:flex;flex-direction:column;gap:var(--g-16)}
.pagina__blok h2{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4)}
.pagina__blok p{color:var(--muted);font-size:var(--fs-lead);line-height:var(--lh-lead)}

/* contactkaart: zelfde vlak en radius als de andere kaarten op de site */
.contactkaart{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:32px;display:flex;flex-direction:column;gap:var(--g-24)}
.contactkaart__adres{font-style:normal;color:var(--muted);font-size:var(--fs-lead);
  line-height:var(--lh-lead)}
.contactkaart__adres strong{display:block;color:var(--text);font-weight:800;margin-bottom:8px}
.contactrij{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g-24)}
.contactrij dt{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);
  letter-spacing:var(--ls-eyebrow);font-weight:700;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px}
.contactrij dd{margin:0;color:var(--muted);font-size:16px;line-height:26px}
.contactrij a{color:var(--muted);transition:color .3s var(--ease);word-break:break-word}
.contactrij a:hover{color:var(--text)}
.contactrij a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.contactknoppen{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:809px){
  .pagina{padding-top:calc(var(--hero-pad-top) - 20px)}
  .contactkaart{padding:24px}
  .contactrij{grid-template-columns:1fr;gap:var(--g-20)}
  .contactknoppen .btn{width:100%}
}

/* label boven de app-mockups: bewust klein, de telefoons blijven de hoofdrol */
.phones__kop{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);
  letter-spacing:var(--ls-eyebrow);font-weight:700;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-top:8px}
/* dezelfde regel op de secundaire kaart, maar ingetogener dan bij Online Coaching */
.traject__incl--sec{color:var(--gold);opacity:.85}

/* stappenlijst op de dienstpagina's; hergebruikt de kaartstijl van de site */
.stappen{list-style:none;margin:0;padding:0;display:grid;gap:var(--g-16);counter-reset:stap}
.stappen li{counter-increment:stap;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:24px 24px 24px 76px;position:relative}
.stappen li::before{content:counter(stap);position:absolute;left:24px;top:24px;
  width:36px;height:36px;border-radius:50%;background:var(--grad-gold);color:var(--on-gold);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.stappen b{display:block;color:var(--text);font-size:18px;line-height:26px;margin-bottom:6px}
.stappen span{color:var(--muted);font-size:16px;line-height:26px}
@media (max-width:639px){
  .stappen li{padding:20px 20px 20px 20px}
  .stappen li::before{position:static;margin-bottom:12px}
}

/* ══════════════════════════ BLOGARTIKEL ══════════════════════════
   Leeskolom van 720px; kop en kruimels mogen iets breder. Alleen
   bestaande tokens, geen nieuwe kleuren of fonts.                   */
.artikel{padding:var(--hero-pad-top) var(--pad-x) var(--pad-y)}
.artikel__inner{max-width:820px;margin-inline:auto}
.artikel__body{max-width:720px}

/* kruimelpad */
.kruimels{font-size:13px;line-height:20px;color:var(--muted);margin-bottom:24px}
.kruimels ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kruimels li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--border-gold)}
.kruimels a{color:var(--muted);transition:color .3s var(--ease)}
.kruimels a:hover{color:var(--gold)}
.kruimels [aria-current]{color:var(--text)}

/* artikelkop */
.artikel__kop{display:flex;flex-direction:column;gap:var(--g-20);margin-bottom:var(--g-48)}
.artikel__kop h1{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);
  text-wrap:balance}
.artikel__meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  font-size:14px;line-height:22px;color:var(--muted)}
.artikel__meta .punt{color:var(--border-gold)}

/* leestekst */
.artikel__body p,.artikel__body li{color:var(--muted);font-size:18px;line-height:32px}
.artikel__body > p{margin-bottom:20px}
.artikel__body h2{font-size:30px;line-height:38px;letter-spacing:-.3px;font-weight:800;
  text-transform:uppercase;color:var(--text);margin:56px 0 18px;scroll-margin-top:110px}
.artikel__body h2:first-child{margin-top:0}
.artikel__body h3{font-size:20px;line-height:28px;letter-spacing:.2px;font-weight:800;
  text-transform:uppercase;color:var(--gold-light);margin:32px 0 12px}
.artikel__body ul{margin:0 0 20px;padding-left:22px}
.artikel__body li{margin-bottom:8px}
.artikel__body a{color:var(--gold-light);text-decoration:underline;
  text-underline-offset:3px;transition:color .3s var(--ease)}
.artikel__body a:hover{color:var(--gold)}
.artikel__body a:focus-visible,.kruimels a:focus-visible{outline:2px solid var(--gold);
  outline-offset:3px;border-radius:3px}
/* dunne gouden scheiding tussen de grote blokken */
.artikel__body hr{border:0;height:1px;background:var(--border);margin:56px 0}

/* inhoudsopgave */
.inhoud{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:24px 28px;margin-bottom:var(--g-48)}
.inhoud__kop{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);
  letter-spacing:var(--ls-eyebrow);font-weight:700;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.inhoud ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.inhoud a{color:var(--muted);font-size:16px;line-height:24px;text-decoration:none;
  display:inline-flex;align-items:center;min-height:34px;transition:color .3s var(--ease)}
.inhoud a:hover{color:var(--text)}

/* callout voor de dosering */
.callout{border:1px solid var(--border-gold);border-radius:var(--r-btn);
  background:linear-gradient(180deg,rgba(212,175,55,.07),rgba(212,175,55,.02));
  padding:20px 24px;margin:24px 0}
.callout p{color:var(--gold-light);font-size:20px;line-height:30px;font-weight:800;margin:0}

/* productblok: duidelijk maar geen webshop */
.product{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:28px;margin:28px 0;display:flex;flex-direction:column;gap:var(--g-16)}
.product__logo{width:96px;height:auto;border-radius:12px}
.product h3{margin:0}
.product .btn{align-self:flex-start}

/* auteurskaart */
.auteur{display:flex;gap:20px;align-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-card);padding:24px;margin-top:var(--g-48)}
.auteur img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.auteur__naam{color:var(--text);font-size:18px;line-height:26px;font-weight:800;margin:0 0 4px}
.auteur__rol{color:var(--muted);font-size:15px;line-height:24px;margin:0}
.auteur a{color:var(--gold-light)}

@media (max-width:809px){
  .artikel{padding-top:calc(var(--hero-pad-top) - 40px)}
  .artikel__kop h1{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
  .artikel__body h2{font-size:24px;line-height:32px;margin:44px 0 14px}
  .artikel__body p,.artikel__body li{font-size:17px;line-height:30px}
  .inhoud{padding:20px}
  .product{padding:22px}
  .auteur{flex-direction:column;align-items:flex-start;text-align:left}
}
/* op smalle schermen valt de meta-regel om; het scheidingsteken hangt dan los */
@media (max-width:479px){ .artikel__meta .punt{display:none} }

/* gerelateerde artikelen: hergebruikt de bestaande blogkaart (.blog/.post) */
.gerelateerd{margin-top:var(--g-48);padding-top:var(--g-32);border-top:1px solid var(--border)}
.gerelateerd__kop{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);
  letter-spacing:var(--ls-eyebrow);font-weight:700;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px}
.gerelateerd .blog{grid-template-columns:1fr}
.gerelateerd .post__body h3{font-size:20px;line-height:28px}
/* de kaart is zelf een link en zit in .artikel__body; de inline-linkstijl
   (goud + onderstreept) mag daar niet overheen vallen */
.artikel__body .gerelateerd a.post{text-decoration:none;color:inherit}
.gerelateerd .post .eyebrow{color:var(--muted)}
.gerelateerd .post h3{color:var(--text)}
.gerelateerd .post p{color:var(--muted)}
.gerelateerd .post .artikel__meta{color:var(--muted);font-size:14px}
/* knoppen in de artikeltekst zijn geen inline-links: eigen kleur, geen streep */
.artikel__body a.btn{text-decoration:none;color:var(--text)}
.artikel__body a.btn--accent{color:var(--on-gold)}
/* met meer dan een gerelateerd artikel naast elkaar, gestapeld op smal */
.gerelateerd .blog{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* variant van de callout voor een let-op-passage: zelfde kader, leesbare
   tekstgrootte in plaats van de grote gouden regel */
.callout--let p{color:var(--muted);font-size:17px;line-height:28px;font-weight:500}
.callout--let p + p{margin-top:12px}
.callout--let strong{color:var(--gold-light);font-weight:800;display:block;margin-bottom:8px}

/* bronnenblok: sober, geen accentkleur, duidelijk ondergeschikt aan de tekst */
.bronnen{margin-top:var(--g-48);padding-top:var(--g-32);border-top:1px solid var(--border)}
.bronnen__kop{font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);
  letter-spacing:var(--ls-eyebrow);font-weight:700;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px}
.bronnen ol{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:bron}
.bronnen li{counter-increment:bron;position:relative;padding-left:28px;
  color:var(--muted);font-size:15px;line-height:24px}
.bronnen li::before{content:counter(bron) ".";position:absolute;left:0;top:0;
  color:var(--border-gold);font-weight:800}
.artikel__body .bronnen a{color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;word-break:break-word}
.artikel__body .bronnen a:hover{color:var(--gold-light)}
.bronnen__noot{margin-top:16px;color:var(--muted);font-size:14px;line-height:22px;opacity:.85}

/* Blogkaarten: de kop is op /blog een <h2> (semantisch juist onder de paginatitel)
   maar moet de kaartmaat houden, niet de sectiekopmaat. min-width:0 laat de
   grid-kolom krimpen; zonder dat duwt een lange kop de kaart buiten beeld. */
.blog{min-width:0}
.blog > *{min-width:0}
.post__body h2{font-size:20px;line-height:28px;letter-spacing:-.2px;
  font-weight:800;text-transform:uppercase;color:var(--text)}
.post__body h2,.post__body h3{overflow-wrap:break-word}

/* Afbeeldingen in een artikel. Vaste verhouding voorkomt layout shift; de
   hero laadt eager omdat hij het LCP-element is. */
.artikel__beeld{margin:32px 0}
.artikel__beeld img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  object-position:50% 42%;border-radius:var(--r-card);display:block}
.artikel__beeld figcaption{margin-top:10px;color:var(--muted);font-size:14px;line-height:22px}
.artikel__kop .artikel__beeld{margin:8px 0 0}
@media (max-width:639px){
  .artikel__beeld{margin:24px 0}
  .artikel__beeld img{aspect-ratio:4/3}
}