/* Compact visual development gallery; shared portfolio styling stays intact. */
.ai-production-page .ai-section { background: var(--paper); }
.ai-production-page .ai-page-sections { gap: 18px 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ai-page-sections a { color: var(--blue); text-decoration: none; padding-block: 8px; }
.ai-page-sections a:hover { text-decoration: underline; }
.development-section { margin: 64px auto 88px; max-width: 1180px; scroll-margin-top: 32px; }
.development-heading { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 36px; }
.development-heading .eyebrow { color: var(--blue); font-size: 11px; margin-bottom: 16px; }
.development-heading h2 { font: 400 clamp(34px,3.5vw,48px)/1.1 var(--serif); letter-spacing: -.035em; }
.development-heading > p { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 340px; }
.enlarge-note { display: block; font-size: 12px; margin-top: 8px; }
.process-row { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 30px; padding: 30px 0; border-top: 1px solid var(--line); }
.process-label > span { font-size: 11px; color: var(--blue); }
.process-label h3 { font: 400 26px/1.2 var(--serif); letter-spacing: -.025em; margin: 12px 0; }
.process-label p { font-size: 13px; line-height: 1.65; color: var(--muted); max-width: 175px; }
.study-grid { display: grid; gap: 24px 18px; align-items: start; }
.study-card { min-width: 0; }
.study-card a { display: block; border-radius: 10px; overflow: hidden; background: #eeefec; }
.study-card img { width: 100%; object-fit: contain; }
.study-card figcaption { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.face-grid { grid-template-columns: minmax(0,1fr) minmax(0,2fr); max-width: 760px; }
.face-grid img { height: 260px; }
.hair-grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 660px; }
.hair-grid img { height: 245px; }
.wardrobe-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.wardrobe-grid img { height: 240px; background: #fff; }
.wardrobe-grid .turnaround { grid-column: span 2; }
.wardrobe-grid .turnaround img { height: 200px; }
.ensemble { border-top: 1px solid var(--line); padding-top: 30px; margin-top: 8px; }
.ensemble-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 20px; }
.ensemble-heading h3 { font: 400 26px/1.2 var(--serif); }
.ensemble-heading p { font-size: 13px; color: var(--muted); }
.ensemble-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.ensemble-grid img { height: 220px; }
.ensemble-grid figcaption { font-size: 14px; color: var(--ink); }
.environment-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px 22px; align-items: start; }
.environment-card a { display: block; overflow: hidden; border-radius: 10px; }
.environment-card img { width: 100%; aspect-ratio: 1672 / 941; object-fit: contain; }
.environment-card h3 { font: 400 21px/1.25 var(--serif); margin-top: 12px; }
.environment-card p { font-size: 12px; color: var(--muted); margin-top: 6px; }
.portrait-environment { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; grid-column: span 1; }
.portrait-environment img { aspect-ratio: 941 / 1672; }
.portrait-environment figcaption { align-self: center; }
.portrait-environment h3 { font-size: 20px; margin: 0; }
.motion-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.motion-placeholder { aspect-ratio: 16 / 9; border: 1px dashed #c4c8d4; border-radius: 10px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; background: #f0f1f6; }
.motion-placeholder > span { font-size: 11px; color: var(--blue); }
.motion-placeholder p { font: 400 24px/1.2 var(--serif); }
.motion-placeholder small { display: block; font: 400 12px/1.5 Arial,sans-serif; color: var(--muted); margin-top: 8px; }
.ai-production-page .bound-case { max-width: 1180px; margin: auto; }
.ai-production-page .ai-artwork { max-width: 230px; }
.ai-production-page .ai-story h2 { font-size: clamp(34px,4vw,52px); }
.ai-production-page .project-metrics dd { font-size: 34px; }
@media(min-width:1000px) { .portrait-environment:nth-child(4) { grid-column: 1 / 2; } .portrait-environment:nth-child(5) { grid-column: 2 / 3; } }
@media(max-width:900px) {
 .process-row { grid-template-columns: 150px minmax(0,1fr); gap: 24px; }
 .wardrobe-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .wardrobe-grid .turnaround { grid-column: span 2; }
 .environment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .ensemble-grid img { height: 180px; }
}
@media(max-width:600px) {
 .development-section { margin-block: 44px 60px; }
 .development-heading { display: block; margin-bottom: 24px; }
 .development-heading > p { margin-top: 18px; }
 .process-row { grid-template-columns: 1fr; gap: 20px; padding-block: 24px; }
 .process-label h3 { display: inline; margin-left: 12px; font-size: 24px; }
 .process-label p { max-width: none; margin-top: 10px; }
 .face-grid { grid-template-columns: 1fr; }
 .face-grid .study-card:first-child { width: 60%; }
 .face-grid img { height: auto; max-height: 270px; }
 .hair-grid { gap: 10px; }
 .hair-grid img { height: auto; }
 .study-card figcaption { font-size: 11px; }
 .wardrobe-grid img { height: 220px; }
 .wardrobe-grid .turnaround img { height: auto; }
 .ensemble-heading { display: block; }
 .ensemble-heading p { margin-top: 10px; }
 .ensemble-grid { grid-template-columns: 1fr; gap: 24px; }
 .ensemble-grid img { height: auto; max-height: 250px; }
 .environment-grid { grid-template-columns: 1fr; }
 .portrait-environment { max-width: 320px; }
 .motion-grid { grid-template-columns: 1fr; gap: 14px; }
 .motion-placeholder { aspect-ratio: 2.2 / 1; }
}

/* A readable process, from exploration to references for production. */
.workflow-intro { max-width: 1180px; margin: 44px auto 0; }
.workflow-intro .eyebrow { font-size: 11px; color: var(--blue); }
.workflow-intro > p:nth-child(2) { max-width: 780px; font-size: 19px; line-height: 1.65; margin-top: 16px; }
.workflow-intro ol { display: flex; flex-wrap: wrap; gap: 12px 32px; list-style: decimal-leading-zero; padding: 20px 0 0 24px; margin: 0; }
.workflow-intro li { font-size: 12px; color: var(--muted); padding-left: 4px; margin-right: 18px; }
.workflow-intro li::marker { color: var(--blue); }
.hair-grid { max-width: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.hair-grid img { height: auto; aspect-ratio: 16/10; object-fit: contain; }
.study-card figcaption h3 { font: inherit; color: inherit; }
.study-card figcaption p { font-size: 12px; line-height: 1.5; margin-top: 5px; }
.look-grid { grid-template-columns: minmax(0,1fr) minmax(0,2fr); align-items: center; }
.look-grid img { height: 280px; }
.asset-group-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: baseline; margin-bottom: 22px; }
.asset-group-heading h3 { font: 400 27px/1.2 var(--serif); letter-spacing: -.025em; }
.asset-group-heading p { font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 530px; }
.secondary-group { border-top: 1px solid var(--line); padding-top: 30px; margin-top: 38px; }
.contrast-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; max-width: 940px; }
@media(max-width:600px) {
 .workflow-intro > p:nth-child(2) { font-size: 17px; }
 .workflow-intro ol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
 .hair-grid { grid-template-columns: 1fr; }
 .hair-grid img { max-height: 240px; }
 .look-grid { grid-template-columns: 1fr; }
 .look-grid .study-card:first-child { width: 65%; }
 .look-grid img { height: auto; max-height: 300px; }
 .asset-group-heading { grid-template-columns: 1fr; gap: 12px; }
 .contrast-grid { grid-template-columns: 1fr; }
}

/* Expanded identity studies and consistently sized comparisons. */
.face-grid { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: none; }
.face-grid img { width: 100%; height: 230px; object-fit: contain; }
.hair-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.hair-grid a { width: 100%; aspect-ratio: 16 / 9; }
.hair-grid img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
.atmosphere-grid, .world-grid { max-width: none; grid-template-columns: repeat(3,minmax(0,1fr)); }
@media(max-width:900px) {
 .hair-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .atmosphere-grid, .world-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .face-grid { grid-template-columns: 1fr; }
 .face-grid .study-card:first-child { width: 100%; }
 .face-grid img { height: 220px; }
 .hair-grid, .atmosphere-grid, .world-grid { grid-template-columns: 1fr; }
 .hair-grid img { max-height: none; }
}

.motion-video-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; }
.motion-video-card { min-width: 0; }
.motion-video-card video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 10px; background: #151515; }
.motion-video-card figcaption { margin-top: 14px; }
.motion-video-card figcaption span { font-size: 11px; letter-spacing: .07em; color: var(--muted); }
.motion-video-card h3 { margin-top: 7px; font: 400 23px/1.2 var(--serif); }
@media(max-width:900px) { .motion-video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:450px) { .motion-video-grid { gap: 22px 12px; } .motion-video-card h3 { font-size: 19px; } }

.ai-production-page .ai-artwork img { aspect-ratio: 9 / 16; height: auto; border-radius: 10px; }
.series-links { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: baseline; }