/* Figma Pattern/ProjectStudio 1211:28214. Distinct native scene per case. */
.project-card.project-studio{display:grid;grid-template-columns:minmax(0,832fr) minmax(0,400fr);gap:clamp(32px,4.444vw,64px);align-items:end;min-height:0;padding:0;border:0;border-radius:8px;background:transparent;box-shadow:none;overflow:hidden}
.project-studio.studio-reverse{grid-template-columns:minmax(0,400fr) minmax(0,832fr)}
.project-studio.studio-reverse .studio-scene{grid-column:2;grid-row:1}
.project-studio.studio-reverse .project-content{grid-column:1;grid-row:1}
.project-studio .project-content{display:flex;flex-direction:column;align-items:flex-start;position:relative;gap:16px;width:100%;max-width:none;margin:0;padding:0 0 24px;min-width:0}
.project-studio .project-content>*{margin:0;max-width:100%}
.project-studio .project-content .eyebrow,.project-studio .project-tags{font:400 16px/24px 'Roboto Flex',sans-serif;letter-spacing:0;color:var(--paper)}
.project-studio .project-description{font:400 20px/30px 'Roboto Flex',sans-serif}
.project-studio .project-metrics{max-width:none;width:100%}
.project-studio .project-metrics-row>div{border-color:var(--lime)}
.project-studio .project-action{width:220px;max-width:100%;min-height:47px;padding:12px 0 8px;font:500 11px/14px 'Roboto Flex',sans-serif;letter-spacing:1.6px}
.project-studio .project-action img{width:14px;height:14px}
.project-studio::after{border-radius:8px}
[data-page="home"] .project-list,[data-page="work"] .project-list{gap:96px}
.studio-scene{position:relative;display:block;aspect-ratio:8/5;width:100%;min-width:0;overflow:hidden;border-radius:8px;background:var(--paper);container-type:inline-size}
.studio-scene img{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none}
.studio-scene .studio-background{object-fit:cover}
.studio-device{position:absolute;display:block;overflow:hidden;filter:drop-shadow(0 8px 12px #1210107a) drop-shadow(0 16px 24px #1210103d)}
.studio-notebook{aspect-ratio:1296/738}
.studio-turn .studio-notebook{left:6.129808%;top:11.923077%;width:87.740385%}
.studio-ds .studio-notebook{left:6.129808%;top:11.923077%;width:87.740385%}
.studio-notebook-frame{position:absolute;inset:-37.97% 0 -37.64%}
.studio-notebook-frame img{object-fit:cover}
.studio-notebook-screen{position:absolute;inset:11.87% 16.49% 15.04%;overflow:hidden;background:#000}
.studio-ds-screen{display:block;position:absolute;top:0;left:0;width:100%;height:100%}
.studio-phone{aspect-ratio:280/572.25}
.studio-tb .studio-phone-1{left:27.644231%;top:13.461538%;width:20.913462%}
.studio-tb .studio-phone-2{left:51.5625%;top:21.538462%;width:18.509615%}
.studio-ia .studio-phone{left:37.680288%;top:10%;width:24.639423%;transform:none;transform-origin:top left}
.studio-phone-frame{position:absolute;left:-10.844%;top:-6.1166%;width:121.563%;height:112.646%}
.studio-phone-frame img{object-fit:cover}
.studio-phone-screen{position:absolute;left:3.75%;top:2.14%;overflow:hidden;border-radius:2px}
.studio-tb .studio-phone-1 .studio-phone-screen{width:100.594%;height:104.759%}
.studio-tb .studio-phone-2 .studio-phone-screen{width:89.031%;height:92.718%}
.studio-ia .studio-phone-screen{width:118.516%;height:123.423%}
.studio-capture-crop{position:absolute;left:.85%;top:0;width:98.3%;height:100%;overflow:hidden}
.studio-capture-strip{position:absolute;left:0;top:0;width:300%;height:100%}
.studio-phone-2 .studio-capture-strip{left:-100%}
@media(max-width:1000px){
 .project-card.project-studio,.project-studio.studio-reverse{grid-template-columns:minmax(0,1fr);gap:24px}
 .project-studio.studio-reverse .studio-scene,.project-studio.studio-reverse .project-content{grid-column:auto;grid-row:auto}
 .project-studio .project-content{padding:0}
}
@media(max-width:760px){
 [data-page="home"] .project-list,[data-page="work"] .project-list{gap:64px}
 .project-studio .project-description{font-size:17px;line-height:28px}
 .project-studio .project-action{width:188px}
 .studio-device{filter:drop-shadow(0 3px 5px #1210107a) drop-shadow(0 7px 10px #1210103d)}
}

/* Black aperture and exact safe screen bounds; no evidence outside device. */
.studio-phone-screen{background:#000}
.studio-tb .studio-phone-1 .studio-phone-screen,.studio-tb .studio-phone-2 .studio-phone-screen,.studio-ia .studio-phone-screen{width:92.5%;height:96.33%}
.studio-ds .studio-notebook-screen>img{visibility:hidden}
.studio-notebook::after{content:"";position:absolute;left:16.4861%;top:9.9833%;width:67.0264%;height:1.9245%;background:#000;pointer-events:none}

/* Turn2C: quiet native fields, no textured environment; retain black aperture. */
.studio-turn .studio-device{filter:drop-shadow(0 4px 7px #1210102e)}
@media(max-width:760px){.studio-turn .studio-device{filter:drop-shadow(0 2px 4px #1210102e)}}

/* Shared safe area: constant in default, hover, focus and pressed states. */
.project-studio .project-content{padding:24px}
@media(max-width:760px){.project-studio .project-content{padding:20px}}

/* Central-stage progression, each rate uses the preceding stage as its base. */
.project-studio .project-progression{grid-template-columns:1fr;gap:6px}
.project-studio .project-progression>div{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:7px 10px}
.project-studio .project-progression dt{font-size:12px;line-height:16px}
.project-studio .project-progression dd{order:0;grid-column:2;grid-row:1/3;align-self:center}
.project-studio .project-progression small{font:400 10px/14px 'Roboto Flex',sans-serif;color:var(--muted)}
.project-studio .project-progression>div{grid-template-columns:52px 1fr}
.project-studio .project-progression dd{grid-column:1;grid-row:1/3}
.project-studio .project-progression dt,.project-studio .project-progression small{grid-column:2}

/* Turn2C preview mirrors the three outcomes documented in the case. */
.project-studio .project-outcomes{grid-template-columns:minmax(0,1fr);gap:8px}

/* Keep both columns on the same vertical grid when outcome copy grows. */
@media(min-width:1001px){
 .project-card.project-studio{align-items:stretch}
 .project-studio .studio-scene{height:100%}
 .project-studio .project-content{justify-content:center}
}