:root {
  --mv-application-bg: #f8fafc;
}

.platform-label,
.product-label,
.application-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--mv-text-secondary);
}

.platform-label::before,
.product-label::before,
.application-label::before {
  content: "";
  width: 24px;
  border-top: 1px solid currentColor;
  opacity: .55;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 20px;
  color: var(--mv-text-muted);
  font-size: .82rem;
}

.breadcrumbs a {
  color: var(--mv-text-secondary);
  text-decoration: none;
}

.breadcrumbs a:hover { color: var(--mv-text-primary); }
.breadcrumbs span + span::before,
.breadcrumbs a + span::before,
.breadcrumbs a + a::before { content: "/"; margin-right: 7px; color: var(--mv-border-strong); }

.platform-hero-note {
  display: inline-flex;
  margin-top: 28px;
  padding: 8px 12px;
  border: 1px solid var(--mv-border);
  border-radius: 999px;
  color: var(--mv-text-secondary);
  font-size: .82rem;
  background: rgba(255,255,255,.8);
}

.product-overview {
  padding: 92px 0 112px;
}

.product-overview-grid {
  display: grid;
  grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
  gap: 72px;
  align-items: start;
}

.product-promise {
  position: sticky;
  top: 104px;
}

.product-promise h2 {
  margin: 8px 0 16px;
  font-size: clamp(2rem,4vw,3.6rem);
  line-height: 1.06;
  letter-spacing: -.045em;
  font-weight: 650;
}

.product-promise p { color: var(--mv-text-secondary); font-size: 1.06rem; }

.application-section {
  padding: 92px 0;
  background: var(--mv-application-bg);
  border-top: 1px solid var(--mv-border);
  border-bottom: 1px solid var(--mv-border);
}

.application-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-top: 34px;
}

.application-card {
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: 28px;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-panel);
  background: white;
  text-decoration: none;
  box-shadow: var(--mv-shadow-panel);
}

.application-card[data-status="future"] {
  box-shadow: none;
  background: rgba(255,255,255,.55);
}

.application-card .status {
  align-self: flex-start;
  margin-bottom: 42px;
  padding: 5px 9px;
  border: 1px solid var(--mv-border);
  border-radius: 999px;
  color: var(--mv-text-secondary);
  font-size: .74rem;
}

.application-card h3 {
  margin: 0 0 10px;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.application-card p { color: var(--mv-text-secondary); }
.application-card .text-link { margin-top: auto; }

.application-hero {
  padding: 76px 0 60px;
  border-bottom: 1px solid var(--mv-border);
  background: linear-gradient(180deg,#fff 0%,#fbfdfe 100%);
}

.application-hero h1 {
  max-width: 920px;
  margin: 8px 0 20px;
  font-size: clamp(2.7rem,6vw,5.6rem);
  line-height: .99;
  letter-spacing: -.052em;
  font-weight: 650;
}

.application-hero .hero-kicker { max-width: 760px; }

.application-context {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--mv-border);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  max-width: 760px;
}

.application-context strong { font-size: .86rem; }
.application-context p { margin: 0; color: var(--mv-text-secondary); font-size: .94rem; }

.family-strip {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin-top: 42px;
}

.family-strip a {
  padding: 14px 16px;
  border: 1px solid var(--mv-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--mv-text-secondary);
  background: rgba(255,255,255,.8);
}

.family-strip a:hover { color: var(--mv-text-primary); border-color: var(--mv-border-strong); }

/* Platformprincipes: inhoudelijk rijk, maar binnen één rustige sectie. */
.statement .statement-intro {
  max-width: 780px;
  margin: 0;
  color: #cbd5e1;
  font-size: 1.08rem;
}

.platform-principles {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 28px;
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid rgba(203,213,225,.25);
}

.platform-principles strong {
  display: block;
  margin-bottom: 9px;
  color: #fff;
  font-size: .98rem;
}

.platform-principles p,
.statement .platform-principles p:last-child {
  max-width: none;
  margin: 0;
  color: #cbd5e1;
  font-size: .96rem;
  line-height: 1.6;
}

/* Visuele plaatsbepaling binnen platform → product → toepassing. */
.hero.has-structure-map,
.product-hero.has-structure-map,
.application-hero > .shell.has-structure-map,
.article-hero > .shell.has-structure-map,
.article-hero.shell.has-structure-map {
  position: relative;
}

.structure-map {
  --tree-accent: var(--mv-accent-primary);
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 0;
  width: 248px;
  padding: 18px 18px 16px;
  border: 1px solid var(--mv-border);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 32px rgba(15,23,42,.07);
  backdrop-filter: blur(12px);
}

.hero .structure-map { top: 34px; }
.structure-map--atelier { --tree-accent: var(--mv-atelier); }
.structure-map--studio { --tree-accent: var(--mv-studio); }
.structure-map--werkplaats { --tree-accent: var(--mv-werkplaats); }
.structure-map--beslismodel { --tree-accent: var(--mv-beslismodel); }

.structure-map__eyebrow {
  margin: 0 0 12px;
  color: var(--mv-text-muted);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.structure-map__nav,
.structure-tree,
.structure-tree ul {
  margin: 0;
  padding: 0;
}

.structure-tree,
.structure-tree ul { list-style: none; }

.structure-tree ul {
  position: relative;
  margin-left: 10px;
  padding-left: 15px;
}

.structure-tree ul::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 11px;
  left: 3px;
  border-left: 1px solid var(--mv-border-strong);
}

.structure-tree li {
  position: relative;
  margin: 3px 0;
}

.structure-tree ul > li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -12px;
  width: 10px;
  border-top: 1px solid var(--mv-border-strong);
}

.structure-node {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 7px;
  color: var(--mv-text-secondary);
  font-size: .82rem;
  line-height: 1.35;
  text-decoration: none;
}

.structure-node:hover {
  color: var(--mv-text-primary);
  background: var(--mv-bg-secondary);
}

.structure-node small {
  margin-left: auto;
  color: var(--mv-text-muted);
  font-size: .62rem;
  white-space: nowrap;
}

.structure-node b {
  margin-left: auto;
  color: var(--mv-text-muted);
  font-size: .72rem;
  font-weight: 500;
}

.structure-node.is-current {
  color: var(--mv-text-primary);
  background: color-mix(in srgb, var(--tree-accent) 10%, white);
  font-weight: 720;
}

.structure-node.is-current::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 3px;
  background: var(--tree-accent);
}

.structure-node.is-muted {
  color: var(--mv-text-muted);
}

@media (min-width: 1101px) {
  .hero.has-structure-map > :not(.structure-map),
  .product-hero.has-structure-map > :not(.structure-map),
  .application-hero > .shell.has-structure-map > :not(.structure-map),
  .article-hero > .shell.has-structure-map > :not(.structure-map),
  .article-hero.shell.has-structure-map > :not(.structure-map) {
    max-width: calc(100% - 282px);
  }
}

@media (max-width: 1100px) {
  .structure-map {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 520px);
    margin-top: 34px;
  }

  .hero .structure-map { top: auto; }
}

@media (max-width: 800px) {
  .product-overview-grid,
  .application-context,
  .platform-principles { grid-template-columns: 1fr; gap: 28px; }
  .product-promise { position: static; }
  .application-grid { grid-template-columns: 1fr; }
  .family-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .structure-map { width: 100%; }
}