/* ============================================================
   Geldstroom · huisstijl
   Palet:  donkerrood #620021 · limoen #eeff86 · lila #d4c2fc
           gebroken wit #fdf6e9 · donkergrijs #33343b
   Type:   The Seasons (koppen, met Cormorant-fallback)
           Cormorant Garamond (lopende tekst)
           Jost (labels, navigatie, knoppen, data)
   ============================================================ */

:root{
  --wine:#620021;
  --wine-deep:#4c001a;
  --lime:#eeff86;
  --lilac:#d4c2fc;
  --lilac-soft:#ece3fd;
  --bg:#fdf6e9;
  --ink:#33343b;
  /* #71727c haalde 3,9:1 op crème en 4,0:1 op de lila pillen: te licht om te
     lezen. Deze tint blijft duidelijk gedempt en haalt overal minstens 5:1. */
  --muted:#5f606a;
  --line:rgba(51,52,59,.14);
  --line-soft:rgba(51,52,59,.08);
  --on-wine:#fdf6e9;

  --font-display:"The Seasons","Cormorant Garamond",Georgia,serif;
  --font-body:"Cormorant Garamond",Georgia,serif;
  --font-ui:"Jost",system-ui,sans-serif;

  --shell:1140px;
  --prose:62ch;
  --radius:2px;
  --pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Beeld: vervang deze paden zodra de foto's in /img staan. Zie img/README.md */
  --photo-hero:url("img/hero.jpg");
  --photo-elke:url("img/elke-portret.jpg");
  --photo-coaching:url("img/coaching.jpg");
  --photo-coaching-elke:url("img/coaching-elke.jpg");
  --photo-coaching-aanpak:url("img/coaching-aanpak.jpg");
  --photo-coaching-band:url("img/coaching-band.jpg");
  --photo-coaching-probleem:url("img/coaching-probleem.jpg");
  --photo-coaching-keuze:url("img/coaching-keuze.jpg");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.22rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%;display:block}
a{color:var(--wine)}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:3px;
  border-radius:2px;
}
/* Op de bordeaux banden en in de donkere footer valt een bordeaux focusrand
   volledig weg, juist waar de hoofdknop staat. Daar gaat hij naar limoen. */
.section-wine :focus-visible,
.on-dark :focus-visible,
.site-footer :focus-visible{outline-color:var(--lime)}

.shell{max-width:var(--shell);margin:0 auto;padding:0 24px}

.skip-link{
  position:absolute;left:-999px;top:8px;z-index:200;
  background:var(--wine);color:var(--on-wine);
  font-family:var(--font-ui);font-size:.85rem;
  padding:10px 18px;border-radius:var(--radius);
}
.skip-link:focus{left:8px}

/* ---------- typografie ---------- */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:300;
  line-height:1.06;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{font-size:clamp(3rem,7.4vw,5.6rem);letter-spacing:-.015em}
h2{font-size:clamp(2.1rem,4.6vw,3.5rem);letter-spacing:-.01em}
h3{font-size:1.5rem;font-weight:400;line-height:1.2}
h1 em,h2 em{font-style:italic;font-weight:300}
p{margin:0 0 1em;max-width:var(--prose)}
.lead{font-size:1.35rem;line-height:1.55}
strong{font-weight:700}

.eyebrow{
  font-family:var(--font-ui);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--wine);
  margin:0 0 1.1rem;
}
.on-dark .eyebrow{color:var(--lime)}

