body{color-scheme:dark;--bg:#151411;--paper:#f4eee2;--muted:#bdb3a4;--accent:#e9bc8c;--line:#494238}
nav .brand{letter-spacing:.02em}.hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.hero h1{font-size:clamp(3rem,8vw,8rem)}.hero figcaption{align-items:center}.feature{min-width:0}.feature-controls,.tab-bar{display:flex;align-items:center;gap:.5rem}.feature-controls{justify-content:space-between;padding-top:.75rem}.feature-controls[hidden],.tab-bar[hidden],.feature-slide[hidden],.work-panel[hidden]{display:none}.feature button,.tab-bar button{font:inherit;color:var(--paper);background:transparent;border:1px solid var(--line);cursor:pointer;padding:.5rem .8rem}.feature button:hover,.tab-bar button:hover{border-color:var(--accent)}button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.tab-bar{flex-wrap:wrap;margin-top:1.5rem}.tab-bar [aria-selected="true"]{background:var(--accent);color:var(--bg);border-color:var(--accent)}.work-panel .grid{row-gap:2rem}.workflow{max-width:850px;margin-top:3rem}.workflow h3{font:400 clamp(1.8rem,4vw,3rem)/1.1 Georgia,serif;margin:.65rem 0 1.25rem}.workflow details{border-top:1px solid var(--line);padding:1rem 0}.workflow summary{cursor:pointer;font-weight:600}.workflow summary span{font:600 .75rem monospace;color:var(--accent);margin-right:.65rem}.workflow details p{max-width:67ch;color:var(--muted);margin:.75rem 0 0}.hero figure img{background:#302920}
@media(max-width:700px){.hero{grid-template-columns:1fr}}
body{--bg:#101113;--paper:#efe9dd;--muted:#a5a2aa;--accent:#d7a35c;--line:#2b2c31}
nav{position:sticky;top:0;z-index:5;background:var(--bg);width:100%;padding:1rem max(4vw,calc((100vw - 1280px)/2));flex-wrap:nowrap}nav .brand{font-size:clamp(1.25rem,3vw,1.8rem);font-weight:400;white-space:nowrap}nav .brand:after{content:'.';color:var(--accent)}.menu-toggle{display:none}
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:min(680px,85svh);width:100vw;margin-inline:calc(50% - 50vw);padding:4rem max(4vw,calc((100vw - 1280px)/2));overflow:hidden;border-bottom:1px solid var(--line);background:#21171e}
.hero>div:first-child{z-index:2;max-width:700px}.hero h1{line-height:.95}.hero em,#work h2 em{color:var(--accent);font-weight:400}.hero .lede{color:#eee5dd;max-width:43ch}.hero .button{border-radius:999px;background:var(--accent);color:#15100a;margin:.25rem .5rem .25rem 0}.hero .secondary{background:#100f12aa;color:var(--paper);border-color:#b6ac9d}.feature{position:absolute;inset:0}.feature-slide,.feature-slide a{height:100%;display:block}.feature-slide[hidden]{display:none}.hero figure img{height:100%;object-fit:cover}.feature-slide a:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0d0b10dd,transparent 95%),linear-gradient(0deg,#0d0b10e8,transparent 85%);pointer-events:none}.hero figcaption{display:none}.feature-controls{position:absolute;top:1rem;inset-inline:4%;z-index:3}.feature-controls button{background:#101113bb;border-color:#a09b91;border-radius:50%;margin-inline-start:.3rem}.client-strip{padding:2rem 0;border-bottom:1px solid var(--line)}.client-strip p+p{font:clamp(1.1rem,3vw,1.8rem) Georgia,serif;color:var(--muted);margin-top:1rem}.client-strip span{color:var(--accent);margin-inline:.4rem}
#work .label,#work .section-intro,.caption .muted,.watch-label{font-family:monospace;letter-spacing:.09em;text-transform:uppercase}.tab-bar button{border-radius:999px;color:var(--muted)}.tab-bar [aria-pressed=true]{background:var(--paper);color:var(--bg);border-color:var(--paper)}#work h3{border:0;padding:0;margin-top:2rem;color:var(--muted)}.frame{border:0;border-radius:4px}.frame img{filter:brightness(.8)}.play{width:clamp(2.8rem,8vw,4rem);border:1px solid var(--paper);font-size:1rem}.project:hover .play,.featured .play{background:var(--accent);color:#1a120b}.watch-label{position:absolute;bottom:.55rem;left:.55rem;color:var(--paper);background:#111113df;padding:.35rem .5rem;font-size:.67rem}.caption{border:0;flex-wrap:wrap;padding-bottom:.4rem}.caption strong{font:1.55rem Georgia,serif}.caption .label{color:var(--muted)}#work{scroll-margin-top:4rem}
@media(max-width:620px){nav{padding:.8rem 4%}.menu-toggle:not([hidden]){display:block;color:var(--paper);background:transparent;border:1px solid var(--line);border-radius:8px;padding:.5rem .75rem}nav:has(.menu-toggle:not([hidden])) #nav-links{display:none;position:absolute;inset:100% 0 auto;background:var(--bg);padding:1rem 4%;border-bottom:1px solid var(--line)}nav:has(.menu-toggle:not([hidden])) #nav-links.is-open{display:flex}.hero{min-height:510px;padding:4rem 4% 2rem}.hero h1{font-size:clamp(3rem,11vw,4.7rem)}.hero .button{display:table}.grid{grid-template-columns:1fr}.work-panel .grid{row-gap:2.3rem}}


#work .work-panel .grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1.5rem 1rem;
  max-width:none;
}
#work .work-panel article { grid-column:span 2; min-width:0; }
#work .work-panel article:nth-child(5n + 1),
#work .work-panel article:nth-child(5n + 2) { grid-column:span 3; }
#work .project .frame { aspect-ratio:16/9; }
#work .caption { padding:.45rem 0 .25rem; }
#work .caption strong { font-size:clamp(1rem,2.3vw,1.5rem); overflow-wrap:anywhere; }
#work .project .play { width:2.5rem; }
#work .watch-label { display:none; }
@media(max-width:740px) {
  #work .work-panel .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem .65rem; }
  #work .work-panel article,
  #work .work-panel article:nth-child(5n + 1),
  #work .work-panel article:nth-child(5n + 2) { grid-column:span 1; }
  #work .work-panel article:nth-child(5n + 1) { grid-column:span 2; }
}

#work .work-panel > h3 {
  margin: clamp(2rem, 5vw, 3.5rem) 0 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
  color: var(--paper);
  font: 400 clamp(1.65rem, 3.5vw, 2.5rem)/1.1 Georgia, serif;
}

#work .director-credit { margin: 0; font-size: .8rem; }

.snl-stills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.snl-stills img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}
@media (max-width: 740px) {
  .snl-stills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
}
@media (max-width: 420px) {
  .snl-stills { grid-template-columns: 1fr; }
}

.platform-badge {display:flex;align-items:center;flex-wrap:wrap;gap:.85rem;margin-top:.8rem;width:fit-content;max-width:100%}
.platform-badge span {font-size:.8rem;color:var(--muted)}
.platform-badge .platform-logo {display:block;position:static;object-fit:contain;max-width:100%;background:transparent}
.platform-badge .netflix-logo {width:88px;height:24px}
.platform-badge .watchit-logo {width:48px;height:27px}
#contact .button {overflow-wrap:anywhere;max-width:100%}

.project-still .frame img {transition:transform .45s ease}
.project-still .caption strong {transition:color .22s ease}
.project-still:hover .frame img {transform:scale(1.035)}
.project-still:hover .caption strong {color:#f3ca8c}
@media(prefers-reduced-motion:reduce){
  .project-still .frame img,.project-still .caption strong {transition:none}
  .project-still:hover .frame img {transform:none}
}

#work .frame img[src="vodafone-qatar-clean.png"] {height:102%;top:-1%;}