/* Continuum case-study panel. Scoped to .case-dialog and the card trigger; nothing else on the page is styled here. */

.case-trigger { padding:0; border:0; background:none; cursor:pointer; text-align:left; }
.case-trigger:hover, .case-trigger:focus-visible { text-decoration:underline; text-underline-offset:4px; }
/* the whole Continuum card opens the case study: the button's hit area is stretched over the card */
.agent-card--case { position:relative; cursor:pointer; transition:border-color .2s, transform .2s, box-shadow .2s; }
.agent-card--case:hover { transform:translateY(-3px); box-shadow:0 14px 34px #020c1b99; }
.agent-card--case .case-trigger::after { content:""; position:absolute; inset:0; border-radius:12px; }
.agent-card--case:has(.case-trigger:focus-visible) { outline:2px solid var(--lilac); outline-offset:4px; }
.case-trigger:focus-visible { outline:none; }
@media (prefers-reduced-motion:reduce) { .agent-card--case:hover { transform:none; } }

.case-dialog { width:min(960px, calc(100vw - 32px)); max-height:calc(100vh - 48px); margin:auto; padding:0; border:1px solid var(--line); border-radius:16px; background:#0d1c33; color:var(--ink); box-shadow:0 30px 80px #02091acc; overflow:hidden; }
.case-dialog::backdrop { background:#020c1bcc; backdrop-filter:blur(3px); }
.case-dialog[open] { display:flex; flex-direction:column; animation:case-in .22s ease-out; }
@keyframes case-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

.case-scroll { overflow-y:auto; padding:40px 44px 36px; overscroll-behavior:contain; }
.case-close { position:absolute; top:18px; right:18px; z-index:2; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:#112240; color:var(--ink); font-size:18px; line-height:1; cursor:pointer; }
.case-close:hover, .case-close:focus-visible { border-color:var(--lilac); color:var(--lilac); outline:none; }

.case-meta { margin:0 0 10px; color:var(--muted); font:500 11px/1.8 var(--display); letter-spacing:1.2px; text-transform:uppercase; }
.case-title { margin:0 0 14px; color:var(--ink); font:700 40px/1.1 var(--display); letter-spacing:-1px; }
.case-title span { color:var(--coral); }
.case-lede { max-width:720px; margin:0 0 26px; color:#ccd6f6; font-size:19px; line-height:1.6; }

.case-metric { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 20px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.case-metric strong { color:var(--lilac); font:700 30px/1.1 var(--display); letter-spacing:-.5px; }
.case-metric span { color:var(--muted); font-size:15px; line-height:1.5; }

.case-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 32px; padding:0; list-style:none; }
.case-tags li { padding:4px 11px; border:1px solid #2c4160; border-radius:999px; color:#b2ecdf; font:12px/1.7 var(--display); }

.case-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px 40px; margin:0 0 36px; }
.case-grid h3 { margin:0 0 8px; color:var(--ink); font:600 15px/1.4 var(--display); letter-spacing:.2px; }
.case-grid p { margin:0; color:var(--muted); font-size:15px; line-height:1.75; }

.case-stats { margin:0; padding:0; list-style:none; }
.case-stats li { margin:0 0 8px; color:var(--muted); font-size:15px; line-height:1.55; }
.case-stats strong { margin-right:6px; color:var(--lilac); font:700 16px/1 var(--display); }

/* architecture video */
.case-video { margin:0 0 14px; }
.case-video-label { margin:0 0 10px; color:var(--lilac); font:500 11px/1.6 var(--display); letter-spacing:1.2px; }
.case-video video { display:block; width:100%; height:auto; aspect-ratio:16/9; border:1px solid var(--line); border-radius:12px; background:#0a192f; }
.case-video figcaption { margin-top:10px; color:var(--muted); font-size:14px; line-height:1.65; }

.case-note { margin:0 0 22px; color:#5e7192; font-size:12px; }
.case-links { display:flex; flex-wrap:wrap; gap:12px 24px; padding-top:20px; border-top:1px solid var(--line); }
.case-links a { color:var(--lilac); font:500 14px/1.6 var(--display); }
.case-links span { color:var(--muted); font:500 14px/1.6 var(--display); }

@media (max-width:760px) {
  .case-dialog { width:100vw; max-width:100vw; max-height:100dvh; height:100dvh; border-radius:0; border:0; }
  .case-scroll { padding:64px 20px 28px; }
  .case-title { font-size:32px; }
  .case-lede { font-size:17px; }
  .case-grid { grid-template-columns:1fr; gap:22px; }
}
@media (prefers-reduced-motion:reduce) {
  .case-dialog[open] { animation:none; }
}