{"id":331,"date":"2026-07-30T13:15:19","date_gmt":"2026-07-30T13:15:19","guid":{"rendered":"https:\/\/mifaproduction.com\/?page_id=331"},"modified":"2026-08-26T03:58:45","modified_gmt":"2026-08-26T03:58:45","slug":"home","status":"publish","type":"page","link":"https:\/\/mifaproduction.com\/","title":{"rendered":"HOME"},"content":{"rendered":"\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 HOME \u00b7 PART 1 : PRELOADER + NAV + 3D HERO\n     (ENGLISH)\n     Paste the whole thing into a WordPress \"Custom HTML\" block.\n\n     v3 FIX \u2014 MOBILE BURGER\n     Earlier the mobile query had \".p1-menu span{display:none}\", which\n     hid the burger span along with the \"Menu\" text. The text now has\n     its own class (.p1-menu__t) \u2014 only that hides, the burger stays\n     visible. The tap area was enlarged too.\n\n     Everything is scoped inside .mifa-p1\n     ============================================================ -->\n\n<div class=\"mifa-p1\">\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter+Tight:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@300;400;500&display=swap');\n\n\/* ===================== TOKENS + THEME RESET ===================== *\/\n.mifa-p1{\n  --bg:#07070A; --bg-2:#0C0C11; --panel:#101017;\n  --ink:#F2F0EE; --soft:rgba(242,240,238,.58); --line:rgba(242,240,238,.12);\n  --red:#C4162B; --red-hi:#FF3B54; --red-dp:#7A0C18;\n\n  --f:'Inter Tight',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;\n  --m:'DM Mono',ui-monospace,monospace;\n  --pad:clamp(18px,4.4vw,64px);\n  --nav-h:76px;\n  --e:cubic-bezier(.22,1,.36,1);\n\n  \/* >>> SINGLE SOURCE OF TRUTH FOR THE CUBE SIZE <<< *\/\n  --cube:clamp(152px,40vw,236px);\n\n  position:relative; z-index:0; overflow:hidden;\n  background:var(--bg) !important; color:var(--ink) !important;\n  font-family:var(--f) !important;\n  font-weight:400; font-size:16px; line-height:1.5;\n  text-align:left; -webkit-font-smoothing:antialiased;\n\n  \/* If the theme content area is narrow, uncomment these 2 lines: *\/\n  \/* margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); *\/\n}\n.mifa-p1 *,.mifa-p1 *::before,.mifa-p1 *::after{ box-sizing:border-box; }\n.mifa-p1 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-p1 a:hover,.mifa-p1 a:focus{ text-decoration:none !important; }\n.mifa-p1 h1,.mifa-p1 h2,.mifa-p1 h3,.mifa-p1 p,.mifa-p1 ul,.mifa-p1 li{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-p1 ul{ list-style:none !important; }\n.mifa-p1 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-p1 button{\n  font:inherit; color:inherit; background:none; border:0; cursor:pointer;\n  padding:0; margin:0; text-transform:none; letter-spacing:normal;\n  box-shadow:none; border-radius:0; -webkit-appearance:none; appearance:none;\n}\n.mifa-p1 button:hover,.mifa-p1 button:focus{ background:none; }\n.mifa-p1 svg{ display:block; }\n.mifa-p1 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\nbody.admin-bar .mifa-p1 .p1-nav{ top:32px; }\n@media (max-width:782px){ body.admin-bar .mifa-p1 .p1-nav{ top:46px; } }\n\n\/* ========================== PRELOADER ========================== *\/\n.mifa-p1 .p1-pre{\n  position:fixed; inset:0; z-index:99999;\n  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;\n  background:var(--bg); perspective:900px;\n  transition:opacity .7s var(--e), visibility .7s;\n}\n.mifa-p1 .p1-pre.gone{ opacity:0; visibility:hidden; pointer-events:none; }\n.mifa-p1 .p1-pre__box{\n  position:relative; width:78px; height:78px; transform-style:preserve-3d;\n  animation:p1Spin 2.4s linear infinite;\n}\n.mifa-p1 .p1-pre__box i{\n  position:absolute; inset:0; border:1px solid rgba(196,22,43,.55);\n  background:rgba(196,22,43,.07);\n}\n.mifa-p1 .p1-pre__box i:nth-child(1){ transform:translateZ(39px) }\n.mifa-p1 .p1-pre__box i:nth-child(2){ transform:rotateY(90deg) translateZ(39px) }\n.mifa-p1 .p1-pre__box i:nth-child(3){ transform:rotateY(180deg) translateZ(39px) }\n.mifa-p1 .p1-pre__box i:nth-child(4){ transform:rotateY(-90deg) translateZ(39px) }\n@keyframes p1Spin{ to{ transform:rotateX(-22deg) rotateY(360deg) } }\n.mifa-p1 .p1-pre__t{\n  font-family:var(--m); font-size:11px; letter-spacing:.24em;\n  text-transform:uppercase; color:var(--soft); text-align:center; padding:0 20px;\n}\n.mifa-p1 .p1-pre__bar{ width:min(200px,52vw); height:2px; background:rgba(242,240,238,.12); overflow:hidden; }\n.mifa-p1 .p1-pre__bar b{\n  display:block; height:100%; width:0;\n  background:linear-gradient(90deg,var(--red-dp),var(--red-hi));\n  animation:p1Load 1.6s var(--e) forwards;\n}\n@keyframes p1Load{ to{ width:100% } }\n\n\/* ======================== CUSTOM CURSOR ======================== *\/\n.mifa-p1 .p1-cur,.mifa-p1 .p1-cur-r{\n  position:fixed; top:0; left:0; z-index:99998; pointer-events:none;\n  border-radius:50%; opacity:0; transition:opacity .3s;\n}\n.mifa-p1 .p1-cur{\n  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;\n  background:var(--red-hi); box-shadow:0 0 14px 3px rgba(255,59,84,.7);\n}\n.mifa-p1 .p1-cur-r{\n  width:36px; height:36px; margin:-18px 0 0 -18px;\n  border:1px solid rgba(255,59,84,.45);\n  transition:opacity .3s, width .35s var(--e), height .35s var(--e),\n             margin .35s var(--e), background .35s, border-color .35s;\n}\n.mifa-p1.cur-on .p1-cur,.mifa-p1.cur-on .p1-cur-r{ opacity:1; }\n.mifa-p1.cur-big .p1-cur-r{\n  width:66px; height:66px; margin:-33px 0 0 -33px;\n  background:rgba(196,22,43,.16); border-color:var(--red-hi);\n}\n\n\/* ============================= NAV ============================= *\/\n.mifa-p1 .p1-nav{\n  position:fixed; top:0; left:0; right:0; z-index:9000; height:var(--nav-h);\n  display:flex; align-items:center; justify-content:space-between; gap:16px;\n  padding:0 var(--pad); border-bottom:1px solid transparent;\n  transition:background .5s var(--e), height .5s var(--e), border-color .5s;\n}\n.mifa-p1 .p1-nav.stuck{\n  height:62px; background:rgba(7,7,10,.82); border-bottom-color:var(--line);\n  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);\n}\n.mifa-p1 .p1-logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; min-width:0; perspective:500px; }\n.mifa-p1 .p1-mark{\n  position:relative; width:40px; height:40px; flex-shrink:0; border-radius:9px;\n  overflow:hidden; background:var(--red); box-shadow:0 8px 26px rgba(196,22,43,.4);\n  transition:width .5s var(--e), height .5s var(--e), transform .6s var(--e);\n}\n.mifa-p1 .p1-mark img{ position:absolute; max-width:none; width:237.5%; height:237.5%; left:-62.2%; top:-54.6%; }\n.mifa-p1 .p1-nav.stuck .p1-mark{ width:34px; height:34px; }\n.mifa-p1 .p1-word{ display:flex; flex-direction:column; line-height:1.08; min-width:0; }\n.mifa-p1 .p1-word b{ font-size:14px; font-weight:800; letter-spacing:.1em; }\n.mifa-p1 .p1-word i{ font-style:normal; font-size:9.5px; font-weight:400; letter-spacing:.2em; color:var(--soft); }\n\n\/* ---- BRAND + HEADER TAGLINE (next to the logo) ---- *\/\n.mifa-p1 .p1-brand{\n  display:flex; align-items:center; gap:16px; min-width:0; flex-shrink:1;\n}\n.mifa-p1 .p1-head{\n  display:flex; flex-direction:column; gap:4px; min-width:0;\n  padding-left:16px; border-left:1px solid var(--line);\n  transition:opacity .5s var(--e);\n}\n.mifa-p1 .p1-head b{\n  display:block; font-size:12.5px; font-weight:600; line-height:1.25;\n  letter-spacing:-.005em; color:var(--ink); max-width:34ch;\n}\n.mifa-p1 .p1-head span{\n  display:flex; align-items:center; flex-wrap:wrap; gap:0;\n  font-family:var(--m); font-size:9.5px; letter-spacing:.14em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-p1 .p1-head span i{\n  display:inline-block; width:3px; height:3px; margin:0 9px; border-radius:50%;\n  background:var(--red-hi); flex-shrink:0;\n}\n\/* shrink slightly once the nav is stuck *\/\n.mifa-p1 .p1-nav.stuck .p1-head b{ font-size:11.5px; }\n\n.mifa-p1 .p1-rec{\n  display:flex; align-items:center; gap:8px; flex-shrink:0;\n  font-family:var(--m); font-size:10.5px; letter-spacing:.2em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-p1 .p1-rec i{\n  width:7px; height:7px; border-radius:50%; background:var(--red-hi);\n  box-shadow:0 0 10px 2px rgba(255,59,84,.8); animation:p1Blink 1.6s ease-in-out infinite;\n}\n@keyframes p1Blink{ 0%,100%{opacity:1} 50%{opacity:.12} }\n\n.mifa-p1 .p1-right{ display:flex; align-items:center; gap:22px; flex-shrink:0; }\n.mifa-p1 .p1-soc{ display:flex; gap:14px; }\n.mifa-p1 .p1-soc a{ font-family:var(--m); font-size:10.5px; letter-spacing:.14em; color:var(--soft); transition:color .3s; }\n\n\/* ---- MENU BUTTON ----\n   The label has its own class so that on mobile only the text\n   hides, never the burger. *\/\n.mifa-p1 .p1-menu{\n  display:flex; align-items:center; gap:11px; flex-shrink:0;\n  font-family:var(--m); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;\n}\n.mifa-p1 .p1-menu__t{ transition:color .3s; }\n\n.mifa-p1 .p1-burg{\n  display:block !important;              \/* must never hide *\/\n  position:relative; width:26px; height:12px; flex-shrink:0;\n}\n.mifa-p1 .p1-burg i{\n  position:absolute; left:0; width:100%; height:2px; border-radius:2px;\n  background:var(--ink); transition:transform .5s var(--e);\n}\n.mifa-p1 .p1-burg i:nth-child(1){ top:0 }\n.mifa-p1 .p1-burg i:nth-child(2){ top:10px }\n.mifa-p1 .p1-menu.open .p1-burg i:nth-child(1){ transform:translateY(5px) rotate(45deg) }\n.mifa-p1 .p1-menu.open .p1-burg i:nth-child(2){ transform:translateY(-5px) rotate(-45deg) }\n\n\/* -------------------------- MENU OVERLAY -------------------------- *\/\n.mifa-p1 .p1-ov{\n  position:fixed; inset:0; z-index:8900; pointer-events:none; perspective:900px;\n  display:flex; flex-direction:column; justify-content:center; overflow-y:auto;\n  padding:calc(var(--nav-h) + 30px) var(--pad) 40px;\n  background:radial-gradient(circle at 78% 18%, rgba(196,22,43,.20), transparent 55%), var(--bg-2);\n  clip-path:inset(0 0 100% 0); transition:clip-path .85s var(--e);\n}\n.mifa-p1 .p1-ov.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }\n.mifa-p1 .p1-ov__l{\n  display:flex; align-items:baseline; gap:18px; padding:5px 0;\n  font-size:clamp(30px,7vw,72px); font-weight:800; letter-spacing:-.03em; line-height:1.16;\n  color:var(--ink); opacity:0; transform:translateY(34px) rotateX(-24deg); transform-origin:top;\n  transition:opacity .6s var(--e), transform .6s var(--e), color .3s;\n}\n.mifa-p1 .p1-ov.open .p1-ov__l{ opacity:1; transform:none; }\n.mifa-p1 .p1-ov__l em{\n  font-family:var(--m); font-style:normal; font-size:11px; font-weight:400;\n  letter-spacing:.16em; color:var(--red-hi); flex-shrink:0;\n}\n.mifa-p1 .p1-ov__l.here{ color:var(--red-hi); }\n.mifa-p1 .p1-ov.open .p1-ov__l:nth-of-type(1){ transition-delay:.18s }\n.mifa-p1 .p1-ov.open .p1-ov__l:nth-of-type(2){ transition-delay:.24s }\n.mifa-p1 .p1-ov.open .p1-ov__l:nth-of-type(3){ transition-delay:.30s }\n.mifa-p1 .p1-ov.open .p1-ov__l:nth-of-type(4){ transition-delay:.36s }\n.mifa-p1 .p1-ov.open .p1-ov__l:nth-of-type(5){ transition-delay:.42s }\n.mifa-p1 .p1-ov.open .p1-ov__l:nth-of-type(6){ transition-delay:.48s }\n.mifa-p1 .p1-ov.open .p1-ov__l:nth-of-type(7){ transition-delay:.54s }\n.mifa-p1 .p1-ov__f{\n  margin-top:38px !important; padding-top:22px !important; border-top:1px solid var(--line);\n  display:flex; flex-wrap:wrap; gap:8px 30px;\n  font-family:var(--m); font-size:12px; color:var(--soft); word-break:break-word;\n}\n.mifa-p1 .p1-ov__f a{ color:var(--red-hi); }\n\n\/* ============================== HERO ============================== *\/\n.mifa-p1 .p1-hero{\n  position:relative; min-height:100svh; display:flex; flex-direction:column;\n  padding-top:var(--nav-h); background:var(--bg); overflow:hidden; isolation:isolate;\n}\n\n\/* ---- 3D floor grid ---- *\/\n.mifa-p1 .p1-floor{\n  position:absolute; left:-25%; right:-25%; bottom:-4%; height:62vh; z-index:0;\n  perspective:340px; perspective-origin:50% 0%; pointer-events:none;\n  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 42%, #000 78%, transparent 100%);\n          mask-image:linear-gradient(to bottom, transparent 0%, #000 42%, #000 78%, transparent 100%);\n}\n.mifa-p1 .p1-floor i{\n  position:absolute; inset:0; transform:rotateX(72deg); transform-origin:50% 0%;\n  background-image:\n    repeating-linear-gradient(to right,  rgba(196,22,43,.42) 0 1px, transparent 1px 88px),\n    repeating-linear-gradient(to bottom, rgba(196,22,43,.42) 0 1px, transparent 1px 88px);\n  animation:p1Run 3.4s linear infinite;\n}\n@keyframes p1Run{ from{ background-position:0 0 } to{ background-position:0 88px } }\n\n\/* ---- ambient ---- *\/\n.mifa-p1 .p1-orb{ position:absolute; z-index:0; border-radius:50%; pointer-events:none; }\n.mifa-p1 .p1-orb--a{\n  width:74vmax; height:74vmax; top:-34vmax; right:-24vmax;\n  background:radial-gradient(circle, rgba(196,22,43,.30) 0%, rgba(196,22,43,.07) 34%, transparent 62%);\n  animation:p1Drift 20s ease-in-out infinite alternate;\n}\n.mifa-p1 .p1-orb--b{\n  width:60vmax; height:60vmax; bottom:-30vmax; left:-22vmax;\n  background:radial-gradient(circle, rgba(122,12,24,.32) 0%, transparent 58%);\n  animation:p1Drift 27s ease-in-out infinite alternate-reverse;\n}\n@keyframes p1Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-7%,6%,0) scale(1.18)} }\n\n.mifa-p1 .p1-grain{\n  position:absolute; inset:-60%; z-index:1; pointer-events:none; opacity:.16;\n  background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n  animation:p1Grain .7s steps(3) infinite;\n}\n@keyframes p1Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n.mifa-p1 .p1-vig{\n  position:absolute; inset:0; z-index:1; pointer-events:none;\n  background:radial-gradient(ellipse at 50% 42%, transparent 38%, rgba(0,0,0,.7) 100%);\n}\n\n\/* ---- hero grid ---- *\/\n.mifa-p1 .p1-in{\n  position:relative; z-index:3; flex:1;\n  display:grid; align-items:center; gap:clamp(30px,5vw,70px);\n  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);\n  width:100%; max-width:1660px; margin:0 auto;\n  padding:clamp(30px,5.5vh,64px) var(--pad);\n  perspective:1300px;\n}\n.mifa-p1 .p1-copy{ min-width:0; transform-style:preserve-3d; will-change:transform; }\n\n.mifa-p1 .p1-tag{\n  display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,3.4vh,34px) !important;\n  font-family:var(--m); font-size:11px; letter-spacing:.2em;\n  text-transform:uppercase; color:var(--soft); transform:translateZ(30px);\n}\n.mifa-p1 .p1-tag b{ color:var(--red-hi); font-weight:400; }\n.mifa-p1 .p1-tag::after{ content:''; flex:1; max-width:110px; height:1px; background:var(--line); }\n\n.mifa-p1 h1.p1-h1{\n  margin:0 0 clamp(22px,3.4vh,38px) !important; max-width:100%;\n  font-size:clamp(42px,9.2vw,152px); font-weight:900;\n  line-height:.94; letter-spacing:-.045em; color:var(--ink);\n  transform:translateZ(64px);\n}\n.mifa-p1 .p1-h1 .l{ display:block; overflow:hidden; }\n.mifa-p1 .p1-h1 .l > span{\n  display:block; transform:translateY(105%); transition:transform 1.15s var(--e);\n  text-shadow:\n    1px 1px 0 rgba(122,12,24,.9),  2px 2px 0 rgba(122,12,24,.8),\n    3px 3px 0 rgba(122,12,24,.68), 4px 4px 0 rgba(122,12,24,.55),\n    5px 5px 0 rgba(122,12,24,.42), 6px 6px 0 rgba(122,12,24,.3),\n    7px 7px 0 rgba(122,12,24,.2),  8px 8px 0 rgba(122,12,24,.12),\n    0 22px 44px rgba(0,0,0,.85);\n}\n.mifa-p1.live .p1-h1 .l > span{ transform:none; }\n.mifa-p1.live .p1-h1 .l:nth-child(1) > span{ transition-delay:.10s }\n.mifa-p1.live .p1-h1 .l:nth-child(2) > span{ transition-delay:.20s }\n.mifa-p1 .p1-h1 em{\n  font-style:normal; color:var(--red-hi);\n  text-shadow:0 0 46px rgba(255,59,84,.55), 0 0 90px rgba(196,22,43,.35);\n}\n\n.mifa-p1 p.p1-sub{\n  margin:0 0 clamp(22px,3vh,30px) !important; max-width:46ch;\n  font-size:clamp(15.5px,1.5vw,19.5px); line-height:1.65; color:var(--soft);\n  transform:translateZ(30px);\n}\n.mifa-p1 .p1-sub b{ color:var(--ink); font-weight:600; }\n\n.mifa-p1 .p1-meta{ display:flex; flex-wrap:wrap; gap:10px; transform:translateZ(22px); }\n.mifa-p1 .p1-meta span{\n  display:inline-flex; align-items:center; gap:9px;\n  padding:9px 15px; border:1px solid var(--line); border-radius:999px;\n  background:rgba(242,240,238,.03);\n  font-family:var(--m); font-size:11px; letter-spacing:.06em; color:var(--soft);\n  transition:border-color .4s, color .4s, transform .4s var(--e);\n}\n.mifa-p1 .p1-meta span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--red); flex-shrink:0; }\n\n.mifa-p1 .p1-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3.6vh,40px); transform:translateZ(46px); }\n.mifa-p1 .p1-btn{\n  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:11px;\n  padding:16px 30px; border-radius:999px; font-size:13px; font-weight:600;\n  letter-spacing:.09em; text-transform:uppercase;\n  transition:transform .45s var(--e), color .35s, border-color .35s, box-shadow .45s;\n}\n.mifa-p1 .p1-btn span,.mifa-p1 .p1-btn svg{ position:relative; z-index:2; }\n.mifa-p1 .p1-btn svg{ width:16px; height:16px; flex-shrink:0; transition:transform .45s var(--e); }\n.mifa-p1 .p1-btn--fill{ background:var(--red); color:#fff; box-shadow:0 10px 34px rgba(196,22,43,.42); }\n.mifa-p1 .p1-btn--fill::before{\n  content:''; position:absolute; inset:0; background:var(--ink);\n  transform:translateY(101%); transition:transform .5s var(--e);\n}\n.mifa-p1 .p1-btn--line{ border:1px solid rgba(242,240,238,.26); color:var(--ink); }\n.mifa-p1 .p1-btn--line::before{\n  content:''; position:absolute; inset:0; background:rgba(242,240,238,.1);\n  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--e);\n}\n\n\/* =================== SIGNATURE : 3D BRAND CUBE =================== *\/\n.mifa-p1 .p1-stage{\n  position:relative; justify-self:center; min-width:0;\n  width:min(100%,430px);\n  display:flex; flex-direction:column; align-items:center;\n  gap:clamp(18px,2.6vw,28px);\n}\n.mifa-p1 .p1-cubewrap{\n  position:relative; width:100%;\n  height:calc(var(--cube) * 1.55);\n  display:grid; place-items:center;\n  perspective:calc(var(--cube) * 4.2);\n}\n.mifa-p1 .p1-cube{\n  position:relative; width:var(--cube); height:var(--cube);\n  transform-style:preserve-3d; will-change:transform;\n  animation:p1Turn 22s linear infinite;\n}\n@keyframes p1Turn{ from{ transform:rotateX(-16deg) rotateY(0deg) } to{ transform:rotateX(-16deg) rotateY(360deg) } }\n\n.mifa-p1 .p1-face{\n  position:absolute; inset:0; display:grid; place-content:center; place-items:center;\n  gap:8px; padding:clamp(12px,3vw,18px); text-align:center;\n  border:1px solid rgba(255,59,84,.4);\n  background:linear-gradient(155deg, rgba(196,22,43,.16), rgba(12,12,17,.94));\n  box-shadow:inset 0 0 44px rgba(196,22,43,.18);\n}\n.mifa-p1 .p1-face b{\n  font-size:clamp(15px,3.9vw,25px); font-weight:800; letter-spacing:-.02em;\n  line-height:1.12; color:var(--ink);\n}\n.mifa-p1 .p1-face i{\n  font-style:normal; font-family:var(--m); font-size:clamp(8px,2vw,9.5px);\n  letter-spacing:.16em; text-transform:uppercase; color:var(--red-hi);\n}\n.mifa-p1 .p1-face--logo{ background:linear-gradient(155deg, rgba(196,22,43,.34), rgba(12,12,17,.92)); }\n.mifa-p1 .p1-face__mk{\n  position:relative; width:clamp(44px,13vw,64px); height:clamp(44px,13vw,64px);\n  border-radius:12px; overflow:hidden;\n  background:var(--red); box-shadow:0 10px 30px rgba(196,22,43,.5);\n}\n.mifa-p1 .p1-face__mk img{ position:absolute; max-width:none; width:237.5%; height:237.5%; left:-62.2%; top:-54.6%; }\n\n.mifa-p1 .p1-f1{ transform:translateZ(calc(var(--cube) \/ 2)); }\n.mifa-p1 .p1-f2{ transform:rotateY(90deg)  translateZ(calc(var(--cube) \/ 2)); }\n.mifa-p1 .p1-f3{ transform:rotateY(180deg) translateZ(calc(var(--cube) \/ 2)); }\n.mifa-p1 .p1-f4{ transform:rotateY(-90deg) translateZ(calc(var(--cube) \/ 2)); }\n.mifa-p1 .p1-f5{ transform:rotateX(90deg)  translateZ(calc(var(--cube) \/ 2)); }\n.mifa-p1 .p1-f6{ transform:rotateX(-90deg) translateZ(calc(var(--cube) \/ 2)); }\n\n.mifa-p1 .p1-cubewrap::after{\n  content:''; position:absolute; z-index:-1;\n  left:50%; translate:-50% 0; bottom:8%;\n  width:70%; height:30px; border-radius:50%;\n  background:radial-gradient(ellipse, rgba(196,22,43,.42), transparent 70%);\n  filter:blur(14px); animation:p1Shadow 22s ease-in-out infinite;\n}\n@keyframes p1Shadow{ 0%,100%{ transform:scaleX(1); opacity:.75 } 50%{ transform:scaleX(.72); opacity:.45 } }\n\n\/* ---- counters ---- *\/\n.mifa-p1 .p1-stats{\n  display:flex; width:100%; justify-content:space-between; gap:10px;\n  padding-top:18px; border-top:1px solid var(--line);\n}\n.mifa-p1 .p1-stat{ min-width:0; text-align:left; }\n.mifa-p1 .p1-stat b{\n  display:block; font-size:clamp(22px,6vw,34px); font-weight:800;\n  letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums;\n}\n.mifa-p1 .p1-stat i{\n  display:block; margin-top:3px; font-style:normal; font-family:var(--m);\n  font-size:clamp(8.5px,2.2vw,9.5px); letter-spacing:.16em;\n  text-transform:uppercase; color:var(--soft);\n}\n\n\/* --------------------------- MARQUEE --------------------------- *\/\n.mifa-p1 .p1-marq{\n  position:relative; z-index:3; padding:20px 0; overflow:hidden; white-space:nowrap;\n  border-top:1px solid var(--line); border-bottom:1px solid var(--line);\n  background:rgba(12,12,17,.7);\n}\n.mifa-p1 .p1-marq__t{ display:inline-flex; align-items:center; animation:p1Slide 32s linear infinite; }\n.mifa-p1 .p1-marq__t span{\n  display:inline-flex; align-items:center; gap:30px; padding-right:30px;\n  font-size:20px; font-weight:700; letter-spacing:-.015em; color:rgba(242,240,238,.72);\n}\n.mifa-p1 .p1-marq__t span::after{\n  content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;\n  background:var(--red-hi); box-shadow:0 0 10px 1px rgba(255,59,84,.7);\n}\n@keyframes p1Slide{ to{ transform:translateX(-50%) } }\n\n\/* -------------------------- SCROLL CUE -------------------------- *\/\n.mifa-p1 .p1-scr{\n  position:absolute; right:var(--pad); bottom:108px; z-index:4;\n  display:flex; flex-direction:column; align-items:center; gap:10px;\n  writing-mode:vertical-rl;\n  font-family:var(--m); font-size:9.5px; letter-spacing:.22em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-p1 .p1-scr i{\n  writing-mode:horizontal-tb; width:1px; height:46px;\n  background:linear-gradient(var(--red-hi),transparent); animation:p1Cue 2s ease-in-out infinite;\n}\n@keyframes p1Cue{ 0%,100%{transform:scaleY(.3); opacity:.35} 50%{transform:scaleY(1); opacity:1} }\n\n\/* reveal *\/\n.mifa-p1 .rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e), transform .9s var(--e); }\n.mifa-p1.live .rv{ opacity:1; transform:none; }\n.mifa-p1.live .a1{ transition-delay:.40s } .mifa-p1.live .a2{ transition-delay:.48s }\n.mifa-p1.live .a3{ transition-delay:.56s } .mifa-p1.live .a4{ transition-delay:.64s }\n.mifa-p1.live .a5{ transition-delay:.30s }\n\n\/* ---------------- HOVER \u2014 pointer devices only ---------------- *\/\n@media (hover:hover) and (pointer:fine){\n  .mifa-p1 .p1-logo:hover .p1-mark{ transform:rotateY(28deg) rotateX(-8deg) scale(1.06); }\n  .mifa-p1 .p1-soc a:hover{ color:var(--red-hi); }\n  .mifa-p1 .p1-menu:hover .p1-menu__t{ color:var(--red-hi); }\n  .mifa-p1 .p1-ov__l:hover{ color:var(--red-hi); }\n  .mifa-p1 .p1-meta span:hover{ border-color:rgba(255,59,84,.5); color:var(--ink); transform:translateY(-3px); }\n  .mifa-p1 .p1-btn:hover{ transform:translateY(-4px); }\n  .mifa-p1 .p1-btn--fill:hover{ color:var(--bg); box-shadow:0 18px 46px rgba(196,22,43,.28); }\n  .mifa-p1 .p1-btn--fill:hover::before{ transform:translateY(0); }\n  .mifa-p1 .p1-btn--fill:hover svg{ transform:translateX(4px); }\n  .mifa-p1 .p1-btn--line:hover{ border-color:rgba(242,240,238,.55); }\n  .mifa-p1 .p1-btn--line:hover::before{ transform:scaleX(1); transform-origin:left; }\n  .mifa-p1 .p1-btn--line:hover svg{ transform:scale(1.2); }\n  .mifa-p1 .p1-marq:hover .p1-marq__t{ animation-play-state:paused; }\n  .mifa-p1 .p1-cubewrap:hover .p1-cube{ animation-play-state:paused; }\n  .mifa-p1 .p1-face{ backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }\n}\n\n\/* =========================== RESPONSIVE =========================== *\/\n@media (max-width:1440px){\n  \/* keep the nav from crowding: drop the second line first *\/\n  .mifa-p1 .p1-head span{ display:none; }\n  .mifa-p1 .p1-head b{ font-size:11.5px; max-width:26ch; }\n}\n@media (max-width:1200px){\n  .mifa-p1 .p1-head{ display:none; }\n}\n@media (max-width:1040px){\n  .mifa-p1 .p1-in{ grid-template-columns:1fr; perspective:none; }\n  .mifa-p1 .p1-copy{ transform-style:flat; }\n  .mifa-p1 .p1-tag,\n  .mifa-p1 h1.p1-h1,\n  .mifa-p1 p.p1-sub,\n  .mifa-p1 .p1-meta,\n  .mifa-p1 .p1-btns{ transform:none !important; }\n  .mifa-p1 .p1-stage{ order:-1; align-self:start; width:100%; }\n  .mifa-p1 .p1-scr{ display:none; }\n  .mifa-p1 .p1-cur,.mifa-p1 .p1-cur-r{ display:none; }\n}\n@media (max-width:760px){\n  .mifa-p1{ --nav-h:64px; --cube:clamp(148px,44vw,210px); }\n  .mifa-p1 .p1-rec,.mifa-p1 .p1-soc{ display:none; }\n\n  \/* FIX: hide only the \"Menu\" label \u2014 never the burger *\/\n  .mifa-p1 .p1-menu__t{ display:none; }\n  \/* larger tap area (44px) without shifting the layout *\/\n  .mifa-p1 .p1-menu{ padding:16px 9px; margin:-16px -9px; }\n\n  .mifa-p1 .p1-hero{ min-height:auto; }\n  .mifa-p1 .p1-in{ padding-top:30px; padding-bottom:42px; gap:26px; }\n  .mifa-p1 h1.p1-h1{ font-size:clamp(38px,11.6vw,64px); letter-spacing:-.034em; }\n  .mifa-p1 .p1-h1 .l > span{\n    text-shadow:1px 1px 0 rgba(122,12,24,.9), 2px 2px 0 rgba(122,12,24,.7),\n                3px 3px 0 rgba(122,12,24,.5), 4px 4px 0 rgba(122,12,24,.3),\n                0 14px 30px rgba(0,0,0,.85);\n  }\n  .mifa-p1 .p1-btns{ flex-direction:column; align-items:stretch; }\n  .mifa-p1 .p1-btn{ justify-content:center; }\n  .mifa-p1 .p1-marq__t span{ font-size:16px; gap:22px; padding-right:22px; }\n  .mifa-p1 .p1-word i{ display:none; }\n  .mifa-p1 .p1-grain{ opacity:.1; }\n  .mifa-p1 .p1-floor{ height:44vh; }\n}\n@media (max-width:400px){\n  .mifa-p1{ --cube:clamp(136px,46vw,170px); }\n  .mifa-p1 .p1-meta span{ padding:8px 12px; font-size:10.5px; }\n  .mifa-p1 .p1-stats{ gap:6px; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-p1 *,.mifa-p1 *::before,.mifa-p1 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-p1 .rv{ opacity:1; transform:none; }\n  .mifa-p1 .p1-h1 .l > span{ transform:none; }\n  .mifa-p1 .p1-cube{ animation:none; transform:rotateX(-16deg) rotateY(-28deg); }\n}\n<\/style>\n\n<!-- ============================ PRELOADER ============================ -->\n<div class=\"p1-pre\" id=\"p1Pre\">\n  <div class=\"p1-pre__box\"><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\n  <div class=\"p1-pre__t\">Preparing the call sheet&hellip;<\/div>\n  <div class=\"p1-pre__bar\"><b><\/b><\/div>\n<\/div>\n\n<!-- ========================== CUSTOM CURSOR ========================== -->\n<div class=\"p1-cur\" id=\"p1Cur\" aria-hidden=\"true\"><\/div>\n<div class=\"p1-cur-r\" id=\"p1CurR\" aria-hidden=\"true\"><\/div>\n\n<!-- =============================== NAV =============================== -->\n<header class=\"p1-nav\" id=\"p1Nav\">\n  <div class=\"p1-brand\">\n    <a href=\"#home\" class=\"p1-logo\" aria-label=\"Mifa Productions \u2014 home\">\n      <span class=\"p1-mark\">\n        <img decoding=\"async\" src=\"https:\/\/mifaproduction.com\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-25-at-8.47.21-PM.jpeg\" alt=\"\">\n      <\/span>\n      <span class=\"p1-word\"><b>MIFA<\/b><i>PRODUCTIONS<\/i><\/span>\n    <\/a>\n\n    <!-- ===== HEADER TAGLINE NEXT TO THE LOGO ===== -->\n    <div class=\"p1-head\">\n      <b>Best Line Production &amp; Production Company in Delhi NCR<\/b>\n      <span>TVC \/ Digital Film<i><\/i>8+ Years<i><\/i>15+ Services<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"p1-rec\"><i><\/i> Rolling<\/div>\n\n  <div class=\"p1-right\">\n    <div class=\"p1-soc\">\n      <a href=\"https:\/\/www.instagram.com\/mifaproduction\" target=\"_blank\" rel=\"noopener\">IG<\/a>\n      <a href=\"https:\/\/www.facebook.com\/mifaproductions\" target=\"_blank\" rel=\"noopener\">FB<\/a>\n      <a href=\"https:\/\/www.linkedin.com\/company\/mifaproductions\/\" target=\"_blank\" rel=\"noopener\">LN<\/a>\n    <\/div>\n    <button class=\"p1-menu\" id=\"p1MenuBtn\" aria-expanded=\"false\" aria-controls=\"p1Ov\" aria-label=\"Open menu\">\n      <span class=\"p1-menu__t\">Menu<\/span>\n      <span class=\"p1-burg\"><i><\/i><i><\/i><\/span>\n    <\/button>\n  <\/div>\n<\/header>\n\n<!-- =========================== MENU OVERLAY =========================== -->\n<div class=\"p1-ov\" id=\"p1Ov\">\n  <a class=\"p1-ov__l here\" href=\"#home\"><em>001<\/em> Home<\/a>\n  <a class=\"p1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/studio\/\"><em>002<\/em> Studio<\/a>\n  <a class=\"p1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/services\/\"><em>003<\/em> Services<\/a>\n  <a class=\"p1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/work\/\"><em>004<\/em> Work<\/a>\n  <a class=\"p1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/client\/\"><em>005<\/em> Clients<\/a>\n  <a class=\"p1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/blog\/\"><em>006<\/em> Blog<\/a>\n  <a class=\"p1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/contact\/\"><em>007<\/em> Contact<\/a>\n  <div class=\"p1-ov__f\">\n    <span>A-27K, Sector 16, Noida 201301<\/span>\n    <a href=\"tel:+918527121545\">+91 85271 21545<\/a>\n    <a href=\"mailto:mifaproductions@gmail.com\">mifaproductions@gmail.com<\/a>\n  <\/div>\n<\/div>\n\n<!-- ================================ HERO ================================ -->\n<section class=\"p1-hero\" id=\"home\">\n  <div class=\"p1-orb p1-orb--a\" aria-hidden=\"true\"><\/div>\n  <div class=\"p1-orb p1-orb--b\" aria-hidden=\"true\"><\/div>\n  <div class=\"p1-floor\" aria-hidden=\"true\"><i><\/i><\/div>\n  <div class=\"p1-grain\" aria-hidden=\"true\"><\/div>\n  <div class=\"p1-vig\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"p1-in\">\n\n    <div class=\"p1-copy\" id=\"p1Copy\">\n      <div class=\"p1-tag rv a1\"><b>001<\/b> \/ Line Production &amp; Video Production<\/div>\n\n      <h1 class=\"p1-h1\">\n        <span class=\"l\"><span>We Bring<\/span><\/span>\n        <span class=\"l\"><span><em>Stories<\/em> to Life.<\/span><\/span>\n      <\/h1>\n\n      <p class=\"p1-sub rv a2\">\n        Mifa Productions &mdash; TVC &amp; Digital Film specialists.\n        <b>From concept to final delivery<\/b> &mdash; permissions, crew, equipment,\n        logistics. Anywhere in India.\n      <\/p>\n\n      <div class=\"p1-meta rv a3\">\n        <span>8+ years of experience<\/span>\n        <span>Noida &middot; New Delhi<\/span>\n        <span>Pan-India crews<\/span>\n      <\/div>\n\n      <div class=\"p1-btns rv a4\">\n        <a class=\"p1-btn p1-btn--fill\" href=\"https:\/\/mifaproduction.com\/index.php\/contact\/\">\n          <span>Start a Project<\/span>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n        <\/a>\n        <a class=\"p1-btn p1-btn--line\" href=\"https:\/\/mifaproduction.com\/index.php\/work\/\">\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n          <span>Watch Showreel<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- ---------- 3D BRAND CUBE ---------- -->\n    <div class=\"p1-stage rv a5\" id=\"p1Stage\">\n\n      <div class=\"p1-cubewrap\" id=\"p1CubeWrap\" aria-hidden=\"true\">\n        <div class=\"p1-cube\" id=\"p1Cube\">\n          <div class=\"p1-face p1-face--logo p1-f1\">\n            <span class=\"p1-face__mk\">\n              <img decoding=\"async\" src=\"https:\/\/mifaproduction.com\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-25-at-8.47.21-PM.jpeg\" alt=\"\">\n            <\/span>\n            <i>Mifa Productions<\/i>\n          <\/div>\n          <div class=\"p1-face p1-f2\"><b>Best Line<br>Production<\/b><i>Delhi NCR<\/i><\/div>\n          <div class=\"p1-face p1-f3\"><b>TVC \/<br>Digital<\/b><i>Formats<\/i><\/div>\n          <div class=\"p1-face p1-f4\"><b>8+<\/b><i>Years<\/i><\/div>\n          <div class=\"p1-face p1-f5\"><b>15+<\/b><i>Services<\/i><\/div>\n          <div class=\"p1-face p1-f6\"><b>Production<br>Company<\/b><i>Delhi NCR<\/i><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"p1-stats\">\n        <div class=\"p1-stat\"><b data-c=\"8\" data-suf=\"+\">0<\/b><i>Years<\/i><\/div>\n        <div class=\"p1-stat\"><b data-c=\"15\" data-suf=\"+\">0<\/b><i>Services<\/i><\/div>\n        <div class=\"p1-stat\"><b data-c=\"100\" data-suf=\"+\">0<\/b><i>Projects<\/i><\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n  <div class=\"p1-scr\">Scroll<i><\/i><\/div>\n\n  <div class=\"p1-marq\">\n    <div class=\"p1-marq__t\" id=\"p1Marq\">\n      <span>Line Production<\/span><span>Video Production<\/span><span>Corporate Films<\/span>\n      <span>Commercials<\/span><span>Digital Content<\/span><span>Photography<\/span>\n      <span>Micro Drama<\/span><span>Explainer Videos<\/span>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var root = (document.currentScript && document.currentScript.closest)\n    ? document.currentScript.closest('.mifa-p1')\n    : document.querySelector('.mifa-p1');\n  if(!root) return;\n  var q = function(s){ return root.querySelector(s); };\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* ---------------- preloader ---------------- *\/\n  var pre = q('#p1Pre');\n  function go(){\n    root.classList.add('live');\n    if(pre){ pre.classList.add('gone'); setTimeout(function(){ pre.style.display = 'none'; }, 900); }\n    count();\n  }\n  if(reduce){ go(); }\n  else{\n    setTimeout(go, 1650);\n    setTimeout(function(){ root.classList.add('live'); }, 4000);   \/* fail-safe *\/\n  }\n\n  \/* ---------------- nav ---------------- *\/\n  var nav = q('#p1Nav');\n  function onScroll(){ nav.classList.toggle('stuck', window.scrollY > 20); }\n  window.addEventListener('scroll', onScroll, {passive:true}); onScroll();\n\n  \/* ---------------- menu ---------------- *\/\n  var btn = q('#p1MenuBtn'), ov = q('#p1Ov');\n  function menu(force){\n    var open = force !== undefined ? force : !ov.classList.contains('open');\n    ov.classList.toggle('open', open);\n    btn.classList.toggle('open', open);\n    btn.setAttribute('aria-expanded', open);\n    btn.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');\n    document.body.style.overflow = open ? 'hidden' : '';\n  }\n  btn.addEventListener('click', function(){ menu(); });\n  ov.querySelectorAll('a').forEach(function(a){\n    a.addEventListener('click', function(){ menu(false); });\n  });\n  document.addEventListener('keydown', function(e){\n    if(e.key === 'Escape' && ov.classList.contains('open')) menu(false);\n  });\n\n  \/* ---------------- count-up ---------------- *\/\n  var counted = false;\n  function count(){\n    if(counted) return; counted = true;\n    root.querySelectorAll('[data-c]').forEach(function(el){\n      var end = +el.dataset.c, suf = el.dataset.suf || '', cur = 0;\n      if(reduce){ el.textContent = end + suf; return; }\n      var step = Math.max(1, Math.round(end \/ 36));\n      var t = setInterval(function(){\n        cur += step;\n        if(cur >= end){ cur = end; clearInterval(t); }\n        el.textContent = cur + suf;\n      }, 32);\n    });\n  }\n\n  \/* ------- 3D parallax + cursor : desktop mouse only ------- *\/\n  var desktop = window.matchMedia('(hover:hover) and (pointer:fine) and (min-width:1041px)').matches;\n\n  if(!reduce && desktop){\n    var copy = q('#p1Copy'),\n        cube = q('#p1Cube'),\n        wrap = q('#p1CubeWrap'),\n        dot  = q('#p1Cur'),\n        ring = q('#p1CurR'),\n        mx = 0, my = 0, tx = 0, ty = 0,\n        cx = 0, cy = 0, rx = 0, ry = 0,\n        hovering = false;\n\n    window.addEventListener('mousemove', function(e){\n      cx = e.clientX; cy = e.clientY;\n      dot.style.transform = 'translate(' + cx + 'px,' + cy + 'px)';\n      root.classList.add('cur-on');\n      var b = root.getBoundingClientRect();\n      mx = ((e.clientX - b.left) \/ b.width  - .5) * 2;\n      my = ((e.clientY - b.top)  \/ b.height - .5) * 2;\n    }, {passive:true});\n\n    wrap.addEventListener('mouseenter', function(){ hovering = true; });\n    wrap.addEventListener('mouseleave', function(){ hovering = false; });\n\n    (function loop(){\n      rx += (cx - rx) * .16; ry += (cy - ry) * .16;\n      ring.style.transform = 'translate(' + rx + 'px,' + ry + 'px)';\n\n      tx += (mx - tx) * .07; ty += (my - ty) * .07;\n      copy.style.transform =\n        'rotateY(' + (tx * 5.5) + 'deg) rotateX(' + (-ty * 4) + 'deg)';\n\n      if(hovering){\n        cube.style.animationPlayState = 'paused';\n        cube.style.transform =\n          'rotateX(' + (-16 - ty * 22) + 'deg) rotateY(' + (tx * 55) + 'deg)';\n      } else if(cube.style.transform){\n        cube.style.transform = '';\n        cube.style.animationPlayState = '';\n      }\n      requestAnimationFrame(loop);\n    })();\n\n    root.querySelectorAll('a, button').forEach(function(el){\n      el.addEventListener('mouseenter', function(){ root.classList.add('cur-big'); });\n      el.addEventListener('mouseleave', function(){ root.classList.remove('cur-big'); });\n    });\n    document.addEventListener('mouseleave', function(){ root.classList.remove('cur-on'); });\n  }\n\n  \/* ------- clear inline transforms on resize ------- *\/\n  window.addEventListener('resize', function(){\n    if(window.innerWidth <= 1040){\n      var c = q('#p1Copy'), k = q('#p1Cube');\n      if(c) c.style.transform = '';\n      if(k){ k.style.transform = ''; k.style.animationPlayState = ''; }\n    }\n  }, {passive:true});\n\n  \/* ---------------- marquee ---------------- *\/\n  var t = q('#p1Marq');\n  if(t) t.innerHTML += t.innerHTML;\n})();\n<\/script>\n<\/div>\n\n\n\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 HOME \u00b7 PART 2 : 002 \/ STUDIO   (ENGLISH)\n     3D SIGNATURE : coverflow production pipeline (preserve-3d)\n\n     WHAT'S IN THIS VERSION\n     \u00b7 Headings reveal word by word from below (mask reveal)\n     \u00b7 Icons \"draw\" themselves in SVG \u2014 the line builds up\n     \u00b7 The active dot fills with progress so you can see the timing\n     \u00b7 Coverflow supports swipe (mobile) + arrow keys (desktop)\n     \u00b7 Shine sweep on the active card + staggered inner content\n     \u00b7 Tiles reveal with a stagger and a shine pass\n     \u00b7 Scroll parallax on the background orb\n     \u00b7 Magnetic CTA button\n\n     TWO BUGS FIXED EARLIER\n     \u00b7 .p2-card__t \/ __d were inline spans \u2014 without display:block\n       the title and text ran together on one line.\n     \u00b7 .p2-tile had overflow:hidden together with preserve-3d. Per\n       the CSS spec overflow:hidden flattens 3D, so the icon's\n       translateZ did nothing. Clipping now happens on ::before\n       via border-radius instead.\n\n     Everything is scoped inside .mifa-p2\n     ============================================================ -->\n\n<div class=\"mifa-p2\">\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter+Tight:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@300;400;500&display=swap');\n\n\/* ===================== TOKENS + THEME RESET ===================== *\/\n.mifa-p2{\n  --bg:#07070A; --bg-2:#0C0C11; --panel:#101017;\n  --ink:#F2F0EE; --soft:rgba(242,240,238,.58); --line:rgba(242,240,238,.12);\n  --red:#C4162B; --red-hi:#FF3B54; --red-dp:#7A0C18;\n  --f:'Inter Tight',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;\n  --m:'DM Mono',ui-monospace,monospace;\n  --pad:clamp(18px,4.4vw,64px);\n  --e:cubic-bezier(.22,1,.36,1);\n  --dur:3.6s;                      \/* coverflow auto-advance *\/\n\n  position:relative; z-index:0; overflow:hidden;\n  background:var(--bg) !important; color:var(--ink) !important;\n  font-family:var(--f) !important;\n  font-weight:400; font-size:16px; line-height:1.5;\n  text-align:left; -webkit-font-smoothing:antialiased;\n  \/* If the theme content area is narrow, uncomment:\n  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); *\/\n}\n.mifa-p2 *,.mifa-p2 *::before,.mifa-p2 *::after{ box-sizing:border-box; }\n.mifa-p2 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-p2 a:hover,.mifa-p2 a:focus{ text-decoration:none !important; }\n.mifa-p2 h1,.mifa-p2 h2,.mifa-p2 h3,.mifa-p2 p,.mifa-p2 ul,.mifa-p2 li{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-p2 ul{ list-style:none !important; }\n.mifa-p2 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-p2 button{\n  font:inherit; color:inherit; background:none; border:0; cursor:pointer;\n  padding:0; margin:0; text-transform:none; letter-spacing:normal;\n  box-shadow:none; border-radius:0; -webkit-appearance:none; appearance:none;\n}\n.mifa-p2 button:hover,.mifa-p2 button:focus{ background:none; }\n.mifa-p2 svg{ display:block; }\n.mifa-p2 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\n\/* ============================ SHELL ============================ *\/\n.mifa-p2 .p2{ position:relative; padding:clamp(64px,10vh,120px) var(--pad); background:var(--bg); }\n.mifa-p2 .p2__in{ position:relative; z-index:3; max-width:1660px; margin:0 auto; }\n.mifa-p2 .p2-orb{\n  position:absolute; z-index:0; border-radius:50%; pointer-events:none; will-change:transform;\n  width:76vmax; height:76vmax; top:-32vmax; left:-28vmax;\n  background:radial-gradient(circle, rgba(196,22,43,.20) 0%, transparent 58%);\n  animation:p2Drift 24s ease-in-out infinite alternate;\n}\n@keyframes p2Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(8%,-6%,0) scale(1.18)} }\n.mifa-p2 .p2-orb2{\n  position:absolute; z-index:0; border-radius:50%; pointer-events:none;\n  width:56vmax; height:56vmax; bottom:-26vmax; right:-20vmax;\n  background:radial-gradient(circle, rgba(122,12,24,.28) 0%, transparent 58%);\n  animation:p2Drift 30s ease-in-out infinite alternate-reverse;\n}\n.mifa-p2 .p2-grain{\n  position:absolute; inset:-60%; z-index:1; pointer-events:none; opacity:.14;\n  background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n  animation:p2Grain .7s steps(3) infinite;\n}\n@keyframes p2Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n\n\/* ---------------- reveal : visible by default, JS opts in ---------------- *\/\n.mifa-p2.p2-anim .p2-rv{ opacity:0; transform:translateY(34px); transition:opacity .95s var(--e), transform .95s var(--e); }\n.mifa-p2.p2-anim .p2-rv.p2-on{ opacity:1; transform:none; }\n\n\/* word-by-word heading reveal *\/\n.mifa-p2 .p2-w{\n  display:inline-block; overflow:hidden; vertical-align:bottom;\n  padding:0 .07em .16em; margin:0 -.07em -.16em;      \/* room for shadow + descenders *\/\n}\n.mifa-p2.p2-anim .p2-w > span{ display:inline-block; transform:translateY(112%); transition:transform 1s var(--e); }\n.mifa-p2.p2-anim .p2-wr.p2-on .p2-w > span{ transform:none; }\n\n\/* ============================ HEAD ============================ *\/\n.mifa-p2 .p2-tag{\n  display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,3vh,32px) !important;\n  font-family:var(--m); font-size:11px; letter-spacing:.2em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-p2 .p2-tag b{ color:var(--red-hi); font-weight:400; }\n.mifa-p2 .p2-tag::after{\n  content:''; flex:1; max-width:110px; height:1px; background:var(--line);\n  transform-origin:left; transform:scaleX(0); transition:transform 1.1s var(--e) .2s;\n}\n.mifa-p2.p2-anim .p2-tag.p2-on::after,\n.mifa-p2:not(.p2-anim) .p2-tag::after{ transform:scaleX(1); }\n\n.mifa-p2 .p2-head{\n  display:grid; gap:clamp(24px,4vw,64px); align-items:end;\n  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);\n  margin-bottom:clamp(44px,7vh,86px);\n}\n.mifa-p2 h2.p2-h2{\n  margin:0 !important; font-size:clamp(34px,5.4vw,82px); font-weight:900;\n  line-height:.98; letter-spacing:-.042em; color:var(--ink);\n  text-shadow:1px 1px 0 rgba(122,12,24,.75), 2px 2px 0 rgba(122,12,24,.55),\n              3px 3px 0 rgba(122,12,24,.35), 4px 4px 0 rgba(122,12,24,.2),\n              0 18px 40px rgba(0,0,0,.8);\n}\n.mifa-p2 .p2-h2 em{ font-style:normal; color:var(--red-hi); text-shadow:0 0 40px rgba(255,59,84,.5); }\n.mifa-p2 p.p2-lede{\n  margin:0 !important; max-width:52ch;\n  font-size:clamp(15px,1.45vw,18px); line-height:1.75; color:var(--soft);\n}\n.mifa-p2 .p2-lede b{ color:var(--ink); font-weight:600; }\n\n\/* ============ 3D SIGNATURE : COVERFLOW PIPELINE ============ *\/\n.mifa-p2 .p2-pipe{ margin-bottom:clamp(56px,9vh,110px); }\n.mifa-p2 .p2-pipe__bar{\n  display:flex; align-items:center; justify-content:space-between; gap:14px;\n  margin-bottom:26px; font-family:var(--m); font-size:10.5px;\n  letter-spacing:.16em; text-transform:uppercase; color:var(--soft);\n}\n.mifa-p2 .p2-pipe__bar b{ color:var(--red-hi); font-weight:400; }\n.mifa-p2 .p2-now{ display:inline-block; }\n.mifa-p2 .p2-now.flip{ animation:p2Flip .55s var(--e); }\n@keyframes p2Flip{\n  0%{ transform:translateY(0); opacity:1 }\n  40%{ transform:translateY(-70%); opacity:0 }\n  60%{ transform:translateY(70%); opacity:0 }\n  100%{ transform:translateY(0); opacity:1 }\n}\n\n.mifa-p2 .p2-rail{\n  position:relative; height:clamp(300px,40vw,380px);\n  perspective:1500px; perspective-origin:50% 50%;\n  touch-action:pan-y;\n}\n.mifa-p2 .p2-rail__in{ position:absolute; inset:0; transform-style:preserve-3d; }\n\n.mifa-p2 .p2-card{\n  position:absolute; top:50%; left:50%;\n  width:min(78vw,330px); height:clamp(250px,34vw,320px);\n  margin:0; padding:clamp(22px,2.6vw,32px);\n  display:flex; flex-direction:column; justify-content:space-between; text-align:left;\n  border:1px solid var(--line); border-radius:16px; overflow:hidden;\n  background:linear-gradient(158deg, rgba(22,22,29,.96), rgba(10,10,14,.96));\n  box-shadow:0 40px 90px rgba(0,0,0,.7);\n  backface-visibility:hidden;\n  transition:transform .95s var(--e), opacity .8s var(--e),\n             border-color .5s, box-shadow .6s;\n  cursor:pointer;\n}\n.mifa-p2 .p2-card.on{\n  border-color:rgba(255,59,84,.55);\n  background:linear-gradient(158deg, rgba(196,22,43,.20), rgba(10,10,14,.97));\n  box-shadow:0 50px 110px rgba(0,0,0,.8), 0 0 0 1px rgba(255,59,84,.28),\n             0 0 70px rgba(196,22,43,.28);\n}\n\/* shine sweep when a card becomes active *\/\n.mifa-p2 .p2-card::after{\n  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%;\n  pointer-events:none; opacity:0;\n  background:linear-gradient(100deg, transparent, rgba(255,255,255,.09), transparent);\n}\n.mifa-p2 .p2-card.on::after{ animation:p2Shine 1.15s var(--e) .1s; }\n@keyframes p2Shine{ 0%{ left:-60%; opacity:1 } 100%{ left:130%; opacity:0 } }\n\n.mifa-p2 .p2-card__n{\n  display:block; font-family:var(--m); font-size:clamp(30px,4.4vw,50px); line-height:1;\n  color:rgba(242,240,238,.14); transition:color .55s, transform .7s var(--e);\n}\n.mifa-p2 .p2-card.on .p2-card__n{ color:rgba(255,59,84,.7); }\n.mifa-p2 .p2-card__b{ display:block; }\n\n\/* FIX: these were inline spans \u2014 now blocks *\/\n.mifa-p2 .p2-card__t{\n  display:block; margin:0 0 10px; font-size:clamp(20px,2.3vw,28px);\n  font-weight:800; letter-spacing:-.025em; line-height:1.15; color:var(--ink);\n}\n.mifa-p2 .p2-card__d{\n  display:block; margin:0; font-family:var(--m); font-size:12px;\n  line-height:1.75; color:var(--soft);\n}\n.mifa-p2 .p2-card__k{\n  display:inline-flex; align-items:center; gap:8px; margin-top:16px;\n  font-family:var(--m); font-size:9.5px; letter-spacing:.18em;\n  text-transform:uppercase; color:var(--red-hi); opacity:0; transition:opacity .5s;\n}\n.mifa-p2 .p2-card.on .p2-card__k{ opacity:1; }\n.mifa-p2 .p2-card__k::before{\n  content:''; width:16px; height:1px; background:var(--red-hi);\n  transform-origin:left; transform:scaleX(0); transition:transform .6s var(--e) .25s;\n}\n.mifa-p2 .p2-card.on .p2-card__k::before{ transform:scaleX(1); }\n\n\/* inner content stagger when a card becomes active *\/\n.mifa-p2.p2-anim .p2-card.on .p2-card__n{ animation:p2Up .7s var(--e) both; }\n.mifa-p2.p2-anim .p2-card.on .p2-card__t{ animation:p2Up .7s var(--e) .07s both; }\n.mifa-p2.p2-anim .p2-card.on .p2-card__d{ animation:p2Up .7s var(--e) .13s both; }\n@keyframes p2Up{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }\n\n\/* ---------------- dots + progress ---------------- *\/\n.mifa-p2 .p2-dots{ display:flex; justify-content:center; align-items:center; gap:9px; margin-top:30px; }\n.mifa-p2 .p2-dot{\n  position:relative; overflow:hidden; cursor:pointer;\n  width:26px; height:5px; border-radius:99px; background:rgba(242,240,238,.16);\n  transition:background .45s, width .5s var(--e);\n}\n.mifa-p2 .p2-dot.on{ width:52px; }\n.mifa-p2 .p2-dot i{\n  position:absolute; left:0; top:0; bottom:0; width:0; border-radius:99px;\n  background:var(--red-hi); box-shadow:0 0 12px rgba(255,59,84,.7);\n}\n.mifa-p2 .p2-dot.on i{ animation:p2Fill var(--dur) linear forwards; }\n.mifa-p2 .p2-dot.on.hold i{ animation-play-state:paused; }\n@keyframes p2Fill{ from{ width:0 } to{ width:100% } }\n\n\/* arrows *\/\n.mifa-p2 .p2-arw{\n  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;\n  border:1px solid var(--line); background:rgba(242,240,238,.03); flex-shrink:0;\n  transition:background .4s, border-color .4s, transform .45s var(--e);\n}\n.mifa-p2 .p2-arw svg{ width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:1.9; }\n\n\/* ====================== MIFA ADVANTAGE ====================== *\/\n.mifa-p2 .p2-adv{ margin-bottom:clamp(30px,4vh,44px); }\n.mifa-p2 p.p2-adv__s{\n  margin:14px 0 0 !important; font-family:var(--m); font-size:12.5px; color:var(--soft);\n}\n.mifa-p2 .p2-grid{\n  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(13px,1.5vw,20px);\n  perspective:1400px;\n}\n\n\/* FIX: overflow:hidden removed \u2014 it was breaking preserve-3d.\n   Clipping now happens on ::before \/ ::after via border-radius:inherit. *\/\n.mifa-p2 .p2-tile{\n  position:relative; padding:clamp(26px,3vw,36px);\n  border:1px solid var(--line); border-radius:15px;\n  background:linear-gradient(158deg, rgba(22,22,29,.9), rgba(10,10,14,.9));\n  transform-style:preserve-3d; will-change:transform;\n  transition:transform .5s var(--e), border-color .45s, box-shadow .5s;\n}\n.mifa-p2 .p2-tile::before{\n  content:''; position:absolute; inset:0; border-radius:inherit;\n  pointer-events:none; opacity:0; transform:translateZ(1px);\n  background:radial-gradient(440px circle at var(--gx,50%) var(--gy,0%), rgba(196,22,43,.22), transparent 62%);\n  transition:opacity .5s;\n}\n\/* reveal shine *\/\n.mifa-p2 .p2-tile::after{\n  content:''; position:absolute; inset:0; border-radius:inherit; overflow:hidden;\n  pointer-events:none; opacity:0;\n  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%);\n  background-size:260% 100%; background-position:130% 0;\n}\n.mifa-p2.p2-anim .p2-tile.p2-on::after{ animation:p2Sweep 1.3s var(--e) .25s; }\n@keyframes p2Sweep{ 0%{ opacity:1; background-position:130% 0 } 100%{ opacity:0; background-position:-70% 0 } }\n\n.mifa-p2 .p2-tile__ic{\n  position:relative; z-index:2; display:grid; place-items:center;\n  width:52px; height:52px; margin-bottom:24px; transform:translateZ(38px);\n  border:1px solid rgba(255,59,84,.34); border-radius:13px; background:rgba(196,22,43,.12);\n  transition:background .45s, border-color .45s, transform .5s var(--e), box-shadow .45s;\n}\n.mifa-p2 .p2-tile__ic svg{\n  width:23px; height:23px; stroke:var(--red-hi); fill:none;\n  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .45s;\n}\n.mifa-p2 h3.p2-tile__t{\n  position:relative; z-index:2; margin:0 0 11px !important; transform:translateZ(26px);\n  font-size:clamp(17px,1.5vw,20px); font-weight:700; letter-spacing:-.015em; color:var(--ink);\n}\n.mifa-p2 p.p2-tile__p{\n  position:relative; z-index:2; margin:0 !important; transform:translateZ(14px);\n  font-size:14.5px; line-height:1.72; color:var(--soft);\n}\n\n.mifa-p2 .p2-tile--wide{\n  grid-column:1\/-1; display:flex; align-items:center; gap:clamp(24px,4vw,54px);\n  background:linear-gradient(115deg, rgba(196,22,43,.20), rgba(10,10,14,.94) 60%);\n  border-color:rgba(255,59,84,.3);\n}\n.mifa-p2 .p2-tile--wide .p2-tile__ic{ margin-bottom:0; flex-shrink:0; width:60px; height:60px; }\n.mifa-p2 .p2-tile--wide .p2-tile__t{ font-size:clamp(21px,2.5vw,32px); font-weight:800; }\n.mifa-p2 .p2-tile--wide .p2-tile__p{ max-width:62ch; }\n.mifa-p2 .p2-tile--wide .p2-cta{ margin-left:auto; flex-shrink:0; }\n\n.mifa-p2 .p2-cta{\n  position:relative; z-index:2; overflow:hidden;\n  display:inline-flex; align-items:center; gap:10px; transform:translateZ(40px);\n  padding:16px 30px; border-radius:999px; background:var(--red); color:#fff;\n  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;\n  box-shadow:0 10px 32px rgba(196,22,43,.4); will-change:transform;\n  transition:transform .45s var(--e), color .35s;\n}\n.mifa-p2 .p2-cta span,.mifa-p2 .p2-cta svg{ position:relative; z-index:2; }\n.mifa-p2 .p2-cta svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9;\n  transition:transform .45s var(--e); }\n.mifa-p2 .p2-cta::before{ content:''; position:absolute; inset:0; background:var(--ink);\n  transform:translateY(101%); transition:transform .5s var(--e); }\n\n\/* stagger for tiles *\/\n.mifa-p2.p2-anim .p2-grid .p2-rv:nth-child(1){ transition-delay:.02s }\n.mifa-p2.p2-anim .p2-grid .p2-rv:nth-child(2){ transition-delay:.08s }\n.mifa-p2.p2-anim .p2-grid .p2-rv:nth-child(3){ transition-delay:.14s }\n.mifa-p2.p2-anim .p2-grid .p2-rv:nth-child(4){ transition-delay:.20s }\n.mifa-p2.p2-anim .p2-grid .p2-rv:nth-child(5){ transition-delay:.26s }\n.mifa-p2.p2-anim .p2-grid .p2-rv:nth-child(6){ transition-delay:.32s }\n.mifa-p2.p2-anim .p2-grid .p2-rv:nth-child(7){ transition-delay:.38s }\n\n\/* ------------- HOVER \u2014 pointer devices only ------------- *\/\n@media (hover:hover) and (pointer:fine){\n  .mifa-p2 .p2-tile:hover{\n    border-color:rgba(255,59,84,.45);\n    box-shadow:0 34px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,59,84,.2);\n  }\n  .mifa-p2 .p2-tile:hover::before{ opacity:1; }\n  .mifa-p2 .p2-tile:hover .p2-tile__ic{\n    background:var(--red); border-color:var(--red); box-shadow:0 12px 30px rgba(196,22,43,.5);\n    transform:translateZ(46px) rotate(-7deg) scale(1.06);\n  }\n  .mifa-p2 .p2-tile:hover .p2-tile__ic svg{ stroke:#fff; }\n  .mifa-p2 .p2-cta:hover{ transform:translateZ(40px) translateY(-4px); color:var(--bg); }\n  .mifa-p2 .p2-cta:hover::before{ transform:translateY(0); }\n  .mifa-p2 .p2-cta:hover svg{ transform:translateX(4px); }\n  .mifa-p2 .p2-arw:hover{ background:var(--red); border-color:var(--red); transform:translateY(-3px); }\n  .mifa-p2 .p2-card:not(.on):hover{ border-color:rgba(255,59,84,.35); }\n}\n\n\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1080px){\n  .mifa-p2 .p2-head{ grid-template-columns:1fr; align-items:start; }\n  .mifa-p2 .p2-grid{ grid-template-columns:repeat(2,1fr); perspective:none; }\n  .mifa-p2 .p2-tile{ transform-style:flat; }\n  .mifa-p2 .p2-tile__ic,\n  .mifa-p2 h3.p2-tile__t,\n  .mifa-p2 p.p2-tile__p,\n  .mifa-p2 .p2-cta{ transform:none !important; }\n  .mifa-p2 .p2-tile--wide{ flex-direction:column; align-items:flex-start; gap:22px; }\n  .mifa-p2 .p2-tile--wide .p2-cta{ margin-left:0; }\n}\n@media (max-width:640px){\n  .mifa-p2 .p2-grid{ grid-template-columns:1fr; }\n  .mifa-p2 .p2-cta{ width:100%; justify-content:center; }\n  .mifa-p2 .p2-pipe__bar span:last-child{ display:none; }\n  .mifa-p2 .p2-grain{ opacity:.1; }\n  .mifa-p2 .p2-dots{ gap:7px; }\n  .mifa-p2 .p2-arw{ width:36px; height:36px; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-p2 *,.mifa-p2 *::before,.mifa-p2 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-p2.p2-anim .p2-rv{ opacity:1; transform:none; }\n  .mifa-p2.p2-anim .p2-w > span{ transform:none; }\n}\n<\/style>\n\n<section class=\"p2\" id=\"about\">\n  <div class=\"p2-orb\"  id=\"p2Orb\" aria-hidden=\"true\"><\/div>\n  <div class=\"p2-orb2\" aria-hidden=\"true\"><\/div>\n  <div class=\"p2-grain\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"p2__in\">\n\n    <div class=\"p2-head\">\n      <div>\n        <div class=\"p2-tag p2-rv\"><b>002<\/b> \/ Studio<\/div>\n        <h2 class=\"p2-h2 p2-wr\">Production that<br>runs <em>smoothly.<\/em><\/h2>\n      <\/div>\n      <p class=\"p2-lede p2-rv\">\n        &ldquo;On any shoot, the biggest challenge isn't always the budget &mdash;\n        it's coordination. <b>That's where we make the difference.<\/b>&rdquo;\n        Mifa Productions is a New Delhi&ndash;based production company with its working\n        studio in Sector 16, Noida.\n      <\/p>\n    <\/div>\n\n    <!-- ============ 3D COVERFLOW PIPELINE ============ -->\n    <div class=\"p2-pipe p2-rv\">\n      <div class=\"p2-pipe__bar\">\n        <span>Production Pipeline<\/span>\n        <span><b class=\"p2-now\" id=\"p2Now\">Concept<\/b><\/span>\n        <span>05 Stages &middot; One Partner<\/span>\n      <\/div>\n\n      <div class=\"p2-rail\" id=\"p2Rail\" tabindex=\"0\" role=\"group\" aria-label=\"Production pipeline stages\">\n        <div class=\"p2-rail__in\">\n          <button class=\"p2-card\" data-i=\"0\" data-n=\"Concept\">\n            <span class=\"p2-card__n\">01<\/span>\n            <span class=\"p2-card__b\">\n              <span class=\"p2-card__t\">Concept<\/span>\n              <span class=\"p2-card__d\">Ideation, scriptwriting, storyboards &mdash; the idea gets locked before anything else moves.<\/span>\n              <span class=\"p2-card__k\">Stage 01<\/span>\n            <\/span>\n          <\/button>\n          <button class=\"p2-card\" data-i=\"1\" data-n=\"Pre-Production\">\n            <span class=\"p2-card__n\">02<\/span>\n            <span class=\"p2-card__b\">\n              <span class=\"p2-card__t\">Pre-Production<\/span>\n              <span class=\"p2-card__d\">Location recce, government permissions, crew hiring, equipment and budget.<\/span>\n              <span class=\"p2-card__k\">Stage 02<\/span>\n            <\/span>\n          <\/button>\n          <button class=\"p2-card\" data-i=\"2\" data-n=\"Production\">\n            <span class=\"p2-card__n\">03<\/span>\n            <span class=\"p2-card__b\">\n              <span class=\"p2-card__t\">Production<\/span>\n              <span class=\"p2-card__d\">Shoot days, direction, cinematography, on-ground production management.<\/span>\n              <span class=\"p2-card__k\">Stage 03<\/span>\n            <\/span>\n          <\/button>\n          <button class=\"p2-card\" data-i=\"3\" data-n=\"Post-Production\">\n            <span class=\"p2-card__n\">04<\/span>\n            <span class=\"p2-card__b\">\n              <span class=\"p2-card__t\">Post-Production<\/span>\n              <span class=\"p2-card__d\">Edit, colour, sound design, motion graphics &mdash; the film gets its finish.<\/span>\n              <span class=\"p2-card__k\">Stage 04<\/span>\n            <\/span>\n          <\/button>\n          <button class=\"p2-card\" data-i=\"4\" data-n=\"Delivery\">\n            <span class=\"p2-card__n\">05<\/span>\n            <span class=\"p2-card__b\">\n              <span class=\"p2-card__t\">Delivery<\/span>\n              <span class=\"p2-card__d\">Final masters delivered in every format you need, on schedule.<\/span>\n              <span class=\"p2-card__k\">Stage 05<\/span>\n            <\/span>\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"p2-dots\">\n        <button class=\"p2-arw\" id=\"p2Prev\" aria-label=\"Previous stage\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M19 12H5M11 6l-6 6 6 6\"\/><\/svg>\n        <\/button>\n        <span id=\"p2Dots\" style=\"display:flex;gap:9px;align-items:center\"><\/span>\n        <button class=\"p2-arw\" id=\"p2Next\" aria-label=\"Next stage\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <!-- ================= MIFA ADVANTAGE ================= -->\n    <div class=\"p2-adv\">\n      <div class=\"p2-tag p2-rv\"><b>&#9670;<\/b> \/ The Mifa Productions Approach<\/div>\n      <h2 class=\"p2-h2 p2-wr\">Why partner <em>with us?<\/em><\/h2>\n      <p class=\"p2-adv__s p2-rv\">Brands, agencies, startups, NGOs and government organisations &mdash; all under one roof.<\/p>\n    <\/div>\n\n    <div class=\"p2-grid\">\n\n      <article class=\"p2-tile p2-rv\">\n        <div class=\"p2-tile__ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3.2 1.9\"\/><\/svg><\/div>\n        <h3 class=\"p2-tile__t\">Eight Years of Practice<\/h3>\n        <p class=\"p2-tile__p\">Over eight years of professional production experience standing behind every project we take on.<\/p>\n      <\/article>\n\n      <article class=\"p2-tile p2-rv\">\n        <div class=\"p2-tile__ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 7h13M3 12h9M3 17h13\"\/><path d=\"M17 4l4 3-4 3M17 14l4 3-4 3\"\/><\/svg><\/div>\n        <h3 class=\"p2-tile__t\">Start to Finish<\/h3>\n        <p class=\"p2-tile__p\">Comprehensive production management and delivery &mdash; one team accountable from brief to final master.<\/p>\n      <\/article>\n\n      <article class=\"p2-tile p2-rv\">\n        <div class=\"p2-tile__ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"8\" r=\"3.2\"\/><path d=\"M3 20a6 6 0 0 1 12 0\"\/><path d=\"M16.5 5.6a3.2 3.2 0 0 1 0 5.6M18 20a6.4 6.4 0 0 0-2.2-4.6\"\/><\/svg><\/div>\n        <h3 class=\"p2-tile__t\">Specialist Crew<\/h3>\n        <p class=\"p2-tile__p\">Access to highly skilled creative and technical specialists, assembled to suit each production.<\/p>\n      <\/article>\n\n      <article class=\"p2-tile p2-rv\">\n        <div class=\"p2-tile__ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z\"\/><circle cx=\"12\" cy=\"10\" r=\"2.6\"\/><\/svg><\/div>\n        <h3 class=\"p2-tile__t\">Pan-India Infrastructure<\/h3>\n        <p class=\"p2-tile__p\">Robust production infrastructure and on-ground support anywhere in India &mdash; permissions included.<\/p>\n      <\/article>\n\n      <article class=\"p2-tile p2-rv\">\n        <div class=\"p2-tile__ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 3h12v18l-3-2-3 2-3-2-3 2z\"\/><path d=\"M9.5 8.5h5M9.5 12.5h5\"\/><\/svg><\/div>\n        <h3 class=\"p2-tile__t\">Transparent Budgets<\/h3>\n        <p class=\"p2-tile__p\">Project execution tailored to your budget, with costs laid out clearly before anything rolls.<\/p>\n      <\/article>\n\n      <article class=\"p2-tile p2-rv\">\n        <div class=\"p2-tile__ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M13 2 4.5 13.5H11L10 22l8.5-11.5H12z\"\/><\/svg><\/div>\n        <h3 class=\"p2-tile__t\">Fast, Without Compromise<\/h3>\n        <p class=\"p2-tile__p\">Efficient workflows that keep delivery quick while holding on to premium production quality.<\/p>\n      <\/article>\n\n      <article class=\"p2-tile p2-tile--wide p2-rv\">\n        <div class=\"p2-tile__ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 3.2 14.6 9l6.2.6-4.7 4.2 1.4 6.1L12 16.7 6.5 19.9l1.4-6.1L3.2 9.6 9.4 9z\"\/><\/svg><\/div>\n        <div>\n          <h3 class=\"p2-tile__t\">Stories that drive results<\/h3>\n          <p class=\"p2-tile__p\">Transforming your vision into narratives that inspire, captivate and drive impactful results &mdash; for brands, agencies, startups and filmmakers alike.<\/p>\n        <\/div>\n        <a class=\"p2-cta\" href=\"https:\/\/wa.me\/918527121545\" target=\"_blank\" rel=\"noopener\">\n          <span>Talk to Us<\/span>\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n        <\/a>\n      <\/article>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var root = (document.currentScript && document.currentScript.closest)\n    ? document.currentScript.closest('.mifa-p2')\n    : document.querySelector('.mifa-p2');\n  if(!root) return;\n  var q  = function(s){ return root.querySelector(s); };\n  var qa = function(s){ return Array.prototype.slice.call(root.querySelectorAll(s)); };\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* ================= 1. WORD SPLIT (headings) ================= *\/\n  qa('.p2-wr').forEach(function(h){\n    var frag = document.createDocumentFragment();\n    (function walk(node, target){\n      Array.prototype.slice.call(node.childNodes).forEach(function(n){\n        if(n.nodeType === 3){\n          n.textContent.split(\/(\\s+)\/).forEach(function(p){\n            if(!p) return;\n            if(\/^\\s+$\/.test(p)){ target.appendChild(document.createTextNode(' ')); return; }\n            var o = document.createElement('span'); o.className = 'p2-w';\n            var i = document.createElement('span'); i.textContent = p;\n            o.appendChild(i); target.appendChild(o);\n          });\n        } else if(n.nodeName === 'BR'){\n          target.appendChild(n.cloneNode());\n        } else {\n          var c = n.cloneNode(false);\n          walk(n, c);\n          target.appendChild(c);\n        }\n      });\n    })(h, frag);\n    h.innerHTML = '';\n    h.appendChild(frag);\n\n    h.querySelectorAll('.p2-w > span').forEach(function(s, i){\n      s.style.transitionDelay = (i * 0.055) + 's';\n    });\n  });\n\n  \/* ================= 2. SVG ICON DRAW-ON ================= *\/\n  var strokes = [];\n  qa('.p2-tile__ic svg').forEach(function(svg){\n    svg.querySelectorAll('path, circle, line, polyline').forEach(function(p){\n      var len = 0;\n      try{ len = p.getTotalLength(); }catch(e){}\n      if(!len) return;\n      p.style.strokeDasharray  = len;\n      p.style.strokeDashoffset = len;\n      strokes.push(p);\n    });\n  });\n  function drawIcons(tile){\n    tile.querySelectorAll('.p2-tile__ic svg path, .p2-tile__ic svg circle, .p2-tile__ic svg line, .p2-tile__ic svg polyline')\n      .forEach(function(p, i){\n        if(p.style.strokeDashoffset === '' ) return;\n        p.style.transition = 'stroke-dashoffset 1.05s cubic-bezier(.22,1,.36,1) ' + (0.25 + i * 0.12) + 's, stroke .45s';\n        p.style.strokeDashoffset = '0';\n      });\n  }\n\n  \/* ================= 3. REVEAL ================= *\/\n  var items = qa('.p2-rv, .p2-wr');\n  if(!reduce){\n    root.classList.add('p2-anim');\n    var show = function(el){\n      el.classList.add('p2-on');\n      if(el.classList.contains('p2-tile')) drawIcons(el);\n    };\n    if('IntersectionObserver' in window){\n      var io = new IntersectionObserver(function(es){\n        es.forEach(function(e){ if(e.isIntersecting){ show(e.target); io.unobserve(e.target); } });\n      }, {threshold:.1, rootMargin:'0px 0px -6% 0px'});\n      items.forEach(function(el){ io.observe(el); });\n    } else { items.forEach(show); }\n    setTimeout(function(){ items.forEach(show); }, 3400);   \/* fail-safe *\/\n  } else {\n    strokes.forEach(function(p){ p.style.strokeDashoffset = '0'; });\n  }\n\n  \/* ================= 4. 3D COVERFLOW ================= *\/\n  var cards = qa('.p2-card'),\n      dotsW = q('#p2Dots'),\n      now   = q('#p2Now'),\n      rail  = q('#p2Rail'),\n      idx = 0, timer = null, dots = [], held = false;\n\n  cards.forEach(function(_, i){\n    var d = document.createElement('span');\n    d.className = 'p2-dot';\n    d.setAttribute('role','button');\n    d.setAttribute('aria-label','Stage ' + (i + 1));\n    d.appendChild(document.createElement('i'));\n    d.addEventListener('click', function(){ set(i); play(); });\n    dotsW.appendChild(d); dots.push(d);\n  });\n\n  function gap(){ return window.innerWidth < 700 ? 56 : 62; }\n\n  function set(i, silent){\n    var prev = idx;\n    idx = (i + cards.length) % cards.length;\n\n    cards.forEach(function(c, n){\n      var o = n - idx, a = Math.abs(o);\n      c.classList.toggle('on', o === 0);\n      c.style.transform =\n        'translate(-50%,-50%) translateX(' + (o * gap()) + '%)' +\n        ' translateZ(' + (o === 0 ? 0 : -170 - (a - 1) * 90) + 'px)' +\n        ' rotateY(' + (o * -34) + 'deg)';\n      c.style.opacity = a > 2 ? 0 : (o === 0 ? 1 : (a === 1 ? .55 : .22));\n      c.style.zIndex  = String(20 - a);\n      c.style.pointerEvents = a > 2 ? 'none' : 'auto';\n    });\n\n    \/* label flip *\/\n    if(now){\n      now.textContent = cards[idx].dataset.n;\n      if(!reduce && prev !== idx && !silent){\n        now.classList.remove('flip'); void now.offsetWidth; now.classList.add('flip');\n      }\n    }\n\n    \/* dots + progress restart *\/\n    dots.forEach(function(d, n){\n      d.classList.toggle('on', n === idx);\n      d.classList.toggle('hold', held && n === idx);\n      var bar = d.firstChild;\n      if(bar){ bar.style.animation = 'none'; void bar.offsetWidth; bar.style.animation = ''; }\n    });\n  }\n\n  function play(){\n    if(reduce) return;\n    stop(); held = false;\n    dots.forEach(function(d){ d.classList.remove('hold'); });\n    timer = setInterval(function(){ set(idx + 1); }, 3600);\n  }\n  function stop(hold){\n    if(timer){ clearInterval(timer); timer = null; }\n    if(hold){\n      held = true;\n      dots.forEach(function(d, n){ d.classList.toggle('hold', n === idx); });\n    }\n  }\n\n  cards.forEach(function(c){\n    c.addEventListener('click', function(){ set(+c.dataset.i); play(); });\n  });\n  q('#p2Prev').addEventListener('click', function(){ set(idx - 1); play(); });\n  q('#p2Next').addEventListener('click', function(){ set(idx + 1); play(); });\n\n  rail.addEventListener('mouseenter', function(){ stop(true); });\n  rail.addEventListener('mouseleave', play);\n\n  \/* keyboard *\/\n  rail.addEventListener('keydown', function(e){\n    if(e.key === 'ArrowRight'){ e.preventDefault(); set(idx + 1); play(); }\n    if(e.key === 'ArrowLeft'){  e.preventDefault(); set(idx - 1); play(); }\n  });\n\n  \/* swipe (mobile) *\/\n  var sx = 0, sy = 0, swiping = false;\n  rail.addEventListener('touchstart', function(e){\n    sx = e.touches[0].clientX; sy = e.touches[0].clientY; swiping = true; stop(true);\n  }, {passive:true});\n  rail.addEventListener('touchend', function(e){\n    if(!swiping) return; swiping = false;\n    var dx = e.changedTouches[0].clientX - sx,\n        dy = e.changedTouches[0].clientY - sy;\n    if(Math.abs(dx) > 44 && Math.abs(dx) > Math.abs(dy)) set(idx + (dx < 0 ? 1 : -1));\n    play();\n  }, {passive:true});\n\n  set(0, true);\n  window.addEventListener('resize', function(){ set(idx, true); }, {passive:true});\n\n  if('IntersectionObserver' in window){\n    new IntersectionObserver(function(e){ e[0].isIntersecting ? play() : stop(); }, {threshold:.2}).observe(rail);\n  } else { play(); }\n\n  \/* ================= 5. DESKTOP MOUSE EXTRAS ================= *\/\n  if(!reduce &#038;&#038; window.matchMedia('(hover:hover) and (pointer:fine) and (min-width:1081px)').matches){\n\n    \/* per-tile 3D tilt + glow *\/\n    qa('.p2-tile').forEach(function(tile){\n      tile.addEventListener('mousemove', function(ev){\n        var b = tile.getBoundingClientRect(),\n            px = (ev.clientX - b.left) \/ b.width,\n            py = (ev.clientY - b.top)  \/ b.height;\n        tile.style.setProperty('--gx', (px * 100) + '%');\n        tile.style.setProperty('--gy', (py * 100) + '%');\n        tile.style.transform =\n          'perspective(1000px) rotateY(' + ((px - .5) * 11) + 'deg) rotateX(' + ((.5 - py) * 11) + 'deg) translateZ(14px)';\n      });\n      tile.addEventListener('mouseleave', function(){ tile.style.transform = ''; });\n    });\n\n    \/* magnetic CTA *\/\n    qa('.p2-cta').forEach(function(el){\n      el.addEventListener('mousemove', function(e){\n        var b = el.getBoundingClientRect();\n        el.style.transform = 'translateZ(40px) translate(' +\n          ((e.clientX - b.left - b.width \/ 2) * .26) + 'px,' +\n          ((e.clientY - b.top - b.height \/ 2) * .4) + 'px)';\n      });\n      el.addEventListener('mouseleave', function(){ el.style.transform = ''; });\n    });\n  }\n\n  \/* ================= 6. SCROLL PARALLAX ================= *\/\n  if(!reduce){\n    var orb = q('#p2Orb'), sec = q('.p2'), ticking = false;\n    function par(){\n      ticking = false;\n      var b = sec.getBoundingClientRect();\n      if(b.bottom < 0 || b.top > window.innerHeight) return;\n      var p = (b.top + b.height \/ 2 - window.innerHeight \/ 2) \/ window.innerHeight;\n      orb.style.marginTop = (p * -70) + 'px';\n    }\n    window.addEventListener('scroll', function(){\n      if(!ticking){ ticking = true; requestAnimationFrame(par); }\n    }, {passive:true});\n    par();\n  }\n\n  \/* clear inline transforms when switching between mobile and desktop *\/\n  window.addEventListener('resize', function(){\n    if(window.innerWidth <= 1080){\n      qa('.p2-tile, .p2-cta').forEach(function(el){ el.style.transform = ''; });\n    }\n  }, {passive:true});\n})();\n<\/script>\n<\/div>\n\n\n\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 HOME \u00b7 PART 3 : 003 \/ SERVICES  (ENGLISH)\n     3D SIGNATURE : real rotateY flip cards (front \u2192 scope list)\n     Paste into its own \"Custom HTML\" block.\n     Everything is scoped inside .mifa-p3\n     ============================================================ -->\n\n<div class=\"mifa-p3\">\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter+Tight:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@300;400;500&display=swap');\n\n\/* ===================== TOKENS + THEME RESET ===================== *\/\n.mifa-p3{\n  --bg:#07070A; --bg-2:#0C0C11; --panel:#101017;\n  --ink:#F2F0EE; --soft:rgba(242,240,238,.58); --line:rgba(242,240,238,.12);\n  --red:#C4162B; --red-hi:#FF3B54; --red-dp:#7A0C18;\n  --f:'Inter Tight',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;\n  --m:'DM Mono',ui-monospace,monospace;\n  --pad:clamp(18px,4.4vw,64px);\n  --e:cubic-bezier(.22,1,.36,1);\n\n  position:relative; z-index:0; overflow:hidden;\n  background:var(--bg) !important; color:var(--ink) !important;\n  font-family:var(--f) !important;\n  font-weight:400; font-size:16px; line-height:1.5;\n  text-align:left; -webkit-font-smoothing:antialiased;\n  \/* If the theme content area is narrow, uncomment:\n  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); *\/\n}\n.mifa-p3 *,.mifa-p3 *::before,.mifa-p3 *::after{ box-sizing:border-box; }\n.mifa-p3 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-p3 a:hover,.mifa-p3 a:focus{ text-decoration:none !important; }\n.mifa-p3 h1,.mifa-p3 h2,.mifa-p3 h3,.mifa-p3 p,.mifa-p3 ul,.mifa-p3 li{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-p3 ul{ list-style:none !important; }\n.mifa-p3 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-p3 button{\n  font:inherit; color:inherit; background:none; border:0; cursor:pointer;\n  padding:0; margin:0; text-transform:none; letter-spacing:normal;\n  box-shadow:none; border-radius:0; -webkit-appearance:none; appearance:none;\n}\n.mifa-p3 button:hover,.mifa-p3 button:focus{ background:none; }\n.mifa-p3 svg{ display:block; }\n.mifa-p3 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\n\/* ============================ SHELL ============================ *\/\n.mifa-p3 .p3{ position:relative; padding:clamp(64px,10vh,120px) var(--pad); background:var(--bg); }\n.mifa-p3 .p3__in{ position:relative; z-index:3; max-width:1660px; margin:0 auto; }\n.mifa-p3 .p3-orb{\n  position:absolute; z-index:0; border-radius:50%; pointer-events:none;\n  width:74vmax; height:74vmax; top:-30vmax; right:-26vmax;\n  background:radial-gradient(circle, rgba(196,22,43,.20) 0%, transparent 58%);\n  animation:p3Drift 26s ease-in-out infinite alternate;\n}\n@keyframes p3Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-8%,6%,0) scale(1.16)} }\n.mifa-p3 .p3-grain{\n  position:absolute; inset:-60%; z-index:1; pointer-events:none; opacity:.14;\n  background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n  animation:p3Grain .7s steps(3) infinite;\n}\n@keyframes p3Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n\n.mifa-p3.p3-anim .p3-rv{ opacity:0; transform:translateY(32px); transition:opacity .95s var(--e), transform .95s var(--e); }\n.mifa-p3.p3-anim .p3-rv.p3-on{ opacity:1; transform:none; }\n\n\/* ============================ HEAD ============================ *\/\n.mifa-p3 .p3-tag{\n  display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,3vh,32px) !important;\n  font-family:var(--m); font-size:11px; letter-spacing:.2em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-p3 .p3-tag b{ color:var(--red-hi); font-weight:400; }\n.mifa-p3 .p3-tag::after{ content:''; flex:1; max-width:110px; height:1px; background:var(--line); }\n\n.mifa-p3 .p3-head{\n  display:grid; gap:clamp(24px,4vw,64px); align-items:end;\n  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);\n  margin-bottom:clamp(20px,3vh,30px);\n}\n.mifa-p3 h2.p3-h2{\n  margin:0 !important; font-size:clamp(34px,5.4vw,82px); font-weight:900;\n  line-height:.96; letter-spacing:-.042em; color:var(--ink);\n  text-shadow:1px 1px 0 rgba(122,12,24,.75), 2px 2px 0 rgba(122,12,24,.55),\n              3px 3px 0 rgba(122,12,24,.35), 4px 4px 0 rgba(122,12,24,.2),\n              0 18px 40px rgba(0,0,0,.8);\n}\n.mifa-p3 .p3-h2 em{ font-style:normal; color:var(--red-hi); text-shadow:0 0 40px rgba(255,59,84,.5); }\n.mifa-p3 p.p3-lede{\n  margin:0 !important; max-width:52ch;\n  font-size:clamp(15px,1.45vw,18px); line-height:1.75; color:var(--soft);\n}\n.mifa-p3 .p3-hint{\n  display:flex; align-items:center; gap:9px; margin-bottom:clamp(28px,4vh,42px) !important;\n  font-family:var(--m); font-size:10.5px; letter-spacing:.16em;\n  text-transform:uppercase; color:var(--red-hi);\n}\n.mifa-p3 .p3-hint svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; }\n\n\/* =================== 3D SIGNATURE : FLIP CARDS =================== *\/\n.mifa-p3 .p3-grid{\n  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px);\n  perspective:2200px;\n}\n.mifa-p3 .p3-cell{ position:relative; min-height:clamp(320px,30vw,382px); }\n.mifa-p3 .p3-card{\n  position:absolute; inset:0; transform-style:preserve-3d; cursor:pointer;\n  transition:transform .9s var(--e);\n}\n.mifa-p3 .p3-cell.flip .p3-card{ transform:rotateY(180deg); }\n\n.mifa-p3 .p3-side{\n  position:absolute; inset:0; display:flex; flex-direction:column;\n  padding:clamp(24px,2.8vw,34px); overflow:hidden;\n  border:1px solid var(--line); border-radius:16px;\n  background:linear-gradient(158deg, rgba(22,22,29,.94), rgba(10,10,14,.96));\n  backface-visibility:hidden; -webkit-backface-visibility:hidden;\n  box-shadow:0 30px 70px rgba(0,0,0,.6);\n  transition:border-color .45s, box-shadow .5s;\n}\n.mifa-p3 .p3-side--b{ transform:rotateY(180deg); background:linear-gradient(158deg, rgba(196,22,43,.20), rgba(10,10,14,.97)); }\n.mifa-p3 .p3-card:hover .p3-side{\n  border-color:rgba(255,59,84,.5);\n  box-shadow:0 40px 86px rgba(0,0,0,.7), 0 0 0 1px rgba(255,59,84,.22), 0 0 60px rgba(196,22,43,.2);\n}\n\n.mifa-p3 .p3-side::before{\n  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;\n  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%), rgba(196,22,43,.2), transparent 62%);\n  transition:opacity .5s;\n}\n.mifa-p3 .p3-card:hover .p3-side::before{ opacity:1; }\n\n.mifa-p3 .p3-num{\n  display:flex; align-items:center; justify-content:space-between; gap:12px;\n  margin-bottom:auto; font-family:var(--m); font-size:11px;\n  letter-spacing:.16em; color:rgba(242,240,238,.34);\n}\n.mifa-p3 .p3-num b{ color:var(--red-hi); font-weight:400; }\n.mifa-p3 .p3-badge{\n  padding:4px 10px; border-radius:999px; border:1px solid rgba(255,59,84,.45);\n  background:rgba(196,22,43,.16); font-size:9px; letter-spacing:.14em;\n  text-transform:uppercase; color:var(--red-hi);\n}\n.mifa-p3 .p3-ic{\n  display:grid; place-items:center; width:50px; height:50px; margin:26px 0 20px;\n  border:1px solid rgba(255,59,84,.34); border-radius:13px; background:rgba(196,22,43,.12);\n  transition:background .45s, border-color .45s, transform .55s var(--e);\n}\n.mifa-p3 .p3-ic svg{ width:22px; height:22px; stroke:var(--red-hi); fill:none;\n  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .45s; }\n.mifa-p3 .p3-card:hover .p3-ic{ background:var(--red); border-color:var(--red); transform:rotate(-7deg) scale(1.07); }\n.mifa-p3 .p3-card:hover .p3-ic svg{ stroke:#fff; }\n\n.mifa-p3 h3.p3-t{\n  margin:0 0 11px !important; font-size:clamp(20px,2vw,26px);\n  font-weight:800; letter-spacing:-.025em; color:var(--ink);\n}\n.mifa-p3 p.p3-d{ margin:0 !important; font-size:14px; line-height:1.7; color:var(--soft); }\n\n.mifa-p3 .p3-flipk{\n  display:inline-flex; align-items:center; gap:9px; margin-top:22px;\n  font-family:var(--m); font-size:9.5px; letter-spacing:.18em;\n  text-transform:uppercase; color:var(--red-hi);\n}\n.mifa-p3 .p3-flipk svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8;\n  transition:transform .5s var(--e); }\n.mifa-p3 .p3-card:hover .p3-flipk svg{ transform:rotate(180deg); }\n\n\/* back side *\/\n.mifa-p3 .p3-side--b .p3-sl{\n  display:flex; align-items:center; gap:12px; margin-bottom:16px;\n  font-family:var(--m); font-size:9.5px; letter-spacing:.18em;\n  text-transform:uppercase; color:var(--red-hi);\n}\n.mifa-p3 .p3-side--b .p3-sl::after{ content:''; flex:1; height:1px; background:rgba(255,59,84,.3); }\n.mifa-p3 ul.p3-scope{ margin:0 !important; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }\n.mifa-p3 .p3-scope li{\n  display:flex; align-items:flex-start; gap:9px;\n  font-size:12.5px; line-height:1.5; color:rgba(242,240,238,.78);\n}\n.mifa-p3 .p3-scope li::before{\n  content:''; flex-shrink:0; margin-top:6px; width:4px; height:4px;\n  background:var(--red-hi); border-radius:1px;\n}\n.mifa-p3 p.p3-foot{\n  margin:auto 0 0 !important; padding-top:16px !important;\n  border-top:1px solid rgba(242,240,238,.1);\n  font-family:var(--m); font-size:11px; line-height:1.7; color:var(--soft);\n}\n\n\/* ---------------------- bottom CTA ---------------------- *\/\n.mifa-p3 .p3-bottom{\n  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:22px;\n  margin-top:clamp(24px,3.4vw,38px); padding:clamp(26px,3vw,38px) clamp(24px,3.4vw,44px);\n  border:1px solid rgba(255,59,84,.28); border-radius:16px;\n  background:linear-gradient(115deg, rgba(196,22,43,.2), rgba(10,10,14,.94) 60%);\n}\n.mifa-p3 p.p3-bt{\n  margin:0 !important; font-size:clamp(21px,2.5vw,32px); font-weight:800;\n  letter-spacing:-.028em; line-height:1.18; color:var(--ink);\n}\n.mifa-p3 p.p3-bp{ margin:9px 0 0 !important; font-family:var(--m); font-size:12.5px; color:var(--soft); }\n.mifa-p3 .p3-cta{\n  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px;\n  padding:16px 30px; border-radius:999px; background:var(--red); color:#fff;\n  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;\n  box-shadow:0 10px 32px rgba(196,22,43,.4);\n  transition:transform .45s var(--e), color .35s;\n}\n.mifa-p3 .p3-cta span,.mifa-p3 .p3-cta svg{ position:relative; z-index:2; }\n.mifa-p3 .p3-cta svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9;\n  transition:transform .45s var(--e); }\n.mifa-p3 .p3-cta::before{ content:''; position:absolute; inset:0; background:var(--ink);\n  transform:translateY(101%); transition:transform .5s var(--e); }\n.mifa-p3 .p3-cta:hover{ transform:translateY(-4px); color:var(--bg); }\n.mifa-p3 .p3-cta:hover::before{ transform:translateY(0); }\n.mifa-p3 .p3-cta:hover svg{ transform:translateX(4px); }\n\n\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1080px){\n  .mifa-p3 .p3-head{ grid-template-columns:1fr; align-items:start; }\n  .mifa-p3 .p3-grid{ grid-template-columns:repeat(2,1fr); }\n}\n@media (max-width:660px){\n  .mifa-p3 .p3-grid{ grid-template-columns:1fr; }\n  .mifa-p3 .p3-cell{ min-height:340px; }\n  .mifa-p3 ul.p3-scope{ grid-template-columns:1fr; }\n  .mifa-p3 .p3-bottom{ flex-direction:column; align-items:flex-start; }\n  .mifa-p3 .p3-cta{ width:100%; justify-content:center; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-p3 *,.mifa-p3 *::before,.mifa-p3 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-p3.p3-anim .p3-rv{ opacity:1; transform:none; }\n}\n<\/style>\n\n<section class=\"p3\" id=\"services\">\n  <div class=\"p3-orb\" aria-hidden=\"true\"><\/div>\n  <div class=\"p3-grain\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"p3__in\">\n\n    <div class=\"p3-head\">\n      <div>\n        <div class=\"p3-tag p3-rv\"><b>003<\/b> \/ Services<\/div>\n        <h2 class=\"p3-h2 p3-rv\">Complete production<br><em>under one roof.<\/em><\/h2>\n      <\/div>\n      <p class=\"p3-lede p3-rv\">\n        Comprehensive production services for brands, agencies, production houses and businesses.\n        Every project tailored to your objectives while maintaining the highest production standards.\n      <\/p>\n    <\/div>\n\n    <div class=\"p3-hint p3-rv\">\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 3-6.7\"\/><path d=\"M3 4v5h5\"\/><\/svg>\n      Tap any card to flip\n    <\/div>\n\n    <div class=\"p3-grid\">\n\n      <!-- 01 LINE PRODUCTION -->\n      <div class=\"p3-cell p3-rv\">\n        <div class=\"p3-card\" tabindex=\"0\" role=\"button\" aria-label=\"Line Production \u2014 flip for details\">\n          <div class=\"p3-side\">\n            <div class=\"p3-num\"><span><b>01<\/b> \/ 06<\/span><span class=\"p3-badge\">Core<\/span><\/div>\n            <div class=\"p3-ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z\"\/><circle cx=\"12\" cy=\"10\" r=\"2.6\"\/><\/svg><\/div>\n            <h3 class=\"p3-t\">Line Production<\/h3>\n            <p class=\"p3-d\">When agencies, brands, filmmakers or international production houses come to India for a shoot, they need a reliable team on the ground. That's where we step in.<\/p>\n            <span class=\"p3-flipk\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 3-6.7\"\/><path d=\"M3 4v5h5\"\/><\/svg> What's included<\/span>\n          <\/div>\n          <div class=\"p3-side p3-side--b\">\n            <div class=\"p3-sl\">Our services include<\/div>\n            <ul class=\"p3-scope\">\n              <li>Location scouting<\/li><li>Production budgeting<\/li><li>Government permissions<\/li>\n              <li>Crew hiring<\/li><li>Equipment rental<\/li><li>Accommodation &amp; transport<\/li>\n              <li>Scheduling<\/li><li>Local management<\/li>\n            <\/ul>\n            <p class=\"p3-foot\">Commercial, feature film, documentary, web series or music video &mdash; anywhere in India.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 02 VIDEO PRODUCTION -->\n      <div class=\"p3-cell p3-rv\">\n        <div class=\"p3-card\" tabindex=\"0\" role=\"button\" aria-label=\"Video Production \u2014 flip for details\">\n          <div class=\"p3-side\">\n            <div class=\"p3-num\"><span><b>02<\/b> \/ 06<\/span><\/div>\n            <div class=\"p3-ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"2.5\" y=\"6\" width=\"13\" height=\"12\" rx=\"2.5\"\/><path d=\"M15.5 10.5 21.5 7v10l-6-3.5z\"\/><\/svg><\/div>\n            <h3 class=\"p3-t\">Video Production<\/h3>\n            <p class=\"p3-d\">Every brand has a story worth telling. We develop visually engaging content that builds awareness and connects across digital and traditional platforms.<\/p>\n            <span class=\"p3-flipk\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 3-6.7\"\/><path d=\"M3 4v5h5\"\/><\/svg> What's included<\/span>\n          <\/div>\n          <div class=\"p3-side p3-side--b\">\n            <div class=\"p3-sl\">We provide<\/div>\n            <ul class=\"p3-scope\">\n              <li>Concept development<\/li><li>Scriptwriting<\/li><li>Storyboarding<\/li>\n              <li>Production<\/li><li>Cinematography<\/li><li>Editing<\/li>\n              <li>Motion graphics<\/li><li>Sound design<\/li>\n            <\/ul>\n            <p class=\"p3-foot\">Final delivery in multiple formats.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 03 CORPORATE VIDEOS -->\n      <div class=\"p3-cell p3-rv\">\n        <div class=\"p3-card\" tabindex=\"0\" role=\"button\" aria-label=\"Corporate Videos \u2014 flip for details\">\n          <div class=\"p3-side\">\n            <div class=\"p3-num\"><span><b>03<\/b> \/ 06<\/span><\/div>\n            <div class=\"p3-ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 21h18M4 21V8l8-5 8 5v13\"\/><path d=\"M9.5 21v-6h5v6\"\/><\/svg><\/div>\n            <h3 class=\"p3-t\">Corporate Videos<\/h3>\n            <p class=\"p3-d\">Professional corporate films help businesses communicate their vision, values, achievements and capabilities with clarity.<\/p>\n            <span class=\"p3-flipk\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 3-6.7\"\/><path d=\"M3 4v5h5\"\/><\/svg> What's included<\/span>\n          <\/div>\n          <div class=\"p3-side p3-side--b\">\n            <div class=\"p3-sl\">We create<\/div>\n            <ul class=\"p3-scope\">\n              <li>Company profile films<\/li><li>Manufacturing process<\/li><li>Brand story films<\/li>\n              <li>CEO messages<\/li><li>Employee engagement<\/li><li>Internal comms<\/li>\n              <li>Investor presentations<\/li><li>Training videos<\/li>\n            <\/ul>\n            <p class=\"p3-foot\">Designed to build trust and strengthen business relationships.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 04 EXPLAINER VIDEOS -->\n      <div class=\"p3-cell p3-rv\">\n        <div class=\"p3-card\" tabindex=\"0\" role=\"button\" aria-label=\"Explainer Videos \u2014 flip for details\">\n          <div class=\"p3-side\">\n            <div class=\"p3-num\"><span><b>04<\/b> \/ 06<\/span><\/div>\n            <div class=\"p3-ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 18h6M10 21.5h4\"\/><path d=\"M12 2.5a6.5 6.5 0 0 0-3.8 11.8c.5.4.8 1 .8 1.7h6c0-.7.3-1.3.8-1.7A6.5 6.5 0 0 0 12 2.5z\"\/><\/svg><\/div>\n            <h3 class=\"p3-t\">Explainer Videos<\/h3>\n            <p class=\"p3-d\">Complex ideas become simple through engaging visuals. Educate customers, introduce products and increase conversions through clear storytelling.<\/p>\n            <span class=\"p3-flipk\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 3-6.7\"\/><path d=\"M3 4v5h5\"\/><\/svg> Ideal for<\/span>\n          <\/div>\n          <div class=\"p3-side p3-side--b\">\n            <div class=\"p3-sl\">Ideal for<\/div>\n            <ul class=\"p3-scope\">\n              <li>Startups<\/li><li>SaaS companies<\/li><li>Healthcare<\/li>\n              <li>Finance<\/li><li>Education<\/li><li>Technology<\/li>\n              <li>Manufacturing<\/li>\n            <\/ul>\n            <p class=\"p3-foot\">Available in both live-action and animated formats.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 05 MICRO DRAMA -->\n      <div class=\"p3-cell p3-rv\">\n        <div class=\"p3-card\" tabindex=\"0\" role=\"button\" aria-label=\"Micro Drama \u2014 flip for details\">\n          <div class=\"p3-side\">\n            <div class=\"p3-num\"><span><b>05<\/b> \/ 06<\/span><\/div>\n            <div class=\"p3-ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"6.5\" y=\"2.5\" width=\"11\" height=\"19\" rx=\"2.5\"\/><path d=\"M10.5 5.5h3\"\/><\/svg><\/div>\n            <h3 class=\"p3-t\">Micro Drama<\/h3>\n            <p class=\"p3-d\">Short-form storytelling is shaping the future of digital entertainment. Cinematic vertical dramas and episodic content built for mobile.<\/p>\n            <span class=\"p3-flipk\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 3-6.7\"\/><path d=\"M3 4v5h5\"\/><\/svg> What's included<\/span>\n          <\/div>\n          <div class=\"p3-side p3-side--b\">\n            <div class=\"p3-sl\">We develop<\/div>\n            <ul class=\"p3-scope\">\n              <li>Vertical series<\/li><li>Branded entertainment<\/li><li>Social media stories<\/li>\n              <li>Mini fiction series<\/li><li>OTT promos<\/li><li>Influencer content<\/li>\n            <\/ul>\n            <p class=\"p3-foot\">Fast-paced storytelling with high audience engagement.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 06 PHOTOGRAPHY -->\n      <div class=\"p3-cell p3-rv\">\n        <div class=\"p3-card\" tabindex=\"0\" role=\"button\" aria-label=\"Photography \u2014 flip for details\">\n          <div class=\"p3-side\">\n            <div class=\"p3-num\"><span><b>06<\/b> \/ 06<\/span><\/div>\n            <div class=\"p3-ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 8.5h3.2L8 6h8l1.8 2.5H21v11H3z\"\/><circle cx=\"12\" cy=\"14\" r=\"3.4\"\/><\/svg><\/div>\n            <h3 class=\"p3-t\">Photography<\/h3>\n            <p class=\"p3-d\">Powerful visuals build stronger brands. Our photography covers commercial, advertising, corporate and editorial requirements.<\/p>\n            <span class=\"p3-flipk\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 1 0 3-6.7\"\/><path d=\"M3 4v5h5\"\/><\/svg> What's included<\/span>\n          <\/div>\n          <div class=\"p3-side p3-side--b\">\n            <div class=\"p3-sl\">Services include<\/div>\n            <ul class=\"p3-scope\">\n              <li>Product<\/li><li>Corporate portraits<\/li><li>Industrial<\/li>\n              <li>Event<\/li><li>Lifestyle<\/li><li>Food<\/li>\n              <li>Fashion<\/li><li>Social media content<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <div class=\"p3-bottom p3-rv\">\n      <div>\n        <p class=\"p3-bt\">Not sure which one your project needs?<\/p>\n        <p class=\"p3-bp\">Send us the brief &mdash; we'll suggest the right scope and budget.<\/p>\n      <\/div>\n      <a class=\"p3-cta\" href=\"https:\/\/wa.me\/918527121545\" target=\"_blank\" rel=\"noopener\">\n        <span>Get a Quote<\/span>\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var root = (document.currentScript && document.currentScript.closest)\n    ? document.currentScript.closest('.mifa-p3')\n    : document.querySelector('.mifa-p3');\n  if(!root) return;\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* ---------------- reveal ---------------- *\/\n  var items = root.querySelectorAll('.p3-rv');\n  if(!reduce){\n    root.classList.add('p3-anim');\n    var show = function(el){ el.classList.add('p3-on'); };\n    if('IntersectionObserver' in window){\n      var io = new IntersectionObserver(function(es){\n        es.forEach(function(e){ if(e.isIntersecting){ show(e.target); io.unobserve(e.target); } });\n      }, {threshold:.1, rootMargin:'0px 0px -6% 0px'});\n      items.forEach(function(el){ io.observe(el); });\n    } else { items.forEach(show); }\n    setTimeout(function(){ items.forEach(show); }, 3200);\n  }\n\n  \/* ---------------- flip cards ---------------- *\/\n  root.querySelectorAll('.p3-card').forEach(function(card){\n    var cell = card.parentNode;\n    function flip(){\n      cell.classList.toggle('flip');\n      card.setAttribute('aria-pressed', cell.classList.contains('flip'));\n    }\n    card.addEventListener('click', flip);\n    card.addEventListener('keydown', function(e){\n      if(e.key === 'Enter' || e.key === ' '){ e.preventDefault(); flip(); }\n    });\n  });\n\n  \/* ---------------- cursor-follow glow ---------------- *\/\n  if(!reduce && window.matchMedia('(hover:hover) and (min-width:1041px)').matches){\n    root.querySelectorAll('.p3-card').forEach(function(card){\n      card.addEventListener('mousemove', function(ev){\n        var b = card.getBoundingClientRect();\n        card.querySelectorAll('.p3-side').forEach(function(s){\n          s.style.setProperty('--gx', ((ev.clientX - b.left) \/ b.width  * 100) + '%');\n          s.style.setProperty('--gy', ((ev.clientY - b.top)  \/ b.height * 100) + '%');\n        });\n      });\n    });\n  }\n})();\n<\/script>\n<\/div>\n\n\n\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 HOME \u00b7 PART 4 : 004 WORK + 005 CLIENTS\n     (ENGLISH)\n     ALL VIDEOS VISIBLE AT ONCE \u2014 thumbnail grid, no carousel.\n     Paste into its own \"Custom HTML\" block.\n\n     >>> 10 FILMS, TWO CATEGORIES <<<\n       Ads Film        \u00b7 7 films\n       Corporate Films \u00b7 3 films\n\n     Each card carries its YouTube ID in  data-yt=\"...\"  \u2014 the\n     thumbnail loads immediately and the film plays inside the\n     same card on click.\n\n     To swap a film, replace the ID only, not the full URL:\n       https:\/\/youtu.be\/H6Mz5tRv6P0  ->  data-yt=\"H6Mz5tRv6P0\"\n\n     To add a film, copy one item block, change data-yt, data-cat\n     (\"ads\" or \"corp\"), the title and the badge \u2014 then update the\n     count on the matching filter chip.\n     ============================================================ -->\n\n<div class=\"mifa-p4\">\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter+Tight:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@300;400;500&display=swap');\n\n\/* ===================== TOKENS + THEME RESET ===================== *\/\n.mifa-p4{\n  --bg:#07070A; --bg-2:#0C0C11; --panel:#101017;\n  --ink:#F2F0EE; --soft:rgba(242,240,238,.58); --line:rgba(242,240,238,.12);\n  --red:#C4162B; --red-hi:#FF3B54; --red-dp:#7A0C18;\n  --f:'Inter Tight',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;\n  --m:'DM Mono',ui-monospace,monospace;\n  --pad:clamp(18px,4.4vw,64px);\n  --e:cubic-bezier(.22,1,.36,1);\n\n  position:relative; z-index:0; overflow:hidden;\n  background:var(--bg) !important; color:var(--ink) !important;\n  font-family:var(--f) !important;\n  font-weight:400; font-size:16px; line-height:1.5;\n  text-align:left; -webkit-font-smoothing:antialiased;\n  \/* If the theme content area is narrow, uncomment:\n  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); *\/\n}\n.mifa-p4 *,.mifa-p4 *::before,.mifa-p4 *::after{ box-sizing:border-box; }\n.mifa-p4 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-p4 a:hover,.mifa-p4 a:focus{ text-decoration:none !important; }\n.mifa-p4 h1,.mifa-p4 h2,.mifa-p4 h3,.mifa-p4 p,.mifa-p4 ul,.mifa-p4 li{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-p4 ul{ list-style:none !important; }\n.mifa-p4 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-p4 button{\n  font:inherit; color:inherit; background:none; border:0; cursor:pointer;\n  padding:0; margin:0; text-transform:none; letter-spacing:normal;\n  box-shadow:none; border-radius:0; -webkit-appearance:none; appearance:none;\n  text-align:left; width:100%; display:block;\n}\n.mifa-p4 button:hover,.mifa-p4 button:focus{ background:none; }\n.mifa-p4 svg{ display:block; }\n.mifa-p4 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\n\/* ============================ SHELL ============================ *\/\n.mifa-p4 .p4{ position:relative; padding:clamp(64px,10vh,120px) var(--pad); background:var(--bg); }\n.mifa-p4 .p4__in{ position:relative; z-index:3; max-width:1660px; margin:0 auto; }\n.mifa-p4 .p4-orb{\n  position:absolute; z-index:0; border-radius:50%; pointer-events:none;\n  width:78vmax; height:78vmax; top:-34vmax; left:-28vmax;\n  background:radial-gradient(circle, rgba(196,22,43,.2) 0%, transparent 58%);\n  animation:p4Drift 25s ease-in-out infinite alternate;\n}\n@keyframes p4Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(9%,-6%,0) scale(1.16)} }\n.mifa-p4 .p4-grain{\n  position:absolute; inset:-60%; z-index:1; pointer-events:none; opacity:.14;\n  background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n  animation:p4Grain .7s steps(3) infinite;\n}\n@keyframes p4Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n\n.mifa-p4.p4-anim .p4-rv{ opacity:0; transform:translateY(32px); transition:opacity .95s var(--e), transform .95s var(--e); }\n.mifa-p4.p4-anim .p4-rv.p4-on{ opacity:1; transform:none; }\n\n\/* ============================ HEAD ============================ *\/\n.mifa-p4 .p4-tag{\n  display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,3vh,32px) !important;\n  font-family:var(--m); font-size:11px; letter-spacing:.2em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-p4 .p4-tag b{ color:var(--red-hi); font-weight:400; }\n.mifa-p4 .p4-tag::after{ content:''; flex:1; max-width:110px; height:1px; background:var(--line); }\n.mifa-p4 .p4-head{\n  display:grid; gap:clamp(24px,4vw,64px); align-items:end;\n  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);\n  margin-bottom:clamp(30px,4.4vh,48px);\n}\n.mifa-p4 h2.p4-h2{\n  margin:0 !important; font-size:clamp(34px,5.4vw,82px); font-weight:900;\n  line-height:.96; letter-spacing:-.042em; color:var(--ink);\n  text-shadow:1px 1px 0 rgba(122,12,24,.75), 2px 2px 0 rgba(122,12,24,.55),\n              3px 3px 0 rgba(122,12,24,.35), 4px 4px 0 rgba(122,12,24,.2),\n              0 18px 40px rgba(0,0,0,.8);\n}\n.mifa-p4 .p4-h2 em{ font-style:normal; color:var(--red-hi); text-shadow:0 0 40px rgba(255,59,84,.5); }\n.mifa-p4 p.p4-lede{\n  margin:0 !important; max-width:50ch;\n  font-size:clamp(15px,1.45vw,18px); line-height:1.75; color:var(--soft);\n}\n\n\/* ========================== FILTER CHIPS ========================== *\/\n.mifa-p4 .p4-fils{\n  display:flex; flex-wrap:wrap; gap:9px;\n  margin-bottom:clamp(24px,3.4vh,36px);\n}\n.mifa-p4 .p4-fil{\n  width:auto; display:inline-flex; align-items:center; gap:8px;\n  padding:10px 18px; border-radius:999px; border:1px solid var(--line);\n  background:rgba(242,240,238,.03);\n  font-family:var(--m); font-size:10.5px; letter-spacing:.12em;\n  text-transform:uppercase; color:var(--soft);\n  transition:color .35s, border-color .35s, background .35s, transform .35s var(--e);\n}\n.mifa-p4 .p4-fil em{ font-style:normal; font-size:9px; opacity:.65; }\n.mifa-p4 .p4-fil.on{\n  color:#fff; border-color:transparent; background:var(--red);\n  box-shadow:0 10px 26px rgba(196,22,43,.36);\n}\n\n\/* ============ VIDEO GRID \u2014 every thumbnail visible ============ *\/\n.mifa-p4 .p4-grid{\n  display:grid; gap:clamp(14px,1.6vw,22px);\n  grid-template-columns:repeat(3,minmax(0,1fr));\n}\n.mifa-p4 .p4-item{ min-width:0; }\n.mifa-p4 .p4-item.off{ display:none; }\n\n\/* the first card runs double-wide as the featured one *\/\n.mifa-p4 .p4-item--big{ grid-column:span 2; }\n\n.mifa-p4 .p4-v{\n  position:relative; border:1px solid var(--line); border-radius:15px; overflow:hidden;\n  background:var(--bg-2); box-shadow:0 26px 60px rgba(0,0,0,.6);\n  transition:border-color .45s, box-shadow .5s, transform .5s var(--e);\n}\n.mifa-p4 .p4-v:hover{\n  border-color:rgba(255,59,84,.5); transform:translateY(-5px);\n  box-shadow:0 36px 80px rgba(0,0,0,.72), 0 0 60px rgba(196,22,43,.18);\n}\n\n\/* ---- thumbnail frame ---- *\/\n.mifa-p4 .p4-frame{\n  position:relative; display:block; width:100%; aspect-ratio:16\/9; overflow:hidden;\n  background:linear-gradient(150deg, var(--red-dp) 0%, #1A0508 46%, var(--bg-2) 100%);\n  background-size:cover; background-position:center;\n}\n.mifa-p4 .p4-frame::after{\n  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.26;\n  background:repeating-linear-gradient(180deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px);\n}\n.mifa-p4 .p4-scrim{\n  position:absolute; inset:0; z-index:2; transition:background .5s;\n  background:linear-gradient(180deg, rgba(7,7,10,.12) 0%, rgba(7,7,10,.6) 100%);\n}\n.mifa-p4 .p4-v:hover .p4-scrim{ background:linear-gradient(180deg, rgba(7,7,10,0) 0%, rgba(7,7,10,.42) 100%); }\n\n.mifa-p4 .p4-play{\n  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4;\n  display:grid; place-items:center; width:62px; height:62px; border-radius:50%;\n  background:var(--red); box-shadow:0 14px 38px rgba(196,22,43,.55);\n  transition:transform .5s var(--e);\n}\n.mifa-p4 .p4-play svg{ width:21px; height:21px; fill:#fff; margin-left:3px; }\n.mifa-p4 .p4-play::before{\n  content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--red-hi);\n  animation:p4Ping 2.8s ease-out infinite;\n}\n@keyframes p4Ping{ 0%{transform:scale(1); opacity:.7} 100%{transform:scale(2); opacity:0} }\n.mifa-p4 .p4-v:hover .p4-play{ transform:translate(-50%,-50%) scale(1.12); }\n.mifa-p4 .p4-item--big .p4-play{ width:82px; height:82px; }\n.mifa-p4 .p4-item--big .p4-play svg{ width:27px; height:27px; margin-left:4px; }\n\n.mifa-p4 .p4-badge{\n  position:absolute; z-index:5; top:12px; left:12px;\n  padding:6px 12px; border-radius:999px;\n  background:rgba(7,7,10,.72); border:1px solid rgba(255,59,84,.42);\n  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);\n  font-family:var(--m); font-size:9px; letter-spacing:.16em;\n  text-transform:uppercase; color:var(--red-hi);\n}\n.mifa-p4 .p4-tick{ position:absolute; z-index:3; width:15px; height:15px; border:2px solid rgba(242,240,238,.34); }\n.mifa-p4 .p4-tick--tr{ top:14px; right:14px; border-left:0; border-bottom:0 }\n.mifa-p4 .p4-tick--bl{ bottom:14px; left:14px; border-right:0; border-top:0 }\n.mifa-p4 .p4-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:8; }\n.mifa-p4 .p4-frame.playing .p4-scrim,\n.mifa-p4 .p4-frame.playing .p4-play,\n.mifa-p4 .p4-frame.playing .p4-badge,\n.mifa-p4 .p4-frame.playing .p4-tick,\n.mifa-p4 .p4-frame.playing::after{ display:none; }\n\n\/* ---- caption ---- *\/\n.mifa-p4 .p4-cap{\n  display:flex; align-items:center; justify-content:space-between; gap:12px;\n  padding:14px 18px; border-top:1px solid var(--line); background:rgba(10,10,14,.94);\n}\n.mifa-p4 .p4-cap b{\n  min-width:0; font-size:14.5px; font-weight:700; letter-spacing:-.015em; color:var(--ink);\n  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;\n}\n.mifa-p4 .p4-cap i{\n  flex-shrink:0; font-style:normal; font-family:var(--m); font-size:9.5px;\n  letter-spacing:.14em; text-transform:uppercase; color:var(--red-hi);\n}\n.mifa-p4 .p4-item--big .p4-cap b{ font-size:clamp(16px,1.7vw,20px); }\n\n\/* ============================ CLIENTS ============================ *\/\n.mifa-p4 .p4-clients{ margin-top:clamp(64px,10vh,116px); }\n.mifa-p4 .p4-types{\n  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.4vw,18px);\n  perspective:1400px;\n}\n.mifa-p4 .p4-type{\n  position:relative; overflow:hidden; padding:clamp(22px,2.6vw,32px) clamp(16px,2vw,24px);\n  border:1px solid var(--line); border-radius:14px;\n  background:linear-gradient(158deg, rgba(22,22,29,.9), rgba(10,10,14,.9));\n  transform-style:preserve-3d; will-change:transform;\n  transition:transform .5s var(--e), border-color .45s, box-shadow .5s;\n}\n.mifa-p4 .p4-type:hover{ border-color:rgba(255,59,84,.45); box-shadow:0 30px 64px rgba(0,0,0,.6); }\n.mifa-p4 .p4-type__ic{\n  display:grid; place-items:center; width:46px; height:46px; margin-bottom:18px;\n  transform:translateZ(34px);\n  border:1px solid rgba(255,59,84,.34); border-radius:12px; background:rgba(196,22,43,.12);\n  transition:background .45s, border-color .45s, transform .5s var(--e);\n}\n.mifa-p4 .p4-type__ic svg{ width:21px; height:21px; stroke:var(--red-hi); fill:none;\n  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .45s; }\n.mifa-p4 .p4-type:hover .p4-type__ic{ background:var(--red); border-color:var(--red); }\n.mifa-p4 .p4-type:hover .p4-type__ic svg{ stroke:#fff; }\n.mifa-p4 p.p4-type__t{\n  margin:0 !important; transform:translateZ(20px);\n  font-size:15.5px; font-weight:700; line-height:1.35; color:var(--ink);\n}\n\n\/* client logos \u2014 remove style=\"display:none\" once the logos are added *\/\n.mifa-p4 .p4-logos{\n  margin-top:clamp(26px,4vw,40px); padding:28px 0; overflow:hidden; white-space:nowrap;\n  border-top:1px solid var(--line); border-bottom:1px solid var(--line);\n  background:rgba(12,12,17,.6);\n}\n.mifa-p4 .p4-logos__t{ display:inline-flex; align-items:center; gap:56px; animation:p4Slide 38s linear infinite; }\n.mifa-p4 .p4-logos:hover .p4-logos__t{ animation-play-state:paused; }\n.mifa-p4 .p4-logos__t img{\n  height:38px; width:auto; opacity:.5; filter:grayscale(1) brightness(1.8);\n  transition:opacity .4s, filter .4s;\n}\n.mifa-p4 .p4-logos__t img:hover{ opacity:1; filter:none; }\n@keyframes p4Slide{ to{ transform:translateX(-50%) } }\n\n\/* --------------------------- HOVER --------------------------- *\/\n@media (hover:hover) and (pointer:fine){\n  .mifa-p4 .p4-fil:hover{ color:var(--ink); border-color:rgba(255,59,84,.5); transform:translateY(-2px); }\n  .mifa-p4 .p4-fil.on:hover{ color:#fff; }\n}\n\n\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1080px){\n  .mifa-p4 .p4-head{ grid-template-columns:1fr; align-items:start; }\n  .mifa-p4 .p4-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }\n  .mifa-p4 .p4-item--big{ grid-column:span 2; }\n  .mifa-p4 .p4-types{ grid-template-columns:repeat(3,1fr); }\n}\n@media (max-width:680px){\n  .mifa-p4 .p4-grid{ grid-template-columns:1fr; }\n  .mifa-p4 .p4-item--big{ grid-column:span 1; }\n  .mifa-p4 .p4-types{ grid-template-columns:repeat(2,1fr); }\n  .mifa-p4 .p4-fil{ padding:9px 14px; font-size:10px; }\n  .mifa-p4 .p4-fil em{ display:none; }\n  .mifa-p4 .p4-tick{ width:13px; height:13px; }\n}\n@media (max-width:420px){ .mifa-p4 .p4-types{ grid-template-columns:1fr; } }\n@media (prefers-reduced-motion:reduce){\n  .mifa-p4 *,.mifa-p4 *::before,.mifa-p4 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-p4.p4-anim .p4-rv{ opacity:1; transform:none; }\n}\n<\/style>\n\n<section class=\"p4\" id=\"work\">\n  <div class=\"p4-orb\" aria-hidden=\"true\"><\/div>\n  <div class=\"p4-grain\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"p4__in\">\n\n    <div class=\"p4-head\">\n      <div>\n        <div class=\"p4-tag p4-rv\"><b>004<\/b> \/ Selected Work<\/div>\n        <h2 class=\"p4-h2 p4-rv\">See it <em>in motion.<\/em><\/h2>\n      <\/div>\n      <p class=\"p4-lede p4-rv\">\n        Ad films and corporate films for brands across India &mdash; scripted, shot\n        and delivered end to end by one team.\n      <\/p>\n    <\/div>\n\n    <!-- ==================== FILTERS ==================== -->\n    <div class=\"p4-fils p4-rv\" id=\"p4Fils\">\n      <button class=\"p4-fil on\" data-f=\"all\"  type=\"button\">All Work <em>10<\/em><\/button>\n      <button class=\"p4-fil\"    data-f=\"ads\"  type=\"button\">Ads Film <em>07<\/em><\/button>\n      <button class=\"p4-fil\"    data-f=\"corp\" type=\"button\">Corporate Films <em>03<\/em><\/button>\n    <\/div>\n\n    <!-- ==================== VIDEO GRID ==================== -->\n    <div class=\"p4-grid\" id=\"p4Grid\">\n\n      <!-- 01 -->\n      <div class=\"p4-item p4-item--big p4-rv\" data-cat=\"ads\">\n        <button class=\"p4-v\" type=\"button\">\n          <span class=\"p4-frame\" data-yt=\"H6Mz5tRv6P0\" aria-label=\"Play Phillips Master Chef\">\n            <span class=\"p4-scrim\"><\/span>\n            <span class=\"p4-badge\">Ad Film<\/span>\n            <span class=\"p4-tick p4-tick--tr\"><\/span><span class=\"p4-tick p4-tick--bl\"><\/span>\n            <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/span>\n          <span class=\"p4-cap\"><b>Phillips Master Chef<\/b><i>Phillips<\/i><\/span>\n        <\/button>\n      <\/div>\n\n      <!-- 02 -->\n      <div class=\"p4-item p4-rv\" data-cat=\"ads\">\n        <button class=\"p4-v\" type=\"button\">\n          <span class=\"p4-frame\" data-yt=\"DsaqrX9GuAo\" aria-label=\"Play RAVALLI Hair Growth Serum\">\n            <span class=\"p4-scrim\"><\/span>\n            <span class=\"p4-badge\">Ad Film<\/span>\n            <span class=\"p4-tick p4-tick--tr\"><\/span><span class=\"p4-tick p4-tick--bl\"><\/span>\n            <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/span>\n          <span class=\"p4-cap\"><b>RAVALLI Hair Growth Serum<\/b><i>Indie Visual<\/i><\/span>\n        <\/button>\n      <\/div>\n\n      <!-- 03 -->\n      <div class=\"p4-item p4-rv\" data-cat=\"ads\">\n        <button class=\"p4-v\" type=\"button\">\n          <span class=\"p4-frame\" data-yt=\"Kf_kDcmMN08\" aria-label=\"Play Neelgiri E-Bikes\">\n            <span class=\"p4-scrim\"><\/span>\n            <span class=\"p4-badge\">Ad Film<\/span>\n            <span class=\"p4-tick p4-tick--tr\"><\/span><span class=\"p4-tick p4-tick--bl\"><\/span>\n            <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/span>\n          <span class=\"p4-cap\"><b>Neelgiri E-Bikes<\/b><i>Neelgiri<\/i><\/span>\n        <\/button>\n      <\/div>\n\n      <!-- 04 -->\n      <div class=\"p4-item p4-rv\" data-cat=\"ads\">\n        <button class=\"p4-v\" type=\"button\">\n          <span class=\"p4-frame\" data-yt=\"nVcybhUstjk\" aria-label=\"Play Export Wali Diwali\">\n            <span class=\"p4-scrim\"><\/span>\n            <span class=\"p4-badge\">Ad Film<\/span>\n            <span class=\"p4-tick p4-tick--tr\"><\/span><span class=\"p4-tick p4-tick--bl\"><\/span>\n            <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/span>\n          <span class=\"p4-cap\"><b>Export Wali Diwali<\/b><i>Line Production<\/i><\/span>\n        <\/button>\n      <\/div>\n\n      <!-- 05 -->\n      <div class=\"p4-item p4-rv\" data-cat=\"ads\">\n        <button class=\"p4-v\" type=\"button\">\n          <span class=\"p4-frame\" data-yt=\"goxnoPXjuSA\" aria-label=\"Play Effective Baby Care x Maate\">\n            <span class=\"p4-scrim\"><\/span>\n            <span class=\"p4-badge\">Ad Film<\/span>\n            <span class=\"p4-tick p4-tick--tr\"><\/span><span class=\"p4-tick p4-tick--bl\"><\/span>\n            <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/span>\n          <span class=\"p4-cap\"><b>Effective Baby Care &times; Maate<\/b><i>Twelve<\/i><\/span>\n        <\/button>\n      <\/div>\n\n      <!-- 06 -->\n      <div class=\"p4-item p4-rv\" data-cat=\"ads\">\n        <button class=\"p4-v\" type=\"button\">\n          <span class=\"p4-frame\" data-yt=\"bJC9V3B6xKA\" aria-label=\"Play Octro Teen Patti - Doctor\">\n            <span class=\"p4-scrim\"><\/span>\n            <span class=\"p4-badge\">Ad Film<\/span>\n            <span class=\"p4-tick p4-tick--tr\"><\/span><span class=\"p4-tick p4-tick--bl\"><\/span>\n            <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/span>\n          <span class=\"p4-cap\"><b>Octro Teen Patti &mdash; Doctor<\/b><i>Octro<\/i><\/span>\n        <\/button>\n      <\/div>\n\n      <!-- 07 -->\n      <div class=\"p4-item p4-rv\" data-cat=\"ads\">\n        <button class=\"p4-v\" type=\"button\">\n          <span class=\"p4-frame\" data-yt=\"9m9zQ26k1pg\" aria-label=\"Play Independence Day and Raksha Bandhan\">\n            <span class=\"p4-scrim\"><\/span>\n            <span class=\"p4-badge\">Ad Film<\/span>\n            <span class=\"p4-tick p4-tick--tr\"><\/span><span class=\"p4-tick p4-tick--bl\"><\/span>\n            <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/span>\n          <span class=\"p4-cap\"><b>Independence Day &amp; Raksha Bandhan<\/b><i>Shikhar Group<\/i><\/span>\n        <\/button>\n      <\/div>\n\n      <!-- 08 -->\n      <div class=\"p4-item p4-rv\" data-cat=\"corp\">\n        <button class=\"p4-v\" type=\"button\">\n          <span class=\"p4-frame\" data-yt=\"EWoyJN9tI-4\" aria-label=\"Play Cosmos Pump\">\n            <span class=\"p4-scrim\"><\/span>\n            <span class=\"p4-badge\">Corporate<\/span>\n            <span class=\"p4-tick p4-tick--tr\"><\/span><span class=\"p4-tick p4-tick--bl\"><\/span>\n            <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/span>\n          <span class=\"p4-cap\"><b>Cosmos Pump<\/b><i>Cosmos Pump<\/i><\/span>\n        <\/button>\n      <\/div>\n\n      <!-- 09 -->\n      <div class=\"p4-item p4-rv\" data-cat=\"corp\">\n        <button class=\"p4-v\" type=\"button\">\n          <span class=\"p4-frame\" data-yt=\"L30X5QbkGMk\" aria-label=\"Play Neelgiri Machinery\">\n            <span class=\"p4-scrim\"><\/span>\n            <span class=\"p4-badge\">Corporate<\/span>\n            <span class=\"p4-tick p4-tick--tr\"><\/span><span class=\"p4-tick p4-tick--bl\"><\/span>\n            <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/span>\n          <span class=\"p4-cap\"><b>Neelgiri Machinery<\/b><i>Neelgiri<\/i><\/span>\n        <\/button>\n      <\/div>\n\n      <!-- 10 -->\n      <div class=\"p4-item p4-rv\" data-cat=\"corp\">\n        <button class=\"p4-v\" type=\"button\">\n          <span class=\"p4-frame\" data-yt=\"pjSet0xidOk\" aria-label=\"Play Shalabh Namdeo\">\n            <span class=\"p4-scrim\"><\/span>\n            <span class=\"p4-badge\">Corporate<\/span>\n            <span class=\"p4-tick p4-tick--tr\"><\/span><span class=\"p4-tick p4-tick--bl\"><\/span>\n            <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/span>\n          <span class=\"p4-cap\"><b>Shalabh Namdeo<\/b><i>Shalabh Namdeo<\/i><\/span>\n        <\/button>\n      <\/div>\n\n    <\/div>\n\n    <!-- ---------------- CLIENTS ---------------- -->\n    <div class=\"p4-clients\" id=\"clients\">\n      <div class=\"p4-head\">\n        <div>\n          <div class=\"p4-tag p4-rv\"><b>005<\/b> \/ Clients<\/div>\n          <h2 class=\"p4-h2 p4-rv\">Different clients.<br>Different <em>production needs.<\/em><\/h2>\n        <\/div>\n        <p class=\"p4-lede p4-rv\">\n          Every client comes to us with a different requirement. Some need a specific service,\n          while others need complete production support. You define the scope &mdash; we build\n          the right team, workflow and estimate around it.\n        <\/p>\n      <\/div>\n\n      <div class=\"p4-types\">\n        <div class=\"p4-type p4-rv\">\n          <div class=\"p4-type__ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 21h18M5 21V8l7-5 7 5v13\"\/><path d=\"M10 21v-6h4v6\"\/><\/svg><\/div>\n          <p class=\"p4-type__t\">Businesses<\/p>\n        <\/div>\n        <div class=\"p4-type p4-rv\">\n          <div class=\"p4-type__ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M2 12h6l2-5 4 10 2-5h6\"\/><\/svg><\/div>\n          <p class=\"p4-type__t\">Agencies<\/p>\n        <\/div>\n        <div class=\"p4-type p4-rv\">\n          <div class=\"p4-type__ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2c3.5 3 5.5 6.5 5.5 10.5A5.5 5.5 0 0 1 12 18a5.5 5.5 0 0 1-5.5-5.5C6.5 8.5 8.5 5 12 2z\"\/><path d=\"M9.5 19.5 8 22M14.5 19.5 16 22\"\/><\/svg><\/div>\n          <p class=\"p4-type__t\">Startups<\/p>\n        <\/div>\n        <div class=\"p4-type p4-rv\">\n          <div class=\"p4-type__ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 20.5S4 15.8 4 9.9A4.4 4.4 0 0 1 12 7a4.4 4.4 0 0 1 8 2.9c0 5.9-8 10.6-8 10.6z\"\/><\/svg><\/div>\n          <p class=\"p4-type__t\">NGOs<\/p>\n        <\/div>\n        <div class=\"p4-type p4-rv\">\n          <div class=\"p4-type__ic\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 21h18M4 21V10h16v11\"\/><path d=\"M12 3 3 8h18z\"\/><path d=\"M8 21v-6M12 21v-6M16 21v-6\"\/><\/svg><\/div>\n          <p class=\"p4-type__t\">Government<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- CLIENT LOGOS \u2014 remove style=\"display:none\" once the logo files are added -->\n      <div class=\"p4-logos\" style=\"display:none\">\n        <div class=\"p4-logos__t\" id=\"p4Logos\">\n          <!-- <img decoding=\"async\" src=\"LOGO_URL_1\" alt=\"Client name\"> -->\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var root = (document.currentScript && document.currentScript.closest)\n    ? document.currentScript.closest('.mifa-p4')\n    : document.querySelector('.mifa-p4');\n  if(!root) return;\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* ---------------- reveal ---------------- *\/\n  var items = root.querySelectorAll('.p4-rv');\n  if(!reduce){\n    root.classList.add('p4-anim');\n    var show = function(el){ el.classList.add('p4-on'); };\n    if('IntersectionObserver' in window){\n      var io = new IntersectionObserver(function(es){\n        es.forEach(function(e){ if(e.isIntersecting){ show(e.target); io.unobserve(e.target); } });\n      }, {threshold:.1, rootMargin:'0px 0px -6% 0px'});\n      items.forEach(function(el){ io.observe(el); });\n    } else { items.forEach(show); }\n    setTimeout(function(){ items.forEach(show); }, 3200);\n  }\n\n  \/* ------- thumbnails load right away, video plays on click ------- *\/\n  root.querySelectorAll('.p4-frame').forEach(function(frame){\n    var id = (frame.dataset.yt || '').trim();\n    if(!id) return;\n\n    \/* try the high-res thumbnail first, fall back to hqdefault *\/\n    var probe = new Image();\n    probe.onload = function(){\n      frame.style.backgroundImage = 'url(\"https:\/\/img.youtube.com\/vi\/' + id +\n        (probe.naturalWidth > 150 ? '\/maxresdefault.jpg' : '\/hqdefault.jpg') + '\")';\n    };\n    probe.onerror = function(){\n      frame.style.backgroundImage = 'url(\"https:\/\/img.youtube.com\/vi\/' + id + '\/hqdefault.jpg\")';\n    };\n    probe.src = 'https:\/\/img.youtube.com\/vi\/' + id + '\/maxresdefault.jpg';\n\n    var btn = frame.parentNode;\n    if(!btn) return;\n    btn.addEventListener('click', function(){\n      if(frame.querySelector('iframe')) return;\n      var f = document.createElement('iframe');\n      f.src = 'https:\/\/www.youtube-nocookie.com\/embed\/' + id + '?autoplay=1&rel=0&modestbranding=1';\n      f.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture';\n      f.allowFullscreen = true;\n      f.title = frame.getAttribute('aria-label') || 'Video';\n      frame.appendChild(f);\n      frame.classList.add('playing');\n    });\n  });\n\n  \/* ---------------- category filters ---------------- *\/\n  var fils  = Array.prototype.slice.call(root.querySelectorAll('.p4-fil'));\n  var cards = Array.prototype.slice.call(root.querySelectorAll('.p4-item'));\n\n  fils.forEach(function(f){\n    f.addEventListener('click', function(){\n      fils.forEach(function(x){ x.classList.remove('on'); });\n      f.classList.add('on');\n      var key = f.dataset.f;\n      cards.forEach(function(c){\n        c.classList.toggle('off', !(key === 'all' || c.dataset.cat === key));\n      });\n    });\n  });\n\n  \/* ---------------- 3D tilt on client tiles ---------------- *\/\n  if(!reduce && window.matchMedia('(hover:hover) and (min-width:1041px)').matches){\n    root.querySelectorAll('.p4-type').forEach(function(el){\n      el.addEventListener('mousemove', function(ev){\n        var b = el.getBoundingClientRect(),\n            px = (ev.clientX - b.left) \/ b.width,\n            py = (ev.clientY - b.top)  \/ b.height;\n        el.style.transform =\n          'rotateY(' + ((px - .5) * 12) + 'deg) rotateX(' + ((.5 - py) * 12) + 'deg) translateZ(12px)';\n      });\n      el.addEventListener('mouseleave', function(){ el.style.transform = ''; });\n    });\n  }\n\n  \/* ---------------- logo marquee ---------------- *\/\n  var lg = root.querySelector('#p4Logos');\n  if(lg && lg.children.length){ lg.innerHTML += lg.innerHTML; }\n})();\n<\/script>\n<\/div>\n\n\n\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 HOME \u00b7 PART 5 : 007 CONTACT + FOOTER\n     (ENGLISH)\n     3D SIGNATURE : tilting glass panels + kinetic footer type\n     Paste into its own \"Custom HTML\" block.\n\n     NOTE: the form needs no backend \u2014 fill it in, press\n     \"WhatsApp the Studio\", and every detail is sent as one\n     message to 8527121545.\n     ============================================================ -->\n\n<div class=\"mifa-p5\">\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter+Tight:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@300;400;500&display=swap');\n\n\/* ===================== TOKENS + THEME RESET ===================== *\/\n.mifa-p5{\n  --bg:#07070A; --bg-2:#0C0C11; --panel:#101017;\n  --ink:#F2F0EE; --soft:rgba(242,240,238,.58); --line:rgba(242,240,238,.12);\n  --red:#C4162B; --red-hi:#FF3B54; --red-dp:#7A0C18;\n  --f:'Inter Tight',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;\n  --m:'DM Mono',ui-monospace,monospace;\n  --pad:clamp(18px,4.4vw,64px);\n  --e:cubic-bezier(.22,1,.36,1);\n\n  position:relative; z-index:0; overflow:hidden;\n  background:var(--bg) !important; color:var(--ink) !important;\n  font-family:var(--f) !important;\n  font-weight:400; font-size:16px; line-height:1.5;\n  text-align:left; -webkit-font-smoothing:antialiased;\n  \/* If the theme content area is narrow, uncomment:\n  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); *\/\n}\n.mifa-p5 *,.mifa-p5 *::before,.mifa-p5 *::after{ box-sizing:border-box; }\n.mifa-p5 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-p5 a:hover,.mifa-p5 a:focus{ text-decoration:none !important; }\n.mifa-p5 h1,.mifa-p5 h2,.mifa-p5 h3,.mifa-p5 p,.mifa-p5 ul,.mifa-p5 li{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-p5 ul{ list-style:none !important; }\n.mifa-p5 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-p5 button{\n  font:inherit; color:inherit; background:none; border:0; cursor:pointer;\n  padding:0; margin:0; text-transform:none; letter-spacing:normal;\n  box-shadow:none; border-radius:0; -webkit-appearance:none; appearance:none;\n}\n.mifa-p5 svg{ display:block; }\n.mifa-p5 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\n\/* form control reset *\/\n.mifa-p5 input,.mifa-p5 select,.mifa-p5 textarea{\n  display:block; width:100%; font-family:var(--f) !important; font-size:14.5px;\n  font-weight:400; line-height:1.45; color:var(--ink) !important;\n  background:rgba(7,7,10,.7) !important; border:1px solid var(--line) !important;\n  border-radius:11px !important; padding:14px 16px !important; margin:0 !important;\n  min-height:0; height:auto; box-shadow:none !important; outline:none;\n  -webkit-appearance:none; appearance:none; transition:border-color .35s, background .35s, box-shadow .35s;\n}\n.mifa-p5 input:focus,.mifa-p5 select:focus,.mifa-p5 textarea:focus{\n  border-color:var(--red) !important; background:rgba(7,7,10,.92) !important;\n  box-shadow:0 0 0 3px rgba(196,22,43,.16) !important;\n}\n.mifa-p5 input::placeholder,.mifa-p5 textarea::placeholder{ color:rgba(242,240,238,.34); opacity:1; }\n.mifa-p5 textarea{ resize:vertical; min-height:112px; }\n.mifa-p5 select{\n  cursor:pointer; padding-right:42px !important;\n  background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF3B54' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\") !important;\n  background-repeat:no-repeat !important; background-position:right 15px center !important;\n  background-size:15px !important;\n}\n.mifa-p5 select option{ background:#101017; color:#F2F0EE; }\n.mifa-p5 .p5-fd.bad input,.mifa-p5 .p5-fd.bad select{ border-color:var(--red-hi) !important; }\n\n\/* ============================ SHELL ============================ *\/\n.mifa-p5 .p5{ position:relative; padding:clamp(64px,10vh,120px) var(--pad) 0; background:var(--bg); }\n.mifa-p5 .p5__in{ position:relative; z-index:3; max-width:1660px; margin:0 auto; }\n.mifa-p5 .p5-orb{\n  position:absolute; z-index:0; border-radius:50%; pointer-events:none;\n  width:80vmax; height:80vmax; top:-36vmax; right:-30vmax;\n  background:radial-gradient(circle, rgba(196,22,43,.22) 0%, transparent 58%);\n  animation:p5Drift 23s ease-in-out infinite alternate;\n}\n@keyframes p5Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-8%,7%,0) scale(1.16)} }\n.mifa-p5 .p5-grain{\n  position:absolute; inset:-60%; z-index:1; pointer-events:none; opacity:.14;\n  background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n  animation:p5Grain .7s steps(3) infinite;\n}\n@keyframes p5Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n\n.mifa-p5.p5-anim .p5-rv{ opacity:0; transform:translateY(32px); transition:opacity .95s var(--e), transform .95s var(--e); }\n.mifa-p5.p5-anim .p5-rv.p5-on{ opacity:1; transform:none; }\n\n\/* ============================ HEAD ============================ *\/\n.mifa-p5 .p5-tag{\n  display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,3vh,32px) !important;\n  font-family:var(--m); font-size:11px; letter-spacing:.2em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-p5 .p5-tag b{ color:var(--red-hi); font-weight:400; }\n.mifa-p5 .p5-tag::after{ content:''; flex:1; max-width:110px; height:1px; background:var(--line); }\n.mifa-p5 .p5-head{\n  display:grid; gap:clamp(24px,4vw,64px); align-items:end;\n  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);\n  margin-bottom:clamp(38px,6vh,64px);\n}\n.mifa-p5 h2.p5-h2{\n  margin:0 !important; font-size:clamp(34px,5.4vw,82px); font-weight:900;\n  line-height:.96; letter-spacing:-.042em; color:var(--ink);\n  text-shadow:1px 1px 0 rgba(122,12,24,.75), 2px 2px 0 rgba(122,12,24,.55),\n              3px 3px 0 rgba(122,12,24,.35), 4px 4px 0 rgba(122,12,24,.2),\n              0 18px 40px rgba(0,0,0,.8);\n}\n.mifa-p5 .p5-h2 em{ font-style:normal; color:var(--red-hi); text-shadow:0 0 40px rgba(255,59,84,.5); }\n.mifa-p5 p.p5-lede{\n  margin:0 !important; max-width:50ch;\n  font-size:clamp(15px,1.45vw,18px); line-height:1.75; color:var(--soft);\n}\n\n\/* ============================ LAYOUT ============================ *\/\n.mifa-p5 .p5-wrap{\n  display:grid; gap:clamp(16px,2vw,24px);\n  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); align-items:start;\n  perspective:1600px;\n}\n.mifa-p5 .p5-box{\n  border:1px solid var(--line); border-radius:17px; overflow:hidden;\n  background:linear-gradient(158deg, rgba(22,22,29,.94), rgba(10,10,14,.96));\n  box-shadow:0 44px 100px rgba(0,0,0,.7);\n  transform-style:preserve-3d; will-change:transform;\n  transition:transform .5s var(--e), border-color .5s;\n}\n.mifa-p5 .p5-box:hover{ border-color:rgba(255,59,84,.35); }\n.mifa-p5 .p5-bar{\n  display:flex; align-items:center; justify-content:space-between; gap:14px;\n  padding:14px 22px; border-bottom:1px solid var(--line);\n  font-family:var(--m); font-size:10.5px; letter-spacing:.16em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-p5 .p5-bar b{ color:var(--red-hi); font-weight:400; }\n.mifa-p5 .p5-body{ padding:clamp(24px,3.2vw,40px); }\n\n\/* ---------------------- form ---------------------- *\/\n.mifa-p5 .p5-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }\n.mifa-p5 .p5-fd{ min-width:0; }\n.mifa-p5 .p5-fd--full{ grid-column:1\/-1; }\n.mifa-p5 .p5-lbl{\n  display:block; margin-bottom:8px; font-family:var(--m); font-size:10px;\n  letter-spacing:.16em; text-transform:uppercase; color:var(--soft);\n}\n.mifa-p5 .p5-lbl i{ font-style:normal; color:var(--red-hi); }\n\n.mifa-p5 .p5-send{\n  position:relative; overflow:hidden; display:inline-flex; align-items:center;\n  justify-content:center; gap:11px; width:100%; margin-top:22px;\n  padding:18px 30px; border-radius:999px; background:var(--red); color:#fff;\n  font-size:13.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;\n  box-shadow:0 12px 36px rgba(196,22,43,.44);\n  transition:transform .45s var(--e), color .35s;\n}\n.mifa-p5 .p5-send span,.mifa-p5 .p5-send svg{ position:relative; z-index:2; }\n.mifa-p5 .p5-send svg{ width:17px; height:17px; fill:currentColor; }\n.mifa-p5 .p5-send::before{ content:''; position:absolute; inset:0; background:var(--ink);\n  transform:translateY(101%); transition:transform .5s var(--e); }\n.mifa-p5 .p5-send:hover{ transform:translateY(-4px); color:var(--bg); }\n.mifa-p5 .p5-send:hover::before{ transform:translateY(0); }\n\n.mifa-p5 p.p5-alt{\n  margin:16px 0 0 !important; text-align:center;\n  font-family:var(--m); font-size:11.5px; color:var(--soft);\n}\n.mifa-p5 .p5-alt a{ color:var(--red-hi); border-bottom:1px solid rgba(255,59,84,.4); }\n.mifa-p5 .p5-err{\n  display:none; margin-top:14px !important; padding:11px 15px;\n  border:1px solid rgba(255,59,84,.45); border-radius:10px; background:rgba(196,22,43,.14);\n  font-family:var(--m); font-size:11.5px; color:var(--red-hi);\n}\n.mifa-p5 .p5-err.on{ display:block; }\n\n\/* ---------------------- call sheet ---------------------- *\/\n.mifa-p5 .p5-cs{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid rgba(242,240,238,.08); }\n.mifa-p5 .p5-cs:first-child{ padding-top:0; }\n.mifa-p5 .p5-cs:last-of-type{ border-bottom:0; }\n.mifa-p5 .p5-cs__k{\n  flex-shrink:0; width:104px; padding-top:3px; font-family:var(--m); font-size:10px;\n  letter-spacing:.15em; text-transform:uppercase; color:var(--soft);\n}\n.mifa-p5 .p5-cs__v{ min-width:0; font-size:14.5px; line-height:1.65; color:var(--ink); }\n.mifa-p5 .p5-cs__v small{ display:block; margin-top:4px; font-family:var(--m); font-size:11px; color:var(--soft); }\n.mifa-p5 .p5-cs__v a{ transition:color .3s; }\n.mifa-p5 .p5-cs__v a:hover{ color:var(--red-hi); }\n.mifa-p5 .p5-pin{\n  display:inline-flex; align-items:center; gap:7px; margin-top:10px;\n  font-family:var(--m); font-size:10.5px; letter-spacing:.1em;\n  text-transform:uppercase; color:var(--red-hi);\n}\n.mifa-p5 .p5-pin svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; }\n\n.mifa-p5 .p5-soc{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }\n.mifa-p5 .p5-soc a{\n  display:grid; place-items:center; width:42px; height:42px; border-radius:12px;\n  border:1px solid var(--line); background:rgba(196,22,43,.08);\n  transition:background .4s, border-color .4s, transform .45s var(--e);\n}\n.mifa-p5 .p5-soc svg{ width:17px; height:17px; fill:var(--ink); transition:fill .4s; }\n.mifa-p5 .p5-soc a:hover{ background:var(--red); border-color:var(--red); transform:translateY(-4px); }\n.mifa-p5 .p5-soc a:hover svg{ fill:#fff; }\n\n\/* ---------------------- map ---------------------- *\/\n.mifa-p5 .p5-map{\n  margin-top:clamp(16px,2vw,24px); border:1px solid var(--line); border-radius:17px;\n  overflow:hidden; background:var(--bg-2); box-shadow:0 34px 80px rgba(0,0,0,.6);\n}\n.mifa-p5 .p5-map iframe{\n  display:block; width:100%; height:280px; border:0;\n  filter:invert(92%) hue-rotate(180deg) grayscale(30%) contrast(88%);\n}\n\n\/* ============================ FOOTER ============================ *\/\n.mifa-p5 .p5-foot{\n  position:relative; z-index:3; margin-top:clamp(64px,10vh,110px);\n  border-top:1px solid var(--line); padding:clamp(44px,7vh,74px) 0 0;\n}\n\n\/* kinetic big type *\/\n.mifa-p5 .p5-kin{ overflow:hidden; white-space:nowrap; margin-bottom:clamp(40px,6vh,66px); }\n.mifa-p5 .p5-kin__t{ display:inline-flex; align-items:center; animation:p5Slide 26s linear infinite; }\n.mifa-p5 .p5-kin__t span{\n  display:inline-flex; align-items:center; gap:36px; padding-right:36px;\n  font-size:clamp(38px,7.4vw,110px); font-weight:900; letter-spacing:-.045em;\n  color:transparent; -webkit-text-stroke:1px rgba(242,240,238,.24);\n  transition:color .4s;\n}\n.mifa-p5 .p5-kin__t span:nth-child(even){ color:var(--red); -webkit-text-stroke:0; }\n.mifa-p5 .p5-kin__t span::after{\n  content:''; width:12px; height:12px; border-radius:50%;\n  background:var(--red-hi); -webkit-text-stroke:0; flex-shrink:0;\n}\n@keyframes p5Slide{ to{ transform:translateX(-50%) } }\n\n.mifa-p5 .p5-fgrid{\n  display:grid; gap:clamp(30px,4vw,54px);\n  grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr));\n  margin-bottom:clamp(38px,5vh,58px);\n}\n.mifa-p5 .p5-brand{ display:flex; align-items:center; gap:13px; margin-bottom:20px; perspective:500px; }\n.mifa-p5 .p5-mark{\n  position:relative; width:48px; height:48px; flex-shrink:0; border-radius:11px;\n  overflow:hidden; background:var(--red); box-shadow:0 10px 30px rgba(196,22,43,.42);\n  transition:transform .6s var(--e);\n}\n.mifa-p5 .p5-mark img{ position:absolute; max-width:none; width:237.5%; height:237.5%; left:-62.2%; top:-54.6%; }\n.mifa-p5 .p5-brand:hover .p5-mark{ transform:rotateY(28deg) rotateX(-8deg) scale(1.06); }\n.mifa-p5 .p5-word{ display:flex; flex-direction:column; line-height:1.1; }\n.mifa-p5 .p5-word b{ font-size:15px; font-weight:800; letter-spacing:.1em; color:var(--ink); }\n.mifa-p5 .p5-word i{ font-style:normal; font-size:10px; font-weight:400; letter-spacing:.2em; color:var(--soft); }\n.mifa-p5 p.p5-fp{ margin:0 !important; max-width:38ch; font-size:14px; line-height:1.75; color:var(--soft); }\n\n.mifa-p5 .p5-col__h{\n  margin-bottom:18px; font-family:var(--m); font-size:10px;\n  letter-spacing:.16em; text-transform:uppercase; color:var(--red-hi);\n}\n.mifa-p5 .p5-col li{ margin-bottom:11px !important; }\n.mifa-p5 .p5-col a{\n  position:relative; font-size:14px; color:var(--soft);\n  transition:color .3s, padding-left .35s var(--e);\n}\n.mifa-p5 .p5-col a::before{\n  content:''; position:absolute; left:0; top:50%; width:6px; height:1px;\n  background:var(--red-hi); opacity:0; transition:opacity .3s;\n}\n.mifa-p5 .p5-col a:hover{ color:var(--ink); padding-left:11px; }\n.mifa-p5 .p5-col a:hover::before{ opacity:1; }\n\n.mifa-p5 .p5-bottom{\n  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;\n  padding:24px 0 32px; border-top:1px solid var(--line);\n  font-family:var(--m); font-size:11.5px; color:var(--soft);\n}\n.mifa-p5 .p5-bottom a:hover{ color:var(--red-hi); }\n\n\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1080px){\n  .mifa-p5 .p5-head{ grid-template-columns:1fr; align-items:start; }\n  .mifa-p5 .p5-wrap{ grid-template-columns:1fr; }\n  .mifa-p5 .p5-fgrid{ grid-template-columns:1fr 1fr; }\n}\n@media (max-width:640px){\n  .mifa-p5 .p5-row{ grid-template-columns:1fr; }\n  .mifa-p5 .p5-fgrid{ grid-template-columns:1fr; }\n  .mifa-p5 .p5-cs{ flex-direction:column; gap:8px; }\n  .mifa-p5 .p5-cs__k{ width:auto; padding-top:0; }\n  .mifa-p5 .p5-bottom{ flex-direction:column; align-items:flex-start; }\n  .mifa-p5 .p5-map iframe{ height:220px; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-p5 *,.mifa-p5 *::before,.mifa-p5 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-p5.p5-anim .p5-rv{ opacity:1; transform:none; }\n}\n<\/style>\n\n<section class=\"p5\" id=\"contact\">\n  <div class=\"p5-orb\" aria-hidden=\"true\"><\/div>\n  <div class=\"p5-grain\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"p5__in\">\n\n    <div class=\"p5-head\">\n      <div>\n        <div class=\"p5-tag p5-rv\"><b>007<\/b> \/ Start a Project<\/div>\n        <h2 class=\"p5-h2 p5-rv\">Have a production in mind?<br>Let's bring it <em>to the floor.<\/em><\/h2>\n      <\/div>\n      <p class=\"p5-lede p5-rv\">\n        Share your shoot date, city, and a brief idea of what you're planning.\n        Our team will check availability and get back to you with a clear\n        production estimate and the next steps.\n      <\/p>\n    <\/div>\n\n    <div class=\"p5-wrap\">\n\n      <!-- ---------------- ENQUIRY ---------------- -->\n      <div class=\"p5-box p5-rv\" id=\"p5Form\">\n        <div class=\"p5-bar\">\n          <span><b>Let's Talk<\/b> &middot; Project Brief<\/span>\n          <span>Reply within 24 hrs<\/span>\n        <\/div>\n        <div class=\"p5-body\">\n\n          <div class=\"p5-row\">\n            <div class=\"p5-fd\">\n              <label class=\"p5-lbl\" for=\"p5Name\">Name <i>*<\/i><\/label>\n              <input id=\"p5Name\" type=\"text\" placeholder=\"Your full name\" autocomplete=\"name\">\n            <\/div>\n            <div class=\"p5-fd\">\n              <label class=\"p5-lbl\" for=\"p5Co\">Company<\/label>\n              <input id=\"p5Co\" type=\"text\" placeholder=\"Company \/ brand\" autocomplete=\"organization\">\n            <\/div>\n          <\/div>\n\n          <div class=\"p5-row\">\n            <div class=\"p5-fd\">\n              <label class=\"p5-lbl\" for=\"p5Ph\">Phone <i>*<\/i><\/label>\n              <input id=\"p5Ph\" type=\"tel\" placeholder=\"Contact number\" autocomplete=\"tel\">\n            <\/div>\n            <div class=\"p5-fd\">\n              <label class=\"p5-lbl\" for=\"p5Em\">Email<\/label>\n              <input id=\"p5Em\" type=\"email\" placeholder=\"name@company.com\" autocomplete=\"email\">\n            <\/div>\n          <\/div>\n\n          <div class=\"p5-row\">\n            <div class=\"p5-fd\">\n              <label class=\"p5-lbl\" for=\"p5Sv\">Service <i>*<\/i><\/label>\n              <select id=\"p5Sv\">\n                <option value=\"\">Select a service<\/option>\n                <option>Line Production<\/option>\n                <option>Video Production<\/option>\n                <option>Corporate Video<\/option>\n                <option>Explainer Video<\/option>\n                <option>Micro Drama<\/option>\n                <option>Photography<\/option>\n                <option>Not sure \/ Multiple<\/option>\n              <\/select>\n            <\/div>\n            <div class=\"p5-fd\">\n              <label class=\"p5-lbl\" for=\"p5Bd\">Budget range<\/label>\n              <select id=\"p5Bd\">\n                <option value=\"\">Select a range<\/option>\n                <option>Under &#8377;1 Lakh<\/option>\n                <option>&#8377;1 &ndash; 3 Lakh<\/option>\n                <option>&#8377;3 &ndash; 10 Lakh<\/option>\n                <option>&#8377;10 Lakh +<\/option>\n                <option>Not decided yet<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n\n          <div class=\"p5-row\">\n            <div class=\"p5-fd p5-fd--full\">\n              <label class=\"p5-lbl\" for=\"p5Ms\">Project brief<\/label>\n              <textarea id=\"p5Ms\" placeholder=\"What you want made, the deadline, the shoot location...\"><\/textarea>\n            <\/div>\n          <\/div>\n\n          <div class=\"p5-err\" id=\"p5Err\"><\/div>\n\n          <button class=\"p5-send\" id=\"p5Send\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-1.6-.8-2.7-1.5-3.8-3.4-.3-.5.3-.5.8-1.5.1-.2 0-.4 0-.5s-.7-1.6-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5 1.9.8 2.6.9 3.5.7.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3.1.8.8-3-.2-.3A8.2 8.2 0 1 1 12 20.2z\"\/><\/svg>\n            <span>WhatsApp the Studio<\/span>\n          <\/button>\n\n          <p class=\"p5-alt\">Or <a href=\"mailto:mifaproductions@gmail.com\">email us instead<\/a><\/p>\n        <\/div>\n      <\/div>\n\n      <!-- ---------------- CALL SHEET + MAP ---------------- -->\n      <div>\n        <div class=\"p5-box p5-rv\" id=\"p5Sheet\">\n          <div class=\"p5-bar\">\n            <span><b>Call Sheet<\/b> &middot; Contact<\/span>\n            <span>Mon &ndash; Sat<\/span>\n          <\/div>\n          <div class=\"p5-body\">\n\n            <div class=\"p5-cs\">\n              <div class=\"p5-cs__k\">Studio Office<\/div>\n              <div class=\"p5-cs__v\">\n                A-27K, Sector 16<br>Noida, Uttar Pradesh &ndash; 201301\n                <small>Planning, meetings &amp; pre-production<\/small>\n                <a class=\"p5-pin\" href=\"https:\/\/www.google.com\/maps\/search\/?api=1&#038;query=A-27K%2C%20Sector%2016%2C%20Noida%2C%20201301\" target=\"_blank\" rel=\"noopener\">\n                  <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z\"\/><circle cx=\"12\" cy=\"10\" r=\"2.6\"\/><\/svg>\n                  Get directions\n                <\/a>\n              <\/div>\n            <\/div>\n\n            <div class=\"p5-cs\">\n              <div class=\"p5-cs__k\">Registered Office<\/div>\n              <div class=\"p5-cs__v\">\n                A-32, Second Floor, Mayur Vihar Phase-1<br>New Delhi &ndash; 110091\n                <small>Accounts &amp; documentation<\/small>\n              <\/div>\n            <\/div>\n\n            <div class=\"p5-cs\">\n              <div class=\"p5-cs__k\">Direct Line<\/div>\n              <div class=\"p5-cs__v\">\n                <a href=\"tel:+918527121545\">+91 85271 21545<\/a>\n                <small>Call or WhatsApp<\/small>\n              <\/div>\n            <\/div>\n\n            <div class=\"p5-cs\">\n              <div class=\"p5-cs__k\">Email<\/div>\n              <div class=\"p5-cs__v\"><a href=\"mailto:mifaproductions@gmail.com\">mifaproductions@gmail.com<\/a><\/div>\n            <\/div>\n\n            <div class=\"p5-cs\">\n              <div class=\"p5-cs__k\">Follow<\/div>\n              <div class=\"p5-cs__v\">\n                <div class=\"p5-soc\">\n                  <a href=\"https:\/\/www.instagram.com\/mifaproduction\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.1 0-3.5 0-4.7.1-1.1.1-1.7.2-2.1.4-.5.2-.9.4-1.2.8-.4.3-.6.7-.8 1.2-.2.4-.3 1-.4 2.1C2.7 9.8 2.7 10.2 2.7 12s0 2.2.1 3.4c.1 1.1.2 1.7.4 2.1.2.5.4.9.8 1.2.3.4.7.6 1.2.8.4.2 1 .3 2.1.4 1.2.1 1.6.1 4.7.1s3.5 0 4.7-.1c1.1-.1 1.7-.2 2.1-.4.5-.2.9-.4 1.2-.8.4-.3.6-.7.8-1.2.2-.4.3-1 .4-2.1.1-1.2.1-1.6.1-3.4s0-2.2-.1-3.4c-.1-1.1-.2-1.7-.4-2.1-.2-.5-.4-.9-.8-1.2-.3-.4-.7-.6-1.2-.8-.4-.2-1-.3-2.1-.4-1.2-.1-1.6-.1-4.7-.1zm0 3.1a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 8.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4zm6.4-8.4a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z\"\/><\/svg>\n                  <\/a>\n                  <a href=\"https:\/\/www.facebook.com\/mifaproductions\" target=\"_blank\" rel=\"noopener\" aria-label=\"Facebook\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.7l-.4 2.9h-2.3v7A10 10 0 0 0 22 12z\"\/><\/svg>\n                  <\/a>\n                  <a href=\"https:\/\/www.linkedin.com\/company\/mifaproductions\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"LinkedIn\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0-.02-5zM3 9.5h4V21H3V9.5zm6.5 0h3.8v1.6h.1c.5-1 1.8-2 3.7-2 4 0 4.7 2.5 4.7 5.8V21h-4v-5.3c0-1.3 0-2.9-1.8-2.9s-2.1 1.4-2.1 2.8V21h-4V9.5z\"\/><\/svg>\n                  <\/a>\n                  <a href=\"https:\/\/www.threads.com\/@mifaproduction\" target=\"_blank\" rel=\"noopener\" aria-label=\"Threads\">\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M12.2 22h-.02c-3.05-.02-5.4-1.04-6.98-3.02C3.78 17.2 3.05 14.77 3 12v-.02c.05-2.77.78-5.2 2.2-6.96C6.78 3.04 9.14 2.02 12.18 2h.02c2.33.02 4.28.62 5.8 1.79 1.43 1.1 2.43 2.66 2.98 4.65l-1.87.52c-.94-3.4-3.34-5.13-6.92-5.16-2.43.02-4.27.79-5.47 2.28C5.6 7.46 5.03 9.5 5 12c.02 2.5.6 4.53 1.72 5.92 1.2 1.49 3.04 2.26 5.47 2.28 2.19-.02 3.64-.53 4.85-1.71 1.37-1.36 1.35-3.03 1.11-4.05-.14-.6-.4-1.1-.76-1.5-.09 1.32-.5 2.39-1.22 3.19-.96 1.06-2.32 1.64-3.94 1.68-1.24.03-2.42-.27-3.35-.85-1.09-.68-1.73-1.72-1.8-2.93-.06-1.18.4-2.26 1.32-3.05.87-.75 2.08-1.19 3.52-1.27 1.06-.06 2.05.01 2.95.2-.12-.72-.36-1.3-.72-1.72-.5-.58-1.27-.88-2.28-.88h-.03c-.82 0-1.93.23-2.64 1.29L7.92 7.52c.95-1.41 2.5-2.19 4.48-2.19h.04c3.3.02 5.27 2.05 5.47 5.58.11.05.23.1.34.15 1.54.73 2.67 1.83 3.27 3.19.83 1.9.9 5-1.6 7.47C18.03 21.28 16.1 22 12.2 22zm-.86-9.9c-.24 0-.48.01-.72.02-1.82.1-2.95.94-2.89 2.13.07 1.25 1.45 1.83 2.78 1.76 1.22-.07 2.81-.54 3.08-3.71-.68-.15-1.42-.21-2.25-.2z\"\/><\/svg>\n                  <\/a>\n                <\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n        <\/div>\n\n        <div class=\"p5-map p5-rv\">\n          <iframe\n            src=\"https:\/\/www.google.com\/maps?q=A-27K,+Sector+16,+Noida,+Uttar+Pradesh+201301&#038;output=embed\"\n            loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"\n            title=\"Mifa Productions \u2014 Noida office location\"><\/iframe>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- ============================ FOOTER ============================ -->\n    <footer class=\"p5-foot\">\n\n      <div class=\"p5-kin\">\n        <div class=\"p5-kin__t\" id=\"p5Kin\">\n          <span>Line Production<\/span><span>Video Production<\/span>\n          <span>Corporate Films<\/span><span>Photography<\/span>\n          <span>Micro Drama<\/span><span>Commercials<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"p5-fgrid\">\n        <div>\n          <div class=\"p5-brand\">\n            <span class=\"p5-mark\">\n              <img decoding=\"async\" src=\"https:\/\/mifaproduction.com\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-25-at-8.47.21-PM.jpeg\" alt=\"\">\n            <\/span>\n            <span class=\"p5-word\"><b>MIFA<\/b><i>PRODUCTIONS<\/i><\/span>\n          <\/div>\n          <p class=\"p5-fp\">\n            Whether you need line production, location support, crew &amp; equipment, or complete\n            video production, tell us what you have in mind. We'll take care of the production\n            from planning to execution.\n          <\/p>\n        <\/div>\n\n        <div class=\"p5-col\">\n          <div class=\"p5-col__h\">Company<\/div>\n          <ul>\n            <li><a href=\"https:\/\/mifaproduction.com\/index.php\/home\/\">Home<\/a><\/li>\n            <li><a href=\"https:\/\/mifaproduction.com\/index.php\/studio\/\">Studio<\/a><\/li>\n            <li><a href=\"https:\/\/mifaproduction.com\/index.php\/work\/\">Work<\/a><\/li>\n            <li><a href=\"https:\/\/mifaproduction.com\/index.php\/client\/\">Clients<\/a><\/li>\n            <li><a href=\"https:\/\/mifaproduction.com\/index.php\/blog\/\">Blog<\/a><\/li>\n            <li><a href=\"https:\/\/mifaproduction.com\/index.php\/contact\/\">Contact<\/a><\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"p5-col\">\n          <div class=\"p5-col__h\">Services<\/div>\n          <ul>\n            <li><a href=\"https:\/\/mifaproduction.com\/index.php\/services\/\">Line Production<\/a><\/li>\n            <li><a href=\"https:\/\/mifaproduction.com\/index.php\/services\/\">Video Production<\/a><\/li>\n            <li><a href=\"https:\/\/mifaproduction.com\/index.php\/services\/\">Corporate Videos<\/a><\/li>\n            <li><a href=\"https:\/\/mifaproduction.com\/index.php\/services\/\">Explainer Videos<\/a><\/li>\n            <li><a href=\"https:\/\/mifaproduction.com\/index.php\/services\/\">Micro Drama<\/a><\/li>\n            <li><a href=\"https:\/\/mifaproduction.com\/index.php\/services\/\">Photography<\/a><\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"p5-col\">\n          <div class=\"p5-col__h\">Reach Us<\/div>\n          <ul>\n            <li><a href=\"tel:+918527121545\">+91 85271 21545<\/a><\/li>\n            <li><a href=\"mailto:mifaproductions@gmail.com\">mifaproductions@gmail.com<\/a><\/li>\n            <li><a href=\"https:\/\/wa.me\/918527121545\" target=\"_blank\" rel=\"noopener\">WhatsApp<\/a><\/li>\n            <li><a href=\"https:\/\/www.instagram.com\/mifaproduction\" target=\"_blank\" rel=\"noopener\">Instagram<\/a><\/li>\n            <li><a href=\"https:\/\/www.linkedin.com\/company\/mifaproductions\/\" target=\"_blank\" rel=\"noopener\">LinkedIn<\/a><\/li>\n            <li><a href=\"https:\/\/www.facebook.com\/mifaproductions\" target=\"_blank\" rel=\"noopener\">Facebook<\/a><\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <div class=\"p5-bottom\">\n        <span>&copy; <span id=\"p5Yr\">2026<\/span> Mifa Productions. All rights reserved.<\/span>\n        <!-- Add GSTIN \/ CIN here once the client provides them -->\n        <span>Noida &middot; New Delhi &middot; Pan-India<\/span>\n      <\/div>\n    <\/footer>\n\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var root = (document.currentScript && document.currentScript.closest)\n    ? document.currentScript.closest('.mifa-p5')\n    : document.querySelector('.mifa-p5');\n  if(!root) return;\n  var q = function(s){ return root.querySelector(s); };\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* ---------------- reveal ---------------- *\/\n  var items = root.querySelectorAll('.p5-rv');\n  if(!reduce){\n    root.classList.add('p5-anim');\n    var show = function(el){ el.classList.add('p5-on'); };\n    if('IntersectionObserver' in window){\n      var io = new IntersectionObserver(function(es){\n        es.forEach(function(e){ if(e.isIntersecting){ show(e.target); io.unobserve(e.target); } });\n      }, {threshold:.1, rootMargin:'0px 0px -6% 0px'});\n      items.forEach(function(el){ io.observe(el); });\n    } else { items.forEach(show); }\n    setTimeout(function(){ items.forEach(show); }, 3200);\n  }\n\n  \/* ---------------- year ---------------- *\/\n  q('#p5Yr').textContent = new Date().getFullYear();\n\n  \/* ---------------- kinetic marquee ---------------- *\/\n  var kin = q('#p5Kin');\n  if(kin) kin.innerHTML += kin.innerHTML;\n\n  \/* ---------------- 3D tilt on panels ---------------- *\/\n  if(!reduce && window.matchMedia('(hover:hover) and (min-width:1081px)').matches){\n    [q('#p5Form'), q('#p5Sheet')].forEach(function(el){\n      if(!el) return;\n      el.addEventListener('mousemove', function(ev){\n        if(ev.target.closest('input, select, textarea, button, a')){ el.style.transform = ''; return; }\n        var b = el.getBoundingClientRect(),\n            px = (ev.clientX - b.left) \/ b.width,\n            py = (ev.clientY - b.top)  \/ b.height;\n        el.style.transform =\n          'rotateY(' + ((px - .5) * 5) + 'deg) rotateX(' + ((.5 - py) * 5) + 'deg) translateZ(10px)';\n      });\n      el.addEventListener('mouseleave', function(){ el.style.transform = ''; });\n    });\n  }\n\n  \/* ---------------- WhatsApp enquiry ---------------- *\/\n  var F = {\n    name:q('#p5Name'), co:q('#p5Co'), ph:q('#p5Ph'),\n    em:q('#p5Em'), sv:q('#p5Sv'), bd:q('#p5Bd'), ms:q('#p5Ms')\n  };\n  var err = q('#p5Err');\n\n  function mark(el, bad){\n    var f = el.closest('.p5-fd');\n    if(f) f.classList.toggle('bad', bad);\n  }\n\n  function send(){\n    var miss = [];\n    [['name','Name'],['ph','Phone'],['sv','Service']].forEach(function(p){\n      var el = F[p[0]], empty = !el.value.trim();\n      mark(el, empty);\n      if(empty) miss.push(p[1]);\n    });\n\n    if(miss.length){\n      err.textContent = 'Please fill in: ' + miss.join(', ');\n      err.classList.add('on');\n      return;\n    }\n    err.classList.remove('on');\n\n    var L = ['*New enquiry from website*', ''];\n    L.push('Name: ' + F.name.value.trim());\n    if(F.co.value.trim()) L.push('Company: ' + F.co.value.trim());\n    L.push('Phone: ' + F.ph.value.trim());\n    if(F.em.value.trim()) L.push('Email: ' + F.em.value.trim());\n    L.push('Service: ' + F.sv.value);\n    if(F.bd.value) L.push('Budget: ' + F.bd.value);\n    if(F.ms.value.trim()){ L.push(''); L.push('Brief: ' + F.ms.value.trim()); }\n\n    window.open('https:\/\/wa.me\/918527121545?text=' + encodeURIComponent(L.join('\\n')), '_blank');\n  }\n\n  q('#p5Send').addEventListener('click', send);\n\n  Object.keys(F).forEach(function(k){\n    if(k === 'ms') return;\n    F[k].addEventListener('keydown', function(e){\n      if(e.key === 'Enter'){ e.preventDefault(); send(); }\n    });\n    F[k].addEventListener('input',  function(){ mark(F[k], false); });\n    F[k].addEventListener('change', function(){ mark(F[k], false); });\n  });\n})();\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Preparing the call sheet&hellip; MIFAPRODUCTIONS Best Line Production &amp; Production Company in Delhi NCR TVC \/ Digital Film8+ Years15+ Services [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-331","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/pages\/331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/comments?post=331"}],"version-history":[{"count":16,"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/pages\/331\/revisions"}],"predecessor-version":[{"id":386,"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/pages\/331\/revisions\/386"}],"wp:attachment":[{"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/media?parent=331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}