/* Moving work, not a carousel of static screenshots. All data is illustrative. */
.kinetic-demo { color:#30342c; container-type:inline-size; min-width:0; }
.kinetic-demo [hidden] { display:none!important; }
.kinetic-top { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:11px; color:#685e50; margin-bottom:17px; }
.kinetic-top > span:first-child { display:flex; align-items:center; gap:8px; }
.kinetic-top i { width:7px; height:7px; border-radius:50%; background:#75895e; }
.kinetic-top > span:last-child { font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.kinetic-choices { display:flex; gap:5px; border:1px solid #e2d3c2; background:#f5eee6; padding:5px; border-radius:12px; margin-bottom:18px; }
.kinetic-choices button { flex:1; min-height:42px; padding:7px 12px; background:transparent; color:#655749; border:0; border-radius:8px; font:inherit; font-size:12px; cursor:pointer; }
.kinetic-choices button[aria-pressed=true] { background:#fffdf8; color:#563f2e; box-shadow:0 2px 6px #60401f16; font-weight:600; }
.kinetic-title { font-size:21px; font-weight:600; line-height:1.35; letter-spacing:-.025em; margin:0 0 20px; max-width:30em; }
.kinetic-board { position:relative; background:#f1dccb; background-image:radial-gradient(#a9784d33 .8px,transparent .8px); background-size:17px 17px; border:1px solid #dbbaa0; border-radius:18px; padding:22px; overflow:hidden; isolation:isolate; }
.kinetic-track { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:21px; list-style:none; margin:0; padding:0; }
.kinetic-stop { min-width:0; }
.kinetic-stop > button,.kinetic-step-static { display:flex; align-items:center; gap:7px; width:100%; min-height:42px; margin:0 0 14px; border:0; border-radius:9px; padding:6px 8px; background:#f7eade; color:#76543b; font:inherit; font-size:12px; text-align:left; }
.kinetic-stop > button { cursor:pointer; }
.kinetic-stop > button > span { display:grid; place-items:center; width:22px; height:22px; flex:none; border:1px solid #ceb092; border-radius:50%; font-size:9px; }
.kinetic-stop.is-current > button { background:#3d4a32; color:#fff; }
.kinetic-stop.is-current > button > span { border-color:#8d9d7e; color:#e7eddf; }
.kinetic-stop.is-done > button { background:#e4ead9; color:#46583a; }
.kinetic-dock { min-height:174px; border:1px dashed #c5a484; border-radius:12px; }
.kinetic-card { width:100%; padding:17px; border:1px solid #cbbba7; border-radius:11px; background:#fffdf7; box-shadow:0 7px 18px #69472512; min-height:174px; }
.kinetic-card__top { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.kinetic-card__top > span { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; background:#f5e6d7; color:#8c5531; flex:none; }
.kinetic-card__top small { font-size:10px; color:#6c5c4d; }
.kinetic-card__title { display:block; font-size:16px; line-height:1.4; letter-spacing:-.02em; font-weight:600; margin-bottom:13px; }
.kinetic-field { display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-top:1px solid #e6dfd1; padding:7px 0 0; margin:7px 0 0; font-size:12px; line-height:1.6; }
.kinetic-field > span { color:#736453; flex:none; }
.kinetic-field > strong { color:#414637; font-weight:500; text-align:right; }
.kinetic-token { position:absolute; left:0; top:0; z-index:2; pointer-events:none; will-change:transform; }
.kinetic-demo.is-ready .kinetic-dock > .kinetic-card { visibility:hidden; }
.kinetic-demo.is-ready .is-done .kinetic-dock > .kinetic-card { visibility:visible; box-shadow:none; background:#faf4e9; border-color:#d7c7b2; }
.kinetic-demo.is-ready .kinetic-step-static { display:none; }
.kinetic-token.is-result .kinetic-card { border-color:#a3b28d; background:#fbfdf5; }
.kinetic-token.is-result .kinetic-card__top > span { background:#e6edd9; color:#4e663b; }
.kinetic-note { font-size:11px; line-height:1.7; color:#6e6252; margin:12px 0 0; }
.kinetic-footer { display:flex; flex-wrap:wrap; gap:12px 25px; align-items:center; justify-content:space-between; margin-top:14px; }
.kinetic-footer > p { font-size:12px; color:#58634a; margin:0; min-height:20px; }
.kinetic-footer > div { display:flex; align-items:center; gap:8px; }
.kinetic-trigger,.kinetic-pause { border:1px solid #bdc8ae; border-radius:22px; background:#f4f7ed; padding:10px 14px; min-height:44px; color:#405235; font:inherit; font-size:11px; cursor:pointer; }
.kinetic-trigger { background:#37432e; color:#fff; border-color:#37432e; }
.kinetic-trigger:hover { background:#4c5b3e; }
.kinetic-pause { display:flex; gap:6px; align-items:center; }
.kinetic-demo :focus-visible { outline:3px solid #8b492e; outline-offset:3px; }
.kinetic-accessible { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.kinetic-demo:not(.is-ready) .kinetic-dock { border:0; }
.kinetic-demo[data-running=true] .kinetic-top i { animation:kinetic-pulse 1.6s ease-in-out infinite; }
@keyframes kinetic-pulse { 50% { box-shadow:0 0 0 5px #75895e20; } }
/* The same live process becomes a vertical route on smaller panels. */
@container(max-width:700px) {
 .kinetic-title { font-size:18px; margin-bottom:16px; min-height:49px; }
 .kinetic-board { padding:16px; }
 .kinetic-track { grid-template-columns:1fr; gap:15px; }
 .kinetic-stop { display:grid; grid-template-columns:83px 1fr; align-items:center; gap:13px; }
 .kinetic-stop > button,.kinetic-step-static { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:9px; font-size:10px; text-align:center; margin:0; min-height:76px; padding:8px 3px; background:#f7eade80; }
 .kinetic-dock,.kinetic-card { min-height:140px; }
 .kinetic-card { padding:12px 14px; }
 .kinetic-card__top { margin-bottom:8px; gap:6px; }
 .kinetic-card__top > span { width:23px; height:23px; }
 .kinetic-card__top svg { width:16px; height:16px; }
 .kinetic-card__top small { font-size:10px; }
 .kinetic-card__title { font-size:14px; margin-bottom:9px; }
 .kinetic-field { font-size:11px; gap:7px; margin-top:5px; padding-top:5px; }
 .kinetic-field > span { max-width:36%; white-space:normal; }
 .kinetic-field > strong { max-width:64%; }
 .kinetic-footer > p { font-size:11px; min-height:36px; }
 .kinetic-footer > div { width:100%; justify-content:space-between; }
 .kinetic-trigger,.kinetic-pause { font-size:10px; padding:9px 12px; }
}
@container(max-width:360px) {
 .kinetic-top { font-size:10px; }
 .kinetic-top > span:last-child { font-size:9px; }
 .kinetic-board { padding:13px; }
 .kinetic-stop { grid-template-columns:64px 1fr; gap:10px; }
 .kinetic-card { padding:11px; }
 .kinetic-card__title { font-size:13px; }
 .kinetic-card__top small { font-size:10px; }
 .kinetic-field { font-size:11px; }
 .kinetic-title { font-size:17px; }
 .kinetic-note { font-size:10px; }
 .kinetic-choices button { font-size:11px; padding:7px; }
}
.services-live { padding:30px 0 55px; background:#fcf8f4; border-top:1px solid #f0e5da; }
.services-live .wrap { max-width:1180px; }
.services-live .kinetic-title { font-size:29px; max-width:none; }
.services-live .kinetic-choices { max-width:460px; }
.services-live__head { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; margin-bottom:25px; }
.services-live__head h2 { font-size:30px; line-height:1.2; letter-spacing:-.035em; }
.services-live__head p { max-width:340px; color:var(--muted); font-size:14px; line-height:1.8; }
.compact-areas { padding:50px 0; }
.compact-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:23px; }
.compact-groups article { padding:25px; border:1px solid #e1d7c7; border-radius:13px; background:#fffdf8; }
.compact-groups article:nth-child(2) { background:#f1f4e9; border-color:#d5ddc8; }
.compact-groups h2 { font-size:24px; line-height:1.25; letter-spacing:-.03em; margin-bottom:15px; }
.compact-groups > article > p { font-size:14px; line-height:1.8; color:var(--muted); }
.compact-groups .calm-service-links { padding:0; margin:20px 0 0; }
.compact-groups .calm-service-links .link-arrow { font-size:12px; }
.compact-service .dhero .h1 { font-size:clamp(34px,3.5vw,49px); }
.compact-service .dhero .page-head__lead { max-width:430px; }
.compact-service .dcap h3 { font-size:19px; }
.compact-service .dcap p { font-size:14px; line-height:1.8; }
.compact-service .dpraktijk { padding:45px 0; }
.compact-service .dstappen { margin-top:20px; }
.compact-service .short-approach { margin-top:20px; }
.short-approach { border:1px solid #d8d7ca; border-radius:12px; padding:0 24px; background:#fcfcf8; }
.short-approach summary { cursor:pointer; padding:18px 0; font-weight:600; font-size:15px; }
.short-approach > p { color:var(--muted); line-height:1.8; font-size:14px; padding-bottom:20px; margin:0; }
.compact-branches .branch-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; padding-bottom:50px; }
.compact-branches .br { border:1px solid #d9dbcd; border-radius:14px; padding:25px; margin:0; background:#fbfcf7; scroll-margin-top:115px; }
.compact-branches .br__head { gap:15px; margin-bottom:18px; }
.compact-branches .br__head .h2 { font-size:24px; }
.compact-branches .br__ico { width:42px; height:42px; border-radius:11px; }
.compact-branches .br > h3 { font-size:18px; line-height:1.4; margin-bottom:12px; }
.compact-branches .br > p { font-size:14px; line-height:1.8; color:var(--muted); margin-bottom:18px; }
.compact-branches .br details { border-top:1px solid #d8dece; padding-top:13px; }
.compact-branches .br summary { font-size:12px; cursor:pointer; font-weight:600; }
.compact-branches .br details ul { display:flex; flex-wrap:wrap; gap:10px 16px; list-style:none; padding:13px 0 0; font-size:12px; }
.compact-branches .br__cta { margin:20px 0 0; padding:0; border:0; }
.compact-solutions .sol { padding:35px 0; }
.compact-solutions .sol__head { margin-bottom:20px; }
.compact-solutions .sol__head .h2 { font-size:29px; }
.compact-solutions .sol__example { margin-bottom:20px; font-size:15px; line-height:1.8; }
.compact-solutions .compact-control { margin:20px 0; color:var(--muted); font-size:13px; line-height:1.8; }
.compact-solutions .sol .btn { font-size:12px; min-height:44px; }
.compact-scan .scan-summary { margin:30px 0 0; padding:20px 24px; border-left:3px solid #a9b793; border-radius:0 10px 10px 0; background:#f1f4eb; font-size:14px; color:#536146; line-height:1.8; }
.compact-scan .scan-summary p { margin:0; }
.compact-scan .steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.compact-scan .step { display:block; padding:0; }
.compact-scan .step:not(:last-child)::before { display:none; }
.compact-scan .step__n { margin-bottom:14px; }
.compact-scan .step h3 { font-size:18px; margin-bottom:9px; }
.compact-scan .step p { font-size:13px; }
@media(max-width:900px) {
 .compact-groups { grid-template-columns:1fr; }
 .compact-groups article { padding:27px; }
 .compact-branches .branch-list { grid-template-columns:1fr; }
 .compact-scan .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .services-live__head { display:block; }
 .services-live__head p { margin-top:15px; }
}
@media(max-width:600px) {
 .services-live { padding:30px 0 40px; }
 .services-live .kinetic-title { font-size:21px; }
 .compact-areas { padding:35px 0; }
 .compact-scan .steps { grid-template-columns:1fr; }
 .compact-scan .step { display:grid; grid-template-columns:40px 1fr; gap:17px; }
 .compact-branches .br { padding:23px; }
 .compact-branches .br__head .h2 { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) {
 .kinetic-demo * { animation:none!important; transition:none!important; }
}