/* ==========================================================================
   Peppermint Media, gedeeld stijlblad
   Eén bestand voor de hele site. Kleuren en maten staan hieronder als
   variabelen: verander er één en de hele site verandert mee.

   Het ritme van de pagina: smalle leeskolommen, onderbroken door dingen
   die over de volle breedte gaan. Drie witte kaarten, één indigo vlak.
   ========================================================================== */

:root{
  /* kleuren, afgeleid van het logo */
  --bg:#F4F6FB;
  --card:#FFFFFF;
  --navy:#191349;          /* indigo uit het logo: koppen en tekst */
  --ink-soft:#6A6685;
  --line:#E5E4EF;
  --accent:#EA6300;        /* oranje op licht */
  --accent-dark:#C95400;
  --accent-on-dark:#FC6D06;/* het echte logo-oranje, alleen op indigo */
  --on-dark:#FFFFFF;
  --on-dark-soft:#A9A4C8;

  /* maten */
  --page:69rem;            /* buitenste breedte, ongeveer 1100px */
  --measure:40rem;         /* de leeskolom, ongeveer 640px */
  --pad:clamp(1.25rem, 5vw, 2.5rem);
  --radius:16px;
  --shadow:0 1px 2px rgba(25,19,73,.04), 0 18px 44px -18px rgba(25,19,73,.16);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--navy);
  font-family:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size:clamp(1.0625rem, 0.95rem + 0.55vw, 1.1875rem);
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3{
  font-weight:700;
  letter-spacing:-0.028em;
  line-height:1.1;
  margin:0 0 1.5rem;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem)}
h2{font-size:clamp(1.625rem, 1.2rem + 2.1vw, 2.5rem)}
h3{font-size:1.1875rem; letter-spacing:-0.015em; line-height:1.25}

p{margin:0 0 1.35rem; max-width:var(--measure)}
p:last-child{margin-bottom:0}
strong{font-weight:700}
em{font-style:italic}

a{color:inherit}
a:focus-visible,.btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

.soft{color:var(--ink-soft)}
.mark{color:var(--accent)}
.lead{
  font-size:clamp(1.1875rem, 1.05rem + 0.85vw, 1.4375rem);
  line-height:1.5;
  letter-spacing:-0.012em;
}
/* De intro onder de kop is één blok in één maat. Eerst stond er een grote
   alinea met kleinere tekst eronder en dat gaf twee gewichten in een stuk
   tekst dat één gedachte is. Deze maat zit tussen die twee in: nog steeds
   duidelijk een intro, maar rustiger dan de oude eerste alinea.
   De 20-minutenpagina regelt dit zelf, die blijft ongemoeid. */
.hero .hero-center > p:not(.eyebrow):not(.btn-note):not(.hero-slot):not(.meta),
.hero .col > p:not(.eyebrow):not(.btn-note):not(.hero-slot):not(.meta),
.hero .hero-intro p{
  /* 50rem in plaats van de leesbreedte van 40rem. Nagemeten: onder de 48rem
     valt deze intro in vier regels met een losse staart, vanaf 48 in drie.
     50 geeft wat speling, zodat een woord erbij hem niet meteen omgooit. */
  max-width:50rem;
  font-size:clamp(1.125rem, 1.02rem + 0.6vw, 1.3125rem);
  line-height:1.55;
  letter-spacing:-0.01em;
}

