@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root { --lime:#cfff32; --ink:#f2efe8; --muted:rgba(242,239,232,.67); --line:rgba(255,255,255,.22); --sans:Manrope,Arial,sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; } body { margin:0; background:#090a09; color:var(--ink); font-family:var(--sans); }
.site-shell { min-height:100svh; isolation:isolate; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; padding:0 clamp(24px,5vw,76px); position:relative; }
.concepts,.concept,.veil { position:absolute; inset:0; }.concepts { z-index:-3; background:#0c0d0c; }.concept { opacity:0; background-size:cover; background-position:center; transition:opacity 1.5s ease; transform:scale(1.01); }.concept.active { opacity:1; }.concept-1 { background-image:url('rassets/concept-01-infrastructure-clean.png'); }.concept-2 { background-image:url('rassets/concept-02-index-clean.png'); }.concept-3 { background-image:url('rassets/concept-03-atelier-clean.png'); }.veil { z-index:-2; background:linear-gradient(90deg,rgba(7,8,7,.76) 0%,rgba(7,8,7,.23) 57%,rgba(7,8,7,.1) 100%); pointer-events:none; }
.site-shell.mode-2 { --ink:#171310; --muted:rgba(23,19,16,.7); --line:rgba(23,19,16,.28); --lime:#b82c15; }.site-shell.mode-2 .veil { background:linear-gradient(90deg,rgba(255,247,236,.15) 0%,rgba(255,247,236,.05) 58%,transparent 100%); }.site-shell.mode-2 .primary-link { background:rgba(255,247,236,.22); }.site-shell.mode-2 .primary-link:hover { background:var(--lime); color:#fffaf2; }
header { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .wordmark { color:var(--ink); text-decoration:none; font-size:15px; font-weight:800; letter-spacing:.19em; }.wordmark span { color:var(--lime); } nav { display:flex; gap:clamp(16px,2.5vw,43px); } nav a,.back { color:var(--ink); text-decoration:none; font:10px var(--mono); letter-spacing:.14em; opacity:.82; transition:opacity .2s; } nav a:hover,.back:hover { opacity:1; color:var(--lime); }
.hero { align-self:center; padding:70px 0 48px; max-width:720px; }.kicker { font:11px var(--mono); letter-spacing:.16em; color:var(--lime); margin:0 0 22px; }.hero h1,.contact-intro h1 { font-size:clamp(58px,8.1vw,122px); font-weight:600; letter-spacing:-.08em; line-height:.86; margin:0; text-wrap:balance; }.statement { max-width:420px; line-height:1.72; color:var(--muted); font-size:15px; margin:31px 0 30px; }.primary-link, .contact-form button { display:inline-flex; align-items:center; gap:25px; color:var(--ink); text-decoration:none; border:1px solid var(--lime); padding:14px 17px; background:rgba(9,10,9,.28); font:11px var(--mono); letter-spacing:.09em; transition:background .2s,color .2s; }.primary-link:hover,.contact-form button:hover { background:var(--lime); color:#0b0d08; }.primary-link span,.contact-form button span{font-size:18px;line-height:10px}
footer { border-top:1px solid var(--line); padding:20px 0 24px; display:flex; align-items:center; gap:32px; font:10px var(--mono); letter-spacing:.1em; }.status{display:flex;gap:10px;align-items:center;color:var(--muted)}.status span:first-child{width:7px;height:7px;background:var(--lime);border-radius:50%;box-shadow:0 0 13px var(--lime)} footer p{margin:0;color:var(--muted);flex:1}.pager{display:flex;gap:8px}.pager button{width:27px;height:2px;padding:0;border:0;background:rgba(255,255,255,.35);cursor:pointer}.pager button.active{background:var(--lime)}
.contact-page { min-height:100svh; background:radial-gradient(circle at 78% 15%,#3c1d20 0,transparent 27%),linear-gradient(130deg,#100d15,#0d0d10 58%,#1b151d); }.contact-shell { max-width:1280px; margin:auto; min-height:100svh; padding:0 clamp(24px,5vw,76px) 70px; }.contact-intro { margin:clamp(62px,10vh,125px) 0 48px; max-width:780px; }.contact-intro>p:last-child { max-width:420px; color:var(--muted);line-height:1.7;margin:28px 0 0; }.contact-form { width:min(100%,670px); display:grid; gap:18px; }.contact-form label { font:10px var(--mono); letter-spacing:.13em; color:var(--muted); display:grid; gap:9px; }.contact-form input,.contact-form textarea { background:rgba(10,10,11,.38); border:1px solid rgba(255,255,255,.24); color:var(--ink); padding:14px 15px; font:14px var(--sans); outline:0; resize:vertical; }.contact-form input:focus,.contact-form textarea:focus{border-color:var(--lime)}.contact-form button { justify-self:start; cursor:pointer; margin-top:5px; }.form-note { color:var(--muted);font-size:12px;margin:0; }.form-note code{color:var(--lime)}
@media (max-width:650px) { header{height:74px}.site-shell{padding:0 23px}.wordmark{font-size:12px}nav{gap:12px}nav a{font-size:8px}.hero h1,.contact-intro h1{font-size:61px}.hero{padding:82px 0}.statement{font-size:14px}footer{align-items:flex-start;flex-wrap:wrap;gap:18px}.pager{order:-1;width:100%}.contact-shell{padding:0 24px 45px}.contact-intro{margin-top:68px} }