/* ============================================================
   NPTS – SNEL AANPASSEN
   Verander vooral de waarden hieronder. Sla op met Ctrl+S en
   ververs daarna je browser (Ctrl+R) om het resultaat te zien.
   ============================================================ */
:root{
  /* MERKKLEUREN */
  --deepgreen:#21392E;   /* donkere tekst/koppen */
  --moss:#3E5A49;        /* tweede groen */
  --sage:#A7B4A2;        /* lichtgroen */
  --terracotta:#C87443;  /* oranje CTA / accent */
  --cream:#F4F0E8;       /* achtergrond */
  --gold:#D1B17A;        /* goudlijn */

  /* PAGINABREEDTE */
  --max:1180px;          /* lager = smallere website; hoger = breder */

  /* BASISVORM */
  --card-radius:22px;     /* afgeronde kaarten */
}

/* SNELLE LETTERGROOTTES – hier kun je veilig spelen */
.hero h1{font-size:clamp(40px,5vw,68px);}   /* grote titel bovenaan */
.hero .tagline{font-size:22px;}             /* cursieve regel eronder */
.hero-callout strong{font-size:32px;}       /* grote zin in licht vlak */
.section h2{font-size:42px;}                /* gewone sectiekoppen */
.tile h3{font-size:24px;}                   /* kaartkoppen */
.tile p{font-size:15px;}                    /* tekst in kaarten */

/* ============================================================
   VANAF HIER: TECHNISCHE OPMAAK. Je hoeft hier voorlopig niet
   aan te komen, tenzij je nieuwsgierig bent.
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#f7f3ec 0%, #f4f0e8 100%);color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif;line-height:1.55}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4,.serif{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.02em}
.topbar{position:sticky;top:0;z-index:40;background:rgba(244,240,232,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(209,177,122,.35)}
.nav{max-width:var(--max);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{height:74px;width:auto;object-fit:contain}.brand-full img{height:76px;max-width:330px}
.navlinks{display:flex;align-items:center;gap:20px;font-size:15px;color:var(--muted)}
.navlinks a{text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:13px 20px;text-decoration:none;font-weight:700;border:1px solid transparent;cursor:pointer;transition:.18s ease;font-size:15px}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--terracotta);color:#fff;box-shadow:0 10px 24px rgba(200,116,67,.18)}
.btn-secondary{background:transparent;color:var(--deepgreen);border-color:rgba(33,57,46,.28)}
.btn-ghost{background:#fff;color:var(--deepgreen);border-color:rgba(209,177,122,.45)}
.hero-wrap{max-width:var(--max);margin:0 auto;padding:40px 24px 20px}
.hero{background:linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.66)), var(--cream);border:1px solid rgba(209,177,122,.40);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}
.hero-inner{padding:56px 54px 44px}
.hero-logo{width:min(620px,100%);margin:0 auto 30px}
.hero-kicker{display:flex;justify-content:center;gap:10px;align-items:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--terracotta)}
.hero-kicker:before,.hero-kicker:after{content:"";width:70px;height:1px;background:rgba(209,177,122,.9)}
.hero h1{font-size:clamp(40px,5vw,68px);text-align:center;margin:22px auto 14px;max-width:980px;line-height:1.03}
.hero .tagline{font-family:Fraunces,Georgia,serif;font-style:italic;text-align:center;font-size:22px;margin:0 auto 16px;max-width:860px;color:var(--deepgreen)}
.hero .sub{font-size:17px;text-align:center;color:var(--muted);margin:0 auto 24px;max-width:760px}
.hero-callout{background:#f0eee8;border:1px solid rgba(167,180,162,.45);border-radius:20px;padding:18px 20px;margin:26px auto 26px;max-width:860px;text-align:center}
.hero-callout strong{font-family:Fraunces,Georgia,serif;font-size:32px;line-height:1.15;display:block}
.hero-lead{max-width:940px;margin:0 auto 18px;font-size:18px;color:#355044;text-align:left}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.section{max-width:var(--max);margin:0 auto;padding:28px 24px}
.section-card{background:rgba(255,255,255,.72);border:1px solid rgba(209,177,122,.34);border-radius:26px;box-shadow:var(--shadow);padding:34px}
.kicker{font-size:12px;letter-spacing:.20em;text-transform:uppercase;font-weight:700;color:var(--terracotta);margin-bottom:10px}
.section h2{font-size:42px;line-height:1.08;margin:0 0 12px;color:var(--deepgreen)}
.lede{font-size:18px;color:var(--muted);max-width:920px;margin:0 0 26px}
.grid-3,.grid-4,.flow-steps,.roadmap{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.tile{background:var(--card);border:1px solid rgba(209,177,122,.30);border-radius:var(--card-radius);padding:22px;box-shadow:0 4px 12px rgba(33,57,46,.03)}
.tile .mini{font-size:12px;color:var(--terracotta);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tile h3{font-size:24px;margin:8px 0 8px}
.tile p{margin:0;color:var(--muted);font-size:15px}
.table-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.table-card{background:var(--card);border:1px solid rgba(209,177,122,.30);border-radius:var(--card-radius);overflow:hidden}
.table-head{background:rgba(167,180,162,.18);padding:12px 16px;font-family:Fraunces,Georgia,serif;font-size:28px;color:var(--deepgreen)}
.table-body{padding:18px 16px;font-size:16px;color:var(--muted);min-height:190px}
.notice{background:rgba(209,177,122,.12);border:1px solid rgba(209,177,122,.45);padding:16px 18px;border-radius:18px;color:#5b5e49;margin-top:22px}
.flow-steps{grid-template-columns:repeat(2,1fr)}
.flow-step{background:var(--card);border:1px solid rgba(209,177,122,.30);border-radius:var(--card-radius);padding:18px 18px 18px 74px;position:relative}
.flow-step .num{position:absolute;left:18px;top:16px;width:40px;height:40px;border-radius:12px;background:rgba(200,116,67,.14);border:1px solid rgba(200,116,67,.28);display:grid;place-items:center;color:var(--terracotta);font-weight:800}
.flow-step strong{display:block;margin-bottom:5px;color:var(--deepgreen)}
.flow-step p{margin:0;color:var(--muted);font-size:15px}
.tool-wrap{max-width:var(--max);margin:0 auto;padding:28px 24px}
.tool-shell{background:#fff;border:1px solid rgba(209,177,122,.34);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.tool-head{padding:22px 24px;border-bottom:1px solid rgba(209,177,122,.24);display:flex;justify-content:space-between;align-items:flex-start;gap:16px;background:linear-gradient(180deg,#fff, #fbfaf7)}
.tool-head h2{margin:0;font-size:30px;color:var(--deepgreen)}
.tool-head p{margin:6px 0 0;color:var(--muted);font-size:14px}
.privacy{font-size:12px;background:rgba(167,180,162,.18);padding:8px 12px;border-radius:999px;color:var(--moss);font-weight:700;white-space:nowrap}
.progress{height:8px;background:#f0ece4}.progress>div{height:100%;background:var(--terracotta);width:0;transition:width .25s ease}
.tool-body{padding:28px 24px 24px;min-height:580px}
.step,.result{display:none}.step.active,.result.active{display:block}
.step-tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);font-weight:700}
.step h3{font-size:36px;line-height:1.1;margin:8px 0 10px;color:var(--deepgreen)}
.step-intro{font-size:16px;color:var(--muted);max-width:760px;margin:0 0 22px}
label{display:block;font-weight:700;margin:15px 0 7px;color:var(--deepgreen)}
textarea,input[type=text]{width:100%;border:1px solid rgba(62,90,73,.20);background:#fff;border-radius:16px;padding:14px 15px;font:inherit;color:var(--ink)}
textarea{min-height:100px;resize:vertical}
textarea:focus,input:focus{outline:none;border-color:rgba(62,90,73,.55);box-shadow:0 0 0 4px rgba(167,180,162,.20)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dapsir{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.d-field{background:#fbfaf7;border:1px solid rgba(209,177,122,.24);border-radius:20px;padding:14px}
.d-field small{display:block;color:var(--muted);min-height:38px}
.d-field textarea{margin-top:8px;min-height:82px}
.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.choice{display:flex;gap:8px;align-items:flex-start;background:#fff;border:1px solid rgba(209,177,122,.28);padding:12px 14px;border-radius:18px;cursor:pointer}
.choice input{margin-top:4px}
.choice:has(input:checked){background:rgba(167,180,162,.14);border-color:rgba(62,90,73,.35)}
.argument-box{background:#fbfaf7;border:1px solid rgba(209,177,122,.26);padding:16px;border-radius:20px;margin:12px 0}
.argument-box strong{display:block;margin-bottom:4px;color:var(--deepgreen)}
.argument-box p{margin:0 0 10px;color:var(--muted);font-size:14px}
.tool-actions{display:flex;justify-content:space-between;align-items:center;padding-top:24px;margin-top:24px;border-top:1px solid #ece6db}
.step-count{font-size:13px;color:var(--muted)}
.result-hero{background:rgba(167,180,162,.16);border:1px solid rgba(209,177,122,.26);border-radius:20px;padding:18px;margin-bottom:20px}
.result-hero h3{font-size:32px;margin:6px 0 6px}
.result-hero p{margin:0;color:var(--muted)}
.attention-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0 22px}
.attention{border:1px solid rgba(209,177,122,.28);background:#fff;border-radius:18px;padding:14px}
.attention-head{display:flex;justify-content:space-between;gap:10px;font-weight:800;color:var(--deepgreen)}
.meter{height:8px;background:#f0ece4;border-radius:999px;margin-top:10px;overflow:hidden}.meter div{height:100%;background:var(--moss);border-radius:999px}.attention.warn .meter div{background:var(--terracotta)}
.summary-card{border-top:1px solid #ece6db;padding:15px 0}.summary-card h4{margin:0 0 4px;font-size:18px;color:var(--deepgreen)}.summary-card p{margin:0;white-space:pre-wrap;color:#364740}
.brand-kit{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
.brand-panel{background:var(--card);border:1px solid rgba(209,177,122,.30);border-radius:var(--card-radius);padding:20px}
.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.swatch{background:#fff;border:1px solid rgba(209,177,122,.24);border-radius:18px;padding:12px}
.swatch-color{height:58px;border-radius:14px;margin-bottom:10px;border:1px solid rgba(0,0,0,.06)}
.swatch strong{display:block;color:var(--deepgreen)}
.swatch span{font-size:13px;color:var(--muted)}
.roadmap{grid-template-columns:repeat(3,1fr)}
.plan{background:var(--card);border:1px solid rgba(209,177,122,.30);border-radius:24px;padding:22px;position:relative}
.plan h3{font-size:30px;margin:6px 0 8px;color:var(--deepgreen)}
.plan p{margin:0 0 14px;color:var(--muted)}
.plan ul{margin:0;padding-left:18px;color:#355044}
.plan li{margin:0 0 7px}
.soon{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--terracotta)}
.badge{position:absolute;top:16px;right:16px;background:rgba(200,116,67,.12);border:1px solid rgba(200,116,67,.26);color:var(--terracotta);padding:6px 9px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase}
.cta{max-width:var(--max);margin:10px auto 42px;padding:0 24px}
.cta-card{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(135deg, rgba(209,177,122,.10), rgba(167,180,162,.10));border:1px solid rgba(209,177,122,.34);border-radius:28px;padding:28px 30px;box-shadow:var(--shadow)}
.cta-card h2{font-size:38px;margin:0 0 8px}
.cta-card p{margin:0;color:var(--muted);max-width:780px}
.footer{max-width:var(--max);margin:0 auto 26px;padding:0 24px}
.footer-card{border-top:1px solid rgba(209,177,122,.38);padding:16px 6px 0;color:var(--muted);font-size:14px;text-align:center}
@media(max-width:980px){.brand-kit,.grid-3,.grid-4,.table-wrap,.roadmap,.attention-grid,.cols,.dapsir,.choice-grid,.flow-steps{grid-template-columns:1fr 1fr}.brand-panel img{margin:auto}.hero-inner{padding:36px 26px}.nav{padding-left:16px;padding-right:16px}}
@media(max-width:700px){.navlinks a:not(.btn){display:none}.brand img{height:58px}.brand-full img{height:58px;max-width:245px}.brand-name strong{font-size:22px}.hero-kicker:before,.hero-kicker:after{width:40px}.hero .tagline{font-size:18px}.hero-callout strong{font-size:24px}.section-card{padding:24px}.grid-3,.grid-4,.table-wrap,.roadmap,.attention-grid,.cols,.dapsir,.choice-grid,.flow-steps,.brand-kit{grid-template-columns:1fr}.cta-card{flex-direction:column;align-items:flex-start}.tool-head{flex-direction:column}.privacy{display:none}.step h3{font-size:30px}}


/* ============================================================
   NPTS V4 – MEER EIGEN, MINDER "GENERIC LANDING PAGE"
   Minder ronde kaarten, minder schaduw, meer redactionele lijnen,
   asymmetrie en ruimte. De gratis CTA past nu in het eerste scherm.
   ============================================================ */
:root{
  --ink:#21392E;
  --muted:#5C685F;
  --card:#FBFAF6;
  --shadow:none;
  --card-radius:10px;
}
body{background:var(--cream);}
.topbar{position:sticky;background:rgba(244,240,232,.98);backdrop-filter:none;border-bottom:1px solid rgba(33,57,46,.16)}
.nav{padding-top:8px;padding-bottom:8px;min-height:72px}
.brand-full{min-width:260px}.brand-full img{width:250px;height:auto;max-height:64px;object-fit:contain;object-position:left center}
.navlinks{font-size:14px;gap:18px}
.btn{border-radius:7px;padding:11px 17px;font-weight:600;box-shadow:none}
.btn:hover{transform:none}
.hero-wrap{padding:16px 24px 18px}
.hero{border:0;border-top:1px solid rgba(209,177,122,.75);border-bottom:1px solid rgba(209,177,122,.75);border-radius:0;background:transparent;overflow:visible}
.hero-inner{padding:32px 8px 34px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(220px,.55fr);align-items:center;gap:52px}
.hero-copy{text-align:left}
.hero-visual{display:flex;justify-content:center;align-items:center;border-left:1px solid rgba(209,177,122,.55);min-height:350px;padding-left:36px}
.hero-visual img{width:min(300px,100%);max-height:330px;object-fit:contain}
.hero-kicker{justify-content:flex-start;font-size:11px;letter-spacing:.17em}
.hero-kicker:before{display:none}.hero-kicker:after{width:90px}
.hero h1{font-size:clamp(38px,4.15vw,54px);text-align:left;line-height:1.02;max-width:770px;margin:18px 0 10px;letter-spacing:-.035em}
.hero .tagline{text-align:left;font-size:20px;margin:0 0 12px;max-width:720px;font-style:normal}
.hero .sub{text-align:left;font-size:15px;line-height:1.55;max-width:700px;margin:0 0 18px}
.hero-callout{max-width:700px;text-align:left;margin:18px 0 18px;padding:14px 0 14px 18px;border:0;border-left:3px solid var(--terracotta);border-radius:0;background:transparent}
.hero-callout strong{font-size:22px;line-height:1.22}
.hero-actions{justify-content:flex-start;margin-top:16px;gap:18px;align-items:center}
.text-link{font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(33,57,46,.35);padding-bottom:2px}
.section{padding-top:32px;padding-bottom:32px}
.section-card{background:transparent;border:0;border-top:1px solid rgba(33,57,46,.20);border-radius:0;box-shadow:none;padding:26px 0 4px}
.section h2{font-size:clamp(32px,3.3vw,46px);max-width:900px;margin-bottom:16px}
.lede{font-size:17px;line-height:1.65}
.grid-4{gap:0;border-top:1px solid rgba(209,177,122,.65);border-bottom:1px solid rgba(209,177,122,.65)}
.grid-4 .tile{border:0;border-right:1px solid rgba(209,177,122,.55);border-radius:0;background:transparent;padding:22px 20px;box-shadow:none}
.grid-4 .tile:last-child{border-right:0}
.tile .mini{font-size:10px}
.tile h3{font-size:22px;margin-top:12px}
.tile p{line-height:1.55}
.moment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(209,177,122,.65);border-bottom:1px solid rgba(209,177,122,.65)}
.moment{display:grid;grid-template-columns:74px 1fr;gap:18px;align-items:start;padding:24px 22px;border-right:1px solid rgba(209,177,122,.55)}
.moment:last-child{border-right:0}
.moment img{width:64px;height:74px;object-fit:contain}
.moment h3{font:600 24px/1.1 Fraunces,Georgia,serif;margin:3px 0 8px;color:var(--deepgreen)}
.moment p{font-size:14px;color:var(--muted);margin:0;line-height:1.55}
.table-wrap{gap:0;border-top:1px solid rgba(209,177,122,.65);border-bottom:1px solid rgba(209,177,122,.65)}
.table-card{border:0;border-right:1px solid rgba(209,177,122,.55);border-radius:0;background:transparent;padding:22px 22px 24px;overflow:visible}
.table-card:last-child{border-right:0}
.core-icon{width:70px;height:82px;object-fit:contain;margin:0 0 15px}
.table-head{background:transparent;padding:0;font-size:26px}
.table-body{padding:10px 0 0;min-height:0;font-size:15px;line-height:1.6}
.notice{border-radius:0;border-width:0 0 0 2px;background:rgba(209,177,122,.08);margin-top:24px}
.flow-step{border-radius:8px;box-shadow:none}
.tool-shell{border-radius:12px;box-shadow:none}
.tool-head{background:#FBFAF6}
textarea,input[type=text]{border-radius:7px}
.d-field,.choice,.argument-box,.attention,.result-hero{border-radius:8px}
.footer-card{text-align:left}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-visual{display:none}.hero h1{max-width:760px}.moment-grid{grid-template-columns:1fr}.moment{border-right:0;border-bottom:1px solid rgba(209,177,122,.55)}.moment:last-child{border-bottom:0}.grid-4 .tile{border-right:0;border-bottom:1px solid rgba(209,177,122,.55)}.grid-4 .tile:last-child{border-bottom:0}}
@media(max-width:700px){.hero-wrap{padding:10px 16px}.hero-inner{padding:24px 0 26px}.hero h1{font-size:38px}.hero-callout strong{font-size:20px}.brand-full{min-width:150px}.brand-full img{width:145px;height:auto;max-height:50px}.section{padding-left:16px;padding-right:16px}}


