/* Case-element van hatch-v2.web.app/voorbeelden, afgeschermd onder .hc */
.hc{--ink:#1f0a51;--purple:#6524e2;--purple-600:#490bbe;--p100:#f0e8ff;--p200:#deccff;--p300:#bd9bff;--p400:#925afe;--border:#e8e6f2;--muted:#5d6c7b;--muted-2:#758696;--radius:1.1rem;--radius-sm:.75rem;--font:var(--font-body);--font-x:var(--font-display)}
.hc .arrowlink{display:inline-flex;align-items:center;gap:8px;color:var(--purple);font-weight:600;text-decoration:none;white-space:nowrap;font-size:.98rem}
.hc .arrowlink svg{width:14px;height:14px;transition:transform .25s}
.hc .arrowlink:hover svg{transform:translateX(4px)}
.hc /* cases */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hc .case{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s ease-out,box-shadow .35s ease-out}
.hc .case:hover{transform:translateY(-4px);box-shadow:0 30px 50px -28px rgba(31,10,81,.35)}
.hc .case__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--p100)}
.hc .case__media img,.hc .case__media video{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hc .case:hover .case__media img,.hc .case:hover .case__media video{transform:scale(1.03)}
.hc .case__tag{position:absolute;left:14px;top:14px;z-index:2;background:var(--purple);color:#fff;font-size:.74rem;font-weight:600;padding:6px 12px;border-radius:999vw}
.hc .case__body{padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.hc .case__badge{position:absolute;left:14px;bottom:14px;z-index:2;width:58px;height:58px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -8px rgba(31,10,81,.45);padding:11px}
.hc .case__badge img{max-width:100%;max-height:100%;object-fit:contain}
.hc .case__badge.is--cover{padding:0;overflow:hidden}
.hc .case__badge.is--cover img{width:100%;height:100%;object-fit:cover;object-position:left center}
.hc .case h3{font-size:1.28rem;line-height:1.18}
.hc .case__result{position:relative;background:var(--ink);border-radius:0;padding:18px 20px 18px;margin:0;overflow:hidden;isolation:isolate;height:184px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.hc .case__result::before{content:"";position:absolute;right:-30%;top:-60%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(146,90,254,.4),transparent 68%);z-index:-1;animation:rglow 8s ease-in-out infinite}
.hc .case__result[data-anim="dots"],.hc .case__result[data-anim="staged"],.hc .case__result[data-anim="count"],.hc .case__result[data-anim="words"]{flex-direction:row;align-items:center;gap:14px}
.hc .rmain{flex:1 1 auto;min-width:0}
.hc .case__result b{display:block;font-size:2.6rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff}
.hc .case__result b i{font-style:normal;color:var(--p300);display:inline-block}
.hc .rlabel{display:block;margin-top:7px;font-weight:600;font-size:.94rem;color:#e6ddfb;max-width:24ch;line-height:1.35}
.hc .rlabel u,.hc .dcase__result span u{text-decoration:none;font-weight:400;color:#a893dd}
.hc .rrace{display:flex;gap:16px;margin-left:auto;flex:none;align-items:flex-end}
.hc .rrace__col{display:flex;flex-direction:column;align-items:center;gap:7px}
.hc .rrace__col i{position:relative;width:12px;height:64px;border-radius:6px;background:rgba(255,255,255,.13);overflow:hidden}
.hc .rrace__col u{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:6px;text-decoration:none;display:block}
.hc .rrace__col u.is--old{background:#6c52aa}
.hc .rrace__col u.is--new{background:#bd9bff}
.hc .rrace__col em{font-style:normal;font-size:.64rem;font-weight:600;color:#a893dd}
.hc .rdots{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-left:auto;flex:none}
.hc .rdots i{width:9px;height:9px;border-radius:50%;background:var(--p400);box-shadow:0 0 6px rgba(146,90,254,.6)}
.hc .case__result b.rstaged{display:flex;align-items:center;gap:12px}
.hc .rstaged em{font-style:normal}
.hc .rstaged .r1{color:var(--p300);text-shadow:0 0 24px rgba(189,155,255,.55)}
.hc .rarr{width:34px;height:16px;flex:none;color:var(--p300)}
.hc .rarr path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hc .rmerge{position:relative;width:100px;height:62px;margin-left:auto;flex:none}
.hc .rmerge i{position:absolute;border-radius:50%;background:var(--p300)}
.hc .rmerge i:nth-child(1){left:8px;top:6px;width:10px;height:10px}
.hc .rmerge i:nth-child(2){left:78px;top:2px;width:12px;height:12px}
.hc .rmerge i:nth-child(3){left:12px;top:46px;width:9px;height:9px}
.hc .rmerge i:nth-child(4){left:80px;top:44px;width:11px;height:11px}
.hc .rmerge u{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--p400);box-shadow:0 0 20px rgba(146,90,254,.85);opacity:0}
.hc .case p{color:var(--muted);font-size:.95rem;line-height:1.5;flex:1}
.hc .case__foot{display:flex;align-items:center;padding-top:16px;border-top:1px solid var(--border);margin-top:6px}
.hc .case__stat{text-align:right}
.hc .case__stat b{display:block;font-size:1.7rem;font-weight:700;color:var(--purple);line-height:1;letter-spacing:-.02em}
.hc .case__stat span{display:block;font-size:.8rem;color:var(--muted);margin-top:4px;max-width:14ch}
.hc /* ---------- case uitklappen ---------- */
.cases{position:relative}
.hc .case{cursor:pointer}
.hc .case__lead{display:flex;flex-direction:column;flex:1;min-width:0}
.hc .case.is--open{position:absolute;z-index:6;display:grid;grid-template-columns:var(--leadw,34%) minmax(0,1fr);align-items:stretch}
.hc .case.is--open .case__lead{border-right:1px solid var(--border)}
.hc .case.is--open .case__foot{display:none}
.hc .cases.is--expanded .case:hover{transform:none}
.hc .case__detail{display:none;position:relative;flex-direction:column;padding:clamp(22px,2.6vw,36px);min-width:0;overflow:hidden;isolation:isolate;background:linear-gradient(150deg,#fbfaff,#f4f1fc)}
.hc .case__detail::before,.hc .case__detail::after{content:"";position:absolute;aspect-ratio:1;border-radius:50%;filter:blur(44px);z-index:-1;pointer-events:none}
.hc .case__detail::before{width:62%;left:-14%;top:-20%;background:radial-gradient(circle,rgba(212,197,249,.3),transparent 65%);animation:meshA 13s ease-in-out infinite alternate}
.hc .case__detail::after{width:56%;right:-16%;bottom:-24%;background:radial-gradient(circle,rgba(168,213,245,.28),transparent 65%);animation:meshB 17s ease-in-out infinite alternate}
.hc .case.is--open .case__detail{display:flex}
.hc .case__close{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:2}
.hc .case__close:hover{background:var(--p100)}
.hc .case__close svg{width:12px;height:12px}
.hc .case__subs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 16px;margin-top:8px;padding-right:44px}
.hc .sub{padding:14px 14px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.72);backdrop-filter:blur(4px)}
.hc .sub i{display:block;width:36px;height:36px;margin-bottom:10px}
.hc .sub i svg{width:100%;height:100%}
.hc .sub span{display:block;font-size:.85rem;font-weight:600;color:var(--ink);line-height:1.3}
.hc .case__story{margin-top:auto;padding-top:22px}
.hc .case__story b{display:block;font-size:1.04rem;margin-bottom:8px}
.hc .case__story p{color:var(--muted);font-size:.95rem;line-height:1.65;max-width:72ch}
.hc .case__story .arrowlink{margin-top:14px}
.hc button.case__next{background:none;border:0;padding:0;font:inherit;display:inline-flex;align-items:center;gap:8px;color:var(--purple);font-weight:600;font-size:.98rem;cursor:pointer}
.hc .case__next span{display:inline-block}
.hc .case__media.is--illu{background:linear-gradient(150deg,#f6f2ff,#ece4fb)}
.hc .case__illu{position:absolute;inset:0;width:100%;height:100%}
.hc .case__badge.is--wide{padding:6px 5px}
.hc .case__badge.is--word{font-family:var(--font-x);font-weight:700;font-size:.62rem;letter-spacing:-.01em;color:var(--ink);padding:0}
.hc .case__badge.is--word span{display:block;text-align:center;line-height:1}
.hc .case__result b.rstaged.is--words{font-size:1.15rem;letter-spacing:-.015em;gap:8px}
.hc .rstaged.is--words .rarr{width:26px;height:13px}
.hc .rstaged.is--words .r4{color:#c9bdef}
.hc .rmerge[data-n="2"] i:nth-child(1){left:10px;top:24px;width:12px;height:12px}
.hc .rmerge[data-n="2"] i:nth-child(2){left:78px;top:24px;width:12px;height:12px}
.hc .rmerge[data-n="3"] i:nth-child(1){left:8px;top:8px;width:11px;height:11px}
.hc .rmerge[data-n="3"] i:nth-child(2){left:80px;top:6px;width:11px;height:11px}
.hc .rmerge[data-n="3"] i:nth-child(3){left:44px;top:46px;width:11px;height:11px}
.hc .rcheck{display:flex;flex-direction:column;gap:8px;width:76px;margin-left:auto;flex:none}
.hc .rcheck i{display:flex;align-items:center;gap:8px;height:10px}
.hc .rcheck i::before{content:"";flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.hc .rcheck i:nth-child(2)::before{flex:.7}
.hc .rcheck i:nth-child(4)::before{flex:.85}
.hc .rcheck b{width:12px;height:12px;border-radius:50%;background:var(--p300);position:relative;flex:none}
.hc .rcheck b::after{content:"";position:absolute;left:3px;top:3px;width:5px;height:3px;border-left:1.5px solid #1f0a51;border-bottom:1.5px solid #1f0a51;transform:rotate(-45deg)}
.hc .rcheck i.is--flag b{background:var(--p400);box-shadow:0 0 12px rgba(146,90,254,.9)}
.hc .rcheck i.is--flag b::after{border:0;left:5px;top:2px;width:2px;height:5px;background:#fff;transform:none;border-radius:1px}
.hc .case__vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;padding-right:44px}
.hc .case__vs>div{padding:14px 16px 13px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.55)}
.hc .case__vs>div.is--na{background:rgba(240,232,255,.7);border-color:#e3d6ff}
.hc .case__vs small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.hc .case__vs .is--na small{color:var(--purple)}
.hc .case__vs p{font-size:.88rem;line-height:1.5;color:var(--ink)}
.hc .case__story{padding-top:20px}
.hc .case__fit{font-size:.85rem!important;margin-top:12px;color:var(--muted-2)!important}
.hc .case__fit span{font-weight:600;color:var(--ink);margin-right:8px}
.hc .case__fit span::after{content:":"}
.hc .cases__more{display:flex;justify-content:flex-end;margin-top:22px}
.hc .case.is--hidden{display:none!important}
.hc /* casepagina */
.casepage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:start}
.hc .casepage__media{border-radius:var(--radius);overflow:hidden;background:var(--p100);aspect-ratio:16/10;position:relative}
.hc .casepage__media video,.hc .casepage__media img{width:100%;height:100%;object-fit:cover;display:block}
.hc .casepage__badge{position:absolute;left:18px;bottom:18px;background:#fff;border-radius:12px;padding:8px 12px;display:flex;align-items:center}
.hc .casepage__badge img{height:26px;width:auto}
.hc .casepage__result{background:var(--ink);color:#fff;border-radius:var(--radius);padding:26px 28px;margin-top:18px}
.hc .casepage__result b{display:block;font-size:2.6rem;line-height:1;font-weight:700;letter-spacing:-.03em}
.hc .casepage__result b i{font-style:normal;font-size:1.1rem;color:#c9bdef;font-weight:600}
.hc .casepage__result span{display:block;margin-top:8px;color:#c9bdef;font-size:.95rem}
.hc .casepage__result span u{display:block;text-decoration:none;color:#fff;font-weight:600;margin-top:4px}
.hc .casepage h2{font-size:1.25rem;margin:30px 0 12px}
.hc .casepage h2:first-child{margin-top:0}
.hc .casepage__subs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hc .casepage__subs li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:.92rem}
.hc .casepage__subs li i{width:30px;height:30px;flex:none;display:block}
.hc .casepage__subs li i svg{width:100%;height:100%}
.hc .casepage .case__vs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hc .casepage .case__vs>div{border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:#fff}
.hc .casepage .case__vs>div.is--na{background:var(--p100);border-color:var(--p200)}
.hc .casepage .case__vs small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.hc .casepage .case__vs .is--na small{color:var(--purple)}
.hc .casepage__story p{color:var(--muted);line-height:1.7}
.hc .casepage__story b{display:block;font-size:1.05rem;margin-bottom:8px}
.hc .casepage__fit{font-size:.92rem;color:var(--muted)}
.hc .casepage__fit span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px}
.hc .casepage__links{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:22px}
.hc .casepage__rel{margin-top:clamp(40px,5vw,64px)}
.hc .casepage__rel h2{font-size:1.25rem;margin-bottom:14px}
.hc .casepage__relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hc .casepage__relgrid a{display:block;padding:16px 18px;border:1px solid var(--border);border-radius:12px;background:#fff;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.hc .casepage__relgrid a:hover{border-color:var(--p300);transform:translateY(-2px)}
.hc .casepage__relgrid small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px}
.hc .casepage__relgrid b{display:block;font-size:.95rem;line-height:1.3}
.hc .case__pagelink{margin-top:14px}
.hc .cases.is--expanded{overflow:hidden}
.hc /* uitgeklapte kaart: klantlogo als kop,.hc link naar volledige case met ruimte t.o.v. "Andere klant" */
.case__dhead{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-right:56px}
.hc .case__dlogo{display:flex;align-items:center;justify-content:center;height:44px;min-width:44px;padding:7px 14px;border-radius:12px;background:#fff;border:1px solid var(--border)}
.hc .case__dlogo img{height:100%;width:auto;max-width:140px;object-fit:contain}
.hc .case__dlogo.is--word{font-family:var(--font-x);font-weight:700;font-size:.8rem;color:var(--ink)}
.hc .case__dclient{font-weight:700;font-size:1rem}
.hc .case__story .case__pagelink{display:inline-flex;margin:20px 32px 0 0}
.hc .case__story .case__next{margin-top:20px}
@media (prefers-reduced-motion:reduce){.hc .case__result::before{animation:none}}
@media (max-width:1100px){.hc .cases{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hc .cases,.hc .pillars,.hc .steps{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hc .case__detail::before,.hc .case__detail::after{animation:none}}
@media (max-width:1200px){.hc .case__subs{grid-template-columns:1fr 1fr}}
@media (max-width:991px){.hc .case.is--open{position:relative;display:flex;flex-direction:column}
.hc .case.is--open .case__lead{border-right:0;border-bottom:1px solid var(--border)}
.hc .case__subs{grid-template-columns:1fr 1fr;padding-right:0}}
@media (max-width:991px){.hc .case__vs{padding-right:0}}
@media (max-width:560px){.hc .case__vs{grid-template-columns:1fr}}
@media (max-width:991px){.hc .casepage{grid-template-columns:1fr}
.hc .casepage__relgrid{grid-template-columns:1fr}}
@media (max-width:560px){.hc .casepage__subs,.hc .casepage .case__vs{grid-template-columns:1fr}}
@media (max-width:560px){.hc .case__story .case__pagelink{margin-right:0}
.hc .case__story .case__next{display:flex}}
/* aanpassingen voor dit voorstel */
.hc .cases{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:760px){.hc .cases{grid-template-columns:1fr}}
.hc .case.is--open{grid-column:1/-1}
.hc .case p{margin:0}
.hc .case__detail p{margin:0}
.hc .case__story p + p{margin-top:12px}
.hc .case__media video{display:block}
.hc .case.is--open{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;display:grid!important;grid-template-columns:34% minmax(0,1fr)!important;grid-column:1/-1}
.hc .case.is--open .case__lead{border-right:1px solid var(--border);border-bottom:0}
@media (max-width:760px){.hc .case.is--open{grid-template-columns:1fr!important}.hc .case.is--open .case__lead{border-right:0;border-bottom:1px solid var(--border)}}