.eyebrow{
  margin:0 0 1.25rem;
  font-size:0.8125rem;
  font-weight:700;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.stack p{margin-bottom:0.2rem}
.stack p:last-child{margin-bottom:0}
.gap{height:1.35rem}

/* ---------- de drie breedtes ---------- */

.section{padding-block:clamp(3.5rem, 7vw, 6.5rem)}

.wrap{
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.col{max-width:var(--measure)}   /* leeskolom, links uitgelijnd */

/* ==========================================================================
   Kop van de pagina
   ========================================================================== */

.top{
  position:sticky; top:0; z-index:30;
  background:rgba(244,246,251,.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.top.scrolled{border-bottom-color:var(--line)}
.top-inner{
  max-width:var(--page); margin-inline:auto;
  padding:1rem var(--pad);
  display:flex; align-items:center; gap:2rem;
}
.top-logo{height:1.5rem; width:auto; display:block; flex:none}
.nav{display:flex; gap:1.75rem; margin-left:auto; font-size:0.9375rem; font-weight:600}
.nav a{text-decoration:none; padding-block:0.25rem; border-bottom:2px solid transparent}
.nav a:hover, .nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.top .btn{font-size:0.9375rem; padding:0.6875rem 1.25rem; box-shadow:none}
@media (max-width:820px){
  .nav{display:none}
  .top-inner{gap:1rem}
  .top .btn{margin-left:auto}
}

/* ==========================================================================
   Knoppen en links
   ========================================================================== */

.btn{
  display:inline-block;
  appearance:none; -webkit-appearance:none; border:0;
  font-family:inherit; text-align:center; cursor:pointer;
  background:var(--accent); color:#fff;
  text-decoration:none; font-weight:700;
  font-size:1.125rem; letter-spacing:-0.005em; line-height:1.2;
  padding:1rem 2rem; border-radius:999px;
  box-shadow:0 6px 18px -8px rgba(234,99,0,.5);
  transition:background-color .18s ease, transform .18s ease;
}
.btn:hover{background:var(--accent-dark)}
.btn:active{transform:translateY(1px)}
.btn-note{margin-top:1rem; color:var(--ink-soft); font-size:0.9375rem; max-width:26rem}

.arrow{
  display:inline-block; font-weight:700; text-decoration:none;
  color:var(--accent); border-bottom:2px solid transparent;
}
.arrow:hover{border-bottom-color:var(--accent)}

/* rustige variant: op de cases, zodat het oranje van "meer werk" alleen staat */
.arrow.quiet{color:var(--navy); border-bottom-color:var(--line)}
.arrow.quiet:hover{border-bottom-color:var(--navy)}
.arrow::after{content:" \2192"}

/* ==========================================================================
   1. Hero, gecentreerd en kort. Daaronder de logobalk als bewijs.
   ========================================================================== */

.hero{padding-block:clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem)}
.hero-center{max-width:47rem; margin-inline:auto; text-align:center}

/* De kop van een binnenpagina. Bewust rustiger dan de homepage: een maat
   kleiner en in een bredere kolom, zodat een lange kop minder regels kost.
   De homepage houdt de grote maat, die heeft er maar drie regels voor nodig. */
/* De kop van de homepage staat in een bredere kolom dan de rest van de hero.
   Op 47rem viel "B2B-marketing waar zelfs sales wat mee kan." in drie regels
   uiteen, met 58rem past hij in twee. De alinea's eronder blijven op hun eigen
   leesbreedte staan, die worden hier niet breder van.
   Wordt de kop ooit langer of korter: dit is de knop om aan te draaien. */
.hero-hoofd{max-width:58rem}

.hero-binnen{max-width:52rem}
.hero-binnen h1{font-size:clamp(2rem, 1.25rem + 2.9vw, 3.25rem)}
.hero-binnen .lead{max-width:42rem}
.hero-center.hero-binnen .lead{margin-inline:auto}
.hero-center p{margin-inline:auto}
.hero-center .eyebrow{margin-bottom:1rem}
.hero-center h1{margin-bottom:1.5rem}
.hero-center .btn{margin-top:1.25rem}
/* ---------------------------------------------------------------
   De 20-minutenpagina.

   Alle maten komen van de oorspronkelijke landingspagina, gemeten bij
   een venster van 1440 pixels:
     kaart        928px breed, hoekradius 14, 200px binnenmarge
     tekst erin   528px
     kop hero     64px
     kop in kaart 44px
     lopende tekst en lijsten allebei 19px, regelafstand 1,65
     124px lucht boven de eerste regel in de kaart

   Dat laatste is de kern: er is bijna geen variatie in tekstgrootte.
   Body en lijsten zijn identiek. Alleen de koppen en de twee grote
   uitspraken wijken af. Vandaar de rust.
   --------------------------------------------------------------- */

.smal-pagina{
  --t-body:clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-kop:clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  --t-groot:clamp(1.5rem, 1.05rem + 1.6vw, 2.125rem);
  --paneel-lucht:clamp(2.5rem, 8.6vw, 7.75rem);
}

/* De kaart moet 58rem worden, dus de wrap krijgt de zijmarge erbij. */
.wrap.smal{ max-width:calc(58rem + var(--pad) * 2) }

.hero-links{ padding-inline:1.5rem }
.hero-links > *{ max-width:41rem }
.hero-links h1{
  margin-bottom:1.5rem;
  font-size:clamp(2.25rem, 1.2rem + 4.2vw, 4rem);
  line-height:1.14;
}
.hero-links p{ font-size:var(--t-body); line-height:1.65 }
.hero-links .lead{ margin-bottom:1.25rem }
.hero-links .cta-row{ margin-top:2.25rem; max-width:none }
.hero-links .btn-note{ margin-top:1rem; font-size:0.9375rem }

/* De agenda van Cal.com. Het widget vult de breedte van de kaart en groeit
   zelf mee met de stap waar de bezoeker in zit. De minimumhoogte voorkomt
   dat de pagina opspringt terwijl hij nog laadt. */
.agenda{
  margin-top:2.5rem;
  min-height:38rem;
  width:100%;
  overflow:hidden;
  border-radius:12px;
}
.agenda iframe{width:100%; border:0}

/* De rij met foto en naam, maar zonder knop: die zat hier voordat de
   agenda zelf op de pagina kwam. */
.cta-stil{margin-top:2rem}

.paneel{
  background:var(--card);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:var(--paneel-lucht) 1.5rem;
}

.paneel-deel + .paneel-deel{
  margin-top:clamp(2.5rem, 6vw, 5rem);
  padding-top:clamp(2.5rem, 6vw, 5rem);
  border-top:1px solid var(--line);
}
.paneel-deel > *{ max-width:33rem }

/* Eén tekstgrootte voor alles wat lopende tekst is. */
.paneel-deel p,
.paneel-deel li{
  font-size:var(--t-body);
  line-height:1.65;
  font-weight:400;
  letter-spacing:0;
}
.paneel-deel p{ margin-bottom:1.5rem }
.paneel-deel p:last-child{ margin-bottom:0 }

.paneel-deel h2{
  margin:0 0 1.75rem;
  font-size:var(--t-kop);
  line-height:1.14;
}

/* De lijsten krijgen dezelfde tekstgrootte als de alinea's. */
.paneel-deel .asks{ margin-block:2rem; gap:.85rem }
.paneel-deel .asks li{ padding-left:1.6rem }
.paneel-deel .asks li::before{ width:.45rem; height:.45rem; top:.7em }

/* De twee grote uitspraken. Het enige formaatverschil dat ertoe doet. */
.paneel-statement{
  margin:0 0 1rem !important;
  font-size:var(--t-groot) !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:-0.025em;
  text-wrap:balance;
}
.paneel-statement-onder{
  margin:0 !important;
  color:var(--ink-soft);
}

/* Wat het gesprek oplevert. Alles op dezelfde tekstgrootte: alleen
   vet en niet vet, verder geen verschil. Eerder stonden hier vijf
   maten door elkaar en dat maakte juist dit blok onrustig. */
.paneel-deel .levert{ margin-bottom:1.5rem }
.paneel-deel .levert h3{
  margin:0;
  font-size:var(--t-body);
  line-height:1.65;
  font-weight:700;
}
.paneel-deel .levert p{ margin:0 }
.paneel-deel .opbrengst-vraagregel{ margin-top:2rem }
.paneel-deel .oogst-slot{ font-weight:700 }
.paneel-deel .eyebrow{ font-size:0.8125rem }
.paneel-deel .cta-row{ max-width:none; margin-top:2rem }
.paneel-deel .meta{ font-size:0.9375rem }

/* Op deze pagina blijven vragenlijsten altijd één kolom. */
.wrap.smal .asks{ grid-template-columns:1fr }

/* Deze pagina mag ruimer ademen dan de rest van de site. */
.smal-pagina .section{ padding-block:clamp(3.5rem, 8vw, 6.5rem) }
.smal-pagina .hero{ padding-top:clamp(3rem, 7vw, 5.5rem) }

@media (min-width:44rem){
  .paneel{ padding:var(--paneel-lucht) clamp(2rem, 14vw, 12.5rem) }
  .hero-links{ padding-inline:clamp(2rem, 9.5vw, 8.5rem) }
}

.hero-slot{
  margin-top:1.75rem !important;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  max-width:34rem;
  font-weight:700;
  color:var(--navy);
}

/* Casekoppen zijn lang, want ze bevatten de vraag én de omslag.
   Op heldenbreedte vallen ze uiteen in zes korte regels. Breder
   kader, kleiner formaat, dan staan er drie. */
.hero-case{ max-width:56rem }
.hero-case .lead{ max-width:44rem }

.hero-photo{
  width:4.25rem; height:4.25rem;
  border-radius:50%; object-fit:cover;
  display:block; margin:0 auto 1.5rem;
  background:var(--line);
  box-shadow:0 0 0 4px var(--bg), 0 6px 18px -8px rgba(25,19,73,.35);
}

/* logobalk direct onder de hero, stil en op één rij */
.proof{padding-block:0 clamp(3rem, 6vw, 5rem)}
.proof-label{
  margin:0 0 1.25rem; max-width:none; text-align:center;
  color:var(--ink-soft); font-size:0.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.proof-row{
  display:grid;
  grid-template-columns:repeat(2, auto);
  justify-content:center;
  align-items:center;
  justify-items:center;
  gap:2rem 2.5rem;
}
@media (min-width:34rem){ .proof-row{ grid-template-columns:repeat(3, auto) } }
@media (min-width:56rem){ .proof-row{ grid-template-columns:repeat(6, auto); gap:2rem 3rem } }
.proof-row img{ max-width:100% }
.proof-row img{width:auto; opacity:.55; filter:grayscale(1)}

/* ==========================================================================
   2. Het probleem, met de kaart over het gesprek ernaast
   ========================================================================== */

.split{display:grid; grid-template-columns:1fr; gap:2.5rem}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,1fr) 21.5rem; gap:4rem}
}

.card-call{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2rem;
}
@media (min-width:960px){
  .card-call{position:sticky; top:6rem}
}
.card-call img{
  width:4.5rem; height:4.5rem;
  border-radius:50%; object-fit:cover;
  display:block; margin:0 0 1.25rem;
  background:var(--line);
}
.card-call h3{margin:0 0 1rem; font-size:1.25rem}
.card-call p{font-size:0.9375rem; line-height:1.6; color:var(--ink-soft); max-width:none; margin-bottom:0.875rem}
.card-call .btn{display:block; text-align:center; font-size:1.0625rem; padding-inline:1rem; margin-top:1.5rem}
.card-call .btn-note{margin:0.875rem auto 0; max-width:none; text-align:center; font-size:0.875rem}

.quote{
  margin:0 0 1.35rem;
  font-style:italic;
}

/* ==========================================================================
   3. Wat er al ligt, grote witte kaart
   ========================================================================== */

.card-find,.card-person,.card-close{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1.75rem, 5vw, 3.5rem);
}
.card-find{max-width:54rem}
.card-person{max-width:50rem}
.persoon-link{margin-top:2rem}

