:root { --ink:#f8f7f4; --paper:#050505; --acid:#d84d6b; --line:rgba(248,247,244,.25); --mono:"SFMono-Regular",Consolas,monospace; --sans:Inter,"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
.grain { pointer-events:none; position:fixed; inset:0; opacity:.11; z-index:8; mix-blend-mode:multiply; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); }
.site-header { height:78px; padding:0 30px; position:absolute; top:0; width:100%; z-index:10; display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:800; font-size:22px; letter-spacing:-1.9px; }.brand span { color:#ff4e31; }
.header-actions { display:flex; align-items:center; gap:28px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.01em; text-transform:uppercase; }.language-switch,.menu-toggle { min-height:44px; border:0; padding:0; background:transparent; cursor:pointer; }.language-switch { display:flex; gap:6px; align-items:center; }.language-current { font-weight:700; border-bottom:1px solid currentColor; padding-bottom:2px; }.language-next,.language-divider { opacity:.58; }.menu-toggle { display:flex; gap:8px; align-items:center; }.menu-mark { font-size:19px; line-height:12px; }
.site-nav { align-items:start; background:var(--acid); display:none; grid-template-columns:repeat(3,1fr); left:0; min-height:100vh; padding:130px 30px 30px; position:fixed; top:0; width:100%; z-index:9; }.site-nav.is-open { display:grid; }.site-nav a { font-size:clamp(34px,6vw,84px); line-height:.95; font-weight:700; letter-spacing:-.07em; }.site-nav p { grid-column:1/-1; align-self:end; font:500 11px var(--sans); }
.hero { min-height:100svh; background:radial-gradient(circle at 65% 13%, rgba(168,84,225,.82) 0 10%, transparent 28%), radial-gradient(circle at 89% 40%, rgba(68,177,205,.85) 0, transparent 38%), radial-gradient(circle at 35% 44%, rgba(216,57,91,.88) 0, transparent 43%), radial-gradient(circle at 4% 43%, #0a0708 0, transparent 34%), #090809; position:relative; overflow:hidden; padding:148px 30px 30px; display:flex; flex-direction:column; justify-content:space-between; }.eyebrow,.section-label { font:600 12px/1.2 var(--sans); letter-spacing:.015em; margin:0; text-transform:uppercase; }.hero h1 { position:relative; z-index:2; max-width:900px; margin:8vh 0 auto; font-family:"Helvetica Neue","Arial Nova",Arial,"PingFang SC","Microsoft YaHei",sans-serif; font-size:clamp(55px,6.8vw,110px); font-weight:500; letter-spacing:-.07em; line-height:.91; }.hero h1 em { color:#fff; font-style:normal; }.hero-footer { z-index:2; display:flex; align-items:end; justify-content:space-between; }.hero-footer p { max-width:290px; font-size:14px; line-height:1.55; margin:0; }.round-link { width:64px; height:64px; display:grid; place-items:center; background:var(--ink); color:#090809; border-radius:50%; font-size:24px; transition:transform .25s; }.round-link:hover { transform:rotate(45deg); }.orbit { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.34); }.orbit-one { height:70vw; width:70vw; max-width:900px; max-height:900px; right:-15vw; top:-27vw; }.orbit-two { height:38vw; width:38vw; max-width:510px; max-height:510px; right:2vw; top:-14vw; border-width:27px; border-color:rgba(249,242,255,.2); background:linear-gradient(145deg,rgba(255,91,109,.25),rgba(89,100,238,.25) 55%,rgba(78,208,201,.2)); backdrop-filter:blur(8px); }
.statement { display:grid; grid-template-columns:1fr 2fr; gap:20px; padding:130px 30px 150px; background:#050505; }.statement h2,.section-heading h2,.contact h2 { font-size:clamp(46px,6vw,88px); letter-spacing:-.08em; line-height:.95; margin:0 0 42px; }.statement-copy { font-size:19px; line-height:1.55; max-width:530px; margin:0 0 38px; color:rgba(248,247,244,.78); }.text-link { display:inline-flex; align-items:center; gap:30px; padding-bottom:8px; border-bottom:1px solid var(--ink); font-size:13px; font-weight:700; }.text-link b { font-size:18px; }
.work { background:#0a090c; color:#f5f4ed; padding:28px 30px 130px; overflow:hidden; }.section-heading { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:80px; }.section-heading h2 { margin:0; }.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:42px 20px; }.project { display:block; min-width:0; }.project:last-child { grid-column:2; }.project-art { aspect-ratio:16 / 10; min-height:380px; overflow:hidden; position:relative; display:grid; place-items:center; transition:transform .4s cubic-bezier(.2,.8,.2,1); }.project:hover .project-art { transform:scale(.985); }.project-art span { z-index:2; font-weight:800; letter-spacing:-.1em; }.project-art i { position:absolute; border-radius:50%; }.art-cobalt { background:radial-gradient(circle at 70% 30%,#7759d7,transparent 35%),#14244a; color:#f6c4e7; }.art-cobalt span { font-size:clamp(140px,24vw,400px); transform:rotate(-18deg); }.art-cobalt i { width:42%; aspect-ratio:1; background:#ec4d76; right:14%; bottom:13%; }.art-coral { background:radial-gradient(circle at 20% 25%,#e26685,transparent 34%),linear-gradient(135deg,#6e2151,#40215e); color:#f9f5ef; }.art-coral span { font:clamp(90px,15vw,250px)/1 var(--mono); transform:rotate(90deg); }.art-coral i { width:75%; aspect-ratio:1; border:34px solid rgba(248,247,244,.8); top:-18%; }.art-lime { background:radial-gradient(circle at 80% 70%,#4597b2,transparent 37%),linear-gradient(135deg,#4b307e,#8a397a); color:#f5d5eb; }.art-lime span { font-size:clamp(55px,8vw,140px); transform:rotate(-9deg); }.art-lime i { width:40%; aspect-ratio:1; border:20px solid #f4cae7; right:8%; top:14%; }.project-meta { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); align-items:start; gap:16px; min-width:0; padding-top:12px; }.project-meta p { min-width:0; font:500 11px/1.2 var(--sans); margin:0; letter-spacing:.01em; }.project-meta h3 { min-width:0; font-size:15px; font-weight:500; line-height:1.35; margin:0; overflow-wrap:anywhere; text-align:right; }
.services { padding:130px 30px; display:grid; grid-template-columns:1fr 2fr; background:#050505; }.services ul { margin:0; padding:0; list-style:none; }.services li { border-top:1px solid var(--line); display:flex; gap:25%; padding:20px 0; font-size:clamp(21px,3vw,39px); letter-spacing:-.06em; }.services li span:first-child { font:10px var(--mono); padding-top:7px; letter-spacing:0; }
.contact { background:radial-gradient(circle at 85% 26%,rgba(81,183,203,.82),transparent 36%),radial-gradient(circle at 43% 41%,rgba(168,71,176,.82),transparent 38%),linear-gradient(110deg,#2a101a,#8a2f57 46%,#213d49); padding:30px 30px 20px; min-height:93vh; display:flex; flex-direction:column; }.contact-content { flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }.contact h2 { margin:0 0 48px; max-width:970px; }.contact-note { font-size:clamp(18px,3vw,32px); letter-spacing:-.055em; margin:0; max-width:540px; }footer { display:flex; justify-content:space-between; gap:20px; font:500 11px var(--sans); letter-spacing:.01em; }
@media (max-width:700px) { .site-header,.hero,.statement,.work,.services,.contact { padding-left:18px; padding-right:18px; }.site-header { padding-top:2px; }.hero { min-height:720px; padding-top:130px; }.hero h1 { margin-top:80px; font-size:clamp(52px,9.5vw,72px); }.orbit-one { width:105vw; height:105vw; right:-36vw; top:-10vw; }.orbit-two { width:60vw; height:60vw; right:-2vw; top:5vw; border-width:15px; }.statement,.services { grid-template-columns:1fr; gap:50px; padding-top:86px; padding-bottom:90px; }.statement h2,.section-heading h2,.contact h2 { font-size:clamp(46px,7.5vw,54px); }.statement-copy { font-size:16px; }.section-heading { display:block; padding-bottom:50px; }.section-heading .section-label { margin-bottom:50px; }.project-grid { grid-template-columns:minmax(0,1fr); gap:35px; }.project:last-child { grid-column:auto; }.project-art { min-height:330px; }.project-meta { display:block; }.project-meta h3 { text-align:left; margin-top:7px; }.services li { gap:20%; font-size:26px; }.contact { min-height:680px; }.site-nav { grid-template-columns:1fr; gap:18px; padding-left:18px; }.header-actions { gap:18px; } }