:root{
  /* Sustrainable huisstijl */
  --navy:#202860;
  --navy-deep:#1A2050;
  --orange:#EA5123;
  --sky:#6FB1E1;
  --sky-dark:#5B8FB0;
  --warm:#F2EEEB;
  --white:#fff;
  --border:#DDD8CF;
  --muted:#6e6b64;
  --ink:#202860;
  --ink-mid:#4a4843;
  --gutter:clamp(1rem,4vw,2.5rem);
  --font-sans:'Manrope',system-ui,sans-serif;
  --font-serif:'Literata',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Skip-link voor toetsenbord- en screenreader-gebruikers (a11y/WCAG 2.4.1) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  color:var(--ink-mid);background:#fff;line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  padding-top:72px;
}
a{color:inherit}
img{max-width:100%;display:block;height:auto}

/* Section divider */
.section-divider{
  display:block;
  width:100%;
  height:32.7px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='98%20290%2099.2%2032.7'%20width='99.2'%20height='32.7'%3E%3Cpolygon%20fill='%23f1eeea'%20points='98%20290%2098%20322.7%20197.2%20322.7%20197.2%20290'/%3E%3Cpath%20fill='%23212960'%20d='M197.2,322.7v-32.7c-9.2,0-16.6,7.3-16.6,16.4s7.4,16.4,16.6,16.4h0ZM180.5,306.4c0-9-7.3-16.4-16.4-16.4v14.2c-1.1-8-7.9-14.2-16.2-14.2s-16.4,7.3-16.4,16.4,7.3,16.4,16.4,16.4,15.1-6.2,16.2-14.2v14.2c9,0,16.4-7.3,16.4-16.4h0ZM114.7,306.4c-9,0-16.4,7.3-16.4,16.4h32.7c0-9-7.3-16.4-16.4-16.4h0ZM114.7,306.4c9,0,16.4-7.3,16.4-16.4h-32.7c0,9,7.3,16.4,16.4,16.4h0Z'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:auto 32.7px;
  background-position:center top;
}

/* Reading progress */
.read-bar{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:1001;
  background:linear-gradient(90deg,var(--sky) 0%,var(--navy) 50%,var(--orange) 100%);
  transition:width .08s linear;
}

/* Nav */
.blog-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:72px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
}
.blog-nav-inner{
  max-width:1200px;margin:0 auto;padding:0 64px;height:100%;
  display:flex;justify-content:space-between;align-items:center;gap:36px;
}
.blog-nav-logo{
  display:block;line-height:0;text-decoration:none;
  transition:opacity .2s ease;
}
.blog-nav-logo:hover{opacity:.85}
.blog-nav-logo:focus-visible{outline:2px solid var(--sky);outline-offset:4px;border-radius:4px}
.blog-nav-logo img,.blog-nav-logo svg{
  display:block;width:180px;height:55px;object-fit:cover;object-position:center 50%;
}
.blog-nav-back{
  font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:.02em;
  color:var(--ink-mid);text-decoration:none;transition:color .2s;
}
.blog-nav-back:hover{color:var(--navy)}
.blog-nav-back:focus-visible{outline:2px solid var(--sky);outline-offset:4px;border-radius:4px}