/* Het actiedeel hangt onder het verhaal over Bouke, in hetzelfde blok.
   Een lijn erboven scheidt het zonder er een nieuwe sectie van te maken. */
.persoon-actie{
  margin-top:2.5rem; padding-top:2.25rem;
  border-top:1px solid var(--line);
}
.persoon-uitnodiging{
  font-size:clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-weight:600; letter-spacing:-0.02em; line-height:1.3;
  color:var(--navy); max-width:34rem; margin-bottom:1.75rem;
}
.persoon-actie .btn{margin-top:0}
.finds{margin:0 0 2rem; padding:0; list-style:none}
.finds li{padding:1.125rem 0; border-top:1px solid var(--line)}
.finds li:last-child{border-bottom:1px solid var(--line)}

/* ==========================================================================
   4. Het scharnier, indigo
   ========================================================================== */

.dark{background:var(--navy); color:var(--on-dark)}
.dark .asks li::before{background:var(--accent-on-dark)}
.dark h2{color:var(--on-dark)}
.dark .soft{color:var(--on-dark-soft)}
.dark .mark{color:var(--accent-on-dark)}

.asks{margin:0; padding:0; list-style:none; display:grid; gap:1rem}
.asks li{
  font-size:clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  line-height:1.3; letter-spacing:-0.015em; font-weight:700;
  padding-left:1.75rem; position:relative;
}
.asks li::before{
  content:""; position:absolute; left:0; top:0.55em;
  width:0.6rem; height:0.6rem; border-radius:50%;
  background:var(--accent);
}
@media (min-width:900px){ .asks{grid-template-columns:1fr 1fr; gap:1.25rem 3rem} }
.outputs{margin-top:2.5rem}
.outputs p{max-width:var(--measure)}