/* ============================================================
   V20 — eerste scherm: klantwaarde + interactieve perspectieven
   ============================================================ */

.navlinks a{
  font-weight:600;
  color:var(--deepgreen);
}
.navlinks .btn{font-weight:700}

.hero-wrap{
  padding:10px 24px 12px !important;
}
.hero-v20{
  border:0 !important;
  border-top:1px solid rgba(209,177,122,.75) !important;
  border-bottom:1px solid rgba(209,177,122,.75) !important;
  background:transparent !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.hero-v20 .hero-inner{
  padding:24px 8px 26px !important;
}
.hero-grid-v20{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(330px,.7fr);
  gap:48px;
  align-items:center;
}
.hero-copy-v20{
  text-align:left;
}
.hero-copy-v20 .hero-kicker{
  justify-content:flex-start;
  font-size:10px;
  letter-spacing:.17em;
  margin-bottom:12px;
}
.hero-copy-v20 .hero-kicker:before{display:none}
.hero-copy-v20 .hero-kicker:after{width:82px}

.hero-copy-v20 h1{
  text-align:left !important;
  font-size:clamp(38px,4.25vw,56px) !important;
  line-height:.99 !important;
  letter-spacing:-.035em !important;
  max-width:790px !important;
  margin:12px 0 16px !important;
}

.hero-value{
  margin:0 0 14px;
  max-width:710px;
  color:var(--deepgreen);
  font-size:18px;
  line-height:1.45;
}
.hero-value strong{
  font-weight:600;
}

.hero-recognition{
  display:flex;
  flex-wrap:wrap;
  gap:7px 16px;
  margin:0 0 16px;
  max-width:760px;
  font-size:13px;
  color:#536158;
}
.hero-recognition span{
  position:relative;
  padding-left:13px;
}
.hero-recognition span:before{
  content:"";
  position:absolute;
  left:0;
  top:.64em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--terracotta);
}

.hero-question{
  max-width:700px;
  margin:0 0 16px;
  padding:12px 0 12px 16px;
  border-left:3px solid var(--terracotta);
  font-family:Fraunces,Georgia,serif;
  font-size:20px;
  line-height:1.25;
  font-weight:600;
  color:var(--deepgreen);
}
.hero-copy-v20 .hero-actions{
  justify-content:flex-start !important;
  margin-top:12px !important;
  gap:18px !important;
}
.hero-copy-v20 .btn{
  border-radius:7px;
  padding:11px 17px;
}
.text-link{
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(33,57,46,.35);
  padding-bottom:2px;
}

/* Right-side interactive perspectives */
.hero-perspectives{
  border-left:1px solid rgba(209,177,122,.55);
  padding-left:34px;
  min-height:330px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-perspectives-label{
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--terracotta);
  font-weight:700;
  margin-bottom:18px;
}
.hero-perspective-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  align-items:start;
}
.hero-perspective{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
}
.hero-perspective img{
  width:72px;
  height:86px;
  object-fit:contain;
  transition:transform .16s ease, opacity .16s ease;
}
.hero-perspective span{
  font-family:Fraunces,Georgia,serif;
  color:var(--deepgreen);
  font-weight:600;
  font-size:17px;
}
.hero-perspective:hover img,
.hero-perspective:focus img,
.hero-perspective.active img{
  transform:translateY(-3px);
}
.hero-perspective:hover span,
.hero-perspective:focus span,
.hero-perspective.active span{
  color:var(--terracotta);
}
.hero-perspective:focus{
  outline:1px solid rgba(200,116,67,.35);
  outline-offset:5px;
  border-radius:6px;
}
.hero-perspective-detail{
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid rgba(33,57,46,.16);
  min-height:94px;
}
.hero-perspective-detail strong{
  display:block;
  color:var(--deepgreen);
  font-family:Fraunces,Georgia,serif;
  font-size:20px;
  margin-bottom:4px;
}
.hero-perspective-detail p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.48;
  max-width:380px;
}
.hero-hover-hint{
  margin-top:8px;
  font-size:10px;
  color:#8b938e;
}

/* Keep first screen compact */
@media (min-width:1000px){
  .hero-v20{
    min-height:calc(100vh - 94px);
    display:flex;
    align-items:center;
  }
  .hero-v20 .hero-inner{
    width:100%;
  }
}

@media(max-width:900px){
  .hero-grid-v20{
    grid-template-columns:1fr;
    gap:26px;
  }
  .hero-perspectives{
    border-left:0;
    border-top:1px solid rgba(209,177,122,.55);
    padding:22px 0 0;
    min-height:0;
  }
}
@media(max-width:700px){
  .hero-wrap{padding:8px 16px 10px !important}
  .hero-v20 .hero-inner{padding:20px 0 22px !important}
  .hero-copy-v20 h1{font-size:38px !important}
  .hero-value{font-size:16px}
  .hero-question{font-size:18px}
  .hero-perspective img{width:58px;height:70px}
  .hero-perspective span{font-size:15px}
  .hero-perspective-row{gap:5px}
}

