/* Case study pages (generated by tools/build.mjs) */
.case .nav__links a.is-active { color: var(--text); background: rgba(255, 255, 255, .08); }
.c-hero { padding-top: calc(var(--nav-h) + clamp(70px, 12vh, 140px)); padding-bottom: clamp(50px, 8vh, 90px); }
.c-back { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; color: var(--mute); margin-bottom: 40px; padding: 6px 0; transition: color .3s, gap .4s var(--ease); }
.c-back:hover { color: var(--text); gap: 14px; }
.c-title { margin-top: 22px; font-size: clamp(44px, 8.6vw, 156px); font-weight: 200; letter-spacing: -.055em; line-height: .92; max-width: 14ch; }
.c-title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.c-title .line > span { display: inline-block; }
html.js.motion .c-title .line > span { transform: translateY(105%); }
.c-tag { margin-top: 22px; font-size: clamp(19px, 1.8vw, 26px); color: var(--mute); font-weight: 300; letter-spacing: -.02em; }
.c-meta { margin-top: clamp(40px, 7vh, 72px); display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.c-meta div { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); }
.c-meta dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.c-meta dd { margin: 0; font-size: 15px; }
@media (min-width: 1024px) { .c-meta { grid-template-columns: 1fr 1fr .6fr 1.6fr 1.2fr; } }
.c-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.c-shot { perspective: 2000px; }
.c-shot__frame { transform-origin: 50% 0; will-change: transform; position: relative; }
.c-shot__frame::before { content: ''; position: absolute; inset: 10% 6% -8%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); filter: blur(60px); opacity: .5; }
.c-shot .browser { border-radius: 18px; }
.c-shot .browser__bar { height: 38px; }
.c-shot .browser__url { font-size: 11px; height: 22px; max-width: 360px; }

.c-body { display: grid; gap: 56px; padding-top: clamp(100px, 16vh, 180px); padding-bottom: clamp(80px, 12vh, 140px); }
@media (min-width: 1024px) { .c-body { grid-template-columns: 1.2fr 1fr; gap: 8vw; } }
.c-lead { margin-top: 22px; font-size: clamp(24px, 2.6vw, 40px); font-weight: 300; letter-spacing: -.03em; line-height: 1.22; }
.c-sig { margin-top: 18px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 300; letter-spacing: -.02em; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.c-list { margin-top: 10px; }
.c-list li { display: grid; grid-template-columns: 42px 1fr; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--mute); }
.c-list span { font-family: var(--mono); font-size: 12px; color: var(--faint); padding-top: 4px; }

.c-pair { display: grid; gap: clamp(24px, 4vw, 64px); align-items: end; }
@media (min-width: 768px) { .c-pair { grid-template-columns: 1fr 1.5fr; } }
.c-phone { max-width: 360px; margin-inline: auto; width: 100%; }
.c-pair figcaption { margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.c-card__img { aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--s2); }
.c-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.c-note { padding-top: clamp(80px, 12vh, 140px); }
.c-note p { max-width: 70ch; padding: 24px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--s1); color: var(--mute); font-size: 15px; }
.c-note b { color: var(--text); font-weight: 500; }
.c-note a { text-decoration: underline; text-underline-offset: 3px; color: var(--text); }

.c-next { position: relative; display: block; margin-top: clamp(100px, 16vh, 180px); padding: clamp(90px, 16vh, 180px) 0; overflow: hidden; border-top: 1px solid var(--line); isolation: isolate; }
.c-next img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: .14; filter: grayscale(1); transform: scale(1.06); transition: opacity .8s var(--ease), transform 1.4s var(--ease), filter .8s; }
.c-next::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--bg), transparent 30%, transparent 70%, var(--bg)); }
.c-next:hover img { opacity: .32; transform: scale(1); filter: grayscale(0); }
.c-next__in { display: grid; gap: 20px; }
.c-next__t { font-size: clamp(40px, 7vw, 120px); font-weight: 200; letter-spacing: -.05em; line-height: .95; }
.c-next__t i { font-style: normal; display: inline-block; transition: transform .6s var(--ease); }
.c-next:hover .c-next__t i { transform: translateX(16px); }
.case .foot { padding-top: 50px; }
.case .foot__row { margin-top: 0; }