/* type and colour: Renaissance pigments, a futurist sans and a calligraphic serif */
:root{--ink:#111110;--paper:#f4f0e6;--white:#fbfaf6;--lilac:#1e2c8f;--mint:#cdd5e8;--yellow:#ecdc8c;--lime:#ecdc8c;--coral:#a8391f;--green:#213f2f;--plaster:#e4dccb;--grey:#6b6a62;
--sans:"Onest",system-ui,sans-serif;--head:"Unbounded","Onest",system-ui,sans-serif;--cond:"Unbounded","Onest",sans-serif;--serif:"Cormorant","Cormorant Garamond",Georgia,serif;--display:"Kalnia","Cormorant",Georgia,serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace}
body{font-family:var(--sans);background:var(--paper)}
.what,.ventures,.people,.partners{background:var(--white)}
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:-.045em}
h2{font-size:clamp(28px,4.3vw,68px);line-height:1.04}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.42em;letter-spacing:-.025em;line-height:.9}
.btn{font:500 15px/1 var(--sans);letter-spacing:0}
.brand{font:600 19px/1 var(--head);letter-spacing:-.05em}
.nav.scrolled .brand svg,.foot .brand svg{color:var(--lilac)}
.nav-links a{font-size:14px}

/* hero */
.scene .hero-text h1{font:500 clamp(60px,11.4vw,196px)/.82 var(--serif);letter-spacing:-.035em}
.scene .hero-text h1 em{font-size:1em;font-weight:400;letter-spacing:-.03em;line-height:.82}
.hero-text p{font-weight:400;max-width:40ch;margin-top:34px}
.opening{font-weight:400;letter-spacing:-.01em}

/* what */
.fall{font:700 clamp(24px,4.9vw,76px)/1.05 var(--head);letter-spacing:-.05em}
.answers h3{font:500 12px/1 var(--mono);letter-spacing:.08em}
.answers p{font:500 clamp(24px,2.5vw,36px)/1.12 var(--serif);letter-spacing:-.015em}

/* system */
.system p{font-size:18px}
.core{font-size:clamp(18px,2.2vw,30px)}
.wheel a{font:500 clamp(10px,1vw,13px)/1 var(--head);letter-spacing:-.02em}
.index strong{font:600 clamp(19px,2.3vw,33px)/1 var(--head);letter-spacing:-.05em}
.index em{font:italic 400 clamp(24px,2.5vw,36px)/1 var(--serif)}
.index span:first-child,.steps li::before,.sol header span,.rail span{font-family:var(--mono)}
.index span:last-child{font-size:16px}

