/* vertaalbureau-contact: block-port van ReactBitsPro Blocks/support-2 ("Ticket form with article suggestions").
   Tailwind uit de bron vertaald naar gescopete CSS: kolom max 820 px, raster 1fr en 260 px vanaf 1024 px met gap 12,
   panel (radius 10, rand 10 procent, iets donkerder vlak) met daarin een body van radius 6 op 4 px marge, velden
   met rand 12 procent, hover 32 procent en een ring bij focus, een well van 5 procent met voorgestelde artikelen,
   een gesegmenteerde rij (track 2 px, segment radius 4), knoppen met het verloop en de inset-schaduwen van
   primaryButton, listbox met overlayEnter (160 ms) en een zijpaneel met rijen gescheiden door lijnen van 8 procent.
   Accent (--rb-accent) = --m-accent2; tikdoelen 44 px zoals vertaalbureau-proef. */
.msm-vertaalbureau-contact{--vbc-p:var(--m-primary,#ef6f42);--vbc-bg:var(--m-bg,#f6f2e9);--vbc-ink:var(--m-ink,#152a38);--vbc-s:var(--m-surface,#fffdf8);--vbc-mu:var(--m-muted,#5b6670);--vbc-a2:var(--m-accent2,#173e5a);--vbc-l:var(--m-line,#d8d1c3);--vbc-fd:var(--m-font-display,'Literata',Georgia,serif);--vbc-fb:var(--m-font-body,'Source Sans 3',Arial,sans-serif);--vbc-ease:cubic-bezier(.2,0,0,1);--vbc-t2:color-mix(in oklab,var(--vbc-ink) 80%,transparent);--vbc-t3:color-mix(in oklab,var(--vbc-ink) 70%,transparent);--vbc-ring:0 0 0 3px color-mix(in oklab,var(--vbc-a2) 22%,transparent);position:relative;box-sizing:border-box;scroll-margin-top:112px;padding:clamp(64px,9vw,112px) 16px;background:var(--vbc-bg);color:var(--vbc-ink);font-family:var(--vbc-fb);line-height:1.5}
.msm-vertaalbureau-contact *,.msm-vertaalbureau-contact *::before,.msm-vertaalbureau-contact *::after{box-sizing:inherit}
.msm-vertaalbureau-contact [hidden]{display:none!important}
.msm-vertaalbureau-contact .vbc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.msm-vertaalbureau-contact .vbc-wrap{width:100%;max-width:820px;margin:0 auto}
.msm-vertaalbureau-contact .vbc-wrap[data-vbc-enter="wacht"]{opacity:0}

/* Kop: icoon met twee tekstballonnen, h2 over twee regels met correctiestreep, alinea. */
.msm-vertaalbureau-contact .vbc-head{margin-bottom:32px}
.msm-vertaalbureau-contact .vbc-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--vbc-a2) 9%,var(--vbc-s));color:var(--vbc-a2)}
.msm-vertaalbureau-contact .vbc-title{position:relative;display:inline-block;margin:20px 0 0;padding-bottom:14px;font-family:var(--vbc-fd);font-weight:500;font-size:clamp(30px,calc(2.2vw + 18px),46px);line-height:1.12;letter-spacing:-.015em;text-wrap:balance;color:var(--vbc-ink)}
.msm-vertaalbureau-contact .vbc-mark{position:absolute;left:0;bottom:0;width:min(100%,9.5em);height:13px;overflow:visible}
.msm-vertaalbureau-contact .vbc-mark path{fill:none;stroke:var(--vbc-p);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.msm-vertaalbureau-contact .vbc-title[data-vbc-mark="wacht"] .vbc-mark path{stroke-dashoffset:1}
.msm-vertaalbureau-contact .vbc-title[data-vbc-mark="teken"] .vbc-mark path{transition:stroke-dashoffset .6s cubic-bezier(.33,1,.68,1)}
.msm-vertaalbureau-contact .vbc-text{max-width:34em;margin:16px 0 0;font-size:17px;line-height:1.55;color:var(--vbc-t2)}

/* Raster en panels. */
.msm-vertaalbureau-contact .vbc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
.msm-vertaalbureau-contact .vbc-panel{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid color-mix(in oklab,var(--vbc-ink) 10%,transparent);border-radius:10px;background:color-mix(in oklab,var(--vbc-ink) 4%,var(--vbc-bg));color:var(--vbc-ink)}
.msm-vertaalbureau-contact .vbc-body{display:flex;flex-direction:column;min-width:0;margin:4px;overflow:hidden;border:1px solid color-mix(in oklab,var(--vbc-ink) 8%,transparent);border-radius:6px;background:var(--vbc-s)}
.msm-vertaalbureau-contact .vbc-form{gap:24px;padding:16px}
.msm-vertaalbureau-contact .vbc-row2{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 12px}
.msm-vertaalbureau-contact .vbc-field{min-width:0}
.msm-vertaalbureau-contact .vbc-label{display:flex;width:fit-content;align-items:center;gap:8px;padding:0;font-size:15px;line-height:18px;font-weight:600;color:var(--vbc-ink)}

/* Invoer: inputBox, textareaClass en de terugval-select zonder JavaScript. */
.msm-vertaalbureau-contact .vbc-box{position:relative;display:flex;width:100%;min-width:0;margin-top:8px;align-items:center;border:1px solid color-mix(in oklab,var(--vbc-ink) 12%,transparent);border-radius:6px;background:var(--vbc-s);box-shadow:0 1px 2px -1px rgb(0 0 0 / .12);transition:border-color 120ms var(--vbc-ease),box-shadow 120ms var(--vbc-ease)}
.msm-vertaalbureau-contact .vbc-box:hover:not(:focus-within){border-color:color-mix(in oklab,var(--vbc-ink) 32%,transparent)}
.msm-vertaalbureau-contact .vbc-box:focus-within{border-color:var(--vbc-a2);box-shadow:0 1px 2px -1px rgb(0 0 0 / .12),var(--vbc-ring)}
.msm-vertaalbureau-contact .vbc-box:has([aria-invalid="true"]){border-color:var(--vbc-p)}
.msm-vertaalbureau-contact .vbc-input{flex:1 1 auto;width:100%;min-width:0;height:44px;padding:0 12px;border:0;background:transparent;color:var(--vbc-ink);font:inherit;font-size:16px;line-height:20px;font-weight:500;outline:none}
.msm-vertaalbureau-contact .vbc-input::placeholder,.msm-vertaalbureau-contact .vbc-textarea::placeholder{color:var(--vbc-t3)}
.msm-vertaalbureau-contact .vbc-textarea{display:block;width:100%;min-height:104px;max-height:256px;margin-top:8px;padding:10px 12px;resize:vertical;field-sizing:content;border:1px solid color-mix(in oklab,var(--vbc-ink) 12%,transparent);border-radius:6px;background:var(--vbc-s);color:var(--vbc-ink);font:inherit;font-size:16px;line-height:24px;font-weight:500;box-shadow:0 1px 2px -1px rgb(0 0 0 / .12);outline:none;transition:border-color 120ms var(--vbc-ease),box-shadow 120ms var(--vbc-ease)}
.msm-vertaalbureau-contact .vbc-textarea:hover:not(:focus-visible):not([aria-invalid="true"]){border-color:color-mix(in oklab,var(--vbc-ink) 32%,transparent)}
.msm-vertaalbureau-contact .vbc-textarea:focus-visible,.msm-vertaalbureau-contact .vbc-textarea:focus{border-color:var(--vbc-a2);box-shadow:0 1px 2px -1px rgb(0 0 0 / .12),var(--vbc-ring)}
.msm-vertaalbureau-contact .vbc-textarea[aria-invalid="true"]{border-color:var(--vbc-p)}
.msm-vertaalbureau-contact .vbc-select{position:relative;margin-top:8px}
.msm-vertaalbureau-contact .vbc-native{display:block;width:100%;height:44px;padding:0 12px;border:1px solid color-mix(in oklab,var(--vbc-ink) 12%,transparent);border-radius:6px;background:var(--vbc-s);color:var(--vbc-ink);font:inherit;font-size:16px}
.msm-vertaalbureau-contact .vbc-native:focus-visible{outline:2px solid var(--vbc-a2);outline-offset:2px}

/* Select (combobox met listbox): selectTrigger, menuPopup, menuItem en overlayEnter uit de bron. */
.msm-vertaalbureau-contact .vbc-trigger{display:inline-flex;width:100%;min-width:0;height:44px;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;border:1px solid color-mix(in oklab,var(--vbc-ink) 12%,transparent);border-radius:6px;background:var(--vbc-s);color:var(--vbc-ink);font:inherit;font-size:16px;line-height:20px;font-weight:500;text-align:left;white-space:nowrap;cursor:pointer;user-select:none;outline:none;box-shadow:0 1px 2px -1px rgb(0 0 0 / .12);transition:border-color 120ms var(--vbc-ease),box-shadow 120ms var(--vbc-ease)}
.msm-vertaalbureau-contact .vbc-trigger:hover:not([aria-expanded="true"]){border-color:color-mix(in oklab,var(--vbc-ink) 32%,transparent)}
.msm-vertaalbureau-contact .vbc-trigger:focus-visible,.msm-vertaalbureau-contact .vbc-trigger[aria-expanded="true"]{border-color:var(--vbc-a2);box-shadow:0 1px 2px -1px rgb(0 0 0 / .12),var(--vbc-ring)}
.msm-vertaalbureau-contact .vbc-trigger-val{display:flex;min-width:0;align-items:baseline;gap:8px}
.msm-vertaalbureau-contact .vbc-trigger-val>span{overflow:hidden;text-overflow:ellipsis}
.msm-vertaalbureau-contact .vbc-placeholder,.msm-vertaalbureau-contact .vbc-hint{color:var(--vbc-t3);font-weight:400}
.msm-vertaalbureau-contact .vbc-caret{flex-shrink:0;color:var(--vbc-t2)}
.msm-vertaalbureau-contact .vbc-menu{position:absolute;z-index:30;left:0;width:100%;min-width:100%;max-height:264px;margin:0;padding:4px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;list-style:none;border:1px solid color-mix(in oklab,var(--vbc-ink) 10%,transparent);border-radius:10px;background:var(--vbc-s);color:var(--vbc-ink);outline:none;box-shadow:0 12px 24px -12px rgb(0 0 0 / .2);opacity:1;transition:opacity 160ms var(--vbc-ease)}
@starting-style{.msm-vertaalbureau-contact .vbc-menu{opacity:0}}
.msm-vertaalbureau-contact .vbc-menu[data-side="onder"]{top:100%;margin-top:6px}
.msm-vertaalbureau-contact .vbc-menu[data-side="boven"]{bottom:100%;margin-bottom:6px}
.msm-vertaalbureau-contact .vbc-option{position:relative;display:flex;width:100%;min-height:32px;align-items:center;gap:8px;padding:6px 32px 6px 8px;border-radius:6px;font-size:15px;line-height:18px;font-weight:500;color:var(--vbc-ink);cursor:default;user-select:none}
.msm-vertaalbureau-contact .vbc-option[aria-selected="true"]{background:color-mix(in oklab,var(--vbc-ink) 9%,transparent)}
.msm-vertaalbureau-contact .vbc-option[data-highlighted]{background:color-mix(in oklab,var(--vbc-ink) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--vbc-a2) 35%,transparent)}
.msm-vertaalbureau-contact .vbc-option .vbc-opt{display:flex;min-width:0;align-items:baseline;gap:8px}
.msm-vertaalbureau-contact .vbc-option .vbc-tick{position:absolute;right:8px;color:var(--vbc-t2)}

