/* Preview art direction: warm paper, cobalt, actual products. */ :root { --pad: clamp(28px, 6vw, 112px); } body.is-loading .hero h1 span, body.is-loading .hero-aside { animation-play-state: paused; } .site-header { gap: 24px; } .desktop-nav { gap: clamp(14px, 1.6vw, 28px); } .hero-explore { position: absolute; right: var(--pad); bottom: 48px; width: 132px; height: 132px; color: var(--blue); display: grid; place-items: center; z-index: 7; } .hero-explore svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: orbit-turn 28s linear infinite; } .hero-explore text { font: 9.2px "IBM Plex Mono", monospace; letter-spacing: 1.3px; fill: currentColor; } .hero-explore > span { font-size: 44px; font-weight: 400; transition: transform .35s; } .hero-explore:hover > span { transform: translateY(7px); } .hero-explore:hover svg { animation-play-state: paused; } @keyframes orbit-turn { to { transform: rotate(360deg); } } .manifesto.section-shell { min-height: 720px; border-color: var(--line); } .manifesto-main { padding: clamp(90px, 9vw, 145px) var(--pad); } .manifesto h2 { font-size: clamp(48px, 5.3vw, 86px); } .manifesto-lead { width: 100%; max-width: 640px; line-height: 1.6; } .manifesto-note { background: #e4e7f4; border-color: var(--line); overflow: hidden; } .manifesto-note::before { width: 190px; height: 190px; border-color: rgba(41,54,238,.3); right: -28px; top: 78px; } .manifesto-note::after { width: 190px; height: 190px; border-color: rgba(41,54,238,.3); right: 36px; top: 78px; } .manifesto-note p { position: relative; z-index: 1; font-size: clamp(28px, 2.8vw, 43px); line-height: 1.12; } .capabilities { padding-top: clamp(100px, 10vw, 160px); padding-bottom: clamp(100px, 10vw, 160px); } .capabilities::before { display: none; } .capabilities-heading { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-bottom: 70px; } .capabilities h2 { font-size: clamp(58px, 6.7vw, 104px); line-height: .96; } .capabilities h2 em, .work h2 em { font-family: Georgia, serif; font-weight: 400; color: var(--blue); } .capabilities-intro { max-width: 510px; margin: 0 0 0 auto; font-size: 17px; } .services-composition { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(50px, 8vw, 130px); align-items: center; } .service-universe { position: relative; min-width: 0; padding-bottom: 12px; text-align: center; } .universe-art { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; } .universe-art > img { width: 100%; height: 100%; animation: orbit-turn 65s linear infinite; } .universe-core { position: absolute; width: 25%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #fff 0%, #bfc7fa 24%, #5866f2 48%, #1822b9 75%); box-shadow: inset -8px -8px 22px #1019a644, 15px 24px 35px #2936ee22; transition: transform 1s cubic-bezier(.16,1,.3,1); } .service-universe[data-service="1"] .universe-core { transform: translate(32px,-25px) scale(.8); } .service-universe[data-service="2"] .universe-core { transform: translate(-25px,20px) scale(1.15); } .service-universe[data-service="3"] .universe-core { transform: translate(30px,25px) scale(.9); } .service-universe[data-service="4"] .universe-core { transform: translate(-20px,-30px) scale(.85); } .service-universe[data-service="5"] .universe-core { transform: scale(1.18); } .universe-label { color: var(--blue); } .service-universe p { margin: 20px 0 0; font-size: clamp(28px, 2.8vw, 44px); letter-spacing: -.05em; line-height: 1.12; } .service-universe p em { font-family: Georgia, serif; font-weight: 400; } .service-menu { min-width: 0; border-top: 1px solid var(--line); } .service-detail { border-bottom: 1px solid var(--line); transition: background .3s; } .service-detail summary { display: grid; grid-template-columns: 30px 1fr 28px; align-items: center; gap: 20px; padding: 27px 0; cursor: pointer; list-style: none; } .service-detail summary::-webkit-details-marker { display: none; } .service-detail summary > img { width: 25px; height: 25px; opacity: .7; } .service-detail h3 { margin: 0; font-size: clamp(24px, 2.35vw, 36px); line-height: 1.15; letter-spacing: -.045em; font-weight: 600; } .service-detail summary > span { font-size: 28px; font-weight: 400; transition: transform .3s; text-align: center; } .service-detail[open] summary { color: var(--blue); } .service-detail[open] summary > span { transform: rotate(45deg); } .service-detail summary:hover { color: var(--blue); } .service-description { padding: 0 34px 30px 50px; animation: description-enter .35s ease; } .service-description p { margin: 0 0 22px; max-width: 490px; color: var(--muted); font-size: 16px; line-height: 1.65; } .service-description .mono { display: block; font-size: 9px; line-height: 1.8; color: var(--blue); } @keyframes description-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .work { background: #eeede7; } .work-heading { display: grid; grid-template-columns: 1.4fr .6fr; align-items: end; column-gap: 70px; padding-bottom: 80px; } .work-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 32px; } .work h2 { font-size: clamp(60px, 7vw, 110px); line-height: .98; } .work-intro { margin: 0 0 8px; font-size: 16px; line-height: 1.65; max-width: 360px; } .work-grid { gap: 70px 36px; } .project { min-width: 0; padding: 0; } .project-dapp { grid-column: span 7; } .project-clout { grid-column: span 5; padding-top: 150px; } .project-loan { grid-column: span 7; margin-top: -120px; } .project-neuro { grid-column: span 5; } .project-truth { grid-column: span 7; } .project-studio { grid-column: span 5; padding-top: 90px; } .project-rwa { grid-column: span 8; } .project-wallet { grid-column: span 4; align-self: end; } .project-stage { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 1.28; overflow: hidden; border: 0; } .project-dapp .project-stage { aspect-ratio: 1.12; } .project-clout .project-stage { aspect-ratio: .8; } .project-neuro .project-stage { aspect-ratio: .95; } .project-truth .project-stage { aspect-ratio: 1.15; } .project-studio .project-stage { aspect-ratio: .95; } .project-rwa .project-stage { aspect-ratio: 1.4; } .project-status { position: absolute; z-index: 3; top: 24px; left: 24px; font-size: 9px; letter-spacing: .1em; } .stage-action { position: absolute; z-index: 3; bottom: 20px; right: 20px; display: inline-flex; align-items: center; padding: 11px 17px; border-radius: 30px; color: var(--ink); background: #fff; font-size: 11px; font-weight: 700; transition: color .3s, background .3s, transform .4s; } .project a:hover .stage-action, .project a:focus-visible .stage-action { color: #fff; background: var(--blue); transform: translateY(-4px); } .dapp-stage { background: radial-gradient(ellipse at 30% 30%, #b3cbf4, transparent 60%), #b4b3e8; } .loan-stage { background: radial-gradient(ellipse at 80% 15%, #abc7be, transparent 65%), #c5d7cf; } .truth-stage { background: radial-gradient(ellipse at 75% 15%, #dee6fa, transparent 65%), #bccbe4; } .truth-stage .browser-preview { width: 92%; transform: perspective(1100px) rotateY(-4deg) rotateX(4deg) rotateZ(-2deg) translateY(4%); } .neuro-stage { background: #ccdbdc; } .neuro-statement { position: absolute; left: 8%; top: 13%; color: #193d4a; font-size: clamp(25px, 2.7vw, 43px); font-weight: 600; letter-spacing: -.055em; line-height: 1; } .neuro-statement em, .studio-statement em { font-family: Georgia, serif; font-weight: 400; } .neuro-phone { width: 56%; aspect-ratio: .51; overflow: hidden; border: 6px solid #254652; border-radius: 24px; background: #e8edef; box-shadow: 16px 24px 34px #25465233; transform: rotate(-7deg) translate(4%, 36%); transition: transform .8s cubic-bezier(.16,1,.3,1); } .neuro-phone img { width: 100%; height: auto; } .project a:hover .neuro-phone { transform: rotate(-2deg) translate(4%, 30%); } .studio-stage { background: #c2d2c9; } .studio-statement { position: absolute; top: 12%; left: 8%; color: #173a2e; font-size: clamp(30px, 3.3vw, 53px); letter-spacing: -.055em; line-height: .98; font-weight: 600; } .studio-stage .browser-preview { transform: perspective(1100px) rotateY(-5deg) rotateX(4deg) rotateZ(-3deg) translateY(23%); } .project a:hover .studio-stage .browser-preview, .project a:focus-visible .studio-stage .browser-preview { transform: perspective(1100px) rotateY(0) rotateX(0) rotateZ(0) translateY(23%); } .studio-stage .browser-preview > img { aspect-ratio: 1600 / 741; object-fit: cover; object-position: top; } .rwa-stage { background: radial-gradient(ellipse at 15% 0%, #deeeed, transparent 65%), #b6ccd9; } .rwa-stage .browser-preview { width: 83%; transform: perspective(1100px) rotateY(6deg) rotateX(5deg) rotateZ(3deg) translateY(9%); } .project-rwa h3 { font-size: clamp(28px, 3vw, 45px); } .browser-preview { position: relative; width: 89%; overflow: hidden; border-radius: 7px; background: #101017; box-shadow: 0 35px 55px -15px #1c164454; transform: perspective(1100px) rotateY(-7deg) rotateX(7deg) rotateZ(-3deg) translateY(6%); transition: transform .8s cubic-bezier(.16,1,.3,1); } .loan-stage .browser-preview { transform: perspective(1100px) rotateY(7deg) rotateX(5deg) rotateZ(3deg) translateY(6%); } .project a:hover .browser-preview, .project a:focus-visible .browser-preview { transform: perspective(1100px) rotateY(0) rotateX(0) rotateZ(0); } .browser-preview > img { display: block; width: 100%; height: auto; } .browser-chrome { display: flex; align-items: center; height: 27px; gap: 4px; padding: 0 10px; background: #f7f6f4; } .browser-chrome i { width: 5px; height: 5px; border-radius: 50%; background: #b9b9bd; } .browser-chrome span { flex: 1; padding-right: 25px; text-align: center; font: 8px "IBM Plex Mono", monospace; color: #74737b; } .clout-stage { background: #e9bd82; } .clout-stage::before { position: absolute; width: 115%; aspect-ratio: 1; border: 1px solid #bf8345; border-radius: 50%; content: ""; top: 43%; left: -7%; box-shadow: 0 0 0 35px #e9bd82, 0 0 0 36px #bf834533; } .clout-wordmark { position: absolute; top: 11%; left: 10%; font-size: clamp(30px, 3vw, 48px); line-height: .98; font-weight: 700; letter-spacing: -.055em; } .clout-wordmark em { font-family: Georgia, serif; font-weight: 400; } .phone-preview { width: 53%; border: 6px solid #252125; background: #252125; border-radius: 26px; overflow: hidden; box-shadow: 20px 28px 42px #69412555; transform: rotate(8deg) translate(5%,24%); transition: transform .8s cubic-bezier(.16,1,.3,1); } .phone-preview img { width: 100%; } .project a:hover .phone-preview { transform: rotate(3deg) translate(5%,20%); } .concept-stage > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s; } .concept-stage .project-status { padding: 8px 10px; background: #f2f1ecdf; color: #11130f; } .project a:hover .concept-stage > img { transform: scale(1.045); } .project-meta { grid-template-columns: 1fr 44px; gap: 15px; padding: 24px 0 0; border: 0; } .project-meta > div { min-width: 0; } .project-meta .mono { font-size: 9px; line-height: 1.7; color: var(--muted); } .project-meta h3 { font-size: clamp(31px, 3.4vw, 52px); margin-top: 7px; line-height: 1.1; } .project-meta p { display: block; grid-column: 1; grid-row: 2; margin: 0; max-width: 370px; font-size: 13px; line-height: 1.55; color: var(--muted); } .project-arrow { grid-column: 2; grid-row: 1; align-self: end; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #b6b8b1; border-radius: 50%; font-size: 22px; transition: background .3s, color .3s; } .project a:hover .project-arrow { color: white; background: var(--blue); border-color: var(--blue); } .archive-stage { aspect-ratio: .96; padding: 13%; } .archive-stage > img { width: 100%; box-shadow: 10px 24px 30px #18222b24; transform: rotate(-7deg); transition: transform .7s; } .wallet-stage { background: #d3dbd0; } .wallet-stage > img { mix-blend-mode: multiply; box-shadow: none; transform: rotate(-12deg) scale(1.06); } .project a:hover .archive-stage > img { transform: rotate(0deg) scale(1.04); } .process { margin: 0; padding: clamp(75px, 8vw, 120px) var(--pad); gap: clamp(45px, 7vw, 110px); grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); background: #fbfaf6; min-height: 0; } .factory-art { align-self: center; min-height: 0; aspect-ratio: .65; border-radius: 48% 48% 3px 3px; background: #e9ebf3; } .factory-art img { position: absolute; inset: 0; width: 100%; height: 110%; } .factory-art .mono { right: 28px; bottom: 28px; line-height: 1.8; background: #fbfaf6d9; padding: 12px 16px; text-align: left; } .factory-body { padding: 0; } .process .factory-intro h2 { font-size: clamp(44px, 4.8vw, 76px); line-height: .98; } .factory-intro > p:last-child { margin: 38px 0 40px; font-size: 16px; } .factory-principles article { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 25px; border-color: var(--line); padding: 22px 0; } .factory-principles article:last-child { border-color: var(--line); } .factory-principles h3 { font-size: clamp(20px, 1.8vw, 27px); } .factory-principles p { font-size: 13px; } .team-heading, .academy-heading { padding-top: 120px; padding-bottom: 80px; } .contact { min-height: 780px; border-top: 0; background: #e1e4f2; } .contact::before, .contact::after { display: none; } .contact-copy { min-height: 780px; padding: 110px var(--pad) 80px; } .contact h2 { font-size: clamp(80px, 11vw, 170px); max-width: 75%; line-height: .92; } .contact-copy .contact-orbit { position: absolute; top: 175px; right: var(--pad); width: clamp(130px, 15vw, 220px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); background: transparent; transition: color .4s, background .4s, transform .4s; } .contact-orbit > span { font-size: clamp(48px, 6vw, 88px); font-weight: 400; line-height: 1; } .contact-orbit > small { font: 10px/1.5 "IBM Plex Mono", monospace; letter-spacing: .08em; text-align: center; } .contact-copy .contact-orbit:hover { color: white; background: var(--blue); transform: rotate(-8deg); } .contact-bottom { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 80px; margin-top: 100px; } .contact-bottom .contact-lead { margin: 0; font-size: 17px; } .contact-bottom .contact-email { margin: 0; font-size: clamp(16px, 1.8vw, 28px); gap: 12px; display: flex; justify-content: space-between; } @media(min-width:1101px) and (max-width:1350px) { .header-actions { gap: 18px; } .header-cta { display: none; } } @media(min-width:801px) and (max-width:1100px) { .manifesto.section-shell { grid-template-columns: minmax(0,1.5fr) minmax(270px, .85fr); } .manifesto h2 { font-size: 45px; } .manifesto-main { padding-left: 36px; padding-right: 36px; } .work-heading { grid-template-columns: 1fr; gap: 26px; } .work-intro { margin-left: auto; } .project-clout { padding-top: 100px; } .project-loan { margin-top: -70px; } .service-detail summary { gap: 12px; } .services-composition { gap: 36px; } .project-stage .project-status { top: 18px; left: 18px; font-size: 8px; } .factory-principles article { grid-template-columns: 1fr; gap: 9px; } } @media(max-width:800px) { .hero-explore { width: 104px; height: 104px; right: var(--pad); bottom: 44px; } .manifesto.section-shell { grid-template-columns: 1fr; } .manifesto h2 { font-size: clamp(44px, 7.5vw, 66px); } .manifesto-note { min-height: 340px; padding: 38px var(--pad); } .manifesto-note p { max-width: 520px; font-size: 34px; margin-top: 90px; } .capabilities h2 { font-size: clamp(44px, 8vw, 66px); } .capabilities-heading { gap: 28px; margin-bottom: 40px; } .capabilities-intro { margin: 0; } .services-composition { grid-template-columns: 1fr; gap: 50px; } .service-universe { max-width: 400px; width: 90%; margin: auto; } .universe-art { max-height: 330px; } .service-universe p { font-size: 32px; } .service-detail h3 { font-size: 29px; } .work-heading { grid-template-columns: 1fr; gap: 28px; } .work h2 { font-size: clamp(50px, 9vw, 75px); } .work-intro { margin: 0; max-width: 460px; } .work-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 50px 24px; } .project-dapp, .project-clout, .project-loan, .project-neuro, .project-truth, .project-studio, .project-rwa, .project-wallet { grid-column: span 1; margin: 0; padding: 0; } .project-dapp, .project-loan, .project-rwa { grid-column: 1 / -1; } .project-clout { grid-column: 1; grid-row: 3; } .project-neuro { grid-column: 2; grid-row: 3; } .project-dapp .project-stage, .project-loan .project-stage { aspect-ratio: 1.4; } .project-clout .project-stage, .project-neuro .project-stage { aspect-ratio: .8; } .project-truth .project-stage, .project-studio .project-stage { aspect-ratio: .85; } .studio-statement { font-size: 30px; } .neuro-statement { font-size: 28px; } .project-wallet { grid-column: 1 / -1; max-width: 420px; } .project-meta h3 { font-size: 33px; } .project-meta .mono { font-size: 8px; } .project-status { top: 16px; left: 16px; font-size: 8px; } .stage-action { right: 12px; bottom: 12px; font-size: 10px; } .clout-wordmark { font-size: 30px; top: 13%; } .process { grid-template-columns: 1fr; gap: 60px; } .factory-art { max-width: 480px; width: 85%; margin: auto; aspect-ratio: .9; } .factory-body { padding: 0; } .process .factory-intro h2 { font-size: clamp(45px, 8vw, 65px); } .contact h2 { font-size: clamp(70px, 12vw, 105px); max-width: 100%; } .contact-copy { padding-top: 90px; } .contact-copy .contact-orbit { position: relative; align-self: flex-end; top: auto; right: auto; width: 120px; margin-top: 35px; } .contact-orbit > span { font-size: 44px; } .contact-orbit > small { font-size: 8px; } .contact-bottom { grid-template-columns: 1fr; gap: 35px; margin-top: 35px; } .contact-bottom .contact-lead { max-width: 440px; } .contact-bottom .contact-email { font-size: 22px; } } @media(max-width:560px) { .hero-explore { width: 84px; height: 84px; bottom: 38px; } .hero-explore > span { font-size: 32px; } .hero-aside { max-width: calc(100% - 140px); } .manifesto-main { padding: 80px var(--pad); } .manifesto h2 { font-size: clamp(36px, 10.6vw, 53px); } .manifesto-note p { font-size: 30px; } .capabilities h2 { font-size: clamp(36px, 9.4vw, 52px); } .capabilities-intro { font-size: 15px; } .service-detail summary { gap: 12px; grid-template-columns: 24px 1fr 24px; padding: 23px 0; } .service-detail summary > img { width: 22px; height: 22px; } .service-detail h3 { font-size: clamp(23px, 6vw, 29px); } .service-description { padding-left: 36px; padding-right: 8px; } .service-description p { font-size: 14px; } .work-heading { padding-top: 85px; padding-bottom: 48px; gap: 24px; } .work-heading .eyebrow { margin: 0; } .work h2 { font-size: clamp(42px, 10.8vw, 60px); } .work-grid { display: flex; flex-direction: column; gap: 45px; } .project { width: 100%; } .project-stage, .project-dapp .project-stage, .project-loan .project-stage { aspect-ratio: 1.06; } .project-clout .project-stage { aspect-ratio: .95; } .project-neuro .project-stage { aspect-ratio: .95; } .project-truth .project-stage, .project-studio .project-stage { aspect-ratio: 1.06; } .project-rwa .project-stage { aspect-ratio: 1.06; } .neuro-statement { font-size: 34px; } .studio-statement { font-size: 36px; } .studio-stage .browser-preview, .project a:hover .studio-stage .browser-preview, .project a:focus-visible .studio-stage .browser-preview { transform: perspective(1100px) rotateY(-3deg) rotateZ(-3deg) translateY(40%); } .project-meta { padding-top: 20px; gap: 8px 14px; } .project-meta h3 { font-size: 34px; } .project-meta p { font-size: 13px; } .phone-preview { width: 47%; transform: rotate(8deg) translate(10%,29%); } .clout-wordmark { top: 13%; font-size: 34px; } .factory-art { width: 100%; } .factory-principles article { grid-template-columns: 1fr; gap: 10px; } .contact h2 { font-size: clamp(58px, 14.5vw, 80px); } .contact-copy .eyebrow { font-size: 9px; } .contact-bottom .contact-lead { font-size: 15px; } .contact-bottom .contact-email { font-size: clamp(15px, 4.4vw, 22px); } .contact-copy .contact-orbit { margin-top: 25px; } } @media(prefers-reduced-motion:reduce) { .hero-explore svg, .universe-art > img, .service-description { animation: none; } .project-stage *, .contact-orbit, .universe-core { transition: none !important; } }