body {
  background: #F4F4F0;
  color: #0D1B2A;
}

.blog-index-hero,
.blog-hero {
  padding: 9rem 5% 4rem;
  background: #0D1B2A;
  color: #F4F4F0;
  position: relative;
  overflow: hidden;
}

.blog-index-hero,
.blog-hero {
  min-height: 67vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-index-hero > *:not(.blog-hero-grid):not(.blog-hero-shape):not(.hero-photos),
.blog-hero > *:not(.hero-photos) {
  position: relative;
  z-index: 1;
}

.blog-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(93,202,165,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93,202,165,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.blog-hero-shape {
  position: absolute;
  width: 500px;
  height: 500px;
  top: -180px;
  right: -120px;
  border-radius: 50%;
  background: #5DCAA5;
  opacity: 0.06;
  pointer-events: none;
}

.blog-index-hero h1,
.blog-hero h1 {
  max-width: 980px;
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1.5px;
}

.blog-index-hero p,
.blog-intro {
  max-width: 760px;
  margin-top: 1.2rem;
  color: rgba(244,244,240,0.66);
  font-size: 1.08rem;
  line-height: 1.7;
  font-weight: 300;
}

.blog-label {
  color: #5DCAA5;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.blog-index-hero .blog-label,
.blog-hero .blog-label {
  margin-top: 0;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.hero-actions a,
.blog-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}

.hero-actions a:hover,
.blog-cta a:hover {
  transform: translateY(-2px);
}

.hero-actions a:first-child,
.blog-cta a {
  background: #5DCAA5;
  color: #0D1B2A;
}

.hero-actions a:last-child {
  border: 1px solid rgba(244,244,240,0.32);
  color: #F4F4F0;
}

.blog-index-section {
  padding: 5rem 5%;
  max-width: 1240px;
  margin: 0 auto;
}

.blog-index-section.muted {
  max-width: none;
  background: #e9eee9;
}

.blog-index-section.muted > * {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

.section-head {
  max-width: 760px;
  margin-bottom: 2rem;
}

.section-head.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head h2 {
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
}

.section-head p {
  margin-top: 0.85rem;
  line-height: 1.7;
  color: #475569;
  font-weight: 300;
}

/* Segmented control - identiek aan de diensten-tabs (.dienst-tabs) */
.blog-tabs {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 3rem;
  padding: 0.4rem;
  background: #eef0eb;
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: 50px;
}

.blog-tab {
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: #0D1B2A;
  padding: 0.7rem 1.4rem;
  border-radius: 50px;
  font-size: 0.92rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.blog-tab .num {
  color: #3aab87;
  font-weight: 700;
  opacity: 0.6;
}

.blog-tab:hover {
  background: #F4F4F0;
  box-shadow: 0 2px 8px rgba(13,27,42,0.08);
}

.blog-tab.active {
  background: #0D1B2A;
  color: #F4F4F0;
  border-color: #0D1B2A;
  box-shadow: 0 6px 16px rgba(13,27,42,0.18);
}

.blog-tab.active .num {
  color: #5DCAA5;
  opacity: 1;
}

.blog-tab.featured {
  border-color: #5DCAA5;
}

.blog-tab .tab-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #5DCAA5;
  color: #0D1B2A;
  padding: 0.15rem 0.55rem;
  border-radius: 50px;
}

.blog-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.blog-card[hidden] {
  display: none;
}

.blog-card {
  background: #fff;
  color: #0D1B2A;
  text-decoration: none;
  border: 1px solid rgba(13,27,42,0.1);
  border-radius: 8px;
  padding: 1.45rem;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: #5DCAA5;
  box-shadow: 0 16px 34px rgba(13,27,42,0.08);
}

.blog-card span {
  color: #1c7a5b;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.blog-card h3 {
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
  margin: 0.8rem 0;
  letter-spacing: -0.2px;
}

.blog-card p {
  line-height: 1.6;
  color: #475569;
  flex: 1;
  font-weight: 300;
}

.blog-card strong {
  color: #0D1B2A;
  margin-top: 1rem;
}

.cluster-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.cluster-grid div {
  background: #fff;
  border-radius: 8px;
  padding: 1.2rem;
  border: 1px solid rgba(13,27,42,0.08);
}

.cluster-grid h3 {
  font-size: 1.05rem;
  margin-bottom: 0.45rem;
}

.cluster-grid p {
  color: #475569;
  line-height: 1.55;
}

.strategy-links,
.link-grid {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.strategy-links a,
.link-grid a {
  border: 1px solid rgba(13,27,42,0.14);
  border-radius: 999px;
  padding: 0.75rem 1rem;
  color: #0D1B2A;
  text-decoration: none;
  background: #fff;
  transition: border-color 0.2s, transform 0.2s;
}

.strategy-links a:hover,
.link-grid a:hover {
  border-color: #5DCAA5;
  transform: translateY(-2px);
}

.blog-back {
  color: #5DCAA5;
  text-decoration: none;
  font-weight: 700;
}

.blog-meta {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.blog-meta span {
  border: 1px solid rgba(244,244,240,0.2);
  border-radius: 999px;
  padding: 0.5rem 0.8rem;
  color: rgba(244,244,240,0.8);
  font-size: 0.86rem;
}

.blog-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 760px);
  gap: 4rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 4rem 5%;
}

.blog-toc {
  position: sticky;
  top: 95px;
  align-self: start;
  background: #fff;
  border: 1px solid rgba(13,27,42,0.1);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.blog-toc strong {
  margin-bottom: 0.35rem;
}

.blog-toc a {
  color: #475569;
  text-decoration: none;
  font-size: 0.92rem;
}

.blog-toc a:hover {
  color: #1c7a5b;
}

.blog-content {
  font-size: 1.05rem;
  line-height: 1.75;
}

.blog-content section {
  margin-bottom: 2.8rem;
}

.blog-content h2 {
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
  margin-bottom: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.blog-content p,
.blog-content li {
  color: #334155;
}

.blog-content ul {
  padding-left: 1.2rem;
}

.answer-box {
  background: #e9f7f1;
  border-left: 5px solid #5DCAA5;
  border-radius: 8px;
  padding: 1.4rem;
}

.faq-list details {
  background: #fff;
  border: 1px solid rgba(13,27,42,0.1);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 700;
}

.faq-list p {
  margin-top: 0.75rem;
}

.blog-cta {
  background: #0D1B2A;
  color: #F4F4F0;
  border-radius: 8px;
  padding: 2rem;
}

.blog-cta h2,
.blog-cta p {
  color: #F4F4F0;
}

.sources {
  font-size: 0.92rem;
}

.sources a {
  word-break: break-word;
  color: #1B3A57;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: 1rem;
}

.footer-contact a {
  color: inherit;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

#toTop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: #5DCAA5;
  color: #0D1B2A;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s, background 0.2s;
  box-shadow: 0 6px 18px rgba(13,27,42,0.28);
  z-index: 1000;
}

#toTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .blog-grid,
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cluster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .blog-toc {
    position: static;
  }
}

@media (max-width: 640px) {
  .blog-index-hero,
  .blog-hero {
    padding: 7rem 1.25rem 3rem;
  }

  .blog-index-section,
  .blog-layout {
    padding: 3rem 1.25rem;
  }

  .blog-tabs {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-radius: 14px;
    scrollbar-width: none;
  }

  .blog-tabs::-webkit-scrollbar {
    display: none;
  }

  .blog-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.62rem 0.9rem;
    font-size: 0.84rem;
  }

  .blog-grid,
  .related-grid,
  .cluster-grid {
    grid-template-columns: 1fr;
  }

  .blog-card {
    min-height: auto;
  }

  .hero-actions a {
    width: 100%;
    justify-content: center;
  }

  .blog-meta span {
    width: 100%;
  }

  .blog-content {
    font-size: 1rem;
  }

  #toTop {
    right: 1rem;
    bottom: 1rem;
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }
}

/* Blogpost layout upgrade */
.blog-article {
  background:
    linear-gradient(90deg, rgba(13,27,42,0.035) 0, rgba(13,27,42,0.035) min(34vw, 430px), transparent min(34vw, 430px)),
    #F4F4F0;
}

.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(93,202,165,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93,202,165,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.blog-hero::after {
  content: '';
  position: absolute;
  right: clamp(1.25rem, 6vw, 6rem);
  bottom: clamp(2rem, 5vw, 4rem);
  width: clamp(170px, 24vw, 330px);
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px solid rgba(93,202,165,0.32);
  background:
    url('/assets/icon-512.png') center / 42% no-repeat,
    linear-gradient(135deg, rgba(244,244,240,0.08), rgba(93,202,165,0.14));
  box-shadow: 0 24px 60px rgba(0,0,0,0.26);
  opacity: 0.95;
  pointer-events: none;
}

.blog-hero h1,
.blog-hero .blog-intro,
.blog-hero .blog-meta {
  max-width: min(760px, calc(100% - clamp(210px, 30vw, 390px)));
}

.blog-layout {
  grid-template-columns: minmax(260px, 330px) minmax(0, 820px);
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1280px;
  align-items: start;
}

.blog-toc {
  border: 1px solid rgba(13,27,42,0.08);
  box-shadow: 0 18px 44px rgba(13,27,42,0.08);
  padding: 1.2rem;
}

.blog-toc strong {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #0D1B2A;
}

.blog-toc strong::before {
  content: 'i';
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #5DCAA5;
  color: #0D1B2A;
  font-weight: 800;
  font-style: normal;
}

.blog-toc a {
  display: block;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.blog-toc a:hover {
  background: rgba(93,202,165,0.12);
  transform: translateX(3px);
}

.blog-toc::after {
  content: 'Twee Graden\A Website, content en strategie in een duidelijke lijn.';
  white-space: pre-line;
  display: block;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background:
    url('/assets/icon-192.png') right 1rem top 1rem / 44px no-repeat,
    #0D1B2A;
  color: rgba(244,244,240,0.74);
  font-size: 0.88rem;
  line-height: 1.55;
}

.blog-content {
  min-width: 0;
}

.blog-content > section {
  position: relative;
  background: #fff;
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: 8px;
  padding: clamp(1.35rem, 3vw, 2rem);
  margin-bottom: 1.1rem;
  box-shadow: 0 12px 30px rgba(13,27,42,0.055);
  overflow: hidden;
}

.blog-content > section:not(.blog-cta):not(.sources)::after {
  content: '';
  position: absolute;
  right: 1.1rem;
  top: 1.1rem;
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(93,202,165,0.24), rgba(13,27,42,0.08));
  border: 1px solid rgba(93,202,165,0.28);
  pointer-events: none;
}

.blog-content > section:not(.blog-cta):not(.sources)::before {
  content: '';
  position: absolute;
  right: 2.05rem;
  top: 2.05rem;
  width: 28px;
  height: 28px;
  background: #0D1B2A;
  opacity: 0.88;
  clip-path: polygon(43% 70%, 87% 18%, 96% 28%, 43% 90%, 10% 53%, 19% 43%);
  z-index: 1;
  pointer-events: none;
}

.blog-content > section h2,
.blog-content > section p,
.blog-content > section ul,
.blog-content > section .link-grid,
.blog-content > section .faq-list,
.blog-content > section .related-grid {
  position: relative;
  z-index: 2;
}

.blog-content > section:not(.blog-cta):not(.sources) h2,
.blog-content > section:not(.blog-cta):not(.sources) p,
.blog-content > section:not(.blog-cta):not(.sources) ul,
.blog-content > section:not(.blog-cta):not(.sources) .link-grid,
.blog-content > section:not(.blog-cta):not(.sources) .faq-list,
.blog-content > section:not(.blog-cta):not(.sources) .related-grid {
  max-width: calc(100% - 84px);
}

.blog-content section[id^='sectie-'] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 180px);
  column-gap: 1.4rem;
}

.blog-content section[id^='sectie-'] h2,
.blog-content section[id^='sectie-'] p,
.blog-content section[id^='sectie-'] ul {
  grid-column: 1;
  max-width: none;
}

.blog-content section[id^='sectie-']::after {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: static;
  width: 100%;
  height: auto;
  min-height: 160px;
  align-self: stretch;
  background:
    url('/assets/icon-192.png') center / 48px no-repeat,
    linear-gradient(135deg, rgba(13,27,42,0.96), rgba(27,58,87,0.94));
  border-color: rgba(93,202,165,0.38);
}

.blog-content section[id^='sectie-']::before {
  display: none;
}

.answer-box {
  background: #e9f7f1;
  border: 1px solid rgba(93,202,165,0.28);
  border-left: 5px solid #5DCAA5;
}

.answer-box::after {
  background:
    url('/assets/icon-192.png') center / 36px no-repeat,
    #0D1B2A;
}

.link-grid a,
.strategy-links a {
  box-shadow: 0 8px 18px rgba(13,27,42,0.055);
}

.faq-list details {
  box-shadow: 0 8px 20px rgba(13,27,42,0.045);
}

.blog-content > section.blog-cta,
.blog-cta {
  border: 1px solid rgba(93,202,165,0.32);
  box-shadow: 0 20px 48px rgba(13,27,42,0.16);
  background:
    url('/assets/icon-192.png') right 1.5rem center / 82px no-repeat,
    #0D1B2A;
}

.blog-cta h2,
.blog-cta p {
  max-width: calc(100% - 120px);
  color: #F4F4F0 !important;
}

.blog-content .blog-cta h2,
.blog-content .blog-cta p {
  color: #F4F4F0 !important;
}

.blog-content .blog-cta a {
  color: #0D1B2A !important;
}

.sources {
  background: transparent !important;
  box-shadow: none !important;
}

/* In-article "Gerelateerde artikelen" grid: the reading column (~760px) is
   far too narrow for the shared 3-column .related-grid (cards collapse to
   ~190px and text wraps one word per line). Auto-fit to comfortable widths. */
.blog-content > section .related-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .blog-content > section .related-grid {
    grid-template-columns: 1fr;
  }
}

.related-grid .blog-card {
  min-height: 230px;
  border-color: rgba(13,27,42,0.08);
}

.related-grid .blog-card::after,
.blog-grid .blog-card::after {
  content: '';
  width: 42px;
  height: 42px;
  margin-top: 1rem;
  border-radius: 8px;
  background:
    url('/assets/icon-192.png') center / 24px no-repeat,
    rgba(93,202,165,0.14);
  border: 1px solid rgba(93,202,165,0.28);
}

@media (max-width: 1100px) {
  .blog-hero::after {
    opacity: 0.32;
  }

  .blog-hero h1,
  .blog-hero .blog-intro,
  .blog-hero .blog-meta {
    max-width: 820px;
  }
}

@media (max-width: 980px) {
  .blog-article {
    background: #F4F4F0;
  }

  .blog-layout {
    grid-template-columns: 1fr;
  }

  .blog-toc {
    position: static;
    order: 0;
  }
}

@media (max-width: 720px) {
  .blog-hero::after {
    display: none;
  }

  .blog-content section[id^='sectie-'] {
    display: block;
  }

  .blog-content section[id^='sectie-']::after {
    position: absolute;
    width: 52px;
    height: 52px;
    min-height: 0;
    right: 1rem;
    top: 1rem;
    background:
      url('/assets/icon-192.png') center / 28px no-repeat,
      #0D1B2A;
  }

  .blog-content > section:not(.blog-cta):not(.sources) h2,
  .blog-content > section:not(.blog-cta):not(.sources) p,
  .blog-content > section:not(.blog-cta):not(.sources) ul,
  .blog-content > section:not(.blog-cta):not(.sources) .link-grid,
  .blog-content > section:not(.blog-cta):not(.sources) .faq-list,
  .blog-content > section:not(.blog-cta):not(.sources) .related-grid {
    max-width: 100%;
  }

  .blog-content > section:not(.blog-cta):not(.sources) h2 {
    padding-right: 4.2rem;
  }

  .blog-cta {
    background: #0D1B2A;
  }

  .blog-cta h2,
  .blog-cta p {
    max-width: 100%;
  }
}

/* Blogpost correction: compact hero and calmer reading layout */
.blog-hero {
  padding: 7rem 5% 2.8rem;
  min-height: auto;
}

.blog-hero::after {
  display: none;
}

.blog-hero h1,
.blog-hero .blog-intro,
.blog-hero .blog-meta {
  max-width: 820px;
}

.blog-hero h1 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.08;
}