.mark{
  background:linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%);
  padding:0 .06em;
}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-ui);
  font-size:.86rem;font-weight:400;
  letter-spacing:.09em;
  text-decoration:none;
  padding:17px 40px;
  min-height:48px;
  border-radius:var(--pill);
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease);
  touch-action:manipulation;
}
.btn svg{width:17px;height:17px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--wine);color:var(--on-wine)}
.btn-primary:hover{background:var(--wine-deep)}
.btn-ghost{background:transparent;color:var(--wine);border-color:var(--wine)}
.btn-ghost:hover{background:var(--wine);color:var(--on-wine)}
.on-dark .btn-primary{background:var(--lime);color:var(--ink)}
.on-dark .btn-primary:hover{background:#e4f76e}
.btn-note{
  display:block;margin-top:.9rem;
  font-family:var(--font-ui);font-size:.8rem;color:var(--muted);
  letter-spacing:.03em;
}
.on-dark .btn-note{color:rgba(253,246,233,.66)}

.text-link{
  font-family:var(--font-ui);font-size:.9rem;font-weight:500;
  letter-spacing:.05em;color:var(--wine);
  text-decoration:none;border-bottom:1px solid var(--wine);
  padding-bottom:2px;
  transition:border-color .2s,color .2s;
}
.text-link:hover{color:var(--wine-deep)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(253,246,233,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-bar{
  display:flex;align-items:center;justify-content:space-between;
  min-height:76px;gap:24px;
}
.wordmark{
  font-family:var(--font-display);
  font-size:1.6rem;color:var(--ink);
  text-decoration:none;letter-spacing:.01em;
}
.wordmark .dot{color:var(--wine)}

.nav-links{
  display:flex;align-items:center;gap:2.1rem;
  list-style:none;margin:0;padding:0;
  font-family:var(--font-ui);font-size:.88rem;font-weight:400;
  letter-spacing:.08em;
}
.nav-links a{color:var(--ink);text-decoration:none;padding:10px 0;transition:color .2s}
.nav-links a:hover{color:var(--wine)}
.nav-links a[aria-current="page"]{color:var(--wine);border-bottom:1px solid var(--wine)}

.has-sub{position:relative}
.sub-toggle{
  display:flex;align-items:center;gap:.4em;
  background:none;border:0;padding:10px 0;
  font:inherit;letter-spacing:inherit;color:var(--ink);cursor:pointer;
}
.sub-toggle:hover{color:var(--wine)}
.sub-toggle svg{width:11px;height:11px;transition:transform .2s}
.has-sub.open .sub-toggle svg{transform:rotate(180deg)}
.sub-menu{
  position:absolute;top:100%;left:-22px;min-width:230px;
  background:#fff;border:1px solid var(--line-soft);
  box-shadow:0 18px 44px rgba(51,52,59,.10);
  border-radius:var(--radius);
  padding:10px 0;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.has-sub.open .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu a{display:block;padding:10px 22px}
.sub-menu .sub-note{
  display:block;font-size:.72rem;color:var(--muted);
  letter-spacing:.03em;margin-top:2px;
}

.nav-cta{margin-left:.4rem}
.nav-cta .btn{padding:12px 26px;font-size:.84rem}

.nav-burger{
  display:none;
  background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;
}
.nav-burger span{
  display:block;height:1.5px;background:var(--ink);
  margin:5px 0;transition:transform .25s var(--ease),opacity .2s;
}
.nav-open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-open .nav-burger span:nth-child(2){opacity:0}
.nav-open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:920px){
  .nav-burger{display:block}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line-soft);
    padding:12px 24px 28px;
    display:none;
  }
  .nav-open .nav-links{display:flex}
  .nav-links li{width:100%}
  .nav-links a,.sub-toggle{display:block;width:100%;padding:14px 0;font-size:1rem}
  .sub-menu{
    position:static;box-shadow:none;border:0;background:transparent;
    opacity:1;visibility:visible;transform:none;
    display:none;padding:0 0 0 18px;
  }
  .has-sub.open .sub-menu{display:block}
  .nav-cta{margin:14px 0 0}
}

/* ---------- hero ---------- */
.hero{padding:clamp(84px,12vw,150px) 0 clamp(64px,9vw,110px);position:relative;overflow:hidden}
.hero .shell{position:relative}
.hero h1{max-width:13em}
.hero .lead{max-width:33em;margin-bottom:2.4rem}
.hero-stroom{
  position:absolute;right:-6%;top:-8%;width:min(560px,58vw);
  opacity:.5;pointer-events:none;
}

/* ---------- secties ---------- */
.section{padding:clamp(72px,9vw,128px) 0}
.section-tight{padding:clamp(48px,6vw,80px) 0}
.section-lilac{background:var(--lilac-soft)}
.section-wine{background:var(--wine);color:var(--on-wine)}
.section-wine h2,.section-wine h3{color:var(--on-wine)}
.section-wine p{color:rgba(253,246,233,.9)}

.split{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(40px,6vw,96px);align-items:start;
}
.split.rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
@media (max-width:820px){
  .split,.split.rev{grid-template-columns:1fr}
}

.stroom-divider{margin:0 auto;padding:8px 0;width:min(340px,68vw);opacity:.85}

/* ---------- herkenning-quotes ---------- */
.quote-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:18px;margin-top:3rem;
}
@media (max-width:720px){.quote-grid{grid-template-columns:1fr}}
.quote-card{
  background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:34px 34px 30px;position:relative;
}
.quote-card::before{
  content:"“";
  font-family:var(--font-display);
  font-size:3.4rem;line-height:0;
  color:var(--lilac);
  position:absolute;top:34px;left:30px;
}
.quote-card p{
  font-size:1.28rem;font-style:italic;line-height:1.45;
  margin:14px 0 0;padding-left:0;
}

/* ---------- pull quote ---------- */
.pull{
  font-family:var(--font-display);
  font-size:clamp(2rem,4.6vw,3.3rem);
  font-style:italic;line-height:1.2;
  max-width:16em;margin:0;
}

