:root { --ink:#050505; --paper:#f7fbff; --blue:#078fea; --aqua:#078fea; --lime:#078fea; --deep-blue:#056edb; --line:rgba(5,5,5,.17); --sans:'Manrope',Arial,sans-serif; --serif:'Playfair Display',Georgia,serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; color:var(--ink); font-family:var(--sans); background:var(--paper); overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.wrap { width:min(1360px, calc(100% - 80px)); margin:0 auto; }
.site-grain { pointer-events:none; z-index:20; position:fixed; inset:0; opacity:.042; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.page-progress { position:fixed; top:0; left:0; width:100%; z-index:40; height:3px; background:rgba(255,255,255,.1); }.page-progress i { display:block; height:100%; width:0; background:var(--lime); }
.eyebrow,.section-kicker { text-transform:uppercase; letter-spacing:.105em; font:500 11px/1.3 var(--mono); }
.hero { min-height:100svh; color:white; background:#171717; position:relative; overflow:hidden; }
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0; animation:hero-enter 2s cubic-bezier(.16,1,.3,1) forwards; pointer-events:none; }
.hero-wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,10,9,.89) 0%,rgba(9,10,9,.66) 28%,rgba(9,10,9,.1) 71%,rgba(9,10,9,.3) 100%),linear-gradient(0deg,rgba(9,10,9,.7) 0%,transparent 42%); }.hero-horizon { position:absolute; width:146vw; height:55vw; bottom:-46vw; left:-23vw; border:1px solid rgba(255,255,255,.22); border-radius:50%; }
.nav { height:92px; position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.21); }.brand { display:flex; align-items:center; width:118px; height:48px; padding:7px 9px; overflow:hidden; background:#fff; border-radius:3px; transition:transform .3s ease; }.brand:hover { transform:translateY(-2px); }.brand img { width:100%; height:100%; object-fit:contain; display:block; }.nav-links { display:flex; gap:28px; margin-left:115px; font-size:13px; font-weight:600; }.nav-links a { opacity:.82; transition:opacity .2s; }.nav-links a:hover { opacity:1; }.nav-cta { display:flex; gap:20px; align-items:center; font-size:12px; font-weight:700; }.nav-cta b,.contact-link b { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:var(--lime); color:var(--ink); font-size:16px; }
.hero-content { position:relative; z-index:2; padding-top:clamp(105px,15vh,176px); }.hero-title { max-width:810px; margin:18px 0 0; font-size:clamp(58px,8.35vw,128px); line-height:.92; letter-spacing:-.075em; font-weight:700; }.hero-title .line { display:block; }.hero-title .accent { color:var(--lime); font-family:var(--serif); font-weight:500; letter-spacing:-.09em; font-style:italic; }.hero-bottom { margin-top:48px; width:min(100%,730px); display:flex; align-items:flex-end; justify-content:space-between; }.hero-summary { font-size:14px; line-height:1.7; max-width:345px; margin:0; color:rgba(255,255,255,.78); }.circle-link { width:116px; height:116px; flex:0 0 auto; border:1px solid rgba(255,255,255,.56); border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; font:500 10px/1.2 var(--mono); text-transform:uppercase; letter-spacing:.05em; transition:background .3s,color .3s, transform .3s; }.circle-link i { margin-top:5px; font-style:normal; font-size:17px; }.circle-link:hover { color:var(--ink); background:var(--lime); transform:rotate(-8deg); }.hero-meta { position:absolute; z-index:2; bottom:26px; left:0; right:0; display:flex; justify-content:space-between; color:rgba(255,255,255,.58); text-transform:uppercase; font:10px var(--mono); letter-spacing:.07em; }.hero-meta span:last-child { display:flex; align-items:center; gap:12px; }.hero-meta i { display:inline-block; width:43px; height:1px; background:currentColor; }
 .statement { min-height:695px; padding-top:104px; position:relative; overflow:hidden; }.section-kicker { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:15px; color:#31535c; }.statement-copy { padding:95px 0 0 9.8%; display:flex; justify-content:space-between; gap:60px; }.statement h2,.impact h2,.work-band h2,.sectors h2 { margin:0; font-size:clamp(44px,5.5vw,84px); font-weight:600; letter-spacing:-.07em; line-height:.98; }.statement h2 em,.impact h2 em,.sectors h2 em { font-family:var(--serif); font-weight:500; }.statement-detail { width:275px; padding-top:25px; font-size:14px; line-height:1.72; }.statement-detail p { margin:0 0 27px; }.text-link { display:inline-flex; gap:22px; align-items:center; font-size:12px; font-weight:800; }.text-link b { font-size:17px; }.orbit-mark { position:absolute; bottom:-99px; right:-40px; width:330px; height:330px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font:9px var(--mono); letter-spacing:.21em; transform:rotate(-24deg); }.orbit-mark span { position:absolute; top:48px; left:48px; width:240px; text-align:center; transform:rotate(14deg); }.orbit-mark b { font:600 75px var(--serif); letter-spacing:-.12em; }
.client-marquee { background: var(--ink); padding: 45px 0; overflow: hidden; position: relative; z-index: 5; border-bottom: 1px solid rgba(255,255,255,0.06); }.marquee-heading { text-align: center; color: rgba(255,255,255,0.5); margin: 0 0 45px 0; }.marquee-track { display: flex; width: max-content; animation: scrollMarquee 40s linear infinite; }.marquee-content { display: flex; align-items: center; gap: 90px; padding: 0 45px; }.client-logo { width: 120px; height: 50px; object-fit: contain; filter: grayscale(100%) brightness(0) invert(1); opacity: 0.4; transition: opacity 0.4s ease, transform 0.4s ease; }.client-logo:hover { opacity: 0.9; transform: scale(1.05); }@keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.manifesto { height:146vh; background:var(--ink); color:var(--paper); position:relative; }.manifesto-sticky { height:100vh; position:sticky; top:0; display:grid; place-items:center; }.manifesto-rail { width:155vw; left:-20vw; position:absolute; top:17%; white-space:nowrap; color:rgba(255,255,255,.11); font-weight:700; font-size:clamp(54px,8.5vw,145px); letter-spacing:-.08em; animation:marquee 20s linear infinite; }.manifesto-center { z-index:1; width:min(520px,calc(100% - 44px)); text-align:center; }.manifesto-center .eyebrow { color:var(--lime); }.manifesto-center h2 { font-size:clamp(49px,6.3vw,94px); letter-spacing:-.075em; line-height:.95; margin:20px 0 27px; }.manifesto-center h2 i { font:500 1em var(--serif); }.manifesto-center p:last-child { max-width:360px; margin:0 auto; font-size:14px; line-height:1.72; color:rgba(255,255,255,.65); }.manifesto-number { position:absolute; bottom:-12vw; font-size:55vw; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.12); font-weight:700; letter-spacing:-.12em; line-height:.7; }
.capabilities { margin-top: -150px; padding-top: 258px; color:var(--paper); background:linear-gradient(180deg, transparent 0%, #171817 250px, #171817 100%); position:relative; z-index: 10; pointer-events: none; }.capabilities > * { pointer-events: auto; }.cap-orbits { position:absolute; inset:0; pointer-events:none; z-index:0; }.cap-orbits i:nth-child(1) { position:absolute; width:max(900px, 60vw); height:max(900px, 60vw); border:1px solid rgba(7,143,234,.12); border-radius:50%; top:-10vw; left:-15vw; }.cap-orbits i:nth-child(2) { position:absolute; width:max(600px, 40vw); height:max(600px, 40vw); border:1px solid rgba(7,143,234,.12); border-radius:50%; top:5vw; right:-5vw; }.manifesto-sticky { }.section-kicker.light { color:rgba(255,255,255,.55); border-color:rgba(255,255,255,.24); }.cap-transition-text { text-align:center; padding:0; position:absolute; top:-35vw; left:0; right:0; z-index:5; max-width:800px; margin:0 auto; }.cap-transition-text h3 { font-size:clamp(36px, 4.5vw, 62px); font-weight:500; letter-spacing:-.05em; line-height:1.1; color:var(--paper); margin:0; text-shadow: 0 4px 30px rgba(0,0,0,0.5); }.cap-transition-text h3 i { font-family:var(--serif); font-style:italic; font-weight:500; }.capabilities-heading { display:flex; justify-content:space-between; gap:80px; padding:0 0 86px 9.8%; }.capabilities-heading h2 { margin:0; font-size:clamp(43px,5.5vw,82px); letter-spacing:-.075em; line-height:.96; }.capabilities-heading h2 i { font:500 1em var(--serif); color:var(--lime); }.capabilities-heading p { width:280px; align-self:flex-end; font-size:14px; line-height:1.7; color:rgba(255,255,255,.67); margin:0; }.service-list { border-top:1px solid rgba(255,255,255,.3); }.service-row { min-height:172px; border-bottom:1px solid rgba(255,255,255,.3); display:grid; grid-template-columns:10% 31% 1fr 60px; align-items:center; column-gap:20px; padding:20px 0; position:relative; transition:padding .4s ease,color .3s; }.service-row:before { content:''; background:var(--blue); position:absolute; inset:0; transform:scaleY(0); transform-origin:bottom; z-index:0; transition:transform .45s cubic-bezier(.16,1,.3,1); }.service-row>* { position:relative; z-index:1; }.service-row:hover,.service-row.active { padding-left:2.7%; padding-right:2.7%; }.service-row:hover:before,.service-row.active:before { transform:scaleY(1); }.service-row.active:before { background:var(--deep-blue); }.service-index { font:11px var(--mono); color:rgba(255,255,255,.7); }.service-row h3 { margin:0; font-size:30px; line-height:.96; letter-spacing:-.06em; }.service-row p { max-width:365px; margin:0; font-size:13px; line-height:1.6; color:rgba(255,255,255,.73); }.service-row button { width:46px; height:46px; justify-self:end; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:inherit; background:transparent; font-size:22px; transition:background .2s,color .2s; }.service-row:hover button,.service-row.active button { color:var(--ink); border-color:var(--lime); background:var(--lime); }.capabilities-foot { padding-top:19px; display:flex; justify-content:space-between; color:rgba(255,255,255,.6); font:10px var(--mono); letter-spacing:.06em; text-transform:uppercase; }.capabilities-foot b { color:var(--lime); margin-left:10px; font-size:17px; }
.impact { padding:110px 0 124px; background:#0f1011; color:var(--paper); }.impact .section-kicker { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.1); }.impact-top { margin:90px 0 85px; display:flex; justify-content:space-between; padding-left:9.8%; gap:65px; }.impact-top p { max-width:305px; margin:20px 0 0; font-size:14px; line-height:1.74; color:rgba(255,255,255,0.7); }.metrics-grid { display:grid; grid-template-columns:1.05fr .95fr .95fr; gap:14px; }.metric-card { min-height:355px; padding:23px; background:#bcecff; overflow:hidden; position:relative; display:flex; flex-direction:column; justify-content:space-between; color: #111; }.metric-card span { font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; }.metric-card strong { position:relative; z-index:1; font-size:clamp(96px,11vw,160px); font-weight:600; line-height:.75; letter-spacing:-.11em; }.metric-card strong i { font:500 27px var(--serif); letter-spacing:-.04em; }.metric-card p { margin:0; position:relative; z-index:1; font-size:14px; }.metric-card.dark { background:var(--ink); color:var(--paper); }.metric-card.blue { background:var(--blue); color:white; }.metric-orbit { position:absolute; width:250px; height:250px; right:-76px; top:-85px; border:1px solid rgba(5,5,5,.36); border-radius:50%; }.metric-orbit:after { content:''; position:absolute; width:140px; height:140px; left:-70px; top:90px; border:1px solid rgba(5,5,5,.36); border-radius:50%; }.metric-dot { position:absolute; width:13px; height:13px; right:27px; top:27px; background:var(--lime); border-radius:50%; box-shadow:-70px 73px 0 24px rgba(7,143,234,.09),-150px 180px 0 53px rgba(7,143,234,.06); }.metric-lines { position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0,transparent 43px,rgba(255,255,255,.14) 44px),repeating-linear-gradient(0deg,transparent 0,transparent 43px,rgba(255,255,255,.14) 44px); transform:perspective(700px) rotateX(57deg) scale(1.8) translateY(74px); transform-origin:bottom; }
.work-band { padding:112px 0 130px; background:#e9f7fd; overflow:hidden; }.work-intro { text-align:center; }.work-intro h2 { margin-top:18px; }.work-band h2 i { font:500 1em var(--serif); color:var(--blue); }.process-wrap { margin-top:100px; width:100%; overflow:hidden; }.process-track { width:max-content; display:flex; gap:15px; padding:0 max(40px, calc((100vw - 1360px)/2)); }.process-card { position:relative; flex:0 0 min(440px,80vw); height:470px; padding:31px; display:flex; flex-direction:column; overflow:hidden; }.process-card span { font:11px var(--mono); }.process-card h3 { margin:auto 0 14px; font-size:clamp(64px,6.3vw,100px); line-height:.8; letter-spacing:-.1em; }.process-card p { max-width:230px; margin:0; font-size:13px; line-height:1.65; }.process-card>i { position:absolute; right:28px; bottom:24px; font-style:normal; font-size:35px; }.peach { background:#bcecff; }.ink { background:var(--ink); color:white; }.cloud { background:var(--deep-blue); color:white; }.cobalt { color:white; background:var(--blue); }.peach:after { content:''; position:absolute; width:310px; height:310px; right:-120px; top:-135px; border:1px solid rgba(17,18,17,.35); border-radius:50%; }.cloud:after { content:''; position:absolute; width:220px; height:220px; right:-40px; top:-40px; border:1px solid rgba(255,255,255,.3); transform: rotate(20deg); }.ink:after { content:'×'; position:absolute; color:var(--lime); font:280px/.8 var(--serif); right:-39px; top:-37px; }.cobalt:after { content:'↗'; position:absolute; color:rgba(255,255,255,.16); font-size:355px; line-height:.7; right:-78px; top:-51px; }
.sectors { padding:110px 0 132px; }.sectors-head { padding:93px 0 74px 9.8%; display:flex; justify-content:space-between; gap:50px; }.sectors-head p { max-width:295px; margin:20px 0 0; font-size:14px; line-height:1.7; }.sector-cloud { display:flex; flex-wrap:wrap; gap:10px; padding-left:9.8%; }.sector-cloud span { border:1px solid var(--line); padding:14px 17px; border-radius:100px; font-size:14px; transition:background .25s,color .25s,transform .25s; }.sector-cloud span:hover { background:var(--ink); color:var(--paper); transform:translateY(-4px); }
.projects { padding: 110px 0 132px; background: #0f1011; color: var(--paper); border-top: 1px solid #222; border-bottom: 1px solid #000; }.projects .section-kicker { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.1); }.projects-list { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: center; padding: 0 max(20px, 5vw); max-width: 1600px; margin-left: auto; margin-right: auto; }.product-image { width: 100%; display: flex; align-items: center; justify-content: center; }.product-image img { width: 100%; height: auto; object-fit: contain; }
.contact { position:relative; background:var(--blue); color:white; overflow:hidden; min-height:730px; }.contact-inner { min-height:730px; padding:110px 0 30px; position:relative; z-index:1; }.contact .eyebrow { color:var(--brand-ice, #bcecff); }.contact h2 { font-size:clamp(66px,9.6vw,145px); letter-spacing:-.09em; line-height:.85; margin:26px 0 45px; }.contact h2 i { font:500 1em var(--serif); color:var(--brand-ice, #bcecff); }.contact-link { display:inline-flex; gap:25px; align-items:center; border-bottom:1px solid rgba(255,255,255,.53); padding:0 0 13px; font-size:clamp(19px,2.2vw,30px); font-weight:600; letter-spacing:-.04em; }.contact-link b { width:36px; height:36px; font-size:19px; }.contact-link.whatsapp { color:#25D366; border-bottom-color:rgba(37,211,102,.53); }.contact-foot { position:absolute; bottom:27px; left:0; right:0; display:grid; grid-template-columns:1fr 1fr 1fr; font:10px/1.6 var(--mono); text-transform:uppercase; letter-spacing:.06em; }.contact-foot p { margin:0; }.contact-foot a { justify-self:end; text-decoration:underline; text-underline-offset:4px; }.contact-orbit { position:absolute; width:720px; height:720px; border:1px solid rgba(255,255,255,.33); border-radius:50%; }.orbit-one { right:-205px; top:-190px; }.orbit-two { right:-80px; top:-285px; width:420px; height:420px; }
.reveal,.stagger-reveal,.reveal-scale { opacity:0; transform:translateY(40px) scale(0.96) rotateX(8deg); transition:opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); transform-origin: center bottom; will-change: transform, opacity; }.reveal.visible,.stagger-reveal.visible,.reveal-scale.visible { opacity:1; transform:translateY(0) scale(1) rotateX(0deg); }.metrics-grid .stagger-reveal:nth-child(2) { transition-delay:.15s; }.metrics-grid .stagger-reveal:nth-child(3) { transition-delay:.30s; }.hero .reveal { animation:reveal 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards; }.hero .hero-title .line:nth-child(1) { animation-delay:.15s; }.hero .hero-title .line:nth-child(2) { animation-delay:.27s; }.hero .hero-title .line:nth-child(3) { animation-delay:.39s; }.hero .hero-bottom { animation-delay:.55s; }.hero .eyebrow { animation-delay:.04s; }
@keyframes reveal { to { opacity:1; transform:none; } } @keyframes hero-enter { from { opacity:0; transform:scale(1.15); } to { opacity:1; transform:scale(1.06); } } @keyframes marquee { to { transform:translateX(-34%); } }
@media (max-width:800px) { .wrap { width:calc(100% - 40px); }.nav { height:74px; }.nav-links { display:none; }.nav-cta { font-size:0; gap:0; }.nav-cta b { width:31px; height:31px; }.hero { min-height:700px; }.hero-image { background-position:58% center; }.hero-wash { background:linear-gradient(90deg,rgba(9,10,9,.83),rgba(9,10,9,.2)),linear-gradient(0deg,rgba(9,10,9,.76),transparent 60%); }.hero-content { padding-top:130px; }.hero-title { font-size:clamp(58px,16.5vw,90px); }.hero-bottom { margin-top:38px; align-items:flex-start; }.hero-summary { max-width:240px; font-size:12px; }.circle-link { width:88px; height:88px; font-size:8px; }.hero-meta { font-size:8px; bottom:18px; }.hero-meta>span:first-child { display:none; }.hero-meta { justify-content:flex-end; }.statement { min-height:625px; padding-top:66px; }.statement-copy { padding:57px 0 0; display:block; }.statement-detail { width:min(100%,310px); padding-top:38px; }.orbit-mark { transform:scale(.8) rotate(-24deg); right:-105px; bottom:-117px; }.manifesto { height:110vh; }.capabilities { padding-top:68px; }.capabilities-heading { padding:58px 0 53px; display:block; }.capabilities-heading p { width:auto; max-width:310px; margin-top:31px; }.service-row { min-height:185px; grid-template-columns:38px 1fr 43px; gap:13px; }.service-row h3 { font-size:23px; }.service-row p { display:none; }.service-row:hover,.service-row.active { padding-left:9px; padding-right:9px; }.service-row button { width:40px; height:40px; }.impact { padding:70px 0; }.impact-top { padding:0; display:block; margin:57px 0 50px; }.impact-top p { margin-top:29px; }.metrics-grid { grid-template-columns:1fr; }.metric-card { min-height:250px; }.work-band { padding:70px 0 80px; }.process-wrap { margin-top:56px; }.process-track { padding-left:20px; }.process-card { flex-basis:320px; height:370px; padding:23px; }.sectors { padding:68px 0 78px; }.sectors-head { padding:55px 0 47px; display:block; }.sectors-head p { margin-top:28px; }.sector-cloud { padding:0; }.contact,.contact-inner { min-height:630px; }.contact-inner { padding-top:70px; }.contact-foot { grid-template-columns:1fr 1fr; bottom:18px; font-size:8px; }.contact-foot a { display:none; }.contact h2 { margin-top:20px; }.contact-orbit { width:500px; height:500px; right:-290px; top:15px; }.projects-list { grid-template-columns: 1fr; gap: 40px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }