.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.case-card {
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 30px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 55px rgba(7, 18, 15, .12);
}

.case-visual {
  position: relative;
  min-height: 290px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.case-visual::before,
.case-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
}

.case-visual::before { width: 340px; height: 340px; right: -95px; top: -120px; }
.case-visual::after { width: 180px; height: 180px; left: -45px; bottom: -80px; }
.case-street .case-visual { background: linear-gradient(145deg, #111, #3a3a3a); color: #fff; }
.case-jb .case-visual { background: linear-gradient(145deg, #d6b477, #5b3f23); color: #fff; }
.case-kauan .case-visual { background: linear-gradient(145deg, #056995, #26c6cf); color: #fff; }
.case-leis .case-visual { background: linear-gradient(145deg, #123c2b, #27775a); color: #fff; }

.case-monogram {
  position: relative;
  z-index: 1;
  font: 800 clamp(4rem, 9vw, 7rem)/1 "Manrope", sans-serif;
  letter-spacing: -.08em;
  text-shadow: 0 16px 35px rgba(0,0,0,.18);
}

.client-logo-shell {
  position: relative;
  z-index: 1;
  width: min(76%, 370px);
  height: 172px;
  display: grid;
  place-items: center;
  padding: 26px 34px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 32px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 25px 60px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  transition: transform .28s ease, box-shadow .28s ease;
  overflow: hidden;
}

.client-logo-shell img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform .28s ease;
}

.case-card:hover .client-logo-shell { transform: translateY(-5px) scale(1.025); box-shadow: 0 30px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.9); }
.case-card:hover .client-logo-shell img { transform: scale(1.025); }
.client-logo-shell.logo-street { padding: 24px 38px; background: linear-gradient(145deg,#fff,#f8f2f7); }
.client-logo-shell.logo-dark { padding: 25px 34px; background: #080808; border-color: rgba(232,190,105,.32); }
.client-logo-shell.logo-dark img { max-width: 210px; max-height: 122px; }
.client-logo-shell.logo-kauan { padding: 18px 28px; background: linear-gradient(145deg,#fff,#eefaff); }
.client-logo-shell.logo-crest { width: 190px; height: 190px; padding: 15px; background: rgba(255,255,255,.96); }
.client-logo-shell.logo-digitar { width: min(78%, 390px); height: 160px; padding: 30px 38px; background: linear-gradient(145deg,#fff,#f4f5f6); }

.live-badge {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  font-size: .67rem;
  font-weight: 800;
}

.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #4fba3e; box-shadow: 0 0 0 4px rgba(79,186,62,.14); }
.case-content { padding: 28px 30px 31px; }
.case-content p { margin: 0 0 10px; font-size: .66rem; font-weight: 800; letter-spacing: .12em; color: #63706a; }
.case-content .case-description { min-height: 44px; margin: -13px 0 22px; font-size: .83rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--muted); }
.case-content h3 { margin: 0 0 25px; font-size: 1.65rem; }
.case-content > span { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 18px; font-size: .83rem; font-weight: 700; }
.case-content b { color: #4c8c3b; font-size: 1.1rem; }
.portfolio-cta { margin-top: 22px; padding: 36px 40px; background: var(--ink); color: #fff; border-radius: 24px; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.portfolio-cta small { color: var(--green); font-weight: 800; letter-spacing: .12em; }
.portfolio-cta h3 { margin: 8px 0 0; font-size: 1.55rem; }

@media (max-width: 760px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-visual { min-height: 245px; }
  .client-logo-shell { width: 78%; height: 145px; border-radius: 26px; padding: 22px 26px; }
  .client-logo-shell.logo-dark { padding: 22px 30px; }
  .client-logo-shell.logo-dark img { max-width: 160px; max-height: 96px; }
  .client-logo-shell.logo-digitar { width: 82%; height: 135px; padding: 26px; }
  .portfolio-cta { align-items: flex-start; flex-direction: column; padding: 30px; }
}