/* Bouwstenen voor afwisseling tussen tekstblokken (2026-09-25). */
:root{--card:#fffcf3;--shadow-soft:0 18px 40px -28px color-mix(in oklab,var(--ink) 55%,transparent)}

/* ── Gekleurde vlakken over de volle breedte, met golfranden ── */
html,body{overflow-x:clip}
.band{position:relative;padding:clamp(72px,11vh,130px) 0;margin:clamp(56px,9vh,110px) 0;background:var(--band-bg);border-image:conic-gradient(var(--band-bg) 0 0) fill 0/0/0 100vmax;color:var(--band-fg,var(--text))}
.band--sage{--band-bg:color-mix(in oklab,var(--sage) 26%,var(--bone))}
.band--gold{--band-bg:color-mix(in oklab,var(--gold) 20%,var(--bone))}
.band--lilac{--band-bg:color-mix(in oklab,var(--lilac) 34%,var(--bone))}
.band--teal{--band-bg:var(--sage-deep);--band-fg:var(--bone)}
.band--ink{--band-bg:var(--ink);--band-fg:var(--bone)}
.band:before,.band:after{content:"";position:absolute;left:-100vmax;right:-100vmax;height:34px;background:var(--band-bg);-webkit-mask:var(--wave) 50% 0/1440px 100% repeat-x;mask:var(--wave) 50% 0/1440px 100% repeat-x}
.band:before{top:-33px}
.band:after{bottom:-33px;transform:scaleY(-1) scaleX(-1)}
.band{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34 V16 C 220 0, 420 2, 640 16 S 1080 32, 1260 16 S 1400 14, 1440 16 V34 Z'/%3E%3C/svg%3E")}
.band--teal,.band--ink{color:var(--bone)}
.band--teal :is(h1,h2,h3,h4,strong,p,li),.band--ink :is(h1,h2,h3,h4,strong,p,li){color:var(--bone)}
.band--teal .lede,.band--ink .lede{color:color-mix(in oklab,var(--bone) 82%,transparent)}
.band--teal .eyebrow,.band--ink .eyebrow{color:var(--sage)}
.band > .container > :last-child,.band > .reading > :last-child{margin-bottom:0}

/* ── Icoon in een afgerond vierkantje ── */
.ico{display:inline-grid;place-items:center;width:48px;height:48px;flex:none;border-radius:15px;background:var(--sage-deep);color:var(--bone);transition:transform .45s var(--spring,ease)}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico--gold{background:var(--gold);color:var(--ink)}
.ico--ink{background:var(--ink);color:var(--bone)}
.ico--sage{background:var(--sage);color:var(--sage-deep)}
.ico--lilac{background:var(--lilac);color:var(--ink)}
.ico--round{border-radius:50%}
.ico--sm{width:38px;height:38px;border-radius:12px}.ico--sm svg{width:19px;height:19px}

/* ── Raster met icoonkaarten ── */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(14px,2vw,22px);margin:clamp(28px,4vh,44px) 0}
.icon-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:12px;transition:transform .45s var(--spring,ease),box-shadow .35s}
.icon-card:hover{transform:translateY(-6px)}
.icon-card:hover .ico{transform:rotate(-8deg) scale(1.08)}
.icon-card h3,.icon-card h4{font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:500;line-height:1.25;margin:6px 0 0;letter-spacing:-.01em}
.icon-card p,.icon-card li{color:var(--text-soft);font-size:.96rem;line-height:1.6;margin:0}
.icon-card--feature{background:linear-gradient(145deg,var(--sage-deep),color-mix(in oklab,var(--sage-deep) 70%,var(--ink)));border-color:transparent;color:var(--bone)}
.icon-card--feature :is(h3,h4,p,li,strong){color:var(--bone)}
.icon-card--feature .ico{background:color-mix(in oklab,var(--bone) 18%,transparent);color:var(--bone)}
.icon-card--ink{background:linear-gradient(145deg,var(--ink),color-mix(in oklab,var(--ink) 75%,var(--blush-deep)));border-color:transparent}
.icon-card--ink :is(h3,h4,p,li,strong){color:var(--bone)}
.icon-card--ink .ico{background:var(--gold);color:var(--ink)}
.band--teal .icon-card:not(.icon-card--feature):not(.icon-card--ink) :is(h3,h4,strong){color:var(--text)}
.band--teal .icon-card:not(.icon-card--feature):not(.icon-card--ink) :is(p,li),.band--ink .icon-card:not(.icon-card--feature):not(.icon-card--ink) :is(p,li){color:var(--text-soft)}
.band--ink .icon-card:not(.icon-card--feature):not(.icon-card--ink) :is(h3,h4,strong){color:var(--text)}

/* ── Kaders met een melding of tip ── */
.callout{display:flex;gap:16px;align-items:flex-start;padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px);border-radius:22px;background:color-mix(in oklab,var(--sage) 24%,var(--bone));margin:1.6em 0}
.callout > div > :last-child{margin-bottom:0}
.callout p,.callout li{color:var(--text)}
.callout > div > strong:first-child{display:block;margin-bottom:4px;font-size:1.05rem}
.callout--gold{background:color-mix(in oklab,var(--gold) 22%,var(--bone))}
.callout--lilac{background:color-mix(in oklab,var(--lilac) 36%,var(--bone))}
.callout--warn{background:color-mix(in oklab,var(--blush-deep) 12%,var(--bone));border:1.5px solid color-mix(in oklab,var(--blush-deep) 35%,transparent)}
.callout--warn .ico{background:var(--blush-deep);color:var(--bone)}

