@font-face{font-family:"Combes Mark";src:url("fonts/combesmark.woff?v=3") format("woff");font-weight:800;font-style:normal;font-display:block}

/* Layout: black stage. Wordmark hero, a tilted two-row artwork reel, client logo row, filterable masonry of the work, short about, big contact close. */
:root{
  --ink:#0a0a0a; --ink-2:#141414; --ink-3:#222;
  --paper:#f4f4f2; --mute:#8a8a88; --line:rgba(244,244,242,.14);
  --mark:"Combes Mark","Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"Geist","ABC Diatype","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Geist","ABC Diatype","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(16px,3.2vw,48px);
  --space:clamp(64px,9.6vw,140px); /* one gap between every block on the home page */
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
::selection{background:var(--paper);color:var(--ink)}
.wrap{padding-inline:var(--gut)}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
:focus-visible{outline:1px solid var(--paper);outline-offset:4px}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);mix-blend-mode:difference;color:#fff}
.nav-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding-block:18px;padding-inline:var(--gut)}
.nav .mark{font-family:var(--mark);font-weight:800;font-size:17px;letter-spacing:-.03em}
.nav .clock{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;justify-self:end}
.nav ul a{font-size:14px;position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}

/* hero */
.hero{padding-top:clamp(112px,16vh,180px)}
.word{font-family:var(--mark);font-weight:800;letter-spacing:-.042em;line-height:.82;font-size:clamp(50px,12.4vw,252px);margin:0;white-space:nowrap;display:flex;overflow:hidden;padding-bottom:.17em;margin-bottom:-.11em;margin-left:-.04em}
.word span{display:inline-block;will-change:transform}
.word .sp{width:.2em;flex:none}
.loaded .word span{animation:rise 1.1s var(--ease) both;animation-delay:calc(var(--i)*38ms + 80ms)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;margin-top:clamp(18px,2.4vw,32px)}
.hero-row p{margin:0;max-width:40ch;font-size:clamp(18px,1.7vw,24px);line-height:1.3;letter-spacing:-.015em;text-wrap:balance}
.hero-row p span{color:var(--mute)}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.btn{font-family:var(--body);font-size:14px;border:1px solid var(--line);background:transparent;color:var(--paper);padding:11px 18px;border-radius:999px;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s;display:inline-flex;align-items:center;gap:8px}
.btn:hover,.btn.solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.solid:hover{background:transparent;color:var(--paper);border-color:var(--line)}
.dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

/* clients */
.clients-head{display:flex;justify-content:center;margin:clamp(16px,3vw,40px) 0 16px}
.logos{border-block:1px solid var(--line);overflow:hidden;padding-block:clamp(28px,3.6vw,52px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;width:max-content;animation:slide 34s linear infinite}
.logos li{display:flex;align-items:center;justify-content:center;flex:none;padding-inline:clamp(12px,1.5vw,22px);transition:opacity .5s var(--ease)}
.logos:hover li{opacity:.3}
.logos li:hover{opacity:1}
.logos img{height:calc(var(--h) * var(--k,1));width:auto;max-width:none}
.logos .nm{font-family:var(--display);font-weight:600;font-size:calc(var(--h) * var(--k,1));letter-spacing:-.03em;line-height:1;white-space:nowrap}

/* work */
.sec{padding-block:clamp(72px,10vw,150px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(20px,3vw,36px);flex-wrap:wrap}
.sec-head h2{font-family:var(--display);font-weight:500;font-size:clamp(40px,6vw,96px);letter-spacing:-.055em;line-height:.9;margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,40px)}
.chip{font-family:var(--body);font-size:13px;color:var(--paper);background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;display:inline-flex;gap:8px;align-items:baseline;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.chip sup{font-family:var(--mono);font-size:10px;color:var(--mute);top:0}
.chip:hover{border-color:var(--paper)}
.chip[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.chip[aria-pressed="true"] sup{color:#555}
.masonry{display:flex;flex-direction:column;gap:clamp(8px,1vw,14px)}.mseg{display:flex;gap:clamp(8px,1vw,14px);align-items:stretch}.mseg .col>.tile{flex:1 1 auto}.mseg.even{align-items:flex-start}.mseg.even .col>.tile{flex:none}.band{display:flex;gap:clamp(8px,1vw,14px)}.bcell{min-width:0}.bcell .tile{width:100%}@media(max-width:759px){.band{flex-direction:column}}
.col{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(8px,1vw,14px)}
.tile{position:relative;display:block;overflow:hidden;border-radius:4px;background:var(--ink-2);aspect-ratio:var(--r);max-width:100%}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s}
.tile:hover img,.tile:hover video{transform:scale(1.035)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.72));display:flex;justify-content:space-between;gap:10px;align-items:flex-end;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1;transform:none}
.tile .cap b{font-weight:500;font-size:13px;letter-spacing:-.01em;line-height:1.25}
.tile .cap i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#bbb;white-space:nowrap}
.tile .play{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.55);padding:4px 7px;border-radius:99px;color:#ddd}
.tile.in{animation:tileIn .8s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes tileIn{from{transform:translateY(24px);opacity:.001}to{transform:none;opacity:1}}

/* about */
.about .lead{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,52px);line-height:1.08;letter-spacing:-.04em;margin:0;max-width:24ch;text-wrap:balance}
.about .lead span{color:var(--mute)}

/* contact */
.contact{padding-top:clamp(24px,4vw,60px);padding-bottom:28px}
.contact .big{display:block;font-family:var(--display);font-weight:600;font-size:clamp(34px,8.4vw,168px);letter-spacing:-.06em;line-height:.9;word-break:break-word;margin:18px 0 0;position:relative;width:fit-content;max-width:100%}
.contact .big::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.04em;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .8s var(--ease)}
.contact .big:hover::after{transform:scaleX(1);transform-origin:left}
.row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(80px,10vw,140px);border-top:1px solid var(--line);padding-top:16px}
.foot>:last-child{text-align:right}
.foot-word{font-family:var(--mark);font-weight:800;letter-spacing:-.042em;line-height:.8;font-size:clamp(32px,11.5vw,240px);margin-top:clamp(24px,3vw,40px);color:var(--ink-3);white-space:nowrap;overflow:hidden;margin-left:-.04em;user-select:none;padding-bottom:.12em}

