:root { color-scheme: dark; --ink:#111014; --paper:#efe8dc; --coral:#ff5c4d; --acid:#d8ff65; }
* { box-sizing:border-box; }
html { background:var(--ink); }
body { margin:0; min-height:100svh; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; }
.studio-noise { position:fixed; inset:0; pointer-events:none; opacity:.16; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.studio-header,.studio-footer { display:flex; justify-content:space-between; align-items:center; padding:24px clamp(20px,4vw,56px); position:relative; z-index:2; }
.studio-wordmark { color:inherit; text-decoration:none; font:400 clamp(24px,3vw,34px)/1 "Italiana",serif; letter-spacing:-.03em; }
.studio-wordmark span { color:var(--coral); }
.studio-contact,.studio-cta { color:inherit; font-size:14px; font-weight:600; text-underline-offset:6px; }
.studio-hero { min-height:calc(100svh - 155px); padding:clamp(70px,12vh,140px) clamp(20px,8vw,120px) 80px; position:relative; isolation:isolate; overflow:hidden; }
.studio-kicker { text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:600; margin:0 0 28px; }
.studio-hero h1 { font:400 clamp(76px,15vw,210px)/.76 "Italiana",serif; letter-spacing:-.065em; margin:0; max-width:1100px; }
.studio-hero h1 em { color:var(--coral); font-weight:400; }
.studio-intro { width:min(430px,85vw); margin:clamp(45px,7vh,90px) 0 30px auto; font-size:clamp(18px,2vw,25px); line-height:1.35; }
.studio-cta { display:flex; gap:16px; justify-content:flex-end; align-items:center; text-decoration:none; }
.studio-cta span { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--acid); transition:transform .3s; }
.studio-cta:hover span { transform:translateX(6px) rotate(-15deg); }
.studio-orbit { position:absolute; z-index:-1; border:1px solid rgba(17,16,20,.18); border-radius:50%; animation:orbit 16s linear infinite; }
.orbit-one { width:360px; height:360px; top:8%; right:-120px; }
.orbit-two { width:180px; height:180px; top:25%; right:-30px; animation-direction:reverse; }
.studio-orbit::before { content:""; position:absolute; width:18px; height:18px; border-radius:50%; background:var(--acid); top:18px; left:60px; }
.studio-services { background:var(--ink); color:var(--paper); display:grid; grid-template-columns:repeat(3,1fr); padding:30px clamp(20px,4vw,56px); gap:24px; }
.studio-services p { margin:0; font:400 clamp(20px,3vw,42px)/1 "Italiana",serif; }
.studio-footer { background:var(--ink); color:#8f8b88; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
@keyframes orbit { to { transform:rotate(360deg); } }
@media (max-width:640px) { .studio-contact { font-size:0; } .studio-contact span { font-size:22px; } .studio-hero h1 { font-size:clamp(72px,25vw,118px); } .studio-intro { margin-left:0; } .studio-cta { justify-content:flex-start; } .studio-services { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }