/* diensten: CSS van de secties op /diensten/ (docs/prototype/diensten.html, inline <style>).
   Het kruimelpad en de afsluiter staan in styles.css. */
/* ---------- hero: de wegwijzer, getekend in de stijl van de vrachtwagen op de homepage ---------- */
.sp-scene svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font-sans)}
.sp-board{cursor:pointer;outline:none}
.sp-line{font-family:var(--font-serif);font-size:19px;font-weight:600;text-anchor:middle}
.sp-svc{font-size:11.5px;font-weight:600;text-anchor:middle;opacity:.8;letter-spacing:.02em}
.sp-shadow{fill:#000;opacity:.12}
.sp-swing{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.sp-board[data-dir="r"]:hover .sp-swing,.sp-board[data-dir="r"]:focus-visible .sp-swing{transform:translateX(9px) rotate(-1.2deg)}
.sp-board[data-dir="l"]:hover .sp-swing,.sp-board[data-dir="l"]:focus-visible .sp-swing{transform:translateX(-9px) rotate(1.2deg)}
.sp-board:focus-visible polygon:nth-of-type(2){stroke:var(--color-accent);stroke-width:3}
@keyframes sp-in-r{from{transform:rotate(-14deg);opacity:0}60%{transform:rotate(3deg);opacity:1}to{transform:none}}
@keyframes sp-in-l{from{transform:rotate(14deg);opacity:0}60%{transform:rotate(-3deg);opacity:1}to{transform:none}}
.sp-scene.wait .sp-swing{opacity:0}
.sp-scene.go .sp-board[data-dir="r"] .sp-swing{animation:sp-in-r .9s cubic-bezier(.3,1.2,.5,1) both;animation-delay:calc(var(--i) * .11s)}
.sp-scene.go .sp-board[data-dir="l"] .sp-swing{animation:sp-in-l .9s cubic-bezier(.3,1.2,.5,1) both;animation-delay:calc(var(--i) * .11s)}
@media (prefers-reduced-motion:reduce){
.sp-scene .sp-swing{animation:none!important;transition:none}
.sp-scene.wait .sp-swing{opacity:1}
}
/* ---------- de mini-illustraties per dienst ---------- */
.illo{position: relative; overflow: hidden; container-type: inline-size; background: var(--color-paper-2);}
.illo .sc{position: absolute; inset: 0; font-size: 2.6cqw;}
.win{position: absolute; background: #fff; border-radius: .7em; box-shadow: var(--shadow-soft); overflow: hidden;}
.win .bar{display: flex; gap: .35em; align-items: center; padding: .55em .8em; background: #F2EEE6; font-family: var(--font-mono); font-size: .78em; color: var(--color-ink-3);}
.win .bar i{width: .6em; height: .6em; border-radius: 50%; background: var(--color-rule);}
.win .bar span{margin-left: .5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* A: van Excel naar een eigen systeem */
.sw .sheet{left: 5%; top: 9%; width: 52%; transform: rotate(-4deg); border-radius: .35em; font-family: var(--font-mono); font-size: .8em; transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity 1s;}
.sw .sheet .t{background: #1E7145; color: #fff; padding: .45em .7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sw .sheet table{width: 100%; border-collapse: collapse;}
.sw .sheet td{border: 1px solid #E3E3E3; padding: .3em .55em;}
.sw .sheet td.r{color: #C0392B; font-weight: 700;}
.sw .postit{position: absolute; left: 34%; top: 47%; width: 10em; padding: .7em; background: var(--color-postit); font-family: var(--font-hand); font-size: 1.15em; line-height: 1.15; transform: rotate(5deg); box-shadow: 0 .6em 1.2em rgb(25 23 20 / .15); transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity 1s;}
.sw .app{right: 5%; bottom: 7%; width: 64%; z-index: 2; opacity: 0; transform: translateY(1.5em); transition: opacity .7s .5s, transform .7s .5s cubic-bezier(.2,.8,.2,1);}
.sw .app .row{display: grid; grid-template-columns: 1fr auto; gap: .6em; align-items: center; padding: .55em .9em; border-top: 1px solid #F0ECE4; font-size: .92em; opacity: 0; transform: translateX(-.8em); transition: opacity .4s, transform .4s; transition-delay: var(--d);}
.sw .app .pill{font-size: .78em; font-weight: 700; padding: .15em .6em; border-radius: 1em; background: var(--color-warn-soft); color: var(--color-warn);}
.sw .app .pill.ok{background: var(--color-ok-soft); color: var(--color-ok);}
.play .sw .sheet{transform: translate(-6%, -8%) rotate(-8deg); opacity: .4;}
.play .sw .postit{transform: translate(-60%, -20%) rotate(12deg); opacity: .45;}
.play .sw .app{opacity: 1; transform: none;}
.play .sw .app .row{opacity: 1; transform: none;}
/* B: webshop en ERP praten met elkaar */
.erp .shop{left: 4%; top: 14%; width: 33%;}
.erp .ledger{right: 4%; top: 14%; width: 33%;}
.erp .item{display: flex; justify-content: space-between; gap: .4em; padding: .5em .7em; border-top: 1px solid #F0ECE4; font-size: .8em; white-space: nowrap;}
.erp .item b{font-weight: 600;}
.erp .item em{font-style: normal; color: var(--color-ink-3);}
.erp .cta{margin: .6em .8em .8em; padding: .45em; border-radius: 2em; background: var(--color-ink); color: var(--color-paper); text-align: center; font-size: .85em; font-weight: 600;}
.erp .ledger .item.new{background: var(--color-ok-soft);}
.erp .wire{position: absolute; left: 37%; right: 37%; top: 40%; border-top: .18em dashed #9A9182;}
.erp .wire.w2{top: 56%;}
.erp .pk{position: absolute; top: calc(40% - .95em); left: 42%; padding: .3em .7em; border-radius: .4em; font-size: .82em; font-weight: 700; white-space: nowrap; opacity: 0; z-index: 3;}
.erp .pk.out{background: var(--color-accent); color: #fff;}
.erp .pk.in{top: calc(56% - .95em); background: var(--color-blueprint); color: #fff;}
.erp .caption{position: absolute; left: 5%; right: 5%; bottom: 7%; display: flex; justify-content: space-between; font-family: var(--font-hand); font-size: 1.25em; color: var(--color-ink-2);}
@keyframes pk-out{ 0% { left: 36%; opacity: 0; } 10% { opacity: 1; } 45% { left: 50%; opacity: 1; } 55%, 100% { left: 52%; opacity: 0; } }
@keyframes pk-in{ 0%, 45% { left: 52%; opacity: 0; } 55% { opacity: 1; } 90% { left: 38%; opacity: 1; } 100% { left: 36%; opacity: 0; } }
@keyframes flash{ 0%, 50% { background: #fff; } 60%, 100% { background: var(--color-ok-soft); } }
.play .erp .pk.out{animation: pk-out 4.4s ease-in-out infinite;}
.play .erp .pk.in{animation: pk-in 4.4s ease-in-out infinite;}
.play .erp .ledger .item.new{animation: flash 4.4s infinite;}
/* C: een website die meegroeit */
.web .site{left: 7%; right: 7%; top: 10%; bottom: 10%;}
.web .langs{display: flex; gap: .3em; padding: .8em 1em 0;}
.web .langs span{padding: .2em .6em; border-radius: 1em; font-size: .8em; font-weight: 700; color: var(--color-ink-3); border: 1px solid var(--color-rule); transition: all .3s;}
.web .langs span.on{background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper);}
.web .h{padding: .6em 1em 0; font-family: var(--font-serif); font-weight: 600; font-size: 2em; line-height: 1.05; min-height: 2.2em; transition: opacity .25s;}
.web .vid{position: absolute; left: 1.2em; right: 42%; bottom: 1.2em; top: 52%; border-radius: .5em; background: #3A362F; display: grid; place-items: center;}
.web .vid::after{content: ""; border-left: 1.3em solid var(--color-paper); border-top: .8em solid transparent; border-bottom: .8em solid transparent; margin-left: .3em;}
.web .txt{position: absolute; right: 1.2em; left: 62%; top: 54%; display: grid; gap: .5em;}
.web .txt i{height: .55em; border-radius: .3em; background: #ECE6DA;}
.web .edit{position: absolute; right: 1em; top: .7em; padding: .35em .8em; border-radius: 2em; background: var(--color-accent); color: #fff; font-size: .8em; font-weight: 700; opacity: 0; transform: translateY(-.4em); transition: opacity .4s, transform .4s;}
.play .web .edit{opacity: 1; transform: none;}
/* D: technische SEO */
.tseo .urls{left: 5%; top: 9%; width: 62%; font-family: var(--font-mono); font-size: .85em;}
.tseo .u{display: grid; grid-template-columns: 1fr auto; gap: .6em; align-items: center; padding: .45em .8em; border-top: 1px solid #F0ECE4; transition: background-color .4s 1.2s;}
.tseo .code{font-weight: 700; padding: .1em .5em; border-radius: .3em; background: var(--color-ok-soft); color: var(--color-ok);}
.tseo .u.broken .code{background: #F6C9BA; color: #8A2A12;}
.tseo .u.broken .fix{display: none;}
.play .tseo .u.broken{background: var(--color-ok-soft);}
.tseo .stamp{position: absolute; left: 44%; top: 30%; padding: .3em .7em; border: .18em solid var(--color-ok); border-radius: .4em; color: var(--color-ok); font-family: var(--font-mono); font-weight: 700; font-size: .95em; background: rgb(255 255 255 / .9); transform: rotate(-8deg) scale(1.6); opacity: 0; transition: transform .35s cubic-bezier(.3,1.4,.5,1) 1s, opacity .2s 1s; white-space: nowrap;}
.play .tseo .stamp{transform: rotate(-8deg) scale(1); opacity: 1;}
.tseo .wf{right: 5%; bottom: 9%; width: 56%; padding: .2em 0 .8em;}
.tseo .wf .lbl{padding: .5em .9em .2em; font-size: .8em; font-weight: 700; color: var(--color-ink-3);}
.tseo .wf .b{height: .75em; margin: .45em .9em 0; border-radius: .3em; background: var(--color-blueprint); transform-origin: left; width: var(--w); margin-left: calc(.9em + var(--x)); transition: transform 1.2s cubic-bezier(.2,.8,.2,1) 1.4s, margin-left 1.2s cubic-bezier(.2,.8,.2,1) 1.4s;}
.play .tseo .wf .b{transform: scaleX(.45); margin-left: calc(.9em + var(--x) * .3);}
.tseo .note-h{position: absolute; left: 6%; bottom: 10%; width: 32%; font-family: var(--font-hand); font-size: 1.2em; line-height: 1.15; color: var(--color-ink-2);}
/* E: SEO in Aalst */
.lseo .serp{left: 5%; top: 8%; width: 58%; bottom: 8%;}
.lseo .q{margin: .8em; padding: .5em .9em; border: 1px solid var(--color-rule); border-radius: 2em; font-size: .9em; white-space: nowrap; overflow: hidden;}
.lseo .q .caret{display: inline-block; width: 1px; height: 1em; background: var(--color-ink); vertical-align: -.15em; animation: blink 1s steps(1) infinite;}
@keyframes blink{ 50% { opacity: 0; } }
.lseo .res{padding: .5em .9em; border-top: 1px solid #F0ECE4; font-size: .85em;}
.lseo .res b{display: block; color: var(--color-blueprint); font-weight: 600;}
.lseo .res i{display: block; height: .5em; margin-top: .35em; width: 80%; border-radius: .3em; background: #ECE6DA;}
.lseo .res.me b{color: var(--color-accent);}
.lseo .extra{display: flex; flex-wrap: wrap; gap: .3em; margin-top: .4em;}
.lseo .extra span{font-size: .85em; padding: .1em .55em; border-radius: 1em; background: var(--color-ok-soft); color: var(--color-ok); font-weight: 600; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s cubic-bezier(.3,1.4,.5,1); transition-delay: var(--d);}
.play .lseo .extra span{opacity: 1; transform: none;}
.lseo .map{right: 5%; top: 18%; width: 30%; aspect-ratio: 3 / 4; background: #E8EEE9;}
.lseo .map svg{position: absolute; inset: 0; width: 100%; height: 100%;}
.lseo .pin{position: absolute; left: 50%; top: 46%; width: 1.6em; height: 1.6em; margin: -1.6em 0 0 -.8em; border-radius: 50% 50% 50% 0; background: var(--color-accent); transform: rotate(-45deg) translateY(-3em); opacity: 0; transition: transform .6s cubic-bezier(.3,1.5,.5,1) 1.6s, opacity .2s 1.6s;}
.lseo .pin::after{content: ""; position: absolute; left: .5em; top: .5em; width: .6em; height: .6em; border-radius: 50%; background: #fff;}
.play .lseo .pin{transform: rotate(-45deg); opacity: 1;}
/* F: AI en automatisering, een mail wordt een order */
.ai .mail{left: 5%; top: 9%; width: 47%;}
.ai .mail .from{padding: .7em .9em .1em; font-size: .78em; color: var(--color-ink-3);}
.ai .mail .body{padding: .3em .9em 1em; font-size: .9em; line-height: 1.6;}
.ai .mail mark{color: inherit; background: transparent; border-radius: .25em; padding: 0 .15em; transition: background-color .4s; transition-delay: var(--d);}
.play .ai .mail mark{background: var(--color-accent-soft);}
.ai .tag{position: absolute; left: 30%; top: 60%; z-index: 3; padding: .3em .7em; border-radius: .4em; background: var(--color-blueprint); color: #fff; font-size: .8em; font-weight: 700; opacity: 0; transform: scale(.7); transition: opacity .3s .4s, transform .4s cubic-bezier(.3,1.5,.5,1) .4s;}
.play .ai .tag{opacity: 1; transform: none;}
.ai .rec{right: 5%; top: 20%; width: 42%; z-index: 2;}
.ai .f{display: grid; grid-template-columns: 5.2em 1fr; gap: .5em; padding: .5em .9em; border-top: 1px solid #F0ECE4; font-size: .85em;}
.ai .f span{color: var(--color-ink-3);}
.ai .f b{font-weight: 600; white-space: nowrap; opacity: 0; transform: translateX(-.5em); transition: opacity .35s, transform .35s; transition-delay: var(--d);}
.play .ai .f b{opacity: 1; transform: none;}
.ai .ok{margin: .6em .9em .9em; padding: .45em; border-radius: 2em; border: .12em solid var(--color-ink); text-align: center; font-size: .85em; font-weight: 700; transition: background-color .3s 2.4s, color .3s 2.4s, border-color .3s 2.4s;}
.play .ai .ok{background: var(--color-ok); border-color: var(--color-ok); color: #fff;}
.ai .note-h, .plan .note-h{position: absolute; left: 6%; bottom: 9%; width: 40%; font-family: var(--font-hand); font-size: 1.25em; line-height: 1.15; color: var(--color-ink-2);}
/* G: branding en design, één huisstijl op elk scherm */
.brand .spec{left: 5%; top: 9%; bottom: 9%; width: 40%; padding: 1em 1.1em; display: flex; flex-direction: column; justify-content: space-between;}
.brand .spec .aa{font-family: var(--font-serif); font-size: 6.5em; line-height: .9; font-weight: 600;}
.brand .spec .abc{font-family: var(--font-serif); font-size: 1em; color: var(--color-ink-2); letter-spacing: .04em;}
.brand .spec small{font-family: var(--font-mono); font-size: .72em; color: var(--color-ink-3);}
.brand .sw4{right: 5%; top: 9%; width: 47%; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; padding: .8em;}
.brand .sw4 i{aspect-ratio: 1; border-radius: .5em; background: var(--c); transform: scale(0); transition: transform .45s cubic-bezier(.3,1.5,.5,1); transition-delay: var(--d);}
.play .brand .sw4 i{transform: none;}
.brand .ui{right: 5%; bottom: 9%; width: 47%; height: 46%;}
.brand .ui .hd{height: 24%; background: #ECE6DA; transition: background-color .5s 1.2s;}
.play .brand .ui .hd{background: var(--color-ink);}
.brand .ui .tl{margin: .7em .9em 0; font-family: var(--font-serif); font-size: 1.25em; line-height: 1.1; font-weight: 600;}
.brand .ui .bt{position: absolute; left: .9em; bottom: .9em; padding: .35em .9em; border-radius: 2em; background: #ECE6DA; color: transparent; font-size: .8em; font-weight: 700; transition: background-color .5s 1.5s, color .5s 1.5s;}
.play .brand .ui .bt{background: var(--color-accent); color: #fff;}
/* H: strategie en advies, een plan in drie kolommen */
.plan .rm{left: 5%; right: 5%; top: 12%; bottom: 22%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; padding: .9em;}
.plan .rm-h{font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-3);}
.plan .rm-c{margin-top: .55em; padding: .55em .65em; border-radius: .3em; background: var(--color-postit); font-family: var(--font-hand); font-size: 1.05em; line-height: 1.1; box-shadow: 0 .3em .6em rgb(25 23 20 / .1); opacity: 0; transform: translateY(-.8em) rotate(var(--r)); transition: opacity .4s, transform .5s cubic-bezier(.3,1.4,.5,1); transition-delay: var(--d);}
.plan .rm-c.b{background: var(--color-accent-soft);}
.plan .rm-c.c{background: #DDE5F0;}
.play .plan .rm-c{opacity: 1; transform: rotate(var(--r));}
/* E2: GEO, een AI-antwoord dat jouw site als bron noemt */
.geo .ans{right: 5%; top: 14%; width: 33%;}
.geo .ans .lines{display: grid; gap: .45em; padding: .7em .8em .4em;}
.geo .ans .lines i{height: .5em; border-radius: .3em; background: #ECE6DA;}
.geo .src{display: inline-block; margin: .3em .8em .9em; padding: .15em .6em; border-radius: 1em; background: var(--color-ok-soft); color: var(--color-ok); font-size: .78em; font-weight: 600; white-space: nowrap; opacity: 0; transform: scale(.8); transition: opacity .3s 1.8s, transform .4s cubic-bezier(.3,1.5,.5,1) 1.8s;}
.play .geo .src{opacity: 1; transform: none;}
/* ---------- de zes dienstkaarten: een bento in de kleuren van de wegwijzer ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.svc{grid-column:span 12;position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:28px;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;scroll-margin-top:96px;--fg:var(--color-ink);--tag:rgb(25 23 20 / .08);color:var(--fg)}
.svc:hover{transform:translateY(-6px);box-shadow:0 30px 50px -28px rgb(25 23 20 / .55)}
.svc:has(.svc-t a:focus-visible){outline:2px solid var(--color-accent);outline-offset:4px}
.s1{background:var(--color-ink);--fg:var(--color-paper);--tag:rgb(255 255 255 / .1)}
.s2{background:var(--color-accent-strong);--fg:#fff;--tag:rgb(255 255 255 / .18)}
.s3{background:var(--color-postit)}
.s4{background:var(--color-blueprint);--fg:#fff;--tag:rgb(255 255 255 / .14)}
.s5{background:#CDBFA6}
.s6{background:var(--color-card);outline:1.5px dashed var(--color-ink-3);outline-offset:-10px}
@media (min-width:700px){
.s1,.s2{grid-column:span 6}
.s3,.s4{grid-column:span 6}
.s5{grid-column:span 12}
}
@media (min-width:1080px){
.svc-grid{gap:20px}
.s1{grid-column:span 7}
.s2{grid-column:span 5}
.s3,.s4,.s5{grid-column:span 4}
.s6{grid-column:span 12;display:grid;grid-template-columns:1fr 1.15fr;align-items:center}
}
.svc-body{position:relative;padding:26px 28px 6px}
.s6 .svc-body{padding-bottom:26px}
.svc-top{display:flex;align-items:center;justify-content:space-between}
.svc-n{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.06em;opacity:.65}
.svc-go{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid currentColor;transition:background .3s,color .3s,transform .45s cubic-bezier(.3,1.4,.5,1)}
.svc-go svg{width:20px;height:20px}
.svc:hover .svc-go{background:var(--fg);color:var(--svc-bg,var(--color-ink));transform:rotate(-45deg)}
.s1:hover .svc-go{color:var(--color-ink)}
.s2:hover .svc-go{color:var(--color-accent-strong)}
.s3:hover .svc-go{color:var(--color-postit)}
.s4:hover .svc-go{color:var(--color-blueprint)}
.s5:hover .svc-go{color:#CDBFA6}
.s6:hover .svc-go{color:var(--color-card)}
.svc-t{margin-top:18px;font-size:clamp(28px,2.6vw,38px);line-height:1.02;letter-spacing:-.015em;color:var(--fg);text-wrap:balance}
.s1 .svc-t,.s2 .svc-t{font-size:clamp(32px,3.4vw,50px)}
.svc-t a{color:inherit;text-decoration:none;outline:none}
.svc-t a::after{content:"";position:absolute;inset:0;z-index:3}
.svc-l{margin-top:10px;max-width:40ch;font-size:16px;line-height:1.45;opacity:.85}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.svc-tags li{border-radius:999px;background:var(--tag);padding:5px 11px;font-size:12.5px;font-weight:600}
.svc-sub{position:relative;z-index:4;margin-top:14px;font-size:13.5px;opacity:.85}
.svc-sub a{font-weight:700;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:4px}
.svc .svc-ill{background:transparent;color:var(--color-ink);margin-top:auto;aspect-ratio:16/10;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.svc:hover .svc-ill{transform:scale(1.04) translateY(-4px)}
.s1 .svc-ill,.s2 .svc-ill{aspect-ratio:16/9}
.s6 .svc-ill{aspect-ratio:16/8}
.svc .svc-ill .win{box-shadow:0 18px 34px -16px rgb(0 0 0 / .45)}
/* op mobiel compacter: de wegwijzer toont de zes diensten al, dus labels en sublinks pas vanaf 700px */
@media (max-width:699px){
.svc-tags,.svc-sub{display:none}
.svc-body{padding:20px 20px 4px}
.s6 .svc-body{padding-bottom:20px}
.svc-t,.s1 .svc-t,.s2 .svc-t{margin-top:12px;font-size:28px}
.svc-l{margin-top:6px;font-size:15px}
.svc-go{width:38px;height:38px}
.svc{border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
.svc,.svc .svc-ill,.svc-go{transition:none}
.svc:hover,.svc:hover .svc-ill{transform:none}
}
/* ---------- zo hangen ze samen ---------- */
.samen-img{position:relative;display:block;overflow:hidden;border-radius:24px;aspect-ratio:16/10;background:#000}
.samen-img img:first-child{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.85);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.samen-img:hover img:first-child{transform:scale(1.04)}
.samen-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(25 23 20 / .6),transparent 40%)}
.samen-logo{position:absolute;top:22px;left:24px;z-index:1;width:auto}
.samen-chain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.samen-chain li{position:relative;border-radius:14px;background:rgb(255 255 255 / .06);border:1px solid rgb(255 255 255 / .12);padding:14px 12px}
.samen-chain li:nth-child(odd)::after{content:"";position:absolute;top:50%;right:-13px;width:14px;border-top:2px dashed rgb(255 255 255 / .35)}
.samen-chain b{display:block;font-family:var(--font-serif);font-size:19px;color:var(--color-paper)}
.samen-chain span{display:block;margin-top:4px;font-size:11.5px;color:var(--color-accent-soft)}
/* ---------- klantlogo's ---------- */
.logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px;border-top:1px solid var(--color-rule);padding-top:26px}
.logo-row img{display:block;width:auto;max-width:none;filter:brightness(0);opacity:.45;transition:opacity .25s}
.logo-row li:hover img{opacity:.85}
.logo-row-sm{gap:16px 30px;border-top:0;padding-top:0}
.logo-row-sm img{opacity:.35}
/* ---------- twijfel je? ---------- */
.twijfel{display:flex;flex-direction:column;gap:10px;border-radius:18px;border:1.5px solid var(--color-ink);padding:20px 22px;transition:transform .25s}
.twijfel:hover{transform:translateY(-3px)}
.twijfel b{font-family:var(--font-serif);font-size:21px;line-height:1.2}
.twijfel span{font-size:14.5px;font-weight:600}
.twijfel-dark{background:var(--color-ink);color:var(--color-paper)}
.twijfel-dark span{color:var(--color-accent-soft)}
/* ---------- welke past bij mij ---------- */
.tree-level{position: relative; padding-left: 26px; border-left: 2px solid var(--color-rule);}
.tree-level::before{content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent);}
@media (prefers-reduced-motion: reduce){
.sw .sheet{transform: translate(-6%, -8%) rotate(-8deg); opacity: .4;}
.sw .postit{opacity: .45; transform: translate(-60%, -20%) rotate(12deg);}
.sw .app, .sw .app .row, .web .edit, .lseo .extra span, .tseo .stamp{opacity: 1; transform: none;}
.tseo .stamp{transform: rotate(-8deg);}
.tseo .u.broken{background: var(--color-ok-soft);}
.tseo .wf .b{transform: scaleX(.45);}
.lseo .pin{transform: rotate(-45deg); opacity: 1;}
.erp .pk.out{opacity: 1; left: 42%;}
.erp .pk.in{opacity: 1; left: 42%;}
.ai .f b, .ai .tag, .brand .sw4 i, .plan .rm-c, .geo .src{opacity: 1; transform: none;}
.plan .rm-c{transform: rotate(var(--r));}
}
/* gsm: tekst in de illustratie leesbaar houden */
@media (max-width:640px){
.svc .svc-ill,.s1 .svc-ill,.s2 .svc-ill,.s6 .svc-ill{aspect-ratio:1/1}
.illo .sc{font-size:max(10px,2.6cqw)}
}