/* Case study (single project) */
.cs-hero-sec.wm-section--hero { padding-top: 64px; }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; font-size: 14px; line-height: 21px; color: var(--muted); }
.crumb a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.cs-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.cs-hero--solo { grid-template-columns: minmax(0, 820px); }
.cs-left { display: flex; flex-direction: column; gap: 28px; }
.cs-left .wm-h1 { margin: 0; }
.cs-tagrow { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.cs-tagrow-h { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 24px; font-weight: 700; color: var(--ink); }
.did { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.did li { position: relative; padding: 8px 14px 8px 38px; background: var(--white); border-radius: 6px; box-shadow: inset 0 0 0 1px #D9D6CE; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.did li::before { content: ""; position: absolute; left: 12px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%231F1F1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cs-story { display: flex; flex-direction: column; gap: 16px; padding: 40px 48px 48px; background: var(--lake); border-radius: 0 80px 0 0; }
.cs-story h2 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; color: var(--ink); }
.cs-story p { margin: 0; max-width: 64ch; font-size: 18px; line-height: 29px; color: var(--muted); }
.cs-head .wm-head-text { max-width: 680px; }

/* Before & after (charcoal) */
.cs-ba-sec .wm-eyebrow { color: #C9C6BE; }
.cs-ba-sec .wm-h2 { color: var(--white); }
.br { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border-radius: 12px; }
.br-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; background: var(--birch); flex: none; }
.br-bar i { width: 8px; height: 8px; border-radius: 50%; background: #D9D6CE; }
.br-url { margin-left: 8px; flex: 1; max-width: 40%; height: 20px; padding: 0 10px; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; line-height: 20px; color: #8A877F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-scr { position: relative; overflow: hidden; }
.ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ba--solo { grid-template-columns: minmax(0, 820px); }
.ba figure, .screens figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ba figcaption, .screens figcaption { font-size: 14px; line-height: 21px; color: #C9C6BE; }
.ba figcaption a { color: var(--white); font-weight: 600; text-underline-offset: 3px; }
.ba .frame { position: relative; height: 460px; box-shadow: 0 0 0 1px #4A4A46, 0 24px 48px -24px rgba(0, 0, 0, 0.5); }
.ba .br-scr { height: 428px; flex: none; }
.shot { display: block; width: 100%; height: auto; max-width: none; will-change: transform; } /* Animated by the shared wm-shot loop in portfolio.css. */
.tag { position: absolute; top: 48px; left: 16px; padding: 4px 12px; font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 0 0 12px 0; }
.tag-b { background: var(--white); color: var(--muted); }
.tag-a { background: var(--yellow); color: var(--ink); }
.screens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.5fr); gap: 24px; margin-top: 48px; align-items: end; }
.screens img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 0 0 1px #4A4A46; }
.screens .phone img { aspect-ratio: 9 / 18; border-radius: 20px; box-shadow: 0 0 0 2px #C9C6BE; }

/* What we built */
.built { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bcard { display: flex; flex-direction: column; gap: 12px; padding: 32px; background: var(--white); border-radius: 12px; box-shadow: 0 12px 24px -20px rgba(31, 31, 31, 0.16); }
.bcard svg { color: var(--indigo); }
.bcard h3 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; }
.bcard p { margin: 0; color: var(--muted); }
.tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 4px 10px; border-radius: 6px; background: var(--birch); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }

/* Results (lake) */
.cs-res-sec { border-radius: 0 80px 0 0; }
.res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.res--solo { grid-template-columns: minmax(0, 820px); }
.res-text { display: flex; flex-direction: column; gap: 20px; }
.res-text .wm-head-text { gap: 20px; }
.res-text .wm-lead { margin-top: 0; color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 24px; border-top: 1px solid rgba(23, 59, 61, 0.18); }
.stat-n { font-family: var(--font-display); font-size: 48px; line-height: 54px; font-weight: 700; color: var(--ink); }
.stat-l { font-size: 15px; line-height: 23px; color: var(--muted); }
.quote { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 40px; background: var(--white); border-radius: 12px; box-shadow: 0 20px 36px -22px rgba(42, 49, 122, 0.35); }
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 34px; font-weight: 600; color: var(--ink); }
.quote figcaption { margin-top: 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.quote .q-av { width: 44px; height: 44px; }
.quote .q-av--initials { background: var(--lake); }

/* Next case study + CTA */
.next { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.next--solo { grid-template-columns: minmax(0, 640px); }
.ncard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; background: var(--white); border-radius: 12px; color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ncard:hover { color: var(--ink); transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), 0 18px 36px -20px rgba(31, 31, 31, 0.3); }
.ncard-shot { position: relative; display: block; min-height: 260px; overflow: hidden; background: var(--line); }
.ncard-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ncard-body { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 32px; }
.ncard-h { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; }
.ncard-p { color: var(--muted); }
.ncard-arr { position: relative; width: 50px; height: 11px; margin-top: 8px; color: var(--indigo); transition: transform 0.2s ease; }
.ncard-arr::before { content: ""; position: absolute; top: 2px; right: 0; width: 7px; height: 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(-45deg); }
.ncard-arr::after { content: ""; position: absolute; top: 5px; left: 0; right: 0; border-bottom: 1.5px solid; }
.ncard:hover .ncard-arr { transform: translateX(6px); }
.cta-box { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 40px; background: var(--white); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line); }
.cta-box h2 { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; }
.cta-box p { margin: 0; color: var(--muted); }
.cta-btn { padding-top: 8px; }

@media (prefers-reduced-motion: reduce) {
	.js-shots .shot { animation: none; }
	.ncard, .ncard:hover, .ncard-arr { transition: none; transform: none; }
}
@media (max-width: 900px) {
	.cs-hero, .res, .next { grid-template-columns: 1fr; gap: 40px; }
	.screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.cs-hero-sec.wm-section--hero { padding-top: 40px; }
	.cs-story { padding: 28px 24px 32px; border-radius: 0 48px 0 0; }
	.built, .ba, .stats { grid-template-columns: 1fr; }
	.screens { grid-template-columns: 1fr 0.6fr; }
	.screens figure:first-child { grid-column: 1 / -1; }
	.ncard { grid-template-columns: 1fr; }
	.ncard-shot { min-height: 200px; }
	.quote { padding: 28px; }
	.quote blockquote { font-size: 20px; line-height: 30px; }
	.ba .frame { height: 360px; }
	.ba .br-scr { height: 328px; }
	.cs-res-sec { border-radius: 0 48px 0 0; }
	.cta-box { padding: 28px; }
}