/* ── Tekst in een speels kader (met verschoven schaduwvlak) ── */
.framed{position:relative;padding:clamp(24px,3.4vw,44px);margin:clamp(36px,5vh,56px) 10px clamp(36px,5vh,56px) 0;isolation:isolate}
.framed:after{content:"";position:absolute;inset:0;background:var(--card);border:1.5px solid var(--ink);border-radius:26px;z-index:-1}
.framed:before{content:"";position:absolute;inset:0;transform:translate(10px,10px);border-radius:26px;z-index:-2;background:var(--frame-shadow,color-mix(in oklab,var(--gold) 55%,var(--bone)));}
.framed--sage{--frame-shadow:var(--sage)}
.framed--lilac{--frame-shadow:var(--lilac)}
.framed > :last-child{margin-bottom:0}

/* ── Uitgelicht citaat of kernzin ── */
.pull{position:relative;max-width:30ch;margin:clamp(48px,8vh,96px) auto;text-align:center;font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.25;font-weight:300;letter-spacing:-.015em;color:var(--text)}
.pull:before{content:"✦";display:block;margin:0 auto 14px;color:var(--gold);font-size:1.4rem}
.pull em{color:var(--sage-deep)}
.pull cite{display:block;margin-top:16px;font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)}

/* ── Cijfers en feiten in bolletjes ── */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:14px;margin:clamp(28px,4vh,44px) 0}
.fact{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 20px;display:flex;gap:14px;align-items:center}
.fact__value{display:block;font-size:1.3rem;font-weight:500;color:var(--text);line-height:1.15}
.fact__label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin-top:3px}

/* ── Stappen / tijdlijn ── */
.steps{list-style:none;padding:0;margin:clamp(28px,4vh,44px) 0;display:grid;gap:0;counter-reset:step}
.steps > li{position:relative;padding:0 0 30px 68px;margin:0;counter-increment:step}
.steps > li:before{content:counter(step);position:absolute;left:0;top:-4px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--ink);font-weight:500;font-size:1.05rem}
.steps > li:nth-child(3n+2):before{background:var(--sage)}
.steps > li:nth-child(3n):before{background:var(--lilac)}
.steps > li:after{content:"";position:absolute;left:22px;top:48px;bottom:4px;border-left:2px dotted color-mix(in oklab,var(--ink) 30%,transparent)}
.steps > li:last-child{padding-bottom:0}.steps > li:last-child:after{display:none}
.steps h3,.steps h4{font-size:1.2rem;font-weight:500;margin:0 0 6px;line-height:1.3}
.steps p{color:var(--text-soft);margin:0}

/* ── Lijst met ronde vinkjes ── */
.ticks{list-style:none;padding:0;margin:1.2em 0;display:grid;gap:12px}
.ticks > li{position:relative;padding-left:40px;margin:0}
.ticks > li:before{content:"";position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23026666' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat}
.ticks--gold > li:before{background-color:color-mix(in oklab,var(--gold) 55%,var(--bone))}

/* ── Labels ── */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:1em 0}
.chips > li{margin:0;padding:7px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.9rem;color:var(--text)}
.chips > li:nth-child(3n+1){background:color-mix(in oklab,var(--sage) 30%,var(--bone))}
.chips > li:nth-child(3n+2){background:color-mix(in oklab,var(--gold) 26%,var(--bone))}
.chips > li:nth-child(3n){background:color-mix(in oklab,var(--lilac) 40%,var(--bone))}

/* ── Twee kolommen: beeld en tekst ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin:clamp(48px,8vh,96px) 0}
.split--flip > :first-child{order:2}
.split__media{border-radius:46% 54% 42% 58%/38% 44% 56% 62%;overflow:hidden;aspect-ratio:4/5}
.split__media--arch{border-radius:999px 999px 28px 28px}
.split__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.split{grid-template-columns:1fr}.split--flip > :first-child{order:0}.split__media{aspect-ratio:1/1;max-width:420px}}

@media (max-width:640px){
  .band:before,.band:after{height:20px}.band:before{top:-19px}.band:after{bottom:-19px}
  .framed{margin-right:8px}.framed:before{transform:translate(7px,7px)}
  .callout{flex-direction:column;gap:12px}
}
@media (prefers-reduced-motion:reduce){.icon-card,.icon-card .ico{transition:none}}

/* Botsingen met de bestaande tekststijl (.prose) oplossen */
:is(.prose,.reading) :is(.ticks,.steps,.chips){padding-left:0}
:is(.prose,.reading) .pull{font-size:clamp(1.5rem,3.2vw,2.4rem);color:var(--text);line-height:1.25}
.band :is(h2,h3):first-child,.band > * > :is(h2,h3):first-child,.callout :is(h2,h3):first-child,.split :is(h2,h3):first-child{margin-top:0}

/* Lange woorden in koppen passend maken op telefoon (zonder afbreekstreepje) */
.page-hero__text,.hero__text,.page-hero__layout > *{min-width:0}
@media (max-width:480px){h1{font-size:clamp(30px,8.2vw,40px);overflow-wrap:anywhere}h1 em{display:inline}h1.h1--long{font-size:7vw!important}}
.band--gold .callout--gold,.band--sage .callout:not([class*="callout--"]),.band--lilac .callout--lilac{background:var(--card)}