/* ---------- aanbod-kaarten ---------- */
.offer-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;margin-top:3rem;
}
@media (max-width:900px){.offer-grid{grid-template-columns:1fr}}
.offer-card{
  background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:40px 36px 36px;
  display:flex;flex-direction:column;gap:.4rem;
  text-decoration:none;color:var(--ink);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.offer-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(51,52,59,.08);
  border-color:var(--lilac);
}
.offer-card .k{
  font-family:var(--font-ui);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.offer-card h3{margin:.5rem 0 .4rem}
.offer-card p{font-size:1.05rem;margin-bottom:1.2rem}
.offer-card .p{
  margin-top:auto;
  font-family:var(--font-ui);font-size:.86rem;color:var(--wine);
  letter-spacing:.04em;
}

/* ---------- prijzen (coaching) ---------- */
.price-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;margin-top:3.4rem;align-items:stretch;
}
@media (max-width:940px){.price-grid{grid-template-columns:1fr;max-width:460px}}
.price-card{
  background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:42px 36px 38px;
  display:flex;flex-direction:column;
  position:relative;
}
.price-card.featured{
  border:1px solid var(--wine);
  box-shadow:0 26px 60px rgba(98,0,33,.10);
}
.badge{
  position:absolute;top:-13px;left:36px;
  font-family:var(--font-ui);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--lime);color:var(--ink);
  padding:5px 14px;border-radius:var(--radius);
}
.price-card .naam{
  font-family:var(--font-display);font-size:1.7rem;margin:0 0 .1rem;
}
.price-card .duur{
  font-family:var(--font-ui);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1.6rem;
}
.price-card .bedrag{
  font-family:var(--font-display);font-size:2.5rem;line-height:1;
  font-variant-numeric:tabular-nums;
}
.price-card .bedrag small{
  font-family:var(--font-ui);font-size:.82rem;color:var(--muted);letter-spacing:.03em;
}
.price-card .totaal{
  font-family:var(--font-ui);font-size:.8rem;color:var(--muted);
  margin:.5rem 0 1.7rem;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
.price-card .belofte{
  font-style:italic;font-size:1.14rem;line-height:1.5;
  border-top:1px solid var(--line-soft);
  padding-top:1.3rem;margin:0 0 1.2rem;
}
.price-card ul{
  list-style:none;margin:0 0 1.8rem;padding:0;
  font-family:var(--font-ui);font-size:.88rem;line-height:1.55;
  display:flex;flex-direction:column;gap:.55rem;
}
.price-card ul li{padding-left:22px;position:relative}
.price-card ul li::before{
  content:"";position:absolute;left:2px;top:.52em;
  width:9px;height:9px;border-radius:50%;
  background:var(--lilac);
}
.price-card .voorwie{
  margin-top:auto;font-size:1rem;font-style:italic;color:var(--muted);
}
.prijs-voetnoot{
  font-family:var(--font-ui);font-size:.8rem;color:var(--muted);
  margin-top:1.6rem;letter-spacing:.03em;
}

/* ---------- stappen ---------- */
.steps{margin-top:3rem;display:flex;flex-direction:column}
.step-row{
  display:grid;grid-template-columns:110px 1fr;gap:28px;
  padding:34px 0;border-top:1px solid var(--line-soft);
}
.step-row:last-child{border-bottom:1px solid var(--line-soft)}
@media (max-width:640px){.step-row{grid-template-columns:64px 1fr;gap:18px}}
.step-num{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,5vw,3.8rem);
  line-height:1;color:var(--lilac);
  font-style:italic;
}
.step-row h3{margin-bottom:.35rem}
.step-row p{font-size:1.08rem;margin:0}

/* ---------- lijsten ---------- */
.check-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);
  margin-top:2.6rem;
}
@media (max-width:760px){.check-cols{grid-template-columns:1fr}}
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.check-list li{
  padding-left:34px;position:relative;font-size:1.12rem;line-height:1.5;
}
.check-list li svg{
  position:absolute;left:0;top:.28em;width:19px;height:19px;
}
.check-list .ja svg{color:var(--wine)}
.check-list .nee svg{color:var(--muted)}
.check-title{
  font-family:var(--font-ui);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem;
}

/* ---------- faq ---------- */
.faq{margin-top:2.6rem;border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 4px;
  font-family:var(--font-display);font-size:1.3rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--font-ui);font-size:1.4rem;font-weight:300;
  color:var(--wine);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 4px 26px;font-size:1.1rem}

/* ---------- verhalen ---------- */
.story{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(28px,5vw,80px);
  padding:clamp(48px,6vw,72px) 0;
  border-top:1px solid var(--line-soft);
}
@media (max-width:820px){.story{grid-template-columns:1fr}}
.story:last-of-type{border-bottom:1px solid var(--line-soft)}
.story .wie{
  font-family:var(--font-display);font-size:1.9rem;font-style:italic;line-height:1.2;
}
.story .wie small{
  display:block;font-family:var(--font-ui);font-style:normal;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-top:.9rem;
}
.story dl{margin:0}
.story dt{
  font-family:var(--font-ui);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wine);margin:1.6rem 0 .4rem;
}
.story dt:first-child{margin-top:0}
.story dd{margin:0;font-size:1.12rem}

