:root{--iv:#f2eee6;--iv2:#e9e2d5;--ink:#22201b;--mut:#6e675b;--gold:#a8834f;--blue:#7fb2e5;--navy:#0f1a33;
  --serif:"Cormorant Garamond",Garamond,serif;--sans:"Archivo",Helvetica,Arial,sans-serif;--wrap:min(1320px,calc(100vw - 48px))}
*{box-sizing:border-box}html{background:var(--iv)}
body{margin:0;background:var(--iv);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}img,video{display:block}
em{font-family:var(--serif);font-style:italic;font-weight:400}
.wrap{width:var(--wrap);margin:0 auto}
.k{margin:0 0 22px;font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
h2{margin:0;font:300 clamp(46px,6vw,96px)/.95 var(--serif);letter-spacing:-.02em}
h2 em{color:var(--gold)}
.sec-h{margin-bottom:56px}.sec-h.row{display:flex;justify-content:space-between;align-items:end;gap:24px}
.lead{max-width:520px;margin:24px 0 0;font-size:17px;line-height:1.6;color:var(--mut)}
.btn{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 26px;border-radius:999px;background:var(--ink);color:var(--iv);font:500 15px var(--sans);transition:gap .4s,background .4s}
.btn svg{width:16px;height:16px}.btn:hover{gap:18px}.btn.light{background:var(--iv);color:var(--ink)}
.lnk{display:inline-flex;align-items:center;gap:10px;font:500 14px var(--sans);border-bottom:1px solid currentColor;padding-bottom:5px}.lnk svg{width:15px;height:15px}.lnk.light{color:var(--iv)}

/* preloader */
.pre{position:fixed;inset:0;z-index:100;background:var(--iv);display:grid;place-items:center;transition:clip-path 1.1s cubic-bezier(.76,0,.24,1)}
.pre.done{clip-path:inset(0 0 100% 0)}
.pre-mark{width:64px;color:var(--ink)}.pre-mark svg{width:100%;height:auto}
.pre-mark path{stroke-dasharray:800;stroke-dashoffset:800;animation:draw 1.4s cubic-bezier(.6,0,.2,1) forwards}
.pre-mark path:nth-child(2){animation-delay:.2s}.pre-mark path:nth-child(3){animation-delay:.35s}
@keyframes draw{to{stroke-dashoffset:0}}
.pre-n{position:absolute;right:28px;bottom:22px;font:300 clamp(60px,10vw,140px)/1 var(--serif);font-variant-numeric:tabular-nums}

/* floating pill nav */
.pill{position:fixed;top:18px;left:50%;z-index:50;transform:translateX(-50%);display:flex;align-items:center;gap:28px;padding:8px 8px 8px 20px;border-radius:999px;background:rgba(242,238,230,.62);backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(34,32,27,.08);box-shadow:0 10px 40px -20px rgba(0,0,0,.3);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pill.hide{transform:translate(-50%,-140%)}
.pl-logo{display:flex;align-items:center;gap:9px;font:500 13px var(--sans);letter-spacing:.24em}.pl-mark{width:20px}.pl-mark svg{width:100%;height:auto}
.pill nav{display:flex;gap:22px;font:400 13.5px var(--sans);color:var(--mut)}.pill nav a:hover{color:var(--ink)}
.pl-cta{height:38px;display:grid;place-items:center;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--iv);font:500 13px var(--sans)}
@media (max-width:760px){.pill nav{display:none}.pill{gap:14px;width:calc(100vw - 32px);justify-content:space-between}}

/* hero: serif wordmark over an arched office film that zooms open on scroll */
.hero{position:relative;height:320vh}
.h-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--iv);isolation:isolate}
.h-arch{--p:0;position:absolute;left:50%;top:50%;width:calc(26vw + var(--p)*74vw);height:calc(70vh + var(--p)*30vh);min-width:260px;transform:translate(-50%,-50%);
  border-radius:calc((1 - var(--p))*50vw) calc((1 - var(--p))*50vw) calc((1 - var(--p))*6px) calc((1 - var(--p))*6px);overflow:hidden}
