@import url('compact.css');
:root {
  --black:#24392f; --panel:#e5ddd0; --white:#f8f3ec; --cyan:#9bb7a4; --orange:#d8a07a; --muted:#6b7d74; --mono:'Space Mono',monospace; --sans:'Archivo',Arial,sans-serif;
}
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:linear-gradient(180deg, #f5f1e9 0%, #efe7db 100%); color:var(--black); 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(36,57,47,.2); }.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(--black); color:var(--black); background:rgba(155,183,164,.22); 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(--black); 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(--black); color:var(--white); }.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(--black); 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:#4d5b54; font-size:15px; }.action { display:inline-flex; gap:18px; align-items:center; color:var(--black); font:700 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }.action span { font-size:20px; color:var(--orange); }.hero-visual { position:relative; min-height:500px; overflow:hidden; background:var(--panel); border:1px solid rgba(36,57,47,.2); }.hero-visual img { width:100%; height:100%; min-height:500px; object-fit:cover; filter:grayscale(.22) contrast(1.08) brightness(.9); }.hero-visual:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(245,241,233,.18),transparent 42%,rgba(155,183,164,.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(--muted); 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(--cyan); box-shadow:0 0 18px rgba(155,183,164,.7); 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(36,57,47,.2); }.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; color:var(--black); }.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:#f8f3ec; }.work-list { border-top:1px solid rgba(36,57,47,.2); }.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(36,57,47,.2); 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(--black); }.system-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(36,57,47,.12); }.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(36,57,47,.72); font:11px/1.7 var(--mono); }
.footer { display:grid; grid-template-columns:1.2fr .9fr auto; align-items:end; gap:40px; background:#e1d6c7; color:var(--black); }.footer .label { color:var(--black); }.footer h2 { font-size:clamp(72px,9vw,140px); }.footer h2 em { color:var(--orange); }.contact { align-self:end; font:13px/1.8 var(--mono); }.contact a { color:var(--black); 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; } }