.blog-hero .blog-intro {
  font-size: 1.03rem;
  max-width: 720px;
}

.blog-back {
  display: inline-flex;
  margin-bottom: 1rem;
}

.blog-layout {
  padding-top: 3rem;
}

.blog-content > section {
  box-shadow: 0 8px 22px rgba(13,27,42,0.045);
}

.blog-content section[id^='sectie-']::after {
  min-height: 130px;
  background:
    url('/assets/icon-192.png') center / 38px no-repeat,
    linear-gradient(135deg, rgba(13,27,42,0.94), rgba(27,58,87,0.92));
}

.blog-toc::after {
  background: #0D1B2A;
}

@media (max-width: 720px) {
  .blog-hero {
    padding: 6.2rem 1.25rem 2.4rem;
  }

  .blog-hero h1 {
    font-size: clamp(1.9rem, 9vw, 2.55rem);
  }
}
/* Large-screen content cap (>=1500px)
   .blog-index-section (1240px) and .blog-layout (1180-1280px) already cap their
   own content; only the full-bleed .blog-hero needs aligning to that rail. */
@media (min-width: 1500px) {
  .blog-hero {
    padding-inline: max(5%, calc((100% - 1240px) / 2));
  }
}

/* Blog content blocks: richer article structure */
.block-label {
  margin: 0 0 0.75rem;
  color: #1c7a5b !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.76rem;
  font-weight: 800;
}

