:root { --ink:#111312; --paper:#f7f5f0; --lime:#dfff41; --orange:#ff613d; --blue:#91cfff; --muted:#73756e; --line:rgba(17,19,18,.17); --mono:"DM Mono",monospace; --sans:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } a { color:inherit; text-decoration:none; } .noise { position:fixed; z-index:8; inset:0; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E"); } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.site-header { height:87px; max-width:1440px; padding:0 5.4vw; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; } .brand { display:flex; align-items:center; gap:9px; font-size:18px; letter-spacing:-1px; font-weight:800; } .brand svg { width:25px; height:25px; fill:var(--orange); } .brand > span > span { color:var(--orange); } .nav-links { display:flex; align-items:center; gap:29px; font-size:13px; font-weight:700; } .nav-links > a:not(.nav-cta) { transition:color .2s ease; } .nav-links > a:not(.nav-cta):hover { color:var(--orange); } .nav-cta { background:var(--ink); color:white; border-radius:100px; padding:12px 17px; margin-left:6px; } .nav-cta span { color:var(--lime); margin-left:5px; }.menu-toggle { display:none; }
.hero { min-height:calc(100vh - 87px); max-width:1440px; margin:auto; padding:6.3vw 5.4vw 7vw; display:grid; grid-template-columns:1.05fr .95fr; position:relative; overflow:hidden; } .eyebrow,.section-tag { font:500 11px/1.4 var(--mono); letter-spacing:.04em; text-transform:uppercase; } .eyebrow { margin:0 0 30px; display:flex; align-items:center; gap:9px; } .eyebrow span { width:8px; height:8px; background:var(--orange); border-radius:50%; } h1,h2,h3,p { margin-top:0; } h1 { max-width:720px; margin-bottom:27px; font-size:clamp(51px,6.1vw,88px); line-height:.98; letter-spacing:-.075em; font-weight:800; } h1 em,h2 span { color:var(--orange); font-style:normal; } .hero-text { max-width:465px; font-size:16px; line-height:1.7; color:#464843; } .hero-actions { display:flex; align-items:center; gap:25px; margin-top:35px; } .button { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:16px 20px; border-radius:100px; font-size:13px; font-weight:800; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-3px); } .button-primary { color:var(--ink); background:var(--lime); } .button-primary span,.button-light span { font-size:17px; } .button-text { padding-left:0; } .button-text span { color:var(--orange); font-size:17px; }
.hero-art { min-height:495px; position:relative; overflow:hidden; background:#e4e3dc; margin:-2vw -5.4vw -7vw 4vw; } .hero-art:after { content:""; position:absolute; inset:0; background:linear-gradient(140deg,transparent 56%,rgba(0,0,0,.055)); } .art-ring { position:absolute; border:1px solid rgba(17,19,18,.17); border-radius:50%; left:50%; top:51%; transform:translate(-50%,-50%); } .ring-one { width:570px; height:570px; }.ring-two { width:400px; height:400px; }.ring-three { width:233px; height:233px; }.art-orb { border-radius:50%; position:absolute; z-index:2; }.orb-one { width:97px; height:97px; background:var(--orange); top:17%; left:27%; box-shadow:20px 21px 0 rgba(255,97,61,.13); }.orb-two { width:33px; height:33px; background:var(--lime); right:19%; bottom:22%; }.art-card { position:absolute; z-index:3; box-shadow:0 19px 44px rgba(0,0,0,.15); }.card-back { width:206px; height:302px; background:var(--blue); left:50%; top:52%; transform:translate(-79%,-44%) rotate(-12deg); padding:17px; color:#0c3958; font:500 11px var(--mono); }.card-back i { height:1px; background:#5598c7; display:block; margin-top:25px; }.card-front { color:#f8f7ef; background:#202721; width:246px; height:357px; left:50%; top:50%; transform:translate(-25%,-45%) rotate(8deg); padding:21px; display:flex; flex-direction:column; }.card-heading { display:flex; gap:7px; align-items:center; font:500 9px var(--mono); text-transform:uppercase; color:#b8bdb5; }.status { width:7px; height:7px; background:var(--lime); border-radius:50%; }.card-front strong { font-size:36px; line-height:1.04; letter-spacing:-.07em; margin:auto 0; }.card-line { height:1px; background:#586057; }.card-footer { display:flex; justify-content:space-between; margin-top:11px; color:var(--lime); font:500 9px var(--mono); }.art-label { position:absolute; z-index:4; right:7%; bottom:6%; text-align:right; font:500 10px/1.6 var(--mono); text-transform:uppercase; }.hero-scroll { position:absolute; left:5.4vw; bottom:3vw; display:flex; gap:10px; align-items:center; font:500 9px var(--mono); letter-spacing:.1em; }.hero-scroll span { width:44px; height:1px; background:var(--ink); }
.intro { max-width:1440px; margin:auto; padding:142px 5.4vw 121px; border-bottom:1px solid var(--line); }.section-tag { margin-bottom:31px; color:#4b4e49; }.intro-main { display:grid; grid-template-columns:1.2fr .55fr; gap:12vw; align-items:end; }.intro h2,.work h2,.process h2,.contact h2 { margin-bottom:0; font-size:clamp(38px,4.7vw,67px); line-height:1.03; letter-spacing:-.065em; }.intro-main p { color:#4e514c; font-size:15px; line-height:1.75; margin:0 0 6px; }.location-line { margin-top:96px; display:flex; align-items:center; gap:14px; font:500 10px var(--mono); letter-spacing:.08em; }.location-line i { background:var(--orange); display:block; width:6px; height:6px; border-radius:50%; }
.services { max-width:1440px; margin:auto; padding:122px 5.4vw 135px; }.services-head { display:flex; justify-content:space-between; align-items:start; }.services-head p:last-child { font-size:14px; color:#62645f; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:37px; border-top:1px solid var(--ink); }.service-card { min-height:405px; padding:25px 27px 25px 0; display:flex; flex-direction:column; position:relative; border-bottom:1px solid var(--line); }.service-card:not(:last-child) { border-right:1px solid var(--line); padding-right:27px; margin-right:27px; }.service-num { font:500 10px var(--mono); }.service-icon { color:var(--orange); font-size:47px; line-height:1; margin:39px 0 28px; height:49px; }.icon-code { font:800 32px/1 var(--mono); padding-top:6px; }.icon-web { font-size:58px; }.icon-mobile { font-size:63px; font-weight:400; }.service-card h3 { font-size:28px; letter-spacing:-.06em; line-height:1.04; margin-bottom:15px; }.service-card p { color:#5e605b; font-size:13px; line-height:1.7; max-width:260px; }.service-card a { margin-top:auto; font-size:12px; font-weight:800; }.service-card a span { color:var(--orange); font-size:16px; margin-left:6px; }.service-card.featured { background:var(--lime); margin-top:-1px; padding:26px 27px; border-bottom-color:var(--ink); }.service-card.featured:before { content:""; position:absolute; top:0; left:-1px; width:1px; height:100%; background:var(--ink); }.service-card.featured .service-icon { color:var(--ink); }
.work { padding:125px 5.4vw 135px; background:var(--ink); color:#f8f7f2; }.work-intro { display:grid; grid-template-columns:1fr 1.25fr .5fr; align-items:end; max-width:1440px; margin:auto; }.work .section-tag { color:#b6b8b1; align-self:start; }.work h2 span { color:var(--lime); }.work-intro > p:last-child { font-size:14px; color:#b6b8b1; line-height:1.7; margin:0 0 7px; }.project-list { display:grid; grid-template-columns:repeat(3,1fr); gap:21px; max-width:1440px; margin:61px auto 0; }.project { display:block; }.project-visual { height:312px; position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1); }.project:hover .project-visual { transform:translateY(-9px); }.project-automations .project-visual { background:#ccedff; padding:41px 35px; }.automation-window { height:100%; border:1px solid #3672a0; background:#f4fbff; padding:12px; color:#26618d; box-shadow:9px 10px 0 #85c9ed; }.window-top { display:flex; gap:4px; }.window-top i { width:5px; height:5px; border-radius:50%; background:#62acd7; }.tiny-label { display:block; font:500 8px var(--mono); letter-spacing:.06em; margin:29px 0 28px; }.node-row { display:flex; align-items:center; justify-content:space-between; }.node-row b { display:block; width:31px; height:22px; border:1px solid #4391c0; background:#c9efff; }.node-row b:nth-child(2) { background:var(--lime); border-color:#799f21; }.node-line { height:42px; width:1px; background:#4391c0; margin:0 auto; }.node-row.second b:last-child { background:var(--orange); border-color:#c94e33; }.project-khasra .project-visual { background:#ffcfab; display:grid; place-items:center; }.khasra-map { width:67%; height:70%; background:#ffefdf; position:relative; overflow:hidden; border:1px solid #ef8855; box-shadow:12px 12px 0 #f09568; }.map-grid { position:absolute; inset:0; background:linear-gradient(52deg,transparent 49.4%,#edbb9b 50%,transparent 50.6%),linear-gradient(-35deg,transparent 49.4%,#edbb9b 50%,transparent 50.6%); background-size:54px 63px; }.map-plot { position:absolute; border:2px solid #5c7541; background:rgba(202,236,108,.8); transform:rotate(20deg); }.map-plot.one { width:68px; height:52px; top:23%; left:18%; }.map-plot.two { width:70px; height:73px; bottom:10%; right:17%; transform:rotate(-22deg); }.map-plot.three { width:45px; height:37px; top:26%; right:18%; background:rgba(255,160,83,.7); }.khasra-map span { z-index:2; position:absolute; bottom:11px; left:13px; font-size:19px; font-weight:800; letter-spacing:-.07em; }.project-lms .project-visual { background:#c5b9ff; display:grid; place-items:center; }.lms-card { width:65%; height:72%; background:#1f2542; padding:14px; box-shadow:13px 13px 0 #7e6bd3; color:white; }.lms-nav { display:flex; gap:5px; align-items:center; }.lms-nav b { width:31px; height:5px; background:var(--lime); }.lms-nav i { width:10px; height:2px; background:#999cbc; }.lms-heading { font-size:22px; line-height:1; letter-spacing:-.06em; font-weight:800; margin:30px 0 24px; }.lms-bars { display:flex; align-items:end; gap:7px; height:39px; }.lms-bars i { width:16%; background:var(--orange); }.lms-bars i:nth-child(1) { height:31%; }.lms-bars i:nth-child(2) { height:90%; background:var(--lime); }.lms-bars i:nth-child(3) { height:58%; }.lms-bars i:nth-child(4) { height:73%; background:#8bc4ff; }.project-meta { display:flex; justify-content:space-between; align-items:center; margin:18px 0 12px; font:500 10px var(--mono); color:#b7b9b2; }.project-meta span:last-child { color:var(--lime); font-size:17px; }.project h3 { font-size:25px; letter-spacing:-.06em; margin-bottom:6px; }.project > p { color:#b7b9b2; font-size:13px; margin-bottom:0; }
.process { max-width:1440px; padding:128px 5.4vw 133px; margin:auto; }.process-heading { display:grid; grid-template-columns:1fr .58fr; gap:10vw; align-items:end; }.process-heading > p { font-size:14px; color:#62645f; line-height:1.75; margin:0; }.process ol { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; list-style:none; margin:82px 0 0; padding:0; }.process li { padding-top:17px; border-top:1px solid var(--ink); }.process li span { display:block; color:var(--orange); font:500 10px var(--mono); margin-bottom:44px; }.process li strong { display:block; font-size:20px; letter-spacing:-.045em; margin-bottom:11px; }.process li p { font-size:13px; color:#62645f; line-height:1.72; max-width:285px; }
.contact { background:var(--orange); min-height:610px; padding:128px 5.4vw 75px; position:relative; overflow:hidden; }.contact .section-tag { color:#6b1e0c; }.contact h2 { font-size:clamp(59px,8.5vw,122px); line-height:.9; position:relative; z-index:1; }.contact h2 span { color:var(--ink); }.contact > p:not(.section-tag) { font-size:16px; font-weight:600; margin:30px 0; position:relative; z-index:1; }.button-light { color:white; background:var(--ink); position:relative; z-index:1; }.contact-star { position:absolute; font-size:min(44vw,600px); line-height:1; right:-.12em; bottom:-.28em; color:#ff876a; transform:rotate(12deg); }
footer { min-height:168px; padding:48px 5.4vw 35px; background:var(--ink); color:white; display:grid; grid-template-columns:1fr 1.2fr 1fr; align-items:start; gap:18px; } footer .brand svg { fill:var(--lime); } footer .brand > span > span { color:var(--lime); } footer p { font-size:12px; color:#aeb0aa; line-height:1.65; margin:5px 0 0; } .company-legal { display:inline-block; margin-top:8px; color:#747871; font:500 9px/1.65 var(--mono); letter-spacing:.015em; } footer > div { display:flex; justify-content:space-between; font:500 10px var(--mono); color:#aeb0aa; margin-top:8px; } footer a:hover { color:var(--lime); }
@media (max-width:760px) { .site-header { height:73px; padding:0 23px; }.nav-links { display:none; }.menu-toggle { width:44px; height:44px; padding:11px; display:flex; flex-direction:column; justify-content:center; gap:5px; border:0; background:transparent; cursor:pointer; }.menu-toggle span:not(.sr-only) { height:2px; width:22px; display:block; background:var(--ink); transition:.2s; }.nav-links.is-open { position:absolute; display:flex; flex-direction:column; align-items:flex-start; gap:23px; top:62px; left:15px; right:15px; padding:26px; background:var(--paper); box-shadow:0 12px 30px rgba(0,0,0,.13); }.nav-cta { margin:2px 0 0; }.hero { min-height:auto; padding:48px 23px 0; display:block; }.eyebrow { margin-bottom:25px; }h1 { font-size:52px; }.hero-text { font-size:15px; }.hero-actions { gap:17px; flex-wrap:wrap; margin-top:28px; }.button { padding:14px 17px; font-size:12px; }.hero-art { height:402px; min-height:0; margin:55px -23px 0; }.card-back { transform:translate(-88%,-46%) rotate(-12deg); }.card-front { transform:translate(-18%,-45%) rotate(8deg); }.hero-scroll { display:none; }.intro { padding:82px 23px 67px; }.intro-main,.work-intro,.process-heading { display:block; }.intro h2,.work h2,.process h2 { font-size:43px; }.intro-main p { margin-top:25px; }.location-line { margin-top:57px; flex-wrap:wrap; gap:9px; }.services { padding:76px 23px 83px; }.services-head { display:block; }.services-head p:last-child { margin-top:-16px; }.service-grid { display:block; margin-top:30px; }.service-card,.service-card.featured { min-height:290px; padding:23px 0; margin:0; border-right:0; }.service-card.featured { margin-left:-23px; margin-right:-23px; padding-left:23px; padding-right:23px; }.service-card.featured:before { display:none; }.service-icon { margin:28px 0 22px; }.service-card p { max-width:330px; }.work { padding:78px 23px 83px; }.work-intro > p:last-child { margin-top:25px; max-width:240px; }.project-list { display:block; margin-top:44px; }.project { margin-bottom:47px; }.project-visual { height:285px; }.process { padding:78px 23px 80px; }.process-heading > p { margin-top:25px; }.process ol { display:block; margin-top:50px; }.process li { padding:17px 0 29px; }.process li span { margin-bottom:20px; }.process li p { margin-bottom:0; }.contact { min-height:500px; padding:83px 23px 60px; }.contact h2 { font-size:68px; }.contact > p:not(.section-tag) { margin:25px 0; }.contact-star { font-size:280px; right:-83px; bottom:-42px; } footer { padding:37px 23px; min-height:auto; display:block; }footer p { margin:21px 0 27px; } footer > div { margin:0; } }
@media (min-width:761px) and (max-width:1050px) { .hero { grid-template-columns:1fr .75fr; }.hero-art { margin-left:1vw; }.card-front { transform:translate(-35%,-45%) rotate(8deg); }.services,.intro,.process,.contact,.work { padding-left:4vw; padding-right:4vw; }.site-header { padding:0 4vw; } }