html{scroll-padding-top:84px}
body.lightbox-open{overflow:hidden}
img,iframe{max-width:100%}
.hero,.intro,.work,.clients,.photography,.about,.process,.services,.contact{min-width:0}
.project,.project-visual,.project-info,.photo-head>*{min-width:0}
.hero-role{top:clamp(145px,23vh,220px);z-index:3}
.hero h1{position:relative;z-index:1}
.clients{padding:clamp(90px,10vw,150px) 0;background:#000;color:#fff;overflow:hidden}
.clients-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);align-items:end;gap:40px;max-width:var(--max);margin:0 auto 60px;padding:0 var(--pad) 34px;border-bottom:1px solid rgba(255,255,255,.16)}
.clients-head .section-label{grid-column:1/-1;margin:0;color:var(--blue)}
.clients-head h2{font-size:clamp(3rem,7vw,7rem);line-height:.9;letter-spacing:-.06em;margin:24px 0 0;max-width:1100px}
.clients-head>p:last-child{color:rgba(255,255,255,.62);max-width:390px;margin:0 0 7px}
.clients-wall{display:grid;gap:18px}
.logo-marquee{overflow:hidden}
.logo-track{display:flex;width:max-content;animation:clientRun 34s linear infinite;will-change:transform}
.logo-marquee.reverse .logo-track{animation-direction:reverse;animation-duration:39s}
.logo-set{display:flex;align-items:center;gap:clamp(46px,6vw,105px);padding-right:clamp(46px,6vw,105px)}
.logo-chip{width:clamp(165px,16vw,260px);height:112px;padding:10px 14px;display:grid;place-items:center;flex:0 0 auto;overflow:visible}
.logo-chip img{display:block;width:100%;height:92px;object-fit:contain;object-position:center;mix-blend-mode:screen;filter:grayscale(1) invert(1) brightness(2) contrast(10);opacity:.82;transition:opacity .3s ease,transform .3s ease}
.logo-chip:hover img{filter:grayscale(1) invert(1) brightness(2) contrast(10);opacity:1;transform:scale(1.045)}
.client-wordmark{font-size:clamp(2rem,3vw,3.6rem);font-weight:900;letter-spacing:-.07em;color:#fff;transition:opacity .3s ease,transform .3s ease}
.logo-chip:hover .client-wordmark{color:#fff;opacity:1;transform:scale(1.045)}
.clients-wall:hover .logo-track{animation-play-state:paused}
@keyframes clientRun{to{transform:translateX(-50%)}}
@media(max-width:1080px){
  .menu-toggle{display:block}
  .topbar nav{position:fixed;display:flex;visibility:hidden;opacity:0;inset:0;min-height:100svh;padding:110px var(--pad) 50px;background:rgba(9,9,9,.985);backdrop-filter:blur(14px);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:22px;pointer-events:none;overflow-y:auto;transition:opacity .25s,visibility .25s}
  .topbar nav a{font-size:clamp(2rem,8vw,4.4rem);line-height:1;letter-spacing:-.04em;text-transform:none}
  .topbar.nav-open nav{visibility:visible;opacity:1;pointer-events:auto}
  .topbar.nav-open{background:#090909}
  .mobile-contact{display:block;color:var(--blue)}
  .brand{order:1}
  .header-actions{order:2;margin-left:auto;margin-right:10px}
  .menu-toggle{order:3}
  .project,.project.alternate{grid-template-columns:1fr;gap:30px;padding:48px 0 90px}
  .project.alternate .project-visual{order:0}
  .project-info{max-width:760px}
}
@media(max-width:760px){
  :root{--pad:22px}
  .topbar{height:66px;padding-left:18px;padding-right:18px}
  .availability{display:none}
  .hero{min-height:100svh;padding:92px var(--pad) 28px;gap:22px}
  .hero-meta{font-size:.58rem}
  .hero-role{position:static;margin:10px 0 0;font-size:.58rem;line-height:1.5}
  .hero h1{margin:auto 0;font-size:clamp(3.6rem,18vw,7.2rem);line-height:.86;letter-spacing:-.075em}
  .hero-line{overflow:visible}
  .hero-line.second{text-align:left;padding-left:8vw}
  .hero-foot{display:block}
  .hero-copy{max-width:100%}
  .hero-copy>p{font-size:.92rem;line-height:1.55}
  .signature,.scroll-cue{display:none}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .hero-actions a{min-width:0;padding:11px 10px;text-align:center;font-size:.61rem}
  .intro,.work,.clients,.services,.contact,section.photography,.process{padding-left:var(--pad);padding-right:var(--pad);padding-top:84px;padding-bottom:84px}
  .clients{padding-left:0;padding-right:0}
  .statement{margin-top:44px;font-size:clamp(2rem,10vw,3.4rem)}
  .section-title{margin-bottom:34px;padding-bottom:20px}
  .section-title h2,.photo-head h2,.process-head h2{font-size:clamp(2.7rem,13.5vw,4.7rem)}
  .project{padding-top:20px;padding-bottom:72px}
  .project-info h3{font-size:clamp(2.3rem,11vw,4rem);margin:18px 0 22px}
  .view{width:46px;height:46px;left:12px;bottom:12px}
  .photo-head{margin-bottom:24px;gap:18px}
  .clients-head{grid-template-columns:1fr;margin-bottom:42px;gap:18px;padding-left:var(--pad);padding-right:var(--pad)}
  .clients-head h2{font-size:clamp(2.7rem,13.5vw,4.7rem)}
  .clients-wall{gap:12px}
  .logo-track{animation-duration:26s}
  .logo-marquee.reverse .logo-track{animation-duration:31s}
  .logo-set{gap:38px;padding-right:38px}
  .logo-chip{width:158px;height:84px;padding:8px 10px}
  .logo-chip img{height:68px}
  .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .photo-item,.photo-item.wide,.photo-item.tall{grid-column:span 1;grid-row:auto;min-height:0;aspect-ratio:4/5}
  .photo-item:nth-child(1),.photo-item:nth-child(8){grid-column:1/-1;aspect-ratio:16/10}
  .photo-item:after{display:none}
  .about{padding:84px var(--pad) 0}
  .about h2{font-size:clamp(2.7rem,13vw,4.7rem)}
  .about-grid{margin-top:42px;gap:34px}
  .about-portrait{margin-top:60px;aspect-ratio:4/5}
  .about-portrait img{object-position:52% center}
  .about-portrait figcaption{left:16px;right:16px;bottom:16px;gap:7px}
  .about-mark{margin-top:70px}
  .process-track{grid-template-columns:1fr}
  .process-step{min-height:220px;padding:28px 22px}
  .service{grid-template-columns:30px minmax(0,1fr);gap:18px;padding:26px 0}
  .service h3{font-size:clamp(1.75rem,8.5vw,2.8rem);overflow-wrap:anywhere}
  .service p{grid-column:2}
  .contact{min-height:auto}
  .contact h2{font-size:clamp(3rem,14vw,5.2rem);overflow-wrap:anywhere;margin:24px 0 40px}
  .contact-button{width:100%;margin-bottom:54px}
  .contact-bottom>a{font-size:.68rem;overflow-wrap:anywhere}
  footer{padding-left:var(--pad);padding-right:var(--pad)}
  .case-hero{padding:112px var(--pad) 55px;min-height:64vh}
  .case-hero h1{font-size:clamp(3.3rem,16vw,6rem)}
  .case-film{padding:0 var(--pad)}
  .case-info{padding:76px var(--pad) 96px}
  .case-story h2{font-size:clamp(2.5rem,12vw,4rem)}
}
@media(max-width:390px){
  .lang{padding:8px 6px}
  .menu-toggle{width:40px;height:40px}
  .hero h1{font-size:17vw}
  .hero-actions{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:1fr}
  .photo-item,.photo-item.wide,.photo-item.tall,.photo-item:nth-child(1),.photo-item:nth-child(8){grid-column:1;aspect-ratio:4/5}
  .contact-bottom div{gap:13px}
}
@media(prefers-reduced-motion:reduce){
  .loader{transition:none}
  .loader.done{display:none}
  .logo-track{animation:none;transform:none}
  .logo-marquee{overflow-x:auto}
}