/* Well met voorgestelde artikelen: typeCaption, itemRowSm, itemRowInteractive en truncateFade. */
.msm-vertaalbureau-contact .vbc-well{margin-top:8px;padding:4px;border-radius:6px;background:color-mix(in oklab,var(--vbc-ink) 5%,transparent)}
.msm-vertaalbureau-contact .vbc-caption{margin:0;font-size:13px;line-height:16px;font-variant-numeric:tabular-nums;color:var(--vbc-t3)}
.msm-vertaalbureau-contact .vbc-well-cap{padding:6px 8px 4px}
.msm-vertaalbureau-contact .vbc-tips{margin:0;padding:0;list-style:none}
.msm-vertaalbureau-contact .vbc-tip{position:relative;display:flex;width:100%;min-width:0;min-height:36px;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:6px 8px;border-radius:6px;color:var(--vbc-ink);text-decoration:none;text-align:left;transition:background-color 120ms var(--vbc-ease)}
.msm-vertaalbureau-contact .vbc-tip:hover{background:color-mix(in oklab,var(--vbc-ink) 5%,transparent)}
.msm-vertaalbureau-contact .vbc-tip:active{background:color-mix(in oklab,var(--vbc-ink) 8%,transparent)}
.msm-vertaalbureau-contact .vbc-tip:focus-visible{outline:2px solid var(--vbc-a2);outline-offset:-2px}
.msm-vertaalbureau-contact .vbc-tip svg{flex-shrink:0;color:var(--vbc-t3)}
.msm-vertaalbureau-contact .vbc-tip-title{display:block;flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;font-size:15px;line-height:20px;color:var(--vbc-t2);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)}
.msm-vertaalbureau-contact .vbc-tip:hover .vbc-tip-title{color:var(--vbc-ink);text-decoration:underline;text-decoration-color:var(--vbc-p);text-underline-offset:3px}
.msm-vertaalbureau-contact .vbc-tip-cat{flex-shrink:0;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--vbc-a2)}

