:root {
  --accent: rgb(255,255,255);
  --paper: #f2f2f0;
  --edge: 40px;
  --mono: Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --ease: cubic-bezier(.76,0,.24,1);
}

html { background: #111; scroll-behavior: auto; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.navigation { height: 80px; padding: 0 var(--edge); }
.navigation .wordmark { font-size: 30px; font-weight: 800; line-height: 1; }
.navigation a:not(.wordmark), .niches, .archive-position, .index-bar,
.film-caption, .viewer-controls, .shoot-details dt, .camera-label,
.contact-people, .contact-back {
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0; text-transform: uppercase;
}
.navigation a:not(.wordmark) { gap: 8px; }
.navigation svg { width: 15px; height: 15px; }
.niches { left: var(--edge); top: 50%; transform: translateY(-50%); gap: 14px; }
.niches button {
  display: grid; grid-template-columns: 5px minmax(95px,1fr) 26px;
  gap: 13px; align-items: center; width: 174px; min-height: 24px;
  padding: 0; border: 0; border-radius: 0; color: #ffffff99;
  font: 13px/1.2 var(--mono); letter-spacing: 0; text-transform: uppercase;
  transition: color .35s var(--ease);
}
.niches button:hover, .niches button:focus-visible {
  color: #fff; background: none; box-shadow: none; transform: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.niches button[aria-pressed=true] { color: var(--accent); }
.niche-count { color: #ffffff59; font-size: 10px; text-align: right; }
.niche-name { text-align: left; }
.niches button[aria-pressed=true] .niche-count { color: #ffffff99; }
.archive-position { right: var(--edge); gap: 14px; font-size: 11px; }
.position-line { background: #ffffff30; height: 80px; }
.index-bar {
  position: fixed; z-index: 15; bottom: 0; left: 0; right: 0;
  min-height: 64px; padding: 20px var(--edge);
  display: grid; grid-template-columns: 180px minmax(0,1fr) 150px;
  gap: 24px; align-items: center; pointer-events: none;
}
.index-bar > * { min-width: 0; }
.index-bar button { pointer-events: auto; }
.index-context { color: #ffffff80; }
.index-project { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.integrated-reel .reel-origin {
  mask-image: linear-gradient(to bottom,#000 calc(100% - 150px),transparent calc(100% - 65px));
  -webkit-mask-image: linear-gradient(to bottom,#000 calc(100% - 150px),transparent calc(100% - 65px));
}
#background-icons { transition: opacity .6s var(--ease); }
#background-icons.is-hidden { opacity: 0; }
.film-window, .film-window video, .film-caption, .film-frame, .play-mark {
  transition-timing-function: var(--ease);
}
.film-caption { font-size: 10px; }
.film-caption strong { font: inherit; }
.film-window .film-caption { display: none; }
.film-window:hover .play-mark svg { filter: none; }
.viewer-top { background: #111; }
.viewer-stage .camera-body { will-change: auto; }
.viewer-controls button { transition: color .35s var(--ease); }
.viewer-controls button:hover { color: var(--accent); }
button:focus-visible, a:focus-visible { outline-color: var(--accent); }
.contact-page { background: var(--paper); color: #111; }
.contact-page .navigation { border-color: #0000001f; }
.contact-people h2, .contact-people a { font-family: var(--mono); font-weight: 400; }
.contact-people h2 { font-size: 12px; }
.contact-people a { font-size: 11px; }
.contact-main h1 { font-weight: 800; }
.contact-strip img { transition: filter .35s var(--ease); }

#site-cursor {
  position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none;
  width: 1px; height: 1px;
  display: none; color: #fff; mix-blend-mode: difference;
}
#site-cursor .cursor-ring {
  position: absolute; width: 14px; height: 14px; left: -7px; top: -7px;
  border: 1px solid currentColor; border-radius: 50%;
  transition: transform .12s ease-out, color .12s ease-out;
}
#site-cursor .cursor-label { position: absolute; left: 17px; top: -5px; font: 10px/1 var(--mono); }
#site-cursor.is-active { color: var(--accent); mix-blend-mode: normal; }
#site-cursor.is-active .cursor-ring { transform: scale(1.3); }
body.has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button,
.has-custom-cursor video { cursor: none; }
.page-transition {
  position: fixed; inset: 0; z-index: 18; background: #111;
  pointer-events: none; visibility: hidden;
}
.transition-lines { position: absolute; inset: 0; opacity: 0; }
.transition-lines::before, .transition-lines::after {
  content: ''; position: absolute; background: #ffffff20;
}
.transition-lines::before { left: 0; top: 50%; width: 100%; height: 1px; }
.transition-lines::after { top: 0; left: 50%; height: 100%; width: 1px; }
.transition-lines i { position: absolute; inset: 20%; border: 1px solid #ffffff14; }
.lenis.lenis-smooth { scroll-behavior: auto!important; }
html.lenis, html.lenis body { height: auto; }

@media(max-height:700px) and (min-width:641px) {
  .niches { top: 50%; gap: 5px; }
  .niches button { min-height: 23px; }
}
@media(max-width:1000px) {
  :root { --edge: 26px; }
  .niches button { width: 154px; grid-template-columns: 5px minmax(85px,1fr) 22px; gap: 9px; }
  .index-bar { grid-template-columns: 140px minmax(0,1fr) 120px; gap: 16px; }
}
@media(max-width:640px) {
  :root { --edge: 20px; }
  .navigation { height: 64px; }
  .navigation .wordmark { font-size: 26px; }
  .navigation a:not(.wordmark) { font-size: 10px; }
  body.integrated-reel .niches, .niches {
    top: 64px; left: 0; right: 0; transform: none; gap: 20px;
    padding: 14px var(--edge); background: #111; border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .niches button { display: flex; width: auto; gap: 7px; min-height: 30px; font-size: 11px; flex-shrink: 0; }
  .niche-count { font-size: 9px; }
  .index-bar {
    padding: 13px var(--edge); gap: 4px 14px; min-height: 70px;
    grid-template-columns: minmax(0,1fr) 105px;
  }
  .index-context { font-size: 9px; }
  .index-project { grid-row: 2; text-align: left; font-size: 9px; }
  .archive-position { right: 9px; font-size: 9px; }
  .position-line { height: 42px; }
  .contact-layout { padding-top: 64px; }
  #site-cursor { display: none!important; }
}
@media(prefers-reduced-motion:reduce) {
  #background-icons, .cursor-ring { transition: none; }
  .page-transition { display: none!important; }
}
.shoot-photos { display: block; column-count: 3; column-gap: 4px; margin-top: 32px; background: #000; }
.shoot-photos[hidden] { display: none; }
.gallery-heading { column-span: all; margin: 0; padding: 28px 0 32px; text-align: center; font: 11px var(--mono); text-transform: uppercase; font-weight: 400; }
.gallery-photo { display: block; padding: 0; margin-bottom: 4px; width: 100%; break-inside: avoid; overflow: hidden; background: #000; }
.shoot-photos img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .25s ease; }
@media(hover:hover) { .gallery-photo:hover img { opacity: .85; } }
.shoot-details #shoot-title { margin: 0; font: 11px var(--mono); font-weight: 400; line-height: 1.6; text-transform: uppercase; }
.shoot-details { padding-top: 32px; }
.gallery-photo:focus-visible { outline: 1px solid #fff; outline-offset: -2px; }
#photo-viewer { background: #000; overflow: hidden; padding: 66px 5% 80px; }
#photo-viewer[open] { display: grid; place-items: center; }
.photo-original { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.photo-close { position: absolute; top: 16px; right: 24px; }
.photo-controls { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 24px; font: 11px var(--mono); }
@media(max-width:640px) { .shoot-photos { column-count: 2; column-gap: 3px; margin-top: 24px; } .gallery-photo { margin-bottom: 3px; } #photo-viewer { padding: 70px 12px 80px; } }
@media(prefers-reduced-motion:reduce) { .shoot-photos img { transition: none; } }
html,body:not(.contact-page) { background: #000; }
body:not(.contact-page) .niches,#viewer,#viewer::backdrop { background: #000; }
#viewer { isolation: isolate; }
#viewer .viewer-top { background: #000e; }
#viewer .viewer-stage,#viewer .viewer-controls,#viewer .shoot-details,#viewer .playback-bar { position: relative; z-index: 1; }
#viewer .viewer-stage { padding-left: 64px; padding-right: 64px; }
#viewer .viewer-stage:not(.vhs) .camera-body { width: min(100%,calc(75svh * var(--ratio))); }
#viewer .viewer-stage.vhs .camera-body { max-width: 100%; }
.player-tools { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 28px; z-index: 3; }
.player-tools button { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; width: 44px; min-height: 92px; padding: 8px 0; font: 9px var(--mono); text-transform: uppercase; }
.player-tools button span { writing-mode: vertical-rl; transform: rotate(180deg); }
.player-tools svg { width: 17px; height: 17px; }
.playback-bar { display: flex; align-items: center; gap: 16px; margin: 0 5%; min-height: 48px; }
#player-play { width: 36px; height: 44px; display: grid; place-items: center; padding: 0; flex-shrink: 0; }
#player-play svg { width: 16px; height: 16px; }
.player-timeline { position: relative; flex: 1; min-width: 0; height: 18px; background: repeating-linear-gradient(to right,#ffffff40 0 1px,transparent 1px 5px); }
.timeline-played { position: absolute; inset: 0; background: repeating-linear-gradient(to right,#fff 0 1px,transparent 1px 5px); clip-path: inset(0 calc(100% - var(--played,0%)) 0 0); pointer-events: none; }
#player-seek { appearance: none; -webkit-appearance: none; position: absolute; inset: -13px 0; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; color: white; }
#player-seek::-webkit-slider-runnable-track { height: 18px; background: transparent; }
#player-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 24px; margin-top: -3px; background: #fff; border: 0; border-radius: 0; }
#player-seek::-moz-range-track { height: 18px; background: transparent; }
#player-seek::-moz-range-thumb { width: 2px; height: 24px; background: #fff; border: 0; border-radius: 0; }
#player-seek:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
#player-time { width: 91px; flex-shrink: 0; font: 10px var(--mono); text-align: right; }
@media(max-width:640px) { #viewer .viewer-stage { padding-left: 48px; padding-right: 14px; } #viewer .viewer-stage:not(.vhs) .camera-body { width: min(100%,calc(68svh * var(--ratio))); } .player-tools { left: 1px; gap: 16px; } .player-tools button { width: 40px; min-height: 76px; font-size: 8px; gap: 8px; } .playback-bar { gap: 10px; margin: 0 20px; } #player-time { width: 80px; font-size: 9px; } .player-timeline { height: 14px; } }
.camera-screen:fullscreen { display: grid; place-items: center; width: 100vw!important; height: 100vh!important; max-width: none; max-height: none; aspect-ratio: auto!important; padding: 20px 64px 80px; border: 0!important; background: #000!important; overflow: hidden; }
.camera-screen:fullscreen #full-video { display: block; position: relative; width: min(calc(100vw - 128px),calc((100vh - 100px) * var(--ratio))); height: auto; aspect-ratio: var(--ratio); max-height: calc(100vh - 100px); object-fit: contain; transform-origin: 0 0; }
#viewer .camera-screen:fullscreen .playback-bar { position: absolute; left: 5%; right: 5%; bottom: 12px; margin: 0; z-index: 5; }
.camera-screen:fullscreen .player-tools { left: 8px; z-index: 5; }
@media(max-width:640px) { .camera-screen:fullscreen { padding: 12px 48px 72px; } .camera-screen:fullscreen #full-video { width: min(calc(100vw - 96px),calc((100vh - 84px) * var(--ratio))); max-height: calc(100vh - 84px); } }
.hover-relative { position: relative; }
.hover-frame { position: absolute; inset: -5px -8px; pointer-events: none; z-index: 9; border-radius: inherit; }
.wordmark > .hover-frame { inset: -8px -12px; }
.navigation .wordmark { position:relative; width:112px; height:36px; flex:0 0 112px; }
.brand-label { display:block; white-space:nowrap; }
.brand-3d { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; }
.brand-ready .brand-label { opacity:0; }
.brand-ready .brand-3d { opacity:1; }
@media(max-width:640px) { .navigation .wordmark {width:102px;height:33px;flex-basis:102px;} }
.icon-button > .hover-frame { inset: -4px; }
.hover-frame::before,.hover-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; transition: transform .3s ease,opacity .3s ease; }
.hover-frame::before { background: transparent; opacity: 0; }
.hover-frame::after { border: 1px solid currentColor; opacity: 0; transform: scale(1.2); }
.has-hover:is(:hover,:focus-visible) > .hover-frame::before { opacity: 0; transform: scale(.5); }
.has-hover:is(:hover,:focus-visible) > .hover-frame::after { opacity: .5; transform: scale(1); }
.niches button:is(:hover,:focus-visible) { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; transform: none; }
@media(prefers-reduced-motion:reduce) { .hover-frame::before,.hover-frame::after { transition: none; transform: none; } }
@font-face { font-family: 'Saira Extra Condensed'; src: url('/fonts/saira-extra-condensed-900.ttf') format('truetype'); font-style: normal; font-weight: 900; font-display: swap; }
:root { --display: 'Saira Extra Condensed','Arial Narrow',Impact,sans-serif; }
.contact-main h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; }
#viewer .viewer-stage { min-height: 0; padding-top: 12px; padding-bottom: 0; }
#viewer .viewer-stage:not(.vhs) .camera-body { width: min(100%,calc(58svh * var(--ratio))); }
#viewer .viewer-stage.vhs .camera-body { width: min(100%,calc(48svh * var(--ratio) + 115px)); }
.project-summary { position: relative; z-index: 1; margin: 0 5%; padding: 12px 0 18px; }
.project-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.project-summary #shoot-title { margin: 0; font: 900 54px/1 var(--display); text-transform: uppercase; overflow-wrap: anywhere; min-width: 0; }
#project-date { font: 10px/1.5 var(--mono); flex-shrink: 0; padding-bottom: 3px; text-align: right; }
#project-location { margin: 12px 0 0; font: 10px/1.5 var(--mono); color: #ffffff9c; overflow-wrap: anywhere; }
#viewer .shoot-details { padding-top: 0; }
@media(max-width:640px) { #viewer .viewer-stage:not(.vhs) .camera-body { width: min(100%,calc(52svh * var(--ratio))); }.project-summary { margin: 0 20px; padding-top: 8px; }.project-heading { flex-wrap: wrap; gap: 12px; }.project-summary #shoot-title { font-size: 38px; } #project-date { text-align: left; } #project-location { font-size: 9px; } }
.icon-button.has-hover:is(:hover,:focus-visible) { background: transparent; color: inherit; }
body.has-custom-cursor,body.has-custom-cursor * { cursor:auto!important; }
body.has-custom-cursor :is(a,button,video,[role=button]),body.has-custom-cursor :is(a,button,[role=button]) * { cursor:pointer!important; }
#preview-sound { position:fixed; left:24px; bottom:90px; z-index:30; color:#fff; background:#000; }
body:has(#viewer[open]) #preview-sound { visibility:hidden; }
#viewer.cinema { overflow:hidden; }
#viewer.cinema .viewer-stage { position:fixed; inset:54px 0 70px; height:auto; padding:20px 60px; display:grid; place-items:center; z-index:20; background:#000; }
#viewer.cinema .viewer-stage .camera-body { width:min(calc(100vw - 120px),calc((100dvh - 164px) * var(--ratio))); max-width:none; padding:0; border:0; background:transparent; }
#viewer.cinema .camera-screen { aspect-ratio:var(--ratio); overflow:visible; border:0; }
#viewer.cinema #full-video { display:block; width:100%; height:100%; object-fit:contain; transform-origin:0 0; }
#viewer.cinema .camera-body > :not(.camera-screen),#viewer.cinema .playback-bar,#viewer.cinema .project-summary,#viewer.cinema .viewer-controls,#viewer.cinema .shoot-details { visibility:hidden; }
#viewer.cinema .player-tools { position:fixed; left:20px; bottom:18px; top:auto; right:auto; display:flex; flex-direction:row; transform:none; gap:20px; z-index:25; }
#viewer.cinema .player-tools button { writing-mode:horizontal-tb; transform:none; }
#viewer.cinema .viewer-top { position:fixed; top:0; left:0; right:0; z-index:30; background:#000; }
.camera-screen:fullscreen .playback-bar { display:none!important; }
body.mobile-reel .reel-origin {display:none;}
body.mobile-reel main {padding-top:92px;}
body.mobile-reel .film-roll {padding-top:0;clip-path:none;}
body.mobile-reel .film-window video {filter:none;}
body.mobile-reel .film-frame {opacity:1;}
body.mobile-reel .niches {backdrop-filter:none;-webkit-backdrop-filter:none;background:#000;}
body.mobile-reel .niches button:hover {backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;}
body.mobile-reel #preview-sound,.contact-page #preview-sound[hidden] {display:none;}
.mobile-pile {position:fixed;right:-8px;bottom:52px;width:80px;height:130px;pointer-events:none;z-index:2;}
body:has(#viewer[open]) .mobile-pile {visibility:hidden;}
.mobile-feed-in .film-roll {animation:mobile-feed .85s cubic-bezier(.22,1,.36,1) both;}
@keyframes mobile-feed {from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mobile-feed-in .film-roll{animation:none;}}
.film-window,.film-window:is(:hover,:focus-visible) { border:0!important; outline:0; box-shadow:none!important; }
.film-window::before,.film-window::after,.film-window > .hover-frame { display:none!important; }
.film-window { width:calc(100% - 18px); margin-inline:auto; }
.film-window:is(:hover,:focus-visible) { transform:scale(1.015); }
.film-window .play-mark { font:12px var(--mono,monospace); color:#fff; text-shadow:0 1px 8px #000; }
.contact-page #preview-sound { display:none; }
.contact-film-track { width:100%; flex-shrink:0; animation:contact-flow 150s linear infinite; will-change:transform; }
.contact-strip:has(.contact-film-track) { display:block; position:sticky; overflow:hidden; height:calc(100svh - 92px); max-height:none; }
.contact-film-track .film-frame { padding:0; min-height:0; opacity:1; }
.contact-film-track .film-window { width:100%; margin:0; max-height:none; aspect-ratio:9/14; background:#000; }
.contact-film-track .film-window video { object-fit:cover; filter:grayscale(.7) brightness(.75); }
.contact-film-track .film-window:hover video { filter:none; }
.contact-strip:is(:hover,:focus-within) .contact-film-track,body:has(#viewer[open]) .contact-film-track { animation-play-state:paused; }
@keyframes contact-flow { from {transform:translate3d(0,-50%,0)} to {transform:translate3d(0,0,0)} }
.vhs-background { display:none; position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.vhs-preview .vhs-background { display:block; }
.vhs-background > .vhs { position:absolute; left:3%; top:22%; width:240px; opacity:.2; animation:vhs-drift 12s ease-in-out infinite alternate; }
.vhs-background > .vhs:nth-child(2) { left:auto; right:2%; top:50%; animation-delay:-5s; }
.vhs-background > .vhs:nth-child(3) { left:34%; top:80%; animation-delay:-8s; }
.vhs-background .camera-body { width:240px!important; padding:28px 40px 22px 20px; }
.vhs-background .camera-screen { height:85px!important; aspect-ratio:auto; }
.vhs-background .camera-label { font-size:7px; top:10px; left:15px; }
#viewer .viewer-stage,#viewer .project-summary,#viewer .playback-bar,#viewer .viewer-controls,#viewer .shoot-details { position:relative; z-index:1; }
@keyframes vhs-drift { from {transform:translate3d(-10px,-25px,0) rotate(-12deg)} to {transform:translate3d(25px,35px,0) rotate(8deg)} }
@media(max-width:640px) { .contact-strip:has(.contact-film-track) {position:relative;top:0;height:420px;width:100%;} .contact-film-track {width:min(100%,320px);margin:auto;} .vhs-background > .vhs {opacity:.13;} }
@media(prefers-reduced-motion:reduce) { .contact-film-track,.vhs-background > .vhs {animation:none;} .contact-strip:has(.contact-film-track) {overflow-y:auto;} }
@media(max-width:640px) { #preview-sound {left:14px;bottom:75px;} #viewer.cinema .viewer-stage {padding:10px 20px;} #viewer.cinema .viewer-stage .camera-body {width:min(calc(100vw - 40px),calc((100dvh - 144px) * var(--ratio)));} }