/* ==========================================================================
   Peppermint Media, stijlblad "rust" (29 en 30 september 2026)
   Het enige stijlblad van de site. style.css is het oude blad en wordt
   niet meer gebruikt.

   Uitgangspunten, afgeleid van de eigen social-beelden:
   - wit, veel lucht, geen kaarten en geen schaduwen
   - één letter: Open Sauce One, koppen in regular, groot
   - de tweede helft van een kop in oranje ({accolades} in de tekst)
   - de oranje gloed in de kop, en verderop één keer gespiegeld rechts
   ========================================================================== */

@font-face{font-family:"Open Sauce One"; font-weight:400; font-style:normal; font-display:swap;
  src:url("fonts/OpenSauceOne-Regular.ttf") format("truetype")}
@font-face{font-family:"Open Sauce One"; font-weight:400; font-style:italic; font-display:swap;
  src:url("fonts/OpenSauceOne-Italic.ttf") format("truetype")}
@font-face{font-family:"Open Sauce One"; font-weight:500; font-style:normal; font-display:swap;
  src:url("fonts/OpenSauceOne-Medium.ttf") format("truetype")}
@font-face{font-family:"Open Sauce One"; font-weight:600; font-style:normal; font-display:swap;
  src:url("fonts/OpenSauceOne-SemiBold.ttf") format("truetype")}

:root{
  --bg:#FFFFFF;
  --wash:#F6F7FB;           /* heel licht vlak, spaarzaam */
  --navy:#191349;           /* indigo uit het logo */
  --ink:#2A2740;            /* bodytekst, donker en rustig */
  --ink-soft:#6A6685;       /* alleen labels, voetregel en kleine noten */
  --line:#ECEBF3;
  --accent:#EA6300;         /* oranje, alleen in grote tekst en de knop */
  --accent-dark:#C95400;
  --glow:242,112,40;        /* de gloed, als rgb-waarden */

  --page:72rem;
  --measure:38rem;          /* leeskolom */

  /* Het tekstsysteem. Drie niveaus en een label, verder niets.
     statement  H1 en de grote zin, tweekleurig
     tussenkop  elke sectiekop, indigo, met het oranje bolletje
     tekst      al het andere, één maat, donker (--ink)
     label      nummers, klantnamen, kleine regels
     Nadruk binnen de tekst komt uit kleur (indigo), nooit uit maat. */
  --t-tekst:clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-label:0.8125rem;
  --pad:clamp(1.25rem, 5vw, 3rem);
  --lucht:clamp(5rem, 11vw, 10rem);   /* ruimte tussen de blokken */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; scrollbar-gutter:stable}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Open Sauce One", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size:var(--t-tekst);
  line-height:1.7;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* ---------- koppen: regular, groot, kort ---------- */

h1,h2,h3{
  color:var(--navy);
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.06;
  margin:0 0 1.75rem;
  text-wrap:balance;
}
h1{text-wrap:pretty; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; font-size:clamp(2.5rem, 1.45rem + 4vw, 4.5rem); line-height:1.04; letter-spacing:-0.025em}
h2{font-size:clamp(1.75rem, 1.3rem + 1.7vw, 2.625rem); line-height:1.12}
/* h3 is geen eigen maat: tekstmaat, indigo */
h3{font-size:var(--t-tekst); line-height:1.5; letter-spacing:0; margin-bottom:0.75rem}

