.case-studies { max-width:1500px;margin:auto;padding:85px 5% 95px; }
.case-intro { display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:35px; }
.case-intro .section-title { margin-bottom:0; }
.case-intro > p { max-width:390px;color:#53677c;font-size:1rem;line-height:1.8;margin-bottom:8px; }
.case-demo-note { font-size:.73rem;color:#6c7f92; }
.case-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px; }
.case-card { position:relative;min-height:480px;aspect-ratio:3/4;overflow:hidden;border-radius:12px;background:#102a42;box-shadow:0 16px 35px #17345015;isolation:isolate; }
.case-card > img { position:absolute;width:100%;height:100%;object-fit:cover;object-position:65% center;transition:transform .6s;z-index:-2; }
.case-card:nth-child(3) > img { object-position:25% center; }
.case-shade { position:absolute;inset:0;background:linear-gradient(180deg,#071a3d10 15%,#071a3d85 50%,#071a3df5 100%);z-index:-1; }
.case-number { position:absolute;top:22px;left:22px;color:white;font-size:.78rem;letter-spacing:.1em;border:1px solid #ffffff70;border-radius:100px;padding:9px 12px; }
.case-details { position:absolute;left:28px;right:28px;bottom:28px;color:white; }
.case-details summary { list-style:none;cursor:pointer; }
.case-details summary::-webkit-details-marker { display:none; }
.case-category { font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#92d8ff; }
.case-details h3 { font-size:clamp(1.4rem,2.1vw,2rem);line-height:1.18;margin:12px 0 18px;font-weight:500; }
.case-hint { display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:#d5e7f5;border-top:1px solid #ffffff40;padding-top:14px; }
.case-hint span { font-size:1.3rem; }
.case-description p { font-size:.88rem;line-height:1.7;color:#dce8f2;margin:15px 0; }
.case-open { background:white;color:#123958;border:0;border-radius:5px;padding:13px 17px;width:100%;display:flex;justify-content:space-between;cursor:pointer;font:inherit;font-size:.8rem;font-weight:600; }
.case-open:hover { background:#ddecff; }
.case-card:hover > img { transform:scale(1.04); }
.case-card :focus-visible { outline:3px solid #82d8ff;outline-offset:5px; }
.case-dialog { position:fixed;inset:0;margin:auto;width:min(640px,90vw);max-height:85vh;overflow:auto;border:0;border-radius:14px;padding:42px;color:#19324c;box-shadow:0 30px 100px #0005; }
.case-dialog::backdrop { background:#071a3dbb;backdrop-filter:blur(5px); }
.case-dialog h2 { margin:18px 0;font-size:1.9rem;line-height:1.2; }
.case-dialog h3 { margin-top:24px;font-size:1rem; }
.case-dialog p { line-height:1.7;color:#52677a;margin:10px 0; }
.case-dialog .case-disclaimer { font-size:.8rem;background:#edf4fb;padding:12px; }
.case-dialog .btn-primary { margin-top:20px; }
.case-close { position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;background:#edf4fb;border-radius:50%;font-size:24px;cursor:pointer; }
@media(max-width:900px) { .case-grid { gap:15px; }.case-card { min-height:430px; }.case-details { left:20px;right:20px;bottom:22px; }.case-intro { align-items:flex-start;flex-direction:column;gap:18px; } }
@media(max-width:650px) { .case-grid { grid-template-columns:1fr; }.case-card { min-height:430px;aspect-ratio:4/5;max-height:540px; }.case-studies { padding-top:55px; }.case-dialog { padding:35px 24px; } }
@media(prefers-reduced-motion:reduce) { .case-card > img { transition:none; } }

/* Responsive hardening */
.case-studies, .case-grid, .case-card { min-width:0; max-width:100%; }
.case-dialog { width:min(92vw,720px); max-width:calc(100vw - 28px); max-height:90svh; overflow:auto; }
@media(max-width:480px) {
  .case-studies { padding-left:18px; padding-right:18px; }
  .case-card { min-height:0; height:auto; aspect-ratio:4/5; }
  .case-details { left:16px; right:16px; bottom:18px; }
  .case-dialog { padding:28px 18px; }
}
@media(max-width:360px) { .case-studies { padding-left:14px; padding-right:14px; } }

/* Case study card text visibility */
.case-card .case-details h3 {
  color: #f7fbff;
  text-shadow: 0 2px 14px rgba(0, 18, 42, .55);
}
.case-card .case-category {
  color: #e8f6ff;
  text-shadow: 0 1px 10px rgba(0, 18, 42, .55);
}

.case-open{text-decoration:none;display:inline-flex;align-items:center;gap:12px}.case-browse{display:table;margin:32px auto 0;color:#086eac;font-weight:600;font-size:14px;text-underline-offset:6px}

/* Keep the Paytm phone smaller and centred within its card. */
.case-card>img[src*="paytm-client-photo"]{height:85%;top:0;left:0;object-fit:cover;object-position:32% center;transform:none}.case-card:hover>img[src*="paytm-client-photo"]{transform:none}