:root {
  --ink: #151827;
  --paper: #f3f1eb;
  --blue: #3155f6;
  --violet: #7772f4;
  --line: rgba(21, 24, 39, 0.18);
  --mono: "DM Mono", monospace;
  --display: "Unbounded", sans-serif;
  --body: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.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; }
.page-noise { position: fixed; z-index: 9; inset: 0; pointer-events: none; opacity: .055; 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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.section-pad { padding-left: clamp(24px, 5vw, 80px); padding-right: clamp(24px, 5vw, 80px); }

.site-header { height: 98px; padding: 0 clamp(24px, 5vw, 80px); display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; left: 0; right: 0; z-index: 5; color: white; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1.08 var(--display); letter-spacing: -.7px; text-transform: uppercase; }
.logo-mark { width: 31px; }
.desktop-nav { display: flex; gap: 31px; margin-left: 8vw; font: 500 13px var(--body); }
.desktop-nav a, .header-cta { transition: opacity .25s ease; }
.desktop-nav a:hover, .header-cta:hover { opacity: .66; }
.header-cta { font: 600 12px var(--display); letter-spacing: -.55px; text-transform: uppercase; }
.header-cta span { padding-left: 8px; font-size: 17px; }
.menu-toggle, .mobile-menu { display: none; }

.hero { min-height: min(860px, 100vh); padding-top: 142px; position: relative; overflow: hidden; isolation: isolate; color: white; background: #1a1c54; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 76% 14%, rgba(111,125,255,.92), transparent 29%), radial-gradient(circle at 28% 101%, rgba(96,58,208,.78), transparent 32%), linear-gradient(125deg, #1a225c 6%, #3449b9 66%, #636be4); z-index: -4; }
.hero::after { content: ""; position: absolute; inset: 0; opacity: .6; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 82px 82px; mask-image: linear-gradient(90deg, black, transparent 65%); z-index: -3; }
.hero-meta { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.eyebrow, .hero-place { font: 500 10px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.eyebrow i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hero-place { opacity: .75; }
.hero-copy { position: relative; z-index: 2; padding-top: clamp(65px, 11vh, 120px); }
.hero-kicker { margin: 0 0 23px; font-size: clamp(14px, 1.2vw, 19px); line-height: 1.43; letter-spacing: -.04em; }
em { font-style: italic; font-family: Georgia, serif; font-weight: 400; }
.hero h1 { margin: 0; font: 700 clamp(44px, 6.5vw, 108px)/.99 var(--display); letter-spacing: -.085em; text-transform: uppercase; }
.hero h1 span { color: #bfc5ff; }
.hero-bottom { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; margin-top: clamp(54px, 10vh, 115px); }
.hero-bottom > p { max-width: 285px; margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.77); }
.round-link { display: flex; width: 113px; height: 113px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; flex-direction: column; justify-content: center; align-items: center; text-align: center; font: 500 9px/1.3 var(--mono); text-transform: uppercase; transition: background .3s, color .3s, transform .3s; }
.round-link b { margin-top: 7px; font: 400 17px var(--body); }.round-link:hover { color: var(--blue); background: white; transform: rotate(-12deg); }
.hero-orbit { position: absolute; z-index: 2; right: 2.5%; bottom: 24px; width: 113px; height: 113px; border-radius: 50%; pointer-events: none; }
.orbital-copy { position: absolute; inset: 0; border-radius: 50%; animation: spin 17s linear infinite; font: 500 8px var(--mono); letter-spacing: 2px; word-spacing: 6px; writing-mode: vertical-rl; text-align: center; padding: 9px; }
.orbital-arrow { position: absolute; left: 43px; top: 41px; font-size: 25px; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-art { position: absolute; z-index: -1; width: min(65vw, 930px); height: min(76vw, 850px); min-width: 570px; right: -3vw; bottom: -182px; transform: rotate(-8deg); }
.art-grid { position: absolute; inset: 7%; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.36) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.36) 1px,transparent 1px); background-size: 55px 55px; transform: perspective(700px) rotateX(48deg) rotateZ(-4deg); }
.art-blob { position: absolute; filter: blur(8px); border-radius: 50%; }.blob-one { width: 390px; height: 390px; right: 125px; top: 28px; background: radial-gradient(circle at 30% 30%, #e0ccff, #8e6ee3 25%, #4a3bb5 70%); box-shadow: 0 0 60px rgba(205,196,255,.85); }.blob-two { width: 260px; height: 210px; right: -7px; bottom: 105px; background: #1f2ba8; }
.glass-panel { position: absolute; border: 1px solid rgba(255,255,255,.51); background: linear-gradient(145deg, rgba(218,230,255,.32), rgba(255,255,255,.08)); backdrop-filter: blur(11px); box-shadow: -16px 22px 48px rgba(15,15,91,.27); }
.panel-main { width: 300px; height: 215px; left: 155px; bottom: 185px; padding: 20px; color: white; transform: rotate(8deg); }.panel-main span { font: 500 8px var(--mono); letter-spacing: .08em; }.panel-main strong { display: block; margin-top: 35px; font: 500 25px/.98 var(--display); letter-spacing: -.08em; text-transform: uppercase; }.panel-chart { display: flex; gap: 5px; align-items: flex-end; position: absolute; right: 17px; bottom: 18px; height: 43px; }.panel-chart i { width: 8px; background: white; }.panel-chart i:nth-child(1){height:16px}.panel-chart i:nth-child(2){height:31px}.panel-chart i:nth-child(3){height:25px}.panel-chart i:nth-child(4){height:43px}.panel-chart i:nth-child(5){height:36px}
.panel-small { width: 135px; height: 78px; left: 405px; top: 165px; padding: 12px; transform: rotate(-13deg); display: flex; flex-direction: column; justify-content: space-between; }.panel-small span { font: 500 8px var(--mono); }.panel-small span::first-letter { color: #a7ffce; }.panel-small b { align-self: flex-end; font: 500 14px var(--display); letter-spacing: -.07em; }.art-sun { position: absolute; width: 164px; height: 164px; bottom: 104px; right: 84px; border-radius: 50%; background: repeating-linear-gradient(0deg, #cad3ff 0 3px, #4f50d6 3px 6px); box-shadow: inset 0 0 40px #fff, 0 0 40px #b1bdff; }.art-lines { position: absolute; inset: 0; overflow: visible; }.art-lines path { fill: none; stroke: rgba(243,244,255,.6); stroke-width: 2; }

.marquee { border-top: 1px solid rgba(255,255,255,.4); border-bottom: 1px solid rgba(255,255,255,.4); overflow: hidden; color: white; background: var(--blue); }.marquee-track { display: flex; width: max-content; align-items: center; padding: 13px 0; animation: marquee 24s linear infinite; }.marquee span { padding: 0 30px; font: 600 10px var(--display); letter-spacing: -.06em; text-transform: uppercase; }.marquee b { font-size: 15px; color: #afbaff; }@keyframes marquee { to { transform: translateX(-50%); } }

.intro { padding-top: 131px; padding-bottom: 145px; }.section-label { display: grid; grid-template-columns: 1fr 3fr; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; border-top: 1px solid var(--line); padding-top: 15px; }.section-label.light { border-color: rgba(255,255,255,.4); }.section-label a { justify-self: end; text-decoration: underline; text-underline-offset: 4px; }.intro-layout { display: grid; grid-template-columns: 1.6fr .7fr; gap: clamp(60px, 12vw, 212px); margin-top: 107px; }.intro h2, .about h2 { margin: 0; font: 600 clamp(34px, 4.8vw, 71px)/1.09 var(--display); letter-spacing: -.075em; text-transform: uppercase; }.intro-side { padding-top: 12px; }.intro-side p { margin: 0 0 28px; font-size: 15px; line-height: 1.65; }.text-link { border-bottom: 1px solid currentColor; font: 600 11px var(--display); letter-spacing: -.05em; text-transform: uppercase; padding-bottom: 8px; }.text-link span { padding-left: 10px; font-size: 17px; }
.service-list { margin-top: 128px; }.service-card { display: grid; grid-template-columns: 1fr 2fr auto; gap: 25px; padding: 25px 0; border-top: 1px solid var(--line); transition: padding .3s, color .3s; }.service-card:last-child { border-bottom: 1px solid var(--line); }.service-card:hover { color: var(--blue); padding-left: 15px; padding-right: 15px; }.service-count { font: 500 10px var(--mono); padding-top: 4px; }.service-card h3 { margin: 0; font: 600 clamp(22px, 2.5vw, 37px)/1.15 var(--display); letter-spacing: -.07em; text-transform: uppercase; }.service-card p { max-width: 410px; margin: 10px 0 0; font-size: 13px; line-height: 1.5; }.card-arrow { align-self: center; font-size: 24px; }

.work-section { padding-top: 110px; padding-bottom: 130px; color: white; background: var(--ink); }.work-intro { max-width: 560px; margin: 104px 0 75px 25%; }.work-intro p { margin: 0; font: 500 clamp(23px, 2.9vw, 41px)/1.22 var(--display); letter-spacing: -.07em; text-transform: uppercase; }.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px 28px; }.project { display: block; }.project-large { grid-column: span 2; }.project-art { position: relative; height: 440px; overflow: hidden; }.project-large .project-art { height: 530px; }.project-info { padding-top: 14px; display: flex; align-items: flex-start; justify-content: space-between; }.project-info h3 { margin: 0; font: 600 14px var(--display); text-transform: uppercase; letter-spacing: -.06em; }.project-info p { margin: 6px 0 0; color: rgba(255,255,255,.57); font: 12px var(--body); }.project-info > span { border: 1px solid rgba(255,255,255,.55); border-radius: 50%; display: grid; width: 36px; height: 36px; place-items: center; transition: color .3s, background .3s; }.project:hover .project-info > span { color: var(--ink); background: white; }
.case-a { display: grid; place-items: center; background: #ddf1f3; }.case-a-shell { position: relative; width: min(68%, 710px); height: 72%; padding: clamp(20px, 3vw, 48px); color: white; overflow: hidden; background: #161923; border-radius: 16px; box-shadow: 0 25px 45px rgba(30,51,53,.22); }.case-a-shell::after { content:""; position:absolute; width: 85%; height: 170%; top:-35%; right:-18%; border-radius:50%; border: 2px solid #7cffa8; box-shadow: 0 0 0 32px rgba(124,255,168,.16), 0 0 0 67px rgba(124,255,168,.12); }.case-a-shell span { position: relative; z-index: 1; font: 600 clamp(22px, 3.5vw, 52px) var(--display); letter-spacing: -.12em; }.case-a-shell small { position: absolute; z-index: 1; left: clamp(20px,3vw,48px); bottom: clamp(20px,3vw,48px); font: 14px var(--body); }.case-a-pulse { width: 10px; height: 10px; float: right; background:#7cffa8; border-radius:50%; box-shadow:0 0 0 12px rgba(124,255,168,.22); }
.case-b { background: #ff7655; }.case-b-sphere { position:absolute; width: 270px; height:270px; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); background: repeating-radial-gradient(circle at 64% 38%, #e2ff5a 0 3px, #e2ff5a 4px 7px, #a9c5ff 8px 12px, #4457d9 14px 19px); box-shadow: 0 0 0 30px rgba(255,255,255,.09); }.case-b span { position:absolute; top:25px; left:28px; font: 700 28px var(--display); letter-spacing:-.12em; }.case-b i { position:absolute; right:25px; bottom:25px; font: 600 13px/1.1 var(--display); text-align:right; text-transform:uppercase; letter-spacing:-.07em; }
.case-c { display:grid; place-items:center; background:#7b78ed; }.case-c-window { position:relative; width:68%; height:73%; background:#f9f2e5; color:#171a29; padding:22px; box-shadow: 14px 15px 0 #ffef62; }.case-c-window span { font: 700 clamp(27px, 4vw, 53px)/1 var(--display); letter-spacing:-.13em; }.case-c-window div { position:absolute; width:80px; height:80px; border-radius:50%; right:24px; top:52px; background:#375bf7; box-shadow: inset -18px -16px 0 #2742ba; }.case-c-window small { position:absolute; left:22px; bottom:22px; font: 600 10px var(--mono); text-transform:uppercase; }

.about { padding-top: 130px; padding-bottom: 130px; }.about-copy { max-width: 870px; margin: 123px auto 0; }.overline { margin: 0 0 17px; font: 500 10px var(--mono); letter-spacing:.09em; }.about h2 em { color: var(--blue); }.about-description { max-width: 360px; margin: 55px 0 0 51%; font-size: 15px; line-height:1.63; }.numbers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top: 110px; }.numbers > div { padding-top: 15px; border-top:1px solid var(--line); display:flex; gap:22px; align-items:baseline; }.numbers strong { font: 600 clamp(35px, 5vw, 68px) var(--display); letter-spacing: -.1em; }.numbers span { font: 12px/1.4 var(--body); }

.contact { position: relative; overflow:hidden; color:white; background: var(--blue); }.contact::before { content:""; position:absolute; inset:0; opacity:.36; background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px); background-size: 78px 78px; mask-image:radial-gradient(circle at 50% 50%,black,transparent 72%); }.contact-inner { position:relative; padding-top:125px; padding-bottom:27px; min-height: 710px; }.eyebrow.light { color:#dce1ff; }.contact h2 { max-width: 1020px; margin: 54px 0 50px; font: 600 clamp(42px, 7.2vw, 113px)/1 var(--display); letter-spacing: -.095em; text-transform:uppercase; }.contact h2 em { color: #c9d2ff; }.contact-email { display:inline-flex; gap: 16px; align-items:center; padding-bottom:12px; border-bottom:1px solid white; font: 600 clamp(15px, 1.6vw, 22px) var(--display); letter-spacing:-.07em; }.contact-email span { font-size:26px; }.contact-footer { position:absolute; left: clamp(24px, 5vw, 80px); right: clamp(24px, 5vw, 80px); bottom:27px; padding-top:15px; display:flex; align-items:flex-end; justify-content:space-between; border-top:1px solid rgba(255,255,255,.45); font: 10px/1.55 var(--mono); text-transform:uppercase; }.contact-footer p { margin:0; }.contact-footer div { display:flex; gap:19px; }.contact-footer a:hover { text-decoration:underline; }.contact-shape { position:absolute; border-radius:50%; pointer-events:none; }.shape-one { width: 43vw; height:43vw; min-width:510px; min-height:510px; right:-14%; top:-37%; background:radial-gradient(circle at 35% 55%,#c6bbff, #6b65e7 35%, #2e3eb1 67%); box-shadow:0 0 0 60px rgba(225,216,255,.1),0 0 0 120px rgba(225,216,255,.06); }.shape-two { width: 360px; height:360px; left:-120px; bottom:-205px; background:#d4ff81; filter:blur(10px); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }.reveal.visible { opacity:1; transform:translateY(0); }.service-card.reveal:nth-child(2) { transition-delay:.09s; }.service-card.reveal:nth-child(3) { transition-delay:.18s; }

@media (max-width: 760px) {
  .site-header { height:78px; }.desktop-nav, .header-cta { display:none; }.menu-toggle { display:flex; position:relative; z-index:12; flex-direction:column; justify-content:center; gap:6px; width:34px; height:34px; padding:0; color:white; border:0; background:transparent; cursor:pointer; }.menu-toggle span:not(.sr-only) { display:block; width:27px; height:1px; background:currentColor; transition: transform .25s, opacity .25s; }.menu-toggle.open span:first-child { transform:translateY(3.5px) rotate(45deg); }.menu-toggle.open span:nth-child(2) { transform:translateY(-3.5px) rotate(-45deg); }.mobile-menu { position:fixed; z-index:10; inset:0; padding:118px 24px 30px; flex-direction:column; background:var(--blue); color:white; transform:translateX(100%); transition:transform .35s cubic-bezier(.3,.8,.3,1); }.mobile-menu.open { display:flex; transform:translateX(0); }.mobile-menu a { padding:16px 0; border-top:1px solid rgba(255,255,255,.35); font:500 23px var(--display); letter-spacing:-.08em; text-transform:uppercase; }.mobile-menu a:last-child { margin-top:auto; border-bottom:1px solid rgba(255,255,255,.35); font-size:15px; }
  .hero { min-height:690px; padding-top:106px; }.hero-place { display:none; }.hero-copy { padding-top:55px; }.hero h1 { font-size:clamp(41px, 12.2vw, 68px); line-height:1.03; }.hero-bottom { margin-top:45px; align-items:flex-start; }.hero-bottom > p { width: 192px; font-size:12px; }.round-link { width:94px; height:94px; }.hero-orbit { display:none; }.hero-art { width:650px; height:650px; min-width:650px; opacity:.72; right:-345px; bottom:-226px; }.panel-main { left:105px; }.panel-small { left:360px; }.blob-one { right:85px; }
  .intro, .about { padding-top:78px; padding-bottom:82px; }.section-label { grid-template-columns: .75fr 2fr; }.intro-layout { display:block; margin-top:64px; }.intro h2, .about h2 { font-size:clamp(28px, 8.8vw, 45px); }.intro-side { max-width:310px; padding-top:30px; }.service-list { margin-top:75px; }.service-card { grid-template-columns:40px 1fr auto; gap:10px; padding:21px 0; }.service-card h3 { font-size:20px; }.service-card p { font-size:12px; }.card-arrow { font-size:20px; }
  .work-section { padding-top:78px; padding-bottom:85px; }.work-intro { margin:65px 0 48px; }.work-intro p { font-size:25px; }.work-grid { grid-template-columns:1fr; gap:42px; }.project-large { grid-column:auto; }.project-art, .project-large .project-art { height:310px; }.project-info h3 { font-size:12px; }.project-info p { font-size:11px; }.case-a-shell { width:78%; }.case-b-sphere { width:205px; height:205px; }
  .about-copy { margin-top:68px; }.about-description { max-width:315px; margin:32px 0 0 0; }.numbers { grid-template-columns:1fr; gap:20px; margin-top:65px; }.numbers > div { justify-content:space-between; }.numbers strong { font-size:47px; }.numbers span { width:150px; }
  .contact-inner { min-height:625px; padding-top:78px; }.contact h2 { margin:44px 0 39px; font-size:clamp(38px, 12vw, 60px); }.contact-footer { flex-direction:column; align-items:flex-start; gap:16px; }.contact-footer div { gap:15px; }.shape-one { right:-80%; top:-11%; }.shape-two { width:250px; height:250px; left:-120px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; }.marquee-track, .orbital-copy { animation:none; } }