.cases{display:flex;flex-wrap:wrap;gap:20px}
.case{display:flex;flex-wrap:wrap;border:1px solid #E3E6EC;border-radius:28px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;flex:1 1 330px;min-width:0;flex-direction:column;background:#FFFFFF}
.case:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(11,18,32,.12)}
.caseimg{flex:none;width:100%;height:200px;min-height:0;position:relative;overflow:hidden;background:#E8EAFD}
.caseimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.casebody{flex:1 1 auto;min-width:0;padding:24px;display:flex;flex-direction:column;gap:14px}
.stats{display:flex;flex-wrap:wrap;gap:10px}
.stat{flex:1 1 90px;min-width:0;border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:4px}
.panels{display:flex;gap:14px;height:540px}
.panel{position:relative;flex:1 1 0;min-width:0;border-radius:30px;overflow:hidden;background:#0B1220;color:#FFFFFF;transition:flex .6s cubic-bezier(.2,.7,.2,1)}
.panel.first{flex:3.4 1 0}
.panels:hover .panel,.panels:focus-within .panel{flex:1 1 0}
.panels:hover .panel:hover,.panels:focus-within .panel:focus-within{flex:3.4 1 0}
.pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.panel:hover .pimg{transform:scale(1.04)}
.pshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,.05) 0%,rgba(11,18,32,.5) 40%,rgba(11,18,32,.95) 100%)}
.pnum{position:absolute;top:18px;left:18px;background:#D9F36A;color:#0B1220;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px;white-space:nowrap}
.vt{position:absolute;left:50%;bottom:26px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:24px;letter-spacing:-0.02em;white-space:nowrap;transition:opacity .3s ease;opacity:1}
.pin{position:absolute;left:0;bottom:0;width:min(640px,100%);padding:30px;display:flex;flex-direction:column;gap:14px;opacity:0;transition:opacity .4s ease .2s}
.panel.first .pin{opacity:1}.panel.first .vt{opacity:0}
.ptag{align-self:flex-start;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px}
.ph{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(28px,3.2vw,40px);letter-spacing:-0.035em;line-height:1.05;color:#FFFFFF}
.pp{margin:0;font-size:16px;color:#E6EAFD;max-width:540px}
.pstats{display:flex;gap:10px}
.pst{flex:1 1 0;min-width:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;backdrop-filter:blur(10px)}
.pk{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pv{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:28px;letter-spacing:-0.04em;line-height:1.05}
.pl{margin:0;font-size:13px;color:#D5DAE6;line-height:1.3}
.panels:hover .panel .pin,.panels:focus-within .panel .pin{opacity:0;transition-delay:0s;pointer-events:none}
.panels:hover .panel:hover .pin,.panels:focus-within .panel:focus-within .pin{opacity:1;transition-delay:.25s;pointer-events:auto}
.panels:hover .panel .vt,.panels:focus-within .panel .vt{opacity:1}
.panels:hover .panel:hover .vt,.panels:focus-within .panel:focus-within .vt{opacity:0}
.cs-archive-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px}
.cs-filter-btn{display:inline-flex;align-items:center;padding:10px 20px;border-radius:999px;background:#FFFFFF;border:1px solid #E3E6EC;color:#0B1220;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;transition:all .2s ease}
.cs-filter-btn:hover,.cs-filter-btn.active{background:#0B1220;color:#D9F36A;border-color:#0B1220;text-decoration:none}
.cs-single-content{max-width:860px;margin:0 auto;font-size:18px;line-height:1.7;color:#1B2230}
.cs-single-content h2,.cs-single-content h3{font-family:'Bricolage Grotesque',sans-serif;color:#0B1220;margin-top:1.8em;margin-bottom:0.6em}
@media (max-width:900px){
.panels{flex-direction:column;height:auto}.panel,.panel.first,.panels:hover .panel,.panels:hover .panel:hover{flex:none}
.pimg{position:relative;height:240px}.pshade,.vt{display:none}.panel{background:#0B1220}
.pin,.panels:hover .panel .pin,.panel.first .pin{position:relative;width:auto;opacity:1!important;pointer-events:auto;padding:22px 20px 24px}
.pstats{flex-wrap:wrap}.pst{flex:1 1 100px}
}
@media (max-width:600px){.case{flex:1 1 100%;border-radius:24px}.panel{border-radius:24px}.pv{font-size:24px}}