/* vertaalbureau-werkwijze: React Bits Pro features-4 (block-port) met interference-ribbons (origineel gecompileerd)
   achter het rechterpaneel. Tailwind uit de bron vertaald: gecentreerde kop, twaalf kolommen (4 tabs, 8 paneel)
   vanaf 1024 px, tabs flex-1 met radius 16 en icoonvak 40 px, paneel radius 24 met icoonvak 64 px, h3, alinea
   en lijst met vinkjes (24 px, radius vol) op vlakken van radius 12. */
.msm-vertaalbureau-werkwijze {
  --vbw-ink: var(--m-ink, #152a38);
  --vbw-bg: var(--m-bg, #f6f2e9);
  --vbw-surface: var(--m-surface, #fffdf8);
  --vbw-line: var(--m-line, #d8d1c3);
  --vbw-accent: var(--m-accent2, #173e5a);
  --vbw-mark: var(--m-primary, #ef6f42);
  --vbw-t1: var(--vbw-ink);
  --vbw-t2: color-mix(in oklab, var(--vbw-ink) 78%, transparent);
  --vbw-t3: color-mix(in oklab, var(--vbw-ink) 68%, transparent);
  position: relative;
  scroll-margin-top: 112px;
  background: var(--vbw-bg);
  color: var(--vbw-t1);
  font-family: var(--m-font-body, "Source Sans 3", "Segoe UI", system-ui, sans-serif);
  padding: clamp(64px, 10vw, 128px) 0;
}
.msm-vertaalbureau-werkwijze *,
.msm-vertaalbureau-werkwijze *::before,
.msm-vertaalbureau-werkwijze *::after { box-sizing: border-box; }
.msm-vertaalbureau-werkwijze [hidden] { display: none !important; }
.msm-vertaalbureau-werkwijze .vbw-wrap { width: min(100% - 32px, 1280px); margin-inline: auto; }

.msm-vertaalbureau-werkwijze .vbw-kop { margin-bottom: clamp(40px, 5vw, 64px); text-align: center; }
.msm-vertaalbureau-werkwijze .vbw-title {
  position: relative;
  display: inline-block;
  margin: 0 0 16px;
  padding-bottom: 16px;
  font-family: var(--m-font-display, "Literata", Georgia, serif);
  font-weight: 400;
  font-size: clamp(30px, 3vw + 16px, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.msm-vertaalbureau-werkwijze .vbw-streep { position: absolute; left: 50%; bottom: 0; width: min(100%, 7em); height: 13px; overflow: visible; translate: -50% 0; }
.msm-vertaalbureau-werkwijze .vbw-streep path {
  fill: none;
  stroke: var(--vbw-mark);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.33, 1, 0.68, 1) 0.2s;
}
.msm-vertaalbureau-werkwijze.is-js:not(.is-inview) .vbw-streep path { stroke-dashoffset: 1; }
.msm-vertaalbureau-werkwijze .vbw-intro { max-width: 42rem; margin: 0 auto; font-size: clamp(18px, 0.5vw + 16px, 21px); line-height: 1.5; color: var(--vbw-t2); }

.msm-vertaalbureau-werkwijze .vbw-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1024px) {
  .msm-vertaalbureau-werkwijze .vbw-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .msm-vertaalbureau-werkwijze .vbw-tabs { grid-column: span 4; }
  .msm-vertaalbureau-werkwijze .vbw-podium { grid-column: span 8; }
}

/* Tabs: flex-kolom die de hoogte deelt; actief met vulling in --m-surface en een donker icoonvak. */
.msm-vertaalbureau-werkwijze .vbw-tabs { display: none; flex-direction: column; justify-content: space-between; gap: 16px; }
.msm-vertaalbureau-werkwijze.is-js .vbw-tabs { display: flex; }
.msm-vertaalbureau-werkwijze .vbw-tab {
  display: flex;
  width: 100%;
  flex: 1;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: color-mix(in oklab, var(--vbw-surface) 45%, transparent);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms, background-color 200ms;
}
@media (min-width: 768px) {
  .msm-vertaalbureau-werkwijze .vbw-tab { padding: 24px; }
}
.msm-vertaalbureau-werkwijze .vbw-tab:hover { border-color: color-mix(in oklab, var(--vbw-ink) 14%, transparent); }
.msm-vertaalbureau-werkwijze .vbw-tab[aria-selected="true"] { border-color: color-mix(in oklab, var(--vbw-ink) 10%, transparent); background: var(--vbw-surface); }
.msm-vertaalbureau-werkwijze .vbw-tab:focus-visible { outline: 2px solid var(--vbw-accent); outline-offset: 2px; }
.msm-vertaalbureau-werkwijze .vbw-tab-icoon {
  display: flex;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in oklab, var(--vbw-ink) 7%, transparent);
  color: var(--vbw-t1);
  transition: background-color 200ms, color 200ms;
}
.msm-vertaalbureau-werkwijze .vbw-tab[aria-selected="true"] .vbw-tab-icoon { background: var(--vbw-accent); color: var(--vbw-surface); }
.msm-vertaalbureau-werkwijze svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.msm-vertaalbureau-werkwijze .vbw-tab-tekst { display: block; min-width: 0; flex: 1; }
.msm-vertaalbureau-werkwijze .vbw-tab-titel { display: block; margin-bottom: 4px; font-size: clamp(16px, 0.3vw + 15px, 18px); line-height: 1.35; font-weight: 600; color: var(--vbw-t2); }
.msm-vertaalbureau-werkwijze .vbw-tab[aria-selected="true"] .vbw-tab-titel { color: var(--vbw-t1); }
.msm-vertaalbureau-werkwijze .vbw-tab-regel {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 15px;
  line-height: 1.45;
  color: var(--vbw-t3);
}

/* Paneel: rounded-3xl met rand; het lint schildert de ondergrond in --m-bg. */
.msm-vertaalbureau-werkwijze .vbw-podium {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--vbw-ink) 12%, transparent);
  border-radius: 24px;
  background: var(--vbw-surface);
}
.msm-vertaalbureau-werkwijze .vbw-podium.has-linten { background: var(--vbw-bg); }
.msm-vertaalbureau-werkwijze .vbw-linten { position: absolute; inset: 0; z-index: 0; }
@media (min-width: 900px) {
  .msm-vertaalbureau-werkwijze .vbw-linten { -webkit-mask-image: linear-gradient(90deg, transparent 26%, #000 68%); mask-image: linear-gradient(90deg, transparent 26%, #000 68%); }
}
@media (max-width: 899px) {
  .msm-vertaalbureau-werkwijze .vbw-linten { -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 62%); mask-image: linear-gradient(180deg, #000 30%, transparent 62%); }
}
.msm-vertaalbureau-werkwijze .interference-ribbons { position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 240px; overflow: hidden; }
.msm-vertaalbureau-werkwijze .interference-ribbons__content { position: relative; z-index: 10; width: 100%; height: 100%; }

.msm-vertaalbureau-werkwijze .vbw-paneel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 24px;
  pointer-events: none;
}
.msm-vertaalbureau-werkwijze .vbw-paneel + .vbw-paneel { border-top: 1px solid color-mix(in oklab, var(--vbw-ink) 10%, transparent); }
.msm-vertaalbureau-werkwijze.is-js .vbw-paneel { grid-area: 1 / 1; border-top: 0; }
.msm-vertaalbureau-werkwijze.is-js .vbw-paneel:not(.is-actief) { visibility: hidden; }
@media (min-width: 768px) {
  .msm-vertaalbureau-werkwijze .vbw-paneel { padding: 32px; }
}
@media (min-width: 900px) {
  .msm-vertaalbureau-werkwijze .vbw-paneel { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 32px; }
}
@media (min-width: 1024px) {
  .msm-vertaalbureau-werkwijze .vbw-paneel { padding: 40px; }
}
.msm-vertaalbureau-werkwijze .vbw-paneel-tekst { pointer-events: auto; }
@media (max-width: 899px) {
  .msm-vertaalbureau-werkwijze .vbw-paneel-beeld { order: -1; }
}
.msm-vertaalbureau-werkwijze .vbw-paneel-icoon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--vbw-ink) 7%, transparent);
  color: var(--vbw-t1);
}
.msm-vertaalbureau-werkwijze .vbw-paneel-titel {
  margin: 0 0 12px;
  font-family: var(--m-font-display, "Literata", Georgia, serif);
  font-size: clamp(24px, 0.8vw + 19px, 32px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.msm-vertaalbureau-werkwijze .vbw-paneel-p { margin: 0 0 28px; max-width: 34em; font-size: clamp(16px, 0.3vw + 15px, 18px); line-height: 1.6; color: var(--vbw-t2); }
.msm-vertaalbureau-werkwijze .vbw-lijst { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.msm-vertaalbureau-werkwijze .vbw-lijst li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--vbw-surface) 94%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--vbw-ink) 6%, transparent);
  font-size: clamp(15px, 0.2vw + 14px, 16px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--vbw-t1);
}
.msm-vertaalbureau-werkwijze .vbw-vink {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-top: -1px;
  border-radius: 999px;
  background: var(--vbw-accent);
  color: var(--vbw-surface);
}
.msm-vertaalbureau-werkwijze .vbw-vink svg { stroke-width: 3; }

.msm-vertaalbureau-werkwijze .vbw-paneel-beeld { position: relative; display: grid; place-items: center; min-height: 0; }
.msm-vertaalbureau-werkwijze .vbw-paneel-beeld img {
  display: block;
  width: min(100%, 420px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px color-mix(in oklab, var(--vbw-ink) 14%, transparent));
}
@media (max-width: 899px) {
  .msm-vertaalbureau-werkwijze .vbw-paneel-beeld img { width: min(72%, 300px); }
}
.msm-vertaalbureau-werkwijze .vbw-paneel-beeld-twee { grid-template-areas: "stapel"; }
.msm-vertaalbureau-werkwijze .vbw-paneel-beeld-twee img { grid-area: stapel; }
.msm-vertaalbureau-werkwijze .vbw-paneel-beeld-twee .vbw-doc { width: min(86%, 380px); translate: -8% -6%; }
.msm-vertaalbureau-werkwijze .vbw-paneel-beeld-twee .vbw-stempel { width: min(52%, 230px); align-self: end; justify-self: end; translate: 4% 6%; }

/* Opmaakproef (tab 3): wat de controle in de echte pagina vindt. */
.msm-vertaalbureau-werkwijze .vbw-opmaak {
  display: grid;
  width: min(100%, 400px);
  gap: 14px;
  padding: 20px;
  border: 1px solid color-mix(in oklab, var(--vbw-ink) 10%, transparent);
  border-radius: 14px;
  background: var(--vbw-surface);
  box-shadow: 0 18px 40px -26px color-mix(in oklab, var(--vbw-ink) 45%, transparent);
}
.msm-vertaalbureau-werkwijze .vbw-opmaak-rij { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px dashed color-mix(in oklab, var(--vbw-ink) 14%, transparent); }
.msm-vertaalbureau-werkwijze .vbw-opmaak-rij:last-child { padding-bottom: 0; border-bottom: 0; }
.msm-vertaalbureau-werkwijze .vbw-opmaak-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vbw-t3); }
.msm-vertaalbureau-werkwijze .vbw-opmaak-knop {
  position: relative;
  display: block;
  width: 168px;
  height: 40px;
  border-radius: 6px;
  background: var(--vbw-accent);
  color: var(--vbw-surface);
  font-size: 15px;
  font-weight: 600;
  line-height: 40px;
  white-space: nowrap;
  padding-left: 14px;
  outline: 2px solid var(--vbw-mark);
  outline-offset: 3px;
}
.msm-vertaalbureau-werkwijze .vbw-opmaak-knop span { position: relative; }
.msm-vertaalbureau-werkwijze .vbw-opmaak-woord { font-family: var(--m-font-display, "Literata", Georgia, serif); font-size: 20px; line-height: 1.3; }
.msm-vertaalbureau-werkwijze .vbw-opmaak-woord mark { padding: 0 2px; border-radius: 3px; background: color-mix(in oklab, var(--vbw-mark) 26%, transparent); color: inherit; }
.msm-vertaalbureau-werkwijze .vbw-opmaak-rtl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; background: color-mix(in oklab, var(--vbw-ink) 5%, transparent); font-size: 20px; }
.msm-vertaalbureau-werkwijze .vbw-opmaak-rtl svg { color: var(--vbw-mark); }