/* Article hero */
.art-hero{
  padding:clamp(56px,12vw,96px) var(--gutter) clamp(48px,8vw,80px);
  background:var(--navy);
  position:relative;overflow:hidden;
  text-align:center;
}
.art-hero::before{
  content:'';position:absolute;
  right:-80px;top:-80px;
  width:500px;height:500px;
  border-radius:50%;background:var(--sky);opacity:.07;
  pointer-events:none;
}
.art-hero::after{
  content:'';position:absolute;
  left:20%;bottom:-120px;
  width:400px;height:400px;
  border-radius:50%;background:var(--orange);opacity:.06;
  pointer-events:none;
}
.art-hero-inner{
  position:relative;z-index:2;
  max-width:820px;margin:0 auto;
}
.art-tag{
  display:inline-block;padding:6px 14px;border-radius:20px;
  font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:26px;
  position:relative;z-index:2;
}
.tag-lsp{background:rgba(111,177,225,0.18);color:var(--sky);border:1px solid rgba(111,177,225,0.35)}
.tag-nlp{background:rgba(111,177,225,0.18);color:var(--sky);border:1px solid rgba(111,177,225,0.35)}
.tag-story{background:rgba(234,81,35,0.20);color:#f5906a;border:1px solid rgba(234,81,35,0.38)}
.tag-neuro{background:rgba(111,177,225,0.18);color:var(--sky);border:1px solid rgba(111,177,225,0.35)}
.tag-ai{background:rgba(45,180,170,0.18);color:#3fbfb2;border:1px solid rgba(45,180,170,0.38)}

.art-title{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(2rem,4.4vw,3.25rem);line-height:1.12;
  color:var(--white);margin-bottom:28px;text-wrap:balance;
  position:relative;z-index:2;
}
.art-lead{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.58;
  color:rgba(255,255,255,0.68);max-width:640px;margin:0 auto;
  position:relative;z-index:2;
}
.art-meta{
  display:flex;gap:20px;justify-content:center;margin-top:36px;
  padding-top:32px;border-top:1px solid rgba(255,255,255,0.12);
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,0.42);flex-wrap:wrap;
  position:relative;z-index:2;
}
.art-meta-author{color:var(--sky);font-weight:700}

/* Body */
.art-body{
  max-width:720px;margin:0 auto;padding:20px var(--gutter) clamp(48px,12vw,80px);
  font-size:clamp(16px,2.5vw,17.5px);line-height:1.82;color:var(--ink-mid);
}
.art-body h2{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(1.45rem,3vw,2rem);line-height:1.22;
  color:var(--navy);margin:clamp(40px,8vw,56px) 0 20px;text-wrap:balance;
  scroll-margin-top:100px;
}
.art-body h3{
  font-family:var(--font-serif);font-weight:600;
  font-size:1.22rem;color:var(--navy);margin:36px 0 14px;
}
.art-body p{margin-bottom:22px;text-wrap:pretty}
.art-body p strong{color:var(--navy)}
.art-body p em{font-style:italic;color:var(--navy)}
.art-body a{
  color:var(--orange);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .2s;
}
.art-body a:hover{color:#c34318}

.art-body blockquote{
  margin:40px 0;padding:28px 32px;
  background:var(--warm);border-left:4px solid var(--orange);border-radius:0 10px 10px 0;
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(17px,2.5vw,19px);line-height:1.55;color:var(--navy);
}
.art-body blockquote cite{
  display:block;margin-top:14px;font-family:var(--font-sans);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-style:normal;
}

.art-body ul,.art-body ol{margin:0 0 22px 24px}
.art-body li{margin-bottom:10px}

.art-callout{
  margin:44px -12px;padding:32px 36px;
  background:var(--navy);color:#fff;border-radius:12px;
}
@media(max-width:600px){
  .art-callout{margin:32px 0;padding:26px 22px}
}
.art-callout-label{
  font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sky);margin-bottom:14px;
}
.art-callout-text{
  font-family:var(--font-serif);font-size:clamp(18px,3vw,20px);line-height:1.45;color:#fff;
}
.art-callout-text strong{color:#fff}

/* Key stats inline */
.art-stat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin:36px 0;padding:32px 28px;background:var(--warm);border-radius:12px;
}
.art-stat-num{
  font-family:var(--font-serif);font-weight:700;
  font-size:clamp(32px,6vw,42px);color:var(--navy);line-height:1;
}
.art-stat-lbl{
  font-size:13px;color:var(--ink-mid);line-height:1.5;margin-top:10px;
}

/* Sources */
.art-sources{
  max-width:720px;margin:0 auto;padding:60px var(--gutter) 40px;
  border-top:1px solid var(--border);
}
.art-sources-title{
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange);margin-bottom:24px;
}
.art-src-list{list-style:none;padding:0}
.art-src-list li{
  padding:16px 0;border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:30px 1fr;gap:16px;
  font-size:14px;line-height:1.55;color:var(--ink-mid);
}
.art-src-list li:last-child{border-bottom:none}
.art-src-num{
  font-family:var(--font-sans);font-size:11px;font-weight:600;color:var(--orange);
  padding-top:2px;
}
.art-src-list li strong{color:var(--navy);display:block;margin-bottom:3px}
.art-src-list a{
  color:var(--orange);font-family:var(--font-sans);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-decoration:none;
}
.art-src-list a:hover{text-decoration:underline;color:#c34318}

/* Related */
.art-related{
  max-width:1100px;margin:40px auto 0;padding:60px var(--gutter) 100px;
}
.art-related-title{
  font-family:var(--font-serif);font-weight:700;
  font-size:clamp(22px,3vw,28px);color:var(--navy);
  margin-bottom:28px;
}
.art-related-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
}
.art-rel-card{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:26px;display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:inherit;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.art-rel-card:hover{
  transform:translateY(-3px);border-color:rgba(32,40,96,.22);
  box-shadow:0 14px 30px -18px rgba(32,40,96,.18);
}
.art-rel-tag{
  font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);
}
.art-rel-title{
  font-family:var(--font-serif);font-weight:600;font-size:20px;color:var(--navy);
  line-height:1.3;
}
.art-rel-more{
  font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.16em;
  color:var(--navy);margin-top:6px;
}

/* Footer brand bar */
.blog-footer-brand{
  background:var(--navy);padding:40px var(--gutter);
  display:flex;align-items:center;justify-content:center;
}
.blog-footer-brand img{display:block;width:180px;height:55px;object-fit:cover;object-position:center 50%}
@media(max-width:900px){
  .blog-footer-brand img{width:140px;height:43px}
}

