:root { --ink:#080b10; --paper:#e8e9e4; --muted:#9da39c; --lime:#c7ff55; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--ink); color:var(--paper); font-family:Manrope,Arial,sans-serif; } .hero { min-height:100svh; position:relative; overflow:hidden; padding:30px 4.5vw; display:flex; flex-direction:column; justify-content:center; } nav { position:absolute; inset:30px 4.5vw auto; display:flex; justify-content:space-between; align-items:center; z-index:2; } .wordmark,.nav-link,.action { color:inherit; text-decoration:none; } .wordmark { font:500 12px 'DM Mono',monospace; letter-spacing:.12em; } .wordmark span { color:var(--lime); } .nav-link { font:500 12px 'DM Mono',monospace; } .nav-link i { color:var(--lime); font-style:normal; } .hero-copy { position:relative; z-index:1; width:min(700px,100%); animation:rise .9s cubic-bezier(.2,.8,.2,1) both; } .eyebrow,.section-label,.coordinates { color:var(--muted); font:400 10px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; } h1 { font-size:clamp(58px,10vw,155px); line-height:.86; letter-spacing:-.09em; margin:18px 0 30px; font-weight:800; } h1 em { color:var(--lime); font-weight:500; } .lede { max-width:340px; font-size:16px; line-height:1.6; color:#c3c6c0; margin:0 0 34px; } .action { display:inline-flex; gap:26px; border-bottom:1px solid #55604b; padding-bottom:12px; font-size:13px; font-weight:600; } .action span { color:var(--lime); } .coordinates { position:absolute; right:4.5vw; bottom:30px; text-align:right; line-height:1.8; } .orbital-field { position:absolute; width:min(76vw,900px); aspect-ratio:1; right:-9vw; top:50%; transform:translateY(-50%); opacity:.86; } .orbit { border:1px solid rgba(199,255,85,.22); border-radius:50%; position:absolute; inset:0; animation:spin 30s linear infinite; } .orbit-b { inset:13%; border-color:rgba(232,233,228,.16); animation-duration:23s; animation-direction:reverse; } .orbit-c { inset:29%; border-color:rgba(199,255,85,.36); animation-duration:18s; } .core { position:absolute; width:12px; aspect-ratio:1; border-radius:50%; background:var(--lime); top:50%; left:50%; box-shadow:0 0 60px 23px rgba(199,255,85,.28); } .signal { position:absolute; width:6px; aspect-ratio:1; border-radius:50%; background:var(--paper); box-shadow:0 0 18px 3px rgba(232,233,228,.6); } .signal-a { top:14%; left:50%; } .signal-b { bottom:21%; right:14%; background:var(--lime); } .manifesto,.areas,.contact { padding:160px 4.5vw; border-top:1px solid #222830; display:grid; grid-template-columns:22% 1fr; gap:20px; } h2 { margin:0; max-width:900px; font-size:clamp(34px,5.4vw,84px); line-height:1.03; letter-spacing:-.065em; } .manifesto div > p { max-width:410px; color:#adb1aa; line-height:1.7; font-size:15px; margin:42px 0 0; } .areas { background:var(--paper); color:var(--ink); }.areas .section-label { color:#5c625b; }.area-list { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }.area-list article { border-top:1px solid #abb0a8; padding-top:16px; min-height:250px; display:flex; flex-direction:column; }.area-list span { font:11px 'DM Mono',monospace; color:#60655e; }.area-list h3 { font-size:clamp(25px,3vw,42px); line-height:1; letter-spacing:-.065em; margin:32px 0 auto; }.area-list p { max-width:220px; font-size:13px; line-height:1.6; color:#555b53; }.contact { min-height:70svh; align-items:start; position:relative; }.contact-kicker { color:var(--muted); font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.12em; }.contact a { color:var(--paper); text-decoration:none; font-size:clamp(28px,5vw,70px); line-height:1.1; letter-spacing:-.06em; font-weight:600; }.contact a span { color:var(--lime); }.copyright { position:absolute; bottom:30px; left:4.5vw; color:var(--muted); font:10px 'DM Mono',monospace; } @keyframes spin { to { transform:rotate(360deg); } } @keyframes rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } } @media (max-width:700px) { .hero { padding:24px 6vw; justify-content:flex-end; padding-bottom:120px; }.orbital-field { width:125vw; right:-50vw; top:35%; opacity:.52; }nav { inset:24px 6vw auto; }.coordinates { left:6vw; right:auto; bottom:26px; text-align:left; }.manifesto,.areas,.contact { padding:85px 6vw; grid-template-columns:1fr; gap:38px; }.area-list { grid-template-columns:1fr; gap:48px; }.area-list article { min-height:200px; }.contact { min-height:58svh; }.copyright { left:6vw; } }

.services { padding:clamp(110px,14vw,220px) 4.5vw; background:#11161c; }
.services-intro { display:grid; grid-template-columns:22% minmax(0,1fr); gap:20px; align-items:start; }
.services h2 { max-width:920px; }
.services-intro > p:last-child { grid-column:2; max-width:430px; color:#adb1aa; line-height:1.7; font-size:15px; margin:36px 0 0; }
.service-list { margin:clamp(72px,10vw,150px) 0 0 22%; border-top:1px solid #38404a; }
.service-list article { display:grid; grid-template-columns:16% minmax(220px,1fr) minmax(230px,34%); gap:28px; padding:28px 0 34px; border-bottom:1px solid #38404a; transition:padding .35s ease, color .35s ease; }
.service-list article:hover { color:var(--lime); padding-left:16px; padding-right:16px; }
.service-index { margin:4px 0 0; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.1em; }
.service-list h3 { margin:0; font-size:clamp(28px,3.5vw,54px); line-height:.96; letter-spacing:-.065em; }
.service-list article > p:last-child { margin:3px 0 0; color:#adb1aa; font-size:14px; line-height:1.65; }
@media (min-width: 1500px) { .hero { padding-left:7vw; padding-right:7vw; } nav { inset-left:7vw; inset-right:7vw; } .coordinates { right:7vw; } .manifesto,.areas,.contact,.services { padding-left:7vw; padding-right:7vw; } .hero-copy { width:min(820px,100%); } .service-list { margin-left:24%; } .copyright { left:7vw; } }
@media (max-width:700px) { .services { padding:85px 6vw; } .services-intro { grid-template-columns:1fr; gap:32px; } .services-intro > p:last-child { grid-column:auto; margin:0; } .service-list { margin:64px 0 0; } .service-list article { grid-template-columns:1fr; gap:18px; padding:24px 0 30px; } .service-list article > p:last-child { max-width:330px; } .service-list article:hover { padding-left:0; padding-right:0; } }