/* solutions */
.sol h3{font:500 clamp(17px,1.9vw,26px)/1 var(--head);letter-spacing:-.03em}
.sol header b{font:400 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.pitch{font:500 clamp(36px,5.3vw,84px)/.96 var(--serif);letter-spacing:-.03em;max-width:15ch}
.sol-body p:not(.pitch){font-size:17px;margin-top:26px}
.sol li{font-size:15px}
.sol aside em{font-family:var(--serif);font-weight:300;opacity:.14}
.sol aside strong{font:italic 500 clamp(30px,3.2vw,48px)/1 var(--serif);letter-spacing:-.02em}
.sol.dark .scan-row,.sol.dark .scan-out ul{color:var(--ink)}

/* the rest */
.steps h3{font-size:clamp(15px,1.45vw,21px);letter-spacing:-.04em}
.steps p{font-size:15px}
.statement p{font-weight:300}
.marquee div{font-size:clamp(34px,6.4vw,96px);font-weight:600}
.ventures h2 span{font-weight:300}
.tile h3{font-size:clamp(24px,3.2vw,46px)}
.tile.dark{color:var(--paper)}
.tile.dark i{box-shadow:inset 0 0 0 1.5px rgba(244,240,230,.35)}
.tile.dark::after{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5' fill='none' stroke='%23111110' stroke-width='1.5'/%3E%3C/svg%3E")}
caption{font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
tbody th{font:italic 500 clamp(30px,3.4vw,50px)/1 var(--serif);letter-spacing:-.02em}
tbody td:last-child{font:500 clamp(16px,1.6vw,22px)/1.2 var(--head);letter-spacing:-.04em}
tbody tr:hover{background:var(--plaster)}
.crew strong{font:500 clamp(17px,1.9vw,27px)/1.05 var(--head);letter-spacing:-.045em}
.crew li:hover strong{font-family:var(--head);font-style:normal;font-weight:500;letter-spacing:-.045em;color:var(--lilac)}
.crew span{font:400 12px/1.3 var(--mono)}
.partners-card{background:var(--yellow)}
.partners-card>b{font-weight:300}
.faq summary{font:500 clamp(24px,2.5vw,36px)/1.08 var(--serif);letter-spacing:-.02em}
.faq details[open] summary::after{background:var(--lilac);color:var(--paper)}
.contact{background:var(--lilac);color:var(--paper)}
.contact input,.contact select,.contact textarea{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(244,240,230,.55);color:var(--paper)}
.contact select option{color:var(--ink)}
.contact .btn{background:var(--paper);color:var(--ink)}
.contact :focus-visible{outline-color:var(--yellow)}
.play span{font-family:var(--head);font-weight:500;font-size:12px}
::selection{background:var(--lilac);color:var(--paper)}

@media (max-width:959px){.nav-links a:not(.btn){font:600 clamp(26px,7.6vw,46px)/1.2 var(--head);letter-spacing:-.05em}}
@media (max-width:640px){
  .scene .hero-text h1{font-size:clamp(58px,19vw,96px)}
  .pitch{font-size:clamp(34px,10vw,48px)}
  .wheel a{font-size:9.5px;padding:0 8px}
}

/* third pass: Kalnia, a wide contemporary didone, carries the titles and the names */
h2{font:300 clamp(30px,4.7vw,76px)/1.02 var(--display);font-stretch:118%;letter-spacing:-.035em}
h2 em{font-size:1.22em;font-stretch:100%;letter-spacing:-.02em}
.scene .hero-text h1{font:300 clamp(48px,9.2vw,160px)/.88 var(--display);font-stretch:125%;letter-spacing:-.045em}
.scene .hero-text h1 em{font:italic 400 1.2em/.8 var(--serif);font-stretch:100%;letter-spacing:-.03em}
.pitch{font:300 clamp(32px,4.5vw,70px)/1.03 var(--display);font-stretch:100%;letter-spacing:-.035em;max-width:17ch}
.sol h3{font:400 clamp(20px,2.3vw,32px)/1 var(--display);font-stretch:125%;letter-spacing:-.01em;text-transform:none}
.index strong{font:400 clamp(24px,2.9vw,42px)/1 var(--display);font-stretch:100%;letter-spacing:-.03em;transition:font-stretch .5s cubic-bezier(.2,.8,.2,1),font-weight .5s}
.index a:hover strong,.index a:focus-visible strong{font-stretch:125%;font-weight:300}
.tile h3{font:300 clamp(28px,3.8vw,56px)/1 var(--display);font-stretch:100%;letter-spacing:-.035em;transition:font-stretch .6s cubic-bezier(.2,.8,.2,1)}
.tile:hover h3{font-stretch:125%}
.crew strong{font:400 clamp(20px,2.3vw,32px)/1.05 var(--display);font-stretch:110%;letter-spacing:-.03em;transition:font-stretch .5s cubic-bezier(.2,.8,.2,1),color .2s}
.crew li:hover strong{font:400 clamp(20px,2.3vw,32px)/1.05 var(--display);font-stretch:125%;letter-spacing:-.03em;color:var(--lilac)}
.marquee{animation:none}
.marquee div{font:200 clamp(40px,7.4vw,116px)/1 var(--display);font-stretch:125%;letter-spacing:-.03em;color:var(--paper);-webkit-text-stroke:0;animation:none;will-change:transform}
tbody td:last-child{font:400 clamp(18px,1.9vw,26px)/1.2 var(--display);font-stretch:115%;letter-spacing:-.02em}
.steps h3{font:400 clamp(18px,1.7vw,25px)/1.1 var(--display);font-stretch:118%;letter-spacing:-.02em}
.core{font-size:clamp(20px,2.4vw,32px)}

/* hero letters and depth */
.scene h1 .wo{display:inline-block;white-space:nowrap}
.scene h1 .ch{display:inline-block;opacity:0;transform:translateY(.6em) rotate(8deg);filter:blur(10px);transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1),filter .7s}
.scene.open h1 .ch{opacity:1;transform:none;filter:none}
.scene .hero-text{will-change:transform}
.scene.open .hero-img{scale:calc(1 + var(--z,0)*.16)}

/* giant words */
.band{overflow:hidden;white-space:nowrap;background:var(--white);padding:0 0 clamp(30px,5vw,70px)}
.band div{display:inline-block;font:200 clamp(70px,15vw,240px)/1 var(--display);font-stretch:125%;letter-spacing:-.05em;color:var(--ink);will-change:transform}
.band i{font-style:normal;font-size:.28em;vertical-align:middle;color:var(--lilac);margin:0 .5em}

/* cursor */
.cursor{display:none}
html.cur,html.cur a,html.cur button,html.cur summary,html.cur label,html.cur select{cursor:none}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:400;opacity:0;will-change:transform}
html.cur .cur-dot,html.cur .cur-ring{opacity:1}
.cur-dot::before{content:"";position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff;transition:transform .2s}
.cur-dot{mix-blend-mode:difference}
.cur-dot.hide::before{transform:scale(0)}
.cur-ring::before{content:"";position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 1.5px #fff;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .25s}
.cur-ring{mix-blend-mode:difference}
.cur-ring.on::before{transform:scale(1.5);background:rgba(255,255,255,.14)}
.cur-ring.text{mix-blend-mode:normal}
.cur-ring.text::before{transform:scale(1.95);background:var(--yellow);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cur-ring.down::before{transform:scale(.85)}
.cur-ring span{position:absolute;left:-43px;top:-8px;width:86px;text-align:center;font:500 11px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .2s}
.cur-ring.text span{opacity:1}

/* light on the panels, cheap depth */
.sol::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,-30%),rgba(255,255,255,.2),rgba(255,255,255,0) 62%);opacity:0;transition:opacity .5s}
.sol:hover::before{opacity:1}
.sol::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:#000;opacity:var(--dim,0)}
.sol header,.sol-body{position:relative}
.tile{transition:transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
.tile:hover{transform:none}

@media (max-width:640px){
  .scene .hero-text h1{font-size:clamp(40px,12.6vw,64px)}
  .pitch{font-size:clamp(28px,8.4vw,40px)}
}

/* fixes after a full read-through of the page */
.band{padding:clamp(6px,1vw,14px) 0 clamp(34px,5vw,72px)}
.band div{font-size:clamp(44px,6.4vw,108px);font-weight:300;letter-spacing:-.04em;transform:none!important;animation:bandslide 46s linear infinite}
.band i{font-size:.34em;margin:0 .7em}
@keyframes bandslide{to{transform:translate3d(-50%,0,0)}}
.band div{animation-name:bandmove}
@keyframes bandmove{from{translate:0 0}to{translate:-50% 0}}
.sol{will-change:auto}
.pitch{font-size:clamp(30px,4vw,62px)}
.sol-body{padding-bottom:clamp(56px,6vw,90px)}
.system h2,.contact h2{font-size:clamp(28px,3.5vw,56px)}
.marquee{padding-bottom:calc(18px + 30px)}
tbody td:last-child{font:500 clamp(17px,1.7vw,23px)/1.2 var(--head);font-stretch:100%;letter-spacing:-.04em}
.crew li{display:block;padding:16px 0}
.crew span{display:block;margin-top:7px}
@media (max-width:640px){
  .band div{font-size:clamp(38px,11vw,56px)}
  .sol h3{font-size:19px}
}
@media (max-width:700px){
  h2{line-height:1.1}
  h2 em{line-height:1}
  .play{left:auto;right:12px;bottom:12px;height:42px;min-width:42px;padding:0 10px;opacity:.92}
  .table-scroll{overflow:visible}
  table{min-width:0;display:block}
  caption{display:block}
  thead{display:none}
  tbody,tbody tr,tbody th,tbody td{display:block}
  tbody tr{border-top:1.5px solid var(--ink);padding:18px 0}
  tbody th,tbody td{border:0;padding:0}
  tbody td{margin-top:8px}
  tbody td:nth-child(3){font:400 12px/1.3 var(--mono);color:var(--grey)}
  tbody td:last-child{margin-top:10px;font-size:20px}
}

/* refinement pass: a deeper lapis blue, no blend modes anywhere, nothing that flickers */
.nav{opacity:0}
body.nav-on .nav{opacity:1}
.progress{mix-blend-mode:normal;background:var(--ink);height:2px;box-shadow:0 1px 0 rgba(244,240,230,.6)}
.fireflies{mix-blend-mode:normal}
.scene.open .iris{transform:scale(1.05)}
.sol{transform:scale(1);backface-visibility:hidden}

h2 .wd{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .08em .16em;margin:-.06em -.08em -.16em}
h2 .wd span{display:inline-block;transform:translateY(112%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
h2.in .wd span{transform:none}

.cur-dot,.cur-ring,.cur-ring.text{mix-blend-mode:normal}
.cur-dot::before{left:-4px;top:-4px;width:8px;height:8px;background:var(--ink);box-shadow:0 0 0 1.5px var(--paper)}
.cur-ring::before{box-shadow:0 0 0 1.5px var(--ink),0 0 0 2.5px rgba(244,240,230,.75);background:transparent}
.cur-ring.on::before{transform:scale(1.45);background:rgba(244,240,230,.22)}
.cur-ring.text::before{transform:scale(1.95);background:var(--yellow);box-shadow:0 0 0 1.5px var(--ink),0 10px 30px rgba(0,0,0,.22)}

.rail{mix-blend-mode:normal;right:14px}
.rail a::before{background:var(--ink);box-shadow:0 0 0 1.5px var(--paper)}
.rail span{right:32px;top:1px;padding:0 9px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:11px;line-height:20px;box-shadow:0 0 0 1px rgba(17,17,16,.2)}
.band i{color:var(--coral)}
.ventures h2 .wd,.ventures h2 .wd span{color:inherit;font-weight:inherit}
.ventures h2>span:not(.wd){color:var(--grey);font-weight:300}