@font-face{font-family:"Neue Montreal";src:url("/fonts/NeueMontreal-Regular.woff2") format("woff2"),url("/fonts/NeueMontreal-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Montreal";src:url("/fonts/NeueMontreal-Medium.woff2") format("woff2"),url("/fonts/NeueMontreal-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
:root{color-scheme:dark;--paper:#141416;--ink:#f4f3ee;--grey:#88888e;--rule:rgba(244,243,238,.12);--accent:#5c7aea}
:root{--crowd:#52514d;--body:clamp(16px,1.15vw,18px);--unit:calc(var(--body)*1.6);--indent:208px}
/* the site is always dark, whatever the system setting; the light and system-following setup is in git history: handover/light-mode/ at 3bdd0ae */
@media (max-width:860px){:root{--indent:0px}}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif;font-kerning:normal}
::selection{background:var(--accent);color:var(--paper)}
a{color:inherit;text-decoration:none;transition:color .15s}
a:hover,a:focus-visible{color:var(--accent)}
a:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.arrow{color:var(--accent)}
.page{min-height:100vh;min-height:100svh;padding:clamp(24px,3.2vh,40px) clamp(24px,6vw,96px);display:flex;flex-direction:column}
.wrap{max-width:1180px;width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column}
header{display:flex;justify-content:space-between;align-items:center;gap:24px}
header img{height:clamp(22px,1.9vw,28px);width:auto;display:block}
header>a.small{white-space:nowrap}
.small{font-size:clamp(14px,1vw,15px);line-height:1.55}
.grey{color:var(--grey)}
.ink{color:var(--ink)}
main:not(.legal){flex:1;display:flex;flex-direction:column}
.hero{display:flex;flex-direction:column;gap:calc(var(--unit)*4);padding:clamp(24px,37.8vh - 284px + clamp(0px,(1512px - 100vw)*.2,55px),240px) 0 0}
h1{margin:0;font-size:clamp(36px,min(4.4vw,7vh),62px);line-height:1.04;font-weight:400;letter-spacing:-.035em;text-wrap:pretty;max-width:24ch}
h1 span{display:block;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
@media (max-width:640px){.hero{padding:clamp(48px,8vh,72px) 0 0}.hero h1{font-size:min(36px,calc((100vw - 48px)/10.8))}}
.hero-top{--hero-gap:clamp(18px,2.8vh,32px);display:grid;grid-template-columns:fit-content(62%) minmax(0,1fr);gap:clamp(32px,4.5vw,72px)}
.hero-text{display:flex;flex-direction:column;gap:var(--hero-gap)}
.intro{margin:0;max-width:54ch;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--grey);text-wrap:pretty}
.crowd{position:relative;width:100%;min-height:220px}
/* stacked: the crowd sits as close under the intro as the intro under the headline (6px less in CSS, because the intro's
   leading and the crowd's inner margin add that much more empty space), with more room before the first section
   (the hero's own gap stays for the closing) */
@media (max-width:960px){.hero-top{grid-template-columns:minmax(0,1fr);gap:calc(var(--hero-gap) - 6px);margin-bottom:calc(var(--unit)*-1.5)}.crowd{height:clamp(220px,30vh,320px)}}
.crowd canvas{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
@media (max-width:640px){.crowd{height:clamp(200px,30vh,260px)}}
.copy{margin-left:var(--indent)}
.copy section+section{margin-top:calc(var(--unit)*2)}
.copy h2{margin:0 0 calc(var(--unit)*.4);font-size:clamp(20px,1.75vw,26px);line-height:1.25;font-weight:400;letter-spacing:-.03em}
.copy h2 span,.closing span{display:block;text-wrap:balance}
.copy p{margin:0;max-width:54ch;font-size:var(--body);line-height:1.6;color:var(--grey);text-wrap:pretty}
.closing{margin:0;font-size:clamp(28px,min(3vw,5vh),42px);line-height:1.12;letter-spacing:-.035em}
.closing em{font-style:normal;color:var(--accent)}
@media (max-width:640px){.closing{font-size:min(28px,calc((100vw - 48px)/12.8))}}
/* the mark is centred on the right edge of the copy column (indent + 54ch at body size) */
.closing-row{--mark:clamp(120px,13vw,190px);display:grid;grid-template-columns:minmax(max-content,calc(var(--indent) + 54ch - var(--mark)*375/940 - 32px)) auto;column-gap:32px;justify-content:start;align-items:center;font-size:var(--body)}
/* the mark's artwork is 375 wide in a 470 square: crop the side space so the box is the visible mark */
.mark{flex:none;height:var(--mark);aspect-ratio:375/470;background:var(--crowd);-webkit-mask:url("/assets/icon.svg") center/auto 100% no-repeat;mask:url("/assets/icon.svg") center/auto 100% no-repeat}
@media (max-width:640px){.closing-row{--mark:88px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--unit)}.mark{order:-1;align-self:center}}
.partners a{color:var(--ink)}
.partners a:hover{color:var(--accent)}
.row{display:flex;flex-wrap:wrap;gap:12px 48px;padding:clamp(16px,2.6vh,32px) 0}
.row+.row{border-top:1px solid var(--rule)}
.label{flex:0 0 160px;font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding-top:clamp(5px,.5vw,8px)}
.body{flex:1 1 360px;max-width:64ch;display:flex;flex-direction:column;gap:16px}
.body p{margin:0}
.team-head{padding:clamp(48px,8vh,96px) 0 clamp(24px,4vh,40px)}
.people p{font-size:clamp(15px,1.05vw,17px);line-height:1.6;color:var(--grey)}
.people p+p{margin-top:6px}
footer{padding-top:clamp(16px,2.4vh,28px);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 30px;color:var(--grey)}
main:not(.legal)+footer{margin-top:calc(var(--unit)*3)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 30px}
/* the footer sentences break between each other, never mid-phrase; on phones each gets its own line */
@media (min-width:641px){footer>div>span{white-space:nowrap}}
@media (max-width:640px){footer>div>span{display:block}}
.legal{flex:1;padding:clamp(48px,8vh,96px) 0}
.legal h1{margin-bottom:clamp(32px,5vh,56px)}
.legal h2{margin:32px 0 8px;font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.legal p{margin:0 0 12px;max-width:64ch;font-size:clamp(15px,1.05vw,17px);line-height:1.6}