.work-page{background:#000}.work-page .header{position:relative;background:none;width:100%;max-width:2500px;margin-inline:auto}.work-main,.detail-main{width:100%;max-width:2500px;margin-inline:auto}.work-heading{padding:65px var(--gutter) 65px;position:relative}.work-heading .eyebrow{margin-bottom:25px}.work-heading h1{font-size:clamp(70px,8vw,130px);font-weight:400;line-height:1;letter-spacing:-.045em}.work-hint{position:absolute;right:var(--gutter);bottom:70px;color:var(--muted);font-size:15px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px 22px;padding:0 24px 95px}.project-card{min-width:0;color:var(--ink);display:block}.project-card:hover{color:var(--ink)}.project-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#151515}.project-media img,.project-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.project-media video{opacity:0;transition:opacity .65s ease}.project-card.preview-playing video{opacity:1}.project-arrow{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:34px;height:34px;background:#0007;border-radius:50%;font-size:22px;opacity:0;transition:opacity .2s ease}.project-card:hover .project-arrow,.project-card:focus-visible .project-arrow{opacity:1}.project-caption{display:flex;justify-content:space-between;gap:18px;padding:17px 2px 0}.project-caption h2{font-size:clamp(12px,.88vw,16.8px);font-weight:400;line-height:1.45;word-break:keep-all}.project-caption>span{font-size:12px;color:var(--muted);padding-top:3px}.work-footer{max-width:2500px;width:100%;margin-inline:auto;padding:60px var(--gutter) 65px}.detail-heading{padding:45px var(--gutter) 55px}.detail-heading>a{color:var(--muted);font-size:14px}.detail-heading p{font-size:12px;color:var(--muted);margin-top:65px}.detail-heading h1{font-size:clamp(32px,4.2vw,75px);font-weight:400;letter-spacing:-.03em;line-height:1.25;margin-top:20px;word-break:keep-all}.project-player{display:block;width:100%;max-width:2500px;height:auto;aspect-ratio:16/9;background:#000;object-fit:contain;margin-inline:auto}.project-navigation{display:flex;justify-content:space-between;gap:35px;padding:55px var(--gutter) 75px;font-size:clamp(16px,1.5vw,24px)}.project-navigation a{max-width:45%;line-height:1.5}.project-navigation a:last-child{text-align:right}.project-navigation span{display:block;color:var(--muted);font-size:12px;margin-bottom:14px}
@media(max-width:760px){.work-heading{padding-top:40px;padding-bottom:45px}.work-hint{position:static;margin-top:25px;font-size:13px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px;padding-inline:20px}.project-caption{padding-top:12px;gap:8px}.project-caption h2{font-size:14px}.project-arrow{width:26px;height:26px;right:8px;bottom:8px;font-size:17px}.detail-heading{padding-top:30px;padding-bottom:35px}.detail-heading p{margin-top:40px}.project-navigation{padding-top:35px}.work-footer{padding-bottom:45px}}
@media(max-width:480px){.project-grid{grid-template-columns:1fr}.project-caption h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){.project-media video,.project-arrow{transition:none}}
/* Compact detail header: title and return link share a row. */
.detail-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px var(--gutter) 30px}
.detail-heading h1{font-size:clamp(22.4px,2.4vw,42px);margin:0;min-width:0}
.detail-heading>a{flex-shrink:0;font-size:14px}
@media(max-width:760px){.detail-heading{padding:20px var(--gutter) 24px;gap:18px}.detail-heading h1{font-size:clamp(19.2px,3.84vw,28.8px)}.detail-heading>a{font-size:12px}}

/* Tighter Work landing heading. */
.work-heading{padding-top:35px;padding-bottom:45px}
.work-hint{bottom:50px}
@media(max-width:760px){.work-heading{padding-top:24px;padding-bottom:32px}}