.blog-content h3 {
  position: relative;
  z-index: 2;
  margin: 1.25rem 0 0.35rem;
  color: #0D1B2A;
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.04rem;
  line-height: 1.25;
  font-weight: 800;
}

.blog-content p + h3 {
  margin-top: 1.4rem;
}

.blog-content > section:not(.blog-cta):not(.sources) h3,
.blog-content > section:not(.blog-cta):not(.sources) .block-label {
  max-width: calc(100% - 84px);
}

.blog-content section[id^='sectie-'] h3 {
  grid-column: 1;
  max-width: none;
}

.summary-panel ul,
.tips-panel ul,
.example-panel ul {
  display: grid;
  gap: 0.7rem;
  padding-left: 0;
  list-style: none;
}

.summary-panel li,
.tips-panel li,
.example-panel li {
  position: relative;
  padding-left: 1.6rem;
}

.summary-panel li::before,
.tips-panel li::before,
.example-panel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #5DCAA5;
  box-shadow: 0 0 0 4px rgba(93,202,165,0.14);
}

.summary-panel {
  background:
    linear-gradient(135deg, rgba(93,202,165,0.16), rgba(255,255,255,0.95)),
    #fff;
}

.tips-panel,
.example-panel,
.internal-links-panel {
  background:
    linear-gradient(180deg, #fff, rgba(233,247,241,0.52));
}

.answer-box h2 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.link-grid a {
  line-height: 1.25;
}

.blog-content .related-grid {
  margin-top: 1.25rem;
}

@media (max-width: 720px) {
  .blog-content > section:not(.blog-cta):not(.sources) h3,
  .blog-content > section:not(.blog-cta):not(.sources) .block-label {
    max-width: 100%;
  }

  .blog-content > section:not(.blog-cta):not(.sources) h2 {
    padding-right: 3.8rem;
  }

  .block-label {
    padding-right: 3.8rem;
  }
}

/* -------------------------------------------------------------
   BLOG READABILITY - calmer, easier reading (esp. on mobile)
   ------------------------------------------------------------- */
/* Consistent paragraph rhythm on every screen */
.blog-content p { margin-bottom: 1.1rem; }
.blog-content p:last-child { margin-bottom: 0; }
.blog-content li { margin-bottom: 0.4rem; }

@media (max-width: 720px) {
  /* Drop busy decorative corner badges so text breathes */
  .blog-content > section:not(.blog-cta):not(.sources)::before,
  .blog-content > section:not(.blog-cta):not(.sources)::after,
  .blog-content section[id^='sectie-']::after {
    display: none !important;
  }
  .blog-content > section:not(.blog-cta):not(.sources) h2,
  .blog-content > section:not(.blog-cta):not(.sources) h3,
  .blog-content > section:not(.blog-cta):not(.sources) .block-label {
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Lighter, calmer cards */
  .blog-content > section {
    padding: 1.4rem 1.25rem;
    border-radius: 12px;
    border-color: rgba(13,27,42,0.07);
    box-shadow: 0 4px 16px rgba(13,27,42,0.045);
    margin-bottom: 1rem;
  }

  /* Comfortable mobile typography */
  .blog-content { font-size: 1.02rem; line-height: 1.72; }
  .blog-content h2 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.6rem; }
  .blog-content h3 { font-size: 1.05rem; margin-top: 1.3rem; }
  .blog-content p { margin-bottom: 1rem; }
  .blog-content ul { padding-left: 1.1rem; }

  /* Tighter answer/summary panels */
  .answer-box, .summary-panel, .tips-panel, .example-panel { padding: 1.25rem; }
}


/* Audit 2.0 refinements: compact mobile nav and readable footer */
@media (max-width: 768px) {
  nav { padding: 0.85rem 1rem; }
  nav .nav-links {
    width: min(78vw, 290px) !important;
    padding: 4.7rem 1.1rem 1.25rem !important;
  }
  nav .nav-links a:not(.nav-cta) {
    padding: 0.68rem 0.2rem !important;
    font-size: 0.96rem !important;
    line-height: 1.2 !important;
  }
  nav .nav-links .nav-cta {
    margin-top: 0.95rem !important;
    padding: 0.78rem 1rem !important;
    font-size: 0.95rem !important;
  }
}
@media (max-width: 560px) {
  footer.site-footer { padding: 2.35rem 1.15rem 1.4rem !important; }
  /* Twee kolommen i.p.v. alles onder elkaar -> footer ~40% korter op telefoon */
  footer.site-footer .footer-top { grid-template-columns: 1fr 1fr !important; gap: 1.5rem 1.25rem !important; }
  footer.site-footer .footer-brand { max-width: none !important; }
  footer.site-footer .footer-about { display: none; }
  footer.site-footer .footer-col h4 { margin-bottom: 0.6rem; }
  footer.site-footer .footer-col a,
  footer.site-footer .footer-contact a,
  footer.site-footer .footer-contact span { min-height: 30px; margin-bottom: 0.2rem !important; font-size: 0.86rem; }
  footer.site-footer .footer-regio-row { margin-top: 1.5rem !important; padding-top: 1rem; }
  footer.site-footer .footer-bottom-row { margin-top: 1rem; }
  footer.site-footer .footer-legal { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.1rem !important; }
  footer.site-footer .footer-legal a { min-height: 30px; }
}


/* Audit 2.0 blog overview scanability */
.blog-card strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}
.blog-card strong::before {
  content: '4 min leestijd';
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 600;
}
@media (max-width: 640px) {
  .blog-index-hero { min-height: auto; padding-bottom: 2.4rem; }
  .blog-card { padding: 1.15rem; border-radius: 8px; }
  .blog-card h3 { font-size: 1.08rem; line-height: 1.28; }
  .blog-card p { font-size: 0.92rem; line-height: 1.55; }
  .cluster-grid div { padding: 1rem; }
}

/* Blog article column order: content left, navigation summary right */
.blog-layout {
  grid-template-columns: minmax(0, 820px) minmax(260px, 330px);
}

.blog-content {
  grid-column: 1;
  grid-row: 1;
}

.blog-toc {
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 980px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }
  .blog-content,
  .blog-toc {
    grid-column: auto;
    grid-row: auto;
  }
}

/* -------------------------------------------------------------
   In-article "Gerelateerde artikelen" - compacter op laptop/desktop
   (mobiel = 1 kolom, blijft ongewijzigd)
   ------------------------------------------------------------- */
@media (min-width: 641px) {
  .blog-content .related-grid {
    gap: 0.85rem;
    margin-top: 1rem;
  }
  .blog-content .related-grid .blog-card {
    min-height: 0;
    padding: 1.1rem 1.15rem;
    border-radius: 8px;
  }
  .blog-content .related-grid .blog-card span {
    font-size: 0.72rem;
  }
  .blog-content .related-grid .blog-card h3 {
    font-size: 1.02rem;
    line-height: 1.22;
    margin: 0.5rem 0;
  }
  .blog-content .related-grid .blog-card p {
    font-size: 0.88rem;
    line-height: 1.5;
  }
  .blog-content .related-grid .blog-card strong {
    margin-top: 0.65rem;
    font-size: 0.9rem;
  }
  .blog-content .related-grid .blog-card::after {
    width: 34px;
    height: 34px;
    margin-top: 0.7rem;
    background:
      url('/assets/icon-192.png') center / 20px no-repeat,
      rgba(93,202,165,0.14);
  }
}

