/* Cases: overzicht en detail (uit het prototype). */
.cd-hero{background:var(--navy);color:#fff;overflow:hidden}
.cd-hero .in{padding-block:48px 64px}
.cd-hero .top{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media (max-width:900px){.cd-hero .top{grid-template-columns:1fr}}
.cd-hero .big{font-size:clamp(110px,19vw,280px);font-weight:800;line-height:.8;letter-spacing:-.06em;color:var(--mint)}
.cd-hero h1{font-size:clamp(28px,3.4vw,44px);font-weight:800;line-height:1.1;margin-top:18px;max-width:20ch}
.cd-meta{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid #3a3462}
.cd-meta div{padding:16px 0;border-bottom:1px solid #3a3462}
.cd-meta span{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mintl)}
.cd-meta b{font-size:17px}
.cd-img{margin-top:48px;height:clamp(260px,42vw,560px);border-radius:20px 20px 0 0;overflow:hidden;position:relative}
.cd-img>.ph{position:absolute;inset:0;border-radius:0}
.cd-body{display:grid;grid-template-columns:220px 1fr;gap:64px}
@media (max-width:900px){.cd-body{grid-template-columns:1fr;gap:0}}
.cd-toc{position:sticky;top:110px;align-self:start;display:grid;gap:4px;border-left:2px solid var(--line)}
@media (max-width:900px){.cd-toc{display:none}}
.cd-toc a{padding:8px 16px;font-weight:700;color:var(--mut);margin-left:-2px;border-left:2px solid transparent;transition:color .2s,border-color .2s}
.cd-toc a.on{color:var(--navy);border-color:var(--mintd)}
.cd-sec{padding-bottom:64px}
.cd-sec h2{font-size:clamp(28px,3.4vw,42px);font-weight:800;line-height:1.1;margin-bottom:18px}
.cd-sec p{font-size:18px;color:var(--ink2);max-width:62ch;margin-bottom:14px}
.cd-steps{display:grid;gap:12px;margin-top:22px}
.cd-steps div{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;background:var(--paper);border-radius:14px;padding:18px}
.cd-steps .ic{width:44px;height:44px;padding:11px;border-radius:10px;background:var(--navy);color:var(--mint)}
.cd-steps b{display:block;font-size:17px}
.cd-steps span{color:var(--mut);font-size:15px}
.cd-res{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-block:2px solid var(--navy);margin-top:20px}
@media (max-width:700px){.cd-res{grid-template-columns:1fr}}
.cd-res div{padding:26px 22px;border-right:1px solid var(--line)}
.cd-res div:last-child{border:0}
@media (max-width:700px){.cd-res div{border-right:0;border-bottom:1px solid var(--line)}}
.cd-res b{display:block;font-size:clamp(40px,4.6vw,60px);font-weight:800;line-height:1;letter-spacing:-.02em}
.cd-res span{color:var(--mut);font-size:15px}
.cd-gal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:24px}
.cd-hero .big{white-space:nowrap}
.cd-side{display:grid;gap:22px}
.cd-vis{aspect-ratio:1;border-radius:18px;overflow:hidden;position:relative;max-width:440px;width:100%;justify-self:end;box-shadow:0 24px 50px -24px rgba(0,0,0,.6)}
.cd-vis .ph{position:absolute;inset:0;border-radius:0;min-height:0}
.cd-vis img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.cd-vis{justify-self:stretch;max-width:none}}
.cd-hero .big.sm{font-size:clamp(72px,11vw,170px)}
.cd-sub{color:#fff;font-size:18px;margin-top:14px;max-width:46ch}
.cd-sec .eb{display:block;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mintt);margin-bottom:10px}
.cd-r1{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-top:20px;background:var(--mint);color:var(--navy);border-radius:12px;padding:12px 16px;font-weight:800;font-size:17px;max-width:46ch}
.cd-r1 span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--navy);color:var(--mint);border-radius:6px;padding:3px 8px}
.cd-tldr{background:var(--paper);border-left:4px solid var(--mint);border-radius:0 16px 16px 0;padding:24px 28px}
.cd-tldr h2{font-size:20px!important;margin-bottom:10px!important}
.cd-tldr ul,.cd-ul{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--ink2);font-size:17px}
.cd-ul{margin:4px 0 14px}
.cd-steps .nr{width:44px;height:44px;border-radius:10px;background:var(--navy);color:var(--mint);display:grid;place-items:center;font-weight:800}
.cd-res{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important}
.cd-res b{font-size:clamp(30px,3.2vw,46px)!important;white-space:nowrap}
.cd-res div{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cd-ds{background:var(--navy);color:#fff;border-radius:20px;padding:clamp(28px,4vw,48px);display:grid;gap:18px}
.cd-ds h2.lb{margin:0!important;font-size:12.5px!important;line-height:1.3!important;}
.cd-ds .lb{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}
.cd-ds blockquote{margin:0;font-size:clamp(19px,2vw,24px);font-weight:700;line-height:1.4}
.cd-ds .who{display:flex;align-items:center;gap:14px}
.cd-ds .who b{display:block}
.cd-ds .who span{color:#fff;opacity:.8;font-size:14.5px}
.cd-ds .dav{width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--mint);display:grid;place-items:center;font-weight:800;color:var(--navy);opacity:1!important;flex:none}
.cd-ds .dav img{width:100%;height:100%;object-fit:cover}
.cd-gal .ph{aspect-ratio:9/16;min-height:0}
.ph-hero{background:var(--navy);color:#fff}
.ph-hero .in{padding-block:48px 64px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
@media (max-width:900px){.ph-hero .in{grid-template-columns:1fr;gap:24px;padding-block:40px 52px}}
.ph-hero .crumbs,.ph-hero .crumbs a{color:#fff}
.ph-hero h1{font-size:clamp(30px,3.8vw,50px);line-height:1.04;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin-top:14px}
.ph-hero h1,.ph-hero h1 *{font-weight:800!important}
.ph-hero h1 b{color:var(--mint)!important}
.ph-hero .sub{font-size:18px;color:#d9d6ea;max-width:46ch;margin-top:18px}
.ph-hero h1 s{text-decoration:none;position:relative;color:#9c97b8}
.ph-hero h1 s::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.09em;background:#F0806A;transform:rotate(-4deg)}
.cs-count{font-size:15px;color:#d9d6ea;max-width:26ch}
.cs-count b{display:block;font-size:64px;line-height:1;color:var(--mint)}
.cs-fl{position:sticky;top:74px;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.cs-fl .in{display:flex;gap:10px;align-items:center;padding-block:12px;flex-wrap:wrap}
.cf{position:relative}
.cf>button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 16px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--line);font-weight:700;font-size:14.5px;background:#fff;transition:box-shadow .2s}
.cf>button:hover,.cf>button[aria-expanded=true]{box-shadow:inset 0 0 0 1.5px var(--navy)}
.cf>button:focus-visible{outline:3px solid var(--mintd);outline-offset:2px}
.cf>button small{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.cf>button .v{color:var(--navy)}
.cf.on>button{background:var(--navy);box-shadow:none;color:#fff}
.cf.on>button small{color:var(--mint)}
.cf.on>button .v{color:#fff}
.cf>button .ic{transition:transform .25s}
.cf>button[aria-expanded=true] .ic{transform:rotate(180deg)}
.cf-m{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:#fff;border-radius:14px;padding:6px;box-shadow:0 24px 50px -20px rgba(26,21,52,.45),0 0 0 1px var(--line);display:grid;gap:2px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.16,1,.3,1)}
.cf-m.open{opacity:1;transform:none;pointer-events:auto}
.cf-m button{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px;border-radius:9px;font-weight:600;font-size:15px}
.cf-m button:hover,.cf-m button:focus-visible{background:var(--paper)}
.cf-m button[aria-checked=true]{font-weight:800}
.cf-m button[aria-checked=true]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mintd);margin-right:-6px;order:-1}
.cf-m button .n{font-size:12.5px;font-weight:700;color:var(--mut);background:var(--paper);border-radius:99px;padding:2px 8px;margin-left:auto}
.cf-m button:disabled{opacity:.38;cursor:default}
.cf-m button:disabled:hover{background:none}
.cs-res{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:14.5px;color:var(--mut)}
.cs-res b{color:var(--navy)}
.cs-rst{all:unset;cursor:pointer;font-weight:700;color:var(--navy);text-decoration:underline;text-decoration-color:var(--mint);text-underline-offset:3px}
.cs-rst[hidden]{display:none}
@media (max-width:640px){.cs-fl .in{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cf>button{width:100%;box-sizing:border-box;justify-content:space-between;padding:0 12px;font-size:14px}.cf>button small{display:none!important}
.cs-fl .in{position:relative}.cf{position:static}.cf-m{left:16px;right:16px;top:calc(100% - 4px);min-width:0}.cs-res{grid-column:1/-1;margin:0;justify-content:space-between;font-size:13.5px}}
.cs-grid{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto);gap:16px}
@media (max-width:1000px){.cs-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cs-grid{grid-template-columns:1fr}}
.cs-t{position:relative;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;background:var(--navy);color:#fff;grid-column:span 2;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.cs-t:hover{transform:translateY(-4px)}
.cs-t.w{grid-column:span 4;grid-row:span 2;min-height:520px}
.cs-t.h{grid-row:span 2}
@media (max-width:1000px){.cs-t,.cs-t.w{grid-column:span 1;grid-row:span 1;min-height:340px}.cs-t.w{grid-column:span 2}}
@media (max-width:600px){.cs-t.w{grid-column:span 1}}
.cs-t>.ph{position:absolute;inset:0;border-radius:0}
.cs-t>.ph img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.cs-t:hover>.ph img{transform:scale(1.05)}
.cs-t .ov{position:relative;padding:22px;background:linear-gradient(0deg,rgba(26,21,52,.95) 30%,rgba(26,21,52,0));display:grid;gap:8px;padding-top:70px}
.cs-t h3{font-size:clamp(19px,1.8vw,24px);font-weight:800;line-height:1.2}
.cs-t.w h3{font-size:clamp(24px,2.8vw,38px)}
.cs-t .m{font-size:13px;color:#fff;font-weight:600}
.cs-t .tags{display:flex;gap:6px;flex-wrap:wrap}
.cs-t.num{background:var(--mint);color:var(--navy)}
.cs-t.num .big{position:absolute;top:18px;left:22px;font-size:clamp(64px,7vw,108px);font-weight:800;line-height:1;letter-spacing:-.04em}
.cs-t.num .ov{background:none;padding-top:22px}
.cs-t.num .big{white-space:nowrap;position:static!important;padding:18px 22px 0}
.cs-t.num{justify-content:space-between}
.cs-t.num .big.sm{font-size:clamp(48px,5vw,76px)}
.cs-t .lumc{position:absolute;inset:0;border-radius:0;justify-content:flex-start;padding-top:28px!important}
.cs-t .lumc .sb,.cs-t .lumc .lb{display:none}
.cs-t.num .m{color:var(--navy)}
.cs-t.num.d{background:var(--mintl)}
.cs-t.num.n{background:#241f45;color:#fff}
.cs-t.num.n .big{color:var(--mint)}
.cs-t.num.n .m{color:#fff}
.cs-t[hidden]{display:none}
.cs-t.x2{grid-column:span 4}
@media (max-width:1000px){.cs-t.x2{grid-column:span 1}}
.cs-empty{display:none;padding:40px 0;color:var(--mut)}