/* step 04: a list of hires builds down the frame over a blurred photo (1em = 16px of the 972px mock-up) */
.s4{position:relative;width:100%;aspect-ratio:972/700;container-type:size;overflow:hidden;background:#3B2A18 url('/assets/images/hiw-step-04-bg.jpg') center / cover no-repeat;font-family:inherit;line-height:1.5}
.s4 *{box-sizing:border-box}
/* sized off the frame height so four cards sit fully in view and the fifth is cut by the bottom edge */
.s4-in{position:absolute;inset:0;font-size:min(calc(100cqh / 35.4), calc(100cqw / 38));color:#fff}
.s4-list{position:absolute;left:50%;top:4.2em;width:29.56em;margin-left:-14.78em;display:flex;flex-direction:column;gap:1.125em}
.s4-card{position:relative;height:6em;border-radius:.875em;flex:none;opacity:0;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(1.1em);backdrop-filter:blur(1.1em);box-sizing:border-box}
.s4-av{position:absolute;left:.88em;top:.63em;width:4.625em;height:4.625em;border-radius:50%;background:#D8D7D0 center / cover no-repeat}
.s4-role{position:absolute;top:1.12em;font-size:1.375em;font-weight:500;letter-spacing:-.015em;line-height:1.2;white-space:nowrap;left:4.8em}
.s4-hired{position:absolute;left:7.6em;top:4.1em;display:flex;align-items:center;gap:.6em;font-size:.9em;line-height:1}
.s4-hired svg,.s4-up svg{display:block;width:1em;height:1em;flex:none}
.s4-up{position:absolute;right:.5em;bottom:.5em;height:2.05em;padding:0 .85em 0 .75em;border-radius:9em;background:#DDF0D8;color:#17591F;display:flex;align-items:center;gap:.5em;font-size:.9em;font-weight:500;line-height:1;white-space:nowrap}