{"id":347,"date":"2026-08-10T06:23:19","date_gmt":"2026-08-10T06:23:19","guid":{"rendered":"https:\/\/mifaproduction.com\/?page_id=347"},"modified":"2026-08-10T13:44:31","modified_gmt":"2026-08-10T13:44:31","slug":"studio","status":"publish","type":"page","link":"https:\/\/mifaproduction.com\/index.php\/studio\/","title":{"rendered":"Studio"},"content":{"rendered":"\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 STUDIO PAGE \u00b7 PART 1  (ENGLISH)\n     NAV + MENU OVERLAY + 3D STUDIO HERO (rotating workflow ring)\n\n     Paste the whole thing into a WordPress \"Custom HTML\" block.\n     Everything is scoped inside .mifa-s1 \u2014 no conflict with the\n     home page's .mifa-p1 or the services page's .mifa-v1.\n\n     ------------------------------------------------------------\n     LIVE PAGE LINKS USED IN THIS PART\n       Home      \/index.php\/home\/\n       Studio    \/index.php\/studio\/     <-- current page\n       Services  \/index.php\/services\/\n       Work      \/index.php\/work\/\n       Clients   \/index.php\/client\/\n       Contact   \/index.php\/contact\/\n\n     When the site moves to the final domain, find & replace\n       https:\/\/mifaproduction.com\/index.php\n     with\n       https:\/\/mifaproduction.com\n     ------------------------------------------------------------ -->\n\n<div class=\"mifa-s1\">\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-s1{\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 ring size *\/\n  --ring:clamp(150px,38vw,224px);\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-s1 *,.mifa-s1 *::before,.mifa-s1 *::after{ box-sizing:border-box; }\n.mifa-s1 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-s1 a:hover,.mifa-s1 a:focus{ text-decoration:none !important; }\n.mifa-s1 h1,.mifa-s1 h2,.mifa-s1 h3,.mifa-s1 p,.mifa-s1 ul,.mifa-s1 li{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-s1 ul{ list-style:none !important; }\n.mifa-s1 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-s1 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-s1 button:hover,.mifa-s1 button:focus{ background:none; }\n.mifa-s1 svg{ display:block; }\n.mifa-s1 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\nbody.admin-bar .mifa-s1 .s1-nav{ top:32px; }\n@media (max-width:782px){ body.admin-bar .mifa-s1 .s1-nav{ top:46px; } }\n\n\/* ============================= NAV ============================= *\/\n.mifa-s1 .s1-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-s1 .s1-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-s1 .s1-logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; min-width:0; perspective:500px; }\n.mifa-s1 .s1-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-s1 .s1-mark img{ position:absolute; max-width:none; width:237.5%; height:237.5%; left:-62.2%; top:-54.6%; }\n.mifa-s1 .s1-nav.stuck .s1-mark{ width:34px; height:34px; }\n.mifa-s1 .s1-word{ display:flex; flex-direction:column; line-height:1.08; min-width:0; }\n.mifa-s1 .s1-word b{ font-size:14px; font-weight:800; letter-spacing:.1em; }\n.mifa-s1 .s1-word i{ font-style:normal; font-size:9.5px; font-weight:400; letter-spacing:.2em; color:var(--soft); }\n\n.mifa-s1 .s1-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-s1 .s1-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:s1Blink 1.6s ease-in-out infinite;\n}\n@keyframes s1Blink{ 0%,100%{opacity:1} 50%{opacity:.12} }\n\n.mifa-s1 .s1-right{ display:flex; align-items:center; gap:22px; flex-shrink:0; }\n\n\/* --- desktop inline page links --- *\/\n.mifa-s1 .s1-links{ display:flex; align-items:center; gap:20px; }\n.mifa-s1 .s1-links a{\n  position:relative; font-family:var(--m); font-size:11px; letter-spacing:.14em;\n  text-transform:uppercase; color:var(--soft); padding:4px 0; transition:color .3s;\n}\n.mifa-s1 .s1-links a::after{\n  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;\n  background:var(--red-hi); transform:scaleX(0); transform-origin:right;\n  transition:transform .45s var(--e);\n}\n.mifa-s1 .s1-links a.here{ color:var(--ink); }\n.mifa-s1 .s1-links a.here::after{ transform:scaleX(1); transform-origin:left; }\n\n.mifa-s1 .s1-soc{ display:flex; gap:14px; }\n.mifa-s1 .s1-soc a{ font-family:var(--m); font-size:10.5px; letter-spacing:.14em; color:var(--soft); transition:color .3s; }\n\n.mifa-s1 .s1-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-s1 .s1-menu__t{ transition:color .3s; }\n.mifa-s1 .s1-burg{ display:block !important; position:relative; width:26px; height:12px; flex-shrink:0; }\n.mifa-s1 .s1-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-s1 .s1-burg i:nth-child(1){ top:0 }\n.mifa-s1 .s1-burg i:nth-child(2){ top:10px }\n.mifa-s1 .s1-menu.open .s1-burg i:nth-child(1){ transform:translateY(5px) rotate(45deg) }\n.mifa-s1 .s1-menu.open .s1-burg i:nth-child(2){ transform:translateY(-5px) rotate(-45deg) }\n\n\/* -------------------------- MENU OVERLAY -------------------------- *\/\n.mifa-s1 .s1-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-s1 .s1-ov.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }\n.mifa-s1 .s1-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-s1 .s1-ov.open .s1-ov__l{ opacity:1; transform:none; }\n.mifa-s1 .s1-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-s1 .s1-ov__l.here{ color:var(--red-hi); }\n.mifa-s1 .s1-ov.open .s1-ov__l:nth-of-type(1){ transition-delay:.18s }\n.mifa-s1 .s1-ov.open .s1-ov__l:nth-of-type(2){ transition-delay:.24s }\n.mifa-s1 .s1-ov.open .s1-ov__l:nth-of-type(3){ transition-delay:.30s }\n.mifa-s1 .s1-ov.open .s1-ov__l:nth-of-type(4){ transition-delay:.36s }\n.mifa-s1 .s1-ov.open .s1-ov__l:nth-of-type(5){ transition-delay:.42s }\n.mifa-s1 .s1-ov.open .s1-ov__l:nth-of-type(6){ transition-delay:.48s }\n.mifa-s1 .s1-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-s1 .s1-ov__f a{ color:var(--red-hi); }\n\n\/* ============================== HERO ============================== *\/\n.mifa-s1 .s1-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.mifa-s1 .s1-floor{\n  position:absolute; left:-25%; right:-25%; bottom:-4%; height:58vh; 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-s1 .s1-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:s1Run 3.4s linear infinite;\n}\n@keyframes s1Run{ from{ background-position:0 0 } to{ background-position:0 88px } }\n\n.mifa-s1 .s1-orb{ position:absolute; z-index:0; border-radius:50%; pointer-events:none; }\n.mifa-s1 .s1-orb--a{\n  width:70vmax; height:70vmax; top:-30vmax; left:-26vmax;\n  background:radial-gradient(circle, rgba(196,22,43,.28) 0%, rgba(196,22,43,.06) 34%, transparent 62%);\n  animation:s1Drift 22s ease-in-out infinite alternate;\n}\n.mifa-s1 .s1-orb--b{\n  width:56vmax; height:56vmax; bottom:-28vmax; right:-20vmax;\n  background:radial-gradient(circle, rgba(122,12,24,.34) 0%, transparent 58%);\n  animation:s1Drift 29s ease-in-out infinite alternate-reverse;\n}\n@keyframes s1Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(6%,-5%,0) scale(1.16)} }\n\n.mifa-s1 .s1-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:s1Grain .7s steps(3) infinite;\n}\n@keyframes s1Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n.mifa-s1 .s1-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\/* ------- giant ghost word behind the hero (studio signature) ------- *\/\n.mifa-s1 .s1-ghost{\n  position:absolute; z-index:1; left:50%; top:46%; translate:-50% -50%;\n  font-size:clamp(120px,26vw,420px); font-weight:900; letter-spacing:-.06em;\n  line-height:.8; white-space:nowrap; pointer-events:none;\n  color:transparent; -webkit-text-stroke:1px rgba(242,240,238,.07);\n  opacity:0; transition:opacity 1.4s var(--e);\n}\n.mifa-s1.live .s1-ghost{ opacity:1; }\n\n\/* ---- hero grid ---- *\/\n.mifa-s1 .s1-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.1fr) minmax(0,.9fr);\n  width:100%; max-width:1660px; margin:0 auto;\n  padding:clamp(30px,5.5vh,64px) var(--pad);\n  perspective:1300px;\n}\n.mifa-s1 .s1-copy{ min-width:0; transform-style:preserve-3d; will-change:transform; }\n\n.mifa-s1 .s1-crumb{\n  display:flex; align-items:center; gap:9px; margin-bottom:16px !important;\n  font-family:var(--m); font-size:10.5px; letter-spacing:.18em;\n  text-transform:uppercase; color:var(--soft); transform:translateZ(20px);\n}\n.mifa-s1 .s1-crumb a{ transition:color .3s; }\n.mifa-s1 .s1-crumb b{ color:var(--red-hi); font-weight:400; }\n\n.mifa-s1 .s1-tag{\n  display:flex; align-items:center; gap:14px; margin-bottom:clamp(18px,3vh,30px) !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-s1 .s1-tag b{ color:var(--red-hi); font-weight:400; }\n.mifa-s1 .s1-tag::after{ content:''; flex:1; max-width:110px; height:1px; background:var(--line); }\n\n.mifa-s1 h1.s1-h1{\n  margin:0 0 clamp(22px,3.4vh,38px) !important; max-width:100%;\n  font-size:clamp(40px,8.4vw,134px); font-weight:900;\n  line-height:.95; letter-spacing:-.045em; color:var(--ink);\n  transform:translateZ(64px);\n}\n.mifa-s1 .s1-h1 .l{ display:block; overflow:hidden; }\n.mifa-s1 .s1-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-s1.live .s1-h1 .l > span{ transform:none; }\n.mifa-s1.live .s1-h1 .l:nth-child(1) > span{ transition-delay:.10s }\n.mifa-s1.live .s1-h1 .l:nth-child(2) > span{ transition-delay:.20s }\n.mifa-s1 .s1-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-s1 p.s1-sub{\n  margin:0 0 clamp(22px,3vh,30px) !important; max-width:50ch;\n  font-size:clamp(15.5px,1.5vw,19.5px); line-height:1.65; color:var(--soft);\n  transform:translateZ(30px);\n}\n.mifa-s1 .s1-sub b{ color:var(--ink); font-weight:600; }\n\n.mifa-s1 .s1-meta{ display:flex; flex-wrap:wrap; gap:10px; transform:translateZ(22px); }\n.mifa-s1 .s1-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-s1 .s1-meta span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--red); flex-shrink:0; }\n\n.mifa-s1 .s1-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3.6vh,40px); transform:translateZ(46px); }\n.mifa-s1 .s1-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-s1 .s1-btn span,.mifa-s1 .s1-btn svg{ position:relative; z-index:2; }\n.mifa-s1 .s1-btn svg{ width:16px; height:16px; flex-shrink:0; transition:transform .45s var(--e); }\n.mifa-s1 .s1-btn--fill{ background:var(--red); color:#fff; box-shadow:0 10px 34px rgba(196,22,43,.42); }\n.mifa-s1 .s1-btn--fill::before{\n  content:''; position:absolute; inset:0; background:var(--ink);\n  transform:translateY(101%); transition:transform .5s var(--e);\n}\n.mifa-s1 .s1-btn--line{ border:1px solid rgba(242,240,238,.26); color:var(--ink); }\n.mifa-s1 .s1-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 ROTATING WORKFLOW RING ============ *\/\n.mifa-s1 .s1-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-s1 .s1-ringwrap{\n  position:relative; width:100%;\n  height:calc(var(--ring) * 1.5);\n  display:grid; place-items:center;\n  perspective:calc(var(--ring) * 4.4);\n}\n.mifa-s1 .s1-ring{\n  position:relative; width:var(--ring); height:calc(var(--ring) * .62);\n  transform-style:preserve-3d; will-change:transform;\n  animation:s1Turn 26s linear infinite;\n}\n@keyframes s1Turn{ from{ transform:rotateX(-14deg) rotateY(0deg) } to{ transform:rotateX(-14deg) rotateY(-360deg) } }\n\n.mifa-s1 .s1-pan{\n  position:absolute; inset:0; display:grid; place-content:center; place-items:center;\n  gap:7px; padding:clamp(10px,2.6vw,16px); text-align:center;\n  border:1px solid rgba(255,59,84,.38);\n  background:linear-gradient(160deg, rgba(196,22,43,.17), rgba(12,12,17,.93));\n  box-shadow:inset 0 0 40px rgba(196,22,43,.16);\n  backface-visibility:visible;\n}\n.mifa-s1 .s1-pan b{\n  font-size:clamp(13px,3.3vw,20px); font-weight:800; letter-spacing:-.02em;\n  line-height:1.14; color:var(--ink);\n}\n.mifa-s1 .s1-pan i{\n  font-style:normal; font-family:var(--m); font-size:clamp(8px,1.9vw,9.5px);\n  letter-spacing:.16em; text-transform:uppercase; color:var(--red-hi);\n}\n\/* 6 panels around the Y axis \u2014 radius = ring\/2 \/ tan(30deg) \u2248 ring * .866 *\/\n.mifa-s1 .s1-p1{ transform:rotateY(0deg)   translateZ(calc(var(--ring) * .866)); }\n.mifa-s1 .s1-p2{ transform:rotateY(60deg)  translateZ(calc(var(--ring) * .866)); }\n.mifa-s1 .s1-p3{ transform:rotateY(120deg) translateZ(calc(var(--ring) * .866)); }\n.mifa-s1 .s1-p4{ transform:rotateY(180deg) translateZ(calc(var(--ring) * .866)); }\n.mifa-s1 .s1-p5{ transform:rotateY(240deg) translateZ(calc(var(--ring) * .866)); }\n.mifa-s1 .s1-p6{ transform:rotateY(300deg) translateZ(calc(var(--ring) * .866)); }\n\n\/* logo disc at the centre of the ring *\/\n.mifa-s1 .s1-hub{\n  position:absolute; left:50%; top:50%; translate:-50% -50%;\n  width:clamp(56px,15vw,80px); height:clamp(56px,15vw,80px);\n  border-radius:50%; overflow:hidden; background:var(--red);\n  box-shadow:0 14px 40px rgba(196,22,43,.55), 0 0 0 1px rgba(255,59,84,.5);\n  animation:s1Pulse 4s ease-in-out infinite;\n}\n.mifa-s1 .s1-hub img{ position:absolute; max-width:none; width:237.5%; height:237.5%; left:-62.2%; top:-54.6%; }\n@keyframes s1Pulse{ 0%,100%{ box-shadow:0 14px 40px rgba(196,22,43,.5), 0 0 0 1px rgba(255,59,84,.45) }\n                    50%{ box-shadow:0 14px 54px rgba(196,22,43,.8), 0 0 0 6px rgba(196,22,43,.12) } }\n\n.mifa-s1 .s1-ringwrap::after{\n  content:''; position:absolute; z-index:-1;\n  left:50%; translate:-50% 0; bottom:10%;\n  width:74%; height:28px; border-radius:50%;\n  background:radial-gradient(ellipse, rgba(196,22,43,.4), transparent 70%);\n  filter:blur(14px); animation:s1Shadow 26s ease-in-out infinite;\n}\n@keyframes s1Shadow{ 0%,100%{ transform:scaleX(1); opacity:.7 } 50%{ transform:scaleX(.74); opacity:.42 } }\n\n.mifa-s1 .s1-cap{\n  width:100%; padding-top:18px; border-top:1px solid var(--line);\n  font-family:var(--m); font-size:11px; line-height:1.7; letter-spacing:.05em; color:var(--soft);\n}\n.mifa-s1 .s1-cap b{ color:var(--ink); font-weight:500; }\n\n\/* --------------------------- MARQUEE --------------------------- *\/\n.mifa-s1 .s1-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-s1 .s1-marq__t{ display:inline-flex; align-items:center; animation:s1Slide 34s linear infinite; }\n.mifa-s1 .s1-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-s1 .s1-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 s1Slide{ to{ transform:translateX(-50%) } }\n\n\/* -------------------------- SCROLL CUE -------------------------- *\/\n.mifa-s1 .s1-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-s1 .s1-scr i{\n  writing-mode:horizontal-tb; width:1px; height:46px;\n  background:linear-gradient(var(--red-hi),transparent); animation:s1Cue 2s ease-in-out infinite;\n}\n@keyframes s1Cue{ 0%,100%{transform:scaleY(.3); opacity:.35} 50%{transform:scaleY(1); opacity:1} }\n\n\/* reveal *\/\n.mifa-s1 .rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e), transform .9s var(--e); }\n.mifa-s1.live .rv{ opacity:1; transform:none; }\n.mifa-s1.live .a1{ transition-delay:.16s } .mifa-s1.live .a2{ transition-delay:.26s }\n.mifa-s1.live .a3{ transition-delay:.34s } .mifa-s1.live .a4{ transition-delay:.42s }\n.mifa-s1.live .a5{ transition-delay:.12s }\n\n\/* ---------------- HOVER : mouse devices only ---------------- *\/\n@media (hover:hover) and (pointer:fine){\n  .mifa-s1 .s1-logo:hover .s1-mark{ transform:rotateY(28deg) rotateX(-8deg) scale(1.06); }\n  .mifa-s1 .s1-soc a:hover{ color:var(--red-hi); }\n  .mifa-s1 .s1-links a:hover{ color:var(--ink); }\n  .mifa-s1 .s1-links a:hover::after{ transform:scaleX(1); transform-origin:left; }\n  .mifa-s1 .s1-crumb a:hover{ color:var(--red-hi); }\n  .mifa-s1 .s1-menu:hover .s1-menu__t{ color:var(--red-hi); }\n  .mifa-s1 .s1-ov__l:hover{ color:var(--red-hi); }\n  .mifa-s1 .s1-meta span:hover{ border-color:rgba(255,59,84,.5); color:var(--ink); transform:translateY(-3px); }\n  .mifa-s1 .s1-btn:hover{ transform:translateY(-4px); }\n  .mifa-s1 .s1-btn--fill:hover{ color:var(--bg); box-shadow:0 18px 46px rgba(196,22,43,.28); }\n  .mifa-s1 .s1-btn--fill:hover::before{ transform:translateY(0); }\n  .mifa-s1 .s1-btn--fill:hover svg{ transform:translateX(4px); }\n  .mifa-s1 .s1-btn--line:hover{ border-color:rgba(242,240,238,.55); }\n  .mifa-s1 .s1-btn--line:hover::before{ transform:scaleX(1); transform-origin:left; }\n  .mifa-s1 .s1-marq:hover .s1-marq__t{ animation-play-state:paused; }\n  .mifa-s1 .s1-ringwrap:hover .s1-ring{ animation-play-state:paused; }\n  .mifa-s1 .s1-pan{ backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }\n}\n\n\/* =========================== RESPONSIVE =========================== *\/\n@media (max-width:1240px){\n  .mifa-s1 .s1-links{ display:none; }\n}\n@media (max-width:1040px){\n  .mifa-s1 .s1-in{ grid-template-columns:1fr; perspective:none; }\n  .mifa-s1 .s1-copy{ transform-style:flat; }\n  .mifa-s1 .s1-crumb,.mifa-s1 .s1-tag,\n  .mifa-s1 h1.s1-h1,.mifa-s1 p.s1-sub,\n  .mifa-s1 .s1-meta,.mifa-s1 .s1-btns{ transform:none !important; }\n  .mifa-s1 .s1-stage{ order:-1; align-self:start; width:100%; }\n  .mifa-s1 .s1-scr{ display:none; }\n}\n@media (max-width:760px){\n  .mifa-s1{ --nav-h:64px; --ring:clamp(132px,38vw,180px); }\n  .mifa-s1 .s1-rec,.mifa-s1 .s1-soc{ display:none; }\n  .mifa-s1 .s1-menu__t{ display:none; }\n  .mifa-s1 .s1-menu{ padding:16px 9px; margin:-16px -9px; }\n  .mifa-s1 .s1-hero{ min-height:auto; }\n  .mifa-s1 .s1-in{ padding-top:28px; padding-bottom:42px; gap:26px; }\n  .mifa-s1 h1.s1-h1{ font-size:clamp(36px,11vw,60px); letter-spacing:-.034em; }\n  .mifa-s1 .s1-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-s1 .s1-btns{ flex-direction:column; align-items:stretch; }\n  .mifa-s1 .s1-btn{ justify-content:center; }\n  .mifa-s1 .s1-marq__t span{ font-size:16px; gap:22px; padding-right:22px; }\n  .mifa-s1 .s1-word i{ display:none; }\n  .mifa-s1 .s1-grain{ opacity:.1; }\n  .mifa-s1 .s1-floor{ height:42vh; }\n  .mifa-s1 .s1-ghost{ display:none; }\n}\n@media (max-width:400px){\n  .mifa-s1{ --ring:clamp(122px,40vw,152px); }\n  .mifa-s1 .s1-meta span{ padding:8px 12px; font-size:10.5px; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-s1 *,.mifa-s1 *::before,.mifa-s1 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-s1 .rv{ opacity:1; transform:none; }\n  .mifa-s1 .s1-h1 .l > span{ transform:none; }\n  .mifa-s1 .s1-ring{ animation:none; transform:rotateX(-14deg) rotateY(-24deg); }\n}\n<\/style>\n\n<!-- =============================== NAV =============================== -->\n<header class=\"s1-nav\" id=\"s1Nav\">\n  <a href=\"https:\/\/mifaproduction.com\/index.php\/home\/\" class=\"s1-logo\" aria-label=\"Mifa Productions \u2014 home\">\n    <span class=\"s1-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=\"s1-word\"><b>MIFA<\/b><i>PRODUCTIONS<\/i><\/span>\n  <\/a>\n\n  <div class=\"s1-rec\"><i><\/i> The Studio<\/div>\n\n  <div class=\"s1-right\">\n    <!-- desktop page links -->\n    <nav class=\"s1-links\" aria-label=\"Primary\">\n      <a href=\"https:\/\/mifaproduction.com\/index.php\/home\/\">Home<\/a>\n      <a class=\"here\" aria-current=\"page\" href=\"https:\/\/mifaproduction.com\/index.php\/studio\/\">Studio<\/a>\n      <a href=\"https:\/\/mifaproduction.com\/index.php\/services\/\">Services<\/a>\n      <a href=\"https:\/\/mifaproduction.com\/index.php\/work\/\">Work<\/a>\n      <a href=\"https:\/\/mifaproduction.com\/index.php\/client\/\">Clients<\/a>\n      <a href=\"https:\/\/mifaproduction.com\/index.php\/contact\/\">Contact<\/a>\n    <\/nav>\n\n    <div class=\"s1-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\n    <button class=\"s1-menu\" id=\"s1MenuBtn\" aria-expanded=\"false\" aria-controls=\"s1Ov\" aria-label=\"Open menu\">\n      <span class=\"s1-menu__t\">Menu<\/span>\n      <span class=\"s1-burg\"><i><\/i><i><\/i><\/span>\n    <\/button>\n  <\/div>\n<\/header>\n\n<!-- =========================== MENU OVERLAY =========================== -->\n<div class=\"s1-ov\" id=\"s1Ov\">\n  <a class=\"s1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/home\/\"><em>001<\/em> Home<\/a>\n  <a class=\"s1-ov__l here\" aria-current=\"page\" href=\"https:\/\/mifaproduction.com\/index.php\/studio\/\"><em>002<\/em> Studio<\/a>\n  <a class=\"s1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/services\/\"><em>003<\/em> Services<\/a>\n  <a class=\"s1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/work\/\"><em>004<\/em> Work<\/a>\n  <a class=\"s1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/client\/\"><em>005<\/em> Clients<\/a>\n  <a class=\"s1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/contact\/\"><em>006<\/em> Contact<\/a>\n  <div class=\"s1-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=\"s1-hero\" id=\"studio\">\n  <div class=\"s1-orb s1-orb--a\" aria-hidden=\"true\"><\/div>\n  <div class=\"s1-orb s1-orb--b\" aria-hidden=\"true\"><\/div>\n  <div class=\"s1-floor\" aria-hidden=\"true\"><i><\/i><\/div>\n  <div class=\"s1-ghost\" aria-hidden=\"true\">STUDIO<\/div>\n  <div class=\"s1-grain\" aria-hidden=\"true\"><\/div>\n  <div class=\"s1-vig\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"s1-in\">\n\n    <div class=\"s1-copy\" id=\"s1Copy\">\n      <div class=\"s1-crumb rv a5\">\n        <a href=\"https:\/\/mifaproduction.com\/index.php\/home\/\">Home<\/a>\n        <span>\/<\/span><b>Studio<\/b>\n      <\/div>\n\n      <div class=\"s1-tag rv a1\"><b>002<\/b> \/ About Mifa Productions<\/div>\n\n      <h1 class=\"s1-h1\">\n        <span class=\"l\"><span>The Crew<\/span><\/span>\n        <span class=\"l\"><span>Behind the <em>Frame<\/em><\/span><\/span>\n      <\/h1>\n\n      <p class=\"s1-sub rv a2\">\n        Mifa Productions is a Delhi NCR based line production and video production house.\n        For two decades we have been putting shoots together across India for\n        <b>agencies, brands and international crews<\/b> &mdash; from the first recce\n        to the final master.\n      <\/p>\n\n      <div class=\"s1-meta rv a3\">\n        <span>Registered in New Delhi<\/span>\n        <span>Studio office in Noida<\/span>\n        <span>Crews across India<\/span>\n      <\/div>\n\n      <div class=\"s1-btns rv a4\">\n        <a class=\"s1-btn s1-btn--fill\" href=\"https:\/\/mifaproduction.com\/index.php\/services\/\">\n          <span>See What We Do<\/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=\"s1-btn s1-btn--line\" href=\"https:\/\/wa.me\/918527121545?text=Hi%20Mifa%20Productions%2C%20I%27d%20like%20to%20talk%20about%20a%20project.\" target=\"_blank\" rel=\"noopener\">\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.8 14.2c-.2.7-1.2 1.3-1.9 1.4-.5.1-1.1.2-3.2-.7-2.7-1.1-4.4-3.9-4.6-4.1-.1-.2-1-1.4-1-2.6 0-1.2.6-1.8.9-2.1.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2 0 .4-.1.5l-.4.5c-.1.1-.3.3-.1.6.1.3.6 1.1 1.3 1.7.9.8 1.6 1 1.9 1.2.2.1.4.1.5-.1l.7-.8c.2-.2.3-.2.6-.1l1.9.9c.3.1.4.2.5.3 0 .2 0 .8-.2 1.5Z\"\/><\/svg>\n          <span>Talk to the Studio<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- ---------- 3D WORKFLOW RING ---------- -->\n    <div class=\"s1-stage rv a5\">\n      <div class=\"s1-ringwrap\" id=\"s1RingWrap\" aria-hidden=\"true\">\n        <div class=\"s1-ring\" id=\"s1Ring\">\n          <div class=\"s1-pan s1-p1\"><b>Recce<\/b><i>Step 01<\/i><\/div>\n          <div class=\"s1-pan s1-p2\"><b>Permissions<\/b><i>Step 02<\/i><\/div>\n          <div class=\"s1-pan s1-p3\"><b>Crew &amp; Cast<\/b><i>Step 03<\/i><\/div>\n          <div class=\"s1-pan s1-p4\"><b>Shoot<\/b><i>Step 04<\/i><\/div>\n          <div class=\"s1-pan s1-p5\"><b>Post<\/b><i>Step 05<\/i><\/div>\n          <div class=\"s1-pan s1-p6\"><b>Delivery<\/b><i>Step 06<\/i><\/div>\n        <\/div>\n        <span class=\"s1-hub\">\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      <\/div>\n\n      <div class=\"s1-cap\">\n        <b>One partner, the whole pipeline.<\/b> The client hands over a brief &mdash;\n        every step after that is handled inside the studio.\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"s1-scr\">Scroll<i><\/i><\/div>\n\n  <div class=\"s1-marq\">\n    <div class=\"s1-marq__t\" id=\"s1Marq\">\n      <span>Line Production<\/span><span>Fixers &amp; Permissions<\/span><span>Local Crew<\/span>\n      <span>Equipment &amp; Gear<\/span><span>Location Scouting<\/span><span>Production Design<\/span>\n      <span>Post &amp; Delivery<\/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-s1')\n    : document.querySelector('.mifa-s1');\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  \/* ---------------- entry ---------------- *\/\n  requestAnimationFrame(function(){\n    setTimeout(function(){ root.classList.add('live'); }, reduce ? 0 : 120);\n  });\n  setTimeout(function(){ root.classList.add('live'); }, 2500); \/* fail-safe *\/\n\n  \/* ---------------- nav ---------------- *\/\n  var nav = q('#s1Nav');\n  function onScroll(){ nav.classList.toggle('stuck', window.scrollY > 20); }\n  window.addEventListener('scroll', onScroll, {passive:true}); onScroll();\n\n  \/* --------- mark the current page in both menus --------- *\/\n  (function(){\n    var here = location.pathname.replace(\/\\\/+$\/,'').toLowerCase();\n    root.querySelectorAll('.s1-links a, .s1-ov__l').forEach(function(a){\n      var href = a.getAttribute('href') || '';\n      if(href.charAt(0) === '#' || href.indexOf('http') !== 0) return;\n      var path;\n      try{ path = new URL(href).pathname.replace(\/\\\/+$\/,'').toLowerCase(); }\n      catch(e){ return; }\n      var match = path && here && path === here;\n      a.classList.toggle('here', match);\n      if(match){ a.setAttribute('aria-current','page'); }\n      else{ a.removeAttribute('aria-current'); }\n    });\n  })();\n\n  \/* ---------------- menu ---------------- *\/\n  var btn = q('#s1MenuBtn'), ov = q('#s1Ov');\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  \/* ------- 3D parallax : 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('#s1Copy'),\n        ring = q('#s1Ring'),\n        wrap = q('#s1RingWrap'),\n        mx=0,my=0,tx=0,ty=0, hovering=false;\n\n    window.addEventListener('mousemove', function(e){\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      tx += (mx - tx) * .07; ty += (my - ty) * .07;\n      copy.style.transform = 'rotateY(' + (tx * 5) + 'deg) rotateX(' + (-ty * 3.5) + 'deg)';\n\n      if(hovering){\n        ring.style.animationPlayState = 'paused';\n        ring.style.transform = 'rotateX(' + (-14 - ty * 18) + 'deg) rotateY(' + (tx * -70) + 'deg)';\n      } else if(ring.style.transform){\n        ring.style.transform = '';\n        ring.style.animationPlayState = '';\n      }\n      requestAnimationFrame(loop);\n    })();\n  }\n\n  window.addEventListener('resize', function(){\n    if(window.innerWidth <= 1040){\n      var c = q('#s1Copy'), k = q('#s1Ring');\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('#s1Marq');\n  if(t) t.innerHTML += t.innerHTML;\n})();\n<\/script>\n<\/div>\n\n\n\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 STUDIO PAGE \u00b7 PART 2\n     OUR STORY (3D tilting slate) + THE JOURNEY (3D timeline)\n\n     WordPress \"Custom HTML\" block me poora paste karo.\n     Sab kuch .mifa-s2 me scoped hai.\n\n     >>> EDIT KARNE WALI CHEEZEIN <<<\n     Timeline ke saal aur milestones placeholder hain.\n     Neeche <!-- EDIT --> \n\n<div class=\"mifa-s2\">\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-s2{\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  --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\n  \/* Theme narrow ho to: *\/\n  \/* margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); *\/\n}\n.mifa-s2 *,.mifa-s2 *::before,.mifa-s2 *::after{ box-sizing:border-box; }\n.mifa-s2 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-s2 a:hover,.mifa-s2 a:focus{ text-decoration:none !important; }\n.mifa-s2 h2,.mifa-s2 h3,.mifa-s2 h4,.mifa-s2 p,.mifa-s2 ul,.mifa-s2 li,.mifa-s2 blockquote{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-s2 ul{ list-style:none !important; }\n.mifa-s2 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-s2 svg{ display:block; }\n.mifa-s2 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\n\/* ======================== SHELL \/ AMBIENT ======================== *\/\n.mifa-s2 .s2-wrap{\n  position:relative; padding:clamp(64px,10vh,132px) 0; isolation:isolate;\n  border-bottom:1px solid var(--line);\n}\n.mifa-s2 .s2-orb{\n  position:absolute; z-index:0; border-radius:50%; pointer-events:none;\n  width:62vmax; height:62vmax; top:-24vmax; right:-24vmax;\n  background:radial-gradient(circle, rgba(196,22,43,.22) 0%, transparent 60%);\n  animation:s2Drift 26s ease-in-out infinite alternate;\n}\n@keyframes s2Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-6%,7%,0) scale(1.16)} }\n.mifa-s2 .s2-grain{\n  position:absolute; inset:-60%; z-index:1; pointer-events:none; opacity:.12;\n  background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'\/%3E%3C\/svg%3E\");\n  animation:s2Grain .7s steps(3) infinite;\n}\n@keyframes s2Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n\n.mifa-s2 .s2-in{\n  position:relative; z-index:3; width:100%; max-width:1440px;\n  margin:0 auto; padding:0 var(--pad);\n}\n\n\/* ========================= SECTION HEAD ========================= *\/\n.mifa-s2 .s2-eye{\n  display:flex; align-items:center; gap:14px; margin-bottom:22px !important;\n  font-family:var(--m); font-size:11px; letter-spacing:.2em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-s2 .s2-eye b{ color:var(--red-hi); font-weight:400; }\n.mifa-s2 .s2-eye::after{ content:''; flex:1; max-width:130px; height:1px; background:var(--line); }\n\n.mifa-s2 h2.s2-h2{\n  max-width:20ch;\n  font-size:clamp(30px,5.4vw,68px); font-weight:900;\n  line-height:1.02; letter-spacing:-.04em; color:var(--ink);\n}\n.mifa-s2 .s2-h2 em{\n  font-style:normal; color:var(--red-hi);\n  text-shadow:0 0 40px rgba(255,59,84,.45);\n}\n\n\/* ============================ STORY ============================ *\/\n.mifa-s2 .s2-story{\n  display:grid; gap:clamp(30px,4.6vw,64px); align-items:start;\n  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);\n  margin-top:clamp(34px,5vh,58px); perspective:1400px;\n}\n.mifa-s2 .s2-slate{\n  position:relative; transform-style:preserve-3d; will-change:transform;\n  border:1px solid rgba(255,59,84,.3); border-radius:16px; overflow:hidden;\n  background:linear-gradient(158deg, rgba(196,22,43,.16), rgba(12,12,17,.96));\n  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 0 50px rgba(196,22,43,.1);\n}\n\/* clapper stripes top *\/\n.mifa-s2 .s2-slate__bar{\n  display:flex; height:34px; overflow:hidden; border-bottom:1px solid rgba(255,59,84,.28);\n  transform:translateZ(26px);\n}\n.mifa-s2 .s2-slate__bar i{ flex:1; transform:skewX(-24deg); }\n.mifa-s2 .s2-slate__bar i:nth-child(odd){ background:rgba(242,240,238,.9); }\n.mifa-s2 .s2-slate__bar i:nth-child(even){ background:var(--red-dp); }\n\n.mifa-s2 .s2-slate__body{ padding:clamp(24px,3.4vw,40px); transform:translateZ(34px); }\n.mifa-s2 .s2-slate__rows{\n  display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 18px;\n  padding-bottom:22px !important; margin-bottom:22px !important;\n  border-bottom:1px dashed rgba(242,240,238,.18);\n  font-family:var(--m); font-size:11.5px; letter-spacing:.06em;\n}\n.mifa-s2 .s2-slate__rows dt{ color:var(--red-hi); text-transform:uppercase; letter-spacing:.14em; }\n.mifa-s2 .s2-slate__rows dd{ margin:0 !important; color:var(--ink); }\n\n.mifa-s2 blockquote.s2-quote{\n  font-size:clamp(18px,2.1vw,25px); font-weight:600; line-height:1.42;\n  letter-spacing:-.02em; color:var(--ink);\n}\n.mifa-s2 .s2-quote span{ color:var(--red-hi); }\n.mifa-s2 .s2-sign{\n  display:flex; align-items:center; gap:12px; margin-top:22px !important;\n  font-family:var(--m); font-size:11px; letter-spacing:.14em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-s2 .s2-sign i{\n  display:block; width:34px; height:1px; background:var(--red-hi); flex-shrink:0; font-style:normal;\n}\n\n\/* right column copy *\/\n.mifa-s2 .s2-copy p{\n  font-size:clamp(15.5px,1.35vw,18px); line-height:1.75; color:var(--soft);\n  margin-bottom:20px !important;\n}\n.mifa-s2 .s2-copy p:last-of-type{ margin-bottom:0 !important; }\n.mifa-s2 .s2-copy b{ color:var(--ink); font-weight:600; }\n\n.mifa-s2 .s2-facts{\n  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;\n  margin-top:clamp(28px,4vh,40px); background:var(--line); border:1px solid var(--line);\n  border-radius:12px; overflow:hidden;\n}\n.mifa-s2 .s2-fact{ padding:20px 18px; background:var(--bg-2); transition:background .4s; }\n.mifa-s2 .s2-fact b{\n  display:block; font-size:clamp(22px,3vw,32px); font-weight:800;\n  letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums;\n}\n.mifa-s2 .s2-fact i{\n  display:block; margin-top:6px; font-style:normal; font-family:var(--m);\n  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft);\n}\n\n\/* =========================== JOURNEY =========================== *\/\n.mifa-s2 .s2-jour{ margin-top:clamp(70px,11vh,140px); perspective:1300px; }\n.mifa-s2 .s2-line{\n  position:relative; margin-top:clamp(38px,6vh,64px);\n  padding-left:clamp(34px,5vw,64px);\n}\n.mifa-s2 .s2-line::before{\n  content:''; position:absolute; left:clamp(9px,1.4vw,18px); top:6px; bottom:6px; width:1px;\n  background:linear-gradient(var(--red-hi), rgba(196,22,43,.35) 45%, transparent);\n}\n.mifa-s2 .s2-node{\n  position:relative; padding:0 0 clamp(26px,4vh,44px) 0;\n  transform-style:preserve-3d;\n  opacity:0; transform:translateY(34px) rotateX(-16deg) translateZ(-40px);\n  transform-origin:top center;\n  transition:opacity .8s var(--e), transform .8s var(--e);\n}\n.mifa-s2 .s2-node.on{ opacity:1; transform:none; }\n.mifa-s2 .s2-node:last-child{ padding-bottom:0; }\n.mifa-s2 .s2-node::before{\n  content:''; position:absolute; left:calc(-1 * clamp(34px,5vw,64px) + clamp(4px,1vw,13px));\n  top:14px; width:11px; height:11px; border-radius:50%;\n  background:var(--bg); border:2px solid var(--red-hi);\n  box-shadow:0 0 0 5px rgba(196,22,43,.14); transition:box-shadow .5s;\n}\n.mifa-s2 .s2-node.on::before{ box-shadow:0 0 0 8px rgba(196,22,43,.18), 0 0 18px 2px rgba(255,59,84,.55); }\n\n.mifa-s2 .s2-card{\n  border:1px solid var(--line); border-radius:14px;\n  background:linear-gradient(150deg, rgba(196,22,43,.09), rgba(16,16,23,.92));\n  padding:clamp(20px,2.6vw,30px);\n  transition:border-color .45s, transform .5s var(--e), box-shadow .5s;\n}\n.mifa-s2 .s2-card__top{\n  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin-bottom:10px !important;\n}\n.mifa-s2 .s2-card__yr{\n  font-family:var(--m); font-size:12px; letter-spacing:.18em; color:var(--red-hi);\n}\n.mifa-s2 h3.s2-card__t{\n  font-size:clamp(18px,2.1vw,25px); font-weight:800; letter-spacing:-.025em; color:var(--ink);\n}\n.mifa-s2 .s2-card p{\n  font-size:clamp(14.5px,1.2vw,16.5px); line-height:1.7; color:var(--soft); max-width:70ch;\n}\n.mifa-s2 .s2-card p b{ color:var(--ink); font-weight:600; }\n\n\/* --------------------------- HOVER --------------------------- *\/\n@media (hover:hover) and (pointer:fine){\n  .mifa-s2 .s2-fact:hover{ background:rgba(196,22,43,.12); }\n  .mifa-s2 .s2-card:hover{\n    border-color:rgba(255,59,84,.45); transform:translateY(-4px);\n    box-shadow:0 20px 46px rgba(0,0,0,.5);\n  }\n}\n\n\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1040px){\n  .mifa-s2 .s2-story{ grid-template-columns:1fr; perspective:none; }\n  .mifa-s2 .s2-slate{ transform:none !important; transform-style:flat; }\n}\n@media (max-width:760px){\n  .mifa-s2 .s2-wrap{ padding:clamp(52px,8vh,80px) 0; }\n  .mifa-s2 h2.s2-h2{ font-size:clamp(28px,8.6vw,42px); letter-spacing:-.03em; }\n  .mifa-s2 .s2-slate__rows{ grid-template-columns:1fr; gap:2px; }\n  .mifa-s2 .s2-slate__rows dt{ margin-top:10px; }\n  .mifa-s2 .s2-jour{ perspective:none; }\n  .mifa-s2 .s2-node{ transform:translateY(26px); }\n  .mifa-s2 .s2-grain{ opacity:.08; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-s2 *,.mifa-s2 *::before,.mifa-s2 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-s2 .s2-node{ opacity:1; transform:none; }\n}\n<\/style>\n\n<section class=\"s2-wrap\" id=\"studio-story\">\n  <div class=\"s2-orb\" aria-hidden=\"true\"><\/div>\n  <div class=\"s2-grain\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"s2-in\">\n\n    <!-- ===================== STORY ===================== -->\n    <div class=\"s2-eye\"><b>003<\/b> \/ Who we are<\/div>\n    <h2 class=\"s2-h2\">A production house built on <em>call sheets<\/em>, not slogans.<\/h2>\n\n    <div class=\"s2-story\">\n\n      <!-- 3D SLATE -->\n      <div class=\"s2-slate\" id=\"s2Slate\">\n        <div class=\"s2-slate__bar\" aria-hidden=\"true\">\n          <i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i><i><\/i>\n        <\/div>\n        <div class=\"s2-slate__body\">\n          <dl class=\"s2-slate__rows\">\n            <dt>Studio<\/dt><dd>Mifa Productions<\/dd>\n            <dt>Base<\/dt><dd>Noida &amp; New Delhi<\/dd>\n            <dt>Discipline<\/dt><dd>Line &amp; Video Production<\/dd>\n            <dt>Coverage<\/dt><dd>Pan-India<\/dd>\n          <\/dl>\n\n          <blockquote class=\"s2-quote\">\n            &ldquo;Har shoot ka sabse bada risk budget nahi hota &mdash;\n            <span>coordination hota hai.<\/span> Wahi humara asli kaam hai.&rdquo;\n          <\/blockquote>\n\n          <div class=\"s2-sign\"><i><\/i> The Mifa Team<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- COPY -->\n      <div class=\"s2-copy\">\n        <p>\n          Mifa Productions <b>New Delhi<\/b> me register hai aur humara working studio\n          <b>Sector 16, Noida<\/b> me hai. Yahin se hum India ke kisi bhi corner ke liye\n          shoot plan, staff aur gear move karte hain.\n        <\/p>\n        <p>\n          Hum do tarah se kaam karte hain. Ek, <b>line production<\/b> &mdash; jab koi agency,\n          brand ya foreign production house India me shoot karna chahta hai aur usse\n          zameen par ek bharosemand partner chahiye: permissions, locations, local crew,\n          equipment, transport, permits, hotels, sab. Do, <b>full video production<\/b> &mdash;\n          jab client sirf idea leke aata hai aur hum concept se final delivery tak\n          poora film banate hain.\n        <\/p>\n        <p>\n          Team chhoti aur hands-on hai. Producer khud floor par hota hai, isliye decisions\n          fast lagte hain aur client ko har roz ka actual update milta hai &mdash;\n          <b>bina kisi surprise bill ke<\/b>.\n        <\/p>\n\n        <div class=\"s2-facts\">\n          <!-- EDIT: numbers client se confirm karke badal lena -->\n          <div class=\"s2-fact\"><b data-c=\"20\" data-suf=\"+\">0<\/b><i>Years in the field<\/i><\/div>\n          <div class=\"s2-fact\"><b data-c=\"100\" data-suf=\"+\">0<\/b><i>Projects delivered<\/i><\/div>\n          <div class=\"s2-fact\"><b data-c=\"25\" data-suf=\"+\">0<\/b><i>Cities shot in<\/i><\/div>\n          <div class=\"s2-fact\"><b>NCR<\/b><i>Home base<\/i><\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- ===================== JOURNEY ===================== -->\n    <div class=\"s2-jour\">\n      <div class=\"s2-eye\"><b>004<\/b> \/ The journey<\/div>\n      <h2 class=\"s2-h2\">Twenty years, one <em>slate<\/em> at a time.<\/h2>\n\n      <div class=\"s2-line\">\n\n        <!-- EDIT: saal aur milestone client ke actual history se replace karna -->\n        <div class=\"s2-node\">\n          <div class=\"s2-card\">\n            <div class=\"s2-card__top\">\n              <span class=\"s2-card__yr\">Chapter 01<\/span>\n              <h3 class=\"s2-card__t\">The first slate<\/h3>\n            <\/div>\n            <p>Delhi se shuruaat &mdash; chhote corporate films aur ad agency assignments par\n            kaam karte hue studio ka pehla crew network bana.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"s2-node\">\n          <div class=\"s2-card\">\n            <div class=\"s2-card__top\">\n              <span class=\"s2-card__yr\">Chapter 02<\/span>\n              <h3 class=\"s2-card__t\">Line production takes over<\/h3>\n            <\/div>\n            <p>Agencies ne outstation shoots ke liye Mifa ko ground partner banana shuru kiya.\n            <b>Permissions, fixers aur local crew<\/b> humari core strength ban gayi.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"s2-node\">\n          <div class=\"s2-card\">\n            <div class=\"s2-card__top\">\n              <span class=\"s2-card__yr\">Chapter 03<\/span>\n              <h3 class=\"s2-card__t\">Pan-India coverage<\/h3>\n            <\/div>\n            <p>Kashmir se Kerala tak trusted crew, gear vendors aur location contacts ka network\n            khada hua &mdash; ab kisi bhi city me shoot 48 ghante me stand ho sakta hai.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"s2-node\">\n          <div class=\"s2-card\">\n            <div class=\"s2-card__top\">\n              <span class=\"s2-card__yr\">Chapter 04<\/span>\n              <h3 class=\"s2-card__t\">Digital-first content<\/h3>\n            <\/div>\n            <p>Brands ka focus TV se social par shift hua, to studio ne\n            <b>vertical content, explainer videos aur branded shorts<\/b> ka pipeline add kiya.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"s2-node\">\n          <div class=\"s2-card\">\n            <div class=\"s2-card__top\">\n              <span class=\"s2-card__yr\">Chapter 05<\/span>\n              <h3 class=\"s2-card__t\">Micro drama &amp; new formats<\/h3>\n            <\/div>\n            <p>Short-form serialised drama aur creator-led formats &mdash; naye platforms ke liye\n            wahi purani production discipline, naya packaging.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"s2-node\">\n          <div class=\"s2-card\">\n            <div class=\"s2-card__top\">\n              <span class=\"s2-card__yr\">Today<\/span>\n              <h3 class=\"s2-card__t\">Noida studio, national floor<\/h3>\n            <\/div>\n            <p>Sector 16 office se planning, aur pure India me execution.\n            <b>Ek call, poori production.<\/b><\/p>\n          <\/div>\n        <\/div>\n\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-s2')\n    : document.querySelector('.mifa-s2');\n  if(!root) return;\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* ---------- timeline reveal ---------- *\/\n  var nodes = root.querySelectorAll('.s2-node');\n  if(reduce || !('IntersectionObserver' in window)){\n    nodes.forEach(function(n){ n.classList.add('on'); });\n  } else {\n    var io = new IntersectionObserver(function(entries){\n      entries.forEach(function(en){\n        if(en.isIntersecting){ en.target.classList.add('on'); io.unobserve(en.target); }\n      });\n    }, {threshold:.2, rootMargin:'0px 0px -8% 0px'});\n    nodes.forEach(function(n, i){ n.style.transitionDelay = (i % 3) * 0.07 + 's'; io.observe(n); });\n  }\n\n  \/* ---------- count-up ---------- *\/\n  var nums = root.querySelectorAll('[data-c]');\n  function run(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 \/ 34));\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  if(!('IntersectionObserver' in window)){\n    nums.forEach(run);\n  } else {\n    var io2 = new IntersectionObserver(function(entries){\n      entries.forEach(function(en){\n        if(en.isIntersecting){ run(en.target); io2.unobserve(en.target); }\n      });\n    }, {threshold:.5});\n    nums.forEach(function(n){ io2.observe(n); });\n  }\n\n  \/* ---------- slate 3D tilt (desktop mouse only) ---------- *\/\n  var desktop = window.matchMedia('(hover:hover) and (pointer:fine) and (min-width:1041px)').matches;\n  var slate = root.querySelector('#s2Slate');\n  if(!reduce && desktop && slate){\n    var tx=0, ty=0, mx=0, my=0, raf=null, inside=false;\n\n    slate.addEventListener('mousemove', function(e){\n      var b = slate.getBoundingClientRect();\n      mx = ((e.clientX - b.left) \/ b.width  - .5) * 2;\n      my = ((e.clientY - b.top)  \/ b.height - .5) * 2;\n      inside = true;\n      if(!raf) loop();\n    });\n    slate.addEventListener('mouseleave', function(){ inside = false; mx = 0; my = 0; });\n\n    function loop(){\n      tx += (mx - tx) * .1; ty += (my - ty) * .1;\n      slate.style.transform =\n        'rotateY(' + (tx * 8) + 'deg) rotateX(' + (-ty * 7) + 'deg) translateZ(0)';\n      if(!inside && Math.abs(tx) < .002 &#038;&#038; Math.abs(ty) < .002){\n        slate.style.transform = ''; raf = null; return;\n      }\n      raf = requestAnimationFrame(loop);\n    }\n  }\n})();\n<\/script>\n<\/div>\n\n\n\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 STUDIO PAGE \u00b7 PART 3\n     HOW WE WORK (3D process rail) + WHAT WE BRING (3D flip cards)\n     + STUDIO CONTACT BAND\n\n     WordPress \"Custom HTML\" block me poora paste karo.\n     Sab kuch .mifa-s3 me scoped hai.\n     ============================================================ -->\n\n<div class=\"mifa-s3\">\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-s3{\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  --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\n  \/* Theme narrow ho to: *\/\n  \/* margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); *\/\n}\n.mifa-s3 *,.mifa-s3 *::before,.mifa-s3 *::after{ box-sizing:border-box; }\n.mifa-s3 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-s3 a:hover,.mifa-s3 a:focus{ text-decoration:none !important; }\n.mifa-s3 h2,.mifa-s3 h3,.mifa-s3 h4,.mifa-s3 p,.mifa-s3 ul,.mifa-s3 li{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-s3 ul{ list-style:none !important; }\n.mifa-s3 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-s3 button{\n  font:inherit; color:inherit; background:none; border:0; cursor:pointer;\n  padding:0; margin:0; text-transform:none; letter-spacing:normal;\n  box-shadow:none; border-radius:0; -webkit-appearance:none; appearance:none;\n  text-align:left; width:100%;\n}\n.mifa-s3 button:hover,.mifa-s3 button:focus{ background:none; }\n.mifa-s3 svg{ display:block; }\n.mifa-s3 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\n\/* ======================== SHELL \/ AMBIENT ======================== *\/\n.mifa-s3 .s3-wrap{ position:relative; padding:clamp(64px,10vh,132px) 0 0; isolation:isolate; }\n.mifa-s3 .s3-orb{\n  position:absolute; z-index:0; border-radius:50%; pointer-events:none;\n  width:60vmax; height:60vmax; top:-26vmax; left:-24vmax;\n  background:radial-gradient(circle, rgba(122,12,24,.34) 0%, transparent 58%);\n  animation:s3Drift 28s ease-in-out infinite alternate;\n}\n@keyframes s3Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(7%,5%,0) scale(1.18)} }\n.mifa-s3 .s3-grain{\n  position:absolute; inset:-60%; z-index:1; pointer-events:none; opacity:.12;\n  background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='200' height='200'%3E%3Cfilter id='n3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n3)'\/%3E%3C\/svg%3E\");\n  animation:s3Grain .7s steps(3) infinite;\n}\n@keyframes s3Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n\n.mifa-s3 .s3-in{\n  position:relative; z-index:3; width:100%; max-width:1440px;\n  margin:0 auto; padding:0 var(--pad);\n}\n\n\/* ========================= SECTION HEAD ========================= *\/\n.mifa-s3 .s3-eye{\n  display:flex; align-items:center; gap:14px; margin-bottom:22px !important;\n  font-family:var(--m); font-size:11px; letter-spacing:.2em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-s3 .s3-eye b{ color:var(--red-hi); font-weight:400; }\n.mifa-s3 .s3-eye::after{ content:''; flex:1; max-width:130px; height:1px; background:var(--line); }\n\n.mifa-s3 h2.s3-h2{\n  max-width:20ch;\n  font-size:clamp(30px,5.4vw,68px); font-weight:900;\n  line-height:1.02; letter-spacing:-.04em; color:var(--ink);\n}\n.mifa-s3 .s3-h2 em{ font-style:normal; color:var(--red-hi); text-shadow:0 0 40px rgba(255,59,84,.45); }\n.mifa-s3 p.s3-lead{\n  max-width:60ch; margin-top:18px !important;\n  font-size:clamp(15px,1.3vw,17.5px); line-height:1.7; color:var(--soft);\n}\n.mifa-s3 .s3-lead b{ color:var(--ink); font-weight:600; }\n\n\/* ====================== PROCESS RAIL (3D) ====================== *\/\n.mifa-s3 .s3-rail{\n  display:grid; gap:clamp(14px,1.8vw,22px);\n  grid-template-columns:repeat(4,minmax(0,1fr));\n  margin-top:clamp(36px,5vh,58px); perspective:1200px;\n}\n.mifa-s3 .s3-step{\n  position:relative; padding:clamp(20px,2.4vw,28px);\n  border:1px solid var(--line); border-radius:14px;\n  background:linear-gradient(158deg, rgba(196,22,43,.1), rgba(16,16,23,.94));\n  transform-style:preserve-3d;\n  opacity:0; transform:translateY(30px) rotateX(-18deg); transform-origin:top center;\n  transition:opacity .8s var(--e), transform .8s var(--e), border-color .45s, box-shadow .5s;\n}\n.mifa-s3 .s3-step.on{ opacity:1; transform:none; }\n.mifa-s3 .s3-step__n{\n  display:inline-flex; align-items:center; justify-content:center;\n  width:38px; height:38px; margin-bottom:16px; border-radius:10px;\n  background:rgba(196,22,43,.18); border:1px solid rgba(255,59,84,.36);\n  font-family:var(--m); font-size:12px; letter-spacing:.06em; color:var(--red-hi);\n  transform:translateZ(24px);\n}\n.mifa-s3 h3.s3-step__t{\n  font-size:clamp(16px,1.6vw,20px); font-weight:800; letter-spacing:-.02em;\n  color:var(--ink); margin-bottom:9px !important; transform:translateZ(14px);\n}\n.mifa-s3 .s3-step p{ font-size:14.5px; line-height:1.65; color:var(--soft); }\n.mifa-s3 .s3-step::after{\n  content:''; position:absolute; top:38px; right:-13px; width:13px; height:1px;\n  background:rgba(255,59,84,.45);\n}\n.mifa-s3 .s3-step:last-child::after{ display:none; }\n\n\/* ==================== FLIP CARDS : CAPABILITIES ==================== *\/\n.mifa-s3 .s3-caps{ margin-top:clamp(70px,11vh,140px); }\n.mifa-s3 .s3-grid{\n  display:grid; gap:clamp(14px,1.8vw,22px);\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  margin-top:clamp(36px,5vh,58px);\n}\n.mifa-s3 .s3-flip{\n  position:relative; height:220px; perspective:1000px;\n  opacity:0; transform:translateY(26px);\n  transition:opacity .8s var(--e), transform .8s var(--e);\n}\n.mifa-s3 .s3-flip.on{ opacity:1; transform:none; }\n.mifa-s3 .s3-flip__in{\n  position:relative; width:100%; height:100%;\n  transform-style:preserve-3d; transition:transform .8s var(--e);\n}\n.mifa-s3 .s3-flip.flip .s3-flip__in{ transform:rotateY(180deg); }\n.mifa-s3 .s3-face{\n  position:absolute; inset:0; display:flex; flex-direction:column;\n  padding:clamp(20px,2.4vw,28px); border-radius:14px; border:1px solid var(--line);\n  backface-visibility:hidden; -webkit-backface-visibility:hidden;\n}\n.mifa-s3 .s3-face--f{\n  justify-content:space-between;\n  background:linear-gradient(158deg, rgba(196,22,43,.12), rgba(16,16,23,.94));\n}\n.mifa-s3 .s3-face--b{\n  transform:rotateY(180deg); justify-content:center; gap:12px;\n  background:linear-gradient(158deg, rgba(196,22,43,.32), rgba(12,12,17,.96));\n  border-color:rgba(255,59,84,.42);\n}\n.mifa-s3 .s3-ic{\n  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;\n  background:rgba(196,22,43,.2); border:1px solid rgba(255,59,84,.34);\n}\n.mifa-s3 .s3-ic svg{ width:20px; height:20px; stroke:var(--red-hi); fill:none; stroke-width:1.7; }\n.mifa-s3 h3.s3-face__t{\n  font-size:clamp(17px,1.7vw,21px); font-weight:800; letter-spacing:-.025em; color:var(--ink);\n}\n.mifa-s3 .s3-face--f .s3-hint{\n  margin-top:8px !important; font-family:var(--m); font-size:10px;\n  letter-spacing:.16em; text-transform:uppercase; color:var(--soft);\n}\n.mifa-s3 .s3-face--b p{ font-size:14.5px; line-height:1.65; color:rgba(242,240,238,.86); }\n.mifa-s3 .s3-face--b ul{ display:flex; flex-wrap:wrap; gap:7px; }\n.mifa-s3 .s3-face--b li{\n  padding:5px 11px; border-radius:999px; border:1px solid rgba(242,240,238,.25);\n  font-family:var(--m); font-size:10.5px; letter-spacing:.05em; color:var(--ink);\n}\n\n\/* ========================== CONTACT BAND ========================== *\/\n.mifa-s3 .s3-cta{\n  position:relative; margin-top:clamp(70px,11vh,140px);\n  border-top:1px solid var(--line);\n  background:linear-gradient(180deg, rgba(196,22,43,.1), transparent 60%);\n  padding:clamp(52px,8vh,96px) 0 clamp(40px,6vh,64px);\n}\n.mifa-s3 .s3-cta__grid{\n  display:grid; gap:clamp(28px,4vw,60px); align-items:start;\n  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);\n}\n.mifa-s3 .s3-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3.4vh,36px); }\n.mifa-s3 .s3-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-s3 .s3-btn span,.mifa-s3 .s3-btn svg{ position:relative; z-index:2; }\n.mifa-s3 .s3-btn svg{ width:16px; height:16px; flex-shrink:0; transition:transform .45s var(--e); }\n.mifa-s3 .s3-btn--fill{ background:var(--red); color:#fff; box-shadow:0 10px 34px rgba(196,22,43,.42); }\n.mifa-s3 .s3-btn--fill::before{\n  content:''; position:absolute; inset:0; background:var(--ink);\n  transform:translateY(101%); transition:transform .5s var(--e);\n}\n.mifa-s3 .s3-btn--line{ border:1px solid rgba(242,240,238,.26); color:var(--ink); }\n.mifa-s3 .s3-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.mifa-s3 .s3-cards{ display:grid; gap:12px; }\n.mifa-s3 .s3-adr{\n  padding:22px 24px; border:1px solid var(--line); border-radius:14px;\n  background:rgba(16,16,23,.8); transition:border-color .45s, transform .5s var(--e);\n}\n.mifa-s3 .s3-adr b{\n  display:block; font-family:var(--m); font-size:10px; letter-spacing:.18em;\n  text-transform:uppercase; color:var(--red-hi); margin-bottom:9px !important;\n}\n.mifa-s3 .s3-adr p{ font-size:15.5px; line-height:1.6; color:var(--ink); }\n.mifa-s3 .s3-adr a{ color:var(--ink); transition:color .3s; }\n.mifa-s3 .s3-adr span{ display:block; margin-top:7px; font-size:14px; color:var(--soft); }\n\n.mifa-s3 .s3-foot{\n  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;\n  gap:14px 26px; margin-top:clamp(38px,6vh,60px);\n  padding-top:22px; border-top:1px solid var(--line);\n  font-family:var(--m); font-size:11px; letter-spacing:.1em; color:var(--soft);\n}\n.mifa-s3 .s3-foot ul{ display:flex; flex-wrap:wrap; gap:18px; }\n.mifa-s3 .s3-foot a{ transition:color .3s; }\n\n\/* --------------------------- HOVER --------------------------- *\/\n@media (hover:hover) and (pointer:fine){\n  .mifa-s3 .s3-step:hover{\n    border-color:rgba(255,59,84,.45); box-shadow:0 20px 46px rgba(0,0,0,.5);\n    transform:translateY(-5px) rotateX(0deg);\n  }\n  .mifa-s3 .s3-flip:hover .s3-flip__in{ transform:rotateY(180deg); }\n  .mifa-s3 .s3-adr:hover{ border-color:rgba(255,59,84,.45); transform:translateY(-3px); }\n  .mifa-s3 .s3-adr a:hover,.mifa-s3 .s3-foot a:hover{ color:var(--red-hi); }\n  .mifa-s3 .s3-btn:hover{ transform:translateY(-4px); }\n  .mifa-s3 .s3-btn--fill:hover{ color:var(--bg); box-shadow:0 18px 46px rgba(196,22,43,.28); }\n  .mifa-s3 .s3-btn--fill:hover::before{ transform:translateY(0); }\n  .mifa-s3 .s3-btn--fill:hover svg{ transform:translateX(4px); }\n  .mifa-s3 .s3-btn--line:hover{ border-color:rgba(242,240,238,.55); }\n  .mifa-s3 .s3-btn--line:hover::before{ transform:scaleX(1); transform-origin:left; }\n}\n\n\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1040px){\n  .mifa-s3 .s3-rail{ grid-template-columns:repeat(2,minmax(0,1fr)); perspective:none; }\n  .mifa-s3 .s3-step::after{ display:none; }\n  .mifa-s3 .s3-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }\n  .mifa-s3 .s3-cta__grid{ grid-template-columns:1fr; }\n}\n@media (max-width:760px){\n  .mifa-s3 .s3-wrap{ padding-top:clamp(52px,8vh,80px); }\n  .mifa-s3 h2.s3-h2{ font-size:clamp(28px,8.6vw,42px); letter-spacing:-.03em; }\n  .mifa-s3 .s3-rail{ grid-template-columns:1fr; }\n  .mifa-s3 .s3-step{ transform:translateY(24px); }\n  .mifa-s3 .s3-grid{ grid-template-columns:1fr; }\n  .mifa-s3 .s3-flip{ height:200px; }\n  .mifa-s3 .s3-btns{ flex-direction:column; align-items:stretch; }\n  .mifa-s3 .s3-btn{ justify-content:center; }\n  .mifa-s3 .s3-grain{ opacity:.08; }\n  .mifa-s3 .s3-foot{ flex-direction:column; align-items:flex-start; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-s3 *,.mifa-s3 *::before,.mifa-s3 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-s3 .s3-step,.mifa-s3 .s3-flip{ opacity:1; transform:none; }\n}\n<\/style>\n\n<section class=\"s3-wrap\">\n  <div class=\"s3-orb\" aria-hidden=\"true\"><\/div>\n  <div class=\"s3-grain\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"s3-in\">\n\n    <!-- ===================== PROCESS ===================== -->\n    <div class=\"s3-eye\"><b>005<\/b> \/ How we work<\/div>\n    <h2 class=\"s3-h2\">Brief se master file tak, <em>char<\/em> steps.<\/h2>\n    <p class=\"s3-lead\">\n      Har project isi rhythm par chalta hai. Client ko har stage par ek\n      <b>single point of contact<\/b> milta hai &mdash; aur ek written schedule,\n      taaki koi bhi din guesswork par na jaaye.\n    <\/p>\n\n    <div class=\"s3-rail\">\n      <div class=\"s3-step\">\n        <div class=\"s3-step__n\">01<\/div>\n        <h3 class=\"s3-step__t\">Brief &amp; budget<\/h3>\n        <p>Idea, timeline aur budget lock. Aapko line-by-line estimate milta hai &mdash; koi hidden head nahi.<\/p>\n      <\/div>\n      <div class=\"s3-step\">\n        <div class=\"s3-step__n\">02<\/div>\n        <h3 class=\"s3-step__t\">Prep &amp; recce<\/h3>\n        <p>Locations, permissions, casting, crew aur gear. Call sheet shoot se pehle sabke haath me.<\/p>\n      <\/div>\n      <div class=\"s3-step\">\n        <div class=\"s3-step__n\">03<\/div>\n        <h3 class=\"s3-step__t\">On the floor<\/h3>\n        <p>Producer khud set par. Daily footage backup, daily update &mdash; aap kahin bhi ho, loop me rehte ho.<\/p>\n      <\/div>\n      <div class=\"s3-step\">\n        <div class=\"s3-step__n\">04<\/div>\n        <h3 class=\"s3-step__t\">Post &amp; delivery<\/h3>\n        <p>Edit, colour, sound, subtitles aur har platform ke liye alag export. Raw files bhi aapke.<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- ===================== CAPABILITIES ===================== -->\n    <div class=\"s3-caps\">\n      <div class=\"s3-eye\"><b>006<\/b> \/ What the studio brings<\/div>\n      <h2 class=\"s3-h2\">Ek chhat ke neeche <em>poori<\/em> production.<\/h2>\n      <p class=\"s3-lead\">Card par tap ya hover karke detail dekhein.<\/p>\n\n      <div class=\"s3-grid\">\n\n        <div class=\"s3-flip\"><button class=\"s3-flip__in\" type=\"button\" aria-label=\"Line production details\">\n          <div class=\"s3-face s3-face--f\">\n            <div class=\"s3-ic\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7h18v12H3z\"\/><path d=\"M3 7l3-4h12l3 4\"\/><path d=\"M8 3l-2 4M14 3l-2 4\"\/><\/svg><\/div>\n            <div><h3 class=\"s3-face__t\">Line Production<\/h3><div class=\"s3-hint\">Tap for detail<\/div><\/div>\n          <\/div>\n          <div class=\"s3-face s3-face--b\">\n            <p>Agency, brand ya foreign crew ke India shoot ka ground partner &mdash; end to end.<\/p>\n            <ul><li>Permissions<\/li><li>Fixers<\/li><li>Logistics<\/li><li>Local crew<\/li><\/ul>\n          <\/div>\n        <\/button><\/div>\n\n        <div class=\"s3-flip\"><button class=\"s3-flip__in\" type=\"button\" aria-label=\"Video production details\">\n          <div class=\"s3-face s3-face--f\">\n            <div class=\"s3-ic\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 6h12v12H3z\"\/><path d=\"M15 10l6-3v10l-6-3z\"\/><\/svg><\/div>\n            <div><h3 class=\"s3-face__t\">Video Production<\/h3><div class=\"s3-hint\">Tap for detail<\/div><\/div>\n          <\/div>\n          <div class=\"s3-face s3-face--b\">\n            <p>Concept, script, shoot aur post &mdash; poori film studio ke andar banti hai.<\/p>\n            <ul><li>TVC<\/li><li>Corporate<\/li><li>Digital<\/li><li>Explainer<\/li><\/ul>\n          <\/div>\n        <\/button><\/div>\n\n        <div class=\"s3-flip\"><button class=\"s3-flip__in\" type=\"button\" aria-label=\"Crew and casting details\">\n          <div class=\"s3-face s3-face--f\">\n            <div class=\"s3-ic\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"3.2\"\/><path d=\"M22 20v-2a4 4 0 0 0-3-3.8\"\/><path d=\"M17 3.3a4 4 0 0 1 0 7.4\"\/><\/svg><\/div>\n            <div><h3 class=\"s3-face__t\">Crew &amp; Casting<\/h3><div class=\"s3-hint\">Tap for detail<\/div><\/div>\n          <\/div>\n          <div class=\"s3-face s3-face--b\">\n            <p>Director se spot boy tak &mdash; verified crew, kisi bhi city me, short notice par.<\/p>\n            <ul><li>DOPs<\/li><li>Actors<\/li><li>Models<\/li><li>Stylists<\/li><\/ul>\n          <\/div>\n        <\/button><\/div>\n\n        <div class=\"s3-flip\"><button class=\"s3-flip__in\" type=\"button\" aria-label=\"Equipment and gear details\">\n          <div class=\"s3-face s3-face--f\">\n            <div class=\"s3-ic\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 8h11a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2z\"\/><path d=\"M17 12l5-3v9l-5-3\"\/><circle cx=\"8\" cy=\"13\" r=\"2.4\"\/><\/svg><\/div>\n            <div><h3 class=\"s3-face__t\">Equipment &amp; Gear<\/h3><div class=\"s3-hint\">Tap for detail<\/div><\/div>\n          <\/div>\n          <div class=\"s3-face s3-face--b\">\n            <p>Camera packages, lights, grip, drones aur vanity &mdash; trusted vendor network ke through.<\/p>\n            <ul><li>Camera<\/li><li>Lights<\/li><li>Grip<\/li><li>Drone<\/li><\/ul>\n          <\/div>\n        <\/button><\/div>\n\n        <div class=\"s3-flip\"><button class=\"s3-flip__in\" type=\"button\" aria-label=\"Locations and permissions details\">\n          <div class=\"s3-face s3-face--f\">\n            <div class=\"s3-ic\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z\"\/><circle cx=\"12\" cy=\"10\" r=\"2.6\"\/><\/svg><\/div>\n            <div><h3 class=\"s3-face__t\">Locations &amp; Permits<\/h3><div class=\"s3-hint\">Tap for detail<\/div><\/div>\n          <\/div>\n          <div class=\"s3-face s3-face--b\">\n            <p>Recce, negotiation aur government\/private permissions &mdash; paperwork humara sar dard.<\/p>\n            <ul><li>Recce<\/li><li>Permits<\/li><li>Police NOC<\/li><li>Society NOC<\/li><\/ul>\n          <\/div>\n        <\/button><\/div>\n\n        <div class=\"s3-flip\"><button class=\"s3-flip__in\" type=\"button\" aria-label=\"Post production details\">\n          <div class=\"s3-face s3-face--f\">\n            <div class=\"s3-ic\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16v16H4z\"\/><path d=\"M4 9h16M4 15h16\"\/><path d=\"M9 4v16M15 4v16\"\/><\/svg><\/div>\n            <div><h3 class=\"s3-face__t\">Post &amp; Delivery<\/h3><div class=\"s3-hint\">Tap for detail<\/div><\/div>\n          <\/div>\n          <div class=\"s3-face s3-face--b\">\n            <p>Edit, colour, mix, graphics aur har platform ke exact spec me final masters.<\/p>\n            <ul><li>Edit<\/li><li>Colour<\/li><li>Sound<\/li><li>Subtitles<\/li><\/ul>\n          <\/div>\n        <\/button><\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <!-- ===================== CONTACT BAND ===================== -->\n  <div class=\"s3-cta\" id=\"studio-contact\">\n    <div class=\"s3-in\">\n      <div class=\"s3-cta__grid\">\n\n        <div>\n          <div class=\"s3-eye\"><b>007<\/b> \/ Start a project<\/div>\n          <h2 class=\"s3-h2\">Aapka brief ready hai? <em>Slate<\/em> hum utha lete hain.<\/h2>\n          <p class=\"s3-lead\">\n            Date, city aur roughly kya banana hai &mdash; itna bata dijiye.\n            Hum usi din <b>availability aur ek clear estimate<\/b> bhej dete hain.\n          <\/p>\n\n          <div class=\"s3-btns\">\n            <a class=\"s3-btn s3-btn--fill\" href=\"https:\/\/wa.me\/918527121545?text=Hi%20Mifa%20Productions%2C%20I%27d%20like%20to%20discuss%20a%20project.\" target=\"_blank\" rel=\"noopener\">\n              <span>WhatsApp the Studio<\/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=\"s3-btn s3-btn--line\" href=\"mailto:mifaproductions@gmail.com\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" aria-hidden=\"true\"><path d=\"M3 6h18v12H3z\"\/><path d=\"m3 7 9 6 9-6\"\/><\/svg>\n              <span>Email Us<\/span>\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"s3-cards\">\n          <div class=\"s3-adr\">\n            <b>Studio Office<\/b>\n            <p>A-27K, Sector 16, Noida, Uttar Pradesh 201301<\/p>\n            <span>Planning, meetings &amp; pre-production<\/span>\n          <\/div>\n          <div class=\"s3-adr\">\n            <b>Registered Office<\/b>\n            <p>A-32, Second Floor, Mayur Vihar Phase-1, New Delhi 110091<\/p>\n            <span>Accounts &amp; documentation<\/span>\n          <\/div>\n          <div class=\"s3-adr\">\n            <b>Direct Line<\/b>\n            <p><a href=\"tel:+918527121545\">+91 85271 21545<\/a><\/p>\n            <span><a href=\"mailto:mifaproductions@gmail.com\">mifaproductions@gmail.com<\/a><\/span>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n      <div class=\"s3-foot\">\n        <span>&copy; <b id=\"s3Yr\">2026<\/b> Mifa Productions &middot; Delhi NCR<\/span>\n        <ul>\n          <li><a href=\"https:\/\/www.instagram.com\/mifaproduction\" target=\"_blank\" rel=\"noopener\">Instagram<\/a><\/li>\n          <li><a href=\"https:\/\/www.facebook.com\/mifaproductions\" target=\"_blank\" rel=\"noopener\">Facebook<\/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.threads.com\/@mifaproduction\" target=\"_blank\" rel=\"noopener\">Threads<\/a><\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var root = (document.currentScript && document.currentScript.closest)\n    ? document.currentScript.closest('.mifa-s3')\n    : document.querySelector('.mifa-s3');\n  if(!root) return;\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* ---------- year ---------- *\/\n  var yr = root.querySelector('#s3Yr');\n  if(yr) yr.textContent = new Date().getFullYear();\n\n  \/* ---------- scroll reveal ---------- *\/\n  var items = root.querySelectorAll('.s3-step, .s3-flip');\n  if(reduce || !('IntersectionObserver' in window)){\n    items.forEach(function(el){ el.classList.add('on'); });\n  } else {\n    var io = new IntersectionObserver(function(entries){\n      entries.forEach(function(en){\n        if(en.isIntersecting){ en.target.classList.add('on'); io.unobserve(en.target); }\n      });\n    }, {threshold:.18, rootMargin:'0px 0px -6% 0px'});\n    items.forEach(function(el, i){ el.style.transitionDelay = (i % 4) * 0.08 + 's'; io.observe(el); });\n  }\n\n  \/* ---------- flip cards : tap \/ keyboard ---------- *\/\n  root.querySelectorAll('.s3-flip').forEach(function(card){\n    var btn = card.querySelector('.s3-flip__in');\n    if(!btn) return;\n    btn.addEventListener('click', function(){ card.classList.toggle('flip'); });\n    btn.addEventListener('focus', function(){ card.classList.add('flip'); });\n    btn.addEventListener('blur',  function(){ card.classList.remove('flip'); });\n  });\n})();\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>MIFAPRODUCTIONS The Studio Home Studio Services Work Clients Contact IG FB LN Menu 001 Home 002 Studio 003 Services 004 [&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-347","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\/347","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=347"}],"version-history":[{"count":2,"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/pages\/347\/revisions"}],"predecessor-version":[{"id":364,"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/pages\/347\/revisions\/364"}],"wp:attachment":[{"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/media?parent=347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}