/* Projects opens as a viewport film, then settles into a rounded frame on scroll. */
body[data-page="work"]{padding-top:0;--work-cinema-tail:0px}
body[data-page="work"] .site-header{position:fixed;inset:0 0 auto;z-index:1000}
.work-intro.work-cinema{position:relative;width:100%;height:100svh;margin:0;border-radius:0;overflow:visible;background:var(--paper)}
.work-intro.work-cinema.is-scroll-ready{height:calc(100svh + var(--work-cinema-travel,70svh))}
.work-cinema-stage{position:sticky;top:0;width:100%;height:100svh;overflow:hidden;isolation:isolate}
.work-cinema-window{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#171719;clip-path:inset(0px round 0px);will-change:clip-path}
.work-cinema-window .work-intro-art{position:absolute;inset:0;z-index:0}
.work-cinema-window .work-intro-art video{position:absolute;left:50%;top:0;max-width:none;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateX(-50%);transform-origin:center center;will-change:transform}
.work-cinema-window .work-intro-shade{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse min(1450px,118vw) 96% at 0% 100%,rgba(16,17,18,0.70941) 0%,rgba(16,17,18,0.57529) 24%,rgba(16,17,18,0.40588) 48%,rgba(16,17,18,0.22588) 70%,rgba(16,17,18,0.06706) 88%,transparent 100%);opacity:var(--work-copy-opacity,1)}
.work-cinema-window .work-intro-copy{z-index:2;opacity:var(--work-copy-opacity,1);transform:translate3d(0,var(--work-copy-drift,0px),0);will-change:opacity,transform}
.work-cinema-window .work-video-controls{z-index:2;opacity:var(--work-copy-opacity,1);will-change:opacity,transform}
.work-video-controls{display:flex;gap:10px;position:absolute;bottom:24px;right:24px;z-index:2}
.work-video-controls button{display:flex;align-items:center;gap:18px;background:#171715ad;color:#fff;border:0;border-radius:var(--ag-pill-radius);padding:12px 18px;min-height:46px;backdrop-filter:blur(12px);font-size:13px;cursor:pointer}
.work-video-controls button:hover{background:#171715e6}
.work-video-controls button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.work-video-controls svg{width:16px;height:16px}
.work-cinema+.work-approach{position:relative;z-index:2;margin-top:calc(var(--ag-section-space) - var(--work-cinema-tail))}
@media(max-width:600px){
  .work-intro.work-cinema{height:100svh;margin:0;border-radius:0}
  .work-cinema-window .work-intro-shade{background:linear-gradient(0deg,rgba(10,13,20,0.73412),transparent 95%),linear-gradient(90deg,rgba(10,13,20,0.40588),transparent)}
  .work-video-controls{right:12px;bottom:12px;gap:7px}
  .work-video-controls button{min-height:40px;padding:9px 12px;font-size:12px;gap:8px}
  .work-video-controls svg{width:14px;height:14px}
  .work-cinema+.work-approach{margin-top:calc(68px - var(--work-cinema-tail))}
}
@media(prefers-reduced-motion:reduce){
  .work-intro.work-cinema.is-scroll-ready{height:100svh}
  .work-cinema-stage{position:relative}
  .work-cinema-window,.work-cinema-window .work-intro-art video{will-change:auto}
}
@media print{body[data-page="work"] .work-cinema{display:none}body[data-page="work"] .work-cinema+.work-approach{margin-top:0}}

/* Match the Home/Demo wordmark reveal over the opening film. */
body[data-page="work"]{--work-header:0}
body[data-page="work"] > .site-header .brand::before{opacity:var(--work-header)}
body[data-page="work"].mobile-menu-open > .site-header .brand::before{opacity:1}

/* Opening copy uses the exact Home/Demo anchors at every viewport size. */
.work-cinema-window .work-intro-copy{left:clamp(28px,6.4vw,112px);top:auto;bottom:clamp(92px,10svh,140px);width:min(53vw,800px);max-width:none;margin:0;padding:0;text-align:left}
@media(max-width:900px){.work-cinema-window .work-intro-copy{left:32px;width:65vw}}
@media(max-width:600px){.work-cinema-window .work-intro-copy{left:24px;width:calc(100% - 48px);bottom:clamp(136px,16svh,182px)}}
@media(max-height:700px) and (max-width:600px){.work-cinema-window .work-intro-copy{bottom:124px}}
@media(max-height:580px) and (min-width:601px){.work-cinema-window .work-intro-copy{bottom:78px}}

/* Compact landscape keeps the aligned copy clear of the fixed navigation. */
@media(max-height:580px) and (min-width:601px){
  .work-cinema-window .work-intro-copy h1{font-size:34px;line-height:1.04;margin:10px 0 14px}
  .work-cinema-window .work-intro-copy>p{font-size:14px;line-height:1.4;margin:0;max-width:510px}
  .work-cinema-window .work-intro-copy>.eyebrow{font-size:10px}
  .work-cinema-window .work-services{margin-top:17px}
}