/* cursor: a paintbrush (native cursor, so no lag) */
.cur{display:none!important}
@media (hover:hover){
  html{cursor:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg stroke=%22%23000%22 fill=%22%23000%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke-width=%224.8%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke-width=%224.8%22/%3E%3Cpath d=%22M7.5 23.5 L13 18.5 L17.5 20.8 L21.5 13.5%22 fill=%22none%22 stroke-width=%223.7%22/%3E%3Cpath d=%22M25 23.5 L21.6 10.5%22 fill=%22none%22 stroke-width=%224.0%22/%3E%3Cpath d=%22M19.3 9.6 L23.8 8.4%22 fill=%22none%22 stroke-width=%224.0%22/%3E%3Cpath d=%22M2.4 13.6 L9 15.6 L14.5 15.2 L16.5 12.4 L21.8 12 L22.6 14.8 L18.4 17.2 L10.2 18 Z%22 stroke-width=%223.2%22/%3E%3Cpath d=%22M22.2 15.1 Q27.5 13.2 30.4 16.2 Q26.6 16.1 23 16.9 Z%22 stroke-width=%223.2%22/%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%221.3%22 stroke-width=%223.2%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%221.3%22 stroke-width=%223.2%22/%3E%3C/g%3E%3Cg stroke=%22%23fff%22 fill=%22%23fff%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke-width=%222.6%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke-width=%222.6%22/%3E%3Cpath d=%22M7.5 23.5 L13 18.5 L17.5 20.8 L21.5 13.5%22 fill=%22none%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M25 23.5 L21.6 10.5%22 fill=%22none%22 stroke-width=%221.8%22/%3E%3Cpath d=%22M19.3 9.6 L23.8 8.4%22 fill=%22none%22 stroke-width=%221.8%22/%3E%3Cpath d=%22M2.4 13.6 L9 15.6 L14.5 15.2 L16.5 12.4 L21.8 12 L22.6 14.8 L18.4 17.2 L10.2 18 Z%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M22.2 15.1 Q27.5 13.2 30.4 16.2 Q26.6 16.1 23 16.9 Z%22 stroke-width=%221.0%22/%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%221.3%22 stroke-width=%221.0%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%221.3%22 stroke-width=%221.0%22/%3E%3C/g%3E%3Cpath d=%22M8.6 13.3 L15.8 12.1%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M13.2 17.6 h4.6 v3 h-3.6 z%22 fill=%22%23000%22/%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%223.9%22 fill=%22%23fff%22/%3E%3Cg transform=%22rotate(0 7.5 23.5)%22 stroke=%22%23000%22 stroke-width=%221.1%22 stroke-linecap=%22round%22%3E%3Cline x1=%227.5%22 y1=%2219.8%22 x2=%227.5%22 y2=%2227.2%22/%3E%3Cline x1=%224.3%22 y1=%2221.65%22 x2=%2210.7%22 y2=%2225.35%22/%3E%3Cline x1=%224.3%22 y1=%2225.35%22 x2=%2210.7%22 y2=%2221.65%22/%3E%3C/g%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%221.2%22 fill=%22%23000%22/%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-dasharray=%221.2 2.07%22 stroke-dashoffset=%220%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%223.9%22 fill=%22%23fff%22/%3E%3Cg transform=%22rotate(0 25 23.5)%22 stroke=%22%23000%22 stroke-width=%221.1%22 stroke-linecap=%22round%22%3E%3Cline x1=%2225%22 y1=%2219.8%22 x2=%2225%22 y2=%2227.2%22/%3E%3Cline x1=%2221.8%22 y1=%2221.65%22 x2=%2228.2%22 y2=%2225.35%22/%3E%3Cline x1=%2221.8%22 y1=%2225.35%22 x2=%2228.2%22 y2=%2221.65%22/%3E%3C/g%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%221.2%22 fill=%22%23000%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-dasharray=%221.2 2.07%22 stroke-dashoffset=%220%22/%3E%3C/svg%3E") 30 16,auto}
  a,button,.chip,.btn,summary{cursor:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg stroke=%22%23000%22 fill=%22%23000%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke-width=%224.8%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke-width=%224.8%22/%3E%3Cpath d=%22M7.5 23.5 L13 18.5 L17.5 20.8 L21.5 13.5%22 fill=%22none%22 stroke-width=%223.7%22/%3E%3Cpath d=%22M25 23.5 L21.6 10.5%22 fill=%22none%22 stroke-width=%224.0%22/%3E%3Cpath d=%22M19.3 9.6 L23.8 8.4%22 fill=%22none%22 stroke-width=%224.0%22/%3E%3Cpath d=%22M2.4 13.6 L9 15.6 L14.5 15.2 L16.5 12.4 L21.8 12 L22.6 14.8 L18.4 17.2 L10.2 18 Z%22 stroke-width=%223.2%22/%3E%3Cpath d=%22M22.2 15.1 Q27.5 13.2 30.4 16.2 Q26.6 16.1 23 16.9 Z%22 stroke-width=%223.2%22/%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%221.3%22 stroke-width=%223.2%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%221.3%22 stroke-width=%223.2%22/%3E%3C/g%3E%3Cg stroke=%22%23fff%22 fill=%22%23fff%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke-width=%222.6%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke-width=%222.6%22/%3E%3Cpath d=%22M7.5 23.5 L13 18.5 L17.5 20.8 L21.5 13.5%22 fill=%22none%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M25 23.5 L21.6 10.5%22 fill=%22none%22 stroke-width=%221.8%22/%3E%3Cpath d=%22M19.3 9.6 L23.8 8.4%22 fill=%22none%22 stroke-width=%221.8%22/%3E%3Cpath d=%22M2.4 13.6 L9 15.6 L14.5 15.2 L16.5 12.4 L21.8 12 L22.6 14.8 L18.4 17.2 L10.2 18 Z%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M22.2 15.1 Q27.5 13.2 30.4 16.2 Q26.6 16.1 23 16.9 Z%22 stroke-width=%221.0%22/%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%221.3%22 stroke-width=%221.0%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%221.3%22 stroke-width=%221.0%22/%3E%3C/g%3E%3Cpath d=%22M8.6 13.3 L15.8 12.1%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M13.2 17.6 h4.6 v3 h-3.6 z%22 fill=%22%23000%22/%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%223.9%22 fill=%22%23fff%22/%3E%3Cg transform=%22rotate(0 7.5 23.5)%22 stroke=%22%23000%22 stroke-width=%221.1%22 stroke-linecap=%22round%22%3E%3Cline x1=%227.5%22 y1=%2219.8%22 x2=%227.5%22 y2=%2227.2%22/%3E%3Cline x1=%224.3%22 y1=%2221.65%22 x2=%2210.7%22 y2=%2225.35%22/%3E%3Cline x1=%224.3%22 y1=%2225.35%22 x2=%2210.7%22 y2=%2221.65%22/%3E%3C/g%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%221.2%22 fill=%22%23000%22/%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-dasharray=%221.2 2.07%22 stroke-dashoffset=%220%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%223.9%22 fill=%22%23fff%22/%3E%3Cg transform=%22rotate(0 25 23.5)%22 stroke=%22%23000%22 stroke-width=%221.1%22 stroke-linecap=%22round%22%3E%3Cline x1=%2225%22 y1=%2219.8%22 x2=%2225%22 y2=%2227.2%22/%3E%3Cline x1=%2221.8%22 y1=%2221.65%22 x2=%2228.2%22 y2=%2225.35%22/%3E%3Cline x1=%2221.8%22 y1=%2225.35%22 x2=%2228.2%22 y2=%2221.65%22/%3E%3C/g%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%221.2%22 fill=%22%23000%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-dasharray=%221.2 2.07%22 stroke-dashoffset=%220%22/%3E%3C/svg%3E") 30 16,pointer!important}
  [data-view],.tile,.card,.strip a{cursor:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2240%22 viewBox=%220 0 96 40%22%3E%3Cg transform=%22translate(0 4)%22%3E%3Cg stroke=%22%23000%22 fill=%22%23000%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke-width=%224.8%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke-width=%224.8%22/%3E%3Cpath d=%22M7.5 23.5 L13 18.5 L17.5 20.8 L21.5 13.5%22 fill=%22none%22 stroke-width=%223.7%22/%3E%3Cpath d=%22M25 23.5 L21.6 10.5%22 fill=%22none%22 stroke-width=%224.0%22/%3E%3Cpath d=%22M19.3 9.6 L23.8 8.4%22 fill=%22none%22 stroke-width=%224.0%22/%3E%3Cpath d=%22M2.4 13.6 L9 15.6 L14.5 15.2 L16.5 12.4 L21.8 12 L22.6 14.8 L18.4 17.2 L10.2 18 Z%22 stroke-width=%223.2%22/%3E%3Cpath d=%22M22.2 15.1 Q27.5 13.2 30.4 16.2 Q26.6 16.1 23 16.9 Z%22 stroke-width=%223.2%22/%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%221.3%22 stroke-width=%223.2%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%221.3%22 stroke-width=%223.2%22/%3E%3C/g%3E%3Cg stroke=%22%23fff%22 fill=%22%23fff%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke-width=%222.6%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke-width=%222.6%22/%3E%3Cpath d=%22M7.5 23.5 L13 18.5 L17.5 20.8 L21.5 13.5%22 fill=%22none%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M25 23.5 L21.6 10.5%22 fill=%22none%22 stroke-width=%221.8%22/%3E%3Cpath d=%22M19.3 9.6 L23.8 8.4%22 fill=%22none%22 stroke-width=%221.8%22/%3E%3Cpath d=%22M2.4 13.6 L9 15.6 L14.5 15.2 L16.5 12.4 L21.8 12 L22.6 14.8 L18.4 17.2 L10.2 18 Z%22 stroke-width=%221.0%22/%3E%3Cpath d=%22M22.2 15.1 Q27.5 13.2 30.4 16.2 Q26.6 16.1 23 16.9 Z%22 stroke-width=%221.0%22/%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%221.3%22 stroke-width=%221.0%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%221.3%22 stroke-width=%221.0%22/%3E%3C/g%3E%3Cpath d=%22M8.6 13.3 L15.8 12.1%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M13.2 17.6 h4.6 v3 h-3.6 z%22 fill=%22%23000%22/%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%223.9%22 fill=%22%23fff%22/%3E%3Cg transform=%22rotate(0 7.5 23.5)%22 stroke=%22%23000%22 stroke-width=%221.1%22 stroke-linecap=%22round%22%3E%3Cline x1=%227.5%22 y1=%2219.8%22 x2=%227.5%22 y2=%2227.2%22/%3E%3Cline x1=%224.3%22 y1=%2221.65%22 x2=%2210.7%22 y2=%2225.35%22/%3E%3Cline x1=%224.3%22 y1=%2225.35%22 x2=%2210.7%22 y2=%2221.65%22/%3E%3C/g%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%221.2%22 fill=%22%23000%22/%3E%3Ccircle cx=%227.5%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-dasharray=%221.2 2.07%22 stroke-dashoffset=%220%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%223.9%22 fill=%22%23fff%22/%3E%3Cg transform=%22rotate(0 25 23.5)%22 stroke=%22%23000%22 stroke-width=%221.1%22 stroke-linecap=%22round%22%3E%3Cline x1=%2225%22 y1=%2219.8%22 x2=%2225%22 y2=%2227.2%22/%3E%3Cline x1=%2221.8%22 y1=%2221.65%22 x2=%2228.2%22 y2=%2225.35%22/%3E%3Cline x1=%2221.8%22 y1=%2225.35%22 x2=%2228.2%22 y2=%2221.65%22/%3E%3C/g%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%221.2%22 fill=%22%23000%22/%3E%3Ccircle cx=%2225%22 cy=%2223.5%22 r=%225.2%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-dasharray=%221.2 2.07%22 stroke-dashoffset=%220%22/%3E%3C/g%3E%3Crect x=%2234%22 y=%226%22 width=%2258%22 height=%2224%22 rx=%2212%22 fill=%22%23fff%22 stroke=%22%23000%22 stroke-width=%221.2%22/%3E%3Ctext x=%2263%22 y=%2222.5%22 text-anchor=%22middle%22 font-family=%22Menlo,monospace%22 font-size=%2211%22 letter-spacing=%221.5%22 fill=%22%23000%22%3EVIEW%3C/text%3E%3C/svg%3E") 30 20,zoom-in!important}
}
@keyframes spin{to{transform:rotate(360deg)}}


/* lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgba(8,8,8,.97);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 16px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.lb.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.lb-top,.lb-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.lb-stage{display:grid;place-items:center;min-height:0;overflow:hidden;padding-block:18px;position:relative}
.lb-stage img,.lb-stage video{max-height:min(68vh,780px);max-height:min(68dvh,780px);max-width:min(100%,1000px);width:auto;height:auto;object-fit:contain;border-radius:4px;transform:scale(.97);transition:transform .6s var(--ease)}
.lb.open .lb-stage img,.lb.open .lb-stage video{transform:none}
.lb-bot h3{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(22px,3vw,40px);letter-spacing:-.04em;line-height:1}
.lb-nav{display:flex;gap:8px}

@media (max-width:860px){
  .nav ul{gap:12px}.nav ul a,.nav .navbtn{font-size:13px}.nav .clock{display:none}.nav-in{grid-template-columns:1fr auto}
  .logos{--k:.7}
  .foot{grid-template-columns:1fr}.foot>:last-child{text-align:left}
}
@media (max-width:560px){
  .word{font-size:clamp(40px,14.6vw,120px);white-space:normal;flex-wrap:wrap}
  .word .br{flex-basis:100%;height:0}
  .word .sp{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- moving strip (home): a wave of covers ---------- */
.strip{position:relative;overflow:hidden;height:calc(var(--sh) * 1.75);--sh:clamp(150px,16vw,250px);margin-block:clamp(8px,2vw,24px);margin-top:clamp(40px,8.5vw,110px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.strip a{position:absolute;left:0;top:50%;height:var(--sh);width:var(--sh);border-radius:6px;overflow:hidden;background:var(--ink-2);box-shadow:0 26px 50px -24px rgba(0,0,0,.9);will-change:transform}
.strip img{width:100%;height:100%;object-fit:cover;pointer-events:none}

/* ---------- work dropdown ---------- */
.navbtn{font:inherit;font-size:14px;color:inherit;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.navbtn i{font-style:normal;display:inline-block;transition:transform .4s var(--ease)}
.navbtn[aria-expanded="true"] i{transform:rotate(45deg)}
.menu{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 54px);right:var(--gut);width:min(380px,calc(100vw - 32px));background:var(--paper);color:var(--ink);border-radius:10px;padding:8px;clip-path:inset(0 0 100% 0 round 10px);visibility:hidden;transition:clip-path .55s var(--ease),visibility 0s .55s;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.menu.open{clip-path:inset(0 0 0 0 round 10px);visibility:visible;transition:clip-path .55s var(--ease)}
.menu a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px 10px;border-radius:6px;transition:background .3s}
.menu a:hover,.menu a[aria-current="page"]{background:rgba(10,10,10,.07)}
.menu img{width:44px;height:44px;object-fit:cover;border-radius:4px}
.menu b{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.035em;line-height:1}
.menu sup{font-family:var(--mono);font-size:11px;color:#6e6e6c;top:0}
.menu a{opacity:0;transform:translateY(-6px);transition:background .3s,opacity .4s var(--ease),transform .5s var(--ease)}
.menu.open a{opacity:1;transform:none}
.menu.open a:nth-child(2){transition-delay:0s,.04s,.04s}.menu.open a:nth-child(3){transition-delay:0s,.08s,.08s}.menu.open a:nth-child(4){transition-delay:0s,.12s,.12s}.menu.open a:nth-child(5){transition-delay:0s,.16s,.16s}.menu.open a:nth-child(6){transition-delay:0s,.2s,.2s}

/* ---------- work index (home) ---------- */
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:clamp(12px,2vw,32px);align-items:center;padding-block:clamp(16px,2.2vw,28px);position:relative}
.index h3{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(34px,6.4vw,104px);letter-spacing:-.055em;line-height:.92;transition:transform .6s var(--ease),color .4s}
.index .n{font-family:var(--mono);font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums;align-self:start;margin-top:.6em}
.index .stack{display:flex;align-items:center}
.index .stack img{width:clamp(44px,5vw,76px);height:clamp(44px,5vw,76px);object-fit:cover;border-radius:4px;margin-left:-14px;border:2px solid var(--ink);transition:transform .6s var(--ease)}
.index .stack img:first-child{margin-left:0}
.index a:hover h3{transform:translateX(clamp(8px,1.4vw,22px))}
.index a:hover .stack img:nth-child(1){transform:translateX(-8px) rotate(-6deg)}
.index a:hover .stack img:nth-child(3){transform:translateX(8px) rotate(6deg)}
.index:hover a:not(:hover) h3{color:#3a3a39}
.peek{position:fixed;left:0;top:0;z-index:40;width:clamp(180px,20vw,300px);pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-3deg);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
.peek img{width:100%;border-radius:6px;box-shadow:0 30px 60px -10px rgba(0,0,0,.7)}
@media (hover:none){.peek{display:none}.index a{cursor:pointer}}
@media (max-width:640px){.index a{grid-template-columns:minmax(0,1fr) auto}.index .stack{display:none}}

/* ---------- category page ---------- */
.cat-hero{padding-top:clamp(112px,16vh,170px);padding-bottom:clamp(24px,3vw,40px)}
.crumb{display:flex;gap:10px;align-items:center;margin-bottom:clamp(16px,2vw,28px)}
.crumb a:hover{color:var(--paper)}
.cat-title{font-family:var(--display);font-weight:600;font-size:clamp(52px,11vw,210px);letter-spacing:-.065em;line-height:.85;margin:0;padding-bottom:.08em}
.cat-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;margin-top:clamp(16px,2vw,28px)}
.cat-row p{margin:0;max-width:46ch;font-size:clamp(16px,1.4vw,20px);line-height:1.35;letter-spacing:-.01em;color:var(--mute)}
.others{display:flex;gap:8px;flex-wrap:wrap}
.nextcat{display:block;border-top:1px solid var(--line);padding-block:clamp(40px,6vw,90px)}
.nextcat h3{margin:8px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(44px,9vw,170px);letter-spacing:-.065em;line-height:.88;transition:transform .7s var(--ease)}
.nextcat:hover h3{transform:translateX(clamp(10px,2vw,30px))}
.mini-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-block:16px 28px}

/* centred about + contact */
.about{text-align:center}
.about .lead{margin-inline:auto;max-width:44ch;font-size:clamp(22px,2.5vw,40px);line-height:1.12}
.about.sec{padding-block:clamp(36px,5vw,72px)}
.about .sec-head{margin-bottom:clamp(12px,1.6vw,20px)}
.contact{text-align:center;display:flex;flex-direction:column;align-items:center}
.contact .big{font-size:clamp(24px,3.6vw,60px);letter-spacing:-.05em;line-height:1;margin:16px auto 0;word-break:normal;overflow-wrap:anywhere}
.contact .row{justify-content:center}
.contact .foot{width:100%;display:flex;justify-content:space-between;gap:16px;text-align:left}
.contact .foot-word{width:100%;text-align:center;margin-left:0}
@media (max-width:860px){.contact .foot{text-align:center}.contact .foot>*{text-align:center!important}}
@keyframes slide{to{transform:translateX(-50%)}}

.nav .ig{display:inline-flex;align-items:center;margin-top:0;transform:translateY(3px);transition:transform .4s var(--ease)}
.nav .ig:hover{transform:translateY(3px) rotate(-8deg) scale(1.12)}
.nav .ig svg{display:block;width:18px;height:18px}
.nav .ig::after{display:none}

.hero .word{justify-content:center;margin-left:0}

.about .lead .q,.about .lead .more{display:block;color:var(--mute)}
.about .lead .q{margin-bottom:.55em}
.about .lead .more{margin-top:.55em}

/* ---------- about page ---------- */
.ab-hero{padding-top:clamp(112px,16vh,170px);padding-bottom:clamp(28px,4vw,56px)}
.ab-quote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(34px,6.2vw,108px);letter-spacing:-.055em;line-height:.95;color:var(--mute);max-width:16ch;text-wrap:balance}
.ab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,90px);align-items:start;padding-top:clamp(8px,1vw,16px)}
.ab-photo{margin:0;position:sticky;top:90px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ab-photo .ph{aspect-ratio:4/5}
.ab-photo .ph,.ab-photo img{width:100%;height:auto;max-width:100%;border-radius:6px;object-fit:cover;background:var(--ink-2);filter:grayscale(1) contrast(1.05);transition:filter .8s var(--ease),transform .8s var(--ease)}
.ab-photo:hover img{filter:none;transform:scale(1.01)}
.ab-photo .ph{display:flex;flex-direction:column;justify-content:space-between;padding:14px;border:1px dashed var(--line)}
.ab-text{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);max-width:62ch}
.ab-text p{margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.45;letter-spacing:-.01em;color:#cfcfcd}
.ab-text .ab-lead{font-family:var(--display);font-size:clamp(26px,2.8vw,44px);line-height:1.1;letter-spacing:-.04em;color:var(--paper);text-wrap:balance}
.ab-block{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.ab-text .ab-names{font-family:var(--display);font-size:clamp(20px,1.9vw,30px);line-height:1.2;letter-spacing:-.03em;color:var(--paper)}
.ab-text .ab-names span{color:var(--mute)}
.ab-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ab-tags li{font-size:14px;border:1px solid var(--line);border-radius:999px;padding:7px 13px;transition:background .3s,color .3s}
.ab-tags li:hover{background:var(--paper);color:var(--ink)}
.ab-sign{text-align:center;padding-block:clamp(56px,7vw,100px) clamp(32px,4vw,56px)}
.ab-sign p{margin:0 auto;font-family:var(--display);font-weight:600;font-size:clamp(36px,6.4vw,120px);letter-spacing:-.06em;line-height:.92;max-width:14ch;text-wrap:balance}
@media (max-width:860px){.ab{grid-template-columns:1fr}.ab-photo{position:static;max-width:420px}}
.ab-photo img{width:auto;max-width:100%;max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);object-fit:contain;align-self:flex-start}
@media (max-width:860px){.ab-photo img{max-height:none;width:100%}}

/* ---------- Hottest 100 case study ---------- */
.hx-hero{--hh:clamp(220px,min(62vh,46vw),720px);height:var(--hh);overflow:hidden;position:relative;margin-top:calc(env(safe-area-inset-top,0px) + 64px)}
.hx-pan{height:100%;width:max-content;animation:hxpan 60s ease-in-out infinite alternate}
.hx-pan img{height:100%;width:auto;max-width:none;display:block}
@keyframes hxpan{from{transform:translateX(0)}to{transform:translateX(calc(-1 * (var(--hh) * 3.675 - 100vw)))}}
.hx-intro{padding-top:clamp(28px,4vw,56px)}
.hx-title{font-family:var(--display);font-weight:600;font-size:clamp(44px,8.6vw,164px);letter-spacing:-.06em;line-height:.9;margin:0 0 clamp(24px,3vw,44px);text-wrap:balance}
.hx-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);border-top:1px solid var(--line);padding-top:clamp(20px,2.4vw,32px)}
.hx-lead{margin:0;font-family:var(--display);font-size:clamp(20px,2vw,30px);line-height:1.2;letter-spacing:-.025em;text-wrap:pretty}
.hx-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
.hx-facts div{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:10px}
.hx-facts dd{margin:0;font-size:16px}
.hx-sec{padding-top:clamp(64px,9vw,130px)}
.hx-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:16px}
.hx-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,1.4vw,20px);align-items:start}
.hx-pair .hx-tall{max-width:62%;justify-self:center}
.hx-fig{margin:0;display:flex;flex-direction:column;gap:10px}
.hx-fig img{width:100%;height:auto;aspect-ratio:var(--r);object-fit:cover;border-radius:6px;background:var(--ink-2);transition:transform .8s var(--ease)}
.hx-fig:hover img{transform:scale(1.01)}
.hx-wide{margin-bottom:clamp(16px,2vw,28px)}
.hx-carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gut);gap:0;scrollbar-width:thin}
.hx-carousel img{flex:none;height:clamp(320px,62vh,720px);width:auto;scroll-snap-align:start;display:block}
@media (max-width:860px){.hx-grid,.hx-pair{grid-template-columns:1fr}.hx-pair .hx-tall{max-width:70%}}
.menu a.feat{border-top:1px solid rgba(10,10,10,.12);margin-top:4px;padding-top:12px}
/* hottest 100 hero: static, whole billboard visible */
.hx-hero{height:auto}
.hx-pan{animation:none;width:100%;height:auto}
.hx-pan img{width:100%;height:auto;max-width:100%}