/* ---------- dashboard-mock (inzicht) ---------- */
.mock{
  background:#fff;border:1px solid var(--line-soft);
  border-radius:6px;
  box-shadow:0 34px 80px rgba(51,52,59,.12);
  padding:30px 30px 26px;
  font-family:var(--font-ui);
}
.mock .mock-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:22px;gap:12px;flex-wrap:wrap;
}
.mock .mock-title{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pill{
  font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 14px;border-radius:99px;
  background:var(--lime);color:var(--ink);
}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:480px){.mock-stats{grid-template-columns:1fr}}
.mock-stat{
  border:1px solid var(--line-soft);border-radius:4px;padding:16px 16px 14px;
}
.mock-stat .l{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mock-stat .v{
  font-family:var(--font-display);font-size:1.55rem;margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.mock-bars{display:flex;align-items:flex-end;gap:10px;height:88px;margin-top:22px}
.mock-bars i{
  flex:1;background:var(--lilac);border-radius:3px 3px 0 0;display:block;
}
.mock-bars i:nth-child(6){background:var(--wine)}
.mock-res{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:10px;
}
.mock-res .r{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted)}
.mock-res .r b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- cta-band ---------- */
.cta-band{padding:clamp(80px,10vw,130px) 0;text-align:center}
.cta-band h2{max-width:15em;margin-left:auto;margin-right:auto}
.cta-band p{max-width:34em;margin:0 auto 2.4rem}
.cta-band .btn{margin:0 auto}

/* ---------- footer ---------- */
.site-footer{
  background:#33343b;color:rgba(253,246,233,.82);
  padding:clamp(56px,7vw,84px) 0 36px;
  font-family:var(--font-ui);font-size:.88rem;letter-spacing:.02em;
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1.6fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:44px;border-bottom:1px solid rgba(253,246,233,.14);
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer .wordmark{color:#fdf6e9;font-size:1.5rem}
.footer-tag{
  font-family:var(--font-body);font-style:italic;font-size:1.15rem;
  color:rgba(253,246,233,.7);margin-top:1rem;max-width:20em;
}
.footer-h{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(253,246,233,.5);margin:0 0 1.1rem;
}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.site-footer a{color:rgba(253,246,233,.82);text-decoration:none;transition:color .2s}
.site-footer a:hover{color:var(--lime)}
.nb-form{display:flex;gap:0;margin-top:.4rem;max-width:340px}
.nb-form input{
  flex:1;min-width:0;
  background:transparent;border:1px solid rgba(253,246,233,.3);border-right:0;
  color:#fdf6e9;font-family:var(--font-ui);font-size:.86rem;
  padding:13px 16px;border-radius:var(--radius) 0 0 var(--radius);
}
.nb-form input::placeholder{color:rgba(253,246,233,.45)}
.nb-form button{
  background:var(--lime);color:var(--ink);border:0;cursor:pointer;
  font-family:var(--font-ui);font-size:.8rem;font-weight:500;letter-spacing:.08em;
  padding:13px 20px;border-radius:0 var(--radius) var(--radius) 0;
  min-height:44px;
}
.nb-form button:hover{background:#e4f76e}
.nb-note{font-size:.74rem;color:rgba(253,246,233,.5);margin-top:.8rem}
.footer-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:28px;font-size:.76rem;color:rgba(253,246,233,.5);
}
.footer-bottom a{color:rgba(253,246,233,.62)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- kleinigheden ---------- */
.note-box{
  background:var(--lilac-soft);border-radius:var(--radius);
  padding:26px 30px;margin-top:2.4rem;max-width:44em;
}
.note-box p{margin:0;font-size:1.08rem}
.center{text-align:center}
.center p,.center h2{margin-left:auto;margin-right:auto}
.mt-0{margin-top:0}
.small-ui{font-family:var(--font-ui);font-size:.82rem;color:var(--muted);letter-spacing:.03em}

/* calendly */
.calendly-holder{
  margin-top:3rem;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);min-height:680px;
}

/* ---------- leesbaarheid: nooit donker op donker ---------- */
/* .nav-links a zet color:ink en overschrijft anders de knoptekst.
   Knoppen houden altijd hun eigen contrasterende tekstkleur. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover{color:var(--on-wine)}
.nav-links a.btn-ghost{color:var(--wine)}
.nav-links a.btn-ghost:hover{color:var(--on-wine)}
.on-dark .btn-primary,
.on-dark .btn-primary:hover{color:var(--ink)}

/* ============================================================
   EDITORIAL LAAG — grote beeldvlakken, veel rust, lichte typografie
   Beeldpaden staan als variabelen bovenaan (--photo-*).
   Zolang een foto ontbreekt toont het vlak een verzorgd kleurverloop.
   ============================================================ */

/* ---------- beeldvlak ---------- */
.figure{
  position:relative;
  background-color:var(--lilac-soft);
  background-image:linear-gradient(135deg,var(--lilac-soft) 0%,#f7efe1 55%,var(--lilac) 100%);
  background-size:cover;
  background-position:center;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/5;
}
.figure::after{
  content:attr(data-slot);
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 18px;
  font-family:var(--font-ui);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
  background:linear-gradient(transparent,rgba(253,246,233,.9));
}
.figure.has-photo::after{display:none}
.figure-elke{background-image:var(--photo-elke),linear-gradient(135deg,var(--lilac-soft),var(--lilac))}
.figure-coaching{background-image:var(--photo-coaching),linear-gradient(135deg,var(--lilac-soft),var(--lilac))}
.figure-coaching-elke{background-image:var(--photo-coaching-elke),linear-gradient(135deg,var(--lilac-soft),var(--lilac))}
.figure-coaching-aanpak{background-image:var(--photo-coaching-aanpak),linear-gradient(135deg,var(--lilac-soft),var(--lilac))}
.figure-coaching-band{background-image:var(--photo-coaching-band),linear-gradient(135deg,var(--lilac-soft),var(--lilac))}
.figure-coaching-probleem{background-image:var(--photo-coaching-probleem),linear-gradient(135deg,var(--lilac-soft),var(--lilac))}
.figure-coaching-keuze{background-image:var(--photo-coaching-keuze),linear-gradient(135deg,var(--lilac-soft),var(--lilac))}
/* Eén staand beeld gecentreerd, als leesteken tussen twee tekstblokken. */
.figure-midden{max-width:400px;margin-left:auto;margin-right:auto}
.figure-wide{aspect-ratio:3/2}
/* Een rustmoment tussen twee tekstblokken. Panoramisch, zodat het een strook
   blijft en geen tweede blok dat om aandacht vraagt. */
.figure-band{aspect-ratio:12/5}
@media (max-width:720px){.figure-band{aspect-ratio:4/3}}

/* ---------- fotografische hero ---------- */
.hero-photo{
  position:relative;
  min-height:min(92vh,860px);
  display:flex;align-items:flex-end;
  padding:clamp(70px,11vw,140px) 0 clamp(56px,7vw,92px);
  background-color:#f3e7d4;
  background-image:var(--photo-hero);
  background-size:cover;
  background-position:center 42%;
  overflow:hidden;
}
/* De foto is warm en licht. In plaats van hem te verdonkeren leggen we een
   cremesluier over de linkerhelft, zodat de donkere tekst daar leesbaar staat
   en de zee en de lucht rechts helder blijven. */
.hero-photo::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(253,246,233,.86) 0%,rgba(253,246,233,.52) 34%,rgba(253,246,233,0) 66%),
    linear-gradient(180deg,rgba(253,246,233,0) 50%,rgba(253,246,233,.34) 100%);
}
.hero-photo .shell{position:relative;z-index:2}
/* De titel breekt bewust smal af, zodat hij links van Elke blijft staan en
   niet over haar gezicht loopt. */
.hero-photo h1{
  color:var(--ink);max-width:8em;
  margin-bottom:.42em;
}
.hero-photo .eyebrow{color:var(--wine);margin-bottom:1.4rem}
.hero-photo .lead{
  color:var(--ink);max-width:26em;margin-bottom:2.6rem;
}
.hero-photo .btn-ghost{color:var(--wine);border-color:rgba(98,0,33,.42)}
.hero-photo .btn-ghost:hover{background:var(--wine);color:var(--bg);border-color:var(--wine)}
.hero-photo .btn-note,.hero-photo .small-ui{color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-actions .btn-note{flex-basis:100%;margin-top:.2rem}

/* ---------- manifest: gecentreerde uitspraak ---------- */
.manifest{
  padding:clamp(90px,12vw,168px) 0;
  text-align:center;
  background:linear-gradient(180deg,#fdf6e9 0%,#f9f0df 100%);
}
.manifest h2{
  max-width:19em;margin-inline:auto;
  font-size:clamp(2rem,4.4vw,3.3rem);
}
.manifest p{max-width:52ch;margin-inline:auto}
.manifest .btn{margin-top:2.2rem}

/* ---------- editorial rij: beeld naast tekst ---------- */
.ed-row{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(38px,6vw,92px);
  align-items:center;
  padding:clamp(46px,6vw,74px) 0;
}
.ed-row + .ed-row{border-top:1px solid var(--line-soft)}
.ed-row.rev .ed-media{order:2}
.ed-body .eyebrow{margin-bottom:.9rem}
.ed-body h2,.ed-body h3{
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  font-weight:300;margin-bottom:.5em;
}
.ed-body p{max-width:46ch}
.ed-body .text-link{display:inline-block;margin-top:.6rem}
@media (max-width:820px){
  .ed-row,.ed-row.rev{grid-template-columns:1fr;gap:30px}
  .ed-row.rev .ed-media{order:0}
  /* Alleen de beelden in een beeldrij worden liggend op gsm. Deze regel gold
     eerst voor élke .figure, waardoor staande portretten tot 3/2 werden
     platgedrukt en er koppen wegvielen. */
  .ed-row .figure{aspect-ratio:3/2}
}

/* ---------- beeldkaart met tekst erover ---------- */
.photo-card{
  position:relative;
  min-height:clamp(340px,44vw,520px);
  display:flex;align-items:flex-end;
  background-color:#2a1015;background-size:cover;background-position:center;
  border-radius:var(--radius);overflow:hidden;
  padding:clamp(28px,4vw,46px);
}
.photo-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,10,14,.15) 30%,rgba(28,10,14,.82) 100%);
}
.photo-card > *{position:relative;z-index:2}
.photo-card h3{color:#fdf6e9;font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.35em}
.photo-card p{color:rgba(253,246,233,.9);max-width:34ch;font-size:1.05rem}
.photo-card .btn{margin-top:1.3rem;background:var(--bg);color:var(--wine)}

/* ---------- fijne scheidingslijn ---------- */
.hairline{border:0;border-top:1px solid var(--line-soft);margin:0}

/* ---------- transparante header boven een fotohero ---------- */
body:has(.hero-photo) .site-header{
  position:fixed;left:0;right:0;top:0;
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
body:has(.hero-photo) .site-header .wordmark,
body:has(.hero-photo) .nav-links > li > a,
body:has(.hero-photo) .sub-toggle{color:var(--ink)}
body:has(.hero-photo) .wordmark .dot{color:var(--wine)}
body:has(.hero-photo) .nav-burger span{background:var(--ink)}
body:has(.hero-photo) .nav-cta .btn-primary{
  background:var(--wine);color:var(--on-wine);border-color:transparent;
}
body:has(.hero-photo) .nav-cta .btn-primary:hover{background:var(--wine-deep);color:var(--on-wine);border-color:transparent}
/* de hero begint achter de vaste header */
body:has(.hero-photo) .hero-photo{padding-top:calc(clamp(70px,11vw,140px) + 76px)}

/* zodra je scrolt wordt de header weer licht en de tekst donker */
body:has(.hero-photo) .site-header.scrolled{
  background:rgba(253,246,233,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line-soft);
}
body:has(.hero-photo) .site-header.scrolled .wordmark,
body:has(.hero-photo) .site-header.scrolled .nav-links > li > a,
body:has(.hero-photo) .site-header.scrolled .sub-toggle{color:var(--ink)}
body:has(.hero-photo) .site-header.scrolled .wordmark .dot{color:var(--wine)}
body:has(.hero-photo) .site-header.scrolled .nav-burger span{background:var(--ink)}
body:has(.hero-photo) .site-header.scrolled .nav-cta .btn-primary{
  background:var(--wine);color:var(--on-wine);border-color:transparent;
}

/* uitklapmenu heeft een lichte achtergrond: altijd donkere tekst */
body:has(.hero-photo) .sub-menu a{color:var(--ink)}
body:has(.hero-photo) .sub-menu a:hover{color:var(--wine)}

/* mobiel menu klapt open op gebroken wit: altijd donkere tekst */
@media (max-width:920px){
  body:has(.hero-photo) .nav-links > li > a,
  body:has(.hero-photo) .sub-toggle{color:var(--ink)}
  body:has(.hero-photo) .nav-cta .btn-primary{
    background:var(--wine);color:var(--on-wine);border-color:transparent;
  }
}

/* mobiel: "Aanbod" bleef als block renderen waardoor het pijltje onder de
   tekst viel. Terug naar flex zodat label en chevron netjes naast elkaar staan. */
@media (max-width:920px){
  .nav-links .sub-toggle{
    display:flex;align-items:center;justify-content:flex-start;
    gap:.5em;text-align:left;
  }
}

/* ============================================================
   DE DRIE FASES
   Een reis van links naar rechts: een doorlopende lijn met drie
   haltes. Het nummer zit in een cirkel op de lijn, de kaart eronder
   kantelt licht omhoog bij hover. Op smalle schermen wordt de lijn
   verticaal en schuiven de kaarten ernaast.
   ============================================================ */
.fases-band{
  position:relative;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(212,194,252,.34) 0%, rgba(212,194,252,0) 58%),
    radial-gradient(90% 70% at 92% 100%, rgba(238,255,134,.22) 0%, rgba(238,255,134,0) 60%),
    linear-gradient(180deg,#fdf6e9 0%,#faf2e2 100%);
  overflow:hidden;
}
.fases-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(51,52,59,.055) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.fases-band > .shell{position:relative;z-index:1}

.fases{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,42px);
  margin-top:clamp(48px,6vw,78px);
  counter-reset:fase;
}
/* de doorlopende lijn achter de drie haltes */
.fases::before{
  content:"";
  position:absolute;left:0;right:0;top:26px;height:1px;
  background:linear-gradient(90deg,
    rgba(98,0,33,0) 0%, rgba(98,0,33,.42) 8%,
    rgba(98,0,33,.42) 92%, rgba(98,0,33,0) 100%);
}

.fase{
  position:relative;
  padding-top:74px;
}
/* het nummer als halte op de lijn */
.fase-nr{
  position:absolute;top:0;left:0;
  width:53px;height:53px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--bg);
  border:1px solid rgba(98,0,33,.32);
  font-family:var(--font-ui);
  font-size:.82rem;font-weight:500;letter-spacing:.12em;
  color:var(--wine);
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease);
}
.fase-kaart{
  background:rgba(255,255,255,.72);
  border:1px solid var(--line-soft);
  border-radius:3px;
  padding:clamp(24px,2.6vw,34px);
  height:100%;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),
             border-color .4s var(--ease);
}
.fase:hover .fase-kaart{
  transform:translateY(-6px);
  box-shadow:0 22px 48px rgba(51,52,59,.09);
  border-color:rgba(98,0,33,.18);
}
.fase:hover .fase-nr{
  background:var(--wine);color:var(--bg);
  border-color:var(--wine);
  transform:scale(1.06);
}
.fase h3{
  font-size:clamp(1.45rem,2.2vw,1.9rem);
  font-weight:300;line-height:1.12;
  margin:0 0 .55em;
}
.fase p{font-size:1.06rem;line-height:1.55;max-width:none;margin-bottom:.8em}
.fase p:last-of-type{margin-bottom:0}

