/* ---------- UI/UX case studies ---------- */
.ui{padding:88px 0 96px}
.ui .head{margin-bottom:40px}
.case{--tint:#E2E4EC;--tint-ink:var(--ink);display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:clamp(20px,3vw,40px);background:var(--tint);color:var(--tint-ink);border-radius:24px;padding:clamp(20px,3vw,36px);margin-bottom:24px;overflow:clip}
.case-info{display:flex;flex-direction:column;gap:14px;align-self:start;position:sticky;top:24px}
.case-top{display:flex;align-items:center;gap:14px}
.case-icon{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none;box-shadow:0 8px 18px -10px rgba(0,0,0,.45)}
.case h3{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(26px,2.6vw,36px);line-height:1;letter-spacing:-.02em}
.case .kind{margin:4px 0 0;font-size:15px;opacity:.75}
.case p{margin:0;font-size:16px;line-height:1.55;max-width:42ch}
.case .role{font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.tags li{font-size:13px;border:1.5px solid currentColor;border-radius:999px;padding:3px 10px;opacity:.85}
.case-media{min-width:0;display:flex;flex-direction:column;gap:14px}
.case-cover{display:block;width:100%;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:zoom-in;background:rgba(0,0,0,.08)}
.case-cover img{width:100%;height:clamp(200px,26vw,360px);object-fit:cover}
.strip{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.strip button{flex:0 0 auto;padding:0;border:0;background:none;cursor:zoom-in;scroll-snap-align:start;border-radius:18px}
.strip img{height:clamp(300px,34vw,440px);width:auto;border-radius:18px;box-shadow:0 14px 30px -18px rgba(0,0,0,.55)}
.strip.tall img{height:clamp(320px,38vw,480px)}

.case.dogoal{--tint:#1F6FE0;--tint-ink:#fff}
.case.sudoku{--tint:#C8EDE4;--tint-ink:#123A3A}
.case.ecomind{--tint:#141B2E;--tint-ink:#E8ECF7}
.case.ecomind .case-media{background:radial-gradient(120% 90% at 80% 10%,#2B4C7E 0%,transparent 60%);border-radius:16px}

@media (max-width:900px){
  .case{grid-template-columns:1fr}
  .case-info{position:static}
  .strip img,.strip.tall img{height:340px}
}

/* top bar on narrow phones */
.top .pill{white-space:nowrap}
@media (max-width:520px){
  header.top nav{gap:12px;font-size:14px}
  .top .pill{padding:7px 11px;font-size:10.5px;letter-spacing:.05em}
}
@media (max-width:360px){
  header.top nav{gap:9px;font-size:13px}
}