{"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-12T16:39:15","modified_gmt":"2026-08-12T16:39:15","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>6+ 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>6+ 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 &middot;<br>Digital Film<\/b><i>Formats<\/i><\/div>\n          <div class=\"p1-face p1-f4\"><b>6+<\/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=\"6\" 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\n     3D SIGNATURE : coverflow production pipeline (preserve-3d)\n\n     v2 \u2014 NAYA KYA HAI\n     \u00b7 Headings word-by-word niche se upar aate hain (mask reveal)\n     \u00b7 Icons SVG me \"draw\" hote hain \u2014 line khinchti hui banti hai\n     \u00b7 Active dot me progress fill \u2014 pata chalta hai kab change hoga\n     \u00b7 Coverflow me swipe (mobile) + arrow keys (desktop)\n     \u00b7 Active card par shine sweep + andar ka content stagger\n     \u00b7 Tiles reveal par stagger + shine\n     \u00b7 Scroll parallax on background orb\n     \u00b7 Magnetic CTA button\n\n     v2 \u2014 2 BUGS FIXED\n     \u00b7 .p2-card__t \/ __d inline span the \u2014 display:block nahi tha,\n       isliye title aur text ek hi line me chipak rahe the.\n     \u00b7 .p2-tile par overflow:hidden + preserve-3d saath the. CSS\n       spec ke hisaab se overflow:hidden 3D ko flat kar deta hai,\n       toh icon ka translateZ kaam hi nahi kar raha tha. Ab clip\n       ::before par border-radius se hota hai.\n\n     Sab kuch .mifa-p2 me scoped.\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  \/* Theme narrow ho to 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 : default visible, JS opt-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;      \/* shadow + descender ko jagah *\/\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 jab card active bane *\/\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: ye inline span the \u2014 ab block hain *\/\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\/* andar ka content stagger jab active bane *\/\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 hata diya \u2014 wo preserve-3d ko todta tha.\n   Clip ab ::before \/ ::after par border-radius:inherit se hota hai. *\/\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 sirf mouse walo ke liye ------------- *\/\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\">From concept<br>to <em>final delivery.<\/em><\/h2>\n      <\/div>\n      <p class=\"p2-lede p2-rv\">\n        Our team manages <b>every stage of production<\/b> with creativity, precision and\n        professionalism. A television commercial, a product launch, a CSR initiative or\n        digital content &mdash; Mifa Productions delivers visuals that leave a lasting impact.\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 Advantage<\/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\">Two Decades of Mastery<\/h3>\n        <p class=\"p2-tile__p\">Over twenty 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  \/* mobile\/desktop switch par inline transform saaf *\/\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\n     3D SIGNATURE : real rotateY flip cards (front \u2192 scope list)\n     Alag \"Custom HTML\" block me paste karo.\n     Sab kuch .mifa-p3 me scoped.\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  \/* Theme narrow ho to 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\">Reliable production support is the backbone of every successful shoot. We manage every logistical aspect so directors and agencies can focus on creativity.<\/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\">Brief bhej dijiye &mdash; hum scope aur budget suggest kar denge.<\/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     3D SIGNATURE : coverflow video carousel (preserve-3d)\n     Alag \"Custom HTML\" block me paste karo.\n\n     >>> VIDEO KAISE LAGAYE <<<\n     Har frame par  data-yt=\"\"  hai. Usme sirf YouTube video ID\n     daalo (poora URL nahi) \u2014 thumbnail apne aap aa jayegi aur\n     click par video chalega.   Example: data-yt=\"dQw4w9WgXcQ\"\n     Khaali chhodo to designed title-card placeholder dikhta hai.\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  \/* Theme narrow ho to 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}\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(34px,5vh,58px);\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\/* ==================== SHOWREEL (3D tilt) ==================== *\/\n.mifa-p4 .p4-reelw{ perspective:1500px; margin-bottom:clamp(50px,8vh,88px); }\n.mifa-p4 .p4-reel{\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 50px 110px rgba(0,0,0,.75);\n  transform-style:preserve-3d; will-change:transform;\n  transition:transform .5s var(--e), border-color .5s, box-shadow .5s;\n}\n.mifa-p4 .p4-reel:hover{ border-color:rgba(255,59,84,.4); }\n.mifa-p4 .p4-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-p4 .p4-bar b{ color:var(--red-hi); font-weight:400; }\n\n\/* ---- shared video 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; cursor:pointer;\n}\n.mifa-p4 .p4-frame::after{\n  content:''; position:absolute; inset:0; pointer-events:none; opacity:.3;\n  background:repeating-linear-gradient(180deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px);\n}\n.mifa-p4 .p4-frame.vid{ background-color:#000; }\n.mifa-p4 .p4-frame.vid .p4-tt{ opacity:0; }\n.mifa-p4 .p4-scrim{\n  position:absolute; inset:0; transition:background .5s;\n  background:linear-gradient(180deg, rgba(7,7,10,.14) 0%, rgba(7,7,10,.74) 100%);\n}\n.mifa-p4 .p4-frame:hover .p4-scrim{ background:linear-gradient(180deg, rgba(7,7,10,.04) 0%, rgba(7,7,10,.6) 100%); }\n.mifa-p4 .p4-tt{\n  position:absolute; inset:0; z-index:2; padding:20px;\n  display:grid; place-content:center; place-items:center; text-align:center;\n  transition:opacity .5s;\n}\n.mifa-p4 .p4-tt b{\n  font-size:clamp(24px,3.6vw,58px); font-weight:900; letter-spacing:-.04em;\n  line-height:1.04; color:var(--ink);\n  text-shadow:1px 1px 0 rgba(122,12,24,.8), 2px 2px 0 rgba(122,12,24,.6),\n              3px 3px 0 rgba(122,12,24,.4), 0 16px 34px rgba(0,0,0,.8);\n}\n.mifa-p4 .p4-tt i{\n  display:block; margin-top:12px; font-style:normal; font-family:var(--m);\n  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--red-hi);\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:88px; height:88px; border-radius:50%;\n  background:var(--red); box-shadow:0 16px 46px rgba(196,22,43,.6);\n  transition:transform .55s var(--e);\n}\n.mifa-p4 .p4-play svg{ width:27px; height:27px; fill:#fff; margin-left:4px; }\n.mifa-p4 .p4-play::before,.mifa-p4 .p4-play::after{\n  content:''; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--red-hi);\n  animation:p4Ping 2.6s ease-out infinite;\n}\n.mifa-p4 .p4-play::after{ animation-delay:1.3s; }\n@keyframes p4Ping{ 0%{transform:scale(1); opacity:.75} 100%{transform:scale(2.1); opacity:0} }\n.mifa-p4 .p4-frame:hover .p4-play{ transform:translate(-50%,-50%) scale(1.12); }\n.mifa-p4 .p4-tick{ position:absolute; z-index:3; width:22px; height:22px; border:2px solid rgba(242,240,238,.4); }\n.mifa-p4 .p4-tick--tl{ top:16px; left:16px; border-right:0; border-bottom:0 }\n.mifa-p4 .p4-tick--tr{ top:16px; right:16px; border-left:0; border-bottom:0 }\n.mifa-p4 .p4-tick--bl{ bottom:16px; left:16px; border-right:0; border-top:0 }\n.mifa-p4 .p4-tick--br{ bottom:16px; right:16px; border-left:0; border-top:0 }\n.mifa-p4 .p4-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:6; }\n\n\/* ============ 3D SIGNATURE : WORK COVERFLOW ============ *\/\n.mifa-p4 .p4-sub{\n  display:flex; align-items:center; gap:16px; margin-bottom:26px;\n  font-family:var(--m); font-size:10.5px; letter-spacing:.18em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-p4 .p4-sub::after{ content:''; flex:1; height:1px; background:var(--line); }\n\n.mifa-p4 .p4-rail{\n  position:relative; height:clamp(240px,32vw,400px);\n  perspective:1600px; perspective-origin:50% 50%;\n}\n.mifa-p4 .p4-rail__in{ position:absolute; inset:0; transform-style:preserve-3d; }\n.mifa-p4 .p4-slide{\n  position:absolute; top:50%; left:50%; width:min(86vw,620px);\n  border:1px solid var(--line); border-radius:15px; overflow:hidden;\n  background:var(--bg-2); box-shadow:0 44px 100px rgba(0,0,0,.78);\n  transform-style:preserve-3d; transition:transform 1s var(--e), opacity .8s var(--e), border-color .5s;\n}\n.mifa-p4 .p4-slide.on{ border-color:rgba(255,59,84,.5); box-shadow:0 54px 120px rgba(0,0,0,.85), 0 0 72px rgba(196,22,43,.26); }\n.mifa-p4 .p4-slide .p4-play{ width:62px; height:62px; }\n.mifa-p4 .p4-slide .p4-play svg{ width:20px; height:20px; margin-left:3px; }\n.mifa-p4 .p4-slide .p4-tick{ width:15px; height:15px; }\n.mifa-p4 .p4-cap{\n  display:flex; align-items:center; justify-content:space-between; gap:12px;\n  padding:15px 20px; border-top:1px solid var(--line); background:rgba(10,10,14,.94);\n}\n.mifa-p4 .p4-cap b{ font-size:14.5px; font-weight:700; color:var(--ink); }\n.mifa-p4 .p4-cap i{\n  font-style:normal; font-family:var(--m); font-size:9.5px;\n  letter-spacing:.16em; text-transform:uppercase; color:var(--red-hi);\n}\n\n.mifa-p4 .p4-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:30px; }\n.mifa-p4 .p4-arw{\n  display:grid; place-items:center; width:52px; height:52px; border-radius:50%;\n  border:1px solid var(--line); background:rgba(242,240,238,.03);\n  transition:background .4s, border-color .4s, transform .45s var(--e);\n}\n.mifa-p4 .p4-arw svg{ width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:1.8; }\n.mifa-p4 .p4-arw:hover{ background:var(--red); border-color:var(--red); transform:translateY(-3px); }\n.mifa-p4 .p4-dots{ display:flex; gap:8px; }\n.mifa-p4 .p4-dot{ width:24px; height:4px; border-radius:99px; background:rgba(242,240,238,.16); transition:background .45s, width .45s var(--e); }\n.mifa-p4 .p4-dot.on{ width:44px; background:var(--red-hi); box-shadow:0 0 14px rgba(255,59,84,.6); }\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 logos aate hi style=\"display:none\" hata dena *\/\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\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1080px){\n  .mifa-p4 .p4-head{ grid-template-columns:1fr; align-items:start; }\n  .mifa-p4 .p4-types{ grid-template-columns:repeat(3,1fr); }\n  .mifa-p4 .p4-play{ width:68px; height:68px; }\n  .mifa-p4 .p4-play svg{ width:22px; height:22px; }\n}\n@media (max-width:680px){\n  .mifa-p4 .p4-types{ grid-template-columns:repeat(2,1fr); }\n  .mifa-p4 .p4-bar{ font-size:9px; letter-spacing:.1em; }\n  .mifa-p4 .p4-bar span:nth-child(3){ display:none; }\n  .mifa-p4 .p4-tick{ width:14px; height:14px; }\n  .mifa-p4 .p4-arw{ width:46px; height:46px; }\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        Commercials, corporate films, CSR documentation, animation and product content &mdash;\n        produced end to end, across India.\n      <\/p>\n    <\/div>\n\n    <!-- ---------------- SHOWREEL ---------------- -->\n    <div class=\"p4-reelw p4-rv\">\n      <div class=\"p4-reel\" id=\"p4Reel\">\n        <div class=\"p4-bar\">\n          <span><b>Showreel<\/b> &middot; Mifa Productions<\/span>\n          <span>16 : 9<\/span>\n          <span>Play to view<\/span>\n        <\/div>\n        <div class=\"p4-frame\" data-yt=\"\" role=\"button\" tabindex=\"0\" aria-label=\"Play Mifa Productions showreel\">\n          <span class=\"p4-scrim\"><\/span>\n          <span class=\"p4-tick p4-tick--tl\"><\/span><span class=\"p4-tick p4-tick--tr\"><\/span>\n          <span class=\"p4-tick p4-tick--bl\"><\/span><span class=\"p4-tick p4-tick--br\"><\/span>\n          <span class=\"p4-tt\"><b>Mifa Productions<\/b><i>Showreel<\/i><\/span>\n          <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- ---------------- 3D COVERFLOW ---------------- -->\n    <div class=\"p4-sub p4-rv\">Categories<\/div>\n\n    <div class=\"p4-rv\">\n      <div class=\"p4-rail\" id=\"p4Rail\">\n        <div class=\"p4-rail__in\" id=\"p4RailIn\">\n\n          <div class=\"p4-slide\" data-i=\"0\">\n            <div class=\"p4-frame\" data-yt=\"\" role=\"button\" tabindex=\"0\" aria-label=\"Play TVC and DVC reel\">\n              <span class=\"p4-scrim\"><\/span>\n              <span class=\"p4-tick p4-tick--tl\"><\/span><span class=\"p4-tick p4-tick--br\"><\/span>\n              <span class=\"p4-tt\"><b>TVC \/ DVC<\/b><\/span>\n              <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n            <\/div>\n            <div class=\"p4-cap\"><b>TVC \/ DVC<\/b><i>Commercial<\/i><\/div>\n          <\/div>\n\n          <div class=\"p4-slide\" data-i=\"1\">\n            <div class=\"p4-frame\" data-yt=\"\" role=\"button\" tabindex=\"0\" aria-label=\"Play corporate film reel\">\n              <span class=\"p4-scrim\"><\/span>\n              <span class=\"p4-tick p4-tick--tl\"><\/span><span class=\"p4-tick p4-tick--br\"><\/span>\n              <span class=\"p4-tt\"><b>Corporate Film<\/b><\/span>\n              <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n            <\/div>\n            <div class=\"p4-cap\"><b>Corporate Film<\/b><i>Business<\/i><\/div>\n          <\/div>\n\n          <div class=\"p4-slide\" data-i=\"2\">\n            <div class=\"p4-frame\" data-yt=\"\" role=\"button\" tabindex=\"0\" aria-label=\"Play CSR film reel\">\n              <span class=\"p4-scrim\"><\/span>\n              <span class=\"p4-tick p4-tick--tl\"><\/span><span class=\"p4-tick p4-tick--br\"><\/span>\n              <span class=\"p4-tt\"><b>CSR Film<\/b><\/span>\n              <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n            <\/div>\n            <div class=\"p4-cap\"><b>CSR Film<\/b><i>Impact<\/i><\/div>\n          <\/div>\n\n          <div class=\"p4-slide\" data-i=\"3\">\n            <div class=\"p4-frame\" data-yt=\"\" role=\"button\" tabindex=\"0\" aria-label=\"Play animation video reel\">\n              <span class=\"p4-scrim\"><\/span>\n              <span class=\"p4-tick p4-tick--tl\"><\/span><span class=\"p4-tick p4-tick--br\"><\/span>\n              <span class=\"p4-tt\"><b>Animation<\/b><\/span>\n              <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n            <\/div>\n            <div class=\"p4-cap\"><b>Animation Video<\/b><i>Motion<\/i><\/div>\n          <\/div>\n\n          <div class=\"p4-slide\" data-i=\"4\">\n            <div class=\"p4-frame\" data-yt=\"\" role=\"button\" tabindex=\"0\" aria-label=\"Play testimonial video reel\">\n              <span class=\"p4-scrim\"><\/span>\n              <span class=\"p4-tick p4-tick--tl\"><\/span><span class=\"p4-tick p4-tick--br\"><\/span>\n              <span class=\"p4-tt\"><b>Testimonial<\/b><\/span>\n              <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n            <\/div>\n            <div class=\"p4-cap\"><b>Testimonial Video<\/b><i>Interview<\/i><\/div>\n          <\/div>\n\n          <div class=\"p4-slide\" data-i=\"5\">\n            <div class=\"p4-frame\" data-yt=\"\" role=\"button\" tabindex=\"0\" aria-label=\"Play product shoot video reel\">\n              <span class=\"p4-scrim\"><\/span>\n              <span class=\"p4-tick p4-tick--tl\"><\/span><span class=\"p4-tick p4-tick--br\"><\/span>\n              <span class=\"p4-tt\"><b>Product Shoot<\/b><\/span>\n              <span class=\"p4-play\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n            <\/div>\n            <div class=\"p4-cap\"><b>Product Shoot Video<\/b><i>Product<\/i><\/div>\n          <\/div>\n\n        <\/div>\n      <\/div>\n\n      <div class=\"p4-nav\">\n        <button class=\"p4-arw\" id=\"p4Prev\" aria-label=\"Previous\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M19 12H5M11 6l-6 6 6 6\"\/><\/svg>\n        <\/button>\n        <div class=\"p4-dots\" id=\"p4Dots\"><\/div>\n        <button class=\"p4-arw\" id=\"p4Next\" aria-label=\"Next\">\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    <!-- ---------------- 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\">Trusted across <em>sectors.<\/em><\/h2>\n        <\/div>\n        <p class=\"p4-lede p4-rv\">\n          Mifa Productions has collaborated with businesses, agencies, startups, NGOs and\n          government organizations to create impactful visual content.\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 logo files aate hi style=\"display:none\" hata dena -->\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  \/* ---------------- video frames ---------------- *\/\n  root.querySelectorAll('.p4-frame').forEach(function(frame){\n    var id = (frame.dataset.yt || '').trim();\n\n    if(id){\n      frame.classList.add('vid');\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(){ frame.classList.remove('vid'); };\n      probe.src = 'https:\/\/img.youtube.com\/vi\/' + id + '\/maxresdefault.jpg';\n    } else {\n      frame.style.cursor = 'default';\n    }\n\n    function play(){\n      if(!id || frame.querySelector('iframe')) return;\n      var f = document.createElement('iframe');\n      f.src = 'https:\/\/www.youtube.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    }\n    frame.addEventListener('click', play);\n    frame.addEventListener('keydown', function(e){\n      if(e.key === 'Enter' || e.key === ' '){ e.preventDefault(); play(); }\n    });\n  });\n\n  \/* ---------------- 3D coverflow ---------------- *\/\n  var slides = Array.prototype.slice.call(root.querySelectorAll('.p4-slide')),\n      dotsW  = root.querySelector('#p4Dots'),\n      rail   = root.querySelector('#p4Rail'),\n      idx = 0, timer = null, dots = [];\n\n  slides.forEach(function(_, i){\n    var d = document.createElement('span');\n    d.className = 'p4-dot';\n    d.addEventListener('click', function(){ set(i); play(); });\n    dotsW.appendChild(d); dots.push(d);\n  });\n\n  function set(i){\n    idx = (i + slides.length) % slides.length;\n    slides.forEach(function(s, n){\n      var o = n - idx, a = Math.abs(o);\n      s.classList.toggle('on', o === 0);\n      s.style.transform =\n        'translate(-50%,-50%) translateX(' + (o * 54) + '%)' +\n        ' translateZ(' + (o === 0 ? 0 : -230 - (a - 1) * 110) + 'px)' +\n        ' rotateY(' + (o * -32) + 'deg)';\n      s.style.opacity = a > 2 ? 0 : (o === 0 ? 1 : (a === 1 ? .5 : .18));\n      s.style.zIndex  = String(20 - a);\n      s.style.pointerEvents = o === 0 ? 'auto' : (a > 2 ? 'none' : 'auto');\n    });\n    dots.forEach(function(d, n){ d.classList.toggle('on', n === idx); });\n  }\n\n  function play(){ if(reduce) return; stop(); timer = setInterval(function(){ set(idx + 1); }, 4200); }\n  function stop(){ if(timer){ clearInterval(timer); timer = null; } }\n\n  slides.forEach(function(s){\n    s.addEventListener('click', function(){\n      if(+s.dataset.i !== idx){ set(+s.dataset.i); play(); }\n    }, true);\n  });\n  root.querySelector('#p4Prev').addEventListener('click', function(){ set(idx - 1); play(); });\n  root.querySelector('#p4Next').addEventListener('click', function(){ set(idx + 1); play(); });\n  rail.addEventListener('mouseenter', stop);\n  rail.addEventListener('mouseleave', play);\n\n  set(0);\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  \/* ---------------- 3D tilt: showreel + client tiles ---------------- *\/\n  if(!reduce && window.matchMedia('(hover:hover) and (min-width:1041px)').matches){\n    var tilt = function(el, amt){\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) * amt) + 'deg) rotateX(' + ((.5 - py) * amt) + 'deg) translateZ(12px)';\n      });\n      el.addEventListener('mouseleave', function(){ el.style.transform = ''; });\n    };\n    var reel = root.querySelector('#p4Reel');\n    if(reel) tilt(reel, 6);\n    root.querySelectorAll('.p4-type').forEach(function(t){ tilt(t, 12); });\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 : 006 CONTACT + FOOTER\n     3D SIGNATURE : tilting glass panels + kinetic footer type\n     Alag \"Custom HTML\" block me paste karo.\n\n     NOTE: form ko backend nahi chahiye \u2014 bhar ke \"Send on\n     WhatsApp\" dabao, saari details ek message me 8527121545\n     par chali jayengi.\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  \/* Theme narrow ho to 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>006<\/b> \/ Contact<\/div>\n        <h2 class=\"p5-h2 p5-rv\">So &mdash; what's<br><em>your idea?<\/em><\/h2>\n      <\/div>\n      <p class=\"p5-lede p5-rv\">\n        Ek brief, ek call &mdash; aur hum scope, timeline aur budget clear kar denge.\n        Delhi NCR mein ya India mein kahin bhi.\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>Enquiry<\/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=\"10-digit 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=\"Kya banwana hai, kab tak chahiye, 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>Send on WhatsApp<\/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\">Unit Base<\/div>\n              <div class=\"p5-cs__v\">\n                A-27K, Sector 16<br>Noida, Uttar Pradesh 201301\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<\/div>\n              <div class=\"p5-cs__v\">\n                A-32, Second Floor, Mayur Vihar Phase-1<br>New Delhi 110091\n                <small>Registered office<\/small>\n              <\/div>\n            <\/div>\n\n            <div class=\"p5-cs\">\n              <div class=\"p5-cs__k\">Phone<\/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            Delhi-based creative production company. Line production, video production and\n            photography &mdash; concept to final delivery, anywhere in India.\n          <\/p>\n        <\/div>\n\n        <div class=\"p5-col\">\n          <div class=\"p5-col__h\">Company<\/div>\n          <ul>\n            <li><a href=\"#home\">Home<\/a><\/li>\n            <li><a href=\"#about\">Studio<\/a><\/li>\n            <li><a href=\"#work\">Work<\/a><\/li>\n            <li><a href=\"#clients\">Clients<\/a><\/li>\n            <li><a href=\"#blog\">Blog<\/a><\/li>\n            <li><a href=\"#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=\"#services\">Line Production<\/a><\/li>\n            <li><a href=\"#services\">Video Production<\/a><\/li>\n            <li><a href=\"#services\">Corporate Videos<\/a><\/li>\n            <li><a href=\"#services\">Explainer Videos<\/a><\/li>\n            <li><a href=\"#services\">Micro Drama<\/a><\/li>\n            <li><a href=\"#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        <!-- GSTIN \/ CIN client se milte hi yahan add kar dena -->\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: ' + 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 Film6+ 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":12,"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/pages\/331\/revisions"}],"predecessor-version":[{"id":367,"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/pages\/331\/revisions\/367"}],"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}]}}