@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { --ink:#eaf0f7; --muted:#9aaabc; --night:#07111f; --night-2:#0b1828; --line:rgba(230,239,247,.13); --gold:#f2ba48; --gold-light:#ffe5a5; --coral:#fb826a; --paper:#f2eee6; --serif:'Playfair Display', Georgia, serif; --sans:'Manrope', Arial, sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--night); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; overflow-x:hidden; } a { color:inherit; text-decoration:none; } .grain { pointer-events:none; position:fixed; inset:0; z-index:10; opacity:.045; 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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); } .site-header, .hero, .section, footer { max-width:1440px; margin:auto; padding-left:clamp(24px, 5vw, 80px); padding-right:clamp(24px, 5vw, 80px); }
.site-header { height:100px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:3; } .brand { font-weight:800; letter-spacing:-.06em; font-size:1.05rem; display:inline-flex; align-items:center; gap:10px; } .brand > span:last-child span { color:var(--gold); } .brand-mark { display:grid; place-items:center; width:28px; height:28px; background:var(--gold); color:#142335; font-family:var(--mono); font-size:.63rem; font-weight:500; letter-spacing:-.1em; transform:rotate(-8deg); border-radius:8px 10px 9px 5px; }
nav { display:flex; align-items:center; gap:clamp(22px,3vw,48px); font:500 .78rem var(--mono); letter-spacing:.03em; color:#c6d1dd; } nav a:not(.nav-contact) { transition:color .2s; } nav a:not(.nav-contact):hover { color:var(--gold); }.language-switcher { display:flex; align-items:center; gap:5px; color:#71869a; }.language-option { appearance:none; border:0; padding:5px 0; background:transparent; color:inherit; cursor:pointer; font:500 .72rem var(--mono); letter-spacing:.08em; transition:color .2s; }.language-option:hover, .language-option:focus-visible { color:var(--gold-light); outline:none; }.language-option[aria-pressed="true"] { color:var(--gold); }.nav-contact { color:#102032; background:var(--gold); padding:11px 15px; border-radius:999px; transition:transform .2s, background .2s; }.nav-contact:hover { transform:translateY(-2px); background:#ffd57b; }.menu-button { display:none; }
.hero { min-height:calc(100vh - 100px); position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; padding-top:45px; padding-bottom:105px; } .hero-copy { position:relative; z-index:2; max-width:670px; } .eyebrow, .section-kicker { margin:0; color:var(--gold); font:500 .72rem var(--mono); letter-spacing:.13em; }.eyebrow span { display:inline-block; width:8px; height:8px; margin-right:9px; background:var(--gold); border-radius:50%; box-shadow:0 0 14px rgba(242,186,72,.75); }.hero h1, h2 { letter-spacing:-.07em; line-height:.98; }.hero h1 { margin:25px 0 28px; font-size:clamp(3.8rem,6.3vw,7.2rem); font-weight:700; }.hero h1 em, h2 em { font-family:var(--serif); font-weight:600; color:var(--gold-light); }.hero-lede { max-width:490px; color:var(--muted); font-size:1.08rem; line-height:1.8; margin:0; }.hero-actions { display:flex; gap:14px; margin-top:38px; }.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:17px; padding:0 20px; border-radius:4px; font-size:.88rem; font-weight:700; transition:transform .2s, border-color .2s; }.button:hover { transform:translateY(-2px); }.primary { background:var(--gold); color:#122136; }.quiet { border:1px solid var(--line); color:#dce4ec; }.quiet:hover { border-color:rgba(242,186,72,.6); }
.hero-art { align-self:stretch; min-height:520px; display:grid; place-items:center; position:relative; overflow:visible; }.hero-art::before { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(242,186,72,.17) 0%,rgba(242,186,72,.045) 38%,transparent 70%); }.hero-art img { position:relative; z-index:1; width:min(540px, 100%); max-height:650px; object-fit:contain; mix-blend-mode:screen; filter:drop-shadow(0 32px 30px rgba(0,0,0,.33)); }.orbit { position:absolute; border:1px solid rgba(242,186,72,.23); border-radius:50%; }.orbit-one { width:470px; height:215px; transform:rotate(-34deg); }.orbit-two { width:360px; height:490px; transform:rotate(38deg); border-color:rgba(236,241,247,.12); }.orb { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--coral); box-shadow:0 0 20px var(--coral); top:24%; right:17%; }.art-caption { position:absolute; z-index:2; right:-20px; bottom:8%; writing-mode:vertical-rl; font:500 .65rem var(--mono); letter-spacing:.16em; color:#b7c4d1; }.art-caption span { color:var(--gold); font-size:1.1rem; }.scroll-note { display:flex; align-items:center; gap:13px; position:absolute; bottom:35px; left:clamp(24px,5vw,80px); color:#7e90a3; font:500 .62rem var(--mono); letter-spacing:.15em; }.scroll-note b { color:var(--gold); font-size:1rem; animation:bob 1.8s infinite ease-in-out; } @keyframes bob { 50% { transform:translateY(5px); } }
.section { padding-top:140px; padding-bottom:140px; }.intro { border-top:1px solid var(--line); }.intro-statement { display:grid; grid-template-columns:1.45fr .55fr; align-items:end; gap:60px; margin-top:38px; }.intro h2, .now-header h2, .lab h2, .contact h2 { font-size:clamp(2.55rem, 4.3vw, 5.3rem); margin:0; }.intro-statement > p { margin:0 0 8px; color:var(--muted); font-size:1.02rem; line-height:1.85; }.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:90px; }.principles article { border-top:1px solid var(--line); padding-top:18px; }.number, .card-index, .card-type { font:500 .68rem var(--mono); letter-spacing:.12em; }.number { color:var(--gold); }.principles h3 { font-size:1.55rem; letter-spacing:-.06em; margin:19px 0 7px; }.principles p { color:var(--muted); font-size:.9rem; margin:0; max-width:280px; }
.now-section { background:var(--paper); color:#142334; max-width:none; padding-left:max(clamp(24px,5vw,80px), calc((100vw - 1280px)/2)); padding-right:max(clamp(24px,5vw,80px), calc((100vw - 1280px)/2)); }.now-section .section-kicker { color:#9b6b17; }.now-header { display:flex; justify-content:space-between; align-items:flex-end; margin:38px 0 65px; }.live-dot { color:#687481; font:500 .7rem var(--mono); }.live-dot::before { content:''; display:inline-block; width:7px; height:7px; margin-right:8px; background:#5e976e; border-radius:50%; }.now-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:14px; }.now-card { min-height:340px; position:relative; padding:28px; background:#dde5e9; display:flex; flex-direction:column; color:#162737; overflow:hidden; transition:transform .25s ease; }.now-card:hover { transform:translateY(-6px); }.now-card.featured { background:#18334a; color:#f7f7f1; }.now-card.warm { background:#e9c870; }.card-index { color:#b8821c; }.featured .card-index { color:var(--gold); }.card-type { margin:42px 0 13px; color:#698196; }.featured .card-type { color:#b7c6d1; }.now-card h3 { margin:0; font-size:clamp(1.45rem,2vw,2.25rem); line-height:1.14; letter-spacing:-.06em; }.card-copy { max-width:250px; color:#536574; font-size:.88rem; line-height:1.7; margin-top:auto; margin-bottom:0; }.featured .card-copy { color:#b9c4cf; }.card-arrow { position:absolute; top:24px; right:26px; font-size:1.4rem; color:#7791a7; }.featured .card-arrow { color:var(--gold); }
.lab { position:relative; overflow:hidden; }.lab::after { content:'✦'; position:absolute; right:4%; top:130px; color:rgba(242,186,72,.12); font-size:18rem; line-height:1; }.lab-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin:37px 0 76px; position:relative; z-index:1; }.lab-heading p { max-width:290px; color:var(--muted); margin:0 0 5px; }.empty-lab { position:relative; z-index:1; min-height:285px; border:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,5vw,70px); background:linear-gradient(115deg,rgba(22,42,60,.55), rgba(10,24,39,.22)); }.sparkle { color:var(--gold); font-size:2.5rem; }.empty-lab h3 { font-size:clamp(1.5rem,2.5vw,2.5rem); letter-spacing:-.06em; margin:14px 0 3px; }.empty-lab p { color:var(--muted); margin:0; }
.contact { padding:140px clamp(24px, 5vw, 80px); background:var(--gold); color:#132438; text-align:center; }.contact .eyebrow { color:#6d4b13; }.contact .eyebrow span { background:#6d4b13; box-shadow:none; }.contact h2 { margin:25px 0 42px; }.contact h2 em { color:#53401a; }.mail-link { display:inline-block; border-bottom:1px solid rgba(19,36,56,.6); padding-bottom:8px; font-size:clamp(1.1rem,2vw,1.6rem); font-weight:700; letter-spacing:-.04em; transition:padding .2s; }.mail-link:hover { padding-left:9px; }.mail-link span { margin-left:11px; }
footer { min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#90a1b2; font-size:.72rem; } footer p { margin:0; } footer > a:last-child { font:500 .68rem var(--mono); color:#bac7d3; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:760px) { .site-header { height:76px; }.menu-button { display:flex; flex-direction:column; justify-content:center; gap:6px; width:42px; height:42px; border:1px solid var(--line); background:transparent; border-radius:50%; }.menu-button i { display:block; width:16px; height:1px; margin:auto; background:var(--ink); transition:transform .2s; }.menu-button i + i { margin-top:0; } nav { display:none; position:absolute; top:68px; right:24px; width:190px; padding:20px; background:#102033; border:1px solid var(--line); flex-direction:column; align-items:stretch; gap:17px; box-shadow:0 15px 30px rgba(0,0,0,.25); } nav.open { display:flex; }.nav-contact { text-align:center; }.hero { min-height:auto; display:flex; flex-direction:column; padding-top:65px; padding-bottom:98px; }.hero h1 { font-size:clamp(3.25rem,15vw,5.5rem); }.hero-art { width:100%; min-height:390px; margin-top:25px; }.hero-art img { max-height:420px; }.orbit-one { width:330px; height:160px; }.orbit-two { width:270px; height:350px; }.art-caption { right:0; }.scroll-note { bottom:34px; }.section { padding-top:95px; padding-bottom:95px; }.intro-statement, .lab-heading { display:block; }.intro-statement > p, .lab-heading p { margin-top:28px; }.principles { grid-template-columns:1fr; gap:34px; margin-top:62px; }.now-header { display:block; margin-bottom:40px; }.live-dot { display:block; margin-top:24px; }.now-grid { grid-template-columns:1fr; }.now-card { min-height:290px; }.now-section { padding-top:95px; padding-bottom:95px; }.lab-heading { margin-bottom:48px; }.contact { padding-top:100px; padding-bottom:100px; }.contact h2 { font-size:clamp(2.4rem,12vw,4rem); } footer { min-height:145px; flex-wrap:wrap; padding-top:30px; padding-bottom:30px; } footer p { order:3; flex-basis:100%; } }
@media (max-width:760px) { .language-switcher { padding:7px 0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }