/* Flint Digital V2 — Work Page Styles */

/* CASE STUDIES */
.cases{max-width:1100px;margin:0 auto;padding:0 48px 120px;position:relative;z-index:2}
.case{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:80px 0;border-bottom:1px solid var(--line)}
.case:last-child{border-bottom:none}
.case:nth-child(even){direction:rtl}
.case:nth-child(even) > *{direction:ltr}

.case-browser{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.case-bar{background:var(--surface);padding:8px 14px;display:flex;gap:5px;align-items:center;border-bottom:1px solid var(--line)}
.case-dot{width:7px;height:7px;border-radius:50%}
.case-dot:nth-child(1){background:#6b5e52}.case-dot:nth-child(2){background:#5a5549}.case-dot:nth-child(3){background:#4a4640}
.case-url{margin-left:10px;font-family:var(--mono);font-size:9px;color:var(--dim);background:rgba(255,255,255,.02);padding:3px 10px;border-radius:2px;flex:1;text-align:center;letter-spacing:1px}
.case-iframe-wrap{
  width:100%;aspect-ratio:16/10;overflow:hidden;position:relative;
  background:var(--surface);
}
.case-iframe-wrap iframe{
  position:absolute;top:0;left:0;
  width:1440px;height:900px;border:none;
  transform:scale(0.36);transform-origin:top left;
  pointer-events:none;
}

.case-tag{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;font-weight:400}
.case:nth-child(1) .case-tag{color:var(--copper)}
.case:nth-child(2) .case-tag{color:var(--slate)}
.case:nth-child(3) .case-tag{color:var(--sage)}
.case-info h2{font-size:28px;font-weight:600;margin-bottom:10px;color:var(--text2);letter-spacing:-.5px}
.case-desc{font-size:14px;line-height:1.8;color:var(--dim);font-weight:300;margin-bottom:28px}
.case-metrics{display:flex;gap:28px;padding-top:20px;border-top:1px solid var(--line2)}
.case-metric h4{font-family:var(--mono);font-size:22px;font-weight:700}
.case:nth-child(1) .case-metric h4{color:var(--copper)}
.case:nth-child(2) .case-metric h4{color:var(--slate)}
.case:nth-child(3) .case-metric h4{color:var(--sage)}
.case-metric p{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:2px;margin-top:3px}
.case-result{margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:var(--dim);line-height:1.6}
.case-result strong{color:var(--text2);font-weight:700}
.case-link{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;transition:color .3s}
.case:nth-child(1) .case-link{color:var(--copper)}
.case:nth-child(2) .case-link{color:var(--slate)}
.case:nth-child(3) .case-link{color:var(--sage)}
.case-link:hover{color:var(--text2)}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .cases{padding:0 20px 60px}
  .case{grid-template-columns:1fr;gap:32px;padding:48px 0}
  .case:nth-child(even){direction:ltr}
}