/* Original image classes stay on the frame, so their responsive geometry still applies. */
:where(.media-photo-frame){
 position:relative;
 display:block;
 max-width:100%;
 aspect-ratio:var(--media-ratio);
 overflow:hidden;
 object-fit:cover;
 object-position:center;
 isolation:isolate;
}
.media-photo-frame>img[data-media-photo]{
 position:absolute;
 inset:0;
 display:block;
 width:100%;
 height:100%;
 min-width:0;
 min-height:0;
 max-width:none;
 max-height:none;
 margin:0;
 border-radius:inherit;
 object-fit:inherit;
 object-position:inherit;
 opacity:1;
 transform:none;
}
.motion-flow>.motion-step.reveal-pending>.media-photo-frame{opacity:1;transition:none}
/* The frame owns the rounded crop; its cover moves without changing shape. */
.media-photo-frame::after{
 content:'';
 position:absolute;
 inset:0;
 z-index:1;
 pointer-events:none;
 background:linear-gradient(105deg,#007fae,#28b9e5);
 opacity:0;
 transform:translate3d(100%,0,0);
}
.hero-photo-wrap>.media-photo-frame{border-radius:inherit}
.media-render-ready::after{will-change:transform,opacity}
.media-render-ready>img[data-media-photo]{will-change:opacity;transform:translateZ(0);backface-visibility:hidden}
.media-prepare .media-photo-frame[data-media-state=armed]>img[data-media-photo]{opacity:0}
.media-prepare .media-photo-frame[data-media-state=playing]>img[data-media-photo]{animation:media-photo-image .7s ease-in-out .17s both}
.media-prepare .media-photo-frame[data-media-state=playing]::after{
 animation:media-photo-cover 1.05s cubic-bezier(.4,0,.2,1) both,media-photo-tint 1.05s ease-in-out both;
}
.media-motion-paused .media-photo-frame[data-media-state=playing]>img[data-media-photo],
.media-motion-paused .media-photo-frame[data-media-state=playing]::after{animation-play-state:paused}
/* Both layers start transparent, so the first frame matches the waiting state. */
@keyframes media-photo-image{from{opacity:0}to{opacity:1}}
@keyframes media-photo-cover{
 from{transform:translate3d(0,0,0)}
 to{transform:translate3d(100%,0,0)}
}
/* Opacity has its own timeline; it cannot interrupt the cover's continuous travel. */
@keyframes media-photo-tint{
 0%{opacity:0}
 16%,76%{opacity:1}
 100%{opacity:0}
}
/* These parent selectors previously sized their direct img; the frame takes that place. */
.hero-photo-wrap>.media-photo-frame,
.empathy-photo>.media-photo-frame{width:100%;height:100%;aspect-ratio:auto}
.empathy-photo>.media-photo-frame{object-position:center bottom}
.recruit-page .rec-flow-heading>.media-photo-frame{width:440px;height:288px;object-position:center 49%;margin-top:80px;border-radius:16px}
@media(max-width:1200px){.recruit-page .rec-flow-heading>.media-photo-frame{width:100%;height:auto;aspect-ratio:440/288}}
@media(max-width:760px){.recruit-page .rec-flow-heading>.media-photo-frame{margin:30px 0 40px;max-width:440px}}
/* Footer scenery remains static on desktop and mobile. */
.media-prepare .footer-photo.media-photo-frame>img[data-media-photo]{opacity:1;animation:none}
.footer-photo.media-photo-frame::after{display:none;animation:none}
@media(max-width:700px){
 .hero-photo-wrap>.media-photo-frame{object-position:68% center}
 .empathy-photo>.media-photo-frame{object-position:48% center}
 .footer-photo.media-photo-frame{object-position:left bottom}
}
@media(prefers-reduced-motion:reduce){
 .media-photo-frame>img[data-media-photo]{opacity:1!important;animation:none!important}
 .media-photo-frame::after{transform:scaleX(0)!important;animation:none!important}
}