@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap');
.funnel-display-<uniquifier> {
  font-family: "Funnel Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{font-family:'Manrope',Arial,sans-serif;background:#050505;color:#fff;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}
section{padding:110px 56px}
.container{max-width:1440px;margin:auto}
.eyebrow{font-family:'Space Grotesk',sans-serif;color:#2f6bff;text-transform:uppercase;letter-spacing:2px;font-size:14px;font-weight:700;margin-bottom:26px}
h1,h2,h3{font-family:'Space Grotesk',sans-serif}
h1{font-size:clamp(56px,8vw,118px);line-height:.92;letter-spacing:-6px;max-width:980px;font-weight:700}
h2{font-size:clamp(38px,5vw,72px);line-height:1.02;letter-spacing:-3px;margin-bottom:32px;font-weight:700}
h3{font-size:28px;letter-spacing:-1px}
h1 span,h2 span{color:#2f6bff}
p{color:rgba(255,255,255,.72);line-height:1.7;font-size:18px}

header{position:fixed;top:0;width:100%;z-index:1000;background:rgba(5,5,5,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{max-width:1440px;height:88px;margin:auto;padding:0 56px;display:flex;justify-content:space-between;align-items:center}
.logo{font-family:'Funnel Display',sans-serif;font-size:40px;font-weight:700;letter-spacing:-4px;position:relative;z-index:10001}
.logo span{color:#2f6bff;margin-left: -3px;}
.menu{display:flex;gap:42px;align-items:center;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.menu a{opacity:.78;transition:.35s ease-in-out}
.menu a:hover{opacity:1;color:#2f6bff}
.cta,.btn{border:1px solid #2f6bff;padding:15px 24px;border-radius:6px}
.hamburger{display:none;width:34px;height:24px;position:relative;cursor:pointer;z-index:10001}
.hamburger span{position:absolute;width:100%;height:2px;background:#fff;left:0;transition:.45s ease-in-out}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:11px}
.hamburger span:nth-child(3){top:22px}
.hamburger.active span:nth-child(1){top:11px;transform:rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){top:11px;transform:rotate(-45deg)}

.btn{display:inline-flex;align-items:center;gap:16px;color:#fff;font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;transition:.35s ease-in-out}
.btn.primary{background:#2f6bff}
.btn:hover{transform:translateY(-3px);gap:24px}
.btns{display:flex;gap:18px;flex-wrap:wrap}

.hero p{max-width:680px;font-size:21px;margin:36px 0 48px}
.hero-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);margin-top:80px}
.meta-item{background:rgba(10,10,10,.92);padding:28px}
.meta-item small{display:block;color:#2f6bff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;margin-bottom:10px}
.meta-item strong{font-size:18px;font-weight:700}

.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:110px;align-items:start}
.large-text{font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,4vw,58px);line-height:1.08;letter-spacing:-2px;color:#fff}
.side-list{display:grid;gap:22px}
.side-list div{border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:22px}
.side-list small{color:#2f6bff;text-transform:uppercase;font-size:12px;letter-spacing:1.5px;font-weight:800}
.side-list p{font-size:16px;margin-top:8px}

.showcase{background:#080808}
.full-image{width:100%;height:auto;display:block;border:1px solid rgba(255,255,255,.1);background:#080808}

.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.process-card{background:#0c0c0c;border:1px solid rgba(255,255,255,.1);padding:34px;min-height:300px;transition:.45s ease-in-out}
.process-card:hover{transform:translateY(-10px);border-color:rgba(47,107,255,.7)}
.process-card span{display:flex;width:58px;height:58px;border:1px solid rgba(47,107,255,.7);border-radius:50%;align-items:center;justify-content:center;color:#2f6bff;font-weight:800;margin-bottom:28px}
.process-card h3{margin-bottom:14px}
.process-card p{font-size:15px}

.gallery{background:#050505;overflow:hidden; padding-top: 0!important; margin-top: -2px;}
.gallery-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:42px}
.gallery-head p{max-width:520px}
.gallery-viewport{width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.gallery-viewport::-webkit-scrollbar{display:none}
.gallery-track{display:flex;gap:28px;width:max-content;padding:0 max(56px,calc((100vw - 1440px)/2 + 56px))}
.gallery-item{width:min(700px,82vw);flex:0 0 auto;scroll-snap-align:center;border:1px solid rgba(255,255,255,.1);background:#080808;display:flex;align-items:center;justify-content:center}
.gallery-item img{width:100%;height:auto;display:block;object-fit:contain}
.gallery-controls{display:table;gap:12px;margin: 28px auto;}
.gallery-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;cursor:pointer;font-size:20px;transition:.35s ease-in-out}
.gallery-btn:hover{border-color:#2f6bff;color:#2f6bff}
.gallery-btn:disabled{opacity:.35;cursor:not-allowed}

.deliverables{background:#080808}
.deliverable-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.deliverable{background:#111;padding:34px;min-height:180px}
.deliverable small{color:#2f6bff;text-transform:uppercase;font-size:12px;letter-spacing:1.4px;font-weight:800}
.deliverable h3{margin:12px 0}
.deliverable p{font-size:15px}

.result{background:#050505}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.result-number{font-family:'Space Grotesk',sans-serif;font-size:clamp(88px,13vw,180px);line-height:.8;color:#2f6bff;letter-spacing:-8px}
.next-project{background:radial-gradient(circle at 75% 40%,rgba(47,107,255,.25),transparent 35%),#050505;text-align:center}
.next-project h2{max-width:850px;margin:0 auto 32px}
.next-project p{max-width:620px;margin:0 auto 42px}

footer{padding:42px 56px;background:#050505;border-top:1px solid rgba(255,255,255,.08)}
.footer-content{max-width:1440px;margin:auto;display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.5);font-size:13px}

.reveal{opacity:0;transform:translateY(70px);transition:opacity .85s ease-in-out,transform .85s ease-in-out}
.reveal.show{opacity:1;transform:translateY(0)}
.parallax{will-change:transform}
.displayflex{display:flex;flex-wrap: wrap; flex-direction: row; justify-content: space-evenly; align-items: flex-start;;}

@media(max-width:1000px){
.hero-meta,.intro-grid,.process-grid,.deliverable-grid,.result-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:760px){

.nav{padding:0 24px}
.hamburger{display:block}
.menu{position:fixed;top:0;left:0;width:100vw;height:100dvh;min-height:100vh;background:#050505;z-index:9999;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:28px;padding:140px 24px 56px;overflow-y:auto;transform:translateX(100%);transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.menu.active{transform:translateX(0)}
.menu a{font-size:26px;line-height:1.1;opacity:1;text-align:center}
.menu .cta{font-size:14px;margin-top:24px;width:100%;max-width:320px;text-align:center;display:flex;justify-content:center}
section,footer{padding-left:24px;padding-right:24px}
h1{letter-spacing:-3px}
.hero-meta,.intro-grid,.process-grid,.deliverable-grid,.result-grid{grid-template-columns:1fr}
.gallery-head{flex-direction:column;align-items:flex-start}
.gallery-track{padding:0 24px;gap:16px}
.gallery-item{width:86vw}
.footer-content{flex-direction:column;gap:20px}
}