/* Detail reel begins at the top; navigation floats over the image. */
.detail-page .header{position:absolute;inset:0 0 auto;z-index:5;background:none;padding-bottom:55px}
.detail-page .header nav a{color:#fff;text-shadow:0 1px 8px #0008}
.detail-page .header nav a:hover{color:var(--red)}
.detail-page .detail-heading{padding-top:35px;padding-bottom:25px}
.detail-page .project-navigation{padding-top:35px}
/* On mobile, keep the header in document flow above the video. */
@media(max-width:760px){.detail-page .header{position:relative;inset:auto;background:#000;padding-top:26px;padding-bottom:26px}.detail-page .detail-heading{padding-top:25px}}

.sound-play{display:block;margin:20px auto 0;padding:12px 22px;background:#e52622;color:white;border:0;border-radius:4px;font:16px 'SUIT',sans-serif;cursor:pointer}.sound-play[hidden]{display:none}

/* Previous / next projects with the same hover previews as Work. */
.project-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,70px)}
.project-navigation .adjacent-card{max-width:none;width:100%;text-align:left}
.project-navigation .adjacent-card:last-child{text-align:left}
.project-navigation .adjacent-label{margin-bottom:16px;font-size:13px;color:var(--muted)}
.project-navigation .adjacent-card:last-child .adjacent-label{text-align:right}
.project-navigation .project-arrow{display:grid;color:white;font-size:22px;margin:0}
.project-navigation .adjacent-card h2{font-size:clamp(16px,1.5vw,24px);font-weight:400;line-height:1.5;margin:16px 0 0}
@media(max-width:600px){.project-navigation{gap:18px;padding-inline:20px}.project-navigation .adjacent-card h2{font-size:14px}.project-navigation .adjacent-label{font-size:12px}}

/* Compact fixed-size adjacent previews. */
.project-navigation{grid-template-columns:repeat(2,minmax(0,280px));justify-content:space-between;gap:24px}
.project-navigation .adjacent-card{width:100%;max-width:280px}
.project-navigation .adjacent-card h2{font-size:16px;margin-top:12px}
@media(max-width:600px){.project-navigation{grid-template-columns:repeat(2,minmax(0,280px));gap:18px}.project-navigation .adjacent-card h2{font-size:14px}}

/* Subtle boundaries around adjacent projects on detail pages. */
.detail-page .project-navigation{position:relative;margin-top:16px;padding-top:32px;padding-bottom:40px}
.detail-page .project-navigation::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:#303030}
.detail-page .work-footer{position:relative;padding-top:32px}
.detail-page .work-footer::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:#303030}
@media(max-width:600px){.detail-page .project-navigation::before{left:20px;right:20px}}

/* Smaller mobile titles in the Work grid. */
@media(max-width:760px){.project-grid .project-caption h2{font-size:11.2px}}
@media(max-width:480px){.project-grid .project-caption h2{font-size:12.8px}}

/* Muted portfolio captions, matching the reference tone. */
.project-grid .project-caption h2{color:#999999}

/* Brand-red project titles on detail pages. */
.detail-page .detail-heading h1{color:#E52622}

/* Same-origin page transitions carry the clicked preview into the full reel. */
@view-transition{navigation:auto}
.project-opening .project-media,.detail-page .project-player{view-transition-name:project-reel}
.detail-page .project-player.player-leaving{view-transition-name:none}
/* Expand, fade to black, hold for .5s, then fade in the new reel. */
@keyframes project-dissolve-out{from{opacity:1}to{opacity:0}}
@keyframes project-fade-in{from{opacity:0}to{opacity:1}}
::view-transition{background:#000}
::view-transition-group(project-reel){animation-duration:.7s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-old(project-reel){animation:project-dissolve-out .4s ease .7s both;object-fit:cover;mix-blend-mode:normal;z-index:2}
::view-transition-new(project-reel){animation:project-fade-in .8s ease 1.6s both;object-fit:contain;mix-blend-mode:normal;z-index:1}
::view-transition-old(root){animation:project-dissolve-out .4s ease .7s both;z-index:2}
::view-transition-new(root){animation:project-fade-in .8s ease 1.6s both;z-index:1}
.project-player.player-entering{opacity:0;transition:opacity 1.1s ease}
.project-player.player-entering.player-visible{opacity:1}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .project-player.player-entering{transition:none}
}

/* Match the player controls and page layout to the actual uncropped video width. */
.detail-page{--detail-width:min(100%,2500px,calc((100svh - 20px)*16/9))}
.detail-page .detail-main,.detail-page .work-footer{width:var(--detail-width);max-width:2500px;margin-inline:auto}
.detail-page .project-player{width:100%;height:auto;max-height:none;object-fit:contain}
.detail-page .project-player:fullscreen{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto}
@media(max-width:760px){.detail-page{--detail-width:min(100%,2500px,calc((100svh - 90px)*16/9))}}

/* Keep the header above the expanding reel throughout the page transition. */
.work-page .header>a{view-transition-name:project-logo}
.work-page .header nav{view-transition-name:project-menu}
::view-transition-group(root){z-index:0}
::view-transition-group(project-reel){z-index:1}
::view-transition-group(project-logo),::view-transition-group(project-menu){z-index:100;animation-duration:.7s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-old(project-logo),::view-transition-old(project-menu){animation:none;opacity:0;mix-blend-mode:normal}
::view-transition-new(project-logo),::view-transition-new(project-menu){animation:none;opacity:1;mix-blend-mode:normal}
.detail-page .header.header-entering{animation:project-fade-in .8s ease .15s both}
@media(prefers-reduced-motion:reduce){.detail-page .header.header-entering{animation:none}}

/* Keep navigation independent of reel dimensions and snapshot scaling. */
.work-page .header{width:100%;max-width:2500px;padding:40px 48px;margin-inline:auto}
.detail-page .header{width:var(--detail-width);max-width:2500px;margin-inline:auto}
.work-page .header>a,.work-page .header nav{flex-shrink:0}
.work-page .header .logo{width:136px;max-width:none}
@media(max-width:760px){
  .work-page .header{padding:26px 24px}
  .work-page .header .logo{width:93.6px}
}

/* A shared left edge for the reel, project title and editorial content. */
.detail-page .detail-main{box-sizing:border-box;padding-inline:32px}
.detail-page .detail-heading{padding-inline:0}
.detail-page .project-story{padding-inline:0}
@media(max-width:760px){.detail-page .detail-main{padding-inline:24px}}

/* Animate the original playing video before navigation, not a frozen snapshot. */
@view-transition{navigation:none}
.live-opening .project-opening .project-media{overflow:visible;view-transition-name:none}
.live-opening .live-preview{position:fixed!important;inset:auto;z-index:91;opacity:1;transition:none;pointer-events:none;object-fit:cover}
.live-backdrop{position:fixed;inset:0;background:#000;z-index:90;opacity:0;pointer-events:auto}
.live-opening .header{z-index:100!important}
.live-opening{overflow:visible}
.detail-main,.detail-page .work-footer{transition:opacity .8s ease}
.live-arrival .detail-main,.live-arrival .detail-page .work-footer{opacity:0}

/* Vacate the source card as its original video expands. */
.live-opening .project-opening .project-media>img,
.live-opening .project-opening .project-arrow{visibility:hidden}
.live-opening .project-opening .project-media{background:transparent}

.work-page{overflow-anchor:none}

/* Full-width detail reels; retain the inset for titles and editorial content. */
.detail-page{--detail-width:min(100%,2500px)}
.detail-page .project-player{width:calc(100% + 64px);max-width:none;margin-inline:-32px}
@media(max-width:760px){.detail-page{--detail-width:min(100%,2500px)}.detail-page .project-player{width:calc(100% + 48px);margin-inline:-24px}}
.detail-page .project-player:fullscreen{width:100%;height:100%;margin:0}

/* Shared editorial reveal for every current and future Work detail page. */
.detail-page .media-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.65,0,.25,1) var(--reveal-delay,0ms)}
.detail-page .media-reveal.media-revealed{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.detail-page .media-reveal{clip-path:none;transition:none}}