/* Spoed: segmentedTrack en segment met echte radioknoppen (pijltjestoetsen werken vanzelf). */
.msm-vertaalbureau-contact .vbc-fieldset{min-width:0;margin:0;padding:0;border:0}
.msm-vertaalbureau-contact .vbc-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:8px;padding:2px;border-radius:6px;background:color-mix(in oklab,var(--vbc-ink) 5%,transparent)}
.msm-vertaalbureau-contact .vbc-segment{position:relative;display:flex;min-width:0;min-height:40px;align-items:center;justify-content:center;padding:0 8px;border-radius:4px;color:var(--vbc-t2);font-size:15px;line-height:18px;font-weight:600;white-space:nowrap;cursor:pointer;user-select:none;transition:background-color 120ms var(--vbc-ease),color 120ms var(--vbc-ease)}
.msm-vertaalbureau-contact .vbc-radio{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.msm-vertaalbureau-contact .vbc-segment:hover:not(:has(:checked)){background:color-mix(in oklab,var(--vbc-ink) 5%,transparent);color:var(--vbc-ink)}
.msm-vertaalbureau-contact .vbc-segment:active:not(:has(:checked)){background:color-mix(in oklab,var(--vbc-ink) 8%,transparent)}
.msm-vertaalbureau-contact .vbc-segment:has(:checked){background:var(--vbc-s);color:var(--vbc-ink);box-shadow:0 1px 2px rgb(0 0 0 / .1)}
.msm-vertaalbureau-contact .vbc-segment:has(:focus-visible){outline:2px solid var(--vbc-a2);outline-offset:-2px}

/* Knoppen: secondaryButton en primaryButton (verloop, inset-schaduwen, scale 0,98 in 60 ms). */
.msm-vertaalbureau-contact .vbc-actions{display:flex;flex-direction:column;gap:8px}
.msm-vertaalbureau-contact .vbc-knop{position:relative;display:inline-flex;min-height:44px;flex-shrink:0;align-items:center;justify-content:center;gap:8px;padding:0 20px;border:0;border-radius:6px;font:inherit;font-size:16px;line-height:20px;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:color 120ms var(--vbc-ease),background-color 120ms var(--vbc-ease),border-color 120ms var(--vbc-ease),box-shadow 120ms var(--vbc-ease),scale 120ms var(--vbc-ease),filter 120ms var(--vbc-ease)}
.msm-vertaalbureau-contact .vbc-knop:active{scale:.98;transition-duration:60ms}
.msm-vertaalbureau-contact .vbc-knop:focus-visible{outline:2px solid var(--vbc-a2);outline-offset:2px}
.msm-vertaalbureau-contact .vbc-knop-1{color:var(--vbc-s);background:linear-gradient(180deg,color-mix(in oklab,var(--vbc-a2) 84%,white),color-mix(in oklab,var(--vbc-a2) 94%,black));box-shadow:inset 0 2px 0 -1px rgb(255 255 255 / .2),inset 0 -2px 0 -1px rgb(0 0 0 / .3),inset 0 0 0 1px color-mix(in oklab,var(--vbc-a2) 88%,black),0 1px 1px rgb(0 0 0 / .22),0 2px 5px -2px rgb(0 0 0 / .3)}
.msm-vertaalbureau-contact .vbc-knop-1:hover{filter:brightness(1.1)}
.msm-vertaalbureau-contact .vbc-knop-1:active{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--vbc-a2) 88%,black),inset 0 1px 2px rgb(0 0 0 / .42)}
.msm-vertaalbureau-contact .vbc-knop-2{border:1px solid color-mix(in oklab,var(--vbc-ink) 12%,transparent);background:var(--vbc-s);color:var(--vbc-ink);box-shadow:0 1px 2px -1px rgb(0 0 0 / .12)}
.msm-vertaalbureau-contact .vbc-knop-2:hover{border-color:color-mix(in oklab,var(--vbc-ink) 32%,transparent);background-image:linear-gradient(color-mix(in oklab,var(--vbc-ink) 3%,transparent),color-mix(in oklab,var(--vbc-ink) 3%,transparent))}
.msm-vertaalbureau-contact .vbc-knop-2:active{box-shadow:inset 0 1px 2px rgb(0 0 0 / .12)}
.msm-vertaalbureau-contact .vbc-fine{margin:-12px 0 0;font-size:14px;line-height:20px;color:var(--vbc-t3)}
.msm-vertaalbureau-contact .vbc-status:empty{display:none}
.msm-vertaalbureau-contact .vbc-status{margin-top:-8px;padding:12px 14px;border:1px solid color-mix(in oklab,var(--vbc-a2) 22%,transparent);border-radius:6px;background:color-mix(in oklab,var(--vbc-a2) 6%,var(--vbc-s));font-size:15px;line-height:22px;color:var(--vbc-ink)}
.msm-vertaalbureau-contact .vbc-status p{margin:0}
.msm-vertaalbureau-contact .vbc-status p+p{margin-top:6px}
.msm-vertaalbureau-contact .vbc-status a{color:var(--vbc-a2);font-weight:600;text-underline-offset:3px}
.msm-vertaalbureau-contact .vbc-status a:focus-visible{outline:2px solid var(--vbc-a2);outline-offset:2px;border-radius:2px}

