/* Work page: case studies. The page stays neutral so the colour comes from the products it shows.
   Each case sets its own --c (the product's accent) for small details only. */

.work-page { --purple-dark: #2E2E2E; }
.work-page .progress { background: #E8E8E8; }
.work-page .footer { border-top-color: var(--border); }
.work-page .nav.is-solid-always { box-shadow: 4px 4px 0 #2E2E2E; }

.work-hero { padding: 170px 0 var(--section-tight); border-bottom: 2px solid var(--border); }
.work-title { max-width: 17ch; margin: 0 0 var(--s-5); font-family: var(--f-display); font-weight: 400; color: #fff; font-size: clamp(2.8rem, 6.6vw, 5.8rem); line-height: .98; letter-spacing: -.025em; }
.work-jump { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.work-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 2px solid var(--border-strong); border-radius: var(--r-btn); text-decoration: none; font: 700 .88rem/1 var(--f-mono); transition: border-color .15s, color .15s; }
.work-jump a:hover { border-color: #fff; }

.case { padding-block: var(--section); border-bottom: 2px solid var(--border); }
.case__head { max-width: 46rem; margin-bottom: var(--s-7); }
.case__tag { margin: 0 0 var(--s-3); font: 700 .76rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.case__tag::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); vertical-align: 1px; }
.case__name { margin: 0 0 var(--s-3); font-family: var(--f-display); font-weight: 400; font-size: clamp(3.4rem, 8vw, 6.8rem); line-height: .92; letter-spacing: -.02em; color: #fff; }
.case__line { max-width: 40rem; margin: 0 0 var(--s-5); font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); }

.case .frame { --cd: #2A2A2A; box-shadow: var(--shadow-lg) var(--shadow-lg) 0 #262626; }
.case__hero-shot { margin-bottom: var(--s-8); }

.case__grid { display: grid; gap: var(--s-6); margin-bottom: var(--s-8); }
@media (min-width: 900px) { .case__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); } .case__grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.case__grid--2 { margin-bottom: 0; }
.case__block { padding-top: var(--s-4); border-top: 2px solid var(--c); }
.case__block h3 { margin: 0 0 var(--s-3); font-family: var(--f-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; color: #fff; }
.case__block p { margin: 0 0 var(--s-4); color: var(--text-2); }
.case__list { display: grid; gap: var(--s-3); margin: 0 0 var(--s-4); padding: 0; list-style: none; color: var(--text-2); }
.case__list li { position: relative; padding-left: 22px; }
.case__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--c); }
.case__list b { color: #fff; font-weight: 600; }

.case__shots { display: grid; gap: var(--s-6); margin-bottom: var(--s-8); align-items: start; }
@media (min-width: 900px) { .case__shots { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.case__shots--one { grid-template-columns: minmax(0, 1fr) !important; }
.case__cap { padding: 12px 16px; border-top: 2px solid var(--border-strong); background: var(--bg); font-size: var(--fs-sm); color: var(--text-2); }

.case__quote { margin: var(--s-4) 0 var(--s-4); padding: var(--s-5); background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); }
.case__quote blockquote { margin: 0 0 var(--s-2); font: 400 1.5rem/1.25 var(--f-display); color: #fff; }
.case__quote figcaption { font-size: var(--fs-sm); color: var(--muted); }

.work-cta { padding-block: var(--section); }
.work-cta .h2 { max-width: 16ch; }
.work-cta__row { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-2); }