/* Start at top, don't restore old local scroll position */
html, body{
  scroll-padding-top:86px;
}

/* ===== V21 — rustiger + duidelijke hover + correcte beeldachtergrond ===== */

.hero-recognition-label{
  margin:2px 0 8px;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--terracotta);
  font-weight:700;
}

.hero-recognition{
  margin-bottom:15px !important;
}

/* right heading is a proposition, not a "three perspectives" label */
.hero-perspectives-label{
  max-width:340px;
  font-family:Fraunces,Georgia,serif !important;
  font-size:22px !important;
  line-height:1.15 !important;
  letter-spacing:-.015em !important;
  text-transform:none !important;
  color:var(--deepgreen) !important;
  font-weight:600 !important;
  margin-bottom:18px !important;
}

/* Hover should be visibly interactive */
.hero-perspective{
  border-radius:10px !important;
  padding:8px 4px 7px !important;
  transition:background .15s ease, transform .15s ease !important;
}
.hero-perspective:hover,
.hero-perspective:focus{
  background:rgba(209,177,122,.10) !important;
}
.hero-perspective:hover img,
.hero-perspective:focus img{
  transform:translateY(-5px) scale(1.035) !important;
}
.hero-perspective.active{
  background:rgba(167,180,162,.12) !important;
}

.hero-perspective-detail{
  transition:opacity .12s ease !important;
}

.hero-hover-hint{
  font-size:10px !important;
  letter-spacing:.03em;
}

/* A little more breathing room now the long benefit sentence is gone */
.hero-copy-v20 h1{
  margin-bottom:15px !important;
}

/* ===== V22  rustige eerste indruk ===== */

.hero-copy-v20 h1{
  margin-bottom:22px !important;
}

.hero-recognition{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
  margin:0 0 24px !important;
  max-width:640px !important;
  border-top:1px solid rgba(33,57,46,.15);
  border-bottom:1px solid rgba(33,57,46,.15);
}

.hero-recognition span{
  display:block !important;
  padding:10px 0 10px 18px !important;
  font-size:17px !important;
  line-height:1.25 !important;
  color:var(--deepgreen) !important;
  border-top:1px solid rgba(33,57,46,.09);
}

.hero-recognition span:first-child{
  border-top:0;
}

.hero-recognition span:before{
  width:6px !important;
  height:6px !important;
  top:1.02em !important;
  background:var(--terracotta) !important;
}

.hero-copy-v20 .hero-actions{
  margin-top:0 !important;
}

.hero-grid-v20{
  align-items:center !important;
}

.hero-perspectives{
  min-height:310px !important;
}

/* Keep the first view clean and compact */
@media (min-width:1000px){
  .hero-v20{
    min-height:calc(100vh - 92px) !important;
  }
}

@media(max-width:700px){
  .hero-recognition span{
    font-size:15px !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
  }
}

/* ===== V23 copy refinement ===== */
.hero-hover-hint:empty{display:none!important}

/* ===== V24 voorbeelden + scenario's ===== */
.example-scenarios .section-card{
  padding-top:28px;
}
.scenario-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(209,177,122,.65);
  border-bottom:1px solid rgba(209,177,122,.65);
}
.scenario{
  padding:22px 20px;
  border-right:1px solid rgba(209,177,122,.55);
}
.scenario:last-child{border-right:0}
.scenario span{
  display:block;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--terracotta);
  font-weight:700;
  margin-bottom:8px;
}
.scenario h3{
  margin:0 0 8px;
  font-size:23px;
  color:var(--deepgreen);
}
.scenario p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
}

.tool-example{
  margin:12px 0 16px;
  padding:12px 14px;
  border-left:2px solid var(--gold);
  background:rgba(209,177,122,.08);
}
.tool-example strong{
  display:block;
  font-size:12px;
  color:var(--terracotta);
  margin-bottom:4px;
}
.tool-example p{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#556259;
}
.compact-example{
  margin-top:8px;
  margin-bottom:14px;
}

@media(max-width:800px){
  .scenario-grid{grid-template-columns:1fr}
  .scenario{
    border-right:0;
    border-bottom:1px solid rgba(209,177,122,.55);
  }
  .scenario:last-child{border-bottom:0}
}

/* ===== V25 morele argumentenafweging ===== */
.argument-guide{
  margin:14px 0 18px;
  border-top:1px solid rgba(209,177,122,.5);
  border-bottom:1px solid rgba(209,177,122,.5);
}
.argument-guide-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.argument-guide-grid > div{
  padding:15px 16px;
}
.argument-guide-grid > div:first-child{
  border-right:1px solid rgba(209,177,122,.45);
}
.argument-guide strong{
  display:block;
  color:var(--deepgreen);
  margin-bottom:4px;
}
.argument-guide p{
  margin:0 0 7px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.argument-guide em{
  display:block;
  color:#687269;
  font-size:12px;
  line-height:1.45;
}

.arg-type-choice{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  margin:8px 0 14px;
  font-size:12px;
  color:var(--muted);
}
.arg-type-choice > span{
  font-weight:700;
  color:var(--deepgreen);
}
.arg-type-choice label{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0;
  font-weight:500;
  color:var(--muted);
}
.arg-type-choice input{
  margin:0;
}

.moral-weighing{
  margin:22px 0 8px;
  padding:20px 0;
  border-top:1px solid rgba(33,57,46,.16);
  border-bottom:1px solid rgba(33,57,46,.16);
}
.moral-weighing h3{
  margin:6px 0 8px;
  font-size:30px;
  color:var(--deepgreen);
}
.moral-note{
  font-size:13px;
  line-height:1.5;
}

@media(max-width:700px){
  .argument-guide-grid{grid-template-columns:1fr}
  .argument-guide-grid > div:first-child{
    border-right:0;
    border-bottom:1px solid rgba(209,177,122,.45);
  }
}

/* ===== V26 stap 5 compact en leesbaar ===== */
.argument-mini-guide{
  display:flex;
  gap:10px 22px;
  flex-wrap:wrap;
  margin:0 0 12px;
  padding:10px 0;
  border-top:1px solid rgba(33,57,46,.12);
  border-bottom:1px solid rgba(33,57,46,.12);
  font-size:12px;
  color:var(--muted);
}
.argument-mini-guide strong{
  color:var(--deepgreen);
  margin-right:4px;
}
.argument-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.argument-side{
  border:1px solid rgba(209,177,122,.30);
  padding:14px;
  background:#fbfaf7;
}
.argument-side > strong{
  display:block;
  font-family:Fraunces,Georgia,serif;
  font-size:21px;
  color:var(--deepgreen);
  margin-bottom:8px;
}
.argument-side textarea{
  min-height:125px;
  margin:0;
}
.weigh-block{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(33,57,46,.14);
}
.micro-help{
  margin:-2px 0 8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.weigh-block textarea{
  min-height:86px;
}
@media(max-width:700px){
  .argument-columns{grid-template-columns:1fr}
}

/* ===== V27 open waardenstap ===== */
.step textarea#values,
.step textarea#frameworks{
  min-height:105px;
}

/* ===== V28 overzicht weer strak twee aan twee ===== */
.flow-steps{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:14px !important;
}
.flow-step{
  min-height:128px;
  padding:18px 18px 18px 72px !important;
  display:block;
}
.flow-step strong{
  font-size:16px;
  line-height:1.3;
}
.flow-step p{
  margin:5px 0 0 !important;
  font-size:14px !important;
  line-height:1.45 !important;
}
@media(max-width:700px){
  .flow-steps{grid-template-columns:1fr !important;}
  .flow-step{min-height:0;}
}

/* ===== V29 rustige toolnavigatie ===== */
.tool-head{
  padding-top:16px !important;
  padding-bottom:16px !important;
}
.tool-head h2{
  font-size:26px !important;
}
.tool-head p{
  font-size:13px !important;
  margin-top:4px !important;
}
.flow-steps{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
@media(max-width:700px){
  .flow-steps{grid-template-columns:1fr !important;}
}

/* ===== V31 top-knop in iedere verkennerstap ===== */
.step-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin:6px 0 10px;
}
.step-title-row h3{
  margin:0 !important;
  flex:1 1 auto;
}
.step-top-next{
  flex:0 0 auto;
  padding:9px 14px !important;
  font-size:13px !important;
  white-space:nowrap;
}
@media(max-width:650px){
  .step-title-row{
    align-items:flex-start;
    gap:10px;
  }
  .step-top-next{
    padding:8px 10px !important;
    font-size:12px !important;
  }
}



/* ===== V33 multipage additions ===== */
.page-hero{max-width:var(--max);margin:0 auto;padding:44px 24px 26px}
.page-hero-inner{border-top:1px solid rgba(209,177,122,.75);border-bottom:1px solid rgba(209,177,122,.75);padding:44px 8px 42px}
.page-hero .kicker{margin-bottom:14px}
.page-hero h1{font-size:clamp(40px,5vw,64px);line-height:1.02;margin:0 0 16px;max-width:900px;color:var(--deepgreen)}
.page-hero p{font-size:18px;color:var(--muted);max-width:820px;margin:0;line-height:1.65}

.recognition-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.recognition-intro h2{max-width:520px}
.recognition-list{border-top:1px solid rgba(209,177,122,.65)}
.recognition-row{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:17px 0;border-bottom:1px solid rgba(209,177,122,.5)}
.recognition-row .mark{font-family:Fraunces,Georgia,serif;font-size:22px;color:var(--terracotta)}
.recognition-row strong{display:block;font-size:17px;color:var(--deepgreen);margin-bottom:3px}
.recognition-row p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.moment-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:28px;border-top:1px solid rgba(33,57,46,.18);border-bottom:1px solid rgba(33,57,46,.18)}
.moment-mini a{padding:20px 18px;text-decoration:none;border-right:1px solid rgba(209,177,122,.5)}
.moment-mini a:last-child{border-right:0}
.moment-mini strong{display:block;font-family:Fraunces,Georgia,serif;font-size:22px;color:var(--deepgreen);margin-bottom:6px}
.moment-mini span{display:block;color:var(--muted);font-size:13px;line-height:1.45}

