:root{--ink:#11110f;--paper:#ecebe5;--acid:#d7ff4f;--line:rgba(17,17,15,.2);--pad:clamp(20px,4vw,64px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Manrope",sans-serif;font-weight:300}a{color:inherit;text-decoration:none}img{display:block;width:100%}em{font-family:Georgia,serif;font-weight:400}.loader{position:fixed;inset:0;background:#0b0b0a;color:#fff;z-index:1000;display:grid;place-items:center;transition:transform .9s cubic-bezier(.8,0,.2,1);font-size:clamp(4rem,15vw,12rem)}.loader div{position:absolute;bottom:0;left:0;height:3px;background:var(--acid);animation:load 1.3s both}.loader.done{transform:translateY(-100%)}@keyframes load{from{width:0}to{width:100%}}
.site-header{position:fixed;z-index:100;top:0;left:0;width:100%;padding:14px var(--pad);display:flex;justify-content:space-between;align-items:center;color:#fff;mix-blend-mode:difference}.brand,.footer-brand{font-size:1.7rem;font-weight:500;letter-spacing:-.08em}.brand span,.footer-brand span{font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;margin-left:7px}.brand-mark{display:block;width:56px;height:56px;line-height:0}.header-mark{display:block;width:100%;height:100%;overflow:visible}.header-mark text{font-family:"DM Sans",Arial,sans-serif;font-size:250px;font-weight:500;fill:currentColor}.site-header nav{display:flex;gap:30px;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em}.site-header nav a{position:relative}.site-header nav a:after{content:"";height:1px;background:currentColor;position:absolute;left:0;right:100%;bottom:-5px;transition:.3s}.site-header nav a:hover:after{right:0}.menu{display:none;background:none;border:0}.hero{height:100svh;min-height:680px;position:relative;color:#fff;overflow:hidden}.hero>img{height:100%;object-fit:cover;transform:scale(1.04);animation:hero 10s ease-out forwards}@keyframes hero{to{transform:scale(1)}}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.48),transparent 60%),linear-gradient(0deg,rgba(0,0,0,.42),transparent 45%)}.eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em}.hero>.eyebrow{position:absolute;left:var(--pad);top:18%}.hero-copy{position:absolute;left:var(--pad);right:var(--pad);bottom:10%;display:flex;align-items:flex-end;justify-content:space-between}.hero h1{font-size:clamp(3.4rem,8.8vw,9rem);line-height:.81;letter-spacing:-.07em;margin:0;font-weight:300}.hero h1 em{font-size:.88em}.circle-link{width:145px;height:145px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:flex;justify-content:center;align-items:center;gap:18px;font-size:.72rem;text-transform:uppercase;transition:.4s}.circle-link b{font-size:1.5rem;font-weight:300}.circle-link:hover{background:var(--acid);border-color:var(--acid);color:#111;transform:rotate(5deg)}.scroll{position:absolute;bottom:24px;right:var(--pad);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}.scroll span{margin-left:10px}.section{padding:clamp(90px,12vw,190px) var(--pad)}.section-label{display:grid;grid-template-columns:80px 1fr;border-top:1px solid var(--line);padding-top:12px;font-size:.69rem;text-transform:uppercase;letter-spacing:.1em}.section-label p{margin:0}.manifesto{display:grid;grid-template-columns:25% 75%;gap:30px}.manifesto-copy{padding-top:90px}.lead{font-size:clamp(2rem,4.3vw,5.2rem);line-height:1.12;letter-spacing:-.045em;max-width:1200px;margin:0}.columns{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin:80px 0 0 30%;font-size:clamp(.9rem,1.2vw,1.1rem);line-height:1.7}.projects,.principles{background:var(--ink);color:var(--paper)}.light{border-color:rgba(255,255,255,.25)}.project-feature{display:grid;grid-template-columns:70% 30%;margin-top:75px}.project-image{height:min(65vw,780px);position:relative;overflow:hidden}.project-image img{height:100%;object-fit:cover;transition:transform .8s}.project-feature:hover img{transform:scale(1.025)}.project-image span{position:absolute;right:16px;bottom:16px;font-size:.7rem}.project-info{padding:30px;display:flex;flex-direction:column}.project-info>p{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;margin:0}.project-info h2{font-size:clamp(2rem,4vw,4.8rem);line-height:.95;font-weight:300;letter-spacing:-.05em;margin:auto 0 12px}.project-info .year{font-size:1rem}.project-info a{margin-top:auto;border-top:1px solid rgba(255,255,255,.3);padding-top:16px;display:flex;justify-content:space-between}.project-list{margin-top:80px}.project-list article{display:grid;grid-template-columns:10% 48% 1fr auto;align-items:center;border-top:1px solid rgba(255,255,255,.25);padding:25px 0}.project-list h3{font-size:clamp(1.4rem,2.5vw,2.8rem);font-weight:300;margin:0}.project-list p,.project-list span,.project-list b{font-size:.7rem;text-transform:uppercase;font-weight:300}.process-head{display:grid;grid-template-columns:2fr 1fr;margin:90px 0 120px;gap:8vw;align-items:end}.process-head h2,.principles h2,.contact h2{font-size:clamp(3rem,7vw,8rem);line-height:.91;letter-spacing:-.065em;font-weight:300;margin:0}.process-head>p{line-height:1.7;max-width:420px}.steps{list-style:none;padding:0;margin:0}.steps li{display:grid;grid-template-columns:10% 35% 1fr;border-top:1px solid var(--line);padding:28px 0;align-items:start}.steps span{font-size:.7rem}.steps h3{font-size:clamp(1.4rem,2.4vw,2.7rem);font-weight:300;margin:0}.steps p{max-width:440px;margin:5px 0;line-height:1.6}.principles-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin-top:110px}.principle-list article{display:grid;grid-template-columns:50px 1fr;padding:25px 0;border-top:1px solid rgba(255,255,255,.25)}.principle-list span{font-size:.65rem}.principle-list h3{font-size:1.7rem;font-weight:300;margin:0}.principle-list p{grid-column:2;margin:15px 0 0;max-width:430px;line-height:1.6;color:#aaa}.contact{text-align:center;padding-top:170px;padding-bottom:170px}.contact h2{margin:40px 0 80px}.contact-link{display:inline-flex;gap:90px;border-bottom:1px solid;padding:15px 0;text-transform:uppercase;font-size:.75rem;letter-spacing:.08em}.contact-link span{font-size:1.2rem}footer{background:var(--acid);padding:60px var(--pad) 35px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;min-height:280px}footer div:not(:first-child){display:flex;flex-direction:column;gap:10px;font-size:.76rem}footer p{margin:0}.reveal{opacity:0;transform:translateY(45px);transition:opacity 1s,transform 1s}.reveal.visible{opacity:1;transform:none}
@media(max-width:800px){.site-header nav{position:fixed;inset:0;background:#111;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:2rem;transform:translateY(-100%);transition:.5s}.site-header nav.open{transform:none}.menu{display:block;position:relative;z-index:2}.menu i{display:block;width:25px;height:1px;background:#fff;margin:6px}.hero-copy{bottom:13%;align-items:flex-end}.circle-link{width:95px;height:95px}.hero h1{font-size:16vw}.manifesto{display:block}.manifesto .section-label{margin-bottom:0}.manifesto-copy{padding-top:65px}.columns{grid-template-columns:1fr;margin:50px 0 0}.project-feature{grid-template-columns:1fr}.project-image{height:70vh}.project-info{min-height:300px}.project-list article{grid-template-columns:12% 1fr auto}.project-list p{display:none}.process-head{grid-template-columns:1fr;margin:70px 0}.steps li{grid-template-columns:12% 1fr}.steps p{grid-column:2}.principles-grid{grid-template-columns:1fr;margin-top:70px}.contact-link{gap:25px}footer{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1;margin-bottom:50px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.loader{display:none}.reveal{opacity:1;transform:none}}

/* JDA Studio animated entrance */
.loader{display:block;background:#050505;color:#fff;overflow:hidden;perspective:1100px;font-size:initial}
.loader div{display:none}
.loader-logo{position:absolute;inset:50% auto auto 50%;width:min(82vw,720px);height:min(80vh,720px);transform:translate(-50%,-50%);overflow:visible}
.logo-axis{fill:none;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:axis-draw .65s cubic-bezier(.7,0,.3,1) forwards}
.axis-d{animation-delay:.15s}.axis-a{animation-delay:.3s}
.logo-letter{font-family:"DM Sans",Arial,sans-serif;font-size:190px;font-weight:500;fill:#fff;opacity:0;transform-box:fill-box;backface-visibility:hidden}
.letter-j{transform-origin:100% 50%;animation:letter-j .95s cubic-bezier(.2,.8,.2,1) .55s forwards}
.letter-d{transform-origin:0 70%;animation:letter-d 1.05s cubic-bezier(.2,.8,.2,1) .72s forwards}
.letter-a{font-size:170px;transform-origin:50% 0;animation:letter-a .95s cubic-bezier(.2,.8,.2,1) .92s forwards}
.corner{position:absolute;width:28px;height:4px;background:#fff}.c1{left:3%;top:3%}.c2{right:3%;top:3%}.c3{left:3%;bottom:3%}.c4{right:3%;bottom:3%}
.loader-studio{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);font-size:.6rem;text-transform:uppercase;letter-spacing:.28em;opacity:0;animation:studio-in .55s ease 1.35s forwards}
@keyframes axis-draw{to{stroke-dashoffset:0}}
@keyframes letter-j{0%{opacity:0;transform:rotateX(-110deg) rotateZ(-8deg)}35%{opacity:1}76%{transform:rotateX(14deg)}100%{opacity:1;transform:none}}
@keyframes letter-d{0%{opacity:0;transform:rotate3d(1,1,0,-120deg) scale(.9)}35%{opacity:1}78%{transform:rotate3d(1,1,0,12deg)}100%{opacity:1;transform:none}}
@keyframes letter-a{0%{opacity:0;transform:rotateY(120deg) translateY(12px)}35%{opacity:1}78%{transform:rotateY(-12deg)}100%{opacity:1;transform:none}}
@keyframes studio-in{to{opacity:.7}}
.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.project-gallery figure{margin:0;overflow:hidden}.project-gallery img{aspect-ratio:4/3;object-fit:cover;transition:transform .8s}.project-gallery figure:hover img{transform:scale(1.02)}.project-gallery figcaption{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;padding-top:10px;color:#aaa}
@media(max-width:800px){.loader-logo{width:128vw;height:80vh}.corner{width:20px;height:3px}.project-gallery{grid-template-columns:1fr}.hero>img{object-position:58% center}}

/* Works timeline */
.works-timeline{background:#d9d8d1}.timeline-intro{display:grid;grid-template-columns:2fr 1fr;gap:8vw;align-items:end;margin:90px 0 110px}.timeline-intro h2{font-size:clamp(3rem,7vw,8rem);line-height:.9;letter-spacing:-.065em;font-weight:300;margin:0}.timeline-intro p{line-height:1.7;max-width:430px}.timeline{border-bottom:1px solid var(--line)}.timeline details{border-top:1px solid var(--line)}.timeline summary{list-style:none;display:grid;grid-template-columns:32% 1fr auto;align-items:center;padding:27px 0;cursor:pointer}.timeline summary::-webkit-details-marker{display:none}.timeline time{font-size:clamp(2rem,4.4vw,5rem);font-weight:300;letter-spacing:-.06em}.timeline summary span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}.timeline summary b{font-size:1.6rem;font-weight:300;transition:transform .35s}.timeline details[open] summary b{transform:rotate(45deg)}.timeline ul{list-style:none;margin:0 0 60px 32%;padding:0}.timeline li{display:grid;grid-template-columns:1fr 1fr;gap:30px;border-top:1px solid rgba(17,17,15,.13);padding:18px 0}.timeline h3{font-size:clamp(1rem,1.45vw,1.35rem);font-weight:400;margin:0}.timeline li p{font-size:.75rem;line-height:1.55;margin:3px 0 0;color:#5d5d58}.earlier-work{margin-top:70px}.earlier-work time{font-size:clamp(1.7rem,3.2vw,3.7rem)}
@media(max-width:800px){.timeline-intro{grid-template-columns:1fr;margin:65px 0 75px}.timeline summary{grid-template-columns:55% 1fr auto}.timeline ul{margin-left:0}.timeline li{grid-template-columns:1fr;gap:2px}.timeline summary span{font-size:.58rem}.site-header nav{gap:20px}}

/* Horizontal interactive timeline */
.timeline{position:relative;display:grid;grid-template-columns:repeat(11,minmax(78px,1fr));min-height:690px;border:0;padding-top:32px;isolation:isolate}.timeline:before{content:"";position:absolute;top:88px;left:0;right:0;height:1px;background:rgba(17,17,15,.45);z-index:-1}.timeline details{display:contents}.timeline summary{position:relative;display:flex;min-width:0;height:115px;padding:0;align-items:flex-start;justify-content:center;border:0;cursor:pointer}.timeline summary:after{content:"";position:absolute;top:52px;left:50%;width:9px;height:9px;border-radius:50%;background:#222;transform:translate(-50%,-50%);transition:transform .35s,background .35s}.timeline summary time{font-size:clamp(1.15rem,1.8vw,2rem);line-height:1;letter-spacing:-.05em;transition:font-size .38s cubic-bezier(.2,.8,.2,1),transform .38s}.timeline summary span,.timeline summary b{display:none}.timeline details[open] summary time,.timeline summary:hover time,.timeline summary:focus-visible time{font-size:clamp(2.4rem,4.6vw,5.2rem);transform:translateY(-18px)}.timeline details[open] summary:after{background:var(--acid);transform:translate(-50%,-50%) scale(1.45);box-shadow:0 0 0 5px #222}.timeline details[open] summary:before{content:"";position:absolute;top:57px;left:50%;width:1px;height:82px;background:#222;animation:drop-line .45s ease both}.timeline ul{position:absolute;top:196px;left:0;width:100%;margin:0;padding:32px 0 0;display:none;grid-template-columns:repeat(3,1fr);column-gap:5vw;animation:works-in .48s ease both}.timeline details[open] ul{display:grid}.timeline li{display:block;padding:14px 0;border-top:1px solid rgba(17,17,15,.18)}.timeline h3{font-size:clamp(.95rem,1.2vw,1.2rem)}.timeline li p{font-size:.68rem}.timeline details[open] summary{color:#111}@keyframes drop-line{from{height:0}to{height:82px}}@keyframes works-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:800px){.timeline{grid-template-columns:repeat(11,112px);min-height:790px;overflow-x:auto;overflow-y:hidden;padding-bottom:15px}.timeline:before{width:1232px}.timeline summary{height:115px}.timeline details[open] summary time,.timeline summary:hover time,.timeline summary:focus-visible time{font-size:2.7rem}.timeline ul{position:fixed;left:var(--pad);right:var(--pad);top:auto;margin-top:164px;width:auto;max-height:520px;overflow-y:auto;grid-template-columns:1fr;background:#d9d8d1;padding:20px 0 35px;z-index:3}.timeline details[open] ul{display:block}.timeline li{padding:12px 0}}