@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&display=swap');
:root{--blue:#0d2b47;--paper:#fff;--ink:#111;--white:#fff;--drawer:rgba(13,43,71,.96);--drawerText:#fff}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--blue);color:var(--ink)}
body{font-family:Barlow,Arial,sans-serif}
a,button{font:inherit;color:inherit}
a{text-decoration:none}
.top-hit-zone{position:fixed;z-index:100;top:0;left:0;width:100%;height:18px;background:transparent}
.site-chrome{position:fixed;z-index:110;top:0;left:0;width:100%;height:58px;background:rgba(0,0,0,.96);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .22s ease;transform:translateY(-44px)}
.site-chrome:hover,.site-chrome.is-open,.top-hit-zone:hover + .site-chrome{transform:translateY(0)}
.logo-mark{position:absolute;left:22px;top:17px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#fff}
.logo-mark img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.main-nav{display:flex;align-items:center;justify-content:center;gap:42px;height:100%;font-size:18px;font-weight:400;letter-spacing:.02em}
.main-nav a{color:#fff;opacity:.82;white-space:nowrap}.main-nav a:hover{opacity:1}
.nav-work{position:relative;height:100%;display:flex;align-items:center}
.works-submenu{position:absolute;top:58px;left:50%;min-width:146px;padding:10px 16px 12px;background:rgba(0,0,0,.96);display:none;transform:translateX(-50%)}
.nav-work:hover .works-submenu,.nav-work:focus-within .works-submenu{display:block}
.works-submenu a{display:block;padding:7px 0;font-size:15px;letter-spacing:.02em}
.mobile-menu-button{display:none;background:none;border:0;color:#fff}
.work-stage{position:fixed;inset:0;width:100vw;height:100vh;background:var(--blue);overflow:hidden}
.work-media{position:absolute;inset:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:var(--blue);overflow:hidden}
#work-image,#work-video{position:absolute!important;inset:0!important;display:block!important;width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;min-width:100vw!important;min-height:100vh!important;object-fit:cover!important;object-position:center center;opacity:1;transition:opacity .28s ease}
#work-image,.work-thumb img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
#work-image.is-fading,#work-video.is-fading{opacity:0}
.work-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10vw}
.drawer{position:absolute;top:0;height:100%;width:min(520px,33.333333vw);background:var(--drawer);color:var(--drawerText);z-index:30;transition:transform .28s ease}
.drawer-content{height:100%;overflow:auto}
/* Subtle, platform-consistent scrollbars for the two side panels. */
.drawer-content{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.58) transparent}
.drawer-content::-webkit-scrollbar{width:6px}
.drawer-content::-webkit-scrollbar-track{background:transparent}
.drawer-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.58);border:2px solid transparent;border-radius:999px;background-clip:padding-box}
.drawer-content::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.88)}
.drawer-content::-webkit-scrollbar-button{display:none}
.drawer-description{left:0;transform:translateX(-100%)}
.drawer-description:hover,.drawer-description.is-open{transform:translateX(0)}
.drawer-thumbnails{right:0;transform:translateX(100%)}
.drawer-thumbnails:hover,.drawer-thumbnails.is-open{transform:translateX(0)}
.drawer-handle{position:absolute;top:0;width:58px;height:100%;border:0;background:var(--drawer);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:5}
.drawer-description .drawer-handle{right:-58px}.drawer-thumbnails .drawer-handle{left:-58px}
.chevron{font-family:Arial,sans-serif;font-size:46px;font-weight:200;line-height:.7}
.handle-label{font-size:14px;letter-spacing:.12em;writing-mode:vertical-rl;text-orientation:mixed}
.description-content{padding:130px 82px 80px 48px}
.eyebrow{margin:0 0 18px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;opacity:.72}
#work-title{margin:0 0 6px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.55);font-family:'Barlow',Arial,sans-serif!important;font-size:clamp(32px,3.6vw,60px);font-weight:400!important;letter-spacing:.02em;line-height:1.02}
.work-subtitle{margin:0 0 18px;padding:0 0 13px;border-bottom:1px solid rgba(255,255,255,.55);font-family:'Barlow',Arial,sans-serif!important;font-size:21px;font-weight:500;letter-spacing:.035em;line-height:1.25}
.work-copy{margin:0;white-space:normal;font-family:'Barlow',Arial,sans-serif!important;font-size:17px;font-weight:400;letter-spacing:.035em;line-height:1.48}
.thumbnail-content{padding:78px 48px 40px 82px}.thumbnail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.thumb-note{margin:0;font-size:11px;letter-spacing:.12em;opacity:.72}.thumb-rule{height:1px;margin:16px 0;background:rgba(255,255,255,.88)}
.work-category-group{margin:0 0 42px}.thumbnail-category-title{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.45);font-size:16px;font-weight:400;letter-spacing:.02em;text-transform:uppercase}
.work-thumb{display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;opacity:.72;text-align:left;overflow:hidden;border-radius:3px}.work-thumb:hover,.work-thumb.is-current{opacity:1}
.work-thumb img,.work-thumb video{display:block;width:calc(100% + 2px);max-width:none;margin:-1px;aspect-ratio:16/9;object-fit:cover;background:#eee}.work-thumb span{display:block;padding:8px 0;color:#fff;font-size:13px}
.work-dots{position:absolute;z-index:20;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:10px;padding:6px 10px}.work-dot{width:10px;height:10px;padding:0;border:1px solid #fff;border-radius:50%;background:rgba(255,255,255,.38);cursor:pointer}.work-dot.is-active{background:#fff}
.placeholder-section{display:none}
.content-page{position:fixed;z-index:25;inset:0;display:none;overflow:auto;background:var(--blue);color:#fff;padding:86px 8vw 70px}
.content-page.is-active{display:flex;align-items:flex-start;justify-content:center}
.content-page-inner{width:min(820px,100%);font-size:17px;line-height:1.46;letter-spacing:.015em}
.content-page h1{margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.7);font-size:clamp(42px,4vw,60px);font-weight:400;letter-spacing:.01em;line-height:1}
.content-page-copy{white-space:normal}
.content-page-contact{text-align:left}
.content-page-contact .content-page-inner{width:min(820px,100%)}
.content-page-contact h1{font-size:clamp(42px,4vw,60px)}
body.is-content-page .work-stage,body.is-content-page .drawer{visibility:hidden;pointer-events:none}
@media(max-width:800px){.main-nav{gap:18px;font-size:14px}.logo-mark{left:14px}.drawer{width:min(88vw,520px)}.description-content{padding:100px 40px 60px 28px}.thumbnail-content{padding:72px 28px 30px 60px}}
@media(max-width:650px){.site-chrome{height:54px;transform:translateY(-40px)}.main-nav{display:none}.mobile-menu-button{display:block}.drawer-description{transform:translateX(-100%)}.drawer-thumbnails{transform:translateX(100%)}.drawer-handle{width:50px}.drawer-description .drawer-handle{right:-50px}.drawer-thumbnails .drawer-handle{left:-50px}.handle-label{font-size:11px}.chevron{font-size:38px}.thumbnail-grid{grid-template-columns:1fr}}
.work-thumb.is-filtered-out{display:none}.work-category-group.is-filtered-out{display:none}.work-download{display:inline-block;margin-top:30px;color:#fff;border-bottom:1px solid rgba(255,255,255,.8);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:4px}.work-download:hover{border-bottom-color:#fff}

/* Mobile-only message: the site remains unchanged on larger screens. */
@media(max-width:650px){
  body{background:#fff!important}
  body > *{display:none!important}
  body::before{content:'';position:fixed;z-index:9999;inset:0;display:block;background:#fff url('/assets/images/mobile-message.jpg') center center/contain no-repeat}
}

/* Optional poster display, enabled per project in the CMS. */
.work-backdrop{display:none}
.work-media.is-poster{background:var(--poster-colour,#0d2b47)}
.work-media.is-poster .work-backdrop{display:block;position:absolute;inset:-48px;background-image:var(--poster-image);background-size:cover;background-position:center;filter:blur(30px);opacity:.76;transform:scale(1.08)}
.work-media.is-poster.is-solid-background .work-backdrop{display:none}
.work-media.is-poster #work-image,.work-media.is-poster #work-video{z-index:2;width:calc(100vw - 120px)!important;height:calc(100vh - 140px)!important;min-width:0!important;min-height:0!important;max-width:calc(100vw - 120px)!important;max-height:calc(100vh - 140px)!important;inset:50%!important;object-fit:contain!important;transform:translate(-50%,-50%) scale(1);transform-origin:center;transition:opacity .28s ease,transform .14s ease-out;cursor:zoom-in}
.work-media.is-poster.is-zoomed #work-image,.work-media.is-poster.is-zoomed #work-video{transform:translate(calc(-50% + var(--poster-pan-x,0px)),calc(-50% + var(--poster-pan-y,0px))) scale(var(--poster-zoom,1));cursor:zoom-out}
.work-media.is-video-contain #work-video{object-fit:contain!important;background:var(--blue)}
.work-client,.work-year{font:inherit;letter-spacing:inherit;text-transform:uppercase;opacity:.95}.work-client::before,.work-year::before{content:' / ';opacity:.72}
@media(max-width:650px){.work-media.is-poster #work-image,.work-media.is-poster #work-video{width:calc(100vw - 48px)!important;height:calc(100vh - 48px)!important;max-width:calc(100vw - 48px)!important;max-height:calc(100vh - 48px)!important}}