/* bike cursor */
.mx{position:fixed;left:0;top:0;z-index:2147483647;pointer-events:none;width:32px;height:32px;opacity:0;transition:opacity .15s;will-change:transform}
.mx.on{opacity:1}
.mx svg{display:block;overflow:visible}
.mx .mx-s{transform-box:fill-box;transform-origin:center;animation:mxSpin 2.2s linear infinite}
.mx .mx-t{animation:mxTread 2.2s linear infinite}
@keyframes mxSpin{to{transform:rotate(360deg)}}
@keyframes mxTread{to{stroke-dashoffset:-32.7}}
.mx-v{position:absolute;left:36px;top:2px;height:24px;padding:0 12px;border-radius:12px;background:#fff;color:#000;border:1px solid #000;font:11px/24px var(--mono,Menlo,monospace);letter-spacing:.14em;opacity:0;transform:scale(.8);transform-origin:left center;transition:opacity .15s,transform .15s}
.mx.view .mx-v{opacity:1;transform:none}
html.mx-on,html.mx-on *{cursor:none!important}
@media (prefers-reduced-motion:reduce){.mx .mx-s,.mx .mx-t{animation:none}}
/* end bike cursor */

/* even rhythm: every block on the home page sits one --space apart */
.about.sec{padding-bottom:0}
#clients .clients-head{margin-top:var(--space)}
.contact{padding-top:var(--space)}
.contact .foot{margin-top:var(--space)}
.contact .foot-word{margin-top:var(--space)}
.contact{padding-bottom:var(--space)}
.hero{padding-top:calc(58px + var(--space))}

/* category pages: no big title, one bar of crumb + category buttons top and bottom */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cat-hero{padding-top:calc(58px + var(--gut));padding-bottom:var(--gut)}
.cat-bar{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap}
.cat-bar .crumb{margin:0}
.cat-bar-bottom{padding-block:var(--gut)}
.cat-hero + .hx-hero{margin-top:0}
.cat-hero + .hx-hero{margin-inline:var(--gut);border-radius:4px}

.nav ul li:has(> .ig) + li:has(> .ig){margin-left:-10px}
@media (max-width:640px){.nav ul li:has(> .ig) + li:has(> .ig){margin-left:-4px}}
.nav .mark{white-space:nowrap}
@media (max-width:420px){.nav ul{gap:10px}.nav ul a,.nav .navbtn{font-size:12.5px}.nav .ig svg{width:16px;height:16px}.nav ul li:has(> .ig) + li:has(> .ig){margin-left:-2px}}
/* about: photo fills its column, no dead gap */
.ab{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px)}
.ab-photo{align-items:stretch}
.ab-photo img{width:100%;max-width:100%;aspect-ratio:4/5;max-height:calc(100dvh - 120px);object-fit:cover;object-position:50% 12%;align-self:stretch}
@media (max-width:860px){.ab{grid-template-columns:1fr}.ab-photo{max-width:none}.ab-photo img{max-height:none}}
/* about v2: show the whole photo, uncropped; wider text */
.ab{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ab-photo{position:static}
.ab-photo img{aspect-ratio:auto;height:auto;max-height:none;object-fit:contain}
.ab-text{max-width:min(100%,880px)}
@media (max-width:860px){.ab{grid-template-columns:1fr}.ab-photo img{width:100%}}
/* about v3: sticky photo again, sized to fit the screen height, uncropped, no gap */
@media (min-width:861px){.ab{grid-template-columns:min(calc((100vh - 160px) * 0.5597),46%) minmax(0,1fr);grid-template-columns:min(calc((100dvh - 160px) * 0.5597),46%) minmax(0,1fr)}.ab-photo{position:sticky;top:90px}.ab-photo img{width:100%;height:auto;max-height:none}}