.service-bento { padding-inline: clamp(1.25rem, 5vw, 6rem); }
body.has-long-sections .diensten.service-bento { content-visibility: visible; }
.service-bento-wrap { max-width: 1320px; margin-inline: auto; }
.service-bento .section-heading { margin-bottom: 1.5rem; }
.service-bento .diensten-lede { max-width: 65ch; margin: 0; }
.service-bento-intro { margin: 1.25rem 0 2rem; color: #c3d7d1; font-size: .875rem; }
.service-bento-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.service-bento-card { grid-column: span 2; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #294043; border-radius: 8px; background: #050708; scroll-margin-top: 7rem; }
.service-bento-card--large { grid-column: span 2; }
.service-bento-stage { display: flex; flex: 1; min-height: 0; padding: 1.25rem; background: #0a1b1e; }
.service-bento-card--large .service-bento-stage { min-height: 0; padding: 1.25rem; }
.service-bento-body { position: relative; z-index: 1; flex: 0 0 160px; min-height: 160px; box-sizing: border-box; margin-top: -.5rem; padding: 1.5rem; background: rgba(5, 7, 8, .94); backdrop-filter: blur(12px); }
.service-bento .service-bento-body h3 { margin: 0 0 .75rem; font: 600 1.125rem/1.3 var(--sans); letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.service-bento .service-bento-card--large h3 { font-size: 1.375rem; }
.service-bento-body > p { margin: 0; color: #b9c6c7; font-size: .875rem; line-height: 1.7; }
.service-bento-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 1.75rem; }
.service-bento-footer p { max-width: 65ch; margin: 0; color: #c3d7d1; font-size: .75rem; }
.service-bento-footer a { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; color: #f7f8f6; font-size: .875rem; text-decoration: underline; text-underline-offset: .3em; }
.service-bento ::selection { color: #071d20; background: #d4e6df; }
@media (max-width: 1100px) {
  .service-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-bento-card { grid-column: span 1; }
  .service-bento-body { flex-basis: 224px; min-height: 224px; }
  .service-bento-card--large .service-bento-stage { padding: 1.25rem; }
}
@media (max-width: 600px) {
  .service-bento-grid { grid-template-columns: minmax(0, 1fr); }
  .service-bento .service-bento-body h3 { font-size: 1.25rem; }
  .service-bento-card--large .service-bento-stage { min-height: 320px; }
  .service-bento-footer { align-items: flex-start; flex-direction: column; }
}

.service-bento-footer svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.service-demos-motion{display:block;min-height:44px;margin:-.75rem 0 1.5rem;padding:.5rem .85rem;border:1px solid #698588;border-radius:6px;background:transparent;color:#d4e6df;font:600 .75rem/1.5 var(--sans);cursor:pointer}
.service-demos-motion[hidden]{display:none}
.service-demos-motion:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.service-demos-motion:hover{background:#102f35}

/* Align metadata, demo fields and captions without cropping their contents. */
.service-bento .sd{display:grid;grid-template-rows:44px minmax(min-content,1fr) 54px;gap:.875rem;margin:0 auto;align-content:stretch}
.service-bento .sd>:is(.sd-meta,.sd-auto-meta){min-height:44px;align-items:center}
.service-bento .sd:not(.sd-auto)>.sd-panel{justify-content:center}
.service-bento .sd>.sd-footer{margin-top:0;align-self:center}
.service-bento .sd>.sd-auto-disclaimer{align-self:center}
@media(max-width:600px){.service-bento .sd{grid-template-rows:44px minmax(min-content,1fr) 72px}}
@media(max-width:360px){.service-bento-body{flex-basis:256px;min-height:256px}}