/* Eigenarenblok (.cmo) – vervangt "Proudly working with" */
.cmo{--ink:#181818;--mute:#7a7a7a;--soft:#9a9a9a;--line:#d6d6d6;--tint:#f2f2f2;--gold:#f4c23f;--ok:#3a9b5c;--grey:#a5a5a5;--disp:CmBarlow,Barlow,"Helvetica Neue",Helvetica,Arial,sans-serif;--body:Barlow,CmBarlow,"Helvetica Neue",Arial,sans-serif;background:#fff;color:var(--ink);font-family:var(--body);padding:80px 0;overflow-x:clip}
.cmo *{box-sizing:border-box}
.cmo-in{max-width:1240px;margin:0 auto;padding:0 20px}
.cmo p,.cmo h2,.cmo h4{margin:0;padding:0}
.cmo .cmo-eb{font:600 15px var(--body);letter-spacing:3px;color:#a8a8a8;text-transform:uppercase}
.cmo-hr{height:1px;background:#ddd;margin:18px 0 22px}
.cmo-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:end;margin-bottom:48px}
.cmo h2{font:500 clamp(30px,3.4vw,45px)/1.3 var(--body)!important;letter-spacing:0;color:var(--ink)!important;text-transform:none!important;text-wrap:balance}
.cmo h2 em{font-style:normal;color:#b5b5b5}
.cmo .cmo-lead{color:var(--mute);font-size:19px;line-height:1.6}
.cmo-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cmo-tl{padding:30px 30px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0;background:#fff}
.cmo-vis{height:150px;display:flex;align-items:center;margin-bottom:22px}
.cmo h4{font:600 24px/1.2 var(--disp)!important;color:var(--ink)!important;margin:0 0 6px!important;display:flex;align-items:center;gap:10px;text-transform:none!important;letter-spacing:0!important}
.cmo-tl p{color:var(--mute);font-size:15px;line-height:1.5}
.cmo-ai{font:700 10px/1 var(--disp);letter-spacing:.14em;background:var(--gold);color:var(--ink);padding:4px 7px}
.cmo-dark{background:var(--ink)}.cmo-dark h4{color:#fff!important}.cmo-dark p{color:#a5a5a5}
.cmo .cmo-small{font-size:11px;color:#777;margin-top:8px}
.cmo-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--line);border-top:0;padding:22px 30px}
.cmo-foot span{color:var(--mute);font-size:15px}
.cmo .cmo-btn{background:var(--ink);color:#fff!important;font:600 15px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;padding:17px 28px;text-decoration:none!important;border-radius:0;transition:background .2s}
.cmo .cmo-btn:hover{background:#333}
.cmo .cmo-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.cmo-js .cmo-tl{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.cmo-js .cmo-tl.in{opacity:1;transform:none}
.cmo-js .cmo-tl:not(.in){will-change:opacity,transform}
.cmo-off *,.cmo-off *::before,.cmo-off *::after{animation-play-state:paused!important}
.cmo-tl{contain:layout paint}
.cmo-js .cmo-head>*{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.cmo-js .cmo-head.in>*{opacity:1;transform:none}.cmo-js .cmo-head.in>*:nth-child(2){transition-delay:.15s}

.cmo-logos{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;width:100%;align-items:center}
.cmo-logos img{opacity:.38;filter:grayscale(1);max-height:26px!important;max-width:110px!important;width:auto!important;height:auto}
.cmo-logos img.vr{max-height:30px!important}
.cmo-logos span{font:500 24px Arial,sans-serif;color:#9a9a9a}.cmo-logos .more{font:600 18px var(--disp)}.cmo-logos .more b{font-weight:600}
.cmo-tl.on .cmo-logos>*{animation:cmoPop .5s both;animation-delay:calc(var(--i)*.14s)}
.cmo-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:100%}.cmo-cal i{height:28px;background:var(--tint)}
.cmo-cal i[data-c]{background:var(--c)}
.cmo-cal i[data-c=a]{--c:var(--ink)}.cmo-cal i[data-c=k]{--c:var(--gold)}.cmo-cal i[data-c=e]{--c:var(--grey)}
.cmo-tl.on .cmo-cal i[data-c]{animation:cmoFill .35s both;animation-delay:calc(var(--i)*.06s)}
.cmo-tl.on .cmo-cal i.new{animation:cmoFill .3s both 1.6s,cmoFlash .9s 1.6s}
.cmo-chart{width:100%;height:110px;overflow:visible}
.cmo-chart .tg{font:600 12px var(--disp);fill:var(--ok)}
.cmo-tl.on .cmo-chart .ln{stroke-dasharray:420;animation:cmoDraw 1.6s ease both}
.cmo-tl.on .cmo-chart .dot{animation:cmoPop .4s 1.4s both;transform-origin:260px 22px}
.cmo-tl.on .cmo-chart .halo{animation:cmoPulse 1.8s 1.6s infinite}
.cmo-tl.on .cmo-chart .tg{animation:cmoUp .5s 1.7s both}
.cmo-bub{display:grid;gap:8px;width:100%;font-size:13px;position:relative}
.cmo-bub>div{padding:10px 14px;max-width:82%;background:var(--tint);color:#555;line-height:1.4}
.cmo-bub .me{justify-self:end;background:var(--ink);color:#fff}.cmo-bub small{justify-self:end;font-size:11px;color:var(--soft)}
.cmo-bub .typing{position:absolute;right:0;top:52px;display:flex;gap:4px;padding:12px 14px;background:var(--ink);opacity:0}
.cmo-bub .typing b{width:6px;height:6px;border-radius:50%;background:#fff;animation:cmoDots 1s infinite}.cmo-bub .typing b:nth-child(2){animation-delay:.15s}.cmo-bub .typing b:nth-child(3){animation-delay:.3s}
.cmo-tl.on .cmo-bub .q{animation:cmoUp .4s both .1s}
.cmo-tl.on .cmo-bub .typing{animation:cmoTyping 1.3s both .7s}
.cmo-tl.on .cmo-bub .me{animation:cmoUp .4s both 2s}.cmo-tl.on .cmo-bub small{animation:cmoUp .4s both 2.3s}
.cmo-tasks{display:grid;gap:8px;width:100%;font-size:15px;color:#555}
.cmo-tasks div{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;background:#f5f5f5}
.cmo-tasks em{font:600 11px var(--disp);font-style:normal;letter-spacing:.12em;text-transform:uppercase;min-width:66px;text-align:right}
.cmo-tasks em::before{content:"Planned";color:#c99a12}.cmo-tasks .done em::before{content:"Done";color:var(--ok)}
.cmo-tasks .wait em::before{content:"…";color:var(--soft)}
.cmo-tl.on .cmo-tasks div{animation:cmoUp .4s both;animation-delay:calc(var(--i)*.2s)}
.cmo-vf{width:100%;display:grid;gap:12px}.cmo-vf div{display:flex;align-items:center;gap:12px;font-size:15px;color:#555}
.cmo-vf i{width:22px;height:22px;background:var(--ink);display:grid;place-items:center;flex:0 0 22px}
.cmo-vf svg{width:12px;height:12px}.cmo-vf path{stroke:var(--gold);stroke-width:3;fill:none;stroke-dasharray:20}
.cmo-tl.on .cmo-vf path{animation:cmoTick .35s both;animation-delay:calc(.3s + var(--i)*.45s)}
.cmo-tl.on .cmo-vf div{animation:cmoUp .35s both;animation-delay:calc(var(--i)*.45s)}
.cmo-stars{color:var(--gold);font-size:44px;letter-spacing:6px;display:flex;line-height:1}
.cmo-stars span{display:inline-block}
.cmo-tl.on .cmo-stars span{animation:cmoStar .45s both;animation-delay:calc(var(--i)*.16s)}
.cmo-num small{display:block;font-size:13px;color:var(--soft)}.cmo-num b{font:600 64px/1.1 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cmo-num .up{font:600 13px var(--disp);color:var(--ok);margin-left:8px}.cmo-tl.on .cmo-num .up{animation:cmoUp .4s 1.4s both}
.cmo-fee{display:flex;align-items:baseline;gap:18px}.cmo-fee b{font:600 84px/1 var(--disp);color:var(--gold);font-variant-numeric:tabular-nums;min-width:2.3ch}
.cmo-fee s{font:500 30px var(--disp);color:#8a8a8a;text-decoration:none;position:relative}
.cmo-fee s::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:2px;background:#8a8a8a;transform-origin:left}
.cmo-tl.on .cmo-fee s::after{animation:cmoStrike .5s .3s both}

@keyframes cmoPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes cmoUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cmoFill{from{background:var(--tint);transform:scaleY(.4)}to{background:var(--c);transform:none}}
@keyframes cmoFlash{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 3px rgba(244,194,63,.5)}}
@keyframes cmoDraw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
@keyframes cmoPulse{0%{r:6;opacity:.6}100%{r:20;opacity:0}}
@keyframes cmoDots{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes cmoTyping{0%{opacity:0}15%,85%{opacity:1}100%{opacity:0}}
@keyframes cmoTick{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
@keyframes cmoStar{0%{color:#e8e8e8;transform:scale(.5)}60%{transform:scale(1.25)}100%{color:var(--gold);transform:none}}
@keyframes cmoStrike{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:980px){.cmo-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.cmo-tl:last-child{grid-column:1/-1}.cmo-head{grid-template-columns:minmax(0,1fr);gap:18px}}
@media (max-width:600px){.cmo-js .cmo-tl{transform:translateY(20px)}.cmo-bub>div{max-width:88%}.cmo{padding:56px 0}.cmo-tiles{grid-template-columns:minmax(0,1fr)}.cmo-tl{padding:26px 22px}.cmo-vis{height:auto;min-height:130px}.cmo-num b{font-size:54px}.cmo-fee b{font-size:72px}.cmo-foot{padding:20px 22px}.cmo .cmo-btn{width:100%;text-align:center}}
@media (max-width:360px){.cmo-tl{padding:22px 16px}.cmo-in{padding:0 14px}.cmo-fee b{font-size:60px}.cmo-num b{font-size:46px}.cmo h4{font-size:21px!important}.cmo-stars{font-size:38px;letter-spacing:4px}.cmo-tasks{font-size:14px}}
@media (min-width:1600px){.cmo-in{max-width:1320px}}
@media (prefers-reduced-motion:reduce){.cmo *,.cmo *::before,.cmo *::after{animation:none!important;transition:none!important}.cmo-js .cmo-tl,.cmo-js .cmo-head>*{opacity:1;transform:none}.cmo-bub .typing{display:none}}
/* 1.12.8 alle grote platformen bij naam, daarna "+ many more" */
.cmo-logos.cmo-names{grid-template-columns:1fr 1fr;gap:9px 22px}
.cmo-names span{font:600 16px/1.2 var(--disp)!important;color:#8f8f8f!important;letter-spacing:0}
.cmo-names .more{grid-column:1/-1;color:var(--ink)!important;font-size:15px!important;margin-top:4px}