.msm-vertaalbureau-werkwijze .vbw-slot { max-width: 46rem; margin: 32px auto 0; font-size: 17px; line-height: 1.55; text-align: center; color: var(--vbw-t2); }
.msm-vertaalbureau-werkwijze .vbw-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  font-weight: 600;
  color: var(--vbw-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--vbw-mark) 70%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.msm-vertaalbureau-werkwijze .vbw-link:hover { text-decoration-color: var(--vbw-mark); }
.msm-vertaalbureau-werkwijze .vbw-link:focus-visible { outline: 2px solid var(--vbw-accent); outline-offset: 3px; border-radius: 2px; }

/* Entree in rust: alleen verborgen zolang de sectie nog niet in beeld is geweest. */
.msm-vertaalbureau-werkwijze.is-wacht .vbw-in,
.msm-vertaalbureau-werkwijze.is-wacht .vbw-tab { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .msm-vertaalbureau-werkwijze .vbw-streep path { transition: none; }
  .msm-vertaalbureau-werkwijze.is-js:not(.is-inview) .vbw-streep path { stroke-dashoffset: 0; }
  .msm-vertaalbureau-werkwijze.is-wacht .vbw-in,
  .msm-vertaalbureau-werkwijze.is-wacht .vbw-tab { opacity: 1; }
  .msm-vertaalbureau-werkwijze .vbw-tab,
  .msm-vertaalbureau-werkwijze .vbw-tab-icoon { transition: none; }
}