/* The third chapter continues the full-bleed cover and chrome service scene. */
.showcase-sequence{--work-stage-height:var(--vf-stage-height);position:relative;isolation:isolate;background:var(--vf-surface)}
.showcase-sequence #vayform-services .ef-stage{height:var(--work-stage-height)}
.work.work--frame{position:relative;width:100%;max-width:none;margin:0;padding:0;background:var(--vf-surface);color:var(--vf-cream);font-family:var(--vf-body);scroll-margin-top:0}
.work--frame *{box-sizing:border-box}
.work-stage{position:relative;isolation:isolate;height:var(--work-stage-height);overflow:hidden;touch-action:pan-y}
.work-visual{position:absolute;inset:0;z-index:0;background:#172017;pointer-events:none}
.work-visual::after,.work-film-poster::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,11,8,.7),rgba(7,11,8,.05) 75%),linear-gradient(0deg,#080d0b 2%,rgba(8,13,11,.88) 15%,rgba(8,13,11,.34) 38%,transparent 66%)}
.work-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:var(--work-position,60% 34%);opacity:0;transform:scale(1.025);transition:opacity .6s cubic-bezier(.2,.65,.3,1),transform .85s cubic-bezier(.2,.65,.3,1)}
.work-image.is-active{opacity:1;transform:scale(1)}
.work-frame-heading{position:absolute;z-index:2;left:max(var(--vf-gutter),calc((100% - 1440px)/2));top:clamp(112px,13svh,144px)}
.work-frame-heading h2{margin:0;font-family:var(--vf-display);font-size:var(--vf-headline);line-height:var(--vf-headline-line);font-weight:900;letter-spacing:var(--vf-headline-spacing);text-transform:uppercase;text-shadow:0 3px 24px #0006}
.work-frame-bottom{position:absolute;z-index:3;left:max(var(--vf-gutter),calc((100% - 1440px)/2));right:max(var(--vf-gutter),calc((100% - 1440px)/2));bottom:calc(var(--vf-scroll-bottom) + 48px + var(--vf-scroll-offset,0px));min-width:0}
.work-caption-row{margin-bottom:12px}
.work-caption{min-width:0}
.work-category{display:block;margin:0;font-size:10px;line-height:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:inherit}
.work-open{display:inline-flex;align-items:flex-end;max-width:100%;margin:0;padding:0;min-height:44px;background:none;border:0;border-radius:0;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;color:var(--vf-cream);transition:color .25s ease}
.work-open:is(:hover,:focus-visible){color:var(--vf-acid)}
.work-thumbs{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.work-thumb{position:relative;display:block;isolation:isolate;min-width:0;min-height:48px;height:clamp(52px,6.5vw,92px);padding:0;border:0;border-bottom:2px solid #7b877166;background:#182015;color:var(--vf-cream);text-align:left;border-radius:0;overflow:hidden}
.work-thumb::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#080d0bd9,transparent 78%);pointer-events:none}
.work-thumb img{display:block;width:100%;height:100%;object-fit:cover;opacity:.62;transform:scale(1);transition:opacity .3s ease,transform .6s ease}
.work-thumb[aria-pressed="true"]{border-bottom-color:var(--vf-acid)}
.work-thumb:is([aria-pressed="true"],:hover,:focus-visible) img{opacity:1;transform:scale(1.04)}
.work--frame button:focus-visible{outline:2px solid var(--vf-acid);outline-offset:4px}
.work--frame .work-thumb:focus-visible{outline-offset:-4px}
.work-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Services pull back into the contact sheet; one project becomes the big frame. */
.work-film{display:none;position:absolute;inset:0;z-index:1;pointer-events:none;transform-origin:50% 50%;opacity:var(--film-board-alpha,0);transform:translateY(var(--film-board-y,0%)) scale(var(--film-board-scale,.57))}
.work-film-poster{position:absolute;width:32%;height:32%;overflow:hidden;background-color:#172017;background-size:cover;background-position:var(--work-position,60% 34%)}
.has-work-film>.services-surface{position:sticky;top:0;z-index:3;transform-origin:50% 50%;opacity:var(--film-service-alpha,1);transform:translateY(var(--film-service-y,0%)) scale(var(--film-service-scale,1))}
.has-work-film>.work{z-index:2}
.has-work-film .work-stage{background:var(--vf-surface);transform:translate3d(0,var(--film-shift,0px),0)}
.has-work-film .work-film{display:block}
.has-work-film .work-visual{opacity:var(--film-final-alpha,0)}
.has-work-film :is(.work-frame-heading,.work-frame-bottom){opacity:var(--film-copy-alpha,0);transform:translateY(var(--film-copy-y,14px))}
.has-work-film .work-stage>.vf-scroll-cue{opacity:var(--film-copy-alpha,0)}
.has-work-film.is-film-moving>.services-surface,.has-work-film.is-film-moving .work-film{will-change:transform,opacity}

@media(max-width:700px){
  .work-frame-heading{top:104px}
  .work-thumbs{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  .work-thumb{height:clamp(48px,7svh,58px)}
  .work-caption-row{margin-bottom:12px}
}
@media(max-width:360px){.work-thumbs{gap:6px}.work-thumb{height:52px}}
@media(max-width:700px) and (max-height:650px){.work-frame-heading{top:96px}.work-caption-row{margin-bottom:10px}.work-thumbs{gap:6px}.work-thumb{height:48px}}
@media(prefers-reduced-motion:reduce){.work--frame *{transition:none!important}.work-image{transform:none!important}}
.motion-paused .work--frame *{transition:none!important}