.fase-tags{
  display:flex;flex-wrap:wrap;gap:7px;
  margin:1.3rem 0 0;padding:1.3rem 0 0;list-style:none;
  border-top:1px solid var(--line-soft);
}
.fase-tags li{
  font-family:var(--font-ui);font-size:.73rem;letter-spacing:.04em;
  color:var(--muted);
  background:rgba(212,194,252,.26);
  border-radius:var(--pill);
  padding:5px 13px;
}

@media (max-width:900px){
  .fases{grid-template-columns:1fr;gap:0}
  .fases::before{
    left:26px;right:auto;top:0;bottom:0;width:1px;height:auto;
    background:linear-gradient(180deg,
      rgba(98,0,33,0) 0%, rgba(98,0,33,.42) 5%,
      rgba(98,0,33,.42) 95%, rgba(98,0,33,0) 100%);
  }
  .fase{padding:0 0 clamp(26px,5vw,40px) 82px}
  .fase:last-child{padding-bottom:0}
  .fase-nr{width:53px;height:53px;top:2px}
  .fase-kaart{backdrop-filter:none;-webkit-backdrop-filter:none}
  .fase:hover .fase-kaart{transform:none;box-shadow:none}
}
@media (max-width:520px){
  .fase{padding-left:0;padding-top:70px}
  .fases::before{display:none}
}