/* Zijpaneel: rowsRuled met vier cellen (p-3), typeCaption, typeHeadingSm en typeBodySm. */
.msm-vertaalbureau-contact .vbc-ruled>.vbc-cell+.vbc-cell{border-top:1px solid color-mix(in oklab,var(--vbc-ink) 8%,transparent)}
.msm-vertaalbureau-contact .vbc-cell{padding:14px 16px}
.msm-vertaalbureau-contact .vbc-eta{margin:6px 0 0;font-family:var(--vbc-fd);font-size:20px;line-height:24px;font-weight:500;letter-spacing:-.015em;color:var(--vbc-ink)}
.msm-vertaalbureau-contact .vbc-small{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--vbc-t2)}
.msm-vertaalbureau-contact .vbc-kv,.msm-vertaalbureau-contact .vbc-list{margin:8px 0 0;padding:0;list-style:none;font-size:14px;line-height:20px;color:var(--vbc-t2)}
.msm-vertaalbureau-contact .vbc-kv li{display:flex;justify-content:space-between;gap:8px}
.msm-vertaalbureau-contact .vbc-kv li+li{margin-top:6px}
.msm-vertaalbureau-contact .vbc-kv-val{min-width:0;text-align:right;color:var(--vbc-ink);overflow-wrap:anywhere}
.msm-vertaalbureau-contact .vbc-list li+li{margin-top:8px}
.msm-vertaalbureau-contact .vbc-mailknop{display:flex;width:100%;margin-top:10px;padding:0 14px;white-space:normal}
.msm-vertaalbureau-contact .vbc-mailtekst{overflow-wrap:anywhere}
.msm-vertaalbureau-contact .vbc-lines{display:flex;flex-direction:column;gap:2px;margin-top:12px;font-style:normal;font-size:14.5px;line-height:21px;color:var(--vbc-ink)}
.msm-vertaalbureau-contact .vbc-phone{width:fit-content;color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--vbc-ink) 28%,transparent);text-underline-offset:4px}
.msm-vertaalbureau-contact .vbc-phone:hover{text-decoration-color:var(--vbc-p)}
.msm-vertaalbureau-contact .vbc-phone:focus-visible{outline:2px solid var(--vbc-a2);outline-offset:3px;border-radius:4px}
.msm-vertaalbureau-contact .vbc-hours{margin:8px 0 0;font-size:14px;line-height:20px;color:var(--vbc-t3)}

