:root { --ink:#090b0f; --paper:#f1f1ee; --blue:#2058ff; --silver:#bec7d4; --line:rgba(241,241,238,.18); --muted:#959da9; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--ink); } body { margin:0; overflow-x:hidden; color:var(--paper); background:var(--ink); font-family:Manrope,Arial,sans-serif; } a { color:inherit; text-decoration:none; }
.grain { inset:0; position:fixed; pointer-events:none; z-index:10; opacity:.035; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.cursor-glow { position:fixed; top:0; left:0; width:36rem; height:36rem; border-radius:50%; pointer-events:none; z-index:0; background:radial-gradient(circle,rgba(32,88,255,.12),transparent 65%); transform:translate(-50%,-50%); transition:transform .12s linear; }
.site-header { position:absolute; z-index:5; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:2rem clamp(1.25rem,4vw,4.6rem); mix-blend-mode:screen; font-size:.76rem; font-weight:600; letter-spacing:-.02em; }
.brand { display:flex; align-items:center; gap:1.35rem; }.brand-mark { font:500 1.8rem/1 Unbounded,sans-serif; letter-spacing:-.16em; }.brand-name { border-left:1px solid rgba(241,241,238,.45); padding-left:1.35rem; }.site-header nav { display:flex; gap:2.8rem; color:#d8dbe0; }.site-header nav a,.header-link { transition:color .25s; }.site-header nav a:hover,.header-link:hover { color:#5f83ff; }.header-link span { margin-left:.35rem; color:#5580ff; }
.hero { position:relative; display:grid; grid-template-columns:1.1fr .9fr; min-height:100svh; overflow:hidden; isolation:isolate; padding:clamp(7rem,14vh,10rem) clamp(1.25rem,7vw,8.2rem) 4rem; }.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); }.hero-copy { z-index:2; align-self:center; }.hero-intro,.section-index { color:var(--muted); font-size:.67rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }.hero-intro { margin:0 0 1.7rem; }.hero-title,.display { margin:0; font-family:Unbounded,sans-serif; font-weight:500; letter-spacing:-.075em; }.hero-title { max-width:52rem; font-size:clamp(2.7rem,6.3vw,7.1rem); line-height:.96; }.hero-title em,.display span { font-style:normal; color:var(--blue); }.button { display:inline-flex; align-items:center; justify-content:space-between; min-width:12rem; gap:2.4rem; padding:.95rem 1.2rem 1rem 1.35rem; margin-top:2.3rem; font-size:.86rem; font-weight:700; border-radius:999px; transition:transform .3s ease,box-shadow .3s ease,background .3s ease; }.button-primary { color:white; background:var(--blue); box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 8px 28px rgba(32,88,255,.25); }.button:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 14px 38px rgba(32,88,255,.38); }.button span { font-size:1.2rem; line-height:.7; }
.hero-art { position:absolute; inset:0 0 0 43%; z-index:1; overflow:hidden; }.sculpture { position:absolute; width:min(57vw,57rem); min-width:42rem; height:auto; top:50%; right:-4vw; transform:translateY(-48%) rotate(1deg); mix-blend-mode:screen; filter:contrast(1.13) saturate(1.1); animation:float 10s ease-in-out infinite; }.orbit { position:absolute; border:1px solid rgba(74,121,255,.4); border-radius:50%; filter:drop-shadow(0 0 7px rgba(42,90,255,.35)); }.orbit-one { width:58vw; height:24vw; top:27%; left:-10%; transform:rotate(-28deg); animation:orbit 15s linear infinite; }.orbit-two { width:43vw; height:17vw; top:54%; left:4%; transform:rotate(38deg); animation:orbit-reverse 18s linear infinite; }.orbit-three { width:27vw; height:11vw; top:38%; left:16%; transform:rotate(68deg); border-color:rgba(228,240,255,.25); animation:orbit 11s linear infinite; }.art-caption { position:absolute; bottom:13%; left:9%; font-size:.59rem; letter-spacing:.26em; color:#aeb6c3; writing-mode:vertical-rl; transform:rotate(180deg); }.scroll-cue { position:absolute; bottom:2.1rem; z-index:2; display:flex; align-items:center; gap:.8rem; color:var(--muted); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; }.scroll-cue span { width:2.7rem; height:1px; background:var(--muted); position:relative; }.scroll-cue span::after { content:""; position:absolute; right:0; top:-3px; border:4px solid transparent; border-left-color:var(--muted); }
.statement { position:relative; min-height:82vh; padding:8rem clamp(1.25rem,7vw,8.2rem); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }.statement-body { display:grid; grid-template-columns:1.15fr .5fr; align-items:end; gap:2rem; padding-left:9vw; }.display { font-size:clamp(2.5rem,5.6vw,6.3rem); line-height:.99; }.statement-copy { max-width:26rem; margin:0 0 .5rem; color:#c2c8d0; font-size:clamp(1rem,1.3vw,1.28rem); line-height:1.55; }.kinetic-line { width:100%; height:1px; background:var(--line); position:relative; overflow:visible; }.kinetic-line::before,.kinetic-line::after { content:""; position:absolute; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px rgba(32,88,255,.14),0 0 24px 7px rgba(32,88,255,.55); }.kinetic-line::before { width:.75rem;height:.75rem; top:-.35rem; left:22%; }.kinetic-line::after { width:.36rem;height:.36rem; top:-.13rem; left:77%; background:#fff; }.kinetic-line i { display:block; width:31%; height:1px; background:var(--blue); transform:translateX(-100%); transition:transform 2s cubic-bezier(.2,.8,.2,1); }.statement.in-view .kinetic-line i { transform:translateX(300%); }
.approach { position:relative; padding:7rem clamp(1.25rem,7vw,8.2rem) 12rem; overflow:hidden; background:linear-gradient(145deg,#0d1118 0%,#090b0f 74%); }.approach-head { display:flex; justify-content:space-between; align-items:flex-start; }.approach-head .display { text-align:right; }.principles { position:relative; z-index:1; margin:10rem 0 3.2rem 22%; max-width:57rem; border-top:1px solid var(--line); }.principle { display:grid; grid-template-columns:5rem 1.1fr 1.25fr; align-items:baseline; gap:1.5rem; padding:1.75rem 0; border-bottom:1px solid var(--line); transition:padding .35s ease, color .35s ease; }.principle:hover { padding-left:1rem; color:#7897ff; }.principle-number { color:var(--blue); font-family:Unbounded,sans-serif; font-size:.67rem; }.principle h3 { margin:0; font:500 clamp(1.45rem,2.4vw,2.7rem)/1 Unbounded,sans-serif; letter-spacing:-.07em; }.principle p { max-width:22rem; color:#aeb5c0; margin:0; font-size:.93rem; line-height:1.55; }.route-map { position:absolute; inset:auto 0 0; height:25rem; opacity:.85; pointer-events:none; }.route-map svg { position:absolute; inset:0; width:100%; height:100%; }.route-map path { fill:none; stroke:var(--blue); stroke-width:2; stroke-dasharray:10 13; stroke-linecap:round; animation:dash 12s linear infinite; filter:drop-shadow(0 0 6px var(--blue)); }.route-dot { position:absolute; width:.8rem;height:.8rem;border-radius:50%; background:white; box-shadow:0 0 0 5px rgba(32,88,255,.2),0 0 18px rgba(32,88,255,.8); left:53%;top:53%; animation:pulse 2.7s ease-in-out infinite; }
.contact { position:relative; min-height:88vh; display:flex; flex-direction:column; justify-content:center; padding:7rem clamp(1.25rem,7vw,8.2rem); overflow:hidden; }.contact-copy { position:relative; z-index:1; }.contact .display { font-size:clamp(2.8rem,6.1vw,7rem); }.monogram { position:absolute; right:3vw; top:51%; transform:translateY(-50%); font:500 clamp(12rem,35vw,39rem)/.7 Unbounded,sans-serif; letter-spacing:-.18em; color:transparent; -webkit-text-stroke:1px rgba(205,218,239,.22); opacity:.85; animation:monogram-drift 10s ease-in-out infinite; }.contact-note { position:absolute; right:8vw; bottom:10%; color:var(--muted); font-size:.85rem; }.contact-note::before { content:""; display:inline-block; width:2rem; height:1px; margin:0 .8rem .25rem 0; background:var(--blue); }
footer { display:flex; justify-content:space-between; padding:1.6rem clamp(1.25rem,4vw,4.6rem); border-top:1px solid var(--line); color:var(--muted); font-size:.68rem; } footer a:hover { color:white; } footer a span { color:var(--blue); margin-left:.35rem; }
.reveal { opacity:0; transform:translateY(2.5rem); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.75,.2,1); }.reveal.show { opacity:1; transform:none; }.principle:nth-child(2) { transition-delay:.12s; }.principle:nth-child(3) { transition-delay:.24s; }
@keyframes float { 0%,100% { transform:translateY(-48%) rotate(1deg) scale(1); } 50% { transform:translateY(-52%) rotate(-2deg) scale(1.025); } } @keyframes orbit { to { transform:rotate(332deg); } } @keyframes orbit-reverse { to { transform:rotate(-322deg); } } @keyframes dash { to { stroke-dashoffset:-276; } } @keyframes pulse { 50% { transform:scale(1.7); opacity:.6; } } @keyframes monogram-drift { 50% { transform:translateY(-49%) translateX(-1.3vw); opacity:.56; } }
@media (max-width: 760px) { .site-header { padding:1.4rem 1.25rem; }.brand-name,.site-header nav { display:none; }.header-link { font-size:.68rem; }.hero { display:block; min-height:100svh; padding:7.3rem 1.25rem 6.5rem; }.hero-copy { position:relative; z-index:2; }.hero-title { font-size:clamp(2.65rem,12vw,4.1rem); }.hero-art { inset:30% -55% -2% -25%; opacity:.8; }.sculpture { min-width:31rem; width:115vw; top:55%; right:-20%; }.orbit-one { width:135vw; height:58vw; }.orbit-two { width:100vw; height:45vw; }.orbit-three { width:60vw; height:25vw; }.art-caption { display:none; }.scroll-cue { bottom:2rem; }.statement { min-height:75svh; padding:5rem 1.25rem; }.statement-body { display:block; padding-left:0; }.statement-copy { margin-top:3rem; }.approach { padding:5rem 1.25rem 8rem; }.approach-head { display:block; }.approach-head .display { text-align:left; margin-top:2.5rem; }.principles { margin:6rem 0 2rem; }.principle { grid-template-columns:2.3rem 1fr; gap:.85rem; }.principle p { grid-column:2; font-size:.86rem; }.route-map { height:16rem; }.contact { min-height:76svh; padding:5rem 1.25rem; }.monogram { top:52%; right:-3rem; font-size:14rem; }.contact-note { left:1.25rem; right:auto; bottom:3rem; }.cursor-glow { display:none; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }