@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root { --ink:#090909; --paper:#f1f1ed; --acid:#f4b942; --line:rgba(255,255,255,.23); --muted:#9a9a94; --sans:'DM Sans',Arial,sans-serif; --serif:'Instrument Serif',Georgia,serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:#fff; background:var(--ink); font-family:var(--sans); font-size:16px; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
img { display:block; width:100%; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:100; padding:.8rem 1rem; background:var(--acid); color:var(--ink); }
.skip-link:focus { top:1rem; }
.site-header { position:absolute; z-index:20; top:0; left:0; width:100%; display:flex; justify-content:space-between; align-items:flex-start; padding:24px 32px; }
.brand { display:block; width:50px; }
.brand img { width:100%; height:auto; }
.site-nav { display:flex; align-items:center; gap:2.25rem; font-size:.82rem; font-weight:500; }
.site-nav a { position:relative; }
.site-nav a:not(.nav-vimeo)::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:currentColor; transition:right .25s; }
.site-nav a:hover::after,.site-nav a:focus-visible::after { right:0; }
.nav-vimeo { border:1px solid rgba(255,255,255,.55); border-radius:50%; padding:16px 13px; }
.menu-toggle { display:none; border:0; background:none; cursor:pointer; }
.hero { min-height:100svh; position:relative; display:flex; align-items:flex-end; padding:8.5rem 32px 38px; overflow:hidden; }
.hero-media,.hero-scrim { position:absolute; inset:0; }
.hero-media img { height:100%; object-fit:cover; filter:saturate(.72) contrast(1.08); transform:scale(1.02); animation:heroDrift 10s ease-out both; }
.hero-scrim { background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.03) 42%,rgba(0,0,0,.78) 100%),linear-gradient(90deg,rgba(0,0,0,.25),transparent 70%); }
.hero-copy { position:relative; z-index:2; width:min(880px,75vw); }
.eyebrow { margin:0 0 1.2rem; text-transform:uppercase; font-size:.71rem; font-weight:600; letter-spacing:.18em; }
.eyebrow::before { content:""; display:inline-block; width:28px; height:1px; margin:0 10px 3px 0; background:var(--acid); }
.eyebrow.dark::before { background:var(--ink); }
.hero h1 { margin:0; font-weight:500; text-transform:uppercase; font-size:clamp(4.5rem,11.5vw,10.8rem); line-height:.72; letter-spacing:-.078em; }
.hero h1 span { display:block; }
.hero h1 span:last-child { margin-left:10vw; font-family:var(--serif); font-style:italic; font-weight:400; text-transform:none; letter-spacing:-.055em; color:var(--acid); }
.hero-intro { max-width:470px; margin:2.2rem 0 0 10.5vw; font-size:clamp(1rem,1.35vw,1.22rem); line-height:1.5; }
.hero-play { position:absolute; z-index:3; right:32px; bottom:110px; display:flex; align-items:center; gap:14px; border:0; background:none; text-align:left; cursor:pointer; }
.hero-play small { display:block; margin-bottom:4px; color:#bbb; text-transform:uppercase; font-size:.63rem; letter-spacing:.12em; }
.play-icon { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--acid); color:var(--ink); font-size:.8rem; padding-left:3px; transition:transform .25s; }
.hero-play:hover .play-icon { transform:scale(1.1); }
.hero-index { position:absolute; right:32px; bottom:35px; z-index:2; display:flex; gap:9px; font-size:.72rem; }
.hero-index span:nth-child(2) { color:var(--acid); }
.work-section { padding:120px 32px 100px; background:var(--paper); color:var(--ink); }
.section-heading { display:grid; grid-template-columns:1.3fr .7fr; gap:2rem; align-items:end; margin-bottom:70px; }
.section-heading h2,.studio-copy h2 { margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(4.5rem,9vw,9rem); line-height:.77; letter-spacing:-.055em; }
.section-note { max-width:350px; margin:0 0 .4rem auto; line-height:1.55; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:58px 18px; }
.project-wide { grid-column:1/-1; }
.project-link { display:block; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer; }
.project-image { position:relative; display:block; overflow:hidden; aspect-ratio:16/9; background:#ddd; }
.project-image::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.18); opacity:0; transition:opacity .35s; }
.project-image img { height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s; }
.project-play { position:absolute; z-index:2; inset:auto auto 22px 22px; display:grid; place-items:center; width:76px; aspect-ratio:1; border-radius:50%; background:var(--acid); font-size:.72rem; font-weight:600; transform:translateY(120%); transition:transform .35s; }
.project-link:hover .project-image img,.project-link:focus-visible .project-image img { transform:scale(1.035); filter:saturate(.78); }
.project-link:hover .project-image::after,.project-link:focus-visible .project-image::after { opacity:1; }
.project-link:hover .project-play,.project-link:focus-visible .project-play { transform:translateY(0); }
.project-meta { display:flex; justify-content:space-between; gap:1rem; padding:15px 1px 0; }
.project-meta strong { font-size:1rem; }
.project-meta span { color:#595954; font-size:.78rem; text-align:right; }
.all-work { display:flex; justify-content:space-between; align-items:center; margin-top:100px; padding:22px 0; border-top:1px solid #aaa; border-bottom:1px solid #aaa; font-family:var(--serif); font-size:clamp(2.2rem,4vw,4rem); }
.all-work b { display:grid; place-items:center; width:70px; height:70px; border-radius:50%; background:var(--ink); color:var(--acid); font-family:var(--sans); font-size:1.5rem; transition:transform .25s; }
.all-work:hover b { transform:rotate(45deg); }
.studio-section { min-height:90vh; display:grid; grid-template-columns:1.15fr .85fr; gap:5vw; align-items:center; padding:100px 32px; position:relative; overflow:hidden; }
.studio-image { aspect-ratio:4/3; overflow:hidden; }
.studio-image img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.8) contrast(1.06); transition:filter .4s,transform .65s cubic-bezier(.2,.7,.2,1); }
.studio-image:hover img { filter:saturate(1); transform:scale(1.018); }
.studio-copy { max-width:850px; }
.studio-copy h2 { color:#fff; }
.studio-copy > p:not(.eyebrow) { max-width:660px; margin:3rem 0; color:#c8c8c2; font-size:clamp(1.05rem,1.7vw,1.45rem); line-height:1.55; }
.services { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.services span { padding:16px 0; border-bottom:1px solid var(--line); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; }
.contact-section { padding:110px 32px 44px; background:var(--acid); color:var(--ink); }
.contact-mail { display:block; margin:6rem 0; font-size:clamp(4rem,11vw,11rem); line-height:.76; font-weight:500; letter-spacing:-.075em; text-transform:uppercase; }
.contact-mail em { font-family:var(--serif); font-weight:400; text-transform:none; }
.contact-row { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; padding-top:28px; border-top:1px solid rgba(0,0,0,.45); font-size:.78rem; }
.contact-row p { margin:0; line-height:1.45; }
.socials { display:flex; align-items:center; gap:.8rem; }
.socials a { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(0,0,0,.48); border-radius:50%; transition:background .2s,color .2s,transform .2s; }
.socials a:hover,.socials a:focus-visible { background:var(--ink); color:var(--acid); transform:translateY(-2px); }
.socials svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.socials .vimeo-icon { fill:currentColor; stroke:none; }
footer { display:flex; justify-content:space-between; padding:20px 32px; color:#989893; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.static-header { position:relative; min-height:118px; background:var(--ink); }
.about-intro { padding:120px 32px 110px; background:var(--ink); }
.about-intro h1 { margin:0; max-width:1100px; font-size:clamp(5rem,11vw,11rem); line-height:.76; letter-spacing:-.075em; text-transform:uppercase; }
.about-intro h1 em { color:var(--acid); font-family:var(--serif); font-weight:400; text-transform:none; }
.about-lede { width:min(600px,52vw); margin:5rem 0 0 auto; color:#c8c8c2; font-size:clamp(1.1rem,1.7vw,1.45rem); line-height:1.55; }
.people { display:grid; grid-template-columns:1fr 1fr; gap:7vw; padding:120px 32px 150px; background:var(--paper); color:var(--ink); }
.person-card-offset { margin-top:150px; }
.person-image { aspect-ratio:1/1; overflow:hidden; border-radius:50%; background:#ddd; }
.person-image img { height:100%; object-fit:cover; filter:saturate(.78) contrast(1.04); transition:filter .4s,transform .65s cubic-bezier(.2,.7,.2,1); }
.person-card:hover .person-image img { filter:saturate(1); transform:scale(1.025); }
.person-meta { display:grid; grid-template-columns:40px 1fr; gap:1rem; padding-top:18px; border-top:1px solid #aaa; margin-top:18px; }
.person-meta > span { font-size:.72rem; color:#777; }
.person-meta h2,.person-meta h3 { margin:0; font-family:var(--serif); font-size:clamp(2.8rem,5vw,5rem); font-weight:400; line-height:.9; }
.person-meta p { margin:.65rem 0 0; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; }
.about-home { padding-top:120px; background:var(--paper); color:var(--ink); }
.about-home-heading { display:grid; grid-template-columns:.6fr 1.1fr .6fr; gap:3vw; align-items:end; padding:0 32px; }
.about-home-heading h2 { margin:0; font-family:var(--serif); font-size:clamp(4.5rem,8vw,8.5rem); font-weight:400; line-height:.78; letter-spacing:-.055em; }
.about-home-heading h2 em { color:var(--acid); font-weight:400; }
.about-home-heading > p:last-child { margin:0; line-height:1.55; }
.about-story { display:grid; grid-template-columns:.7fr 1.3fr; gap:5vw; padding:130px 32px; background:var(--ink); }
.about-story > div { max-width:820px; }
.about-story h2 { margin:0 0 3rem; font-family:var(--serif); font-size:clamp(4rem,8vw,8rem); font-weight:400; line-height:.82; letter-spacing:-.05em; }
.about-story div p { max-width:680px; color:#c8c8c2; font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.6; }
.about-cta { padding:110px 32px 85px; background:var(--acid); color:var(--ink); }
.about-cta a { display:block; margin-top:5rem; font-size:clamp(4rem,11vw,11rem); font-weight:500; line-height:.76; letter-spacing:-.075em; text-transform:uppercase; }
.about-cta em { font-family:var(--serif); font-weight:400; text-transform:none; }
.film-dialog { width:min(1200px,94vw); max-width:none; padding:0; border:0; background:#050505; color:#fff; box-shadow:0 20px 100px rgba(0,0,0,.65); }
.film-dialog::backdrop { background:rgba(0,0,0,.88); backdrop-filter:blur(8px); }
.dialog-bar { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; }
.dialog-bar h2 { margin:0; font-size:.8rem; font-weight:500; }
.dialog-close { border:0; padding:8px; background:none; cursor:pointer; }
.video-frame { aspect-ratio:16/9; }
.video-frame iframe { width:100%; height:100%; border:0; }
.reveal { opacity:0; transform:translateY(34px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1; transform:none; }
@keyframes heroDrift { from { transform:scale(1.08); } to { transform:scale(1.02); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }
@media (max-width:760px) {
  .site-header { padding:20px; }
  .brand { width:46px; }
  .menu-toggle { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
  .menu-toggle span { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; }
  .menu-toggle i { display:block; width:25px; height:1px; background:#fff; }
  .site-nav { position:fixed; inset:0; z-index:-1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:30px; background:var(--ink); font-family:var(--serif); font-size:3.6rem; transform:translateY(-100%); transition:transform .45s cubic-bezier(.7,0,.2,1); }
  .site-nav.open { transform:none; }
  .nav-vimeo { border:0; padding:0; }
  .hero { padding:7rem 20px 30px; }
  .hero h1 { font-size:clamp(4.1rem,22vw,7rem); line-height:.76; }
  .hero h1 span:last-child { margin-left:0; }
  .hero-intro { max-width:90%; margin:1.6rem 0 0; }
  .hero-play { right:20px; bottom:110px; }
  .hero-play > span:last-child { display:none; }
  .hero-index { right:20px; bottom:28px; }
  .work-section { padding:85px 20px 70px; }
  .section-heading { grid-template-columns:1fr; margin-bottom:45px; }
  .section-heading h2,.studio-copy h2 { font-size:clamp(4.2rem,20vw,7rem); }
  .section-note { margin:0; }
  .project-grid { grid-template-columns:1fr; gap:46px; }
  .project-wide { grid-column:auto; }
  .project-meta { flex-direction:column; gap:.35rem; }
  .project-meta span { text-align:left; }
  .project-play { transform:none; width:64px; }
  .all-work { margin-top:65px; }
  .all-work b { width:56px; height:56px; }
  .studio-section { grid-template-columns:1fr; min-height:auto; padding:90px 20px; }
  .studio-image { aspect-ratio:16/10; }
  .studio-copy { position:relative; z-index:1; }
  .services { grid-template-columns:1fr; }
  .contact-section { padding:80px 20px 35px; }
  .contact-mail { margin:4.5rem 0; font-size:clamp(3.7rem,19vw,7rem); }
  .contact-row { align-items:flex-start; flex-direction:column; }
  .socials { flex-wrap:wrap; }
  footer { padding:18px 20px; }
  .static-header { min-height:104px; }
  .about-intro { padding:90px 20px 80px; }
  .about-intro h1 { font-size:clamp(4rem,19vw,7rem); }
  .about-lede { width:100%; margin-top:3rem; }
  .people { grid-template-columns:1fr; gap:70px; padding:80px 20px 100px; }
  .person-card-offset { margin-top:0; }
  .about-home { padding-top:85px; }
  .about-home-heading { grid-template-columns:1fr; padding:0 20px; }
  .about-home-heading h2 { font-size:clamp(4rem,18vw,7rem); }
  .about-story { grid-template-columns:1fr; padding:90px 20px; }
  .about-cta { padding:80px 20px 65px; }
  .about-cta a { margin-top:4rem; font-size:clamp(3.7rem,18vw,7rem); }
}
@media (min-width:761px) and (max-width:1050px) { .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }