
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#0c0c0c;--fg:#f3eee7;--muted:#9e9992;--line:#2b2927;--accent:#d5a66a}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:Manrope,Arial,sans-serif}
a{color:inherit;text-decoration:none}.nav{position:fixed;z-index:20;top:0;left:0;right:0;padding:22px 4vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#0c0c0cdd,transparent);backdrop-filter:blur(5px)}
.brand{font-weight:800;letter-spacing:-.04em;font-size:20px}.brand span{font-weight:400}
.links{display:flex;gap:28px;font:12px "DM Mono",monospace;letter-spacing:.08em}.links a:hover{color:var(--accent)}
.lang{border:1px solid var(--line);padding:8px 11px;font:11px "DM Mono",monospace}.lang a{opacity:.6}.lang a.active{opacity:1;color:var(--accent)}
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1.1fr;gap:5vw;align-items:center;padding:130px 7vw 80px;overflow:hidden}
.eyebrow{font:12px "DM Mono",monospace;color:var(--accent);letter-spacing:.16em;text-transform:uppercase}.hero h1{font-size:clamp(70px,10vw,170px);line-height:1.00;letter-spacing:-.08em;margin:20px 0 35px}.hero h1 em{font-style:normal;color:var(--accent)}.hero p{font-size:18px;max-width:480px;color:#c3beb8;line-height:1.65}
.cta{display:flex;gap:12px;margin-top:35px}.btn{padding:14px 20px;border:1px solid #5a5148;font:12px "DM Mono",monospace;letter-spacing:.08em}.btn.primary{background:var(--fg);color:#111;border-color:var(--fg)}.btn:hover{transform:translateY(-2px)}
.hero-art{position:relative;min-height:650px;display:flex;align-items:center;justify-content:center}
.hero-lens{width:min(620px,85%);aspect-ratio:1/1;overflow:hidden}
.hero-lens img{width:100%;height:100%;display:block;object-fit:cover}
.hero-art .tag{position:absolute;right:0;bottom:8%;font:11px "DM Mono",monospace;writing-mode:vertical-rl;color:#aaa}
.section{padding:130px 7vw}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:48px}.kicker{font:11px "DM Mono",monospace;color:var(--accent);letter-spacing:.14em}.section h2{font-size:clamp(42px,6vw,86px);line-height:.9;letter-spacing:-.06em;margin:10px 0 0}.section-note{color:var(--muted);max-width:340px;line-height:1.6;font-size:14px}
.rail-wrap{overflow:hidden;margin:0 -7vw;padding:0 7vw}.rail{display:flex;gap:18px;width:max-content;animation:drift 38s linear infinite}.rail:hover{animation-play-state:paused}.card{width:min(31vw,430px);aspect-ratio:4/5;position:relative;overflow:hidden;background:#171717;flex:none}.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s}.card:hover img{transform:scale(1.035)}.label{position:absolute;left:18px;bottom:18px;background:#0c0c0ce8;padding:9px 11px;font:10px "DM Mono",monospace;letter-spacing:.08em}
@keyframes drift{to{transform:translateX(-50%)}}
.work-cats{display:flex;gap:18px;margin:35px 0 0;font:11px "DM Mono",monospace;color:#777;flex-wrap:wrap}.work-cats span{color:var(--fg)}
.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.service{padding:40px 30px 50px 0;border-bottom:1px solid var(--line)}.service:not(:last-child){border-right:1px solid var(--line);padding-right:40px}.service+ .service{padding-left:40px}.num{font:11px "DM Mono",monospace;color:var(--accent)}.service h3{font-size:32px;margin:55px 0 22px;letter-spacing:-.04em}.service p{color:var(--muted);line-height:1.7;font-size:14px}.service .list{margin-top:30px;color:#d3cec7;font:12px "DM Mono",monospace;line-height:2}
.manifesto{min-height:72vh;display:flex;align-items:center;background:#e8e1d8;color:#111;margin-top:40px}.manifesto h2{
    font-size:clamp(48px,8vw,125px);
    line-height:1.02;
    letter-spacing:-.045em;
    max-width:1050px;
    margin-top:20px;
}.manifesto h2 span{color:#9b6842}.manifesto p{max-width:600px;font-size:17px;line-height:1.7;margin-top:50px}
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}.step{padding:45px 30px 20px 0;border-bottom:1px solid var(--line)}.step:not(:last-child){border-right:1px solid var(--line);padding-right:35px}.step+.step{padding-left:35px}.step h3{font-size:25px;margin:25px 0 12px}.step p{color:var(--muted);line-height:1.7;font-size:14px}
.contact{min-height:80vh;display:flex;align-items:center;justify-content:space-between;gap:40px}.contact h2{
    font-size:clamp(55px,9vw,145px);
    line-height:1.05;
    letter-spacing:-.055em;
    margin:0;
    max-width:100%;
    overflow-wrap:break-word;
}.contact h2 em{font-style:normal;color:var(--accent)}.contact-side{max-width:350px}.email{font-size:22px;border-bottom:1px solid #5a5148;padding-bottom:10px;display:inline-block;margin:25px 0}.social{display:flex;gap:20px;font:11px "DM Mono",monospace;color:#aaa}
footer{padding:30px 7vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#777;font:10px "DM Mono",monospace}
@media(max-width:800px){
    .links{display:none}

    .hero{
        grid-template-columns:minmax(0,1fr);
        padding-top:140px;
        width:100%;
    }

    .hero>div,
    .contact>div{
        min-width:0;
        max-width:100%;
    }

    .hero h1{
        font-size:clamp(42px,13vw,72px);
        line-height:.9;
        letter-spacing:-.065em;
        max-width:100%;
    }

    .hero p{
        font-size:17px;
        max-width:100%;
        width:100%;
        line-height:1.6;
    }

    .cta{
        flex-wrap:wrap;
    }

    .btn{
        white-space:nowrap;
    }

    .hero-art{
        min-height:420px;
        width:100%;
    }

    .hero-lens{
        width:min(75vw,420px);
        max-width:100%;
        aspect-ratio:1/1;
    }

    .hero-art .tag{
        right:2%;
    }

    .section{
        padding:90px 6vw;
        max-width:100%;
    }

    .section-head{
        display:block;
    }

    .section-note{
        margin-top:20px;
        max-width:100%;
    }

    .rail-wrap{
        margin:0 -6vw;
        padding:0 6vw;
    }

    .card{
        width:76vw;
    }

    .services,
    .process{
        grid-template-columns:1fr;
    }

    .service,
    .step{
        padding:35px 0!important;
        border-right:0!important;
    }

    .service+.service,
    .step+.step{
        padding-left:0!important;
    }

    .manifesto{
        min-height:65vh;
    }

    .contact{
        display:block;
        padding-top:100px;
        padding-bottom:100px;
        width:100%;
    }
    .contact h2{
    font-size:clamp(42px,12vw,70px);
    line-height:1.05;
    letter-spacing:-.055em;
}

    .contact-side{
        margin-top:60px;
        max-width:100%;
    }

    .email{
        font-size:20px;
        max-width:100%;
        overflow-wrap:anywhere;
    }

    footer{
        display:block;
    }

    footer div+div{
        margin-top:12px;
    }
    .hero-art .tag{
    display:none;
}
}
