/* N4 clone — case-study pages (built by main thread; complements work.css) */

.case { background: #0a0f12; color: #fafafa; }
.case-top { position: relative; }
.case-hero { width: 100%; height: 68vh; min-height: 420px; object-fit: cover; display: block; }
.case-id { position: absolute; bottom: 26px; left: 24px; right: 24px; }
.case-id .ph1 { font-size: clamp(34px, 5.4vw, 64px); font-weight: 400; letter-spacing: -0.025em; }
.eyebrow { color: #758696; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; margin-bottom: 14px; }

.case-body-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 26px 22px; max-width: 1100px; margin: 0 auto; padding: 70px 24px 40px;
}
.case-body-grid p {
  grid-column: 3 / 11; color: #b9c2cc; font-size: 16.5px; line-height: 1.75; margin-bottom: 4px;
}
.gviz { grid-column: span 12; margin: 12px 0; }
.gviz img, .gviz video { width: 100%; border-radius: 10px; display: block; }
.gviz[style*="span 6"] { grid-column: span 6 !important; }
.gviz[style*="span 4"] { grid-column: span 4 !important; }
.gviz[style*="span 8"] { grid-column: span 8 !important; }

.case-next { max-width: 1100px; margin: 0 auto; padding: 40px 24px 110px; display: flex; justify-content: space-between; align-items: baseline; }
.next-link { color: #fafafa; font-size: 22px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 4px; }
.next-link:hover { border-color: #0082f3; }

@media (max-width: 800px) {
  .case-body-grid { grid-template-columns: 1fr; }
  .case-body-grid p, .gviz { grid-column: 1 / -1 !important; }
}