/* ==========================================================================
   5. Cases, drie kolommen
   ========================================================================== */

.cases{display:grid; gap:2.5rem; margin-top:2.5rem}
@media (min-width:820px){ .cases{grid-template-columns:repeat(3,1fr)} }
.case{padding-top:1.25rem; border-top:2px solid var(--navy)}
.case-client{
  margin:0 0 0.75rem; max-width:none;
  font-size:0.75rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);
}
.case h3{margin:0 0 0.75rem}
.case p{font-size:1rem; line-height:1.55; color:var(--ink-soft); margin-bottom:1rem; max-width:none}

/* ==========================================================================
   6. Met wie je werkt
   ========================================================================== */

.asides{
  margin:2rem 0; padding-left:1.375rem;
  border-left:2px solid var(--line); color:var(--ink-soft);
}
.asides p{margin:0 0 0.3rem}
.asides p:last-child{margin-bottom:0}

.logos{margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--line)}
.logos-label{
  margin:0 0 1.375rem; max-width:none;
  color:var(--ink-soft); font-size:0.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.logos-row{display:flex; flex-wrap:wrap; gap:1.25rem 2.25rem; align-items:center}
.logos-row img{width:auto; opacity:.55; filter:grayscale(1)}

/* ==========================================================================
   7. De zin die alle ruimte krijgt
   ========================================================================== */

.statement{
  padding-block:clamp(4rem, 9vw, 7rem);
}
.statement-onder{
  margin:1.5rem auto 0;
  max-width:46rem;
  color:var(--on-dark-soft);
  font-size:clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
}
.statement p{
  max-width:none;
  margin:0;
  font-size:clamp(1.75rem, 1.1rem + 2.9vw, 3.25rem);
  line-height:1.14;
  letter-spacing:-0.03em;
  font-weight:700;
  text-wrap:balance;
}

/* ==========================================================================
   8. Slot, witte kaart
   ========================================================================== */

.card-close{max-width:50rem}
.card-close.full,.card-find.full{max-width:none}
.card-close .btn{margin-top:1rem}
.meta{margin-top:1.25rem; color:var(--ink-soft); font-size:0.9375rem}

/* ==========================================================================
   Voettekst
   ========================================================================== */

.foot{
  border-top:1px solid var(--line);
  padding-block:2.5rem 3rem;
  font-size:0.9375rem; color:var(--ink-soft);
}
.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.25rem; margin-left:auto; font-weight:600}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn,.top{transition:none}
}

/* ==========================================================================
   CASEPAGINA
   Vast stramien: opening, beeld, feiten, verhaal, kantelvraag, wat we maakten,
   resultaat in cijfers, in het kort. Elke case volgt deze volgorde.
   ========================================================================== */

/* beeld over de volle breedte, in een afgeronde bak */
.figure{margin:0}
.figure img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius);
  background:var(--line);
}
.figure figcaption{
  margin-top:0.75rem;
  color:var(--ink-soft);
  font-size:0.875rem;
}

/* het feitenblok: omschrijving links, feiten rechts */
.facts{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1.75rem, 5vw, 3rem);
  display:grid;
  gap:2rem;
}
@media (min-width:860px){
  .facts{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:3.5rem}
}
.facts .intro p{max-width:none}
.client-logo{
  height:3.5rem; width:auto; display:block;
  margin:0 0 1.75rem;
  opacity:.7; filter:grayscale(1);
}
.fact{padding:1rem 0; border-top:1px solid var(--line)}
.fact:first-child{padding-top:0; border-top:0}
.fact dt{
  font-size:0.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:0.25rem;
}
.fact dd{margin:0; font-size:1rem; line-height:1.5}