/* De navigatie staat in donkere inkt boven een lichte foto. Een zachte
   cremesluier bovenaan houdt haar leesbaar, ook waar de lucht wat dieper
   kleurt, zonder de foto te verdonkeren. */
body:has(.hero-photo) .site-header::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:230%;
  background:linear-gradient(180deg,rgba(253,246,233,.72) 0%,rgba(253,246,233,.34) 52%,rgba(253,246,233,0) 100%);
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
body:has(.hero-photo) .nav-bar{position:relative;z-index:1}
body:has(.hero-photo) .site-header.scrolled::before{opacity:0}

/* Op gsm wordt de hero sterk uitgesneden en staat de tekst over de hele
   breedte, ook over de donkere zee. Daar werkt een sluier van boven naar
   onder beter dan een van links naar rechts. */
@media (max-width:720px){
  .hero-photo::before{
    background:
      linear-gradient(180deg,rgba(253,246,233,.66) 0%,rgba(253,246,233,.58) 40%,rgba(253,246,233,.88) 100%);
  }
  /* Een smal scherm snijdt de brede foto in het midden door, waardoor Elke
     helemaal wegvalt. Het kader schuift daar mee naar rechts. */
  .hero-photo{background-position:88% 40%}
  .hero-photo h1{max-width:none}
}

