.ov-case { color: var(--ink); }
.case-wrap { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.case-intro { padding-top: 112px; padding-bottom: 28px; }
.case-eyebrow, .case-preview-label { display: flex; justify-content: space-between; gap: 20px; font: 11px/1.6 var(--mono); letter-spacing: .13em; }
.case-eyebrow { padding-bottom: 20px; border-bottom: 1px solid var(--line); color: var(--muted); }
.case-eyebrow > span:first-child { color: var(--red); }
.case-intro-grid { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 64px; margin: 30px 0; }
.case-project { font: 12px/1.8 var(--sans); letter-spacing: .12em; margin: 0 0 24px; }
.case-intro h1 { font-size: clamp(36px, 4.6vw, 62px); line-height: 1.45; font-weight: 500; letter-spacing: -.035em; margin: 0; }
.case-intro-copy { font: 14px/2 var(--sans); }
.case-intro-copy p { margin: 0 0 20px; }
.case-text-link { display: inline-flex; gap: 30px; align-items: center; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 6px; font: 13px/1.8 var(--sans); }
.case-text-link:hover { color: var(--red); }
.ov-case a:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; font: 11px/1.8 var(--sans); color: var(--muted); border-top: 1px solid var(--line); padding-top: 22px; }
.case-meta .case-fiction { margin-left: auto; color: var(--red); }
.case-showcase { background: #dcd4c7; padding: 30px 0 34px; }
.case-preview-label { padding-bottom: 18px; color: #62594f; }
.case-preview-label a { font-family: var(--sans); text-decoration: none; letter-spacing: .02em; }
.case-browser { box-shadow: 0 20px 50px #34271e21; border: 1px solid #bfb5a6; border-radius: 7px; overflow: hidden; background: #f7f4ee; }
.case-browser-bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; font: 9px/1.5 var(--mono); letter-spacing: .1em; color: #807568; border-bottom: 1px solid #d5cec3; }
.case-browser-bar > span:first-child { color: #b2a797; letter-spacing: .3em; }
.case-live-window { container-type: inline-size; height: auto; aspect-ratio: 1440 / 950; overflow: hidden; }
.case-live-window iframe { display: block; width: 1440px; height: 950px; border: 0; transform-origin: top left; transform: scale(calc(100cqw / 1440px)); pointer-events: none; }
.case-caption { margin: 20px 0 0; font: 11px/1.9 var(--sans); color: #62594f; }
.case-caption a { margin-left: 8px; }
.case-section { padding-block: 100px; }
.case-section-label { font: 11px/1.7 var(--mono); letter-spacing: .13em; color: var(--red); margin: 0 0 34px; }
.case-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.ov-case h2 { font-size: clamp(28px, 3.2vw, 43px); line-height: 1.65; letter-spacing: -.025em; font-weight: 500; margin: 0; }
.case-prose { font: 15px/2.1 var(--sans); color: #514a43; }
.case-prose p { margin: 0 0 22px; }
.case-brief-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 46px; }
.case-brief-grid > div { border-top: 1px solid #b7aa9b; padding-top: 22px; }
.case-brief-grid h3 { font: 500 16px/1.6 var(--serif); margin: 0 0 14px; }
.case-brief-grid p { font: 14px/2 var(--sans); color: #62594f; margin: 0; }
.case-decisions { padding: 90px 0 32px; background: var(--black); color: var(--ivory); }
.case-decisions .case-section-label { color: #b99987; }
.case-decisions-head { display: flex; justify-content: space-between; align-items: end; gap: 36px; padding-bottom: 64px; }
.case-decisions-head > p { font: 14px/2 var(--sans); color: #bcb5aa; }
.case-decision { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 76px; padding: 60px 0; border-top: 1px solid var(--darkline); }
.case-decision figure { margin: 0; }
.case-decision img { display: block; width: 100%; height: auto; }
.case-decision figcaption { margin-top: 16px; font: 11px/1.8 var(--sans); color: #bcb5aa; letter-spacing: .04em; }
.case-number { font: 16px/1 var(--mono); color: #a98674; }
.case-decision h3 { margin: 24px 0; font: 500 clamp(22px,2.2vw,29px)/1.6 var(--serif); letter-spacing: -.02em; }
.case-decision-copy p { font: 14px/2.15 var(--sans); color: #bcb5aa; margin: 0 0 18px; }
.case-decision .case-text-link:hover { color: #d8b4a0; }
.case-decision-reverse > :first-child { order: 2; }
.case-plan-detail { background: #ebe3d6; color: #3f332b; padding: 30px 34px; }
.case-detail-label { margin: 0 0 22px; font: 11px/1.8 var(--sans); letter-spacing: .08em; }
.case-plan-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 15px 0; border-top: 1px solid #b9a997; }
.case-plan-row > span { font: 13px/1.6 var(--sans); }
.case-plan-row strong { font: 400 30px/1.4 var(--serif); letter-spacing: -.025em; }
.case-plan-row small { font: 12px var(--sans); margin-left: 5px; }
.case-plan-detail > p:not(.case-detail-label) { font: 12px/1.8 var(--sans); margin: 20px 0 10px; }
.case-plan-detail > small { display: block; font: 10px/1.8 var(--sans); color: #746557; }
.case-flow-detail { padding: 30px 34px; border: 1px solid #61594f; }
.case-flow-detail ol { padding: 0; margin: 0; list-style: none; }
.case-flow-detail li { padding: 19px 0; font: 15px/1.7 var(--sans); border-top: 1px solid var(--darkline); }
.case-flow-detail li span { font: 10px/1 var(--mono); color: #aa9583; margin-right: 18px; }
.case-flow-detail li:last-child { background: #895044; padding-inline: 16px; margin: 6px -16px 0; border: 0; }
.case-flow-detail li:last-child span { color: #e7cbbd; }
.case-flow-detail b { float: right; font-weight: 400; }
.case-flow-detail > p:last-child { font: 11px/1.8 var(--sans); color: #bcb5aa; margin: 20px 0 0; }
.case-scope { margin: 48px 0 0; font: 14px/2 var(--sans); }
.case-scope > div { display: grid; grid-template-columns: 220px 1fr; gap: 30px; padding: 24px 0; border-top: 1px solid var(--line); }
.case-scope dt { color: #76685b; }
.case-scope dd { margin: 0; }
.case-note { margin-top: 34px; padding: 24px 28px; border-left: 2px solid #895044; background: #ebe3d66b; }
.case-note h3 { margin: 0 0 8px; font: 500 13px/1.8 var(--sans); }
.case-note p { margin: 0; font: 12px/2 var(--sans); color: #64584d; }
.case-end { padding: 90px 0; background: #e5ddcf; border-top: 1px solid var(--line); }
.case-end > .case-wrap { position: relative; }
.case-end h2 { margin-bottom: 26px; }
.case-end p:not(.case-section-label) { font: 14px/2 var(--sans); color: #62594f; }
.case-end-links { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; margin-top: 36px; }
.case-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 52px; padding: 20px 26px; background: #895044; color: #fff; text-decoration: none; font: 13px/1.8 var(--sans); }
.case-button:hover { background: var(--ink); }
@media(max-width:900px) {
  .case-intro-grid, .case-editorial { grid-template-columns: 1fr; gap: 28px; }
  .case-intro-copy { max-width: 42em; }
  .case-decision { gap: 34px; }
  .case-decision h3 { font-size: 22px; }
  .case-plan-detail, .case-flow-detail { padding: 26px; }
}
@media(max-width:600px) {
  .case-wrap { width: calc(100% - 36px); }
  .case-intro { padding-top: 116px; padding-bottom: 28px; }
  .case-eyebrow { font-size: 9px; gap: 12px; padding-bottom: 22px; }
  .case-intro-grid { margin: 30px 0; }
  .case-intro h1 { font-size: clamp(29px,8.5vw,44px); }
  .case-project { font-size: 10px; }
  .case-intro-copy { font-size: 14px; }
  .case-meta { gap: 8px 18px; font-size: 10px; }
  .case-meta .case-fiction { width: 100%; margin: 0; }
  .case-showcase { padding-top: 22px; }
  .case-preview-label { font-size: 10px; }
  .case-browser-bar { font-size: 8px; padding: 10px; }
  .case-browser-bar > span:first-child { display: none; }
  .case-live-window { aspect-ratio: 390 / 740; }
  .case-live-window iframe { width: 390px; height: 740px; transform: scale(calc(100cqw / 390px)); }
  .case-section { padding-block: 64px; }
  .case-brief-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 30px; }
  .case-decisions { padding-top: 64px; }
  .case-decisions-head { display: block; padding-bottom: 30px; }
  .case-decision { grid-template-columns: 1fr; padding: 36px 0; }
  .case-decision-reverse > :first-child { order: 0; }
  .case-scope > div { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .case-note { padding: 20px; }
  .case-end { padding: 64px 0; }
  .case-end h2 { font-size: 27px; }
  .case-button { width: 100%; gap: 18px; padding: 20px; }
}