:root{--black:#121212;--paper:#f2f0ea;--orange:#ef573f;--blue:#3b50dd;--line:#c9c7c0}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--black);font-family:"DM Sans",sans-serif}a{text-decoration:none;color:inherit}.demo{height:32px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;background:var(--black);color:#ddd;font-size:9px}.demo b{color:#ff725c}.demo a{text-decoration:underline}nav{height:80px;padding:0 4%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;border-bottom:1px solid var(--line)}.logo{font:700 20px "Syne";letter-spacing:-.05em}.logo span{color:var(--orange)}nav>div{display:flex;justify-content:center;gap:28px;font-size:10px}.contact-link{justify-self:end;font-size:10px;border-bottom:1px solid;padding-bottom:4px}.hero{min-height:710px;padding:55px 4% 45px;position:relative;overflow:hidden}.availability{font-size:9px;display:flex;align-items:center;gap:7px}.availability i{width:7px;height:7px;border-radius:50%;background:#33ad62}.hero h1{font:600 7.6vw/.91 "Syne";letter-spacing:-.075em;margin:100px 0 65px;position:relative;z-index:2}.hero h1 em{font-style:normal;color:var(--orange)}.hero-bottom{display:grid;grid-template-columns:1fr 1fr}.hero-bottom p{max-width:510px;font-size:15px;line-height:1.65}.hero-bottom a{justify-self:end;display:flex;align-items:center;gap:12px;font-size:10px}.hero-bottom a span{width:35px;height:35px;border-radius:50%;border:1px solid;display:grid;place-items:center}.shape{position:absolute;border-radius:50%;filter:blur(.2px)}.s1{right:4%;top:90px;width:190px;height:190px;background:var(--blue);mix-blend-mode:multiply}.s2{right:16%;top:170px;width:130px;height:260px;background:var(--orange);border-radius:80px;transform:rotate(28deg);mix-blend-mode:multiply}.ticker{height:68px;background:var(--black);color:white;display:flex;align-items:center;justify-content:space-around;font:600 11px "Syne";letter-spacing:.08em}.ticker i{color:var(--orange)}.work{padding:120px 4%}.work header{display:grid;grid-template-columns:1.4fr .6fr;align-items:end;margin-bottom:65px}.work small,.services small,.studio small{font-size:8px;letter-spacing:.16em}.work h2,.services h2,.studio h2{font:600 48px/1.05 "Syne";letter-spacing:-.05em;margin:22px 0 0}.work h2 em{font-style:normal;color:var(--blue)}.work header p{font-size:11px;line-height:1.8}.projects{display:grid;grid-template-columns:1fr 1fr;gap:50px 18px}.projects article.large{grid-column:1/3}.visual{height:420px;display:grid;place-items:center;position:relative;overflow:hidden}.large .visual{height:600px}.visual span{font:700 7vw "Syne";letter-spacing:-.08em}.visual i{position:absolute;font:italic 17px serif}.one{background:#d8c9af;color:#623a28}.one:before{content:"";position:absolute;width:260px;height:380px;border-radius:130px 130px 20px 20px;background:#ab6444}.one span,.one i{z-index:2;color:#f4e8d7}.two{background:#bec8b5;color:#2c533f}.two:after{content:"";position:absolute;width:230px;height:230px;border:45px solid #466752;border-radius:50%}.two span,.two i{z-index:2}.three{background:#ef805b;color:#402019}.three:after{content:"";position:absolute;width:190px;height:260px;background:#f0c395;border-radius:50% 50% 8px 8px}.three span,.three i{z-index:2}.projects article>div:last-child{display:flex;justify-content:space-between;align-items:center;padding-top:14px}.projects article>div>span{font-size:7px;letter-spacing:.12em}.projects h3{font:600 18px "Syne";margin:0}.services{background:var(--black);color:white;padding:120px 4%;display:grid;grid-template-columns:.72fr 1.28fr;gap:100px}.service-intro{position:sticky;top:120px;align-self:start}.services h2{font-size:43px}.service-intro p{max-width:360px;color:#aaa;font-size:11px;line-height:1.8}.service-intro>a{display:inline-block;margin-top:25px;color:#ff725c;font-size:10px}.service-list article{display:grid;grid-template-columns:45px 1fr 30px;gap:15px;padding:27px 0;border-top:1px solid #3a3a3a}.service-list article>b{color:#ff725c;font-size:8px}.service-list h3{font:500 25px "Syne";margin:0 0 8px}.service-list p{color:#999;font-size:10px;margin:0}.service-list article>span{font-size:20px}.studio{padding:130px 8%;display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:center}.studio-art{height:520px;background:var(--blue);position:relative;display:grid;place-items:center;overflow:hidden}.studio-art>span{font:700 220px "Syne";color:#f0eee8;z-index:2}.studio-art i{position:absolute;width:180px;height:350px;border-radius:50%;background:var(--orange);transform:rotate(32deg);mix-blend-mode:multiply}.studio-art i:last-child{background:#eed262;transform:rotate(-45deg)}.studio h2{font-size:42px}.studio>div:last-child>p{line-height:1.85;color:#5f5e5a;font-size:11px}.studio-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px;padding-top:25px;border-top:1px solid var(--line)}.studio-stats span{font-size:8px;display:flex;flex-direction:column}.studio-stats b{font:25px "Syne";margin-bottom:5px}.cta{background:var(--orange);color:#17120f;padding:90px 5%;display:flex;align-items:end;justify-content:space-between}.cta p{font:500 52px/1.05 "Syne";letter-spacing:-.05em;margin:0}.cta a{font:600 20px "Syne";border-bottom:2px solid;padding-bottom:6px}.cta a span{margin-left:35px}footer{min-height:115px;background:var(--black);color:#aaa;padding:35px 4%;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;align-items:center;font-size:8px}footer .logo{color:white}footer>div{display:flex;gap:18px}footer small{justify-self:end}
@media(max-width:800px){nav{grid-template-columns:1fr 1fr}nav>div{display:none}.hero h1{font-size:11vw;margin-top:140px}.s1{width:140px;height:140px}.s2{width:100px;height:200px}.work header{grid-template-columns:1fr;gap:25px}.large .visual{height:450px}.services,.studio{grid-template-columns:1fr}.service-intro{position:static}.studio-art{height:400px}.cta{align-items:flex-start;flex-direction:column;gap:40px}.cta p{font-size:42px}}@media(max-width:520px){.hero{min-height:620px}.hero h1{font-size:14vw}.hero-bottom{grid-template-columns:1fr}.hero-bottom a{justify-self:start;margin-top:20px}.ticker span:nth-of-type(even){display:none}.work h2,.services h2,.studio h2{font-size:36px}.projects{grid-template-columns:1fr}.projects article.large{grid-column:auto}.large .visual,.visual{height:350px}.projects article>div:last-child{align-items:flex-start;flex-direction:column;gap:8px}.studio{padding:90px 5%}.studio-stats{grid-template-columns:1fr 1fr}.cta p{font-size:35px}.cta a{font-size:14px}footer{grid-template-columns:1fr 1fr;gap:20px}footer small{justify-self:start}}

/* Original studio photography */
.work{background:linear-gradient(180deg,var(--paper),#e9e7df)}.large .visual.one{background-image:linear-gradient(180deg,transparent 50%,rgba(12,12,12,.48)),url("studio-photo.webp");background-size:cover;background-position:center}.large .visual.one:before{display:none}.large .visual.one span,.large .visual.one i{color:white;text-shadow:0 2px 18px rgba(0,0,0,.28)}.studio-art{background-image:linear-gradient(135deg,rgba(59,80,221,.23),rgba(239,87,63,.14)),url("studio-photo.webp");background-size:cover;background-position:center}.studio-art>span,.studio-art>i{display:none}.studio-art:after{content:"Inside our Jakarta studio";position:absolute;left:18px;bottom:18px;color:white;background:#121212cc;padding:9px 12px;font-size:8px;letter-spacing:.12em}.projects article{transition:transform .28s}.projects article:hover{transform:translateY(-7px)}

/* Photographic project cases */
.visual.two,.visual.three{background-image:url("studio-photo.webp");background-size:210% 100%;color:white}.visual.two{background-position:0 center}.visual.three{background-position:100% center}.visual.two:after,.visual.three:after{content:"";position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;background:linear-gradient(180deg,rgba(13,13,13,.05),rgba(13,13,13,.7))}.visual.two span,.visual.two i,.visual.three span,.visual.three i{z-index:2;color:white;text-shadow:0 3px 18px rgba(0,0,0,.35)}.visual.two span,.visual.three span{font-size:5.8vw;letter-spacing:-.07em}.projects article:hover .visual{background-size:218% 104%}.projects .visual{transition:background-size .5s}.projects article.large:hover .visual{background-size:104%}.work:after{content:"Ideas · Identity · Impact";display:block;margin-top:85px;padding-top:25px;border-top:1px solid var(--line);font:600 4vw "Syne";letter-spacing:-.05em;color:#c4c1b8;text-align:center}