.blog-page .page-hero,.blog-page .hero{padding:64px 0 58px;background:linear-gradient(135deg,#fff 0%,#f6faf8 58%,#edf5f1 100%);border-bottom:1px solid #e6ecea}
.blog-page .page-hero .container,.blog-page .hero>.container{width:min(920px,92%)!important;max-width:920px!important;margin-left:auto!important;margin-right:auto!important}
.blog-page .trust-row{display:flex!important;gap:9px;flex-wrap:wrap;margin-top:20px}
.blog-page .trust-pill{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid #e6ecea;border-radius:999px;background:#fff;color:#375167;font-size:13.5px;font-weight:850}
.blog-page .page-hero h1,.blog-page .hero h1{max-width:900px;margin:16px 0 18px;font-size:clamp(38px,5vw,60px);line-height:1.04;letter-spacing:-.055em;color:#061f3b}
.blog-page .page-hero .lead,.blog-page .hero .lead{max-width:790px;font-size:20px;line-height:1.65;color:#475569}
.blog-page .article-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;color:#64748b;font-size:14px;font-weight:700}
.blog-page .blog-article-section{padding:64px 0 72px}
.blog-page .article-layout{display:grid;grid-template-columns:minmax(0,900px);gap:22px;align-items:start;justify-content:center;width:min(900px,calc(100% - 64px))!important;max-width:900px!important;margin-left:auto!important;margin-right:auto!important}
.blog-page .content-card{min-width:0;padding:38px 42px;border:1px solid #e6ecea;border-radius:30px;background:#fff;box-shadow:0 18px 55px rgba(6,31,59,.08)}
.blog-page .content-card>p:first-child{margin-top:0;padding:20px 22px;border-left:4px solid #0f3f1c;border-radius:0 16px 16px 0;background:#f4f8f5;color:#233b32;font-size:18px;line-height:1.7}
.blog-page .content-card h2{scroll-margin-top:110px;margin:42px 0 14px;color:#061f3b;font-size:clamp(27px,3vw,37px);line-height:1.14;letter-spacing:-.04em}
.blog-page .content-card h2:first-child{margin-top:0}
.blog-page .content-card h3{margin:28px 0 9px;color:#0f3f1c;font-size:21px;line-height:1.25}
.blog-page .content-card p,.blog-page .content-card li{color:#536274;font-size:17px;line-height:1.8}
.blog-page .content-card ul,.blog-page .content-card ol{padding-left:23px}
.blog-page .article-callout{margin:28px 0;padding:22px 24px;border:1px solid #dce9e0;border-radius:20px;background:#f4f8f5;color:#29463a;font-size:17px;line-height:1.7}
.blog-page .story-portrait{width:min(480px,100%);margin:0 auto 36px;overflow:hidden;border:1px solid #dfe8e3;border-radius:24px;background:#edf5f1;box-shadow:0 14px 36px rgba(6,31,59,.08);aspect-ratio:3/4}
.blog-page .story-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.blog-page .story-intro{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:30px;align-items:start;margin:0 0 44px;padding:24px;border:1px solid #dfe8e3;border-radius:26px;background:linear-gradient(145deg,#f8fbf9,#eef5f1)}
.blog-page .story-media{min-width:0}
.blog-page .story-intro .story-portrait{width:100%;margin:0;aspect-ratio:4/3}
.blog-page .story-media .story-quote{margin-top:18px}
.blog-page .story-intro-copy{min-width:0;padding:8px 8px 8px 0}
.blog-page .story-kicker{display:block;margin-bottom:10px;color:#0f3f1c;font-size:12px;font-weight:950;letter-spacing:.11em;text-transform:uppercase}
.blog-page .story-intro .story-intro-copy h2{margin:0 0 15px;font-size:clamp(28px,3vw,36px)}
.blog-page .story-intro-copy p{font-size:16.5px;line-height:1.7}
.blog-page .story-quote{position:relative;margin:20px 0 0;padding:20px 22px 20px 48px;border-radius:18px;background:#0f3f1c;color:#fff;font-size:17px;font-weight:780;line-height:1.48}
.blog-page .story-quote:before{content:"";position:absolute;left:21px;top:20px;bottom:20px;width:3px;border-radius:3px;background:#91bda0}
.blog-page .story-quote cite{display:block;margin-top:10px;color:#c8e3d0;font-size:13px;font-style:normal;font-weight:850}
.blog-page .article-figure{margin:30px 0 36px;padding:24px;border:1px solid #dfe8e3;border-radius:22px;background:linear-gradient(145deg,#f8fbf9,#eef5f1);overflow:hidden}
.blog-page .article-figure figcaption{margin-bottom:18px;color:#061f3b;font-size:16px;font-weight:900}
.blog-page .figure-flow{display:grid;grid-template-columns:repeat(var(--steps,3),minmax(0,1fr));gap:12px;align-items:stretch;counter-reset:figure-step}
.blog-page .figure-step{position:relative;min-width:0;padding:17px 16px 16px;border:1px solid #dce8e1;border-radius:17px;background:#fff;color:#526274;font-size:14px;line-height:1.55;box-shadow:0 8px 22px rgba(6,31,59,.04);counter-increment:figure-step}
.blog-page .figure-step:before{content:counter(figure-step);display:grid;place-items:center;width:29px;height:29px;margin-bottom:10px;border-radius:50%;background:#0f3f1c;color:#fff;font-size:13px;font-weight:900}
.blog-page .figure-step strong{display:block;margin-bottom:4px;color:#061f3b;font-size:15px;line-height:1.3}
.blog-page .figure-note{margin:15px 2px 0;color:#64748b;font-size:13px;line-height:1.55}
.blog-page .table-scroll{width:100%;margin:26px 0 34px;overflow-x:auto;border:1px solid #dfe8e3;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(6,31,59,.05)}
.blog-page .comparison{width:100%;min-width:520px;margin:0;border:0;border-collapse:collapse;font-size:15px;line-height:1.55}
.blog-page .comparison th{padding:15px 17px;background:#0f3f1c;color:#fff;text-align:left;font-size:14px;letter-spacing:.01em}
.blog-page .comparison td{padding:15px 17px;border-top:1px solid #e6ecea;vertical-align:top;color:#475569}
.blog-page .comparison tbody tr:nth-child(even){background:#f8faf9}
.blog-page .comparison td:first-child{color:#061f3b;font-weight:850}
.blog-page .article-toc{position:static;grid-row:1;display:grid;gap:4px;padding:22px;border:1px solid #e6ecea;border-radius:22px;background:#fff;box-shadow:0 12px 36px rgba(6,31,59,.06)}
.blog-page .article-toc strong{margin-bottom:8px;color:#061f3b;font-size:16px}
.blog-page .article-toc a{padding:8px 10px;border-radius:10px;color:#536274;font-size:14px;font-weight:750;line-height:1.35}
.blog-page .article-toc a:hover{background:#f1f6f3;color:#0f3f1c}
.blog-page .article-toc .btn.primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:12px 0 0!important;padding:12px 16px!important;border-radius:12px!important;background:#0f4c25!important;color:#fff!important;font-size:14px!important;font-weight:850!important;line-height:1.2!important;text-align:center;box-sizing:border-box}
.blog-page .article-toc a:not(.btn){display:none}.blog-page .article-toc strong{margin:0}.blog-page .article-toc strong:after{content:" · snel naar de belangrijkste onderdelen";color:#64748b;font-weight:600}
.blog-page .internal-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.blog-page .internal-links a{padding:9px 13px;border:1px solid #dfe8e3;border-radius:999px;background:#fff;color:#061f3b;font-size:14px;font-weight:800}
.blog-page .sources-list{margin:18px 0 0;padding-left:23px}
.blog-page .sources-list li{margin:0 0 10px;color:#64748b;font-size:15.5px;line-height:1.65}
.blog-page .sources-list a{color:#0f3f1c;font-weight:750;text-decoration:underline;text-underline-offset:3px}
.blog-page .blog-next-step{padding:60px 0;background:#f5f8f7}
.blog-page .blog-next-step .section-head{width:min(820px,100%);margin:0 auto;text-align:center}
.blog-page .blog-next-step .hero-actions{justify-content:center}
@media(max-width:1240px){.blog-page .article-layout{grid-template-columns:minmax(0,820px)!important;width:min(820px,calc(100% - 48px))!important;max-width:820px!important;gap:22px!important}.blog-page .article-toc{position:static;grid-row:1;margin-bottom:-4px}.blog-page .article-toc a{display:none}.blog-page .article-toc strong{margin:0}.blog-page .article-toc strong:after{content:" · snel naar de belangrijkste onderdelen";color:#64748b;font-weight:600}}
@media(min-width:1400px){.blog-page .article-layout{grid-template-columns:minmax(0,820px) 240px;width:min(1088px,calc(100% - 64px))!important;max-width:1088px!important;gap:28px}.blog-page .article-toc{position:sticky;top:104px;grid-row:auto}.blog-page .article-toc a:not(.btn){display:block}.blog-page .article-toc strong{margin-bottom:8px}.blog-page .article-toc strong:after{content:none}}
@media(max-width:980px){.blog-page .article-layout{grid-template-columns:minmax(0,780px)}.blog-page .article-toc{position:static;grid-row:1;margin-bottom:-10px}.blog-page .article-toc a{display:none}.blog-page .article-toc strong{margin:0}.blog-page .article-toc strong:after{content:" · snel naar de belangrijkste onderdelen";color:#64748b;font-weight:600}.blog-page .figure-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.blog-page .story-intro{grid-template-columns:1fr;gap:18px;padding:22px}.blog-page .story-media,.blog-page .story-intro-copy{display:contents}.blog-page .story-intro .story-portrait{order:1;width:min(430px,100%);margin:0 auto}.blog-page .story-kicker{order:2;margin:2px 0 0}.blog-page .story-intro .story-intro-copy h2{order:3;margin:0}.blog-page .story-intro-copy p{order:4;margin:0}.blog-page .story-media .story-quote{order:5;width:100%;margin:4px 0 0;padding:18px 18px 18px 42px;font-size:16px;line-height:1.5}.blog-page .story-media .story-quote:before{left:17px;top:18px;bottom:18px}.blog-page .story-intro-copy{padding:0}}
@media(max-width:640px){.blog-page .page-hero,.blog-page .hero{padding:42px 0 44px}.blog-page .page-hero .container,.blog-page .hero>.container{width:calc(100% - 32px)}.blog-page .page-hero h1,.blog-page .hero h1{font-size:clamp(30px,9vw,40px)!important;line-height:1.08!important;letter-spacing:-.035em!important}.blog-page .page-hero .lead,.blog-page .hero .lead{font-size:17px!important;line-height:1.58!important}.blog-page .blog-article-section{padding:38px 0 50px!important}.blog-page .article-layout{width:calc(100% - 28px)!important;gap:18px}.blog-page .content-card{padding:24px 20px;border-radius:24px}.blog-page .content-card>p:first-child{padding:17px 18px;font-size:16.5px}.blog-page .content-card h2{margin-top:34px;font-size:27px!important}.blog-page .content-card p,.blog-page .content-card li{font-size:16px;line-height:1.72}.blog-page .article-toc{padding:16px 18px;border-radius:18px}.blog-page .article-figure{padding:18px;margin:24px 0 30px;border-radius:18px}.blog-page .story-portrait{margin-bottom:28px;border-radius:19px;aspect-ratio:3/4}.blog-page .story-portrait img{object-position:50% 50%}.blog-page .figure-flow{grid-template-columns:1fr}.blog-page .table-scroll{margin-inline:0;border-radius:16px}.blog-page .comparison{min-width:560px;font-size:14px}.blog-page .comparison th,.blog-page .comparison td{padding:13px 14px}}
@media(max-width:640px){.blog-page .article-meta span[aria-hidden="true"]{display:none}}
@media(min-width:1800px){.blog-page .article-layout{grid-template-columns:minmax(0,820px) 270px;gap:42px}.blog-page .content-card{padding:46px 50px}}
@media(min-width:1600px){
  .blog-page header .container.nav,.blog-page header .nav{width:calc(100% - 112px)!important;max-width:1480px!important;margin-left:auto!important;margin-right:auto!important;grid-template-columns:220px minmax(0,1fr) 116px!important}
  .blog-page header nav,.blog-page header nav.has-contact-item{width:min(100%,920px)!important;justify-self:center!important;gap:clamp(16px,1.15vw,24px)!important;font-size:15.5px!important}
  .blog-page header nav a{font-size:15.5px!important}
  .blog-page header .desktop-contact{width:116px!important;min-width:116px!important;max-width:116px!important;height:48px!important;min-height:48px!important;justify-self:end!important;font-size:15px!important}
}
@media(min-width:2200px){.blog-page header .container.nav,.blog-page header .nav{width:calc(100% - 160px)!important;max-width:1600px!important}}
@media(max-width:1399px){.blog-page .article-toc{display:none!important}}
@media(min-width:1400px){
  .blog-page .article-toc{display:grid!important}
  .blog-page.ali-story-page .article-layout{grid-template-columns:minmax(0,980px) 230px;width:min(1238px,calc(100% - 48px))!important;max-width:1238px!important;gap:28px}
  .blog-page.ali-story-page .story-intro{grid-template-columns:minmax(370px,400px) minmax(0,1fr);gap:30px}
  .blog-page.ali-story-page .story-intro .story-intro-copy h2{font-size:34px}
  .blog-page.ali-story-page .story-intro-copy p{font-size:16px;line-height:1.64}
  .blog-page.ali-story-page .story-media .story-quote{padding:18px 20px 18px 48px;font-size:16.5px;line-height:1.46}
}
@media(min-width:1800px){
  .blog-page.ali-story-page .article-layout{grid-template-columns:minmax(0,980px) 270px;width:min(1292px,calc(100% - 72px))!important;max-width:1292px!important;gap:42px}
}

/* Op mobiel staat de inhoudsopgave zichtbaar vóór de artikeltekst. */
@media(max-width:980px){
  .blog-page .article-layout>.content-card{grid-row:2}
  .blog-page .article-toc{display:grid!important;grid-row:1;margin-bottom:0!important}
  .blog-page .article-toc a,
  .blog-page .article-toc a:not(.btn){display:block!important}
  .blog-page .article-toc strong{margin-bottom:8px}
  .blog-page .article-toc strong:after{content:none!important}
}

/* Ali-intro: tekst start links en loopt onder het beeld met citaat door. */
.blog-page.ali-story-page .story-intro{display:block}
.blog-page.ali-story-page .story-intro:after{content:"";display:block;clear:both}
.blog-page.ali-story-page .story-intro-copy{display:block;min-width:0;padding:8px}
.blog-page.ali-story-page .story-intro .story-intro-copy h2{margin:0 0 30px}
.blog-page.ali-story-page .story-media{float:right;width:min(48%,400px);margin:0 0 22px 32px}
.blog-page.ali-story-page .story-intro .story-portrait{width:100%;margin:0;aspect-ratio:4/3}
.blog-page.ali-story-page .story-intro-copy p{margin-top:0}
.blog-page.ali-story-page .story-media .story-quote{margin:18px 0 0;padding:2px 0 2px 20px;border-radius:0;background:transparent;color:#536274;font-size:16px;font-weight:400;line-height:1.64;letter-spacing:0}
.blog-page.ali-story-page .story-media .story-quote:before{left:0;top:2px;bottom:2px;width:2px;background:#0f3f1c}
.blog-page.ali-story-page .story-media .story-quote cite{margin-top:8px;color:#0f3f1c;font-size:14px;font-weight:700}
@media(min-width:761px) and (max-width:1100px){
  .blog-page.ali-story-page .story-intro .story-intro-copy h2{margin-bottom:26px}
}
@media(max-width:760px){
  .blog-page.ali-story-page .story-intro{display:block;padding:22px}
  .blog-page.ali-story-page .story-intro-copy{display:block;padding:0}
  .blog-page.ali-story-page .story-intro .story-intro-copy h2{margin:0 0 20px}
  .blog-page.ali-story-page .story-media{display:block;float:none;width:100%;margin:0 0 22px}
  .blog-page.ali-story-page .story-intro .story-portrait{width:100%;margin:0;aspect-ratio:4/3}
  .blog-page.ali-story-page .story-media .story-quote{width:auto;margin:16px 0 0;padding:2px 0 2px 18px;font-size:16px;font-weight:400;line-height:1.72}
  .blog-page.ali-story-page .story-media .story-quote:before{left:0;top:2px;bottom:2px}
}

/* Op blogpagina's is Contact op desktop alleen de vaste groene knop. */
.blog-page header nav a[href="/contact.html"]{display:none!important}
@media(max-width:980px){
  .blog-page header nav.open a[href="/contact.html"]{display:flex!important}
}