p{margin:0 0 1.25rem; max-width:var(--measure)}
p:last-child{margin-bottom:0}
strong,.nadruk{font-weight:400; color:var(--navy)}
strong{font-weight:500}
a{color:inherit; transition:color .15s}
p a:hover,li a:hover{color:var(--accent)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

.mark{color:var(--accent)}
/* Rangorde. Tweekleurig is alleen voor de twee statements: de H1 en de
   grote zin. Daar begint de oranje helft op een nieuwe regel, zoals op de
   social-beelden. Tussenkoppen zijn één kleur, een maat kleiner, en eindigen
   met een oranje leesteken: het puntje uit het logo. */
h1 .mark, .statement p .mark{display:block}
h2{max-width:30ch}
.punt{color:var(--accent)}
.soft{color:var(--ink-soft)}
.lead{max-width:var(--measure)}

.wrap{max-width:var(--page); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:var(--lucht) 0}
main > .section:last-child{padding-bottom:var(--lucht)}
.col{max-width:var(--measure)}
h2.col{max-width:30ch}

/* ---------- balk bovenaan ---------- */

.top{
  color:var(--navy);
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.top.scrolled{border-bottom-color:var(--line)}
.top-inner{max-width:var(--page); margin-inline:auto; padding:1.35rem var(--pad); display:flex; align-items:center; gap:2.25rem}
.top-logo{height:1.4rem; width:auto; display:block}
.nav{display:flex; gap:2.25rem; margin-left:auto; font-size:0.9375rem}
.nav a{text-decoration:none; padding-block:0.25rem; border-bottom:1px solid transparent}
.nav a:hover{color:var(--accent)}
.nav a[aria-current="page"]{border-bottom-color:var(--navy)}
/* in de balk geen oranje knop: die blijft voor de pagina zelf */
.top .btn{white-space:nowrap; background:none; color:var(--navy); border:1px solid var(--navy); padding:calc(1rem - 1px) calc(1.75rem - 1px)}  /* zelfde maat als .btn */
.top .btn:hover{background:var(--navy); color:#fff}

.menu-knop{display:none; margin-left:0.25rem; width:2.75rem; height:2.75rem; padding:0.8rem 0.6rem; background:none; border:0; cursor:pointer; flex-direction:column; justify-content:space-between}
.menu-knop span{display:block; height:1.5px; width:100%; background:var(--navy); transition:transform .2s, opacity .2s}
.menu-knop[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-knop[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-knop[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobiel{display:none}
@media (max-width:880px){
  .nav{display:none}
  .top-inner{gap:0.5rem}
  .top .btn{margin-left:auto}
  .menu-knop{display:flex}
  .nav-mobiel{display:block; max-width:var(--page); margin-inline:auto; padding:0.5rem var(--pad) 1.25rem; border-top:1px solid var(--line); background:#fff}
  .nav-mobiel[hidden]{display:none}
  .nav-mobiel a{display:block; padding:0.9rem 0; text-decoration:none; font-size:1.25rem}
  .nav-mobiel a[aria-current="page"]{color:var(--accent)}
}
@media (max-width:30rem){
  .top .btn{font-size:0.8125rem; padding:0.45rem 0.8rem}
  .menu-knop{width:2.5rem; margin-left:0}
  .top-logo{height:1.2rem}
}

/* ---------- knop en links ---------- */

.btn{
  display:inline-block; border:0; cursor:pointer; font-family:inherit;
  background:var(--accent); color:#fff; text-decoration:none;
  font-weight:500; font-size:1.0625rem; line-height:1.2;
  padding:1rem 1.75rem; border-radius:999px;
  transition:background .15s;
}
.btn:hover{background:var(--accent-dark)}
.btn-note{margin-top:1rem; font-size:0.875rem; color:var(--ink-soft)}

.arrow{font-weight:400; text-decoration:none; color:var(--navy); border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .15s}
.arrow:hover{color:var(--accent); border-bottom-color:var(--accent)}
.arrow::after{content:" \2192"}
.arrow.oranje{color:var(--accent); border-bottom-color:rgba(234,99,0,.3)}
.arrow.oranje:hover{border-bottom-color:var(--accent)}

/* ==========================================================================
   De gloed. Eén per pagina. Loopt helemaal uit naar transparant, dus er
   ontstaat nergens een harde rand, ook niet over een sectiegrens heen.
   ========================================================================== */

.met-gloed{position:relative; isolation:isolate; overflow-x:clip}
.gloed{
  position:absolute; z-index:-1; pointer-events:none;
  width:clamp(34rem, 72vw, 64rem); aspect-ratio:1;
  left:clamp(-26rem, -30vw, -12rem); bottom:clamp(-30rem, -34vw, -14rem);
  background:radial-gradient(closest-side,
    rgba(var(--glow),.95) 0%,
    rgba(var(--glow),.62) 28%,
    rgba(var(--glow),.26) 55%,
    rgba(var(--glow),.07) 78%,
    rgba(var(--glow),0) 100%);
}

/* de tweede gloed, verderop en gespiegeld: rechts, iets kleiner */
.gloed-rechts{
  left:auto; bottom:auto;
  right:clamp(-26rem, -30vw, -12rem); top:55%;
  transform:translateY(-50%);
  width:clamp(30rem, 60vw, 54rem);
}

/* ==========================================================================
   Homepage
   ========================================================================== */

.hero{padding-block:clamp(5rem, 13vw, 11rem) clamp(4.5rem, 9vw, 7.5rem)}
.hero h1{max-width:none; margin-bottom:2.25rem}
.hero .lead{max-width:42rem; margin-bottom:2.5rem}
/* de intro onder de kop staat overal in indigo: dat leest het lekkerst */
.hero .lead, .hero .lead p{color:var(--navy); text-wrap:pretty}

/* logo's: klein, grijs, zonder kop erboven die aandacht vraagt */
.proof{padding-top:0}
.proof-label{font-size:var(--t-label); margin-bottom:1.75rem}
.proof-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem clamp(1.75rem, 4vw, 3.5rem)}
.proof-row img{width:auto; max-width:100%; opacity:.5; filter:grayscale(1); zoom:1.1}


/* het scharnier: één zin, heel groot, op wit */
.statement{padding-block:var(--lucht) 0}
.section.na-statement{padding-top:clamp(3rem, 6vw, 5rem)}
.statement p{color:var(--navy); font-size:clamp(2.25rem, 1.3rem + 3.6vw, 4rem); line-height:1.04; letter-spacing:-0.025em; max-width:none; margin:0}

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

/* wat er al ligt: links de uitleg, rechts de symptomen, zonder nummers */
.twee-kol{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(2.5rem, 7vw, 7rem); margin-top:2.5rem; align-items:start}
.symptomen{list-style:none; margin:0; padding:0}
.symptomen li{margin-bottom:1.1rem; max-width:30rem}
.symptomen li:last-child{margin-bottom:0}


/* de vragen: één per regel, groot en zonder opsommingstekens */
.vragen-intro{max-width:var(--measure); margin-bottom:2.5rem}
.vragen{list-style:none; margin:0 0 2.5rem; padding:0}
.vragen li{color:var(--navy); padding-block:0.2rem}

/* cases: witte kaart met zachte schaduw, beeld bovenaan, het hele blok
   is de link. Bij hover komt hij iets omhoog en wordt de zin oranje. */
.cases{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1.25rem, 2.5vw, 2rem); margin-top:3rem}
.case{
  display:flex; flex-direction:column; text-decoration:none; color:var(--navy);
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(25,19,73,.04), 0 14px 36px -16px rgba(25,19,73,.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.case img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover}
.case-tekst{padding:1.5rem 1.6rem 1.75rem}
.case-client{font-size:var(--t-label); letter-spacing:0.04em; margin-bottom:0.5rem}
.case h3{margin:0; transition:color .15s}
.case-bewijs{font-size:var(--t-label); letter-spacing:0.02em; color:var(--accent); margin:0.85rem 0 0}
.case h3::after{content:" \2192"; color:var(--accent)}
.case:hover,.case:focus-visible{transform:translateY(-3px); box-shadow:0 1px 2px rgba(25,19,73,.05), 0 22px 44px -18px rgba(25,19,73,.26)}
.case:hover h3,.case:focus-visible h3{color:var(--accent)}
.meer{margin-top:3rem}

/* slot: kop, tekst en een rij met knop, gezicht en naam. Zoals onderaan
   de cases-pagina: de persoon staat naast de knop, klein en rustig. */
.afsluiter{margin-top:var(--lucht); padding-block:clamp(4rem, 8vw, 6.5rem); background:var(--wash)}
.cta-row{display:flex; align-items:center; flex-wrap:wrap; gap:0.9rem 1rem; margin-top:2.25rem}
.cta-row .btn{margin-right:0.75rem}
.cta-persoon{display:flex; align-items:center; gap:0.9rem}
.cta-face{width:3rem; height:3rem; border-radius:50%; object-fit:cover; flex:none}
.cta-who{margin:0; font-size:var(--t-label); line-height:1.4}
.cta-who span{display:block}
.cta-who .cta-naam{color:var(--navy); font-size:0.9375rem}

/* ==========================================================================
   Binnenpagina's
   ========================================================================== */

/* de kop van een binnenpagina: dezelfde vorm als de homepage, een tikje kleiner */
.hero-binnen h1{font-size:clamp(2.25rem, 1.4rem + 3vw, 3.5rem)}
.hero .lead.nadruk{margin-bottom:1.25rem}
.statement .statement-onder{font-size:var(--t-tekst); line-height:1.7; letter-spacing:0; color:var(--ink); max-width:var(--measure); margin-top:1.75rem}

/* Aanpak: de Blauwdruk. Links de lijst, rechts het klokmodel. */
.blauwdruk-model{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2rem, 5vw, 4.5rem); align-items:center; margin-top:3rem}
.klok-lijst{list-style:none; margin:0; padding:0}
.klok-lijst > li{display:flex; gap:1rem; padding:0.55rem 0}
.klok-lijst-nr{flex:none; width:1.25rem; font-size:var(--t-label); color:var(--accent); padding-top:0.3rem}
.klok-doel .klok-lijst-nr::before{content:""; display:inline-block; width:0.45rem; height:0.45rem; border-radius:50%; background:var(--accent); vertical-align:middle}
.klok svg{width:100%; max-width:34rem; height:auto; display:block; margin-left:auto}
.klok svg text{font-family:inherit}
.klok-ring{fill:none; stroke:var(--line); stroke-width:2; stroke-dasharray:5 8}
.klok-hart{fill:var(--wash)}
.klok-hart-kop{fill:var(--navy); font-size:22px}
.klok-punt{fill:#fff; stroke:var(--accent); stroke-width:1.5}
.klok-nr{fill:var(--accent); font-size:18px}
.klok-label{fill:var(--navy); font-size:18px}
@media (max-width:860px){
  .blauwdruk-model{grid-template-columns:1fr}
  .klok{display:none}
}

/* Ingangspagina's */
.kort{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.5rem clamp(2.5rem, 6vw, 5rem)}
.kort li{color:var(--navy); max-width:30rem}
.blokken > .blok + .blok{margin-top:clamp(4rem, 8vw, 6.5rem)}
.opening p:first-child{font-size:clamp(1.75rem, 1.3rem + 1.7vw, 2.625rem); line-height:1.12; letter-spacing:-0.02em; color:var(--navy); margin-bottom:1.75rem}
.nadruk-lijst{margin-top:1.75rem}
.blok-foto{width:4.5rem; height:4.5rem; border-radius:50%; object-fit:cover; display:block; margin-bottom:1.5rem}
.nadruk-lijst li{color:var(--navy)}
.faq{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:3rem clamp(2.5rem, 6vw, 5rem); margin-top:3rem}
.faq-item h3{margin-bottom:0.6rem}
.faq-item p{font-size:0.97em}
@media (max-width:860px){ .kort,.faq{grid-template-columns:1fr} }

/* ==========================================================================
   Cases
   ========================================================================== */

/* overzicht: grote witte kaarten onder elkaar */
.case-groot-lijst{display:grid; gap:clamp(2rem, 4vw, 3rem)}
.section + .proof{padding-top:clamp(3rem, 6vw, 5rem)}
.case-groot{
  display:block; text-decoration:none; color:var(--navy);
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(25,19,73,.04), 0 14px 36px -16px rgba(25,19,73,.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.case-groot:hover,.case-groot:focus-visible{transform:translateY(-3px); box-shadow:0 1px 2px rgba(25,19,73,.05), 0 22px 44px -18px rgba(25,19,73,.26)}
.case-groot-beeld{display:block; width:100%; height:auto; aspect-ratio:2048/680; object-fit:cover}
.case-groot-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem, 6vw, 5rem); padding:clamp(2rem, 5vw, 4rem)}
.case-groot-logo{display:block; width:auto; max-width:100%; margin-bottom:2rem; filter:grayscale(1); opacity:.65}
.case-start{padding-top:clamp(0.5rem, 2vw, 1.5rem)}
.case-groot h2{font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height:1.15; margin-bottom:1.5rem; transition:color .15s}
.case-groot:hover h2{color:var(--accent)}
.case-groot:hover .arrow{border-bottom-color:var(--accent)}
.case-kern{margin:0; display:grid; gap:1.75rem; align-self:start; border-left:2px solid var(--accent); padding-left:clamp(1.25rem, 2.5vw, 2rem)}
.case-kern .nadruk{font-style:italic}
.case-kern dd{line-height:1.5}
.case-kern dt,.kort-vier dt,.feiten dt{font-size:var(--t-label); letter-spacing:0.04em; margin-bottom:0.35rem; color:var(--accent)}
.case-kern dd,.kort-vier dd,.feiten dd{margin:0}

/* casepagina */
.hero-case .proof-label{margin-bottom:1.25rem}
.hero-case{padding-bottom:clamp(3rem, 6vw, 5rem)}
.figuur{margin:0}
.figuur img{display:block; width:100%; height:auto; border-radius:14px}
.figuur figcaption{font-size:var(--t-label); margin-top:0.85rem}
.kort-vier{margin:1.5rem 0 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:2rem clamp(1.5rem, 3vw, 3rem)}
.kort-vier dd{color:var(--navy)}
.klant-logo{height:2.25rem; width:auto; display:block; margin-bottom:1.75rem; filter:grayscale(1); opacity:.7}
.feiten{margin:0; display:grid; gap:1.35rem}
.feiten dd{color:var(--navy)}
.kantel{padding-top:var(--lucht)}
.kantel p{margin:0; max-width:none; font-size:clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); line-height:1.2; letter-spacing:-0.015em}
.kantel .label{display:block; font-size:var(--t-label); letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:0.5rem}
.kantel-niet{color:var(--ink-soft); text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:var(--line)}
.kantel-niet .label{text-decoration:none}
.kantel-maar{color:var(--navy); margin-top:2rem !important}
.kantel-maar .label{color:var(--accent)}
.na-lijst{margin-top:1.75rem}
.cijfers{display:flex; flex-wrap:wrap; gap:2rem clamp(3rem, 8vw, 7rem)}
.cijfer{font-size:clamp(3rem, 2rem + 4vw, 5.5rem); line-height:1; letter-spacing:-0.03em; color:var(--accent); margin:0 0 0.75rem}
@media (max-width:860px){
  .case-groot-body{grid-template-columns:1fr}
  .kort-vier{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:520px){ .kort-vier{grid-template-columns:1fr} }

/* ==========================================================================
   Kennismaken en contact
   ========================================================================== */

.kennis-statement{font-size:clamp(1.75rem, 1.3rem + 1.7vw, 2.625rem); line-height:1.15; letter-spacing:-0.02em; color:var(--accent); margin:2rem 0 2.5rem}
.kennis-hero{padding-bottom:var(--lucht); overflow:clip}  /* korte pagina: gloed niet onder de footer door */
.kennis-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(2.5rem, 6vw, 5rem); align-items:start}
.kennis-grid h1{font-size:clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem)}
.agenda-persoon{margin-top:2.5rem}
.agenda-kaart{background:#fff; border-radius:14px; padding:clamp(0.75rem, 2vw, 1.5rem); box-shadow:0 1px 2px rgba(25,19,73,.04), 0 14px 36px -16px rgba(25,19,73,.18)}
.agenda{min-height:30rem}
@media (max-width:960px){ .kennis-grid{grid-template-columns:1fr} }
.contact-start{padding-top:0}
.hero:has(+ .contact-start){padding-bottom:clamp(2.5rem, 5vw, 4rem)}

.contact-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(1.25rem, 3vw, 2.5rem); align-items:start}
.contact-grid form{margin-top:1.75rem}
.veld input,.veld textarea{background:var(--wash) !important; border-color:transparent !important}
.veld input:focus,.veld textarea:focus{background:#fff !important; border-color:var(--accent) !important}
.honeypot{position:absolute; left:-9999px}
.veld-rij{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 1.25rem}
.veld,.veld:last-child{margin:0 0 1.25rem; max-width:none}
.veld label{display:block; font-size:var(--t-label); letter-spacing:0.04em; color:var(--accent); margin-bottom:0.4rem}
.optioneel{color:var(--ink-soft); margin-left:0.35rem}
.veld input,.veld textarea{
  width:100%; font:inherit; color:var(--navy); background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:0.8rem 1rem;
  transition:border-color .15s, box-shadow .15s;
}
.veld input:focus,.veld textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(234,99,0,.12)}
.veld-hint{display:block; font-size:var(--t-label); margin-top:0.4rem}
.form-noot{font-size:var(--t-label); margin-top:1rem}
.contact-kaart{background:#fff; border-radius:14px; padding:clamp(1.75rem, 3.5vw, 2.75rem); box-shadow:0 1px 2px rgba(25,19,73,.04), 0 14px 36px -16px rgba(25,19,73,.18)}
.contact-kaart h2{font-size:clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); margin-bottom:0.5rem}
.contact-kaart .blok-foto{width:3.75rem; height:3.75rem; margin-bottom:1.25rem}
.contact-zij{display:grid; gap:clamp(1.25rem, 2.5vw, 2rem)}
.contact-zij h3{margin-bottom:0.75rem}
.bel-nummer{margin:0 0 0.5rem; font-size:clamp(1.5rem, 1.2rem + 1vw, 1.875rem); letter-spacing:-0.01em}
.bel-nummer a{text-decoration:none; color:var(--accent)}
.bel-mail{margin:0; font-size:0.94em}
.bel-wie{margin-top:1.5rem !important; padding-top:1.25rem; border-top:1px solid var(--line)}
.bel-wie span{display:block}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .veld-rij{grid-template-columns:1fr} }

/* ==========================================================================
   Insights, artikelen, tekstpagina's, bedankt en de interviewkaart
   ========================================================================== */

/* Insights-overzicht: elk stuk is een eigen blok, ingesprongen achter
   een oranje lijn. Zo lees je het niet als doorlopende tekst. */
.blog-start{padding-top:0}
.hero:has(+ .blog-start){padding-bottom:clamp(3rem, 6vw, 4.5rem)}
.artikelen{list-style:none; margin:0; padding:0; display:grid; gap:clamp(1.25rem, 2.5vw, 1.75rem); max-width:52rem}
.artikelen a{
  display:block; text-decoration:none; color:inherit;
  border-left:2px solid var(--accent); padding:0.35rem 0 0.35rem clamp(1.5rem, 3vw, 2.5rem);
  transition:border-color .15s, background-color .15s;
}
.artikelen li + li a{margin-top:clamp(1.5rem, 3vw, 2.25rem)}
.artikelen h2{max-width:none; font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height:1.15; margin-bottom:0.75rem; transition:color .15s}
.artikelen p{margin-bottom:0.5rem}
.artikelen a:hover h2{color:var(--accent)}
.artikel-datum{margin-bottom:0.6rem; color:var(--accent)}
.artikelen .arrow{display:inline-block; margin-top:0.5rem}

.hero-artikel{padding-bottom:clamp(2.5rem, 5vw, 4rem)}
.hero-artikel .proof-label a{text-decoration:none; color:var(--accent)}
/* Artikel en tekstpagina: kop gecentreerd, de tekst eronder links
   uitgelijnd in een brede, rustige leeskolom in het midden. */
.artikel-kop{max-width:52rem; margin-inline:auto; text-align:center}
.artikel-kop h1{font-size:clamp(2.25rem, 1.4rem + 2.8vw, 3.5rem); max-width:none; text-wrap:balance}
.artikel-kop .cta-who{text-align:left}
.artikel-kop > p{margin-inline:auto}
.artikel-kop .lead{max-width:40rem; margin-inline:auto}
.artikel-kop .byline{justify-content:center}
.artikel{max-width:48rem; margin-inline:auto; font-size:clamp(1.0625rem, 1rem + 0.35vw, 1.25rem)}
.artikel p,.artikel ul,.artikel ol{max-width:none}
.byline{margin-top:2.25rem; display:flex}
.artikel-start{padding-top:0}
.artikel h2{font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top:3rem}
.artikel h3{margin-top:2rem}
.artikel ul,.artikel ol{padding-left:1.25rem; max-width:var(--measure)}
.artikel li{margin-bottom:0.5rem}
.artikel strong{color:var(--navy)}
.artikel blockquote{margin:2.5rem 0; padding-left:1.5rem; border-left:2px solid var(--accent); font-size:1.2em; color:var(--navy)}

.bedankt-links{display:flex; flex-wrap:wrap; gap:1rem 2rem; margin-top:2.5rem}
.hero .bel-nummer{margin-top:1.5rem}

.kaart-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(2.5rem, 6vw, 5rem); align-items:center}
.hero-kaart{margin:0}
.hero-kaart img{display:block; width:100%; max-width:22rem; height:auto; margin-left:auto; filter:drop-shadow(0 24px 40px rgba(25,19,73,.18))}
@media (max-width:860px){ .kaart-grid{grid-template-columns:1fr} .hero-kaart img{margin:0; max-width:16rem} }

/* KIT levert zijn eigen opmaak mee. Dit zorgt alleen dat het blok de
   breedte van de leeskolom volgt en niet tegen de tekst erboven plakt. */
.kit-form{
  margin-top:1.75rem;
  max-width:33rem;
}
.kit-form iframe{ width:100%; border:0 }
.kit-form + .meta{ margin-top:1.5rem }

/* KIT brengt zijn eigen kop, kader en knop mee. Die halen we weg, zodat
   er alleen twee velden en een knop overblijven die bij de rest van de
   site horen. Het nummer is het formulier in KIT: maak je daar een nieuw
   formulier, dan verandert het hier ook. */
.kit-form .formkit-form[data-uid="4be0c9ad77"] .formkit-header,
.kit-form .formkit-form[data-uid="4be0c9ad77"] .formkit-subheader{
  display:none !important;
}
.kit-form .formkit-form[data-uid="4be0c9ad77"]{
  border:0 !important;
  background:transparent !important;
  max-width:100% !important;
  overflow:visible !important;
}
.kit-form .formkit-form[data-uid="4be0c9ad77"] [data-style="minimal"]{ padding:0 !important }
.kit-form .formkit-form[data-uid="4be0c9ad77"] .formkit-fields{ margin-top:0 !important }
.kit-form .formkit-form[data-uid="4be0c9ad77"] .formkit-input{ font:inherit !important }
.kit-form .formkit-form[data-uid="4be0c9ad77"] .formkit-submit{
  font:inherit !important;
  font-weight:500 !important;
  background:var(--accent) !important;
  border-radius:999px !important;
}
.kit-form .formkit-form[data-uid="4be0c9ad77"] .formkit-guarantee{
  text-align:left !important;
  font-size:0.875rem !important;
  opacity:.7;
}

/* Het vinkje voor de nieuwsbrief is een bijzin, geen kop. Kleiner dus,
   in de maat van de regels onder de knoppen elders op de pagina. */
.kit-form .formkit-form[data-uid="4be0c9ad77"] label,
.kit-form .formkit-form[data-uid="4be0c9ad77"] [data-group="checkboxes"],
.kit-form .formkit-form[data-uid="4be0c9ad77"] .formkit-checkboxes,
.kit-form .formkit-form[data-uid="4be0c9ad77"] .formkit-checkbox{
  font-size:0.9375rem !important;
  line-height:1.45 !important;
}

/* ---------- voet ---------- */

.foot{padding:3.5rem 0 3rem; font-size:var(--t-label); color:var(--ink-soft); border-top:1px solid var(--line)}
.foot-inner{max-width:var(--page); margin-inline:auto; padding-inline:var(--pad); display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:flex-start}
.foot a{text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot p{margin:0 0 0.35rem; max-width:none}
.foot-links{display:flex; flex-wrap:wrap; gap:1.5rem; margin-left:auto}
.foot-fine{flex-basis:100%; margin-top:1.5rem !important}

/* ---------- smal scherm ---------- */

@media (max-width:860px){
  .cases{grid-template-columns:1fr; max-width:28rem}
}
@media (max-width:640px){
  .statement p{font-size:2rem}
  .twee-kol{grid-template-columns:1fr}
  .foot-links{margin-left:0}
}

/* ---------- controleronde 30 september ---------- */

/* de voet dekt een gloed af die van een korte pagina naar beneden loopt */
.foot{position:relative; background:#fff}

@media (max-width:640px){
  /* logo's op een telefoon in een net raster van drie */
  .proof-row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); justify-items:start; gap:1.75rem 1.25rem}
  .proof-row img{max-height:32px}
  /* de gloed rechts valt op een telefoon achter de tekst: daar laten we hem weg */
  .gloed-rechts{display:none}
  /* de gloed in de kop kleiner en verder naar de rand */
  .gloed{width:26rem; left:-15rem; bottom:-12rem}
}