:root{--bg:#f3f3ed;--fg:#2a2a28;--mute:#7a7a7a;--line:#d3d3d3;--soft:rgba(0,0,0,.06);--ph:#e4e4dc;box-sizing:border-box}
:root[data-theme=dark]{--bg:#1a1a18;--fg:#f3f3ed;--mute:#8a8a85;--line:rgba(255,255,255,.14);--soft:rgba(255,255,255,.08);--ph:#262624;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.4 'Geist',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;overflow-x:hidden}
body.lk{overflow:hidden}a{color:inherit;text-decoration:none}img{display:block}button{font:inherit;color:inherit;cursor:pointer}
.tr{text-box:trim-both cap alphabetic}
.a{position:absolute}.W{position:relative;max-width:1440px;height:100%;margin:0 auto}
.cv{position:relative;height:7061px;overflow:clip}.cv>.W{height:7061px}
.anc{position:absolute;width:1px;height:1px;left:0}
.hd{position:fixed;top:0;left:0;right:0;height:43.8px;z-index:30;background:var(--bg);border-bottom:1px solid var(--soft);transform:translateY(-101%);transition:transform .9s cubic-bezier(.2,.7,.2,1),background .3s}
body.go .hd{transform:none}
.logo{font-weight:600;font-size:16px;line-height:18.3px;letter-spacing:-.48px;text-transform:uppercase}.logo i{font-style:normal;font-size:22px;letter-spacing:-.66px}
.nv{text-transform:uppercase;white-space:nowrap}.nv::after,.cl::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.7,.2,1)}.nv:hover::after,.cl:hover::after{transform:scaleX(1);transform-origin:left}
#th{width:17.9px;height:17.9px;background:var(--fg);border:0;padding:0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}#th:hover{transform:rotate(90deg) scale(1.25)}
#sp{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--fg);transform:scaleX(0);transform-origin:left;z-index:40}
.h1{font-weight:500;font-size:64px;line-height:.96;letter-spacing:-2px;margin:0}.h2{font-weight:500;font-size:48px;line-height:.9;letter-spacing:-2.98px;margin:0}
.p14{font-size:14px;line-height:1.49;margin:0}.p16{font-size:16px;line-height:1.4;margin:0}.mu{color:var(--mute)}.bl{font-size:24px;line-height:1.3;letter-spacing:-.48px;margin:0}.pp p{margin:0 0 22.4px}
.lb{display:flex;gap:17.5px;align-items:flex-start;text-transform:uppercase;font-size:16px}.lb svg{margin-top:.4px;flex:none;opacity:0;transform:translateY(-10px);transition:all .8s .2s cubic-bezier(.2,.7,.2,1)}.lb.on svg{opacity:1;transform:none;animation:bob 2.6s 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
.dv{margin:0;border:0;left:20px;right:20px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}.dv.s{background:var(--soft)}.dv.on{transform:none}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}.wd>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*70ms)}.on .wd>span{transform:none}
[data-r]{opacity:0;transform:translateY(26px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}[data-r].on{opacity:1;transform:none}
.rv::after{content:"";position:absolute;inset:-1px;background:var(--bg);z-index:2;transform-origin:top;transition:transform 1.3s cubic-bezier(.76,0,.24,1);transition-delay:var(--d,0s);pointer-events:none}.rv.on::after{transform:scaleY(0)}
.im{overflow:hidden;background:var(--ph)}.im img{width:100%;height:116%;object-fit:cover;transform:translate3d(0,var(--py,0),0) scale(var(--s,1.25));transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}.im.on img{--s:1}.pj .im.on:hover img{--s:1.045}
.ph0{height:185px}.ph0 img{height:100%}
.pj{display:contents;cursor:pointer}.t24{font-weight:600;font-size:24px;line-height:1;letter-spacing:-.96px}.pt{font-size:14px;line-height:1.5;letter-spacing:-.28px;margin:0}
.btn{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:9px;width:147px;height:35px;border:1px solid var(--fg);border-radius:39px;background:transparent;color:var(--fg);font:500 16px 'Geist',sans-serif;letter-spacing:-.32px;padding:0;transition:color .4s,transform .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--fg);transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.7,.2,1);z-index:-1}.btn:hover{color:var(--bg)}.btn:hover::before{transform:none}.btn svg{width:11.8px;height:11.8px;transition:transform .4s}.btn:hover svg{transform:translate(2px,-2px)}
.fi{display:block}.fi input,.fi textarea{display:block;width:100%;height:48px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);font:400 16px/24px 'Geist',sans-serif;letter-spacing:-.32px;padding:6px 0 0;outline:0;border-radius:0;resize:none;transition:border-color .3s}.fi textarea{height:108px}.fi input::placeholder,.fi textarea::placeholder{color:var(--mute)}.fi input:focus,.fi textarea:focus{border-bottom-color:var(--fg)}
.fbg{position:absolute;left:0;right:0;height:325.82px;background:#1a1a18}:root[data-theme=dark] .fbg{border-top:1px solid rgba(255,255,255,.1)}
.fl{color:rgba(255,255,255,.5);font-weight:500;font-size:16px;line-height:21px}.fv{color:#fff;font-size:20px;line-height:1;letter-spacing:-.4px}.fv a{position:relative}.fv a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .4s}.fv a:hover::after{transform:scaleX(1);transform-origin:left}
.fd{margin:0;border:0;left:20px;right:20px;height:1px;background:rgba(255,255,255,.1)}
.so{display:block;height:42px;transition:transform .4s cubic-bezier(.2,.7,.2,1)}.so::after{content:"";position:absolute;inset:3px;border:1px solid rgba(255,255,255,.45);border-radius:50%;transform:scale(.5);opacity:0;transition:all .4s cubic-bezier(.2,.7,.2,1)}.so:hover{transform:translateY(-3px)}.so:hover::after{transform:none;opacity:1}
.cur{position:fixed;left:0;top:0;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:14px;text-transform:uppercase;letter-spacing:.02em;pointer-events:none;transform:translate3d(var(--x,0),var(--y,0),0) scale(0);transition:transform .35s cubic-bezier(.2,.7,.2,1);z-index:70}.cur.on{transform:translate3d(var(--x,0),var(--y,0),0) scale(1)}
#ld{position:fixed;inset:0;z-index:100;background:var(--bg);color:var(--fg);display:flex;align-items:center;justify-content:center;font:500 128px/1 'Geist',sans-serif;letter-spacing:-.04em;transition:transform 1.1s cubic-bezier(.76,0,.24,1)}#ld b{font-weight:500;display:inline-block;min-width:2.1ch;text-align:right;font-variant-numeric:tabular-nums}#ld.out{transform:translateY(-100%)}#ld.out span{transform:translateY(-30%);opacity:0;transition:all .9s}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}::view-transition-new(root){z-index:9999}
.pg{position:fixed;inset:0;z-index:50;background:var(--bg);overflow:auto;transform:translateY(100%);visibility:hidden;transition:transform .8s cubic-bezier(.76,0,.24,1),visibility 0s .8s}.pg.on{transform:none;visibility:visible;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.ph1{position:sticky;top:0;z-index:3;height:43.8px;background:var(--bg);border-bottom:1px solid var(--soft)}.ph1 .W{height:100%}.cl{position:absolute;right:20px;top:18.7px;text-transform:uppercase}
.pb{max-width:1440px;margin:0 auto;padding-bottom:68px}.pb h1{font-weight:500;font-size:64px;line-height:.96;letter-spacing:-2px;margin:37.2px 20px 0;white-space:pre-line}.pb h3{font-weight:600;font-size:24px;line-height:1;letter-spacing:-.96px;margin:0 0 24px}.pb p{margin:0 0 22.4px;font-size:16px;line-height:1.4}
.ov{position:relative;height:313px;margin-top:90px}.ov::before{content:"";position:absolute;top:0;left:20px;right:20px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}.ov.on::before{transform:none}.ov>div{position:absolute;top:21px}
.pimg{display:block;margin:0 20px;width:calc(100% - 40px);aspect-ratio:1399/800;object-fit:cover}
.cn{position:relative;height:124px;margin:90px 0}.cn>div{position:absolute;top:0}
.g1,.g2,.g3,.g3t{display:grid;margin:0 20px 20px;column-gap:11px}.g1{grid-template-columns:1fr}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:459fr 928fr}.g3t{grid-template-columns:1fr 1fr 1fr;column-gap:12px}
.ph{background:var(--ph);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:12px}.ph.has img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g1 .ph{aspect-ratio:1399/800}.g2 .ph{aspect-ratio:694/634}.g3 .r-n{aspect-ratio:459/634}.g3 .r-w{aspect-ratio:928/634}.g3t .r-t{aspect-ratio:459/419}
.nxt{font-weight:500;font-size:48px;line-height:.9;letter-spacing:-2.98px;margin:100px 20px 60px}.nx{border-top:1px solid var(--line);padding-top:20px;margin-top:0;margin-bottom:0}.nx a{display:block;overflow:hidden;cursor:pointer}.nx img{width:100%;aspect-ratio:459/546.7;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}.nx a:hover img{transform:scale(1.05)}
@media (hover:none){.cur{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}[data-r]{opacity:1;transform:none}.rv::after{display:none}.wd>span{transform:none}.dv,.ov::before{transform:none}.im img{--s:1}}
@media (max-width:1099px){
.cv,.cv>.W{height:auto}.cv{padding-top:44px;padding-bottom:0}.a{position:static!important;width:auto!important;margin:0 20px}.anc{display:none}.hd .a{position:absolute!important;margin:0}.hd .nv{display:none}.dfoot{display:none}
#ld{font-size:96px}.h1{font-size:44px;letter-spacing:-1.4px;margin-top:90px!important}.h2{font-size:36px;letter-spacing:-2px;margin-top:70px!important}
.ph0{width:120px!important;height:151px;margin-top:40px!important}.p14{margin-top:20px!important;max-width:300px}.dv{display:none}
.lb{margin-top:80px!important}.bl{margin-top:24px!important}.p16{margin-top:24px!important}.mu{margin-top:8px!important}.pp{margin-top:16px!important}.btn{margin-top:32px}
.pj{display:grid;grid-template-columns:1fr 1fr;margin:20px 20px 0;padding-top:20px;border-top:1px solid var(--line);gap:12px}.pj .a{margin:0!important}.pj .im{grid-column:1/-1;order:-1;aspect-ratio:695/737;width:100%!important}.pj .t24,.pj .pt{margin-top:0}
.fi{margin-top:18px!important}.fbg{display:none}.cv>.W>*:last-child{}
.mfoot{display:block;background:#1a1a18;margin-top:80px;padding:40px 20px 60px}.mfoot .a{margin:0 0 14px!important}.so{display:inline-block!important;margin-right:12px!important}.fd{display:none}
.pb h1{font-size:40px;letter-spacing:-1.4px}.ov,.cn{height:auto;margin-top:40px}.ov{padding:0 20px}.ov::before{left:20px}.ov>div,.cn>div{position:static;margin-bottom:24px}.cn{padding:0 20px;margin-bottom:48px}.pimg{margin-top:0}.g2,.g3{grid-template-columns:1fr}.g3 .r-n,.g3 .r-w{aspect-ratio:694/634}.g3t{grid-template-columns:1fr}.nxt{font-size:36px}}

@media (max-width:1099px){.ph1 .a{position:absolute!important;margin:0!important;left:20px!important;top:12.7px!important}.ov>div,.cn>div{width:auto!important;left:auto!important}.pb p,.pb h3{overflow-wrap:break-word}.cv .a{inset:auto!important}.hd .a{inset:auto!important}.hd .logo{left:20px!important;top:12.7px!important}.hd #th{right:20px!important;top:12px!important}.a.im,.pj .a.im{position:relative!important}.h1,.h2{width:auto!important}.ph0{width:120px!important;aspect-ratio:147/185}.pj .im{aspect-ratio:695/737!important;height:auto!important}.im img{height:116%}.fi{width:auto!important}.hd #th{width:17.9px!important}.hd .logo{white-space:nowrap}.ph0{overflow:hidden}.lb{white-space:nowrap}}

/* scaling of the 1440 design between 1100 and 1440 */
@media (min-width:1100px){.cv,.hd,.pb,.ph1{zoom:var(--z,1)}.mfoot{display:none}}
.mfoot{display:none}
@media (max-width:1099px){.mfoot{display:block}}
.cv{min-height:100px}
.lb>span{opacity:0;transform:translateY(8px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}.lb.on>span{opacity:1;transform:none}
#ld span{display:inline-block}
@media (prefers-reduced-motion:reduce){#ld{transition:none}}
/* pinned project switcher (desktop) */
.pin{position:absolute;left:0;right:0}
.pins{position:sticky;top:43.8px;height:818px}
.sd{position:absolute;top:0;left:20px;right:20px;height:1px;margin:0;border:0;background:var(--line)}
.sl{position:absolute;inset:0;display:block;visibility:hidden;pointer-events:none;cursor:pointer;transition:visibility 0s 1.2s}
.sl.act{visibility:visible;pointer-events:auto;transition-delay:0s;z-index:2}
.sl.past{z-index:1}
.sim{position:absolute;top:20.75px;left:calc(50% + 4.7px);right:20px;aspect-ratio:695.3/737.26;overflow:hidden;background:var(--ph);clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1)}
.sim img{width:100%;height:100%;object-fit:cover;transform:scale(1.25);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.sl.act .sim{clip-path:inset(0)}.sl.act .sim img{transform:scale(1)}.sl.act:hover .sim img{transform:scale(1.045)}
.sl.past .sim{clip-path:inset(0 0 100% 0)}
.st{opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s}
.sl.act .st{opacity:1;transform:none;transition:opacity .9s calc(.45s + var(--q)*.1s),transform .9s cubic-bezier(.2,.7,.2,1) calc(.45s + var(--q)*.1s)}
.sl.past .st{transform:translateY(-24px)}
/* gallery: each photo appears on its own */
.ph.has.rv img{transform:scale(1.18);transition:transform 1.8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}.ph.has.rv.on img{transform:none}
@media (prefers-reduced-motion:reduce){.sl,.sim,.st{transition:none!important}}

/* stacked cards: each next project slides up over the previous one, driven by scroll */
.sl{visibility:visible;pointer-events:none;transition:none!important;background:var(--bg);will-change:transform}
.sl .sd{position:absolute;top:0;left:20px;right:20px}
.sim,.sl.act .sim,.sl.past .sim{clip-path:none;transition:none}
.sim img,.sl.act .sim img{transform:none;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.sl:hover .sim img{transform:scale(1.045)}
.st,.sl.act .st,.sl.past .st{opacity:1;transform:none;transition:none}
.sl>.sim,.sl>.st{translate:0 var(--sh,0%)}

.sl{background:none;will-change:clip-path}

/* final: photo fades, text rises like the other texts */
.sl{clip-path:none!important}
.sim{opacity:0;transition:none!important}
.sl:first-child .sim{opacity:1}
.st{opacity:0;transform:translateY(26px);transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1)!important}
.sl.act .st{opacity:1;transform:none;transition:opacity .9s calc(var(--q)*.1s),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--q)*.1s)!important}

/* gallery reveal: four columns uncover the photo one after another (left to right), like the reference */
.ph.has.sv i.s{position:absolute;top:-1px;bottom:-1px;width:calc(25% + 1px);left:calc(var(--k)*25%);background:var(--bg);z-index:2;transform-origin:top;transition:transform 1.15s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--d,0s) + var(--k)*.13s);pointer-events:none}
.ph.has.sv.on i.s{transform:scaleY(0)}
.ph.has.sv img{transform:scale(1.14);transition:transform 1.9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.ph.has.sv.on img{transform:none}
@media (prefers-reduced-motion:reduce){.ph.has.sv i.s{display:none}}

.ph.has i.s{display:none!important}
.sim{opacity:1!important;transition:none!important}

.sim img{transition:none!important}
.st{transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)!important}
.sl.act .st{transition:opacity 1.3s calc(var(--q)*.14s),transform 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--q)*.14s)!important}

.sim img{transition:none!important;will-change:transform}
.st{transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)!important}
.sl.act .st{transition:opacity 1.3s calc(var(--q)*.14s),transform 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--q)*.14s)!important}

.sl.act .st{transition:opacity 1.6s calc(var(--q)*.16s),transform 1.6s cubic-bezier(.2,.7,.2,1) calc(var(--q)*.16s)!important}

/* Edumundo: five separate tiles in the Figma grid */
.g5{position:relative;margin:0 20px 20px;aspect-ratio:1999/1141}
.t5{position:absolute}
.t5 img{width:100%;height:100%;display:block}
.t5.rv img{transform:scale(1.12);transition:transform 1.8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}.t5.rv.on img{transform:none}

.g5{container-type:inline-size}
.t5{overflow:hidden;border-radius:2cqw}
.t5.rv::after{border-radius:2cqw;inset:0}

.t5 img{transform:none!important;transition:none!important}

.pin{transition:opacity .35s}
.jump .pin{opacity:0}

/* no browser autofill colour behind typed text */
.fi input:-webkit-autofill,.fi input:-webkit-autofill:hover,.fi input:-webkit-autofill:focus,.fi textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--bg) inset!important;box-shadow:0 0 0 1000px var(--bg) inset!important;-webkit-text-fill-color:var(--fg)!important;caret-color:var(--fg);transition:background-color 99999s ease-in-out 0s}
.fi input,.fi textarea{background-color:transparent!important}
.fi input:autofill,.fi textarea:autofill{box-shadow:0 0 0 1000px var(--bg) inset!important;-webkit-text-fill-color:var(--fg)!important}
