/* Scoped to the four secondary projects; the hero and featured work retain their design. */
.project-grid{gap:56px 30px;margin-top:56px}
.project-grid>.project{min-width:0}
.project-grid .card-info{padding:0 0 24px;min-height:136px;align-items:flex-start}
.project-grid .card-info .kicker{font-size:11px;letter-spacing:1.3px;color:#60665c}
.project-grid .card-info h3{font-size:32px;font-weight:650;line-height:1.25;margin:10px 0 10px;letter-spacing:-1px}
.project-grid .card-info p{font-size:16px;line-height:1.7;color:#4d554b;max-width:440px}
.project-grid .card-info .live{font-size:11px;white-space:nowrap;padding-top:3px}
.project-grid .card-stage{height:410px;padding:36px 26px 0;display:flex;align-items:flex-start}
.project-grid .card-stage .browser,.project-grid .card-stage:hover .browser{transform:none;width:100%;margin:0;position:relative;top:0;flex-shrink:0;box-shadow:0 14px 36px #20241f16;transition:translate .25s}
.project-grid .card-stage:hover .browser{translate:0 -4px}
.project-grid .browser-head{height:24px}
.project-grid .browser-head span{font-size:9px}
.project-grid .moa-stage{padding:28px 24px 0}
.project-grid .moa-images{transform:none;gap:18px;margin:0;width:100%;align-items:flex-start}
.project-grid .moa-images img{width:calc(50% - 9px);align-self:flex-start;margin:0;border-radius:10px 10px 0 0}
.project-grid .moa-images img+img{margin-top:0}
.visit-row{display:flex;justify-content:space-between;align-items:center;padding:17px 0 0;gap:14px}
.visit-row>span{font-size:10px;letter-spacing:1px;color:#696e64}
.visit-row>a{font-size:14px;font-weight:600;padding:8px 0;min-height:40px}
.visit-row>a:hover{color:#c4492c}
.project-grid .project-disclosure{margin-top:10px}
.project-grid .project-disclosure>summary{font-size:14px;padding:17px 0}
@media(max-width:900px) and (min-width:651px){.project-grid .card-stage{height:330px;padding:26px 18px 0}.project-grid .card-info{min-height:158px}.project-grid .card-info h3{font-size:27px}.project-grid .card-info p{font-size:15px}.project-grid .card-info .live{display:none}}
@media(max-width:650px){.project-grid{gap:38px;margin-top:34px}.project-grid .card-info{min-height:0;padding-bottom:20px}.project-grid .card-info h3{font-size:28px}.project-grid .card-info p{font-size:16px}.project-grid .card-info .kicker{font-size:10px}.project-grid .card-info .live{font-size:10px}.project-grid .card-stage{height:auto;padding:24px 18px 0}.project-grid .moa-images{gap:12px}.project-grid .moa-images img{width:calc(50% - 6px)}.visit-row>span{font-size:9px;letter-spacing:.5px}}
@media(prefers-reduced-motion:reduce){.project-grid .card-stage:hover .browser{translate:none}}
/* Match the motion feedback of the other project previews. */
.project-grid .moa-images{transition:translate .25s}
.project-grid .moa-stage:hover .moa-images,.project-grid .moa-stage:focus-visible .moa-images{translate:0 -4px}
@media(prefers-reduced-motion:reduce){.project-grid .moa-images{transition:none}.project-grid .moa-stage:hover .moa-images,.project-grid .moa-stage:focus-visible .moa-images{translate:none}}/* Muted backdrops separate the product screens from their frames. */
.project-grid .body-stage{background:#bccdc5}
.project-grid .insight-stage{background:#adbcc9}
.project-grid .ieum-stage{background:#ccc7c1}
.project-grid .moa-stage{background:#d8c6b9}

.ar-showcase .concept-gallery{background:#b9c6bc}
/* Home film: a quieter centered presentation, preserving its 16:9 frame. */
#film .film-player,#film .film-caption,#film .film-portfolio-action{width:80%;margin-left:auto;margin-right:auto}
@media(max-width:768px){#film .film-player,#film .film-caption,#film .film-portfolio-action{width:100%}}/* Home film: equal media and copy columns. */
#film .film-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
#film .film-media,#film .film-copy{min-width:0}
#film .film-player,#film .film-caption,#film .film-portfolio-action{width:100%;margin-left:0;margin-right:0}
#film .film-heading{display:block;margin:0}
#film .film-heading h2{font-size:clamp(28px,3vw,40px);margin:14px 0 24px}
#film .film-intro p{font-size:16px;line-height:1.85;margin:14px 0 18px;word-break:keep-all}
#film .film-intro p br{display:none}
#film .film-portfolio-action{justify-content:flex-start;margin-top:24px}
#film .film-play>span:first-child{width:56px;height:56px;font-size:20px}
#film .film-play>span:last-child{font-size:16px}
#film .film-caption{font-size:11px;flex-wrap:wrap;gap:4px 16px}
@media(max-width:768px){#film .film-split{grid-template-columns:1fr;gap:28px}#film .film-heading h2{font-size:32px}#film .film-portfolio-link{width:auto}}/* Uniform 40% black poster overlay; hidden with the play control on playback. */
#film .film-play,#film .film-play:hover,#film .film-play:focus-visible{background:rgba(0,0,0,.4)}/* One black media frame, aligned with the adjacent portfolio action. */
#film .film-split{align-items:stretch}
#film .film-media{display:flex;flex-direction:column;background:#111411;color:#eee}
#film .film-caption{flex:1;padding:16px 18px;border-bottom:0;color:#c8ccc7;align-items:center}
#film .film-copy{display:flex;flex-direction:column;justify-content:space-between}
#film .film-portfolio-action{margin-bottom:0}
@media(max-width:768px){#film .film-caption{flex:auto}}/* Equal black bands above and below the home film. */
#film .film-media::before{content:"";display:block;height:52px;flex:0 0 52px;background:#111411}
#film .film-caption{flex:0 0 52px;min-height:52px;padding:12px 18px}
@media(max-width:768px){#film .film-media::before{height:68px;flex-basis:68px}#film .film-caption{flex-basis:68px;min-height:68px;justify-content:center}}