Meta Artron<\/title>\r\n\r\n<style>\r\nbody {\r\n margin: 0;\r\n background: #8B0000;\r\n font-family: 'Poppins', sans-serif;\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* CANVAS *\/\r\n#bg {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 0;\r\n}\r\n\r\n\/* SCROLL *\/\r\n.scroll-container {\r\n position: relative;\r\n z-index: 10;\r\n}\r\n\r\n.section {\r\n height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n}\r\n\r\n\/* TYPOGRAPHY LAYER *\/\r\n.text-layer {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n}\r\n\r\n.text-layer h1 {\r\n position: absolute;\r\n margin: 0;\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n}\r\n\r\n\/* LAYERS *\/\r\n.layer1 {\r\n font-size: 11vw;\r\n color: #000000;\r\n bottom: 50%;\r\n left: 10%;\r\n}\r\n\r\n\r\n\/* ABOUT TEXT *\/\r\n.about h2 {\r\n color: #000000;\r\n font-size: 4vw;\r\n font-weight: 300;\r\n opacity: 0;\r\n transform: translateY(80px);\r\n transition: all 1s ease;\r\n}\r\n\r\n.section.active .about h2,\r\n.about.active h2 {\r\n opacity: 1;\r\n transform: translateY(0);\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<canvas id=\"bg\"><\/canvas>\r\n\r\n<div class=\"scroll-container\">\r\n\r\n \r\n <section class=\"section hero\">\r\n <div class=\"text-layer\">\r\n <h1 class=\"layer1\">META ARTRON<\/h1>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section about\">\r\n <h2>Where Art meets function.<\/h2>\r\n <\/section>\r\n\r\n<\/div>\r\n\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r134\/three.min.js\"><\/script>\r\n\r\n<script>\r\n\/\/ THREE BACKGROUND\r\nconst scene = new THREE.Scene();\r\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth\/window.innerHeight, 0.1, 1000);\r\nconst renderer = new THREE.WebGLRenderer({\r\n canvas: document.getElementById(\"bg\"),\r\n alpha:true\r\n});\r\n\r\nrenderer.setSize(window.innerWidth, window.innerHeight);\r\ncamera.position.z = 8;\r\n\r\nconst geometry = new THREE.PlaneGeometry(20,20,100,100);\r\nconst material = new THREE.MeshBasicMaterial({\r\n color:0x8b0000,\r\n wireframe:true\r\n});\r\n\r\nconst mesh = new THREE.Mesh(geometry, material);\r\nscene.add(mesh);\r\n\r\nlet t=0;\r\n\r\nfunction animate(){\r\n requestAnimationFrame(animate);\r\n t+=0.02;\r\n\r\n let pos = mesh.geometry.attributes.position;\r\n\r\n for(let i=0;i<pos.count;i++){\r\n let x = pos.getX(i);\r\n let y = pos.getY(i);\r\n pos.setZ(i, Math.sin(x+t)+Math.cos(y+t));\r\n }\r\n\r\n pos.needsUpdate=true;\r\n\r\n renderer.render(scene,camera);\r\n}\r\n\r\nanimate();\r\n\r\n\/\/ SCROLL INTERACTION\r\nconst sections = document.querySelectorAll(\".section\");\r\n\r\nwindow.addEventListener(\"scroll\", () => {\r\n let scrollY = window.scrollY;\r\n\r\n sections.forEach((section) => {\r\n const offset = section.offsetTop;\r\n const height = section.offsetHeight;\r\n\r\n if (scrollY > offset - height \/ 2 && scrollY < offset + height \/ 2) {\r\n section.classList.add(\"active\");\r\n } else {\r\n section.classList.remove(\"active\");\r\n }\r\n });\r\n});\r\n\r\n\/\/ RESPONSIVE\r\nwindow.addEventListener(\"resize\", () => {\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n camera.aspect = window.innerWidth \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-648b327 elementor-widget elementor-widget-html\" data-id=\"648b327\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Meta Artron \u2014 Where Art Becomes Architecture<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n:root {\r\n --bg: #F5F3EF;\r\n --bg2: #ECEAE4;\r\n --black: #0F0F0F;\r\n --red: #CC0000;\r\n --muted: #888;\r\n --border: #D8D5CE;\r\n --white: #fff;\r\n}\r\n*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}\r\nhtml{scroll-behavior:smooth}\r\nbody{background:var(--bg);color:var(--black);font-family:'Inter',sans-serif;font-weight:300;overflow-x:hidden;cursor:none}\r\n\r\n\/* CURSOR *\/\r\n#cur{position:fixed;width:10px;height:10px;background:var(--red);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s,height .25s}\r\n#cur-ring{position:fixed;width:36px;height:36px;border:1px solid rgba(204,0,0,.3);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:all .18s ease-out}\r\n\r\n\/* NAV *\/\r\nnav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:20px 52px;background:rgba(245,243,239,.94);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}\r\nnav.scrolled{border-color:var(--border)}\r\n.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}\r\n.nav-logo svg{width:66px;height:25px}\r\n.nav-brand{font-family:'Inter',sans-serif;font-weight:500;font-size:12px;letter-spacing:.2em;color:var(--black);text-transform:uppercase}\r\n.nav-links{display:flex;align-items:center;gap:36px}\r\n.nav-links a{font-size:13px;font-weight:400;color:var(--black);text-decoration:none;letter-spacing:.04em;position:relative;transition:color .25s}\r\n.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--red);transition:width .3s}\r\n.nav-links a:hover{color:var(--red)}\r\n.nav-links a:hover::after{width:100%}\r\n.nav-cta{display:flex;align-items:center;gap:8px;background:var(--black);color:var(--white);padding:11px 24px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .3s;border:none;cursor:none}\r\n.nav-cta:hover{background:var(--red)}\r\n.nav-cta svg{width:13px;height:13px}\r\n.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:none;padding:4px}\r\n.hamburger span{width:24px;height:1px;background:var(--black);display:block;transition:.3s}\r\n.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}\r\n.hamburger.open span:nth-child(2){opacity:0}\r\n.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}\r\n\r\n\/* OVERLAY *\/\r\n#overlay{position:fixed;inset:0;background:var(--black);z-index:190;display:flex;flex-direction:column;justify-content:center;padding:0 10vw;opacity:0;pointer-events:none;transition:opacity .4s}\r\n#overlay.open{opacity:1;pointer-events:all}\r\n#overlay a{font-family:'Playfair Display',serif;font-size:clamp(36px,7vw,82px);font-weight:700;color:var(--white);text-decoration:none;border-bottom:1px solid #1f1f1f;padding:14px 0;display:block;transition:color .25s,padding-left .3s}\r\n#overlay a:hover{color:var(--red);padding-left:14px}\r\n\r\n\/* HERO *\/\r\n#hero{min-height:100vh;padding:150px 52px 80px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}\r\n.hero-logo-bg{position:absolute;right:-60px;top:50%;transform:translateY(-50%);opacity:.045;pointer-events:none}\r\n.hero-logo-bg svg{width:580px;height:219px}\r\n.hero-tag{font-size:11px;letter-spacing:.38em;color:var(--red);text-transform:uppercase;margin-bottom:28px;display:flex;align-items:center;gap:12px}\r\n.hero-tag::before{content:'';width:30px;height:1px;background:var(--red)}\r\n.hero-title{font-family:'Playfair Display',serif;font-size:clamp(58px,9.5vw,134px);font-weight:900;line-height:.93;letter-spacing:-.025em;max-width:920px}\r\n.hero-title em{font-style:italic;color:var(--red)}\r\n.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:60px;flex-wrap:wrap;gap:20px}\r\n.hero-desc{font-size:15px;line-height:1.8;color:#555;max-width:400px}\r\n.hero-scroll{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}\r\n.hero-scroll-line{width:50px;height:1px;background:var(--muted);animation:linesway 2.2s ease-in-out infinite}\r\n@keyframes linesway{0%,100%{width:50px}50%{width:82px}}\r\n\r\n\/* MARQUEE *\/\r\n.marquee-wrap{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:17px 0;background:var(--bg)}\r\n.marquee-track{display:flex;animation:marquee 24s linear infinite;width:max-content;white-space:nowrap}\r\n.marquee-track span{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;font-style:italic;color:var(--black);padding:0 26px;letter-spacing:.02em}\r\n.marquee-track span.dot{color:var(--red);font-style:normal;font-size:9px;vertical-align:middle}\r\n@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}\r\n\r\n\/* SECTION LABEL *\/\r\n.sec-lbl{font-size:10px;letter-spacing:.45em;color:var(--red);text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:36px}\r\n.sec-lbl::before{content:'';width:22px;height:1px;background:var(--red)}\r\n\r\n\/* WORK *\/\r\n#work{padding:96px 52px}\r\n.work-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px}\r\n.work-title{font-family:'Playfair Display',serif;font-size:clamp(36px,5vw,62px);font-weight:900;line-height:1}\r\n.work-title em{font-style:italic;color:var(--red)}\r\n.see-all{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--black);border-bottom:1px solid var(--black);padding-bottom:3px;transition:color .25s,border-color .25s}\r\n.see-all:hover{color:var(--red);border-color:var(--red)}\r\n.see-all svg{width:13px;transition:transform .3s}\r\n.see-all:hover svg{transform:translate(3px,-3px)}\r\n\r\n.pgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:3px}\r\n.pgrid-r{display:grid;grid-template-rows:1fr 1fr;gap:3px}\r\n.proj{position:relative;overflow:hidden;background:#ccc;cursor:none;display:block;text-decoration:none}\r\n.proj-big{aspect-ratio:3\/3.4}\r\n.proj-sm{aspect-ratio:16\/9}\r\n.proj img{width:100%;height:100%;object-fit:cover;filter:brightness(.85) saturate(.9);transition:transform .72s cubic-bezier(.25,.46,.45,.94),filter .72s;display:block}\r\n.proj:hover img{transform:scale(1.06);filter:brightness(.65) saturate(.8)}\r\n.proj-info{position:absolute;bottom:0;left:0;right:0;padding:26px 26px 22px;background:linear-gradient(to top,rgba(0,0,0,.72),transparent);transform:translateY(10px);opacity:0;transition:transform .4s,opacity .4s}\r\n.proj:hover .proj-info{transform:translateY(0);opacity:1}\r\n.proj-cat{font-size:9px;letter-spacing:.3em;color:rgba(255,255,255,.6);text-transform:uppercase;margin-bottom:5px}\r\n.proj-name{font-family:'Playfair Display',serif;font-size:21px;font-weight:700;color:#fff;line-height:1.2}\r\n.proj-loc{font-size:11px;color:rgba(255,255,255,.5);margin-top:4px}\r\n.proj-idx{position:absolute;top:18px;left:22px;font-size:9px;letter-spacing:.2em;color:rgba(255,255,255,.28)}\r\n\r\n\/* WHY *\/\r\n#why{padding:96px 52px;background:var(--black);color:var(--white);border-top:1px solid #181818}\r\n.why-inner{display:grid;grid-template-columns:1fr 1.55fr;gap:80px;align-items:start}\r\n.why-heading{font-family:'Playfair Display',serif;font-size:clamp(30px,4vw,52px);font-weight:900;line-height:1.1;color:var(--white)}\r\n.why-heading em{font-style:italic;color:var(--red)}\r\n.why-body{font-size:14px;line-height:1.9;color:#888;margin-top:22px;max-width:420px}\r\n.why-cta{display:inline-flex;align-items:center;gap:9px;margin-top:34px;background:var(--red);color:#fff;padding:13px 28px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .3s}\r\n.why-cta:hover{background:#aa0000}\r\n.why-imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px}\r\n.why-img{aspect-ratio:4\/3;overflow:hidden}\r\n.why-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.65) grayscale(.2);transition:filter .5s}\r\n.why-img:hover img{filter:brightness(.85) grayscale(0)}\r\n\r\n\/* CAPABILITIES *\/\r\n#caps{padding:80px 52px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}\r\n.caps-h{font-family:'Playfair Display',serif;font-size:clamp(30px,4vw,52px);font-weight:900;margin-bottom:48px}\r\n.caps-h em{font-style:italic;color:var(--red)}\r\n.caps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}\r\n.cap{padding:38px 26px 34px;border-right:1px solid var(--border);position:relative;overflow:hidden;cursor:none;transition:background .35s}\r\n.cap:first-child{border-left:1px solid var(--border)}\r\n.cap:hover{background:var(--black)}\r\n.cap-num{font-size:10px;letter-spacing:.3em;color:var(--muted);margin-bottom:46px;transition:color .3s}\r\n.cap:hover .cap-num{color:rgba(255,255,255,.3)}\r\n.cap-title{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;line-height:1.25;margin-bottom:12px;transition:color .3s}\r\n.cap:hover .cap-title{color:#fff}\r\n.cap-desc{font-size:11px;line-height:1.8;color:var(--muted);transition:color .3s}\r\n.cap:hover .cap-desc{color:rgba(255,255,255,.45)}\r\n.cap-arr{position:absolute;bottom:26px;right:22px;font-size:16px;color:var(--muted);transition:color .3s,transform .3s}\r\n.cap:hover .cap-arr{color:var(--red);transform:translate(3px,-3px)}\r\n\r\n\/* ABOUT *\/\r\n#about{padding:96px 52px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;border-top:1px solid var(--border)}\r\n.about-img-w{position:relative}\r\n.about-img{width:100%;aspect-ratio:4\/5;object-fit:cover;display:block}\r\n.about-badge{position:absolute;bottom:-18px;right:-18px;background:var(--red);color:#fff;width:116px;height:116px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;text-align:center;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}\r\n.about-badge strong{font-size:26px;font-weight:700;display:block;letter-spacing:-.02em}\r\n.about-heading{font-family:'Playfair Display',serif;font-size:clamp(30px,3.5vw,48px);font-weight:900;line-height:1.1;margin-bottom:22px}\r\n.about-heading em{font-style:italic;color:var(--red)}\r\n.about-body{font-size:14px;line-height:1.9;color:#555;margin-bottom:30px}\r\n.about-stats{display:flex;gap:0;margin-bottom:34px}\r\n.astat{flex:1;padding:18px 0;border-top:1px solid var(--border)}\r\n.astat:not(:last-child){margin-right:22px}\r\n.astat-n{font-family:'Playfair Display',serif;font-size:38px;font-weight:900;color:var(--black);line-height:1}\r\n.astat-l{font-size:10px;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-top:4px}\r\n.btn-out{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--black);padding:12px 26px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--black);transition:background .3s,color .3s}\r\n.btn-out:hover{background:var(--black);color:#fff}\r\n\r\n\/* TICKER *\/\r\n#clients{padding:48px 0;background:var(--black);overflow:hidden;border-top:1px solid #181818}\r\n.ticker-track{display:flex;align-items:center;gap:56px;animation:ticker 28s linear infinite;width:max-content}\r\n.ticker-item{font-family:'Playfair Display',serif;font-size:13px;font-weight:700;color:rgba(255,255,255,.2);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;transition:color .3s}\r\n.ticker-item:hover{color:rgba(255,255,255,.65)}\r\n.t-dot{color:var(--red);font-size:6px;flex-shrink:0}\r\n@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}\r\n\r\n\/* INSIGHTS *\/\r\n#insights{padding:96px 52px}\r\n.ins-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px}\r\n.ins-title{font-family:'Playfair Display',serif;font-size:clamp(32px,4.5vw,58px);font-weight:900;line-height:1}\r\n.ins-title em{font-style:italic;color:var(--red)}\r\n.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}\r\n.ins-card{cursor:none}\r\n.ins-img{aspect-ratio:3\/2;overflow:hidden;margin-bottom:18px;background:var(--bg2)}\r\n.ins-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}\r\n.ins-card:hover .ins-img img{transform:scale(1.06)}\r\n.ins-date{font-size:10px;letter-spacing:.2em;color:var(--muted);margin-bottom:9px}\r\n.ins-name{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;line-height:1.3;color:var(--black);transition:color .25s}\r\n.ins-card:hover .ins-name{color:var(--red)}\r\n\r\n\/* CTA *\/\r\n#cta{padding:120px 52px;background:var(--black);color:#fff;display:flex;flex-direction:column;align-items:center;text-align:center;border-top:1px solid #181818}\r\n.cta-tag{font-size:10px;letter-spacing:.45em;color:var(--red);text-transform:uppercase;margin-bottom:26px}\r\n.cta-heading{font-family:'Playfair Display',serif;font-size:clamp(42px,8.5vw,112px);font-weight:900;line-height:.93;letter-spacing:-.025em;margin-bottom:48px}\r\n.cta-heading em{font-style:italic;color:var(--red)}\r\n.cta-btns{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}\r\n.cta-main{background:var(--red);color:#fff;padding:16px 40px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .3s}\r\n.cta-main:hover{background:#aa0000}\r\n.cta-ghost{border:1px solid rgba(255,255,255,.22);color:#fff;padding:15px 32px;font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:border-color .3s}\r\n.cta-ghost:hover{border-color:#fff}\r\n\r\n\/* FOOTER *\/\r\nfooter{background:var(--black);color:#fff;border-top:1px solid #181818;padding:68px 52px 38px}\r\n.ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid #1c1c1c;margin-bottom:32px}\r\n.ft-brand{font-family:'Playfair Display',serif;font-size:22px;font-weight:900;margin-bottom:14px}\r\n.ft-sub{font-size:13px;color:#555;line-height:1.7}\r\n.ft-col-t{font-size:10px;letter-spacing:.35em;color:var(--muted);text-transform:uppercase;margin-bottom:18px}\r\n.ft-col a{display:block;font-size:13px;color:#666;text-decoration:none;margin-bottom:9px;transition:color .25s}\r\n.ft-col a:hover{color:#fff}\r\n.ft-col p{font-size:13px;color:#555;line-height:1.7}\r\n.ft-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}\r\n.ft-copy{font-size:11px;color:#3a3a3a;letter-spacing:.08em}\r\n.ft-logo{opacity:.25}\r\n.ft-logo svg{width:76px;height:29px}\r\n.btt{display:flex;align-items:center;gap:6px;font-size:10px;color:#3a3a3a;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;transition:color .25s}\r\n.btt:hover{color:#fff}\r\n\r\n\/* REVEAL *\/\r\n.rev{opacity:0;transform:translateY(34px);transition:opacity .85s ease,transform .85s ease}\r\n.rev.in{opacity:1;transform:translateY(0)}\r\n.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}\r\n\r\n\/* RESPONSIVE *\/\r\n@media(max-width:1024px){\r\n nav{padding:18px 22px}\r\n .nav-links{display:none}\r\n .hamburger{display:flex}\r\n #hero,#work,#why,#caps,#about,#insights,#cta,footer{padding-left:22px;padding-right:22px}\r\n .pgrid{grid-template-columns:1fr}\r\n .pgrid-r{grid-template-rows:auto;grid-template-columns:1fr 1fr}\r\n .why-inner,#about{grid-template-columns:1fr;gap:38px}\r\n .caps-grid{grid-template-columns:repeat(2,1fr)}\r\n .ins-grid{grid-template-columns:1fr 1fr}\r\n .ft{grid-template-columns:1fr 1fr;gap:36px}\r\n}\r\n@media(max-width:600px){\r\n .caps-grid{grid-template-columns:1fr}\r\n .ins-grid{grid-template-columns:1fr}\r\n .pgrid-r{grid-template-columns:1fr}\r\n .why-imgs{grid-template-columns:1fr}\r\n .about-stats{flex-wrap:wrap}\r\n .ft{grid-template-columns:1fr;gap:26px}\r\n .hero-logo-bg{display:none}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"cur\"><\/div>\r\n<div id=\"cur-ring\"><\/div>\r\n\r\n\r\n<nav id=\"nav\">\r\n <a href=\"#\" class=\"nav-logo\">\r\n <svg viewBox=\"0 0 420 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <polygon points=\"8,152 46,152 88,44 130,152 168,152 168,130 130,130 88,8 46,130 8,130\" fill=\"#0F0F0F\"\/>\r\n <polygon points=\"178,152 216,152 258,44 300,152 358,152 358,130 300,130 258,8 216,130 178,130\" fill=\"#CC0000\"\/>\r\n <polygon points=\"232,98 284,98 258,40\" fill=\"#F5F3EF\"\/>\r\n <rect x=\"236\" y=\"106\" width=\"44\" height=\"18\" fill=\"#CC0000\"\/>\r\n <polygon points=\"280,106 358,106 358,124 310,124 310,138 332,138 332,152 280,152 280,138 280,124 280,106\" fill=\"#CC0000\"\/>\r\n <rect x=\"296\" y=\"110\" width=\"44\" height=\"12\" fill=\"#F5F3EF\"\/>\r\n <\/svg>\r\n <span class=\"nav-brand\">Meta Artron<\/span>\r\n <\/a>\r\n <div class=\"nav-links\">\r\n <a href=\"#work\">Work<\/a>\r\n <a href=\"#about\">About<\/a>\r\n <a href=\"#caps\">Services<\/a>\r\n <a href=\"#insights\">Insights<\/a>\r\n <\/div>\r\n <a href=\"#cta\" class=\"nav-cta\">Contact\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg>\r\n <\/a>\r\n <button class=\"hamburger\" id=\"ham\"><span><\/span><span><\/span><span><\/span><\/button>\r\n<\/nav>\r\n\r\n<div id=\"overlay\">\r\n <a href=\"#work\">Work<\/a>\r\n <a href=\"#about\">About<\/a>\r\n <a href=\"#caps\">Services<\/a>\r\n <a href=\"#insights\">Insights<\/a>\r\n <a href=\"#cta\">Contact<\/a>\r\n<\/div>\r\n\r\n\r\n<section id=\"hero\">\r\n <div class=\"hero-logo-bg\">\r\n <svg viewBox=\"0 0 420 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <polygon points=\"8,152 46,152 88,44 130,152 168,152 168,130 130,130 88,8 46,130 8,130\" fill=\"#0F0F0F\"\/>\r\n <polygon points=\"178,152 216,152 258,44 300,152 358,152 358,130 300,130 258,8 216,130 178,130\" fill=\"#CC0000\"\/>\r\n <polygon points=\"232,98 284,98 258,40\" fill=\"#F5F3EF\"\/>\r\n <rect x=\"236\" y=\"106\" width=\"44\" height=\"18\" fill=\"#CC0000\"\/>\r\n <polygon points=\"280,106 358,106 358,124 310,124 310,138 332,138 332,152 280,152 280,138 280,124 280,106\" fill=\"#CC0000\"\/>\r\n <rect x=\"296\" y=\"110\" width=\"44\" height=\"12\" fill=\"#F5F3EF\"\/>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"hero-tag\">Ar. Ajay Patel \u00b7 Mumbai, India<\/p>\r\n <h1 class=\"hero-title rev\">Where <em>Art<\/em><br>Becomes<br>Architecture<\/h1>\r\n <div class=\"hero-bottom rev d1\">\r\n <p class=\"hero-desc\">A design intelligence studio rooted in geometry, precision and spatial thinking \u2014 creating spaces that feel inevitable.<\/p>\r\n <div class=\"hero-scroll\"><div class=\"hero-scroll-line\"><\/div>Scroll to explore<\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<div class=\"marquee-wrap\">\r\n <div class=\"marquee-track\">\r\n <span>Architectural Planning<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>3D Visualization<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Interior Design<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Product Design<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Model Making<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Parametric Design<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Luxury Spaces<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Architectural Planning<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>3D Visualization<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Interior Design<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Product Design<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Model Making<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Parametric Design<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Luxury Spaces<\/span><span class=\"dot\">\u25cf<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<section id=\"work\">\r\n <div class=\"work-header rev\">\r\n <div>\r\n <p class=\"sec-lbl\">Featured Projects<\/p>\r\n <h2 class=\"work-title\">Case studies &<br><em>Featured<\/em> Projects<\/h2>\r\n <\/div>\r\n <a href=\"#cta\" class=\"see-all\">Explore more\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <div class=\"pgrid rev d1\">\r\n <a href=\"#\" class=\"proj proj-big\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600585154340-be6161a56a0c?w=900&q=80\" alt=\"\">\r\n <span class=\"proj-idx\">01<\/span>\r\n <div class=\"proj-info\">\r\n <p class=\"proj-cat\">Residential \u00b7 Planning<\/p>\r\n <h3 class=\"proj-name\">Cortex Residence<\/h3>\r\n <p class=\"proj-loc\">Hyderabad, 2024<\/p>\r\n <\/div>\r\n <\/a>\r\n <div class=\"pgrid-r\">\r\n <a href=\"#\" class=\"proj proj-sm\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618221195710-dd6b41faaea6?w=700&q=80\" alt=\"\">\r\n <span class=\"proj-idx\">02<\/span>\r\n <div class=\"proj-info\">\r\n <p class=\"proj-cat\">Interior Design<\/p>\r\n <h3 class=\"proj-name\">Axiom Penthouse<\/h3>\r\n <p class=\"proj-loc\">Hyderabad, 2024<\/p>\r\n <\/div>\r\n <\/a>\r\n <a href=\"#\" class=\"proj proj-sm\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1486325212027-8081e485255e?w=700&q=80\" alt=\"\">\r\n <span class=\"proj-idx\">03<\/span>\r\n <div class=\"proj-info\">\r\n <p class=\"proj-cat\">Commercial \u00b7 3D Rendering<\/p>\r\n <h3 class=\"proj-name\">Node Office Tower<\/h3>\r\n <p class=\"proj-loc\">Secunderabad, 2023<\/p>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"why\">\r\n <div class=\"why-inner\">\r\n <div class=\"rev\">\r\n <p class=\"sec-lbl\" style=\"color:var(--red)\">Why Meta Artron<\/p>\r\n <h2 class=\"why-heading\">Why leading clients<br>partner with <em>us.<\/em><\/h2>\r\n <p class=\"why-body\">From precision architectural plans to cinematic 3D renders and handcrafted models, we bring design intelligence that goes beyond aesthetics \u2014 spaces rooted in geometry and lived experience.<\/p>\r\n <a href=\"#cta\" class=\"why-cta\">Discover our work\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <div class=\"why-imgs rev d2\">\r\n <div class=\"why-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6c25118c?w=500&q=80\" alt=\"\"><\/div>\r\n <div class=\"why-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1503387762-592deb58ef4e?w=500&q=80\" alt=\"\"><\/div>\r\n <div class=\"why-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524758631624-e2822e304c36?w=500&q=80\" alt=\"\"><\/div>\r\n <div class=\"why-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1531971589569-0d9370cbe1e5?w=500&q=80\" alt=\"\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"caps\">\r\n <p class=\"sec-lbl rev\">What We Create<\/p>\r\n <h2 class=\"caps-h rev d1\">Our <em>Capabilities<\/em><\/h2>\r\n <div class=\"caps-grid rev d2\">\r\n <div class=\"cap\"><p class=\"cap-num\">01<\/p><h3 class=\"cap-title\">Architectural Planning<\/h3><p class=\"cap-desc\">Spatial systems designed with precision, logic and vision \u2014 from site analysis to built form.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div>\r\n <div class=\"cap\"><p class=\"cap-num\">02<\/p><h3 class=\"cap-title\">3D Visualization & Rendering<\/h3><p class=\"cap-desc\">High-fidelity visual narratives that bring unbuilt ideas to photographic life.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div>\r\n <div class=\"cap\"><p class=\"cap-num\">03<\/p><h3 class=\"cap-title\">Interior Design<\/h3><p class=\"cap-desc\">Spaces crafted for experience, atmosphere and enduring identity.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div>\r\n <div class=\"cap\"><p class=\"cap-num\">04<\/p><h3 class=\"cap-title\">Product Design<\/h3><p class=\"cap-desc\">Functional objects shaped through form, detail and purposeful thinking.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div>\r\n <div class=\"cap\"><p class=\"cap-num\">05<\/p><h3 class=\"cap-title\">Model Making<\/h3><p class=\"cap-desc\">Physical expressions of design \u2014 bridging concept and tangible reality.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"about\">\r\n <div class=\"about-img-w rev\">\r\n <img decoding=\"async\" class=\"about-img\" src=\"https:\/\/images.unsplash.com\/photo-1504307651254-35680f356dfd?w=700&q=80\" alt=\"Studio\">\r\n <div class=\"about-badge\"><strong>08+<\/strong>Years of<br>Practice<\/div>\r\n <\/div>\r\n <div class=\"rev d2\">\r\n <p class=\"sec-lbl\">The Studio<\/p>\r\n <h2 class=\"about-heading\">Helping clients build<br>a world <em>forward<\/em><\/h2>\r\n <p class=\"about-body\">Meta Artron is a design intelligence studio founded on the principle that great architecture is decoded from geometry, refined through precision, and experienced as emotion. Every project begins with a conceptual backbone and ends with spaces that feel inevitable.<\/p>\r\n <div class=\"about-stats\">\r\n <div class=\"astat\"><div class=\"astat-n\">45+<\/div><div class=\"astat-l\">Projects Done<\/div><\/div>\r\n <div class=\"astat\"><div class=\"astat-n\">05<\/div><div class=\"astat-l\">Disciplines<\/div><\/div>\r\n <div class=\"astat\"><div class=\"astat-n\">100%<\/div><div class=\"astat-l\">Satisfaction<\/div><\/div>\r\n <\/div>\r\n <a href=\"#cta\" class=\"btn-out\">Work with us\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"clients\">\r\n <div style=\"overflow:hidden\">\r\n <div class=\"ticker-track\">\r\n <span class=\"ticker-item\">Residential<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Commercial<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Hospitality<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Luxury Villas<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Office Spaces<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Retail Design<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Farmhouses<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Urban Planning<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Product Shoots<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Residential<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Commercial<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Hospitality<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Luxury Villas<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Office Spaces<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Retail Design<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Farmhouses<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Urban Planning<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Product Shoots<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"insights\">\r\n <div class=\"ins-header rev\">\r\n <div>\r\n <p class=\"sec-lbl\">Studio Insights<\/p>\r\n <h2 class=\"ins-title\">Ideas in <em>Motion<\/em><\/h2>\r\n <\/div>\r\n <a href=\"#\" class=\"see-all\">See all insights\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" width=\"13\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <div class=\"ins-grid\">\r\n <div class=\"ins-card rev\">\r\n <div class=\"ins-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618219944342-824e40a13285?w=640&q=80\" alt=\"\"><\/div>\r\n <p class=\"ins-date\">12 Mar 25.<\/p>\r\n <h3 class=\"ins-name\">How geometry shapes the future of luxury architecture<\/h3>\r\n <\/div>\r\n <div class=\"ins-card rev d1\">\r\n <div class=\"ins-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600566752355-35792bedcfea?w=640&q=80\" alt=\"\"><\/div>\r\n <p class=\"ins-date\">28 Jan 25.<\/p>\r\n <h3 class=\"ins-name\">From 3D render to built reality \u2014 our visualization process<\/h3>\r\n <\/div>\r\n <div class=\"ins-card rev d2\">\r\n <div class=\"ins-img\"><img decoding=\"async\" src=\"file:\/\/\/C:\/Users\/ADMIN\/Downloads\/WhatsApp%20Image%202026-04-10%20at%2000.13.34%20(5).jpeg\" alt=\"\"><\/div>\r\n <p class=\"ins-date\">05 Dec 24.<\/p>\r\n <h3 class=\"ins-name\">Why architectural model making still matters in the digital age<\/h3>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"cta\">\r\n <p class=\"cta-tag\">(Contact)<\/p>\r\n <h2 class=\"cta-heading rev\">Ready to discuss<br>your <em>next project?<\/em><\/h2>\r\n <div class=\"cta-btns rev d1\">\r\n <a href=\"mailto:meta.artron@gmail.com\" class=\"cta-main\">Start a project<\/a>\r\n <a href=\"tel:+919909930477\" class=\"cta-ghost\">+91 99099 30477<\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<footer>\r\n <div class=\"ft\">\r\n <div>\r\n <div class=\"ft-brand\">Meta Artron<\/div>\r\n <p class=\"ft-sub\">A design intelligence studio specialising in architecture, 3D visualization, interior design, product design and model making.<\/p>\r\n <\/div>\r\n <div class=\"ft-col\">\r\n <p class=\"ft-col-t\">Services<\/p>\r\n <a href=\"#\">Architectural Planning<\/a>\r\n <a href=\"#\">3D Visualization<\/a>\r\n <a href=\"#\">Interior Design<\/a>\r\n <a href=\"#\">Product Design<\/a>\r\n <a href=\"#\">Model Making<\/a>\r\n <\/div>\r\n <div class=\"ft-col\">\r\n <p class=\"ft-col-t\">Studio<\/p>\r\n <a href=\"#\">About<\/a>\r\n <a href=\"#\">Work<\/a>\r\n <a href=\"#\">Insights<\/a>\r\n <a href=\"#\">Careers<\/a>\r\n <\/div>\r\n <div class=\"ft-col\">\r\n <p class=\"ft-col-t\">Hello<\/p>\r\n <a href=\"mailto:meta.artron@gmail.com\">meta.artron@gmail.com<\/a>\r\n <a href=\"tel:+919909930477\">+91 99099 30477<\/a>\r\n <p style=\"margin-top:10px\">Mumbai,<br>Maharashtra, India<\/p>\r\n <p style=\"margin-top:12px;font-size:11px;color:#444\">Mon \u2013 Fri \u00b7 9AM \u2013 6PM<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ft-bottom\">\r\n <span class=\"ft-copy\">All content \u00a9 Meta Artron 2025<\/span>\r\n <div class=\"ft-logo\">\r\n <svg viewBox=\"0 0 420 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <polygon points=\"8,152 46,152 88,44 130,152 168,152 168,130 130,130 88,8 46,130 8,130\" fill=\"white\"\/>\r\n <polygon points=\"178,152 216,152 258,44 300,152 358,152 358,130 300,130 258,8 216,130 178,130\" fill=\"#CC0000\"\/>\r\n <polygon points=\"232,98 284,98 258,40\" fill=\"#0F0F0F\"\/>\r\n <rect x=\"236\" y=\"106\" width=\"44\" height=\"18\" fill=\"#CC0000\"\/>\r\n <polygon points=\"280,106 358,106 358,124 310,124 310,138 332,138 332,152 280,152 280,138 280,124 280,106\" fill=\"#CC0000\"\/>\r\n <rect x=\"296\" y=\"110\" width=\"44\" height=\"12\" fill=\"#0F0F0F\"\/>\r\n <\/svg>\r\n <\/div>\r\n <a href=\"#\" class=\"btt\">Back to top\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"5\"\/><polyline points=\"5 12 12 5 19 12\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n\/\/ CURSOR\r\nconst cur=document.getElementById('cur'),ring=document.getElementById('cur-ring');\r\ndocument.addEventListener('mousemove',e=>{\r\n cur.style.left=e.clientX+'px';cur.style.top=e.clientY+'px';\r\n ring.style.left=e.clientX+'px';ring.style.top=e.clientY+'px';\r\n});\r\ndocument.querySelectorAll('a,button,.cap,.proj,.ins-card').forEach(el=>{\r\n el.addEventListener('mouseenter',()=>{cur.style.width='16px';cur.style.height='16px';ring.style.width='52px';ring.style.height='52px'});\r\n el.addEventListener('mouseleave',()=>{cur.style.width='10px';cur.style.height='10px';ring.style.width='36px';ring.style.height='36px'});\r\n});\r\n\r\n\/\/ NAV\r\nconst nav=document.getElementById('nav');\r\nwindow.addEventListener('scroll',()=>nav.classList.toggle('scrolled',scrollY>60));\r\n\r\n\/\/ HAMBURGER\r\nconst ham=document.getElementById('ham'),ovl=document.getElementById('overlay');\r\nham.addEventListener('click',()=>{ham.classList.toggle('open');ovl.classList.toggle('open')});\r\novl.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{ham.classList.remove('open');ovl.classList.remove('open')}));\r\n\r\n\/\/ REVEAL\r\nconst obs=new IntersectionObserver(entries=>entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('in')}),{threshold:.1});\r\ndocument.querySelectorAll('.rev').forEach(el=>obs.observe(el));\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Meta Artron META ARTRON Where Art meets function. Meta Artron \u2014 Where Art Becomes Architecture Meta Artron Work About Services Insights Contact Work About Services Insights Contact Ar. Ajay Patel \u00b7 Mumbai, India Where ArtBecomesArchitecture A design intelligence studio rooted in geometry, precision and spatial thinking \u2014 creating spaces that feel inevitable. Scroll to explore … <a title=\"Home Page\" class=\"read-more\" href=\"https:\/\/metaartron.com\/\" aria-label=\"Read more about Home Page\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":31,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/189"}],"wp:attachment":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\nMeta Artron<\/title>\r\n\r\n<style>\r\nbody {\r\n margin: 0;\r\n background: #8B0000;\r\n font-family: 'Poppins', sans-serif;\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* CANVAS *\/\r\n#bg {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 0;\r\n}\r\n\r\n\/* SCROLL *\/\r\n.scroll-container {\r\n position: relative;\r\n z-index: 10;\r\n}\r\n\r\n.section {\r\n height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n}\r\n\r\n\/* TYPOGRAPHY LAYER *\/\r\n.text-layer {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n}\r\n\r\n.text-layer h1 {\r\n position: absolute;\r\n margin: 0;\r\n text-transform: uppercase;\r\n white-space: nowrap;\r\n}\r\n\r\n\/* LAYERS *\/\r\n.layer1 {\r\n font-size: 11vw;\r\n color: #000000;\r\n bottom: 50%;\r\n left: 10%;\r\n}\r\n\r\n\r\n\/* ABOUT TEXT *\/\r\n.about h2 {\r\n color: #000000;\r\n font-size: 4vw;\r\n font-weight: 300;\r\n opacity: 0;\r\n transform: translateY(80px);\r\n transition: all 1s ease;\r\n}\r\n\r\n.section.active .about h2,\r\n.about.active h2 {\r\n opacity: 1;\r\n transform: translateY(0);\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<canvas id=\"bg\"><\/canvas>\r\n\r\n<div class=\"scroll-container\">\r\n\r\n \r\n <section class=\"section hero\">\r\n <div class=\"text-layer\">\r\n <h1 class=\"layer1\">META ARTRON<\/h1>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"section about\">\r\n <h2>Where Art meets function.<\/h2>\r\n <\/section>\r\n\r\n<\/div>\r\n\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r134\/three.min.js\"><\/script>\r\n\r\n<script>\r\n\/\/ THREE BACKGROUND\r\nconst scene = new THREE.Scene();\r\nconst camera = new THREE.PerspectiveCamera(75, window.innerWidth\/window.innerHeight, 0.1, 1000);\r\nconst renderer = new THREE.WebGLRenderer({\r\n canvas: document.getElementById(\"bg\"),\r\n alpha:true\r\n});\r\n\r\nrenderer.setSize(window.innerWidth, window.innerHeight);\r\ncamera.position.z = 8;\r\n\r\nconst geometry = new THREE.PlaneGeometry(20,20,100,100);\r\nconst material = new THREE.MeshBasicMaterial({\r\n color:0x8b0000,\r\n wireframe:true\r\n});\r\n\r\nconst mesh = new THREE.Mesh(geometry, material);\r\nscene.add(mesh);\r\n\r\nlet t=0;\r\n\r\nfunction animate(){\r\n requestAnimationFrame(animate);\r\n t+=0.02;\r\n\r\n let pos = mesh.geometry.attributes.position;\r\n\r\n for(let i=0;i<pos.count;i++){\r\n let x = pos.getX(i);\r\n let y = pos.getY(i);\r\n pos.setZ(i, Math.sin(x+t)+Math.cos(y+t));\r\n }\r\n\r\n pos.needsUpdate=true;\r\n\r\n renderer.render(scene,camera);\r\n}\r\n\r\nanimate();\r\n\r\n\/\/ SCROLL INTERACTION\r\nconst sections = document.querySelectorAll(\".section\");\r\n\r\nwindow.addEventListener(\"scroll\", () => {\r\n let scrollY = window.scrollY;\r\n\r\n sections.forEach((section) => {\r\n const offset = section.offsetTop;\r\n const height = section.offsetHeight;\r\n\r\n if (scrollY > offset - height \/ 2 && scrollY < offset + height \/ 2) {\r\n section.classList.add(\"active\");\r\n } else {\r\n section.classList.remove(\"active\");\r\n }\r\n });\r\n});\r\n\r\n\/\/ RESPONSIVE\r\nwindow.addEventListener(\"resize\", () => {\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n camera.aspect = window.innerWidth \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-648b327 elementor-widget elementor-widget-html\" data-id=\"648b327\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Meta Artron \u2014 Where Art Becomes Architecture<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n:root {\r\n --bg: #F5F3EF;\r\n --bg2: #ECEAE4;\r\n --black: #0F0F0F;\r\n --red: #CC0000;\r\n --muted: #888;\r\n --border: #D8D5CE;\r\n --white: #fff;\r\n}\r\n*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}\r\nhtml{scroll-behavior:smooth}\r\nbody{background:var(--bg);color:var(--black);font-family:'Inter',sans-serif;font-weight:300;overflow-x:hidden;cursor:none}\r\n\r\n\/* CURSOR *\/\r\n#cur{position:fixed;width:10px;height:10px;background:var(--red);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s,height .25s}\r\n#cur-ring{position:fixed;width:36px;height:36px;border:1px solid rgba(204,0,0,.3);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:all .18s ease-out}\r\n\r\n\/* NAV *\/\r\nnav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:20px 52px;background:rgba(245,243,239,.94);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}\r\nnav.scrolled{border-color:var(--border)}\r\n.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}\r\n.nav-logo svg{width:66px;height:25px}\r\n.nav-brand{font-family:'Inter',sans-serif;font-weight:500;font-size:12px;letter-spacing:.2em;color:var(--black);text-transform:uppercase}\r\n.nav-links{display:flex;align-items:center;gap:36px}\r\n.nav-links a{font-size:13px;font-weight:400;color:var(--black);text-decoration:none;letter-spacing:.04em;position:relative;transition:color .25s}\r\n.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--red);transition:width .3s}\r\n.nav-links a:hover{color:var(--red)}\r\n.nav-links a:hover::after{width:100%}\r\n.nav-cta{display:flex;align-items:center;gap:8px;background:var(--black);color:var(--white);padding:11px 24px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .3s;border:none;cursor:none}\r\n.nav-cta:hover{background:var(--red)}\r\n.nav-cta svg{width:13px;height:13px}\r\n.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:none;padding:4px}\r\n.hamburger span{width:24px;height:1px;background:var(--black);display:block;transition:.3s}\r\n.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}\r\n.hamburger.open span:nth-child(2){opacity:0}\r\n.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}\r\n\r\n\/* OVERLAY *\/\r\n#overlay{position:fixed;inset:0;background:var(--black);z-index:190;display:flex;flex-direction:column;justify-content:center;padding:0 10vw;opacity:0;pointer-events:none;transition:opacity .4s}\r\n#overlay.open{opacity:1;pointer-events:all}\r\n#overlay a{font-family:'Playfair Display',serif;font-size:clamp(36px,7vw,82px);font-weight:700;color:var(--white);text-decoration:none;border-bottom:1px solid #1f1f1f;padding:14px 0;display:block;transition:color .25s,padding-left .3s}\r\n#overlay a:hover{color:var(--red);padding-left:14px}\r\n\r\n\/* HERO *\/\r\n#hero{min-height:100vh;padding:150px 52px 80px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}\r\n.hero-logo-bg{position:absolute;right:-60px;top:50%;transform:translateY(-50%);opacity:.045;pointer-events:none}\r\n.hero-logo-bg svg{width:580px;height:219px}\r\n.hero-tag{font-size:11px;letter-spacing:.38em;color:var(--red);text-transform:uppercase;margin-bottom:28px;display:flex;align-items:center;gap:12px}\r\n.hero-tag::before{content:'';width:30px;height:1px;background:var(--red)}\r\n.hero-title{font-family:'Playfair Display',serif;font-size:clamp(58px,9.5vw,134px);font-weight:900;line-height:.93;letter-spacing:-.025em;max-width:920px}\r\n.hero-title em{font-style:italic;color:var(--red)}\r\n.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:60px;flex-wrap:wrap;gap:20px}\r\n.hero-desc{font-size:15px;line-height:1.8;color:#555;max-width:400px}\r\n.hero-scroll{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}\r\n.hero-scroll-line{width:50px;height:1px;background:var(--muted);animation:linesway 2.2s ease-in-out infinite}\r\n@keyframes linesway{0%,100%{width:50px}50%{width:82px}}\r\n\r\n\/* MARQUEE *\/\r\n.marquee-wrap{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:17px 0;background:var(--bg)}\r\n.marquee-track{display:flex;animation:marquee 24s linear infinite;width:max-content;white-space:nowrap}\r\n.marquee-track span{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;font-style:italic;color:var(--black);padding:0 26px;letter-spacing:.02em}\r\n.marquee-track span.dot{color:var(--red);font-style:normal;font-size:9px;vertical-align:middle}\r\n@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}\r\n\r\n\/* SECTION LABEL *\/\r\n.sec-lbl{font-size:10px;letter-spacing:.45em;color:var(--red);text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:36px}\r\n.sec-lbl::before{content:'';width:22px;height:1px;background:var(--red)}\r\n\r\n\/* WORK *\/\r\n#work{padding:96px 52px}\r\n.work-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px}\r\n.work-title{font-family:'Playfair Display',serif;font-size:clamp(36px,5vw,62px);font-weight:900;line-height:1}\r\n.work-title em{font-style:italic;color:var(--red)}\r\n.see-all{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--black);border-bottom:1px solid var(--black);padding-bottom:3px;transition:color .25s,border-color .25s}\r\n.see-all:hover{color:var(--red);border-color:var(--red)}\r\n.see-all svg{width:13px;transition:transform .3s}\r\n.see-all:hover svg{transform:translate(3px,-3px)}\r\n\r\n.pgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:3px}\r\n.pgrid-r{display:grid;grid-template-rows:1fr 1fr;gap:3px}\r\n.proj{position:relative;overflow:hidden;background:#ccc;cursor:none;display:block;text-decoration:none}\r\n.proj-big{aspect-ratio:3\/3.4}\r\n.proj-sm{aspect-ratio:16\/9}\r\n.proj img{width:100%;height:100%;object-fit:cover;filter:brightness(.85) saturate(.9);transition:transform .72s cubic-bezier(.25,.46,.45,.94),filter .72s;display:block}\r\n.proj:hover img{transform:scale(1.06);filter:brightness(.65) saturate(.8)}\r\n.proj-info{position:absolute;bottom:0;left:0;right:0;padding:26px 26px 22px;background:linear-gradient(to top,rgba(0,0,0,.72),transparent);transform:translateY(10px);opacity:0;transition:transform .4s,opacity .4s}\r\n.proj:hover .proj-info{transform:translateY(0);opacity:1}\r\n.proj-cat{font-size:9px;letter-spacing:.3em;color:rgba(255,255,255,.6);text-transform:uppercase;margin-bottom:5px}\r\n.proj-name{font-family:'Playfair Display',serif;font-size:21px;font-weight:700;color:#fff;line-height:1.2}\r\n.proj-loc{font-size:11px;color:rgba(255,255,255,.5);margin-top:4px}\r\n.proj-idx{position:absolute;top:18px;left:22px;font-size:9px;letter-spacing:.2em;color:rgba(255,255,255,.28)}\r\n\r\n\/* WHY *\/\r\n#why{padding:96px 52px;background:var(--black);color:var(--white);border-top:1px solid #181818}\r\n.why-inner{display:grid;grid-template-columns:1fr 1.55fr;gap:80px;align-items:start}\r\n.why-heading{font-family:'Playfair Display',serif;font-size:clamp(30px,4vw,52px);font-weight:900;line-height:1.1;color:var(--white)}\r\n.why-heading em{font-style:italic;color:var(--red)}\r\n.why-body{font-size:14px;line-height:1.9;color:#888;margin-top:22px;max-width:420px}\r\n.why-cta{display:inline-flex;align-items:center;gap:9px;margin-top:34px;background:var(--red);color:#fff;padding:13px 28px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .3s}\r\n.why-cta:hover{background:#aa0000}\r\n.why-imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px}\r\n.why-img{aspect-ratio:4\/3;overflow:hidden}\r\n.why-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.65) grayscale(.2);transition:filter .5s}\r\n.why-img:hover img{filter:brightness(.85) grayscale(0)}\r\n\r\n\/* CAPABILITIES *\/\r\n#caps{padding:80px 52px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}\r\n.caps-h{font-family:'Playfair Display',serif;font-size:clamp(30px,4vw,52px);font-weight:900;margin-bottom:48px}\r\n.caps-h em{font-style:italic;color:var(--red)}\r\n.caps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}\r\n.cap{padding:38px 26px 34px;border-right:1px solid var(--border);position:relative;overflow:hidden;cursor:none;transition:background .35s}\r\n.cap:first-child{border-left:1px solid var(--border)}\r\n.cap:hover{background:var(--black)}\r\n.cap-num{font-size:10px;letter-spacing:.3em;color:var(--muted);margin-bottom:46px;transition:color .3s}\r\n.cap:hover .cap-num{color:rgba(255,255,255,.3)}\r\n.cap-title{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;line-height:1.25;margin-bottom:12px;transition:color .3s}\r\n.cap:hover .cap-title{color:#fff}\r\n.cap-desc{font-size:11px;line-height:1.8;color:var(--muted);transition:color .3s}\r\n.cap:hover .cap-desc{color:rgba(255,255,255,.45)}\r\n.cap-arr{position:absolute;bottom:26px;right:22px;font-size:16px;color:var(--muted);transition:color .3s,transform .3s}\r\n.cap:hover .cap-arr{color:var(--red);transform:translate(3px,-3px)}\r\n\r\n\/* ABOUT *\/\r\n#about{padding:96px 52px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;border-top:1px solid var(--border)}\r\n.about-img-w{position:relative}\r\n.about-img{width:100%;aspect-ratio:4\/5;object-fit:cover;display:block}\r\n.about-badge{position:absolute;bottom:-18px;right:-18px;background:var(--red);color:#fff;width:116px;height:116px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;text-align:center;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}\r\n.about-badge strong{font-size:26px;font-weight:700;display:block;letter-spacing:-.02em}\r\n.about-heading{font-family:'Playfair Display',serif;font-size:clamp(30px,3.5vw,48px);font-weight:900;line-height:1.1;margin-bottom:22px}\r\n.about-heading em{font-style:italic;color:var(--red)}\r\n.about-body{font-size:14px;line-height:1.9;color:#555;margin-bottom:30px}\r\n.about-stats{display:flex;gap:0;margin-bottom:34px}\r\n.astat{flex:1;padding:18px 0;border-top:1px solid var(--border)}\r\n.astat:not(:last-child){margin-right:22px}\r\n.astat-n{font-family:'Playfair Display',serif;font-size:38px;font-weight:900;color:var(--black);line-height:1}\r\n.astat-l{font-size:10px;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-top:4px}\r\n.btn-out{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--black);padding:12px 26px;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--black);transition:background .3s,color .3s}\r\n.btn-out:hover{background:var(--black);color:#fff}\r\n\r\n\/* TICKER *\/\r\n#clients{padding:48px 0;background:var(--black);overflow:hidden;border-top:1px solid #181818}\r\n.ticker-track{display:flex;align-items:center;gap:56px;animation:ticker 28s linear infinite;width:max-content}\r\n.ticker-item{font-family:'Playfair Display',serif;font-size:13px;font-weight:700;color:rgba(255,255,255,.2);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;transition:color .3s}\r\n.ticker-item:hover{color:rgba(255,255,255,.65)}\r\n.t-dot{color:var(--red);font-size:6px;flex-shrink:0}\r\n@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}\r\n\r\n\/* INSIGHTS *\/\r\n#insights{padding:96px 52px}\r\n.ins-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px}\r\n.ins-title{font-family:'Playfair Display',serif;font-size:clamp(32px,4.5vw,58px);font-weight:900;line-height:1}\r\n.ins-title em{font-style:italic;color:var(--red)}\r\n.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}\r\n.ins-card{cursor:none}\r\n.ins-img{aspect-ratio:3\/2;overflow:hidden;margin-bottom:18px;background:var(--bg2)}\r\n.ins-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}\r\n.ins-card:hover .ins-img img{transform:scale(1.06)}\r\n.ins-date{font-size:10px;letter-spacing:.2em;color:var(--muted);margin-bottom:9px}\r\n.ins-name{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;line-height:1.3;color:var(--black);transition:color .25s}\r\n.ins-card:hover .ins-name{color:var(--red)}\r\n\r\n\/* CTA *\/\r\n#cta{padding:120px 52px;background:var(--black);color:#fff;display:flex;flex-direction:column;align-items:center;text-align:center;border-top:1px solid #181818}\r\n.cta-tag{font-size:10px;letter-spacing:.45em;color:var(--red);text-transform:uppercase;margin-bottom:26px}\r\n.cta-heading{font-family:'Playfair Display',serif;font-size:clamp(42px,8.5vw,112px);font-weight:900;line-height:.93;letter-spacing:-.025em;margin-bottom:48px}\r\n.cta-heading em{font-style:italic;color:var(--red)}\r\n.cta-btns{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}\r\n.cta-main{background:var(--red);color:#fff;padding:16px 40px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .3s}\r\n.cta-main:hover{background:#aa0000}\r\n.cta-ghost{border:1px solid rgba(255,255,255,.22);color:#fff;padding:15px 32px;font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:border-color .3s}\r\n.cta-ghost:hover{border-color:#fff}\r\n\r\n\/* FOOTER *\/\r\nfooter{background:var(--black);color:#fff;border-top:1px solid #181818;padding:68px 52px 38px}\r\n.ft{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid #1c1c1c;margin-bottom:32px}\r\n.ft-brand{font-family:'Playfair Display',serif;font-size:22px;font-weight:900;margin-bottom:14px}\r\n.ft-sub{font-size:13px;color:#555;line-height:1.7}\r\n.ft-col-t{font-size:10px;letter-spacing:.35em;color:var(--muted);text-transform:uppercase;margin-bottom:18px}\r\n.ft-col a{display:block;font-size:13px;color:#666;text-decoration:none;margin-bottom:9px;transition:color .25s}\r\n.ft-col a:hover{color:#fff}\r\n.ft-col p{font-size:13px;color:#555;line-height:1.7}\r\n.ft-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}\r\n.ft-copy{font-size:11px;color:#3a3a3a;letter-spacing:.08em}\r\n.ft-logo{opacity:.25}\r\n.ft-logo svg{width:76px;height:29px}\r\n.btt{display:flex;align-items:center;gap:6px;font-size:10px;color:#3a3a3a;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;transition:color .25s}\r\n.btt:hover{color:#fff}\r\n\r\n\/* REVEAL *\/\r\n.rev{opacity:0;transform:translateY(34px);transition:opacity .85s ease,transform .85s ease}\r\n.rev.in{opacity:1;transform:translateY(0)}\r\n.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}\r\n\r\n\/* RESPONSIVE *\/\r\n@media(max-width:1024px){\r\n nav{padding:18px 22px}\r\n .nav-links{display:none}\r\n .hamburger{display:flex}\r\n #hero,#work,#why,#caps,#about,#insights,#cta,footer{padding-left:22px;padding-right:22px}\r\n .pgrid{grid-template-columns:1fr}\r\n .pgrid-r{grid-template-rows:auto;grid-template-columns:1fr 1fr}\r\n .why-inner,#about{grid-template-columns:1fr;gap:38px}\r\n .caps-grid{grid-template-columns:repeat(2,1fr)}\r\n .ins-grid{grid-template-columns:1fr 1fr}\r\n .ft{grid-template-columns:1fr 1fr;gap:36px}\r\n}\r\n@media(max-width:600px){\r\n .caps-grid{grid-template-columns:1fr}\r\n .ins-grid{grid-template-columns:1fr}\r\n .pgrid-r{grid-template-columns:1fr}\r\n .why-imgs{grid-template-columns:1fr}\r\n .about-stats{flex-wrap:wrap}\r\n .ft{grid-template-columns:1fr;gap:26px}\r\n .hero-logo-bg{display:none}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"cur\"><\/div>\r\n<div id=\"cur-ring\"><\/div>\r\n\r\n\r\n<nav id=\"nav\">\r\n <a href=\"#\" class=\"nav-logo\">\r\n <svg viewBox=\"0 0 420 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <polygon points=\"8,152 46,152 88,44 130,152 168,152 168,130 130,130 88,8 46,130 8,130\" fill=\"#0F0F0F\"\/>\r\n <polygon points=\"178,152 216,152 258,44 300,152 358,152 358,130 300,130 258,8 216,130 178,130\" fill=\"#CC0000\"\/>\r\n <polygon points=\"232,98 284,98 258,40\" fill=\"#F5F3EF\"\/>\r\n <rect x=\"236\" y=\"106\" width=\"44\" height=\"18\" fill=\"#CC0000\"\/>\r\n <polygon points=\"280,106 358,106 358,124 310,124 310,138 332,138 332,152 280,152 280,138 280,124 280,106\" fill=\"#CC0000\"\/>\r\n <rect x=\"296\" y=\"110\" width=\"44\" height=\"12\" fill=\"#F5F3EF\"\/>\r\n <\/svg>\r\n <span class=\"nav-brand\">Meta Artron<\/span>\r\n <\/a>\r\n <div class=\"nav-links\">\r\n <a href=\"#work\">Work<\/a>\r\n <a href=\"#about\">About<\/a>\r\n <a href=\"#caps\">Services<\/a>\r\n <a href=\"#insights\">Insights<\/a>\r\n <\/div>\r\n <a href=\"#cta\" class=\"nav-cta\">Contact\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg>\r\n <\/a>\r\n <button class=\"hamburger\" id=\"ham\"><span><\/span><span><\/span><span><\/span><\/button>\r\n<\/nav>\r\n\r\n<div id=\"overlay\">\r\n <a href=\"#work\">Work<\/a>\r\n <a href=\"#about\">About<\/a>\r\n <a href=\"#caps\">Services<\/a>\r\n <a href=\"#insights\">Insights<\/a>\r\n <a href=\"#cta\">Contact<\/a>\r\n<\/div>\r\n\r\n\r\n<section id=\"hero\">\r\n <div class=\"hero-logo-bg\">\r\n <svg viewBox=\"0 0 420 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <polygon points=\"8,152 46,152 88,44 130,152 168,152 168,130 130,130 88,8 46,130 8,130\" fill=\"#0F0F0F\"\/>\r\n <polygon points=\"178,152 216,152 258,44 300,152 358,152 358,130 300,130 258,8 216,130 178,130\" fill=\"#CC0000\"\/>\r\n <polygon points=\"232,98 284,98 258,40\" fill=\"#F5F3EF\"\/>\r\n <rect x=\"236\" y=\"106\" width=\"44\" height=\"18\" fill=\"#CC0000\"\/>\r\n <polygon points=\"280,106 358,106 358,124 310,124 310,138 332,138 332,152 280,152 280,138 280,124 280,106\" fill=\"#CC0000\"\/>\r\n <rect x=\"296\" y=\"110\" width=\"44\" height=\"12\" fill=\"#F5F3EF\"\/>\r\n <\/svg>\r\n <\/div>\r\n <p class=\"hero-tag\">Ar. Ajay Patel \u00b7 Mumbai, India<\/p>\r\n <h1 class=\"hero-title rev\">Where <em>Art<\/em><br>Becomes<br>Architecture<\/h1>\r\n <div class=\"hero-bottom rev d1\">\r\n <p class=\"hero-desc\">A design intelligence studio rooted in geometry, precision and spatial thinking \u2014 creating spaces that feel inevitable.<\/p>\r\n <div class=\"hero-scroll\"><div class=\"hero-scroll-line\"><\/div>Scroll to explore<\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<div class=\"marquee-wrap\">\r\n <div class=\"marquee-track\">\r\n <span>Architectural Planning<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>3D Visualization<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Interior Design<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Product Design<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Model Making<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Parametric Design<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Luxury Spaces<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Architectural Planning<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>3D Visualization<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Interior Design<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Product Design<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Model Making<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Parametric Design<\/span><span class=\"dot\">\u25cf<\/span>\r\n <span>Luxury Spaces<\/span><span class=\"dot\">\u25cf<\/span>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<section id=\"work\">\r\n <div class=\"work-header rev\">\r\n <div>\r\n <p class=\"sec-lbl\">Featured Projects<\/p>\r\n <h2 class=\"work-title\">Case studies &<br><em>Featured<\/em> Projects<\/h2>\r\n <\/div>\r\n <a href=\"#cta\" class=\"see-all\">Explore more\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <div class=\"pgrid rev d1\">\r\n <a href=\"#\" class=\"proj proj-big\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600585154340-be6161a56a0c?w=900&q=80\" alt=\"\">\r\n <span class=\"proj-idx\">01<\/span>\r\n <div class=\"proj-info\">\r\n <p class=\"proj-cat\">Residential \u00b7 Planning<\/p>\r\n <h3 class=\"proj-name\">Cortex Residence<\/h3>\r\n <p class=\"proj-loc\">Hyderabad, 2024<\/p>\r\n <\/div>\r\n <\/a>\r\n <div class=\"pgrid-r\">\r\n <a href=\"#\" class=\"proj proj-sm\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618221195710-dd6b41faaea6?w=700&q=80\" alt=\"\">\r\n <span class=\"proj-idx\">02<\/span>\r\n <div class=\"proj-info\">\r\n <p class=\"proj-cat\">Interior Design<\/p>\r\n <h3 class=\"proj-name\">Axiom Penthouse<\/h3>\r\n <p class=\"proj-loc\">Hyderabad, 2024<\/p>\r\n <\/div>\r\n <\/a>\r\n <a href=\"#\" class=\"proj proj-sm\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1486325212027-8081e485255e?w=700&q=80\" alt=\"\">\r\n <span class=\"proj-idx\">03<\/span>\r\n <div class=\"proj-info\">\r\n <p class=\"proj-cat\">Commercial \u00b7 3D Rendering<\/p>\r\n <h3 class=\"proj-name\">Node Office Tower<\/h3>\r\n <p class=\"proj-loc\">Secunderabad, 2023<\/p>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"why\">\r\n <div class=\"why-inner\">\r\n <div class=\"rev\">\r\n <p class=\"sec-lbl\" style=\"color:var(--red)\">Why Meta Artron<\/p>\r\n <h2 class=\"why-heading\">Why leading clients<br>partner with <em>us.<\/em><\/h2>\r\n <p class=\"why-body\">From precision architectural plans to cinematic 3D renders and handcrafted models, we bring design intelligence that goes beyond aesthetics \u2014 spaces rooted in geometry and lived experience.<\/p>\r\n <a href=\"#cta\" class=\"why-cta\">Discover our work\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <div class=\"why-imgs rev d2\">\r\n <div class=\"why-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6c25118c?w=500&q=80\" alt=\"\"><\/div>\r\n <div class=\"why-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1503387762-592deb58ef4e?w=500&q=80\" alt=\"\"><\/div>\r\n <div class=\"why-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524758631624-e2822e304c36?w=500&q=80\" alt=\"\"><\/div>\r\n <div class=\"why-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1531971589569-0d9370cbe1e5?w=500&q=80\" alt=\"\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"caps\">\r\n <p class=\"sec-lbl rev\">What We Create<\/p>\r\n <h2 class=\"caps-h rev d1\">Our <em>Capabilities<\/em><\/h2>\r\n <div class=\"caps-grid rev d2\">\r\n <div class=\"cap\"><p class=\"cap-num\">01<\/p><h3 class=\"cap-title\">Architectural Planning<\/h3><p class=\"cap-desc\">Spatial systems designed with precision, logic and vision \u2014 from site analysis to built form.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div>\r\n <div class=\"cap\"><p class=\"cap-num\">02<\/p><h3 class=\"cap-title\">3D Visualization & Rendering<\/h3><p class=\"cap-desc\">High-fidelity visual narratives that bring unbuilt ideas to photographic life.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div>\r\n <div class=\"cap\"><p class=\"cap-num\">03<\/p><h3 class=\"cap-title\">Interior Design<\/h3><p class=\"cap-desc\">Spaces crafted for experience, atmosphere and enduring identity.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div>\r\n <div class=\"cap\"><p class=\"cap-num\">04<\/p><h3 class=\"cap-title\">Product Design<\/h3><p class=\"cap-desc\">Functional objects shaped through form, detail and purposeful thinking.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div>\r\n <div class=\"cap\"><p class=\"cap-num\">05<\/p><h3 class=\"cap-title\">Model Making<\/h3><p class=\"cap-desc\">Physical expressions of design \u2014 bridging concept and tangible reality.<\/p><span class=\"cap-arr\">\u2197<\/span><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"about\">\r\n <div class=\"about-img-w rev\">\r\n <img decoding=\"async\" class=\"about-img\" src=\"https:\/\/images.unsplash.com\/photo-1504307651254-35680f356dfd?w=700&q=80\" alt=\"Studio\">\r\n <div class=\"about-badge\"><strong>08+<\/strong>Years of<br>Practice<\/div>\r\n <\/div>\r\n <div class=\"rev d2\">\r\n <p class=\"sec-lbl\">The Studio<\/p>\r\n <h2 class=\"about-heading\">Helping clients build<br>a world <em>forward<\/em><\/h2>\r\n <p class=\"about-body\">Meta Artron is a design intelligence studio founded on the principle that great architecture is decoded from geometry, refined through precision, and experienced as emotion. Every project begins with a conceptual backbone and ends with spaces that feel inevitable.<\/p>\r\n <div class=\"about-stats\">\r\n <div class=\"astat\"><div class=\"astat-n\">45+<\/div><div class=\"astat-l\">Projects Done<\/div><\/div>\r\n <div class=\"astat\"><div class=\"astat-n\">05<\/div><div class=\"astat-l\">Disciplines<\/div><\/div>\r\n <div class=\"astat\"><div class=\"astat-n\">100%<\/div><div class=\"astat-l\">Satisfaction<\/div><\/div>\r\n <\/div>\r\n <a href=\"#cta\" class=\"btn-out\">Work with us\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"clients\">\r\n <div style=\"overflow:hidden\">\r\n <div class=\"ticker-track\">\r\n <span class=\"ticker-item\">Residential<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Commercial<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Hospitality<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Luxury Villas<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Office Spaces<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Retail Design<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Farmhouses<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Urban Planning<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Product Shoots<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Residential<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Commercial<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Hospitality<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Luxury Villas<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Office Spaces<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Retail Design<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Farmhouses<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Urban Planning<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <span class=\"ticker-item\">Product Shoots<\/span><span class=\"t-dot\">\u25cf<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"insights\">\r\n <div class=\"ins-header rev\">\r\n <div>\r\n <p class=\"sec-lbl\">Studio Insights<\/p>\r\n <h2 class=\"ins-title\">Ideas in <em>Motion<\/em><\/h2>\r\n <\/div>\r\n <a href=\"#\" class=\"see-all\">See all insights\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" width=\"13\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/><polyline points=\"7 7 17 7 17 17\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <div class=\"ins-grid\">\r\n <div class=\"ins-card rev\">\r\n <div class=\"ins-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618219944342-824e40a13285?w=640&q=80\" alt=\"\"><\/div>\r\n <p class=\"ins-date\">12 Mar 25.<\/p>\r\n <h3 class=\"ins-name\">How geometry shapes the future of luxury architecture<\/h3>\r\n <\/div>\r\n <div class=\"ins-card rev d1\">\r\n <div class=\"ins-img\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600566752355-35792bedcfea?w=640&q=80\" alt=\"\"><\/div>\r\n <p class=\"ins-date\">28 Jan 25.<\/p>\r\n <h3 class=\"ins-name\">From 3D render to built reality \u2014 our visualization process<\/h3>\r\n <\/div>\r\n <div class=\"ins-card rev d2\">\r\n <div class=\"ins-img\"><img decoding=\"async\" src=\"file:\/\/\/C:\/Users\/ADMIN\/Downloads\/WhatsApp%20Image%202026-04-10%20at%2000.13.34%20(5).jpeg\" alt=\"\"><\/div>\r\n <p class=\"ins-date\">05 Dec 24.<\/p>\r\n <h3 class=\"ins-name\">Why architectural model making still matters in the digital age<\/h3>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section id=\"cta\">\r\n <p class=\"cta-tag\">(Contact)<\/p>\r\n <h2 class=\"cta-heading rev\">Ready to discuss<br>your <em>next project?<\/em><\/h2>\r\n <div class=\"cta-btns rev d1\">\r\n <a href=\"mailto:meta.artron@gmail.com\" class=\"cta-main\">Start a project<\/a>\r\n <a href=\"tel:+919909930477\" class=\"cta-ghost\">+91 99099 30477<\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<footer>\r\n <div class=\"ft\">\r\n <div>\r\n <div class=\"ft-brand\">Meta Artron<\/div>\r\n <p class=\"ft-sub\">A design intelligence studio specialising in architecture, 3D visualization, interior design, product design and model making.<\/p>\r\n <\/div>\r\n <div class=\"ft-col\">\r\n <p class=\"ft-col-t\">Services<\/p>\r\n <a href=\"#\">Architectural Planning<\/a>\r\n <a href=\"#\">3D Visualization<\/a>\r\n <a href=\"#\">Interior Design<\/a>\r\n <a href=\"#\">Product Design<\/a>\r\n <a href=\"#\">Model Making<\/a>\r\n <\/div>\r\n <div class=\"ft-col\">\r\n <p class=\"ft-col-t\">Studio<\/p>\r\n <a href=\"#\">About<\/a>\r\n <a href=\"#\">Work<\/a>\r\n <a href=\"#\">Insights<\/a>\r\n <a href=\"#\">Careers<\/a>\r\n <\/div>\r\n <div class=\"ft-col\">\r\n <p class=\"ft-col-t\">Hello<\/p>\r\n <a href=\"mailto:meta.artron@gmail.com\">meta.artron@gmail.com<\/a>\r\n <a href=\"tel:+919909930477\">+91 99099 30477<\/a>\r\n <p style=\"margin-top:10px\">Mumbai,<br>Maharashtra, India<\/p>\r\n <p style=\"margin-top:12px;font-size:11px;color:#444\">Mon \u2013 Fri \u00b7 9AM \u2013 6PM<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ft-bottom\">\r\n <span class=\"ft-copy\">All content \u00a9 Meta Artron 2025<\/span>\r\n <div class=\"ft-logo\">\r\n <svg viewBox=\"0 0 420 160\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <polygon points=\"8,152 46,152 88,44 130,152 168,152 168,130 130,130 88,8 46,130 8,130\" fill=\"white\"\/>\r\n <polygon points=\"178,152 216,152 258,44 300,152 358,152 358,130 300,130 258,8 216,130 178,130\" fill=\"#CC0000\"\/>\r\n <polygon points=\"232,98 284,98 258,40\" fill=\"#0F0F0F\"\/>\r\n <rect x=\"236\" y=\"106\" width=\"44\" height=\"18\" fill=\"#CC0000\"\/>\r\n <polygon points=\"280,106 358,106 358,124 310,124 310,138 332,138 332,152 280,152 280,138 280,124 280,106\" fill=\"#CC0000\"\/>\r\n <rect x=\"296\" y=\"110\" width=\"44\" height=\"12\" fill=\"#0F0F0F\"\/>\r\n <\/svg>\r\n <\/div>\r\n <a href=\"#\" class=\"btt\">Back to top\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"5\"\/><polyline points=\"5 12 12 5 19 12\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n\/\/ CURSOR\r\nconst cur=document.getElementById('cur'),ring=document.getElementById('cur-ring');\r\ndocument.addEventListener('mousemove',e=>{\r\n cur.style.left=e.clientX+'px';cur.style.top=e.clientY+'px';\r\n ring.style.left=e.clientX+'px';ring.style.top=e.clientY+'px';\r\n});\r\ndocument.querySelectorAll('a,button,.cap,.proj,.ins-card').forEach(el=>{\r\n el.addEventListener('mouseenter',()=>{cur.style.width='16px';cur.style.height='16px';ring.style.width='52px';ring.style.height='52px'});\r\n el.addEventListener('mouseleave',()=>{cur.style.width='10px';cur.style.height='10px';ring.style.width='36px';ring.style.height='36px'});\r\n});\r\n\r\n\/\/ NAV\r\nconst nav=document.getElementById('nav');\r\nwindow.addEventListener('scroll',()=>nav.classList.toggle('scrolled',scrollY>60));\r\n\r\n\/\/ HAMBURGER\r\nconst ham=document.getElementById('ham'),ovl=document.getElementById('overlay');\r\nham.addEventListener('click',()=>{ham.classList.toggle('open');ovl.classList.toggle('open')});\r\novl.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{ham.classList.remove('open');ovl.classList.remove('open')}));\r\n\r\n\/\/ REVEAL\r\nconst obs=new IntersectionObserver(entries=>entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('in')}),{threshold:.1});\r\ndocument.querySelectorAll('.rev').forEach(el=>obs.observe(el));\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Meta Artron META ARTRON Where Art meets function. Meta Artron \u2014 Where Art Becomes Architecture Meta Artron Work About Services Insights Contact Work About Services Insights Contact Ar. Ajay Patel \u00b7 Mumbai, India Where ArtBecomesArchitecture A design intelligence studio rooted in geometry, precision and spatial thinking \u2014 creating spaces that feel inevitable. Scroll to explore … <a title=\"Home Page\" class=\"read-more\" href=\"https:\/\/metaartron.com\/\" aria-label=\"Read more about Home Page\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":31,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/189"}],"wp:attachment":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}