/* Footer CTA banner */
.blog-foot{
  background:var(--orange);color:#fff;padding:clamp(48px,10vw,72px) var(--gutter);text-align:center;
}
.blog-foot p{
  color:#fff;margin:0 auto 24px;
  font-family:var(--font-serif);font-weight:700;
  font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.2;
  text-wrap:balance;max-width:700px;
}
.blog-foot a{
  display:inline-block;
  background:#fff;color:var(--orange);
  padding:16px 32px;border-radius:4px;
  font-family:var(--font-sans);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  transition:background .25s,color .25s,transform .25s;
}
.blog-foot a:hover{background:var(--navy);color:#fff;transform:translateY(-1px)}
.blog-foot a:focus-visible{outline:2px solid #fff;outline-offset:4px}

@media(max-width:900px){
  .art-hero{padding:56px var(--gutter) 48px}
  .art-body{padding:20px var(--gutter) 60px}
  .art-callout{margin:32px 0;padding:26px 24px}
  .art-stat-grid{grid-template-columns:1fr;padding:24px}
  .art-related-grid{grid-template-columns:1fr}
  .art-related{padding:44px var(--gutter) 72px}
  .art-sources{padding:44px var(--gutter) 30px}
  .blog-nav-inner{padding:0 24px}
  .blog-nav-logo img,.blog-nav-logo svg{width:140px;height:43px}
}

/* ===================================================================
   Site chrome — gelijk aan de hoofdsite (nav, CTA strip, footer)
   =================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:0 64px;display:flex;align-items:center;justify-content:space-between;
  height:72px;background:rgba(255,255,255,0.96);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-logo{width:220px;height:64px;display:block;line-height:0}
.nav-logo img{width:100%;height:64px;display:block;object-fit:cover;object-position:center 50%}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{font-size:13px;font-weight:500;color:var(--ink-mid);text-decoration:none;letter-spacing:.02em;transition:color .2s;cursor:pointer}
.nav-links a:hover,.nav-links a.active{color:var(--navy)}
.nav-cta{background:var(--orange);color:#fff !important;padding:10px 24px;border-radius:4px;font-weight:600;transition:all .2s}
.nav-cta:hover{background:var(--navy)}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none}
.nav-burger span{width:24px;height:2px;background:var(--navy);display:block;border-radius:2px}

.cta-strip{background:var(--orange);padding:clamp(48px,8vw,80px) 64px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-strip-text{font-family:var(--font-serif);font-size:clamp(1.6rem,3vw,2.4rem);color:#fff;line-height:1.2;max-width:580px;margin:0}
.cta-strip .btn-white{background:var(--navy);color:var(--orange);padding:16px 36px;border-radius:4px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;border:none;cursor:pointer;transition:all .25s;display:inline-block}
.cta-strip .btn-white:hover{background:#fff;color:var(--navy);transform:translateY(-1px)}

.site-footer{background:#212960;padding:18px 64px 14px;margin-top:-1px}
.site-footer .footer-top{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:14px}
.site-footer .footer-brand-col{display:flex;flex-direction:column;justify-content:space-between;min-height:100%}
.site-footer .footer-logo{width:220px;display:block;line-height:0}
.site-footer .footer-logo img{width:100%;height:auto;display:block}
.site-footer .footer-tagline{font-family:var(--font-serif);font-size:20px;font-style:italic;color:rgba(255,255,255,0.70);line-height:1.4;max-width:220px;margin-top:8px}
.site-footer .footer-col-title{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:12px;text-align:right}
.site-footer .footer-top>div:last-child{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end}
.site-footer .footer-links{list-style:none;padding:0;margin:0;text-align:right}
.site-footer .footer-links li{margin-bottom:6px;font-size:12px;color:rgba(255,255,255,0.55)}
.site-footer .footer-links a{font-size:12px;color:rgba(255,255,255,0.55);text-decoration:none}
.site-footer .footer-links a:hover{color:#fff}
.site-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.site-footer .footer-copy{font-size:11px;color:rgba(255,255,255,0.55)}
.site-footer .footer-bottom-links{display:flex;gap:24px}
.site-footer .footer-bottom-links a{font-size:11px;color:rgba(255,255,255,0.65);text-decoration:none}
.site-footer .footer-bottom-links a:hover{color:#fff}
@media(max-width:900px){
  .nav{padding:0 24px}
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:#fff;border-bottom:1px solid var(--border);padding:8px 24px 16px}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:12px 0;width:100%}
  .nav-cta{width:100%;margin-top:8px;text-align:center}
  .nav-burger{display:flex}
  .cta-strip{padding:48px 24px}
  .cta-strip .btn-white{width:100%;text-align:center}
  .site-footer{padding:18px 24px 12px}
  .site-footer .footer-top{grid-template-columns:1fr;gap:28px}
  .site-footer .footer-top>div:last-child{align-items:flex-start}
  .site-footer .footer-col-title,.site-footer .footer-links{text-align:left}
  .site-footer .footer-bottom{flex-direction:column;align-items:flex-start}
}