.service-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(209,177,122,.65);border-bottom:1px solid rgba(209,177,122,.65)}
.service-item{padding:24px 22px;border-right:1px solid rgba(209,177,122,.55)}
.service-item:last-child{border-right:0}
.service-item h3{margin:0 0 8px;font-size:26px;color:var(--deepgreen)}
.service-item p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.55}
.result-label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--terracotta);font-weight:700;margin-bottom:5px}
.service-item ul{margin:0;padding-left:18px;color:#405147;font-size:13px}
.service-item li{margin-bottom:5px}

.founder-teaser{display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:center}
.founder-teaser img{width:100%;aspect-ratio:1/1;object-fit:cover}
.founder-teaser h2{margin-bottom:12px}
.founder-teaser p{font-size:16px;line-height:1.65;color:var(--muted);max-width:700px}

.content-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.content-block{border-top:1px solid rgba(209,177,122,.6);padding-top:18px}
.content-block h3{font-size:28px;margin:0 0 10px;color:var(--deepgreen)}
.content-block p,.content-block li{color:var(--muted);font-size:15px;line-height:1.6}
.content-block ul{padding-left:18px}
.long-copy{max-width:820px}
.long-copy h2{font-size:38px;margin-top:38px}
.long-copy h3{font-size:25px;margin-top:26px}
.long-copy p,.long-copy li{font-size:16px;color:var(--muted);line-height:1.7}

.founder-page{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);gap:48px;align-items:start}
.founder-page img{width:100%;max-width:430px;aspect-ratio:1/1;object-fit:cover;position:sticky;top:110px}
.founder-copy h2{font-size:38px;margin:0 0 12px}
.founder-copy h3{font-size:24px;margin:28px 0 8px}
.founder-copy p{font-size:16px;line-height:1.7;color:var(--muted)}
.founder-point{padding:15px 0;border-top:1px solid rgba(209,177,122,.5)}
.founder-point strong{display:block;color:var(--deepgreen);margin-bottom:4px}

.problem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid rgba(209,177,122,.65);border-bottom:1px solid rgba(209,177,122,.65)}
.problem-card{padding:24px 22px;border-right:1px solid rgba(209,177,122,.5);border-bottom:1px solid rgba(209,177,122,.5)}
.problem-card:nth-child(2n){border-right:0}
.problem-card:nth-last-child(-n+2){border-bottom:0}
.problem-card h3{margin:0 0 8px;font-size:24px;color:var(--deepgreen)}
.problem-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}

.theme-tags{display:flex;flex-wrap:wrap;gap:9px}
.theme-tags span{border:1px solid rgba(62,90,73,.22);padding:8px 12px;font-size:13px;color:var(--deepgreen);background:rgba(255,255,255,.35)}

.subpage-cta{max-width:var(--max);margin:16px auto 44px;padding:0 24px}
.subpage-cta-inner{border-top:1px solid rgba(209,177,122,.7);padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}
.subpage-cta h2{font-size:32px;margin:0 0 5px}
.subpage-cta p{margin:0;color:var(--muted)}

.navlinks a[aria-current="page"]{color:var(--terracotta);font-weight:700}
.navlinks{gap:16px!important}

@media(max-width:900px){
  .recognition-layout,.founder-page,.founder-teaser,.content-grid-2{grid-template-columns:1fr}
  .service-strip,.moment-mini{grid-template-columns:1fr}
  .service-item,.moment-mini a{border-right:0;border-bottom:1px solid rgba(209,177,122,.5)}
  .service-item:last-child,.moment-mini a:last-child{border-bottom:0}
  .founder-page img{position:static;max-width:360px}
}
@media(max-width:700px){
  .page-hero{padding:26px 16px 18px}
  .page-hero-inner{padding:30px 0}
  .problem-grid{grid-template-columns:1fr}
  .problem-card{border-right:0!important;border-bottom:1px solid rgba(209,177,122,.5)!important}
  .problem-card:last-child{border-bottom:0!important}
}



/* =========================================================
   PRODUCTIESTRUCTUUR
   Gedeelde navigatie/footer en kleine utility classes
   ========================================================= */