/* ---------- drie persona's: elk herkent zich in één kolom ---------- */
.persona-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,24px);margin-top:clamp(34px,4vw,52px);
  align-items:stretch;
}
@media (max-width:900px){.persona-grid{grid-template-columns:1fr;max-width:520px}}
.persona{
  background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:clamp(26px,2.6vw,34px);
  display:flex;flex-direction:column;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.persona:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(51,52,59,.08)}
.persona .leven{
  font-family:var(--font-ui);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wine);
  margin:0 0 1.1rem;
}
.persona ul{list-style:none;margin:0 0 1.4rem;padding:0;flex:1}
.persona ul li{
  font-size:1.12rem;font-style:italic;line-height:1.42;
  color:var(--ink);margin-bottom:.85rem;padding-left:16px;
  border-left:2px solid var(--lilac);
}
.persona ul li:last-child{margin-bottom:0}
.persona .kern{
  font-family:var(--font-ui);font-size:.9rem;line-height:1.5;
  color:var(--muted);margin:0;padding-top:1.2rem;
  border-top:1px solid var(--line-soft);
}
.rode-draad{
  margin-top:clamp(30px,3.6vw,46px);
  font-size:1.2rem;max-width:44em;
}

/* ---------- juridische pagina's ----------
   Privacyverklaring en voorwaarden zijn lange lopende teksten met veel
   tussentitels. De koppen van de rest van de site zijn daar veel te groot
   voor, dus krijgen ze hier een eigen, bescheiden schaal. */
.legal{max-width:none}
.legal h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:.5rem}
.legal h2{
  font-size:clamp(1.5rem,2.4vw,1.95rem);
  line-height:1.2;
  margin:clamp(38px,4vw,56px) 0 .6rem;
  padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--line-soft);
  max-width:var(--prose);
}
.legal h3{
  font-family:var(--font-ui);
  font-size:.86rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--wine);
  margin:2rem 0 .7rem;
  max-width:var(--prose);
}
.legal p{font-size:1.05rem;line-height:1.62}
.legal ul{
  margin:0 0 1.4em;padding-left:1.1em;
  max-width:var(--prose);
  font-size:1.05rem;line-height:1.62;
}
.legal ul li{margin-bottom:.5em}
.legal .legal-address{
  font-family:var(--font-ui);font-size:.95rem;line-height:1.7;
  padding:18px 22px;border-left:2px solid var(--lilac);
  background:var(--lilac-soft);
}
.legal .small-ui{margin-bottom:clamp(30px,3.4vw,44px)}

/* ---------- transformatie: voor en na, in hun eigen woorden ----------
   De site vertelde wel wat de begeleiding inhoudt, maar niet wat ze
   verandert. Dit blok zet het vertrekpunt naast het resultaat, per vrouw,
   zodat het verschil in één oogopslag te zien is. */
.transformaties{
  display:grid;gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(34px,4.2vw,52px);
}
.transformatie{
  background:rgba(255,255,255,.62);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,30px);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.transformatie:hover{
  transform:translateY(-4px);
  border-color:rgba(98,0,33,.22);
  box-shadow:0 16px 40px rgba(51,52,59,.07);
}
.tr-wie{
  font-family:var(--font-ui);
  font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wine);margin:0 0 1.1rem;max-width:none;
}
.tr-wie span{
  color:var(--muted);letter-spacing:.1em;
  text-transform:none;font-weight:300;
}
.tr-wie span::before{content:" · "}

/* Twee kolommen met een pijl ertussen. De pijl is het hele punt: er zit
   beweging tussen links en rechts. */