@media (max-width:639px){
  .msm-vertaalbureau-contact .vbc-tip-title{white-space:normal;-webkit-mask-image:none;mask-image:none}
}
@media (min-width:640px){
  .msm-vertaalbureau-contact{padding-left:24px;padding-right:24px}
  .msm-vertaalbureau-contact .vbc-form{padding:20px}
  .msm-vertaalbureau-contact .vbc-row2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .msm-vertaalbureau-contact .vbc-actions{flex-direction:row;justify-content:flex-end}
}
@media (min-width:1024px){
  .msm-vertaalbureau-contact .vbc-grid{grid-template-columns:minmax(0,1fr) 260px}
}
@media (prefers-reduced-motion:reduce){
  .msm-vertaalbureau-contact .vbc-knop,.msm-vertaalbureau-contact .vbc-box,.msm-vertaalbureau-contact .vbc-textarea,.msm-vertaalbureau-contact .vbc-trigger,.msm-vertaalbureau-contact .vbc-menu,.msm-vertaalbureau-contact .vbc-tip,.msm-vertaalbureau-contact .vbc-segment,.msm-vertaalbureau-contact .vbc-title .vbc-mark path{transition:none!important}
  .msm-vertaalbureau-contact .vbc-knop:active{scale:1}
  .msm-vertaalbureau-contact .vbc-title .vbc-mark path{stroke-dashoffset:0!important}
}