@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@300;400;500&family=Fraunces:opsz,wght@9..144,300;9..144,600&family=Manrope:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,500;1,500&family=Space+Grotesk:wght@300;400;500;600&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--sans,Manrope,Arial,sans-serif);background:var(--bg);color:var(--fg);overflow-x:hidden}a{color:inherit;text-decoration:none}.concept-nav{height:92px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:var(--rule,1px solid currentColor);position:relative;z-index:5}.mini-logo{display:flex;align-items:center;gap:12px;font:10px var(--mono,DM Mono,monospace);text-transform:uppercase}.mini-logo img{width:44px;height:44px;object-fit:cover;border-radius:var(--logo-radius,0)}.concept-nav>p{font:10px var(--mono,DM Mono,monospace);letter-spacing:.1em}.concept-nav>div{display:flex;gap:25px;font:10px var(--mono,DM Mono,monospace);text-transform:uppercase}.concept-hero{min-height:calc(100vh - 92px);padding:7vw 4vw;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;position:relative;overflow:hidden}.hero-copy{position:relative;z-index:2}.index,.approach-intro>span,.manifest>span{font:10px var(--mono,DM Mono,monospace);text-transform:uppercase;letter-spacing:.12em}.hero-copy h1{font:var(--hero-weight,400) clamp(62px,8.5vw,132px)/var(--hero-line,.88) var(--display,var(--sans));letter-spacing:var(--hero-track,-.065em);margin:8vh 0 5vh;max-width:1000px}.hero-copy>p{font-size:17px;line-height:1.6;max-width:500px}.hero-link{margin-top:6vh;display:inline-flex;gap:30px;align-items:center;border:var(--button-border,1px solid currentColor);padding:15px 20px;font:10px var(--mono,monospace);text-transform:uppercase}.brand-visual{position:relative;display:grid;place-items:center;z-index:1}.brand-visual img{width:min(42vw,570px);aspect-ratio:1;object-fit:cover;border-radius:var(--image-radius,0);box-shadow:var(--image-shadow,none);animation:drift 7s ease-in-out infinite}.orbit{position:absolute;width:115%;aspect-ratio:1;border:var(--orbit-rule,1px solid currentColor);border-radius:50%;opacity:.25;animation:spin 15s linear infinite}@keyframes drift{50%{transform:translateY(-12px) rotate(1deg)}}@keyframes spin{to{transform:rotate(360deg)}}.marquee{overflow:hidden;border-top:var(--rule,1px solid currentColor);border-bottom:var(--rule,1px solid currentColor);padding:18px 0;font:12px var(--mono,monospace);white-space:nowrap}.marquee div{width:max-content;animation:marquee 24s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}.approach{padding:10vw 4vw;display:grid;grid-template-columns:1fr 1.4fr;gap:10vw}.approach-intro h2{font:var(--section-weight,400) clamp(45px,6vw,90px)/.98 var(--display,var(--sans));letter-spacing:-.05em;margin:4vw 0}.approach-intro h2 em,.manifest h2 em{font-family:var(--accent,var(--display));color:var(--accent-color,currentColor)}.approach-intro>p{max-width:540px;line-height:1.7}.principles{align-self:end}.principles article{border-top:var(--rule,1px solid currentColor);padding:28px 0;display:grid;grid-template-columns:50px 1fr 1fr;gap:25px;align-items:start}.principles b{font:10px var(--mono,monospace)}.principles h3{font:400 24px/1.1 var(--display,var(--sans));margin:0}.principles p{font-size:13px;line-height:1.6;margin:0;opacity:.7}.manifest{min-height:85vh;padding:10vw 4vw;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--panel);color:var(--panel-fg)}.manifest h2{font:var(--section-weight,400) clamp(50px,8vw,120px)/.9 var(--display,var(--sans));letter-spacing:-.06em;margin:6vh 0}.final{padding:9vw 4vw;display:flex;justify-content:space-between;align-items:end}.final p{font:var(--section-weight,400) clamp(35px,5vw,70px)/1 var(--display,var(--sans));max-width:700px;margin:0}.final a{font:11px var(--mono,monospace);border-bottom:1px solid;padding-bottom:8px}footer{padding:28px 4vw;border-top:var(--rule,1px solid currentColor);display:flex;justify-content:space-between;font:9px var(--mono,monospace);text-transform:uppercase}
/* 01 — Hypergrid */
.hypergrid{--bg:#050606;--fg:#edf0e8;--panel:#c8ff36;--panel-fg:#050606;--accent-color:#c8ff36;--display:Space Grotesk;--sans:Space Grotesk;--hero-weight:300;--rule:1px solid #343832;--orbit-rule:1px solid #c8ff36}.hypergrid .concept-hero{background-image:linear-gradient(#18201855 1px,transparent 1px),linear-gradient(90deg,#18201855 1px,transparent 1px);background-size:52px 52px}.hypergrid .brand-visual img{mix-blend-mode:screen;border-radius:50%}.hypergrid .hero-copy h1{max-width:900px}.hypergrid .index{color:#c8ff36}.hypergrid .manifest h2 em{color:#050606}
/* 02 — Soft Matter */
.soft{--bg:#fff4e8;--fg:#432f3d;--panel:#b899d2;--panel-fg:#2e2030;--accent-color:#f56f5e;--display:Fraunces;--sans:Space Grotesk;--image-radius:42% 58% 55% 45%;--logo-radius:50%;--button-border:0;--rule:2px solid #432f3d20;--image-shadow:0 30px 80px #e36f5d44;--hero-line:.92;--hero-track:-.045em}.soft .concept-nav{margin:18px 3vw;border:0;background:#fff9;border-radius:999px;padding:0 25px;height:70px}.soft .concept-hero{padding-top:4vw}.soft .hero-link{background:#f58270;border-radius:999px;padding:18px 28px}.soft .brand-visual:before{content:'';position:absolute;width:78%;aspect-ratio:1;background:#f7ce55;border-radius:45% 55% 36% 64%;transform:translate(14%,-7%) rotate(20deg)}.soft .approach{background:#f8d777;border-radius:60px;margin:4vw}.soft .principles article{background:#fff8;border:0;border-radius:25px;padding:25px;margin:12px 0}.soft .manifest{margin:0 4vw 4vw;border-radius:60px}.soft .manifest h2 em{color:#f7d758}
/* 03 — Signal */
.signal{--bg:#f5f5f2;--fg:#111;--panel:#ed1515;--panel-fg:#fff;--accent-color:#ed1515;--display:Manrope;--sans:Manrope;--hero-weight:700;--section-weight:700;--hero-line:.82;--hero-track:-.075em;--rule:2px solid #111;--orbit-rule:2px solid #ed1515}.signal .concept-nav,.signal .concept-hero,.signal .approach,.signal footer{background-image:linear-gradient(90deg,transparent calc(50% - 1px),#111 50%,transparent calc(50% + 1px))}.signal .brand-visual img{border:2px solid #111}.signal .hero-copy h1{text-transform:uppercase}.signal .hero-link{background:#ed1515;color:white;border:0}.signal .marquee{background:#111;color:white}.signal .principles article{grid-template-columns:55px 1.2fr 1fr}.signal .manifest h2{text-transform:uppercase}.signal .manifest h2 em{color:#111;font-style:normal;text-decoration:underline}
/* 04 — Deep Field */
.deep{--bg:#020716;--fg:#e8edff;--panel:#071d65;--panel-fg:#eef2ff;--accent-color:#5580ff;--display:Space Grotesk;--sans:Space Grotesk;--hero-weight:300;--rule:1px solid #718aff33;--orbit-rule:1px solid #6a8fff;--image-radius:50%;--image-shadow:0 0 120px #154cff66}.deep .concept-nav{position:absolute;width:100%;border-color:#ffffff25}.deep .concept-hero{min-height:100vh;text-align:center;grid-template-columns:1fr}.deep .hero-copy{display:flex;flex-direction:column;align-items:center}.deep .hero-copy h1{max-width:1050px;margin-bottom:4vh}.deep .brand-visual{position:absolute;inset:0;opacity:.46}.deep .brand-visual img{width:min(78vw,900px)}.deep .hero-copy>p{max-width:600px}.deep .hero-link{border-radius:999px}.deep .approach{background:linear-gradient(180deg,#020716,#071d65)}.deep .manifest{background:radial-gradient(circle at 50% 20%,#2457cc,#06113a 55%)}.deep .manifest h2 em{color:#99b1ff}
/* 05 — Living systems */
.living{--bg:#eeeadd;--fg:#263828;--panel:#283e2d;--panel-fg:#f2eedf;--accent-color:#77952c;--display:Fraunces;--sans:Manrope;--rule:1px solid #26382866;--image-radius:50% 38% 52% 42%;--hero-track:-.04em}.living:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.living .concept-nav{border:0}.living .brand-visual:after{content:'';position:absolute;width:110%;height:80%;border:1px solid #688343;border-radius:50%;transform:rotate(-15deg)}.living .hero-link{border-radius:999px;background:#263828;color:#eeeadd}.living .approach{border-radius:50% 50% 0 0;background:#d8d9ad;padding-top:14vw}.living .principles article{border-color:#263828}.living .manifest{align-items:flex-start;text-align:left}.living .manifest h2 em{color:#aeca59}
/* 06 — Raw interface */
.raw{--bg:#e9e5dc;--fg:#0c0c0b;--panel:#ff5a0a;--panel-fg:#090909;--accent-color:#ff5a0a;--display:Archivo Black;--sans:Arial,sans-serif;--mono:DM Mono;--hero-weight:400;--section-weight:400;--hero-line:.8;--hero-track:-.065em;--rule:4px solid #0c0c0b;--orbit-rule:4px solid #ff5a0a}.raw .concept-nav{height:78px}.raw .mini-logo img{border:3px solid #0c0c0b}.raw .concept-hero{padding:3vw 4vw}.raw .hero-copy h1{text-transform:uppercase;max-width:900px}.raw .hero-copy>p{font-weight:700}.raw .brand-visual img{border:4px solid #0c0c0b;transform:rotate(3deg);box-shadow:18px 18px 0 #ff5a0a}.raw .hero-link{background:#0c0c0b;color:#fff;border:0}.raw .marquee{background:#0c0c0b;color:white}.raw .approach{gap:4vw}.raw .principles article{grid-template-columns:55px 1fr;border:4px solid;margin-bottom:-4px;padding:25px}.raw .principles article p{grid-column:2}.raw .manifest h2{text-align:left}.raw .manifest h2 em{font-style:normal;color:#0c0c0b;-webkit-text-stroke:2px #e9e5dc}.raw .final{background:#0c0c0b;color:white}
/* 07 — Chrome club */
.chrome{--bg:#071174;--fg:#e9f7ff;--panel:#00d9ff;--panel-fg:#06106d;--accent-color:#00e5ff;--display:Space Grotesk;--sans:Space Grotesk;--rule:1px solid #bdefff55;--image-radius:32px;--image-shadow:0 30px 100px #00e1ff55;--hero-weight:500}.chrome{background:radial-gradient(circle at 80% 10%,#243dff,#071174 45%,#03052b)}.chrome .concept-nav{margin:18px 3vw;border:1px solid #fff4;border-radius:20px;background:#ffffff10;backdrop-filter:blur(12px);height:70px;padding:0 22px}.chrome .brand-visual:before{content:'';position:absolute;width:95%;height:95%;background:#00cfff;border-radius:50%;filter:blur(90px);opacity:.3}.chrome .hero-copy h1{text-shadow:0 4px 0 #001040}.chrome .hero-link{border-radius:12px;background:#00d9ff;color:#071174;border:0;font-weight:bold}.chrome .approach{margin:4vw;border:1px solid #fff4;background:#ffffff0b;backdrop-filter:blur(12px);border-radius:30px}.chrome .principles article{border:1px solid #fff3;border-radius:18px;padding:24px;margin:12px 0;background:#ffffff09}.chrome .manifest h2 em{color:#071174}.chrome .final{background:linear-gradient(90deg,#283dff,#9000ff)}
/* 08 — Atelier */
.atelier{--bg:#4b080d;--fg:#f0e4cd;--panel:#e8ddc6;--panel-fg:#4b080d;--accent-color:#cba55b;--display:Playfair Display;--sans:Manrope;--hero-weight:500;--hero-line:.92;--hero-track:-.04em;--rule:1px solid #d8c39f55;--image-radius:50% 50% 0 0}.atelier .concept-nav{height:110px}.atelier .concept-hero{grid-template-columns:1fr 1fr}.atelier .hero-copy h1{font-style:italic}.atelier .brand-visual img{width:min(36vw,500px)}.atelier .brand-visual:before{content:'ATELIER XP';position:absolute;top:-40px;letter-spacing:.5em;font:9px DM Mono;z-index:2}.atelier .hero-link{border:0;border-bottom:1px solid #cba55b;padding-left:0}.atelier .marquee{font-family:Playfair Display;font-style:italic;font-size:18px}.atelier .approach-intro h2,.atelier .manifest h2{font-style:italic}.atelier .principles h3{font-family:Playfair Display;font-style:italic}.atelier .manifest h2 em{color:#8b1b24}.atelier .final{min-height:55vh}
/* 09 — Play mode */
.play{--bg:#dff2ff;--fg:#10224e;--panel:#ff6c17;--panel-fg:#10224e;--accent-color:#ff2b91;--display:Space Grotesk;--sans:Space Grotesk;--hero-weight:600;--rule:0;--image-radius:36px;--image-shadow:12px 12px 0 #103cda;--button-border:0}.play .concept-nav{margin:14px 3vw;background:white;border-radius:18px;height:68px;padding:0 20px}.play .mini-logo img{border-radius:12px}.play .concept-hero:before,.play .concept-hero:after{content:'';position:absolute;border-radius:50%;background:#ff2b91;width:80px;height:80px;left:42%;top:13%}.play .concept-hero:after{background:#ffd329;width:140px;height:50px;border-radius:99px;left:12%;top:auto;bottom:10%;transform:rotate(-18deg)}.play .hero-link{background:#173be0;color:white;border-radius:999px;padding:18px 28px}.play .marquee{background:#173be0;color:white;border:0;transform:rotate(-1deg)}.play .approach{padding-top:6vw}.play .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.play .principles article{display:block;border:0;border-radius:24px;padding:30px;min-height:260px;background:#fff}.play .principles article:nth-child(2){background:#ffd329}.play .principles article:nth-child(3){background:#ff9cc8}.play .principles h3{margin:50px 0 20px}.play .manifest{margin:4vw;border-radius:45px}.play .manifest h2 em{color:#dff2ff}.play .final{background:#ffd329;margin:0 4vw 4vw;border-radius:45px}
/* 10 — Blueprint */
.blueprint{--bg:#06264b;--fg:#77f2ff;--panel:#77f2ff;--panel-fg:#06264b;--accent-color:#fff;--display:Space Grotesk;--sans:DM Mono;--mono:DM Mono;--hero-weight:300;--rule:1px solid #77f2ff88;--orbit-rule:1px dashed #77f2ff;--image-radius:0}.blueprint{background-image:linear-gradient(#2a668355 1px,transparent 1px),linear-gradient(90deg,#2a668355 1px,transparent 1px);background-size:32px 32px}.blueprint .concept-nav{background:#06264bee}.blueprint .concept-hero{min-height:calc(100vh - 92px)}.blueprint .brand-visual img{border:1px solid #77f2ff}.blueprint .brand-visual:before,.blueprint .brand-visual:after{content:'';position:absolute;background:#77f2ff;z-index:2}.blueprint .brand-visual:before{width:120%;height:1px}.blueprint .brand-visual:after{height:120%;width:1px}.blueprint .hero-copy h1{font-family:DM Mono;letter-spacing:-.07em}.blueprint .hero-link{background:#77f2ff;color:#06264b}.blueprint .approach{background:#06264be8}.blueprint .principles article{border-style:dashed}.blueprint .manifest h2 em{color:#06264b;text-decoration:underline}.blueprint footer{background:#06264b}
@media(max-width:780px){.concept-nav{height:76px;padding:0 5vw}.concept-nav>p{display:none}.concept-nav>div a:first-child{display:none}.mini-logo img{width:38px;height:38px}.concept-hero{min-height:900px;padding:12vw 5vw;display:flex;flex-direction:column;align-items:stretch}.hero-copy h1{font-size:16vw;margin:10vh 0 5vh}.hero-copy>p{font-size:15px}.brand-visual{margin:8vh auto 0}.brand-visual img{width:75vw}.approach{grid-template-columns:1fr;padding:20vw 5vw;gap:15vw}.approach-intro h2{font-size:14vw;margin:10vw 0}.principles article{grid-template-columns:38px 1fr}.principles article p{grid-column:2}.manifest{min-height:70vh;padding:20vw 5vw}.manifest h2{font-size:14vw}.final{padding:20vw 5vw;display:block}.final p{font-size:12vw;margin-bottom:15vw}.final a{font-size:9px}footer{gap:25px;flex-wrap:wrap}footer span{width:100%}.soft .concept-nav,.chrome .concept-nav,.play .concept-nav{margin:10px;height:62px}.soft .concept-hero,.chrome .concept-hero,.play .concept-hero{padding-top:15vw}.soft .approach,.chrome .approach,.play .manifest,.play .final{margin:3vw;border-radius:30px}.signal .concept-nav,.signal .concept-hero,.signal .approach,.signal footer{background-image:none}.deep .concept-hero{display:flex}.deep .brand-visual{margin:0;position:absolute}.raw .concept-hero{padding:10vw 5vw}.raw .brand-visual img{box-shadow:10px 10px 0 #ff5a0a}.atelier .concept-nav{height:76px}.atelier .concept-hero{grid-template-columns:1fr}.atelier .brand-visual img{width:70vw}.living .approach{border-radius:80px 80px 0 0}.play .principles{grid-template-columns:1fr}.play .principles article{min-height:220px}.blueprint .hero-copy h1{font-size:14vw}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.brand-visual img,.orbit,.marquee div{animation:none}}