/* de kantelvraag, over de volle breedte */
.pivot-big{padding-block:clamp(2.25rem, 4vw, 3.25rem) 0}
.pivot-big .not{
  margin:0 0 2rem; max-width:none;
  color:var(--ink-soft);
  font-size:clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
}
.pivot-big .then{
  margin:0; max-width:none;
  font-size:clamp(1.625rem, 1.1rem + 2.6vw, 3rem);
  line-height:1.15; letter-spacing:-0.03em; font-weight:700;
  text-wrap:balance;
}
.pivot-big .cue{
  display:block; margin-bottom:0.5rem; line-height:1.4;
  font-size:0.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}

/* wat er uit één opname komt */
.outputs-list{margin:2rem 0 0; padding:0; list-style:none; max-width:var(--measure)}
.outputs-list li{padding:0.875rem 0; border-top:1px solid var(--line); font-weight:600}
.outputs-list li:last-child{border-bottom:1px solid var(--line)}

/* het resultaat in cijfers, op indigo */
.stats{display:grid; gap:2.5rem}
@media (min-width:720px){ .stats{grid-template-columns:repeat(2,1fr); gap:3.5rem} }
.stat-num{
  margin:0 0 0.35rem; max-width:none;
  font-size:clamp(2.5rem, 1.5rem + 4vw, 4rem);
  line-height:1; letter-spacing:-0.035em; font-weight:800;
  color:var(--accent-on-dark);
}
.stat-lab{margin:0; max-width:none; color:var(--on-dark-soft)}

/* in het kort */
.summary{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1.75rem, 5vw, 3rem);
}
.summary-grid{display:grid; gap:1.5rem; margin-top:1.5rem}
@media (min-width:760px){ .summary-grid{grid-template-columns:repeat(2,1fr); gap:2rem 3rem} }
.summary-grid dt{
  font-size:0.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:0.35rem;
}
.summary-grid dd{margin:0; font-weight:600; line-height:1.45}
/* gezicht naast de knop, zoals op de marketingscan */
.cta-row{
  display:flex; align-items:center; gap:1rem;
  flex-wrap:wrap; margin-top:2rem;
}
.cta-face{
  width:3.25rem; height:3.25rem;
  border-radius:50%; object-fit:cover; flex:none;
  background:var(--line);
  box-shadow:0 2px 10px -4px rgba(25,19,73,.4);
}
.cta-who{margin:0; max-width:none; font-size:0.9375rem; line-height:1.35}
.cta-who strong{display:block; font-weight:700}
.cta-who span{color:var(--ink-soft)}

.credits{
  margin-top:2rem; padding-top:1.5rem;
  border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:0.9375rem;
}

/* ==========================================================================
   Lange teksten: voorwaarden, privacy
   ========================================================================== */

.longread h2{
  font-size:clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  margin:2.5rem 0 0.875rem;
}
.longread h3{
  font-size:1.0625rem;
  margin:1.75rem 0 0.5rem;
}
.longread p{margin-bottom:1rem}
.longread strong{color:var(--navy)}
.longread hr{
  border:0; border-top:1px solid var(--line);
  margin:2.5rem 0;
}
.foot-fine{
  flex-basis:100%;
  margin:0.5rem 0 0;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:0.875rem;
}

/* ==========================================================================
   Insights: de lijst en het artikel
   ========================================================================== */

.artikelen{list-style:none; margin:0; padding:0}
.artikelen li{border-top:1px solid var(--line)}
.artikelen li:last-child{border-bottom:1px solid var(--line)}
.artikelen a{
  display:block; text-decoration:none;
  padding:2rem 0;
  border-left:3px solid transparent;
  padding-left:0;
  transition:border-color .18s ease, padding-left .18s ease;
}
.artikelen a:hover{border-left-color:var(--accent); padding-left:1.25rem}
.artikel-datum{
  margin:0 0 0.5rem; max-width:none;
  font-size:0.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.artikelen h2{
  font-size:clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  margin:0 0 0.625rem;
}
.artikel-teaser{margin:0; max-width:none; color:var(--ink-soft)}

.byline{
  display:flex; align-items:center; gap:0.875rem;
  margin-top:2.5rem; padding-top:1.75rem;
  border-top:1px solid var(--line);
}
.byline img{
  width:2.75rem; height:2.75rem;
  border-radius:50%; object-fit:cover; flex:none;
  background:var(--line);
}
.byline p{margin:0; max-width:none; font-size:0.9375rem; line-height:1.35}
.byline strong{display:block}
.byline span{color:var(--ink-soft)}

.artikel p{font-size:1.0625rem}
@media (min-width:720px){ .artikel p{font-size:1.125rem} }
.artikel blockquote{
  margin:2rem 0; padding-left:1.5rem;
  border-left:3px solid var(--accent);
  font-style:italic; color:var(--navy);
}
.artikel blockquote p{margin-bottom:0.75rem}

/* ---------------------------------------------------------------
   Cases, de overzichtspagina
   Elke case is een eigen witte kaart, zodat het drie dingen zijn en
   niet één lange pagina. Beeld tot de rand, tekst in twee kolommen.
   --------------------------------------------------------------- */

.case-kaarten{
  display:grid;
  gap:clamp(2rem, 4vw, 3rem);
}

.card-case{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card-case-beeld{
  display:block;
  width:100%;
  height:auto;
  background:var(--line);
}

.card-case-body{
  padding:clamp(1.75rem, 4vw, 3rem);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.75rem, 4vw, 3.5rem);
}

.card-case-body h2{
  margin:0 0 1.25rem;
  max-width:20ch;
}

.card-case .client-logo{ margin-bottom:1.5rem }

.case-kern{
  margin:0;
  display:grid;
  gap:1.5rem;
  align-content:start;
  padding-left:clamp(1.25rem, 2.5vw, 1.75rem);
  border-left:3px solid var(--accent);
}

.case-kern dt{
  margin:0 0 .35rem;
  color:var(--ink-soft);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.case-kern dd{ margin:0 }
.case-kern dd.quote{ margin:0 }

@media (min-width:52rem){
  .card-case-body{ grid-template-columns:1fr 1fr; align-items:start }
}

/* ---------------------------------------------------------------
   Aanpak
   --------------------------------------------------------------- */

.stap{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 clamp(1.25rem, 3vw, 2.5rem);
  align-items:start;
}
.stap + .stap{ margin-top:clamp(3rem, 6vw, 5rem) }

.stap-nr{
  margin:0;
  font-size:clamp(2.5rem, 5vw, 3.5rem);
  font-weight:700;
  line-height:1;
  color:var(--accent);
  letter-spacing:-0.04em;
}

.stap-tekst{ max-width:var(--measure) }
.stap-tekst h2{ margin:0 0 1rem }
.stap-tekst .asks{ margin-block:1.75rem }

/* De meetlat: gereedschap binnen een stap. Lichter dan het witte
   oogstblok, want het is een hulpmiddel en geen opbrengst. */

.gereedschap{
  margin-top:2.5rem;
  padding:clamp(1.5rem, 3vw, 2rem);
  background:var(--card);
  border-radius:12px;
  border:1px solid var(--line);
}
.gereedschap h3{
  margin:0 0 .6rem;
  font-size:1.125rem;
}
.gereedschap-intro{
  margin:0;
  color:var(--ink-soft);
  font-size:0.9375rem;
}

/* Wat eruit komt: hetzelfde witte blok aan het eind van elke stap.
   Drie keer dezelfde vorm, zodat het als een reeks opbrengsten leest
   en niet als drie losse kadertjes. Geen oranje streep: de kleur is
   voorbehouden aan het nummer van de stap en aan de knop. */

.oogst{
  margin-top:2.5rem;
  padding:clamp(1.5rem, 3vw, 2rem);
  background:var(--card);
  border-radius:12px;
  box-shadow:var(--shadow);
}
.oogst .eyebrow{ margin-bottom:1.25rem }

.levert + .levert{ margin-top:1.25rem }
.levert h3{ margin:0 0 .3rem; font-size:1.125rem }
.levert p{ margin:0 }

.oogst-binnen-kop{
  margin:1.75rem 0 0;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
  color:var(--ink-soft);
  font-size:0.8125rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.oogst .asks{ margin:1.25rem 0 0 }

.model-intro{
  margin:1.25rem 0 0;
  color:var(--ink-soft);
  font-size:0.9375rem;
}

.keten{
  display:block;
  width:100%;
  height:auto;
  margin:1.5rem 0 .75rem;
}
.keten-bij{
  margin:0 0 1.5rem;
  color:var(--ink-soft);
  font-size:0.875rem;
}

.model-lijst{
  margin:0;
  display:grid;
  gap:1rem 2rem;
}
.model-lijst dt{
  margin:0 0 .15rem;
  font-weight:700;
  color:var(--accent);
  font-size:0.9375rem;
}
.model-lijst dd{ margin:0; font-size:0.9375rem }

.kans-voorbeelden{
  list-style:none;
  margin:1.25rem 0 0;
  padding:0;
  display:grid;
  gap:1rem;
}
.kans-voorbeelden li{ font-size:0.9375rem }
.kans-voorbeelden strong{ display:block; margin-bottom:.15rem }

.oogst-slot{ margin:1.5rem 0 0; font-weight:700 }

.model-slot{
  margin:1.25rem 0 0;
  color:var(--ink-soft);
  font-size:0.9375rem;
}

/* De tijdlijn van negentig dagen. Drie segmenten met een balk erboven,
   zodat je in één blik ziet hoe lang het duurt en wat er wanneer
   gebeurt. Op smalle schermen onder elkaar. */

.tijdlijn-kop{
  margin:clamp(2.5rem, 5vw, 3.5rem) 0 1.25rem;
  color:var(--ink-soft);
  font-size:0.8125rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.tijdlijn{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1.25rem;
}
.tijdlijn li{
  background:var(--card);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:1.5rem;
}
.tijdlijn-balk{
  display:block;
  height:5px;
  border-radius:999px;
  background:var(--accent);
  margin-bottom:1.25rem;
}
.tijdlijn li:nth-child(2) .tijdlijn-balk{ opacity:.66 }
.tijdlijn li:nth-child(3) .tijdlijn-balk{ opacity:.4 }

.tijdlijn-dagen{
  display:block;
  margin-bottom:.35rem;
  color:var(--ink-soft);
  font-size:0.8125rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.tijdlijn-naam{
  display:block;
  color:var(--navy);
  font-size:clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.2;
}
.tijdlijn-bij{ margin-top:1.75rem; color:var(--ink-soft) }

@media (min-width:44rem){
  .tijdlijn{ grid-template-columns:repeat(3, 1fr) }
}

/* De ladder met de drie stappen. Eén witte kaart, drie treden met een
   hairline ertussen. Dit is het aanbod, dus het krijgt de zwaarste
   schaduw van de pagina. */

.ladder{
  margin-block:2.5rem;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 2px 4px rgba(25,19,73,.05), 0 30px 70px -24px rgba(25,19,73,.28);
  padding:clamp(1.5rem, 4vw, 2.75rem);
}

.trede{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 clamp(1rem, 2.5vw, 1.75rem);
  align-items:start;
}
.trede + .trede{
  margin-top:clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top:clamp(1.75rem, 3.5vw, 2.5rem);
  border-top:1px solid var(--line);
}

.trede-nr{
  margin:0;
  font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight:700;
  line-height:1.1;
  color:var(--accent);
  letter-spacing:-0.03em;
}

.trede h3{
  margin:0 0 .3rem;
  font-size:clamp(1.1875rem, 1rem + 0.7vw, 1.4375rem);
}
.trede-meta{
  margin:0 0 .75rem !important;
  color:var(--accent);
  font-size:0.875rem;
  font-weight:700;
  letter-spacing:.02em;
}
.trede p:last-child{ margin:0; max-width:var(--measure) }
.trede-link{ margin:1rem 0 0 !important }

/* De fases hebben geen nummer meer. Dat botste met de nummers van de
   ladder erboven. Het dagbereik plus de naam is nu het label. */
.stap.fase{ display:block }
.fase-label{
  margin:0 0 1rem;
  color:var(--accent);
  font-size:0.8125rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.ladder + .col p{ margin:0 }

/* Blokken die binnen een fase ná de opbrengst komen. */

.na-blok{
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
  max-width:var(--measure);
}
.na-blok h3{
  margin:0 0 .75rem;
  font-size:clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
}

/* Het kwartaalritme. Genummerd, kort, één regel per stap. */

.ritme-blok{ margin-top:2.5rem }
.ritme{
  list-style:none;
  counter-reset:rit;
  margin:1.25rem 0 0;
  padding:0;
  display:grid;
  gap:.6rem;
}
.ritme li{
  counter-increment:rit;
  padding-left:2.25rem;
  position:relative;
  font-size:1rem;
}
.ritme li::before{
  content:counter(rit);
  position:absolute;
  left:0; top:0;
  color:var(--accent);
  font-size:0.8125rem;
  font-weight:700;
}

@media (min-width:44rem){
  .ritme{ grid-template-columns:repeat(2, 1fr); gap:.6rem 2rem }
}

.oogst-intro{ margin:0 0 1.5rem; color:var(--ink-soft) }
.oogst .criteria{ margin-top:1rem }

/* Rustige variant van de vragenlijst. De luide versie is voor de
   homepage, waar de vragen zelf het blok dragen. Binnen een stap
   zijn het gewoon vragen en hoeven ze niet te schreeuwen. */
.asks.stil{ gap:.6rem }
.asks.stil li{
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.45;
  letter-spacing:0;
  padding-left:1.35rem;
}
.asks.stil li::before{
  width:.4rem; height:.4rem;
  top:.6em;
}

/* Werkt goed bij, werkt niet bij. Criteria, geen vragen, dus geen
   oranje stippen. Hairlines houden het rustig en leesbaar. */
.criteria{
  margin:1.25rem 0 0;
  padding:0;
  list-style:none;
}
.criteria li{
  padding:.75rem 0;
  border-top:1px solid var(--line);
  font-size:1rem;
  line-height:1.5;
}
.criteria li:last-child{ border-bottom:1px solid var(--line) }

@media (min-width:38rem){
  .model-lijst{ grid-template-columns:repeat(2, 1fr) }
}

/* ---- het product ---- */

.product{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 2px 4px rgba(25,19,73,.05), 0 30px 70px -24px rgba(25,19,73,.28);
  overflow:hidden;
}

.product-top{
  background:var(--navy);
  color:var(--on-dark);
  padding:clamp(1.75rem, 4vw, 3rem);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.75rem, 3vw, 3rem);
  align-items:center;
}
.product-top .eyebrow{ color:var(--on-dark-soft); margin-bottom:.75rem }
.product-top h2{
  margin:0 0 .35rem;
  color:var(--on-dark);
  font-size:clamp(2rem, 1.2rem + 2.6vw, 2.75rem);
}
.product-omvang{
  margin:0 0 1rem;
  color:var(--accent-on-dark);
  font-weight:700;
}
.product-lead{ margin:0; color:var(--on-dark-soft); max-width:32ch }

.product-koop{ text-align:left }
.prijs{
  margin:0;
  color:var(--on-dark);
  font-size:clamp(1.75rem, 1.1rem + 2vw, 2.25rem);
  font-weight:700;
  letter-spacing:-0.03em;
  white-space:nowrap;
}
.prijs-note{
  margin:.35rem 0 1.5rem;
  color:var(--on-dark-soft);
  font-size:0.875rem;
  max-width:26ch;
}
.product-koop .btn-note{ color:var(--on-dark-soft) }

.product-body{ padding:clamp(1.75rem, 4vw, 3rem) }

.opbrengst-kop{
  margin:0 0 1.5rem;
  color:var(--ink-soft);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.opbrengst{
  list-style:none;
  counter-reset:opbrengst;
  margin:0;
  padding:0;
  display:grid;
  gap:1.5rem;
}
.opbrengst li{
  counter-increment:opbrengst;
  padding-left:3rem;
  position:relative;
}
.opbrengst li::before{
  content:"0" counter(opbrengst);
  position:absolute;
  left:0; top:.1rem;
  color:var(--accent);
  font-size:0.875rem;
  font-weight:700;
  letter-spacing:.04em;
}
.opbrengst h3{ margin:0 0 .25rem; font-size:1.0625rem }
.opbrengst p{ margin:0 }

.opbrengst li.kern{
  padding:1.25rem 1.25rem 1.25rem 3rem;
  margin-left:-1.25rem;
  margin-right:-1.25rem;
  background:var(--bg);
  border-radius:12px;
}
.opbrengst li.kern::before{ left:1.25rem; top:1.35rem }
.opbrengst li.kern h3{ font-size:1.1875rem }

.product-slot{
  margin:2.5rem 0 0;
  padding-top:1.75rem;
  border-top:1px solid var(--line);
  max-width:var(--measure);
  font-weight:700;
}

@media (min-width:48rem){
  .product-top{ grid-template-columns:1fr auto }
  .product-koop{ text-align:right }
  .product-koop .prijs-note{ margin-left:auto }
  .opbrengst li.kern{ padding-right:2rem }
}

/* ---- werkt goed bij, werkt niet bij ---- */

.geschikt{
  display:grid;
  gap:clamp(1.75rem, 4vw, 3rem);
}
.geschikt h2{ font-size:1.25rem; margin:0 0 .75rem }
.geschikt p{ margin:0 }

@media (min-width:44rem){
  .geschikt{ grid-template-columns:1fr 1fr }
}



/* ---------------------------------------------------------------
   Contact
   --------------------------------------------------------------- */

.contact-grid{
  display:grid;
  gap:clamp(1.75rem, 4vw, 2.5rem);
  align-items:start;
}
@media (min-width:56rem){
  .contact-grid{ grid-template-columns:1.35fr 1fr }
}

.card-form,
.card-bel,
.card-plan,
.card-adres{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1.5rem, 4vw, 2.5rem);
}

.card-form h2{ margin:0 0 .4rem; font-size:1.375rem }
.card-form .soft{ margin:0 0 2rem }

/* het formulier */

.veld-rij{
  display:grid;
  gap:1.25rem;
  margin-bottom:1.25rem;
}
@media (min-width:34rem){
  .veld-rij{ grid-template-columns:1fr 1fr }
}

.veld{ margin:0 0 1.25rem }
.veld label{
  display:block;
  margin-bottom:.4rem;
  font-size:0.875rem;
  font-weight:700;
  color:var(--navy);
}
.optioneel{
  font-weight:400;
  color:var(--ink-soft);
  text-transform:none;
  letter-spacing:0;
}

.veld input,
.veld textarea{
  width:100%;
  padding:.75rem .875rem;
  font:inherit;
  font-size:1rem;
  color:var(--navy);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  transition:border-color .15s, box-shadow .15s;
}
.veld textarea{ resize:vertical; min-height:8rem }

.veld input:focus,
.veld textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(234,99,0,.16);
}

.veld-hint{
  display:block;
  margin-top:.4rem;
  color:var(--ink-soft);
  font-size:0.8125rem;
}

.card-form .btn{ margin-top:.5rem }
.card-form .btn-note{ margin-top:.85rem }

.honeypot{ display:none }

/* de zijkolom */

.contact-zij{
  display:grid;
  gap:clamp(1.25rem, 3vw, 1.75rem);
}
.contact-zij h2{ margin:0 0 .5rem; font-size:1.125rem }
.contact-zij p{ margin:0 }

.bel-face{
  width:4.5rem; height:4.5rem;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin-bottom:1.25rem;
}

.bel-nummer{
  margin:1.25rem 0 0 !important;
  font-size:clamp(1.375rem, 1rem + 1.6vw, 1.75rem);
  font-weight:700;
  letter-spacing:-0.02em;
}
.bel-nummer a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:2px solid transparent;
}
.bel-nummer a:hover{ border-bottom-color:var(--accent) }

.bel-mail{ margin-top:.5rem !important; font-size:0.9375rem }
.bel-mail a{ color:var(--ink-soft) }

.bel-wie{
  margin-top:1.25rem !important;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:0.875rem;
  line-height:1.4;
}
.bel-wie strong{ display:block; color:var(--navy) }
.bel-wie span{ color:var(--ink-soft) }

.card-plan .arrow{ display:inline-block; margin-top:1rem }
.card-adres .soft{ margin-top:.75rem !important; font-size:0.875rem }

/* bedankpagina */

.bedankt-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem 2rem;
  margin-top:2.5rem;
}
.hero-center .bel-nummer{ margin-top:2rem !important }