/* =============================================================
   BLOG DATAVIZ - pure CSS + inline SVG visuals (geen JS, geen libs)
   Illustratieve voorbeeldcijfers, herkenbaar gelabeld met .viz-badge.
   ============================================================= */
.viz-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1c7a5b;
  background: rgba(93,202,165,0.16);
  border: 1px solid rgba(93,202,165,0.4);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* Inline figuur-kaart in de leeskolom */
.blog-figure {
  margin: 0 0 1.1rem;
  background: #fff;
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: 12px;
  padding: clamp(1.35rem, 3vw, 1.9rem);
  box-shadow: 0 8px 22px rgba(13,27,42,0.05);
}

.blog-figure figcaption { all: unset; display: contents; }

.viz-kicker {
  margin: 0 0 0.5rem;
  color: #1c7a5b;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 800;
}

.viz-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.viz-title {
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: #0D1B2A;
  margin: 0;
}

.viz-sub {
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0.4rem 0 1.15rem;
}

.viz-foot {
  margin: 1.1rem 0 0;
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.45;
}

/* Staafdiagram (horizontaal) */
.viz-bars { display: grid; gap: 0.6rem; }

.bar-row {
  display: grid;
  grid-template-columns: minmax(78px, 36%) 1fr auto;
  align-items: center;
  gap: 0.6rem;
}

.bar-lab { font-size: 0.82rem; font-weight: 600; color: #334155; line-height: 1.2; }

.bar-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(13,27,42,0.07);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1c7a5b, #5DCAA5);
}

.bar-row.muted .bar-fill { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }

.bar-val {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #0D1B2A;
  font-size: 0.82rem;
}

/* Funnel / value ladder */
.viz-funnel { display: grid; gap: 0.5rem; }

