:root{
--ink:#0b0c0f;
--paper:#fafafa;
--soft:#f1f2f4;
--line:#d9dce1;
--muted:#626974;
--blue:#2563eb;
--white:#fff;
--display:"Archivo","Noto Sans KR",sans-serif;
--body:"Space Grotesk","Noto Sans KR",sans-serif}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--body);
font-kerning:normal;
font-synthesis:none;
line-height:1.5;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
overflow-x:hidden}
a{
color:inherit;
text-decoration:none}
button{
font:inherit}
.skip-link{
position:fixed;
top:-4rem;
left:1rem;
padding:.75rem 1rem;
background:var(--ink);
color:#fff;
z-index:10}
.skip-link:focus{
top:1rem}
.header{
height:76px;
border-bottom:1px solid var(--line);
padding:0 clamp(1.25rem,4vw,4rem);
display:flex;
align-items:center;
justify-content:space-between}
.wordmark{
display:flex;
align-items:center;
gap:.55rem;
font:800 .65rem/1.05 var(--display);
letter-spacing:.08em}
.wordmark img{
width:34px;
height:35px;
object-fit:contain}
.header nav{
display:flex;
gap:2rem;
font-size:.8rem;
font-weight:600}
.header nav a:hover,.header nav a:focus-visible{
text-decoration:underline;
text-underline-offset:.35rem}
.language-toggle{
min-width:78px;
min-height:44px;
border:1px solid var(--ink);
background:transparent;
cursor:pointer;
font-size:.75rem;
font-weight:700;
transition:background .18s,color .18s}
.language-toggle:hover,.language-toggle:focus-visible{
background:var(--ink);
color:var(--white)}
.hero{
min-height:calc(100dvh - 76px);
max-width:1440px;
margin:auto;
padding:clamp(3rem,8vw,8rem) clamp(1.25rem,8vw,8rem) 2rem;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:auto 1fr auto;
gap:2rem;
border-left:1px solid var(--line);
border-right:1px solid var(--line)}
.kicker{
margin:0;
color:var(--muted);
font-size:.63rem;
font-weight:700;
letter-spacing:.1em}
.hero h1{
grid-column:1/-1;
align-self:center;
max-width:13ch;
margin:0;
font:800 clamp(3.7rem,9.4vw,9.6rem)/.94 var(--display);
letter-spacing:-.045em;
text-wrap:balance}
.hero h1,.statement p,.section-intro h2,.principles h2,.contact h2{
white-space:pre-line}
.hero-bottom{
grid-column:1/-1;
display:flex;
justify-content:space-between;
align-items:end;
gap:2rem;
border-top:1px solid var(--line);
padding-top:1.2rem}
.hero-bottom p{
max-width:31rem;
margin:0;
color:var(--muted);
font-size:clamp(.95rem,1.3vw,1.12rem);
line-height:1.55}
.text-link{
display:flex;
gap:1rem;
align-items:center;
min-height:44px;
font-size:.82rem;
font-weight:700;
white-space:nowrap}
.text-link span:last-child{
font-size:1.5rem;
color:var(--blue)}
.hero-index{
grid-column:2;
justify-self:end;
margin:0;
color:var(--muted);
font-size:.62rem;
letter-spacing:.08em}
.statement{
background:var(--ink);
color:var(--white);
padding:clamp(4rem,9vw,9rem) clamp(1.25rem,8vw,8rem)}
.statement p{
max-width:1060px;
margin:0;
font:600 clamp(1.8rem,4vw,4.4rem)/1.12 var(--display);
letter-spacing:-.035em;
text-wrap:balance}
.work{
padding:clamp(5rem,10vw,10rem) clamp(1.25rem,4vw,4rem)}
.section-intro{
display:grid;
grid-template-columns:1fr 1fr;
gap:2rem;
align-items:end;
margin:0 auto 5rem;
max-width:1440px}
.section-intro .kicker{
grid-column:1/-1}
.section-intro h2,.principles h2,.contact h2{
margin:0;
font:750 clamp(2.7rem,5.7vw,6.2rem)/1 var(--display);
letter-spacing:-.045em;
text-wrap:balance}
.intro-copy{
max-width:28rem;
margin:0 0 .3rem;
color:var(--muted);
line-height:1.6}
.projects{
max-width:1440px;
margin:auto;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:5rem 2rem}
.project{
min-width:0}
.orbit{
grid-column:1/-1}
.project>header{
display:flex;
justify-content:space-between;
align-items:center;
border-top:1px solid var(--ink);
padding:.65rem 0;
font-size:.63rem;
letter-spacing:.08em}
.status{
padding:.27rem .5rem;
border-radius:999px;
font-size:.58rem;
font-weight:700;
letter-spacing:0}
.status-built{
background:#e4f4e6;
color:#195229}
.status-designed{
background:#e8e9ff;
color:#323d96}
.status-planned{
background:#eceef1;
color:#4a505a}
.product-shot{
position:relative;
margin:0;
background:var(--soft);
overflow:hidden;
height:clamp(300px,42vw,590px)}
.product-shot img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 12%;
transition:transform .25s ease}
.project:hover img{
transform:scale(1.015)}
figcaption{
position:absolute;
right:1rem;
bottom:1rem;
padding:.35rem .5rem;
background:rgba(255,255,255,.9);
font-size:.58rem}
.kana-shot{
display:grid;
place-items:center;
background:#e6f2ec}
.kana-shot img{
width:auto;
height:86%;
object-fit:contain;
border:6px solid #10241e;
border-radius:22px;
box-shadow:0 16px 35px rgba(16,36,30,.14)}
.signal-shot{
height:clamp(300px,32vw,450px);
display:flex;
align-items:center;
gap:clamp(.5rem,1.5vw,1.5rem);
padding:clamp(1.5rem,4vw,4rem);
color:#fff;
background:#14171d}
.signal-shot i{
width:clamp(25px,8vw,115px);
height:1px;
background:#7588ff}
.signal-tag{
font-size:.58rem;
letter-spacing:.08em}
.signal-shot strong{
margin-left:auto;
font:700 clamp(1.7rem,4.8vw,4.8rem)/.93 var(--display);
letter-spacing:-.04em}
.signal-shot small{
position:absolute;
right:clamp(1.5rem,4vw,4rem);
bottom:clamp(1.5rem,4vw,4rem);
color:#aeb8ff;
font:.65rem var(--body)}
.agora-shot{
height:clamp(300px,32vw,450px);
display:grid;
place-items:center;
background:#f0effb}
.agora-shot div{
width:58%;
padding:1.4rem;
background:#fff;
border:1px solid var(--ink);
box-shadow:10px 10px 0 var(--blue);
transform:rotate(-3deg);
z-index:1}
.agora-shot b{
display:block;
font:700 clamp(1rem,2vw,1.6rem)/1.1 var(--display);
letter-spacing:-.04em}
.agora-shot span{
display:block;
margin-top:1.4rem;
color:var(--muted);
font-size:.62rem}
.agora-shot em{
position:absolute;
bottom:1.2rem;
left:1.2rem;
font:600 .58rem/1.1 var(--body);
letter-spacing:.08em}
.commerce-shot{
height:clamp(300px,32vw,450px);
padding:clamp(1.5rem,4vw,4rem);
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
background:#dce6ff}
.commerce-shot span,.commerce-shot small{
font-size:.62rem;
letter-spacing:.06em}
.commerce-shot strong{
margin:.9rem 0;
font:700 clamp(2rem,5vw,5rem)/1 var(--display);
letter-spacing:-.035em}
.commerce-shot i{
width:100%;
border-top:1px dashed #7688a7;
margin:1rem 0}
.project-copy{
display:grid;
grid-template-columns:minmax(10rem,.85fr) 1.4fr;
gap:1.5rem;
padding:1.25rem 0}
.project-copy h3{
margin:0;
font:720 clamp(1.55rem,2.8vw,2.75rem)/1.05 var(--display);
letter-spacing:-.035em}
.project-copy p{
margin:0;
color:var(--muted);
font-size:.9rem;
line-height:1.62}
details{
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:.8rem 0;
font-size:.75rem}
summary{
display:flex;
justify-content:space-between;
cursor:pointer;
font-weight:700;
list-style:none}
summary::-webkit-details-marker{
display:none}
summary b{
font-size:1rem;
font-weight:400;
transition:transform .18s ease}
details[open] summary b{
transform:rotate(45deg)}
details p{
margin:.8rem 1rem 0 0;
color:var(--muted);
line-height:1.6}
.principles{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(3rem,10vw,10rem);
padding:clamp(5rem,10vw,10rem) clamp(1.25rem,8vw,8rem);
background:var(--soft)}
.principles ol{
margin:0;
padding:0;
list-style:none;
border-top:1px solid var(--ink)}
.principles li{
display:grid;
grid-template-columns:3rem 1fr;
gap:1rem;
padding:1.3rem 0 1.55rem;
border-bottom:1px solid var(--ink)}
.principles li>span{
font-size:.65rem}
.principles h3{
margin:0 0 .5rem;
font:650 1.05rem var(--display);
letter-spacing:-.03em}
.principles p{
max-width:31rem;
margin:0;
color:var(--muted);
font-size:.86rem;
line-height:1.6}
.contact{
padding:clamp(5rem,10vw,10rem) clamp(1.25rem,8vw,8rem);
background:var(--blue);
color:#fff}
.contact .kicker{
color:#dbe6ff}
.contact h2{
max-width:13ch;
margin-top:1.4rem}
.contact-copy{
max-width:29rem;
margin:2rem 0 5rem;
line-height:1.65}
.contact-link{
display:flex;
justify-content:space-between;
align-items:center;
max-width:100%;
border-top:1px solid rgba(255,255,255,.55);
padding-top:1rem;
font:600 clamp(1.05rem,2.5vw,2.4rem) var(--display);
letter-spacing:-.015em;
overflow-wrap:anywhere}
.contact-link span{
font-size:1.4em}
footer{
min-height:110px;
padding:1.5rem clamp(1.25rem,4vw,4rem);
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
font-size:.58rem;
letter-spacing:.06em}
footer .wordmark{
font-size:.6rem}
html[lang="ko"] body{
font-family:"Noto Sans KR",sans-serif;
word-break:keep-all}
html[lang="ko"] .hero h1,html[lang="ko"] .statement p,html[lang="ko"] .section-intro h2,html[lang="ko"] .principles h2,html[lang="ko"] .contact h2,html[lang="ko"] .project-copy h3,html[lang="ko"] .principles h3{
font-family:"Noto Sans KR",sans-serif;
font-weight:700}
html[lang="ko"] .hero h1{
max-width:14ch;
line-height:1.12;
letter-spacing:-.025em}
html[lang="ko"] .statement p{
line-height:1.24;
letter-spacing:-.025em}
html[lang="ko"] .section-intro h2,html[lang="ko"] .principles h2,html[lang="ko"] .contact h2{
line-height:1.12;
letter-spacing:-.03em}
[data-i18n="agoraTagline"]{
white-space:pre-line}
:focus-visible{
outline:2px solid var(--blue);
outline-offset:4px}
@media(max-width:700px){
.header{
height:68px}
.header nav{
display:none}
.hero{
min-height:calc(100dvh - 68px);
padding:2rem 1.25rem 1.3rem;
grid-template-columns:1fr}
.hero h1{
font-size:clamp(3.4rem,17vw,5.2rem);
max-width:9ch;
line-height:.98}
html[lang="ko"] .hero h1{
max-width:12ch;
font-size:clamp(2.9rem,13.5vw,4.4rem);
line-height:1.13}
.hero-bottom{
display:block}
.hero-bottom p{
font-size:.96rem}
.text-link{
margin-top:1.5rem}
.hero-index{
grid-column:1;
justify-self:start}
.section-intro{
display:block;
margin-bottom:3.2rem}
.section-intro h2{
margin:1rem 0 1.3rem}
.projects{
display:block}
.project{
margin-bottom:4rem}
.product-shot,.signal-shot,.agora-shot,.commerce-shot{
height:82vw;
max-height:420px}
.orbit .product-shot{
height:76vw}
.project-copy{
display:block}
.project-copy p{
margin-top:.8rem}
.principles{
display:block}
.principles>div{
margin-bottom:3rem}
.contact h2{
font-size:clamp(3.2rem,15vw,5.1rem)}
footer{
flex-wrap:wrap}
footer>span:last-child{
width:100%}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*::before,*::after{
transition-duration:.01ms!important;
animation-duration:.01ms!important}
}