.h-arch video{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.15 - var(--p)*.15))}
.h-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(20,14,6,.45));opacity:var(--p)}
.h-word{position:absolute;left:0;right:0;top:50%;margin:0;transform:translateY(-58%);display:flex;justify-content:center;gap:calc(1vw + var(--q,0)*14vw);
  font:300 clamp(120px,24vw,420px)/.8 var(--serif);letter-spacing:.04em;color:var(--iv);mix-blend-mode:difference;pointer-events:none;opacity:calc(1 - var(--q,0)*1.4)}
.h-word span{display:inline-block;transform:translateY(calc(var(--q,0)*(var(--d,0)*1vh)))}
.h-sub{position:absolute;left:0;right:0;top:calc(50% + 15vw);margin:0;text-align:center;font:500 clamp(12px,1.2vw,17px)/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--iv);mix-blend-mode:difference;opacity:calc(1 - var(--q,0)*2)}
.h-sub i{font-style:normal;opacity:.5}
.h-cap{position:absolute;left:40px;bottom:36px;margin:0;font:300 clamp(28px,3vw,48px)/1 var(--serif);color:#fff;opacity:calc(var(--p)*1.4 - .4);transform:translateY(calc((1 - var(--p))*30px))}
.h-cap em{color:#ecd3a8}
@media (max-width:760px){.h-arch{width:calc(62vw + var(--p)*38vw);height:calc(58vh + var(--p)*42vh)}.h-sub{top:calc(50% + 24vw)}}

/* manifesto: words light up as you read */
.intro{padding:160px 0 140px}
.mani{max-width:1180px;font:300 clamp(36px,4.8vw,76px)/1.06 var(--serif);letter-spacing:-.015em}
.mani .w{opacity:.14;transition:opacity .35s}.mani .w.on{opacity:1}

/* rooms */
.rooms{padding:40px 0 160px}
.rm-grid{display:grid;grid-template-columns:1.1fr .9fr 1fr;grid-template-rows:auto auto;gap:20px}
.rm{position:relative;margin:0;overflow:hidden;border-radius:6px;background:var(--iv2)}
.rm img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}.rm:hover img{transform:scale(1.05)}
.r1{grid-row:span 2;aspect-ratio:3/4.4;border-radius:999px 999px 6px 6px}.r2{aspect-ratio:4/3.6}.r3{aspect-ratio:4/3.6}.r4{grid-column:2/4;aspect-ratio:16/7.6}
.rm figcaption{position:absolute;left:16px;bottom:16px;display:flex;gap:10px;align-items:center;padding:9px 14px;border-radius:999px;background:rgba(242,238,230,.85);backdrop-filter:blur(10px);font:500 12px var(--sans)}
.rm figcaption span{color:var(--gold);letter-spacing:.1em}
@media (max-width:860px){.rm-grid{grid-template-columns:1fr 1fr}.r1{grid-row:auto;grid-column:1/-1;aspect-ratio:4/4.6}.r4{grid-column:1/-1}}

/* Ali */
.ali{padding:140px 0;background:var(--navy);color:var(--iv)}
.ali-g{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}
.ali-ph{margin:0;aspect-ratio:4/5;border-radius:999px 999px 8px 8px;overflow:hidden;outline:1px solid rgba(236,211,168,.45);outline-offset:14px}
.ali-ph img{width:100%;height:100%;object-fit:cover}
.ali h2{font-size:clamp(70px,9vw,150px)}.ali h2 em{color:#ecd3a8}
.ali-t>p:not(.k){max-width:480px;margin:28px 0 36px;font-size:18px;line-height:1.6;color:rgba(242,238,230,.7)}
.ali dl{display:flex;gap:42px;margin:0 0 40px;padding-top:26px;border-top:1px solid rgba(242,238,230,.15)}
.ali dt{font:300 44px/1 var(--serif)}.ali dd{margin:8px 0 0;font-size:13px;color:rgba(242,238,230,.55)}
.ali .btn{background:var(--iv);color:var(--ink)}.ali .k{color:#ecd3a8}
@media (max-width:860px){.ali-g{grid-template-columns:1fr;gap:50px}.ali-ph{max-width:420px}}

/* car */
.car{position:relative;height:120vh;overflow:hidden;background:#cfd9e2}
.car-in{position:absolute;inset:-10% 0;will-change:transform}.car-in img{width:100%;height:100%;object-fit:cover}
.car-t{position:absolute;left:0;right:0;top:9vh;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}.car-t .k{color:#fff}.car-t h2 em{color:#fff}

/* homes: endless rail, slows on hover */
.homes{padding:150px 0}
.rail{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;width:max-content;animation:rail 70s linear infinite}
.lc{flex:none;width:clamp(280px,28vw,420px);margin-right:22px}
.lc-ph{aspect-ratio:4/3.1;border-radius:6px;overflow:hidden;background:var(--iv2)}.lc-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}.lc:hover img{transform:scale(1.06)}
.lc-m{display:grid;gap:4px;padding-top:14px}.lc-m span{font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lc-m b{font:400 34px/1 var(--serif)}.lc-m i{font-style:normal;font-size:14px;color:var(--mut)}
@keyframes rail{to{transform:translateX(-50%)}}

/* network: fanned cards */
.network{padding:150px 0 180px;background:var(--iv2)}
.fan{position:relative;height:440px;display:flex;justify-content:center;align-items:flex-end}
.nc{--k:0;position:absolute;bottom:0;left:50%;width:250px;height:380px;padding:24px;border-radius:14px;background:#fbf9f4;box-shadow:0 30px 60px -30px rgba(40,30,15,.45),0 0 0 1px rgba(60,40,20,.06);
  transform-origin:50% 140%;transform:translateX(-50%) rotate(calc((var(--k) - 2)*7deg));transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .5s;display:flex;flex-direction:column}
.fan.open .nc{transform:translateX(calc(-50% + (var(--k) - 2)*262px)) rotate(0deg)}
.nc:hover{z-index:5;box-shadow:0 40px 80px -30px rgba(40,30,15,.6)}
.nc-tag{font:500 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.nc h4{margin:16px 0 0;font:400 34px/1 var(--serif)}
.nc p{margin:auto 0 0;display:grid;gap:4px;font-size:13px;color:var(--mut)}.nc p b{font:500 15px var(--sans);color:var(--ink)}
.nc-tel{margin-top:14px;padding-top:14px;border-top:1px solid rgba(60,40,20,.12);font:500 14px var(--sans)}
.nc-mono{position:absolute;right:24px;top:22px;font:300 40px/1 var(--serif);color:rgba(168,131,79,.5)}
@media (max-width:1100px){.fan{height:auto;display:grid;gap:16px}.nc,.fan.open .nc{position:relative;left:auto;transform:none;width:100%;height:auto;min-height:260px}}

/* gravity tag pile */
.pile{padding:150px 0 0}
.pile-box{position:relative;height:460px;overflow:hidden;border-bottom:1px solid rgba(34,32,27,.12)}
.tg{position:absolute;left:0;top:0;padding:16px 26px;border-radius:999px;background:var(--ink);color:var(--iv);font:400 clamp(16px,1.6vw,22px)/1 var(--sans);white-space:nowrap;user-select:none;cursor:grab;will-change:transform}
.tg:nth-child(3n){background:var(--gold)}.tg:nth-child(4n){background:#fbf9f4;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(34,32,27,.2)}
.pile-box.static{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-end;padding:20px}.pile-box.static .tg{position:static}

/* end */
.end{background:var(--ink);color:var(--iv);padding:160px 0 40px}
.end h2{font-size:clamp(60px,9vw,160px)}.end h2 em{color:#ecd3a8}
.end-a{display:flex;flex-wrap:wrap;align-items:center;gap:32px;margin:50px 0 140px}
.end footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;border-top:1px solid rgba(242,238,230,.15);font-size:12.5px;color:rgba(242,238,230,.5)}
@media (prefers-reduced-motion:reduce){.track{animation:none}.mani .w{opacity:1}}
.nc-tag{padding-right:48px;line-height:1.5}