.funnel-row {
  width: var(--w, 100%);
  margin: 0 auto;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #F4F4F0;
  background: linear-gradient(135deg, #0D1B2A, #1B3A57);
  border: 1px solid rgba(93,202,165,0.22);
}

.funnel-row span { font-weight: 600; font-size: 0.85rem; }

.funnel-row b {
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}

.funnel-row:last-child {
  background: linear-gradient(135deg, #1c7a5b, #5DCAA5);
  color: #0D1B2A;
  border-color: transparent;
}

/* Scorecard / audit */
.viz-score { display: grid; gap: 0.7rem; }

.score-row {
  display: grid;
  grid-template-columns: minmax(96px, 40%) 1fr auto;
  align-items: center;
  gap: 0.7rem;
}

.score-lab { font-size: 0.84rem; font-weight: 600; color: #334155; }

.score-meter {
  height: 8px;
  border-radius: 999px;
  background: rgba(13,27,42,0.08);
  overflow: hidden;
}

.score-meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1c7a5b, #5DCAA5);
}

.score-num {
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #0D1B2A;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.score-num small { color: #94a3b8; font-weight: 700; font-size: 0.72rem; }

/* Steps (proces / journey / roadmap / trust stack / gap) */
.viz-steps { display: grid; gap: 0.6rem; counter-reset: vstep; }

.viz-step {
  position: relative;
  padding: 0.8rem 0.95rem 0.8rem 3rem;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, rgba(233,247,241,0.5));
  border: 1px solid rgba(13,27,42,0.08);
}

.viz-step::before {
  counter-increment: vstep;
  content: counter(vstep);
  position: absolute;
  left: 0.85rem;
  top: 0.8rem;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #5DCAA5;
  color: #0D1B2A;
  font-weight: 800;
  font-size: 0.82rem;
}

.viz-step b {
  display: block;
  font-size: 0.92rem;
  color: #0D1B2A;
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.viz-step span { display: block; font-size: 0.82rem; color: #475569; line-height: 1.45; margin-top: 0.12rem; }

/* Vergelijkingstabel / matrix */
.viz-compare { width: 100%; border-collapse: collapse; font-size: 0.86rem; }

.viz-compare th,
.viz-compare td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid rgba(13,27,42,0.08);
  vertical-align: top;
}

.viz-compare thead th {
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0D1B2A;
}

.viz-compare thead th:last-child { color: #1c7a5b; }
.viz-compare tbody th { font-weight: 700; color: #334155; }
.viz-compare td.pos { color: #1c7a5b; font-weight: 700; }
.viz-compare td.neg { color: #b45309; font-weight: 600; }
.viz-compare td.pos::before { content: '\2713\00a0'; }
.viz-compare td.neg::before { content: '\2013\00a0'; }

/* SVG-grafieken (donut, radar, lijn) */
.viz-svg { display: block; width: 100%; height: auto; max-width: 320px; margin: 0 auto; }
.viz-svg.wide { max-width: none; }

.viz-donut-wrap {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.viz-donut-wrap .viz-svg { max-width: 190px; flex: none; }

.viz-legend { display: grid; gap: 0.5rem; font-size: 0.83rem; min-width: 190px; flex: 1; }
.viz-legend span { display: flex; align-items: center; gap: 0.55rem; color: #334155; }
.viz-legend i { width: 0.85rem; height: 0.85rem; border-radius: 3px; flex: none; }
.viz-legend b { margin-left: auto; font-variant-numeric: tabular-nums; color: #0D1B2A; }

/* Sidebar-statistieken (rechterkolom) */
.blog-side-stats {
  margin-top: 0.5rem;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(13,27,42,0.1);
  display: grid;
  gap: 0.8rem;
}

.side-stats-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 0.98rem;
  color: #0D1B2A;
}

.side-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }

.side-stat {
  background: linear-gradient(135deg, rgba(93,202,165,0.16), #fff);
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: 10px;
  padding: 0.72rem 0.78rem;
}

.side-stat b {
  display: block;
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 800;
  color: #0D1B2A;
  letter-spacing: -0.5px;
}

.side-stat b small { font-size: 0.8rem; font-weight: 700; color: #1c7a5b; letter-spacing: 0; }
.side-stat em { display: block; margin-top: 0.32rem; font-size: 0.72rem; line-height: 1.3; color: #475569; font-style: normal; }
.side-stat.wide { grid-column: 1 / -1; }

.side-mini {
  background: #fff;
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: 10px;
  padding: 0.85rem;
}

.side-mini .mini-title { font-size: 0.76rem; font-weight: 700; color: #334155; margin: 0 0 0.65rem; }
.side-mini .bar-row { grid-template-columns: minmax(60px, 42%) 1fr auto; gap: 0.45rem; }
.side-mini .bar-lab { font-size: 0.74rem; }
.side-mini .bar-val { font-size: 0.74rem; }

/* Compacte ring/gauge-visual in de rechterkolom */
.side-viz {
  background: #fff;
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: 10px;
  padding: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.side-ring-svg { width: 84px; height: 84px; flex: none; }

.side-viz .ring-cap { font-size: 0.76rem; color: #475569; line-height: 1.4; margin: 0; }
.side-viz .ring-cap b {
  display: block;
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #0D1B2A;
  margin-bottom: 0.15rem;
}

/* Rechterkolom vult de volle hoogte mee. De inhoudsopgave staat bovenaan;
   het visuals-paneel plakt (sticky) en schuift mee, zodat de rechterkant
   tijdens het hele artikel gevuld blijft met dezelfde rustige set visuals
   (geen extra drukte, niets afgeknipt). De aside rekt mee met de leeskolom. */
/* base.css zet overflow-x:hidden op html/body; dat maakt overflow-y impliciet
   een scroll-container en breekt position:sticky. overflow-x:clip clipt óók
   horizontaal maar zónder scroll-container, dus sticky werkt weer. blog.css
   laadt alleen op blogpagina's, dus dit raakt de rest van de site niet. */
html, body { overflow-x: clip; }

@media (min-width: 981px) {
  /* display:block i.p.v. flex - sticky op een flex-child pint niet betrouwbaar. */
  .blog-toc { position: static; align-self: stretch; display: block; }
  .blog-toc::after { display: none; }
  .blog-toc > a { margin-bottom: 0.15rem; }
  .blog-side-stats {
    position: sticky;
    top: 95px;
    margin-top: 1.4rem;
  }
}

@media (max-width: 520px) {
  .viz-compare { font-size: 0.8rem; }
  .viz-compare th, .viz-compare td { padding: 0.5rem 0.5rem; }
  .side-stat b { font-size: 1.32rem; }
  .bar-row { grid-template-columns: minmax(64px, 42%) 1fr auto; }
}

/* KPI-band op de blog index */
.blog-kpi-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.4rem;
}

.blog-kpi {
  background: rgba(244,244,240,0.04);
  border: 1px solid rgba(93,202,165,0.22);
  border-radius: 12px;
  padding: 1.2rem 1.25rem;
}

.blog-kpi b {
  display: block;
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: #5DCAA5;
}

.blog-kpi b small { font-size: 0.9rem; font-weight: 700; color: rgba(244,244,240,0.7); letter-spacing: 0; }
.blog-kpi em { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.82rem; line-height: 1.4; color: rgba(244,244,240,0.66); }

.blog-kpi-note { margin-top: 0.85rem; font-size: 0.76rem; color: rgba(244,244,240,0.5); }

@media (max-width: 780px) {
  .blog-kpi-band { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .blog-kpi { padding: 1rem; }
}

/* Auteur-byline onder de titel (E-E-A-T / LLMO) - staat op donkere blog-hero */
.blog-byline{margin:.6rem 0 0;font-size:.9rem;color:rgba(244,244,240,.6);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.blog-byline strong{color:#F4F4F0;font-weight:600}
.blog-byline time{color:rgba(244,244,240,.55)}

/* ============================================================
   Teamfoto's in de blog-hero + blog-index-hero (zelfde look als de rest van
   de site) en opvulling van de rechter zijbalk. Toegevoegd 2026-07-09.
   ============================================================ */
.blog-hero .hero-photos,
.blog-index-hero .hero-photos {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  pointer-events: none; z-index: 1; animation: heroPhotosIn 0.9s ease 0.7s both;
}
@keyframes heroPhotosIn { from { opacity: 0; } to { opacity: 1; } }
.blog-hero .hero-photos-stack,
.blog-index-hero .hero-photos-stack { display: flex; align-items: flex-end; }
.blog-hero .hero-photos img,
.blog-index-hero .hero-photos img {
  height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.45);
}
.blog-hero .hero-photos .hp-back,
.blog-index-hero .hero-photos .hp-back { width: 150px; margin-bottom: 26px; border: 1px solid rgba(255,255,255,0.12); }
.blog-hero .hero-photos .hp-front,
.blog-index-hero .hero-photos .hp-front { width: 170px; margin-left: -32px; position: relative; z-index: 2; outline: 4px solid #0D1B2A; }
.blog-hero .hero-photos-badge,
.blog-index-hero .hero-photos-badge {
  position: absolute; left: -18px; bottom: -14px; z-index: 3; display: flex; align-items: center; gap: 0.4rem;
  background: #fff; color: #0D1B2A; font-size: 0.78rem; font-weight: 500; padding: 0.45rem 0.75rem;
  border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,0.32); white-space: nowrap;
}
.blog-hero .hero-photos-badge strong,
.blog-index-hero .hero-photos-badge strong { font-weight: 700; }
/* Desktop: tekst smaller zodat hij de absolute foto rechts niet raakt. */
@media (min-width: 1081px) {
  .blog-hero > *:not(.blog-hero-grid):not(.blog-hero-shape):not(.hero-photos),
  .blog-index-hero > *:not(.blog-hero-grid):not(.blog-hero-shape):not(.hero-photos) { max-width: min(100%, 660px); }
}
/* Tablet/mobiel: foto zweeft klein rechtsboven, tekst loopt eromheen. */
@media (max-width: 1080px) {
  .blog-hero, .blog-index-hero { display: block; min-height: auto; padding: 6rem 5% 2.5rem; }
  .blog-hero .hero-photos, .blog-index-hero .hero-photos {
    float: right; position: relative; right: auto; top: auto; transform: none; width: auto;
    margin: 0.15rem 0 0.55rem 1rem; z-index: 1;
  }
  .blog-hero .hero-photos-stack, .blog-index-hero .hero-photos-stack { justify-content: flex-end; }
  .blog-hero .hero-photos .hp-back, .blog-index-hero .hero-photos .hp-back { width: 66px; margin-bottom: 9px; }
  .blog-hero .hero-photos .hp-front, .blog-index-hero .hero-photos .hp-front { width: 76px; margin-left: -15px; }
  .blog-hero .hero-photos-badge, .blog-index-hero .hero-photos-badge { font-size: 0.56rem; padding: 0.26rem 0.42rem; left: auto; right: 0; bottom: -10px; }
  .blog-hero h1, .blog-index-hero h1 { font-size: 1.7rem; letter-spacing: -0.4px; }
}


/* Telefoon: teamfoto's volledig zichtbaar boven de headertekst. De eerdere
   float-variant werd op smalle schermen te klein en kon tegen de titel lopen. */
@media (max-width: 640px) {
  .blog-hero,
  .blog-index-hero {
    padding: 5.85rem 1.25rem 2.4rem;
    overflow: hidden;
  }

  .blog-hero .hero-photos,
  .blog-index-hero .hero-photos {
    float: none;
    display: block;
    width: min(58vw, 210px);
    margin: 0 auto 1.65rem;
  }

  .blog-hero .hero-photos-stack,
  .blog-index-hero .hero-photos-stack {
    justify-content: center;
  }

  .blog-hero .hero-photos .hp-back,
  .blog-index-hero .hero-photos .hp-back {
    width: 44%;
    min-width: 82px;
    margin-bottom: 12px;
    object-position: center top;
  }

  .blog-hero .hero-photos .hp-front,
  .blog-index-hero .hero-photos .hp-front {
    width: 52%;
    min-width: 98px;
    margin-left: -18px;
    object-position: center top;
    outline-width: 3px;
  }

  .blog-hero .hero-photos-badge,
  .blog-index-hero .hero-photos-badge {
    left: 50%;
    right: auto;
    bottom: -12px;
    transform: translateX(-50%);
    font-size: 0.62rem;
    padding: 0.3rem 0.52rem;
  }

  .blog-hero .hero-photos-badge svg,
  .blog-index-hero .hero-photos-badge svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
  }
}
/* Rechter zijbalk: compacte sticky kaart (inhoudsopgave + Focuspunten + CTA)
   i.p.v. een groot leeg wit vlak onder Focuspunten. */
@media (min-width: 981px) {
  /* De zijbalk beweegt met je mee terwijl je scrollt (volgt je door het hele
     artikel en blijft in beeld) - maar ZONDER eigen scrollbalkje: geen
     max-height/overflow. align-self:start houdt de kaart compact (geen wit vlak). */
  .blog-toc {
    position: sticky; top: 95px; align-self: start;
    display: flex; flex-direction: column; gap: 0.4rem;
  }
  .blog-toc a { padding: 0.12rem 0; }
  .blog-side-stats { position: static; top: auto; margin-top: 0.8rem; padding-top: 0.9rem; }
}
.side-cta {
  margin-top: 1rem; background: #0D1B2A; color: #F4F4F0; border-radius: 12px;
  padding: 1.15rem 1.1rem; text-align: center;
}
.side-cta-photos { display: flex; justify-content: center; margin-bottom: 0.6rem; }
.side-cta-photos img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #0D1B2A; }
.side-cta-photos img + img { margin-left: -13px; }
.side-cta-title {
  font-family: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 800; font-size: 1rem; line-height: 1.2; margin: 0 0 0.35rem;
}
.side-cta-text { font-size: 0.8rem; line-height: 1.5; color: rgba(244,244,240,0.68); margin: 0 0 0.85rem; }
.side-cta-btn {
  display: block; background: #5DCAA5; color: #0D1B2A; font-weight: 700; text-decoration: none;
  padding: 0.6rem 0.8rem; border-radius: 999px; font-size: 0.9rem;
}
.side-cta-btn:hover { background: #4bb892; }
.side-cta-link { display: inline-block; margin-top: 0.55rem; color: #5DCAA5; text-decoration: none; font-size: 0.82rem; }
.side-cta-link:hover { text-decoration: underline; }

/* Blog hero photo responsive repair: prevents the team photos from overlapping
   the title on tablet and small laptop widths. */
@media (min-width: 641px) and (max-width: 1080px) {
  .blog-hero,
  .blog-index-hero {
    display: block;
    min-height: auto;
    padding: 6.25rem 5% 2.8rem;
  }

  .blog-hero .hero-photos,
  .blog-index-hero .hero-photos {
    float: none;
    position: absolute;
    right: 5%;
    top: 6.4rem;
    transform: none;
    width: auto;
    margin: 0;
    z-index: 1;
  }

  .blog-hero .hero-photos-stack,
  .blog-index-hero .hero-photos-stack {
    justify-content: flex-end;
  }

  .blog-hero .hero-photos .hp-back,
  .blog-index-hero .hero-photos .hp-back {
    width: clamp(82px, 10vw, 108px);
    margin-bottom: 14px;
    object-position: center top;
  }

  .blog-hero .hero-photos .hp-front,
  .blog-index-hero .hero-photos .hp-front {
    width: clamp(98px, 12vw, 128px);
    margin-left: -22px;
    object-position: center top;
  }

  .blog-hero .hero-photos-badge,
  .blog-index-hero .hero-photos-badge {
    left: auto;
    right: 0;
    bottom: -11px;
    transform: none;
    font-size: 0.62rem;
    padding: 0.32rem 0.54rem;
  }

  .blog-hero h1,
  .blog-hero .blog-intro,
  .blog-hero .blog-meta,
  .blog-index-hero h1,
  .blog-index-hero p,
  .blog-index-hero .hero-actions,
  .blog-index-hero .blog-kpi-band,
  .blog-index-hero .blog-kpi-note {
    max-width: calc(100% - clamp(185px, 24vw, 255px));
  }
}

@media (max-width: 640px) {
  .blog-hero .hero-photos,
  .blog-index-hero .hero-photos {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
  }

  .blog-hero h1,
  .blog-hero .blog-intro,
  .blog-hero .blog-meta,
  .blog-index-hero h1,
  .blog-index-hero p,
  .blog-index-hero .hero-actions,
  .blog-index-hero .blog-kpi-band,
  .blog-index-hero .blog-kpi-note {
    max-width: 100%;
  }
}
/* Mobile hero photo placement: keep the team stack beside the intro instead of
   pushing it above the title. */
@media (max-width: 640px) {
  .blog-hero,
  .blog-index-hero {
    display: block;
    min-height: auto;
    padding: 5.85rem 1.25rem 2.4rem;
  }

  .blog-hero .hero-photos,
  .blog-index-hero .hero-photos {
    float: right;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2;
    pointer-events: none;
    animation: none !important;
    width: 112px;
    min-height: 106px;
    margin: 0.1rem 0 0.75rem 1rem;
  }

  .blog-hero .hero-photos-stack,
  .blog-index-hero .hero-photos-stack {
    justify-content: flex-end;
  }

  .blog-hero .hero-photos .hp-back,
  .blog-index-hero .hero-photos .hp-back {
    width: 62px;
    min-width: 0;
    margin-bottom: 9px;
  }

  .blog-hero .hero-photos .hp-front,
  .blog-index-hero .hero-photos .hp-front {
    width: 72px;
    min-width: 0;
    margin-left: -14px;
    outline-width: 3px;
  }

  .blog-hero .hero-photos-badge,
  .blog-index-hero .hero-photos-badge {
    left: auto;
    right: 0;
    bottom: -9px;
    transform: none;
    font-size: 0.54rem;
    padding: 0.24rem 0.38rem;
  }

  .blog-hero .hero-photos img,
  .blog-index-hero .hero-photos img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto;
  }

  .blog-hero h1,
  .blog-index-hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    line-height: 1.08;
  }

  .blog-hero::after,
  .blog-index-hero::after {
    content: "";
    display: block;
    clear: both;
  }
}

/* Final mobile article repair: compact rhythm and no decorative logo overlap. */
@media (max-width: 720px) {
  .blog-layout {
    gap: 1.25rem;
    padding-top: 2rem;
  }

  .blog-content > section,
  .blog-figure,
  .blog-toc {
    border-radius: 8px;
  }

  .blog-content > section {
    padding: 1.15rem 1rem;
    margin-bottom: 0.85rem;
  }

  .blog-content h2 {
    font-size: clamp(1.38rem, 6vw, 1.75rem);
  }

  .blog-content p,
  .blog-content li {
    line-height: 1.65;
  }

  .blog-content > section.blog-cta,
  .blog-cta {
    background: #0D1B2A !important;
    padding: 1.35rem 1.1rem;
  }

  .blog-cta h2,
  .blog-cta p {
    max-width: 100% !important;
  }
}
/* Final phone footer override: keep mobile footers compact across page-specific CSS. */
@media (max-width: 560px) {
  footer.site-footer { padding: 0.85rem 1rem 0.8rem !important; }
  footer.site-footer .footer-top { display: grid !important; grid-template-columns: 1fr !important; gap: 0.55rem !important; }
  footer.site-footer .footer-brand { grid-column: auto !important; max-width: none !important; }
  footer.site-footer .footer-logo { margin-bottom: 0.25rem !important; }
  footer.site-footer .footer-logo svg { width: 96px !important; height: auto !important; }
  footer.site-footer .footer-tagline,
  footer.site-footer .footer-about,
  footer.site-footer .footer-socials,
  footer.site-footer .footer-regio-row,
  footer.site-footer .footer-top > .footer-col:not(.footer-contact),
  footer.site-footer .footer-contact h4 { display: none !important; }
  footer.site-footer .footer-contact { display: flex !important; flex-wrap: wrap !important; gap: 0.2rem 0.8rem !important; align-items: center !important; }
  footer.site-footer .footer-contact a,
  footer.site-footer .footer-contact span { display: inline-block !important; min-height: 0 !important; margin: 0 !important; font-size: 0.78rem !important; line-height: 1.28 !important; }
  footer.site-footer .footer-contact a:first-of-type { display: none !important; }
  footer.site-footer .footer-bottom-row { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; margin-top: 0.45rem !important; gap: 0.35rem !important; padding-top: 0 !important; }
  footer.site-footer .footer-copy,
  footer.site-footer .footer-legal a { font-size: 0.72rem !important; }
  footer.site-footer .footer-legal { flex-direction: row !important; flex-wrap: wrap !important; gap: 0.25rem 0.75rem !important; }
  footer.site-footer .footer-legal a { min-height: 0 !important; }
}