.tr-paar{
  display:grid;
  grid-template-columns:1fr 44px 1fr;
  align-items:center;
  gap:0;
}
.tr-voor,.tr-na{margin:0}
.tr-voor p,.tr-na p{margin:0;font-size:1.12rem;line-height:1.5;max-width:none}
.tr-voor p{color:var(--muted)}
.tr-na p{color:var(--ink)}
.tr-label{
  display:block;
  font-family:var(--font-ui);
  font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:.5rem;
}
.tr-voor .tr-label{color:var(--muted)}
.tr-na .tr-label{color:var(--wine)}
.tr-pijl{
  display:flex;align-items:center;justify-content:center;
  color:var(--wine);
}
.tr-pijl svg{width:22px;height:22px}

@media (max-width:720px){
  .tr-paar{grid-template-columns:1fr;gap:14px}
  .tr-pijl{justify-content:flex-start}
  .tr-pijl svg{transform:rotate(90deg)}
}

/* ---------- videogetuigenissen ----------
   Een gezicht dat praat overtuigt sterker dan een citaat. preload="none"
   zodat de pagina niet trager wordt: pas bij klikken laadt de video. */
.video-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);
  margin-top:clamp(30px,3.6vw,46px);
}
@media (max-width:900px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.video-grid{grid-template-columns:1fr;max-width:420px}}

.video-kaart{margin:0}
.video-kaart video{
  width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  background:var(--lilac-soft);
  border-radius:var(--radius);
  display:block;
}
/* Liggende opnames mogen breder staan dan staande telefoonbeelden. */
.video-kaart.liggend video{aspect-ratio:16/9}
.video-kaart figcaption{
  font-family:var(--font-ui);
  font-size:.82rem;line-height:1.5;
  color:var(--muted);
  margin-top:.85rem;
}
.video-kaart figcaption b{
  display:block;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  font-size:.74rem;color:var(--wine);margin-bottom:.25rem;
}

/* ---------- uitgeschreven video ----------
   Wie zonder geluid kijkt of slecht hoort, moet er ook bij kunnen. */
.transcript{
  margin-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--line-soft);
  padding-top:1.4rem;
  max-width:var(--prose);
}
.transcript summary{
  font-family:var(--font-ui);
  font-size:.86rem;font-weight:500;letter-spacing:.06em;
  color:var(--wine);cursor:pointer;
  list-style:none;
  padding:.4rem 0;
}
.transcript summary::-webkit-details-marker{display:none}
.transcript summary::before{
  content:"+ ";font-weight:400;
}
.transcript[open] summary::before{content:"– "}
.transcript summary:hover{color:var(--wine-deep)}
.transcript p{
  font-size:1.08rem;line-height:1.6;
  color:var(--muted);
  margin:1rem 0 0;
}

/* ---------- prijzen op gsm: swipen in plaats van scrollen ----------
   Gestapeld werden de drie kaarten samen 2364 pixels hoog, drie volle
   schermen. Vergelijken was daardoor onmogelijk: je zag nooit twee prijzen
   tegelijk. Nu staan ze naast elkaar en swipe je ertussen, met de volgende
   kaart altijd half in beeld zodat je ziet dat er meer is. */
@media (max-width:780px){
  .prijs-swipe-hint{
    display:flex;align-items:center;gap:.55em;
    font-family:var(--font-ui);font-size:.78rem;letter-spacing:.08em;
    color:var(--muted);margin:2.6rem 0 -1.6rem;
  }
  .prijs-swipe-hint svg{width:16px;height:16px;flex:none}

  .price-grid{
    display:flex;
    grid-template-columns:none;
    max-width:none;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:24px;
    /* uit de shell breken zodat er tot de schermrand geschoven kan worden */
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:4px 24px 20px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .price-grid::-webkit-scrollbar{display:none}

  .price-card{
    flex:0 0 79vw;
    max-width:330px;
    scroll-snap-align:center;
    padding:34px 28px 30px;
  }
  /* De aanbevolen kaart mag opvallen, ook halverwege een swipe. */
  .price-card.featured{scroll-snap-align:center}
}
@media (min-width:781px){.prijs-swipe-hint{display:none}}

/* ---------- gsm: velden, raakvlakken en één vaste actie ----------
   Safari zoomt de hele pagina in zodra je een veld aantikt dat kleiner is
   dan 16px. Dat gebeurde bij het nieuwsbriefveld en bij de Geldcheck. */
@media (max-width:780px){
  input,textarea,select{font-size:16px!important}

  /* Footerlinks stonden op 21px hoog. Met een duim mik je daar naast. */
  .site-footer ul a,
  .footer-bottom a{
    display:inline-block;
    padding:11px 0;
    line-height:1.2;
  }
  .footer-bottom span{line-height:2.2}

  .transcript summary{padding:.8rem 0}
}

/* ---------- vaste actiebalk op gsm ----------
   Wordt door js/main.js aangemaakt. Blijft onder de veilige zone van de
   iPhone en schuift van onderen in zodra de hero voorbij is. */
.gsm-actie{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(253,246,233,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line-soft);
  transform:translateY(110%);
  transition:transform .32s var(--ease);
  pointer-events:none;
}
.gsm-actie.zichtbaar{transform:translateY(0);pointer-events:auto}
.gsm-actie span{
  font-family:var(--font-ui);font-size:.78rem;line-height:1.25;
  color:var(--muted);letter-spacing:.02em;
}
.gsm-actie .btn{
  flex:none;padding:13px 22px;font-size:.8rem;min-height:46px;
}
@media (min-width:781px){.gsm-actie{display:none}}