[data-site-header], [data-site-footer] { display: contents; }
.mt-18 { margin-top: 18px; }
.micro-note { font-size:12px; color:#606761; margin-top:7px; }

@media(max-width:1100px){
  .navlinks{gap:12px!important}
  .navlinks a{font-size:13px}
}

/* ===== V36 information architecture ===== */
.tool-mininav{
  display:flex;
  justify-content:flex-end;
  margin:0 0 10px;
}
.tool-mininav .text-link{
  font-size:13px;
}

/* ===== V37 homepage conversion and hierarchy ===== */
.hero-audience{
  margin:18px 0 12px;
  max-width:760px;
  font-size:15px;
  line-height:1.55;
  color:var(--deepgreen);
  font-weight:600;
}
.hero-tool-note{
  margin:8px 0 0;
  max-width:620px;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}
.founder-strengths{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:18px 0;
  border-top:1px solid rgba(209,177,122,.55);
  border-bottom:1px solid rgba(209,177,122,.55);
}
.founder-strengths>div{
  padding:14px 14px 14px 0;
  border-right:1px solid rgba(209,177,122,.45);
}
.founder-strengths>div:last-child{border-right:0;padding-left:14px}
.founder-strengths>div:nth-child(2){padding-left:14px}
.founder-strengths strong{
  display:block;
  color:var(--deepgreen);
  font-size:14px;
  margin-bottom:4px;
}
.founder-strengths span{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.free-tool-micro{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}
.pro-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(209,177,122,.6);
  border-bottom:1px solid rgba(209,177,122,.6);
  margin-top:24px;
}
.pro-strip article{
  padding:22px 20px;
  border-right:1px solid rgba(209,177,122,.5);
}
.pro-strip article:last-child{border-right:0}
.pro-strip h3{
  margin:4px 0 8px;
  font-size:23px;
  color:var(--deepgreen);
}
.pro-strip p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.product-note{
  margin:12px 0 0;
  font-size:12px;
  color:var(--muted);
}
@media(max-width:900px){
  .founder-strengths,.pro-strip{grid-template-columns:1fr}
  .founder-strengths>div,.pro-strip article{
    border-right:0;
    border-bottom:1px solid rgba(209,177,122,.45);
    padding:14px 0;
  }
  .founder-strengths>div:last-child,.pro-strip article:last-child{border-bottom:0}
}

/* ===== V38 brand + Studio paid route ===== */
.brand.brand-full img{
  transform:scale(1.16);
  transform-origin:left center;
}

.hero-brand-logo{
  margin:0 0 18px;
}
.hero-brand-logo img{
  width:min(300px, 62vw);
  height:auto;
  display:block;
}

.paid-note{
  margin:10px 0 22px;
  max-width:760px;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}
.paid-note strong{color:var(--deepgreen)}

.paid-service-badge{
  display:inline-block;
  margin-top:18px;
  padding:8px 12px;
  border:1px solid rgba(200,116,67,.55);
  color:var(--terracotta);
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.process-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(209,177,122,.6);
  border-bottom:1px solid rgba(209,177,122,.6);
  margin-top:24px;
}
.process-strip article{
  padding:22px 18px;
  border-right:1px solid rgba(209,177,122,.5);
}
.process-strip article:last-child{border-right:0}
.process-num{
  font-family:Fraunces,Georgia,serif;
  color:var(--terracotta);
  font-size:22px;
  margin-bottom:8px;
}
.process-strip h3{
  margin:0 0 8px;
  color:var(--deepgreen);
  font-size:21px;
}
.process-strip p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.studio-contact-block{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.studio-contact-block h2{margin-bottom:8px}

@media(max-width:900px){
  .brand.brand-full img{transform:scale(1.08)}
  .process-strip{grid-template-columns:1fr 1fr}
  .process-strip article:nth-child(2){border-right:0}
  .process-strip article:nth-child(-n+2){border-bottom:1px solid rgba(209,177,122,.5)}
}
@media(max-width:650px){
  .process-strip{grid-template-columns:1fr}
  .process-strip article{
    border-right:0!important;
    border-bottom:1px solid rgba(209,177,122,.5)!important;
  }
  .process-strip article:last-child{border-bottom:0!important}
  .studio-contact-block{display:block}
  .studio-contact-block .btn{margin-top:16px}
}

/* ===== V39 UX correctie ===== */
.brand.brand-full img{
  transform:none !important;
  width:174px;
  max-height:82px;
  height:auto;
  object-fit:contain;
}

.route-choice{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:24px;
  border-top:1px solid rgba(209,177,122,.65);
  border-bottom:1px solid rgba(209,177,122,.65);
}
.route-card{
  padding:28px;
}
.route-card:first-child{
  border-right:1px solid rgba(209,177,122,.55);
}
.route-label{
  color:var(--terracotta);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
  font-weight:700;
  margin-bottom:8px;
}
.route-card h3{
  margin:0 0 10px;
  color:var(--deepgreen);
  font-size:30px;
}
.route-card>p{
  margin:0 0 18px;
  max-width:520px;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}
.route-card .btn{
  display:inline-flex;
  margin-bottom:22px;
}
.route-future{
  border-top:1px solid rgba(33,57,46,.12);
  padding-top:15px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.route-future strong{
  font-size:12px;
  color:var(--deepgreen);
}
.route-future span{
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

@media(max-width:720px){
  .route-choice{grid-template-columns:1fr}
  .route-card:first-child{
    border-right:0;
    border-bottom:1px solid rgba(209,177,122,.55);
  }
}

/* ===== V40 snelle productduidelijkheid ===== */
.hero-kicker-main{
  font-size:14px !important;
  letter-spacing:.19em !important;
  font-weight:800 !important;
  margin-bottom:18px !important;
}

.offer-quick{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px 12px;
}
.offer-quick-inner{
  border-top:1px solid rgba(209,177,122,.65);
  border-bottom:1px solid rgba(209,177,122,.65);
  padding:18px 0;
}
.offer-quick-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--terracotta);
  font-weight:800;
  margin-bottom:12px;
}
.offer-quick-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.offer-quick-item{
  display:block;
  padding:6px 18px 8px;
  border-right:1px solid rgba(209,177,122,.45);
  text-decoration:none;
  color:inherit;
}
.offer-quick-item:first-child{padding-left:0}
.offer-quick-item:last-child{border-right:0}
.offer-quick-item strong{
  display:block;
  color:var(--deepgreen);
  font-size:16px;
  margin:5px 0 3px;
}
.offer-quick-item small{
  display:block;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}
.offer-status,
.tier-status{
  display:inline-block;
  font-style:normal;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.offer-status.available,
.tier-status.available{color:var(--moss)}
.offer-status.developing,
.tier-status.developing{color:var(--terracotta)}

.digital-tiers{
  margin-top:4px;
  border-top:1px solid rgba(33,57,46,.13);
}
.digital-tier{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:12px 0;
  border-bottom:1px solid rgba(33,57,46,.10);
}
.digital-tier:last-child{border-bottom:0}
.digital-tier>div{
  min-width:0;
}
.digital-tier strong{
  display:block;
  color:var(--deepgreen);
  font-size:13px;
  margin-bottom:2px;
}
.digital-tier span{
  display:block;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}
.digital-tier .tier-status{
  flex:0 0 auto;
  padding-top:2px;
  white-space:nowrap;
}

@media(max-width:900px){
  .offer-quick-grid{grid-template-columns:1fr 1fr}
  .offer-quick-item{
    border-bottom:1px solid rgba(209,177,122,.4);
  }
  .offer-quick-item:nth-child(2){border-right:0}
  .offer-quick-item:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:620px){
  .offer-quick{padding-left:16px;padding-right:16px}
  .offer-quick-grid{grid-template-columns:1fr}
  .offer-quick-item{
    padding:10px 0;
    border-right:0;
    border-bottom:1px solid rgba(209,177,122,.4)!important;
  }
  .offer-quick-item:last-child{border-bottom:0!important}
  .digital-tier{display:block}
  .digital-tier .tier-status{margin-top:5px}
}

/* ===== V41 Pro productarchitectuur ===== */
.quick-routes{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.quick-route{
  padding:8px 24px 8px 0;
}
.quick-route:first-child{
  border-right:1px solid rgba(209,177,122,.45);
}
.quick-route:last-child{
  padding-left:24px;
}
.quick-route-label{
  color:var(--terracotta);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:10px;
  font-weight:800;
  margin-bottom:5px;
}
.quick-route strong{
  display:block;
  color:var(--deepgreen);
  font-size:17px;
  margin-bottom:5px;
}
.quick-route p{
  margin:0 0 8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.quick-actions .text-link{
  font-size:12px;
}
.route-self .btn + .btn{
  margin-left:8px;
}
.clickable-tier{
  cursor:pointer;
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(209,177,122,.65);
  border-bottom:1px solid rgba(209,177,122,.65);
  margin-top:26px;
}
.pricing-card{
  padding:24px 20px;
  border-right:1px solid rgba(209,177,122,.5);
  display:flex;
  flex-direction:column;
}
.pricing-card:last-child{border-right:0}
.pricing-card.featured{background:rgba(167,180,162,.12)}
.pricing-card.studio-card{background:rgba(200,116,67,.05)}
.pricing-status{
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:9px;
  font-weight:800;
  margin-bottom:8px;
}
.pricing-status.available{color:var(--moss)}
.pricing-status.developing{color:var(--terracotta)}
.pricing-card h3{
  margin:0 0 8px;
  color:var(--deepgreen);
  font-size:30px;
}
.pricing-for{
  margin:0 0 16px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.pricing-card ul{
  margin:0 0 20px;
  padding-left:18px;
  color:#405147;
  font-size:12px;
  line-height:1.5;
  flex:1 1 auto;
}
.pricing-card li{margin-bottom:6px}
.product-dev-note{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(209,177,122,.55);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
}
.product-dev-note strong{color:var(--deepgreen)}
.product-dev-note span{color:var(--muted);font-size:13px}
@media(max-width:1000px){
  .pricing-grid{grid-template-columns:1fr 1fr}
  .pricing-card:nth-child(2){border-right:0}
  .pricing-card:nth-child(-n+2){border-bottom:1px solid rgba(209,177,122,.5)}
}
@media(max-width:760px){
  .quick-routes{grid-template-columns:1fr}
  .quick-route{padding:10px 0;border-right:0!important}
  .quick-route:first-child{border-bottom:1px solid rgba(209,177,122,.45)}
  .quick-route:last-child{padding-left:0}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-card{border-right:0!important;border-bottom:1px solid rgba(209,177,122,.5)!important}
  .pricing-card:last-child{border-bottom:0!important}
  .product-dev-note{grid-template-columns:1fr}
}

/* ===== V42 orientation for Pro ===== */
.navlinks a[href$="/pro/"]{
  position:relative;
}
.navlinks a[href$="/pro/"]::after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--terracotta);
  top:-2px;
  right:-7px;
}
.navlinks a[href$="/pro/"][aria-current="page"]{
  color:var(--terracotta);
  font-weight:800;
}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  font-size:12px;
  color:var(--muted);
}
.breadcrumb a{
  color:var(--deepgreen);
  text-decoration:none;
}
.breadcrumb a:hover{text-decoration:underline}

.product-page-status{
  display:inline-block;
  margin:2px 0 14px;
  padding:7px 11px;
  border:1px solid rgba(200,116,67,.55);
  color:var(--terracotta);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.product-page-context{
  margin-top:12px !important;
  font-size:13px !important;
  max-width:760px;
}


/* ===== V43 helderdere verkooproute ===== */
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.hero-actions .btn{
  margin-bottom:0 !important;
}
.hero-tool-note{
  margin-top:14px;
  font-size:14px !important;
}
.hero-tool-note .text-link{
  font-size:14px;
}

.sales-routes{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:0;
  margin-top:24px;
  border-top:1px solid rgba(209,177,122,.65);
  border-bottom:1px solid rgba(209,177,122,.65);
}
.sales-card{
  padding:30px 28px;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.sales-card + .sales-card{
  border-left:1px solid rgba(209,177,122,.55);
}
.sales-card-studio{
  background:rgba(200,116,67,.04);
}
.sales-card-digital{
  background:rgba(255,255,255,.25);
}
.sales-topline{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.sales-status{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border:1px solid rgba(33,57,46,.14);
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sales-status.available{
  color:var(--moss);
  border-color:rgba(107,137,116,.35);
}
.sales-status.developing{
  color:var(--terracotta);
  border-color:rgba(200,116,67,.35);
}
.sales-type{
  color:var(--terracotta);
  font-size:11px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.sales-card h3{
  margin:0 0 10px;
  color:var(--deepgreen);
  font-size:34px;
}
.sales-card > p{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.58;
  font-size:15px;
  max-width:560px;
}
.sales-points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
  flex:1 1 auto;
}
.sales-points li{
  padding:14px 0;
  border-top:1px solid rgba(33,57,46,.1);
  display:grid;
  grid-template-columns:160px 1fr;
  gap:14px;
  align-items:start;
}
.sales-points li:first-child{
  border-top:0;
}
.sales-points strong{
  color:var(--deepgreen);
  font-size:16px;
}
.sales-points span{
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.sales-points-compact strong{
  font-size:15px;
}
.sales-footer{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(33,57,46,.1);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 18px;
}
.sales-footer span{
  color:var(--muted);
  font-size:13px;
}
@media (max-width: 980px){
  .sales-routes{
    grid-template-columns:1fr;
  }
  .sales-card + .sales-card{
    border-left:0;
    border-top:1px solid rgba(209,177,122,.55);
  }
}
@media (max-width: 700px){
  .sales-card{
    padding:22px 18px;
  }
  .sales-card h3{
    font-size:28px;
  }
  .sales-points li{
    grid-template-columns:1fr;
    gap:6px;
  }
}


/* ===== V44: terug naar heldere commerciële homepage ===== */
.digital-product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:24px;
  border-top:1px solid rgba(209,177,122,.65);
  border-bottom:1px solid rgba(209,177,122,.65);
}
.digital-product-card{
  padding:26px 24px;
  border-right:1px solid rgba(209,177,122,.5);
  display:flex;
  flex-direction:column;
}
.digital-product-card:last-child{
  border-right:0;
}
.digital-product-card.featured{
  background:rgba(167,180,162,.10);
}
.digital-status{
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.digital-status.available{color:var(--moss)}
.digital-status.developing{color:var(--terracotta)}
.digital-product-card h3{
  margin:0 0 8px;
  color:var(--deepgreen);
  font-size:29px;
}
.digital-product-card p{
  margin:0 0 20px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  flex:1 1 auto;
}
.digital-product-card .btn{
  align-self:flex-start;
}

@media(max-width:800px){
  .digital-product-grid{grid-template-columns:1fr}
  .digital-product-card{
    border-right:0;
    border-bottom:1px solid rgba(209,177,122,.5);
  }
  .digital-product-card:last-child{border-bottom:0}
}

/* ===== V45 herstel tweekoloms aanbod ===== */
#aanbod .section-card > h2{
  max-width:900px;
}
.sales-routes{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:0;
  margin-top:24px;
  border-top:1px solid rgba(209,177,122,.65);
  border-bottom:1px solid rgba(209,177,122,.65);
}
.sales-card{
  padding:30px 28px;
  display:flex;
  flex-direction:column;
}
.sales-card + .sales-card{
  border-left:1px solid rgba(209,177,122,.55);
}
.sales-card-studio{
  background:rgba(200,116,67,.035);
}
.sales-topline{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.sales-status{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border:1px solid rgba(107,137,116,.35);
  border-radius:999px;
  color:var(--moss);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.sales-type{
  color:var(--terracotta);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.sales-card h3{
  margin:0 0 10px;
  color:var(--deepgreen);
  font-size:34px;
}
.sales-card > p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:15px;
  line-height:1.58;
}
.sales-points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  flex:1 1 auto;
}
.sales-points li{
  padding:17px 0;
  border-top:1px solid rgba(33,57,46,.10);
  display:grid;
  grid-template-columns:180px 1fr;
  gap:16px;
  align-items:start;
}
.sales-points li:first-child{border-top:0}
.sales-points strong{
  color:var(--deepgreen);
  font-size:16px;
}
.sales-points span{
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.sales-points em{
  color:var(--terracotta);
  font-size:11px;
  font-style:normal;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.sales-footer{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(33,57,46,.10);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 20px;
}
.sales-footer span{
  color:var(--muted);
  font-size:13px;
}
@media(max-width:900px){
  .sales-routes{grid-template-columns:1fr}
  .sales-card + .sales-card{
    border-left:0;
    border-top:1px solid rgba(209,177,122,.55);
  }
}
@media(max-width:680px){
  .sales-card{padding:22px 18px}
  .sales-card h3{font-size:28px}
  .sales-points li{
    grid-template-columns:1fr;
    gap:5px;
  }
}


/* ===== V47 inhoudelijke aanscherping vraagstukken + aanpak ===== */
.case-question{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(209,177,122,.55);
  color:var(--deepgreen);
  font-family:'Fraunces', serif;
  font-size:20px;
  line-height:1.45;
}

.method-connection-list{
  margin-top:26px;
  border-top:1px solid rgba(209,177,122,.65);
}
.method-connection-row{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:20px;
  padding:24px 0;
  border-bottom:1px solid rgba(209,177,122,.45);
}
.method-number{
  color:var(--terracotta);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  padding-top:4px;
}
.method-label{
  color:var(--terracotta);
  font-size:10px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.method-content h3{
  margin:0 0 8px;
  color:var(--deepgreen);
  font-size:23px;
  line-height:1.3;
}
.method-content p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  max-width:820px;
}
.method-synthesis{
  margin-top:24px;
  padding:22px 24px;
  background:rgba(167,180,162,.10);
  border-left:3px solid var(--terracotta);
}
.method-synthesis strong{
  color:var(--deepgreen);
  font-size:17px;
}
.method-synthesis p{
  margin:6px 0 0;
  color:var(--muted);
  line-height:1.6;
}
@media(max-width:680px){
  .method-connection-row{
    grid-template-columns:1fr;
    gap:6px;
  }
  .method-number{
    padding-top:0;
  }
}


/* ===== V48 sterkere oprichterspositie ===== */
.founder-origin{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(209,177,122,.5);
}
.founder-origin h3{
  margin:0 0 10px;
  color:var(--deepgreen);
  font-size:24px;
}
.founder-origin p{
  max-width:850px;
  color:var(--muted);
  line-height:1.65;
}
.founder-section-kicker{
  margin-top:44px;
}
.founder-section-title{
  max-width:760px;
}
.founder-experience-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  margin-top:24px;
  border-top:1px solid rgba(209,177,122,.6);
  border-bottom:1px solid rgba(209,177,122,.6);
}
.founder-experience-item{
  padding:24px 24px 24px 0;
  border-bottom:1px solid rgba(209,177,122,.4);
}
.founder-experience-item:nth-child(odd){
  border-right:1px solid rgba(209,177,122,.45);
  padding-right:28px;
}
.founder-experience-item:nth-child(even){
  padding-left:28px;
}
.founder-experience-item:nth-last-child(-n+2){
  border-bottom:0;
}
.founder-experience-item:last-child:nth-child(odd){
  border-bottom:0;
}
.founder-experience-item h3{
  margin:0 0 8px;
  color:var(--deepgreen);
  font-size:20px;
}
.founder-experience-item p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.founder-value-block{
  margin-top:38px;
}
.founder-value-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:18px;
  border-top:1px solid rgba(209,177,122,.55);
  border-bottom:1px solid rgba(209,177,122,.55);
}
.founder-value-grid article{
  padding:22px 22px 22px 0;
  border-right:1px solid rgba(209,177,122,.45);
}
.founder-value-grid article + article{
  padding-left:22px;
}
.founder-value-grid article:last-child{
  border-right:0;
}
.founder-value-grid h3{
  margin:0 0 8px;
  color:var(--deepgreen);
  font-size:18px;
}
.founder-value-grid p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.founder-core{
  margin-top:28px;
  padding:22px 24px;
  background:rgba(167,180,162,.10);
  border-left:3px solid var(--terracotta);
}
.founder-core strong{
  display:block;
  color:var(--deepgreen);
  margin-bottom:6px;
}
.founder-core p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}
@media(max-width:800px){
  .founder-experience-grid,
  .founder-value-grid{
    grid-template-columns:1fr;
  }
  .founder-experience-item,
  .founder-experience-item:nth-child(odd),
  .founder-experience-item:nth-child(even){
    padding:20px 0;
    border-right:0;
    border-bottom:1px solid rgba(209,177,122,.4);
  }
  .founder-experience-item:last-child{
    border-bottom:0;
  }
  .founder-value-grid article,
  .founder-value-grid article + article{
    padding:20px 0;
    border-right:0;
    border-bottom:1px solid rgba(209,177,122,.4);
  }
  .founder-value-grid article:last-child{
    border-bottom:0;
  }
}


/* V53 — commerciële interacties, binnen bestaande NPTS-vormtaal */
.dilemma-explorer{
  display:grid;
  grid-template-columns:minmax(240px,.9fr) minmax(0,1.35fr);
  gap:34px;
  margin-top:26px;
  align-items:start;
}
.dilemma-buttons{
  display:grid;
  gap:8px;
}
.dilemma-button{
  appearance:none;
  border:0;
  border-top:1px solid rgba(33,57,46,.18);
  background:transparent;
  color:var(--deepgreen);
  text-align:left;
  font:600 16px/1.35 Inter,Arial,sans-serif;
  padding:15px 4px;
  cursor:pointer;
  transition:padding .18s ease,color .18s ease,border-color .18s ease;
}
.dilemma-button:last-child{
  border-bottom:1px solid rgba(33,57,46,.18);
}
.dilemma-button:hover,
.dilemma-button:focus,
.dilemma-button.active{
  color:var(--terracotta);
  padding-left:12px;
  border-color:rgba(200,116,67,.48);
  outline:none;
}
.dilemma-detail{
  min-height:225px;
  border-left:1px solid rgba(209,177,122,.7);
  padding:10px 0 8px 30px;
}
.dilemma-detail-label{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  font-weight:700;
  color:var(--terracotta);
  margin-bottom:12px;
}
.dilemma-detail h3{
  font-family:Fraunces,Georgia,serif;
  font-size:31px;
  line-height:1.13;
  margin:0 0 15px;
  color:var(--deepgreen);
}
.dilemma-detail p{
  color:var(--muted);
  line-height:1.65;
  margin:0;
  max-width:720px;
}
.dilemma-detail p strong{color:var(--deepgreen)}
.dilemma-intro{max-width:760px}





















@media(max-width:800px){
  .dilemma-explorer,
  .delay-calculator,
  .cost-statement{
    grid-template-columns:1fr;
    gap:22px;
  }
  .dilemma-detail{
    min-height:0;
    border-left:0;
    border-top:1px solid rgba(209,177,122,.7);
    padding:22px 0 0;
  }
  


/* V56 — V53 als basis: opbrengst omhoog, gimmick heeft één functie */
#top{
  padding-bottom:18px;
}
#opbrengst{
  padding-top:8px;
}
#opbrengst .section-card{
  padding-top:28px;
}
#opbrengst .founder-strengths{
  margin-top:20px;
}
.hero-perspectives-label{
  max-width:390px;
}
#hero-perspective-detail p{
  max-width:390px;
}
#meerwaarde .recognition-row strong{
  color:var(--deepgreen);
}
@media(min-width:1100px){
  #opbrengst{
    margin-top:-4px;
  }
}


/* V57 hero fix: CTA terug en compacter zodat volgende blok sneller in beeld komt */
.hero-v20 .hero-inner{
  padding: 16px 8px 18px !important;
}
.hero-grid-v20{
  gap: 34px;
  align-items: start;
}
.hero-copy-v20 h1{
  font-size: clamp(36px,4vw,52px) !important;
  margin: 10px 0 12px !important;
}
.hero-recognition{
  margin:0 0 12px;
}
.hero-audience{
  margin: 12px 0 10px;
}
.hero-perspectives{
  min-height: 0;
  justify-content: flex-start;
  padding-top: 8px;
}
.hero-perspectives-label{
  margin-bottom: 12px;
}
.hero-perspective-row{
  margin-bottom: 12px;
}
#top{
  padding-bottom: 8px;
}
#opbrengst{
  padding-top: 0;
}
#opbrengst .section-card{
  padding-top: 18px;
}
.hero-copy-v20 .hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px !important;
  margin-top:10px !important;
}
.hero-copy-v20 .hero-actions .btn{
  min-width: 236px;
  text-align:center;
}
.hero-tool-note{
  margin:10px 0 0;
}
@media(max-width:1100px){
  .hero-grid-v20{
    gap:24px;
  }
}
@media(max-width:700px){
  .hero-v20 .hero-inner{padding:14px 0 16px !important;}
  .hero-copy-v20 .hero-actions .btn{min-width:0;width:100%;}
}