@import url('compact.css');
:root { --black:#111416; --panel:#1b2023; --white:#edf0e8; --cyan:#58d7d0; --orange:#ff7048; --muted:#9aa5a3; --mono:'Space Mono',monospace; --sans:'Archivo',Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--black); color:var(--white); font:14px/1.5 var(--sans); } a { color:inherit; text-decoration:none; }
.header { position:relative; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; padding:21px 4vw 18px; border-bottom:1px solid rgba(237,240,232,.25); }.mark { display:flex; align-items:center; gap:12px; font-size:11px; font-weight:700; line-height:.9; letter-spacing:.1em; text-transform:uppercase; }.mark span { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--cyan); color:var(--cyan); font:700 11px var(--mono); }.coordinates { color:var(--muted); font:10px/1.35 var(--mono); text-align:center; }.menu { justify-self:end; border:0; background:none; color:var(--white); font:700 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }.menu i { margin-left:9px; color:var(--orange); font-size:16px; font-style:normal; }.header nav { position:absolute; top:81px; right:4vw; display:none; flex-direction:column; gap:13px; min-width:190px; padding:18px; background:var(--cyan); color:var(--black); }.header nav.is-open { display:flex; }.header nav a { font:700 10px var(--mono); text-transform:uppercase; }
.hero { min-height:calc(100vh - 81px); padding:28px 4vw 20px; display:flex; flex-direction:column; }.hero-index,.hero-foot { display:flex; justify-content:space-between; color:var(--muted); font:10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }.hero-layout { flex:1; display:grid; grid-template-columns:.84fr 1.16fr; gap:7vw; align-items:center; max-width:1450px; width:100%; margin:0 auto; }.label { margin:0 0 22px; color:var(--cyan); font:700 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.hero-copy h1,.section-head h2,.studio h2,.footer h2 { margin:0; font:700 clamp(80px,11vw,170px)/.72 var(--sans); letter-spacing:-.07em; text-transform:uppercase; }.hero-copy h1 em,.section-head h2 em,.studio h2 em,.footer h2 em { color:var(--orange); font-style:normal; }.intro { max-width:350px; margin:46px 0 28px; color:#c4ceca; font-size:15px; }.action { display:inline-flex; gap:18px; align-items:center; color:var(--cyan); font:700 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }.action span { font-size:20px; }.hero-visual { position:relative; min-height:500px; overflow:hidden; background:var(--panel); border:1px solid rgba(237,240,232,.25); }.hero-visual img { width:100%; height:100%; min-height:500px; object-fit:cover; filter:grayscale(.75) contrast(1.25) brightness(.65); mix-blend-mode:screen; }.hero-visual:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,20,22,.4),transparent 45%,rgba(88,215,208,.12)); pointer-events:none; }.visual-top,.visual-bottom { position:absolute; z-index:2; left:18px; right:18px; display:flex; justify-content:space-between; color:var(--cyan); font:9px var(--mono); letter-spacing:.07em; text-transform:uppercase; }.visual-top { top:15px; }.visual-bottom { bottom:15px; }.visual-bottom b { color:var(--orange); }.scan-line { position:absolute; z-index:2; left:0; right:0; top:54%; height:1px; background:var(--orange); box-shadow:0 0 18px var(--orange); opacity:.8; }.hero-foot { padding-top:15px; border-top:1px solid rgba(237,240,232,.25); }
section:not(.hero),.footer { padding:115px 10vw; border-top:1px solid rgba(237,240,232,.25); }.section-head { display:grid; grid-template-columns:.65fr 1.4fr .7fr; align-items:end; gap:30px; margin-bottom:65px; }.section-head .label { align-self:start; }.section-head h2 { font-size:clamp(68px,8.5vw,135px); }.section-note { margin:0; max-width:260px; color:var(--muted); font:13px/1.6 var(--mono); }.work { background:var(--black); }.work-list { border-top:1px solid rgba(237,240,232,.25); }.work-list a { display:grid; grid-template-columns:1fr 2fr 1.2fr 30px; gap:18px; align-items:center; min-height:90px; border-bottom:1px solid rgba(237,240,232,.25); transition:background .25s,padding .25s; }.work-list a:hover { padding:0 16px; background:var(--cyan); color:var(--black); }.work-list span { color:var(--muted); font:10px var(--mono); text-transform:uppercase; }.work-list a:hover span { color:var(--black); }.work-list strong { font-size:clamp(20px,2.8vw,38px); letter-spacing:-.05em; }.work-list b { color:var(--orange); font-size:22px; }
.systems { background:var(--panel); }.systems .section-head h2 { color:var(--cyan); }.system-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(237,240,232,.25); }.system-grid article { min-height:255px; padding:25px; background:var(--panel); }.system-no { color:var(--orange); font:10px var(--mono); }.system-grid h3 { margin:55px 0 13px; font-size:25px; letter-spacing:-.04em; }.system-grid p { max-width:260px; margin:0; color:var(--muted); }
.studio { display:grid; grid-template-columns:1fr 1fr; gap:8vw; background:var(--cyan); color:var(--black); }.studio .label { color:var(--black); }.studio h2 { font-size:clamp(70px,9vw,140px); }.studio h2 em { color:var(--orange); }.studio-copy { align-self:end; max-width:400px; font-size:16px; }.mono { margin-top:55px; color:rgba(17,20,22,.7); font:11px/1.7 var(--mono); }
.footer { display:grid; grid-template-columns:1.2fr .9fr auto; align-items:end; gap:40px; background:var(--orange); color:var(--black); }.footer .label { color:var(--black); }.footer h2 { font-size:clamp(72px,9vw,140px); }.footer h2 em { color:var(--white); }.contact { align-self:end; font:13px/1.8 var(--mono); }.contact a { color:var(--white); text-decoration:underline; text-underline-offset:5px; }.footer small { align-self:start; font:10px var(--mono); text-transform:uppercase; }
@media (max-width:800px) { .header { grid-template-columns:1fr auto; padding:19px 6vw; }.coordinates { display:none; }.header nav { top:70px; right:6vw; }.hero { min-height:0; padding:25px 6vw 18px; }.hero-layout { display:block; }.hero-copy { padding:55px 0 60px; }.hero-copy h1 { font-size:clamp(72px,20vw,130px); }.intro { margin-top:33px; }.hero-visual,.hero-visual img { min-height:310px; }.hero-foot span:nth-child(2) { display:none; } section:not(.hero),.footer { padding:78px 6vw; }.section-head { display:block; margin-bottom:48px; }.section-head h2 { margin:24px 0; font-size:clamp(62px,18vw,120px); }.work-list a { grid-template-columns:1fr 25px; gap:10px; padding:18px 0; }.work-list .code,.work-list a>span:nth-child(3) { grid-column:1; }.work-list strong { grid-column:1; grid-row:2; }.work-list b { grid-column:2; grid-row:1 / span 2; }.system-grid { display:block; background:none; }.system-grid article { min-height:180px; margin-bottom:1px; }.system-grid h3 { margin-top:35px; }.studio { display:block; }.studio-copy { margin-top:55px; }.footer { display:block; }.contact { margin-top:55px; }.footer small { display:block; margin-top:55px; } }