:root { --ink:#f4f6f8; --muted:#949daa; --bg:#070b12; --panel:#0d131d; --line:rgba(255,255,255,.11); --violet:#725cff; --mint:#4ce2bd; --blue:#3699ff; --coral:#ff668a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font-family:"DM Sans",sans-serif; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"); }
a { color:inherit; text-decoration:none; }
.ambient { position:absolute; width:620px; height:620px; border-radius:50%; filter:blur(140px); opacity:.13; pointer-events:none; }
.ambient-one { background:linear-gradient(135deg,var(--violet),var(--blue),var(--coral)); right:-230px; top:-150px; opacity:.18; }
.ambient-two { background:linear-gradient(135deg,var(--mint),var(--blue),var(--violet)); left:-410px; top:620px; opacity:.11; }
.site-header, main, footer { width:min(1180px, calc(100% - 48px)); margin:auto; position:relative; z-index:2; }
.energy-spine { position:absolute; z-index:1; width:120px; top:105px; bottom:90px; right:max(70px,calc((100vw - 1160px) / 2)); opacity:.42; pointer-events:none; overflow:hidden; mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent); -webkit-mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent); }
.energy-spine svg { width:100%; height:100%; overflow:visible; }
.spine-shadow,.spine-line { fill:none; stroke-linecap:round; }
.spine-shadow { stroke:#3699ff; stroke-width:14; opacity:.08; filter:url(#spineGlow); }
.spine-line { stroke:url(#spineGradient); stroke-width:1.4; stroke-dasharray:3 7; filter:url(#spineGlow); }
.vertebrae path { fill:none; stroke:url(#spineGradient); stroke-width:1.4; opacity:.65; }
.signal { fill:#f5ffff; filter:url(#spineGlow); }
.signal-two { fill:var(--mint); }.signal-three { fill:var(--violet); }
.site-header { height:134px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:22px; font-family:Manrope,sans-serif; font-size:26px; font-weight:700; letter-spacing:.14em; }
.brand-mark { width:60px; color:var(--ink); }
.brand small { display:block; font-size:11px; letter-spacing:.36em; color:var(--muted); margin-top:4px; }
.header-link { color:#cdd2d9; font-size:14px; transition:color .2s; }
.header-link:hover { color:var(--mint); }
.header-link span { margin-left:7px; }
.hero { padding:38px 0 62px; }
.eyebrow, .section-label { color:#aab1bc; text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:600; }
.eyebrow { display:flex; align-items:center; gap:10px; }
.eyebrow span { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 16px var(--mint); }
h1, h2, h3 { font-family:Manrope,sans-serif; margin:0; }
h1 { font-size:clamp(55px,8.2vw,112px); line-height:.96; letter-spacing:-.065em; max-width:1000px; margin-top:27px; }
h1 em { color:transparent; font-style:normal; -webkit-text-stroke:1px transparent; background:linear-gradient(100deg,#7160ff 5%,#459eff 42%,#4ce2bd 76%,#ff668a); background-clip:text; -webkit-background-clip:text; }
.hero-copy { color:#a6aeba; font-size:clamp(17px,2vw,21px); line-height:1.65; max-width:590px; margin:36px 0 38px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:30px; height:53px; padding:0 23px; border:1px solid var(--line); font-size:14px; transition:transform .2s,background .2s,border-color .2s; }
.button:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.35); }
.button-primary { background:var(--ink); color:#090d14; border-color:var(--ink); font-weight:600; }
.button-quiet { color:#c6ccd4; }
.projects { padding:66px 0 72px; border-top:1px solid var(--line); }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:58px; }
.project-card { min-height:450px; padding:26px; border:1px solid var(--line); background:rgba(13,19,29,.88); display:flex; flex-direction:column; overflow:hidden; position:relative; transition:transform .25s,border-color .25s; }
.project-card:hover { transform:translateY(-5px); border-color:rgba(255,255,255,.3); }
.project-card::before { content:""; position:absolute; width:390px; height:390px; border-radius:50%; filter:blur(90px); opacity:.22; pointer-events:none; }
.chrono::before { background:linear-gradient(135deg,var(--blue),var(--violet)); right:-150px; top:40px; }
.pipspeak::before { background:linear-gradient(135deg,var(--mint),var(--coral)); left:-140px; top:70px; }
.project-meta { display:flex; justify-content:space-between; color:#75808d; font:600 9px Manrope,sans-serif; letter-spacing:.15em; position:relative; z-index:2; }
.project-meta span:last-child { color:#a9b2be; }
.project-art { flex:1; position:relative; min-height:250px; }
.orbit { position:absolute; border:1px solid rgba(255,255,255,.24); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-18deg); }
.orbit-a { width:265px; height:110px; }.orbit-b { width:210px; height:210px; }.orbit-c { width:110px; height:265px; }
.map-pin { position:absolute; width:54px; height:54px; border-radius:50% 50% 50% 10%; background:linear-gradient(135deg,var(--mint),var(--blue)); left:50%; top:49%; transform:translate(-50%,-50%) rotate(-45deg); box-shadow:0 0 45px rgba(76,226,189,.35); }
.map-pin span { position:absolute; width:16px; height:16px; background:var(--bg); border-radius:50%; left:19px; top:19px; }
.sound-art { display:flex; justify-content:center; align-items:center; gap:13px; }
.sound-art span { width:10px; height:42px; border-radius:10px; background:linear-gradient(to top,var(--violet),var(--blue),var(--mint)); box-shadow:0 0 22px rgba(54,153,255,.25); }
.sound-art span:nth-child(2),.sound-art span:nth-child(6){height:92px}.sound-art span:nth-child(3),.sound-art span:nth-child(5){height:155px}.sound-art span:nth-child(4){height:225px;background:linear-gradient(to top,var(--violet),var(--coral),var(--mint))}
.project-copy { position:relative; z-index:2; border-top:1px solid var(--line); padding-top:22px; }
.project-copy h3 { font-size:27px; letter-spacing:-.035em; }.project-copy p { color:var(--muted); margin:8px 0 0; font-size:14px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:50px; }
.section-heading h2 { font-size:clamp(38px,5vw,64px); letter-spacing:-.055em; margin-top:15px; }
.section-heading > p { color:var(--muted); max-width:380px; line-height:1.7; margin:0 0 5px; }
.contact { padding:72px 0 78px; text-align:center; border-top:1px solid var(--line); }
.contact h2 { font-size:clamp(48px,7.5vw,94px); line-height:1.02; letter-spacing:-.06em; margin:28px 0 38px; }
.contact a { display:inline-block; font-size:clamp(16px,2vw,20px); color:var(--mint); border-bottom:1px solid rgba(76,226,189,.35); padding-bottom:7px; }
.contact a span { margin-left:10px; }
footer { height:100px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#69727e; font-size:12px; }
@media (max-width:760px) { .site-header, main, footer { width:min(calc(100% - 32px),1180px); }.energy-spine{right:2px;opacity:.28}.site-header{height:108px}.hero{padding:30px 0 50px}h1{font-size:clamp(48px,14vw,72px);overflow-wrap:anywhere}.hero-copy{max-width:100%}.project-grid{grid-template-columns:1fr}.section-heading{align-items:start;flex-direction:column}.projects{padding:54px 0}.project-card{min-height:410px}.project-art{min-height:225px}.contact{padding:62px 0 68px}footer{height:90px}.header-link{font-size:0}.header-link span{font-size:18px}.brand{font-size:19px;gap:15px}.brand-mark{width:46px}.brand small{font-size:8px} }
@media (max-width:520px) { .hero-actions{flex-direction:column}.button{width:100%}.signal-card{margin-top:60px}.section-heading{gap:24px}.contact a{overflow-wrap:anywhere}footer span:last-child{display:none} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.button{transition:none}.signal animateMotion{display:none} }