{"id":351,"date":"2026-08-10T07:48:30","date_gmt":"2026-08-10T07:48:30","guid":{"rendered":"https:\/\/mifaproduction.com\/?page_id=351"},"modified":"2026-08-10T13:23:01","modified_gmt":"2026-08-10T13:23:01","slug":"client","status":"publish","type":"page","link":"https:\/\/mifaproduction.com\/index.php\/client\/","title":{"rendered":"Client"},"content":{"rendered":"\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 CLIENTS PAGE \u00b7 PART 1  (ENGLISH)\n     NAV + MENU OVERLAY + HERO (3D cinema credits roll)\n\n     Paste the whole thing into a WordPress \"Custom HTML\" block.\n     Everything is scoped inside .mifa-c1\n     ============================================================ -->\n\n<div class=\"mifa-c1\">\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-c1{\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  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-c1 *,.mifa-c1 *::before,.mifa-c1 *::after{ box-sizing:border-box; }\n.mifa-c1 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-c1 a:hover,.mifa-c1 a:focus{ text-decoration:none !important; }\n.mifa-c1 h1,.mifa-c1 h2,.mifa-c1 h3,.mifa-c1 p,.mifa-c1 ul,.mifa-c1 li,.mifa-c1 dl,.mifa-c1 dt,.mifa-c1 dd{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-c1 ul{ list-style:none !important; }\n.mifa-c1 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-c1 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-c1 button:hover,.mifa-c1 button:focus{ background:none; }\n.mifa-c1 svg{ display:block; }\n.mifa-c1 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\nbody.admin-bar .mifa-c1 .c1-nav{ top:32px; }\n@media (max-width:782px){ body.admin-bar .mifa-c1 .c1-nav{ top:46px; } }\n\n\/* ============================= NAV ============================= *\/\n.mifa-c1 .c1-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-c1 .c1-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-c1 .c1-logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; min-width:0; perspective:500px; }\n.mifa-c1 .c1-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-c1 .c1-mark img{ position:absolute; max-width:none; width:237.5%; height:237.5%; left:-62.2%; top:-54.6%; }\n.mifa-c1 .c1-nav.stuck .c1-mark{ width:34px; height:34px; }\n.mifa-c1 .c1-word{ display:flex; flex-direction:column; line-height:1.08; min-width:0; }\n.mifa-c1 .c1-word b{ font-size:14px; font-weight:800; letter-spacing:.1em; }\n.mifa-c1 .c1-word i{ font-style:normal; font-size:9.5px; font-weight:400; letter-spacing:.2em; color:var(--soft); }\n\n.mifa-c1 .c1-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-c1 .c1-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:c1Blink 1.6s ease-in-out infinite;\n}\n@keyframes c1Blink{ 0%,100%{opacity:1} 50%{opacity:.12} }\n\n.mifa-c1 .c1-right{ display:flex; align-items:center; gap:22px; flex-shrink:0; }\n.mifa-c1 .c1-soc{ display:flex; gap:14px; }\n.mifa-c1 .c1-soc a{ font-family:var(--m); font-size:10.5px; letter-spacing:.14em; color:var(--soft); transition:color .3s; }\n\n.mifa-c1 .c1-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-c1 .c1-menu__t{ transition:color .3s; }\n.mifa-c1 .c1-burg{ display:block !important; position:relative; width:26px; height:12px; flex-shrink:0; }\n.mifa-c1 .c1-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-c1 .c1-burg i:nth-child(1){ top:0 }\n.mifa-c1 .c1-burg i:nth-child(2){ top:10px }\n.mifa-c1 .c1-menu.open .c1-burg i:nth-child(1){ transform:translateY(5px) rotate(45deg) }\n.mifa-c1 .c1-menu.open .c1-burg i:nth-child(2){ transform:translateY(-5px) rotate(-45deg) }\n\n\/* -------------------------- MENU OVERLAY -------------------------- *\/\n.mifa-c1 .c1-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-c1 .c1-ov.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }\n.mifa-c1 .c1-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-c1 .c1-ov.open .c1-ov__l{ opacity:1; transform:none; }\n.mifa-c1 .c1-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-c1 .c1-ov__l.here{ color:var(--red-hi); }\n.mifa-c1 .c1-ov.open .c1-ov__l:nth-of-type(1){ transition-delay:.18s }\n.mifa-c1 .c1-ov.open .c1-ov__l:nth-of-type(2){ transition-delay:.24s }\n.mifa-c1 .c1-ov.open .c1-ov__l:nth-of-type(3){ transition-delay:.30s }\n.mifa-c1 .c1-ov.open .c1-ov__l:nth-of-type(4){ transition-delay:.36s }\n.mifa-c1 .c1-ov.open .c1-ov__l:nth-of-type(5){ transition-delay:.42s }\n.mifa-c1 .c1-ov.open .c1-ov__l:nth-of-type(6){ transition-delay:.48s }\n.mifa-c1 .c1-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-c1 .c1-ov__f a{ color:var(--red-hi); }\n\n\/* ============================== HERO ============================== *\/\n.mifa-c1 .c1-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-c1 .c1-orb{ position:absolute; z-index:0; border-radius:50%; pointer-events:none; }\n.mifa-c1 .c1-orb--a{\n  width:72vmax; height:72vmax; top:-34vmax; left:-24vmax;\n  background:radial-gradient(circle, rgba(196,22,43,.28) 0%, rgba(196,22,43,.06) 34%, transparent 62%);\n  animation:c1Drift 23s ease-in-out infinite alternate;\n}\n.mifa-c1 .c1-orb--b{\n  width:58vmax; height:58vmax; bottom:-28vmax; right:-22vmax;\n  background:radial-gradient(circle, rgba(122,12,24,.34) 0%, transparent 58%);\n  animation:c1Drift 30s ease-in-out infinite alternate-reverse;\n}\n@keyframes c1Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(6%,6%,0) scale(1.16)} }\n\n.mifa-c1 .c1-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='nc1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nc1)'\/%3E%3C\/svg%3E\");\n  animation:c1Grain .7s steps(3) infinite;\n}\n@keyframes c1Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n.mifa-c1 .c1-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,.72) 100%);\n}\n.mifa-c1 .c1-ghost{\n  position:absolute; z-index:1; left:50%; top:44%; translate:-50% -50%;\n  font-size:clamp(110px,22vw,360px); 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-c1.live .c1-ghost{ opacity:1; }\n\n\/* ---- hero grid ---- *\/\n.mifa-c1 .c1-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.04fr) minmax(0,.96fr);\n  width:100%; max-width:1660px; margin:0 auto;\n  padding:clamp(30px,5.5vh,64px) var(--pad);\n  perspective:1300px;\n}\n.mifa-c1 .c1-copy{ min-width:0; transform-style:preserve-3d; will-change:transform; }\n\n.mifa-c1 .c1-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-c1 .c1-crumb a{ transition:color .3s; }\n.mifa-c1 .c1-crumb b{ color:var(--red-hi); font-weight:400; }\n\n.mifa-c1 .c1-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-c1 .c1-tag b{ color:var(--red-hi); font-weight:400; }\n.mifa-c1 .c1-tag::after{ content:''; flex:1; max-width:110px; height:1px; background:var(--line); }\n\n.mifa-c1 h1.c1-h1{\n  margin:0 0 clamp(22px,3.4vh,38px) !important;\n  font-size:clamp(40px,8.4vw,134px); font-weight:900;\n  line-height:.94; letter-spacing:-.045em; color:var(--ink);\n  transform:translateZ(64px);\n}\n.mifa-c1 .c1-h1 .l{ display:block; overflow:hidden; }\n.mifa-c1 .c1-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-c1.live .c1-h1 .l > span{ transform:none; }\n.mifa-c1.live .c1-h1 .l:nth-child(1) > span{ transition-delay:.10s }\n.mifa-c1.live .c1-h1 .l:nth-child(2) > span{ transition-delay:.20s }\n.mifa-c1 .c1-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-c1 p.c1-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-c1 .c1-sub b{ color:var(--ink); font-weight:600; }\n\n.mifa-c1 .c1-meta{ display:flex; flex-wrap:wrap; gap:10px; transform:translateZ(22px); }\n.mifa-c1 .c1-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-c1 .c1-meta span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--red); flex-shrink:0; }\n\n.mifa-c1 .c1-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3.6vh,40px); transform:translateZ(46px); }\n.mifa-c1 .c1-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-c1 .c1-btn span,.mifa-c1 .c1-btn svg{ position:relative; z-index:2; }\n.mifa-c1 .c1-btn svg{ width:16px; height:16px; flex-shrink:0; transition:transform .45s var(--e); }\n.mifa-c1 .c1-btn--fill{ background:var(--red); color:#fff; box-shadow:0 10px 34px rgba(196,22,43,.42); }\n.mifa-c1 .c1-btn--fill::before{\n  content:''; position:absolute; inset:0; background:var(--ink);\n  transform:translateY(101%); transition:transform .5s var(--e);\n}\n.mifa-c1 .c1-btn--line{ border:1px solid rgba(242,240,238,.26); color:var(--ink); }\n.mifa-c1 .c1-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 CINEMA CREDITS ROLL ============ *\/\n.mifa-c1 .c1-stage{\n  position:relative; justify-self:center; width:min(100%,460px); min-width:0;\n  display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2.4vw,24px);\n}\n.mifa-c1 .c1-screen{\n  position:relative; width:100%; height:clamp(300px,46vh,430px);\n  border-radius:16px; overflow:hidden;\n  border:1px solid rgba(255,59,84,.3);\n  background:linear-gradient(180deg, rgba(12,12,17,.98), rgba(7,7,10,1));\n  box-shadow:0 34px 80px rgba(0,0,0,.7), inset 0 0 60px rgba(196,22,43,.1);\n  perspective:420px; perspective-origin:50% 100%;\n}\n.mifa-c1 .c1-screen::before{\n  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;\n  background:linear-gradient(180deg, rgba(7,7,10,.98) 0%, transparent 26%, transparent 62%, rgba(7,7,10,.98) 100%);\n}\n\/* projector scanlines *\/\n.mifa-c1 .c1-screen::after{\n  content:''; position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.28;\n  background:repeating-linear-gradient(180deg, rgba(0,0,0,.5) 0 1px, transparent 1px 4px);\n}\n.mifa-c1 .c1-roll{\n  position:absolute; left:0; right:0; top:0;\n  transform:rotateX(30deg); transform-origin:50% 100%;\n  padding:0 clamp(18px,4vw,34px);\n  animation:c1Roll 26s linear infinite;\n}\n@keyframes c1Roll{ from{ transform:rotateX(30deg) translateY(0) } to{ transform:rotateX(30deg) translateY(-50%) } }\n\n.mifa-c1 .c1-credit{\n  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:6px 16px;\n  padding:13px 0; border-bottom:1px solid rgba(242,240,238,.07);\n}\n.mifa-c1 .c1-credit dt{\n  font-family:var(--m); font-size:9.5px; letter-spacing:.18em;\n  text-transform:uppercase; color:var(--red-hi); grid-column:1\/-1;\n}\n.mifa-c1 .c1-credit dd{\n  grid-column:1\/-1; font-size:clamp(15px,2vw,19px); font-weight:700;\n  letter-spacing:-.02em; color:var(--ink);\n}\n.mifa-c1 .c1-credit dd small{\n  display:block; margin-top:3px; font-size:11.5px; font-weight:400;\n  letter-spacing:0; color:var(--soft);\n}\n\n.mifa-c1 .c1-badge{\n  position:absolute; z-index:6; left:14px; top:14px;\n  display:flex; align-items:center; gap:8px;\n  padding:7px 13px; border-radius:999px;\n  background:rgba(7,7,10,.7); border:1px solid rgba(255,59,84,.4);\n  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);\n  font-family:var(--m); font-size:9.5px; letter-spacing:.18em;\n  text-transform:uppercase; color:var(--soft);\n}\n.mifa-c1 .c1-badge i{\n  width:6px; height:6px; border-radius:50%; background:var(--red-hi);\n  box-shadow:0 0 9px 1px rgba(255,59,84,.8); animation:c1Blink 1.6s ease-in-out infinite;\n}\n\n.mifa-c1 .c1-cap{\n  width:100%; padding-top:16px; 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-c1 .c1-cap b{ color:var(--ink); font-weight:500; }\n\n\/* --------------------------- MARQUEE --------------------------- *\/\n.mifa-c1 .c1-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-c1 .c1-marq__t{ display:inline-flex; align-items:center; animation:c1Slide 33s linear infinite; }\n.mifa-c1 .c1-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-c1 .c1-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 c1Slide{ to{ transform:translateX(-50%) } }\n\n\/* -------------------------- SCROLL CUE -------------------------- *\/\n.mifa-c1 .c1-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-c1 .c1-scr i{\n  writing-mode:horizontal-tb; width:1px; height:46px;\n  background:linear-gradient(var(--red-hi),transparent); animation:c1Cue 2s ease-in-out infinite;\n}\n@keyframes c1Cue{ 0%,100%{transform:scaleY(.3); opacity:.35} 50%{transform:scaleY(1); opacity:1} }\n\n\/* reveal *\/\n.mifa-c1 .rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e), transform .9s var(--e); }\n.mifa-c1.live .rv{ opacity:1; transform:none; }\n.mifa-c1.live .a1{ transition-delay:.16s } .mifa-c1.live .a2{ transition-delay:.26s }\n.mifa-c1.live .a3{ transition-delay:.34s } .mifa-c1.live .a4{ transition-delay:.42s }\n.mifa-c1.live .a5{ transition-delay:.12s }\n\n\/* --------------------------- HOVER --------------------------- *\/\n@media (hover:hover) and (pointer:fine){\n  .mifa-c1 .c1-logo:hover .c1-mark{ transform:rotateY(28deg) rotateX(-8deg) scale(1.06); }\n  .mifa-c1 .c1-soc a:hover{ color:var(--red-hi); }\n  .mifa-c1 .c1-crumb a:hover{ color:var(--red-hi); }\n  .mifa-c1 .c1-menu:hover .c1-menu__t{ color:var(--red-hi); }\n  .mifa-c1 .c1-ov__l:hover{ color:var(--red-hi); }\n  .mifa-c1 .c1-meta span:hover{ border-color:rgba(255,59,84,.5); color:var(--ink); transform:translateY(-3px); }\n  .mifa-c1 .c1-btn:hover{ transform:translateY(-4px); }\n  .mifa-c1 .c1-btn--fill:hover{ color:var(--bg); box-shadow:0 18px 46px rgba(196,22,43,.28); }\n  .mifa-c1 .c1-btn--fill:hover::before{ transform:translateY(0); }\n  .mifa-c1 .c1-btn--fill:hover svg{ transform:translateX(4px); }\n  .mifa-c1 .c1-btn--line:hover{ border-color:rgba(242,240,238,.55); }\n  .mifa-c1 .c1-btn--line:hover::before{ transform:scaleX(1); transform-origin:left; }\n  .mifa-c1 .c1-marq:hover .c1-marq__t{ animation-play-state:paused; }\n  .mifa-c1 .c1-screen:hover .c1-roll{ animation-play-state:paused; }\n}\n\n\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1040px){\n  .mifa-c1 .c1-in{ grid-template-columns:1fr; perspective:none; }\n  .mifa-c1 .c1-copy{ transform-style:flat; }\n  .mifa-c1 .c1-crumb,.mifa-c1 .c1-tag,\n  .mifa-c1 h1.c1-h1,.mifa-c1 p.c1-sub,\n  .mifa-c1 .c1-meta,.mifa-c1 .c1-btns{ transform:none !important; }\n  .mifa-c1 .c1-stage{ order:-1; align-self:start; width:100%; }\n  .mifa-c1 .c1-scr{ display:none; }\n}\n@media (max-width:760px){\n  .mifa-c1{ --nav-h:64px; }\n  .mifa-c1 .c1-rec,.mifa-c1 .c1-soc{ display:none; }\n  .mifa-c1 .c1-menu__t{ display:none; }\n  .mifa-c1 .c1-menu{ padding:16px 9px; margin:-16px -9px; }\n  .mifa-c1 .c1-hero{ min-height:auto; }\n  .mifa-c1 .c1-in{ padding-top:28px; padding-bottom:42px; gap:28px; }\n  .mifa-c1 h1.c1-h1{ font-size:clamp(36px,11vw,60px); letter-spacing:-.034em; }\n  .mifa-c1 .c1-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-c1 .c1-screen{ height:clamp(260px,44vh,340px); }\n  .mifa-c1 .c1-btns{ flex-direction:column; align-items:stretch; }\n  .mifa-c1 .c1-btn{ justify-content:center; }\n  .mifa-c1 .c1-marq__t span{ font-size:16px; gap:22px; padding-right:22px; }\n  .mifa-c1 .c1-word i{ display:none; }\n  .mifa-c1 .c1-grain{ opacity:.1; }\n  .mifa-c1 .c1-ghost{ display:none; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-c1 *,.mifa-c1 *::before,.mifa-c1 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-c1 .rv{ opacity:1; transform:none; }\n  .mifa-c1 .c1-h1 .l > span{ transform:none; }\n  .mifa-c1 .c1-roll{ animation:none; transform:rotateX(0deg); }\n}\n<\/style>\n\n<!-- =============================== NAV =============================== -->\n<header class=\"c1-nav\" id=\"c1Nav\">\n  <a href=\"https:\/\/mifaproduction.com\/index.php\/home\/\" class=\"c1-logo\" aria-label=\"Mifa Productions \u2014 home\">\n    <span class=\"c1-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=\"c1-word\"><b>MIFA<\/b><i>PRODUCTIONS<\/i><\/span>\n  <\/a>\n\n  <div class=\"c1-rec\"><i><\/i> Clients<\/div>\n\n  <div class=\"c1-right\">\n    <div class=\"c1-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=\"c1-menu\" id=\"c1MenuBtn\" aria-expanded=\"false\" aria-controls=\"c1Ov\" aria-label=\"Open menu\">\n      <span class=\"c1-menu__t\">Menu<\/span>\n      <span class=\"c1-burg\"><i><\/i><i><\/i><\/span>\n    <\/button>\n  <\/div>\n<\/header>\n\n<!-- =========================== MENU OVERLAY =========================== -->\n<div class=\"c1-ov\" id=\"c1Ov\">\n  <a class=\"c1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/home\/\"><em>001<\/em> Home<\/a>\n  <a class=\"c1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/studio\/\"><em>002<\/em> Studio<\/a>\n  <a class=\"c1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/services\/\"><em>003<\/em> Services<\/a>\n  <a class=\"c1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/work\/\"><em>004<\/em> Work<\/a>\n  <a class=\"c1-ov__l here\" href=\"#clients\"><em>005<\/em> Clients<\/a>\n  <a class=\"c1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/contact\/\"><em>006<\/em> Contact<\/a>\n  <div class=\"c1-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=\"c1-hero\" id=\"clients\">\n  <div class=\"c1-orb c1-orb--a\" aria-hidden=\"true\"><\/div>\n  <div class=\"c1-orb c1-orb--b\" aria-hidden=\"true\"><\/div>\n  <div class=\"c1-ghost\" aria-hidden=\"true\">CLIENTS<\/div>\n  <div class=\"c1-grain\" aria-hidden=\"true\"><\/div>\n  <div class=\"c1-vig\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"c1-in\">\n\n    <div class=\"c1-copy\" id=\"c1Copy\">\n      <div class=\"c1-crumb rv a5\">\n        <a href=\"https:\/\/mifaproduction.com\/index.php\/home\/\">Home<\/a>\n        <span>\/<\/span><b>Clients<\/b>\n      <\/div>\n\n      <div class=\"c1-tag rv a1\"><b>005<\/b> \/ Clients &amp; partners<\/div>\n\n      <h1 class=\"c1-h1\">\n        <span class=\"l\"><span>The People<\/span><\/span>\n        <span class=\"l\"><span>We Roll <em>For<\/em>.<\/span><\/span>\n      <\/h1>\n\n      <p class=\"c1-sub rv a2\">\n        Ad agencies, direct brands, production houses and crews flying in from abroad &mdash;\n        every one of them works differently. Mifa <b>fits into whichever setup you run<\/b>,\n        whether you&#8217;re handing over the whole project or just the ground support.\n      <\/p>\n\n      <div class=\"c1-meta rv a3\">\n        <span>Agencies<\/span>\n        <span>Direct brands<\/span>\n        <span>Visiting crews<\/span>\n      <\/div>\n\n      <div class=\"c1-btns rv a4\">\n        <a class=\"c1-btn c1-btn--fill\" href=\"#client-wall\">\n          <span>See the Client Wall<\/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=\"c1-btn c1-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>View the Work<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- ---------- 3D CREDITS ROLL ---------- -->\n    <div class=\"c1-stage rv a5\">\n      <div class=\"c1-screen\" aria-hidden=\"true\">\n        <span class=\"c1-badge\"><i><\/i> End Credits<\/span>\n        <dl class=\"c1-roll\" id=\"c1Roll\" data-dup>\n          <div class=\"c1-credit\">\n            <dt>Advertising Agencies<\/dt>\n            <dd>Campaign shoots<small>Delhi NCR &middot; Mumbai &middot; outstation<\/small><\/dd>\n          <\/div>\n          <div class=\"c1-credit\">\n            <dt>Direct Brands<\/dt>\n            <dd>Brand &amp; product films<small>Concept through to delivery<\/small><\/dd>\n          <\/div>\n          <div class=\"c1-credit\">\n            <dt>Production Houses<\/dt>\n            <dd>Line production support<small>Crew, gear, permissions<\/small><\/dd>\n          <\/div>\n          <div class=\"c1-credit\">\n            <dt>Visiting Crews<\/dt>\n            <dd>India fixing<small>Permits, transport, local team<\/small><\/dd>\n          <\/div>\n          <div class=\"c1-credit\">\n            <dt>Corporates &amp; PSUs<\/dt>\n            <dd>Plant, profile &amp; AV films<small>Documentation &amp; internal comms<\/small><\/dd>\n          <\/div>\n          <div class=\"c1-credit\">\n            <dt>Startups<\/dt>\n            <dd>Launch &amp; explainer content<small>Lean crews, fast turnaround<\/small><\/dd>\n          <\/div>\n        <\/dl>\n      <\/div>\n\n      <div class=\"c1-cap\">\n        <b>Engagement on your terms.<\/b> The full project, or only the part\n        where you need a crew on the ground.\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"c1-scr\">Scroll<i><\/i><\/div>\n\n  <div class=\"c1-marq\">\n    <div class=\"c1-marq__t\" id=\"c1Marq\">\n      <span>Agency Partners<\/span><span>Brand Direct<\/span><span>Line Production<\/span>\n      <span>Repeat Clients<\/span><span>Pan-India Crews<\/span><span>Fixed Estimates<\/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-c1')\n    : document.querySelector('.mifa-c1');\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);\n\n  \/* ---------------- nav ---------------- *\/\n  var nav = q('#c1Nav');\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('#c1MenuBtn'), ov = q('#c1Ov');\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  \/* ------- credits roll: duplicated for a seamless loop ------- *\/\n  var roll = q('#c1Roll');\n  if(roll) roll.innerHTML += roll.innerHTML;\n\n  \/* ------- hero parallax : desktop mouse only ------- *\/\n  var desktop = window.matchMedia('(hover:hover) and (pointer:fine) and (min-width:1041px)').matches;\n  if(!reduce && desktop){\n    var copy = q('#c1Copy'), mx=0,my=0,tx=0,ty=0;\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    (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      requestAnimationFrame(loop);\n    })();\n  }\n  window.addEventListener('resize', function(){\n    if(window.innerWidth <= 1040){ var c = q('#c1Copy'); if(c) c.style.transform = ''; }\n  }, {passive:true});\n\n  \/* ---------------- marquee ---------------- *\/\n  var t = q('#c1Marq');\n  if(t) t.innerHTML += t.innerHTML;\n})();\n<\/script>\n<\/div>\n\n\n\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 CLIENTS PAGE \u00b7 PART 2\n     ENGAGEMENT TYPES (3D flip-in cards) + CLIENT LOGO WALL\n\n     WordPress \"Custom HTML\" block me poora paste karo.\n     Sab kuch .mifa-c2 me scoped hai.\n\n     >>> LOGO WALL <<<\n     Neeche har tile abhi khaali (ghost) hai. Jab client logo de,\n     tile ke andar bas itna daal dena:\n        <img decoding=\"async\" src=\"LOGO-URL.png\" alt=\"Brand name\">\n     aur us tile se class \"is-empty\" hata dena. Bas.\n     ============================================================ -->\n\n<div class=\"mifa-c2\">\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-c2{\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-c2 *,.mifa-c2 *::before,.mifa-c2 *::after{ box-sizing:border-box; }\n.mifa-c2 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-c2 a:hover,.mifa-c2 a:focus{ text-decoration:none !important; }\n.mifa-c2 h2,.mifa-c2 h3,.mifa-c2 h4,.mifa-c2 p,.mifa-c2 ul,.mifa-c2 li{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-c2 ul{ list-style:none !important; }\n.mifa-c2 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-c2 svg{ display:block; }\n.mifa-c2 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\n\/* ======================== SHELL \/ AMBIENT ======================== *\/\n.mifa-c2 .c2-wrap{\n  position:relative; padding:clamp(64px,10vh,132px) 0; isolation:isolate;\n  border-bottom:1px solid var(--line);\n}\n.mifa-c2 .c2-orb{\n  position:absolute; z-index:0; border-radius:50%; pointer-events:none;\n  width:60vmax; height:60vmax; top:-24vmax; right:-22vmax;\n  background:radial-gradient(circle, rgba(196,22,43,.2) 0%, transparent 60%);\n  animation:c2Drift 25s ease-in-out infinite alternate;\n}\n@keyframes c2Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-7%,6%,0) scale(1.16)} }\n.mifa-c2 .c2-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='nc2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nc2)'\/%3E%3C\/svg%3E\");\n  animation:c2Grain .7s steps(3) infinite;\n}\n@keyframes c2Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n\n.mifa-c2 .c2-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-c2 .c2-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-c2 .c2-eye b{ color:var(--red-hi); font-weight:400; }\n.mifa-c2 .c2-eye::after{ content:''; flex:1; max-width:130px; height:1px; background:var(--line); }\n\n.mifa-c2 h2.c2-h2{\n  max-width:20ch; font-size:clamp(30px,5.4vw,68px); font-weight:900;\n  line-height:1.02; letter-spacing:-.04em; color:var(--ink);\n}\n.mifa-c2 .c2-h2 em{ font-style:normal; color:var(--red-hi); text-shadow:0 0 40px rgba(255,59,84,.45); }\n.mifa-c2 p.c2-lead{\n  max-width:62ch; margin-top:18px !important;\n  font-size:clamp(15px,1.3vw,17.5px); line-height:1.7; color:var(--soft);\n}\n.mifa-c2 .c2-lead b{ color:var(--ink); font-weight:600; }\n\n\/* ==================== ENGAGEMENT CARDS (3D) ==================== *\/\n.mifa-c2 .c2-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); perspective:1400px;\n}\n.mifa-c2 .c2-card{\n  position:relative; padding:clamp(22px,2.6vw,32px);\n  border:1px solid var(--line); border-radius:16px; overflow:hidden;\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) rotateY(-14deg); transform-origin:left center;\n  transition:opacity .85s var(--e), transform .85s var(--e), border-color .45s, box-shadow .5s;\n}\n.mifa-c2 .c2-card.on{ opacity:1; transform:none; }\n.mifa-c2 .c2-card::before{\n  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;\n  background:linear-gradient(180deg, var(--red-hi), transparent);\n  opacity:0; transition:opacity .45s;\n}\n.mifa-c2 .c2-card.on::before{ opacity:1; }\n\n.mifa-c2 .c2-num{\n  display:inline-flex; align-items:center; gap:10px; margin-bottom:16px !important;\n  font-family:var(--m); font-size:10px; letter-spacing:.2em;\n  text-transform:uppercase; color:var(--red-hi); transform:translateZ(22px);\n}\n.mifa-c2 .c2-num::after{ content:''; width:26px; height:1px; background:rgba(255,59,84,.5); }\n\n.mifa-c2 h3.c2-t{\n  font-size:clamp(18px,1.9vw,23px); font-weight:800; letter-spacing:-.025em;\n  color:var(--ink); margin-bottom:10px !important; transform:translateZ(16px);\n}\n.mifa-c2 .c2-card p{\n  font-size:14.5px; line-height:1.68; color:var(--soft);\n  padding-bottom:16px !important; margin-bottom:16px !important;\n  border-bottom:1px dashed rgba(242,240,238,.14);\n}\n.mifa-c2 .c2-card p b{ color:var(--ink); font-weight:600; }\n.mifa-c2 .c2-card ul{ display:flex; flex-wrap:wrap; gap:7px; }\n.mifa-c2 .c2-card li{\n  padding:5px 11px; border-radius:999px; border:1px solid var(--line);\n  background:rgba(242,240,238,.03);\n  font-family:var(--m); font-size:10px; letter-spacing:.08em; color:var(--soft);\n}\n\n\/* ========================= LOGO WALL ========================= *\/\n.mifa-c2 .c2-wall{ margin-top:clamp(70px,11vh,140px); }\n.mifa-c2 .c2-logos{\n  display:grid; gap:1px; margin-top:clamp(34px,5vh,52px);\n  grid-template-columns:repeat(5,minmax(0,1fr));\n  background:var(--line); border:1px solid var(--line);\n  border-radius:16px; overflow:hidden;\n}\n.mifa-c2 .c2-tile{\n  position:relative; display:flex; align-items:center; justify-content:center;\n  min-height:clamp(96px,11vw,132px); padding:18px; background:var(--bg-2);\n  opacity:0; transform:scale(.94);\n  transition:opacity .7s var(--e), transform .7s var(--e), background .4s, box-shadow .4s;\n}\n.mifa-c2 .c2-tile.on{ opacity:1; transform:none; }\n.mifa-c2 .c2-tile img{ max-height:52px; width:auto; filter:grayscale(1) brightness(1.7); opacity:.82; transition:filter .45s, opacity .45s; }\n\n\/* khaali slot ka look *\/\n.mifa-c2 .c2-tile.is-empty::before{\n  content:''; position:absolute; inset:16px; border-radius:10px;\n  border:1px dashed rgba(242,240,238,.16);\n}\n.mifa-c2 .c2-tile.is-empty span{\n  position:relative; font-family:var(--m); font-size:9.5px; letter-spacing:.18em;\n  text-transform:uppercase; color:rgba(242,240,238,.28);\n}\n\n\/* CTA tile *\/\n.mifa-c2 .c2-tile--cta{\n  background:linear-gradient(158deg, rgba(196,22,43,.3), rgba(12,12,17,.95));\n  text-align:center;\n}\n.mifa-c2 .c2-tile--cta b{\n  display:block; font-size:14.5px; font-weight:800; letter-spacing:-.02em; color:var(--ink);\n}\n.mifa-c2 .c2-tile--cta i{\n  display:block; margin-top:5px; font-style:normal; font-family:var(--m);\n  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--red-hi);\n}\n\n.mifa-c2 .c2-note{\n  margin-top:20px !important; font-family:var(--m); font-size:11px;\n  letter-spacing:.08em; line-height:1.7; color:var(--soft);\n}\n\n\/* --------------------------- HOVER --------------------------- *\/\n@media (hover:hover) and (pointer:fine){\n  .mifa-c2 .c2-card:hover{\n    border-color:rgba(255,59,84,.45); transform:translateY(-5px);\n    box-shadow:0 24px 54px rgba(0,0,0,.5);\n  }\n  .mifa-c2 .c2-tile:hover{ background:rgba(196,22,43,.12); }\n  .mifa-c2 .c2-tile:hover img{ filter:none; opacity:1; }\n  .mifa-c2 .c2-tile--cta:hover{ background:linear-gradient(158deg, rgba(196,22,43,.5), rgba(12,12,17,.95)); }\n}\n\n\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1040px){\n  .mifa-c2 .c2-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); perspective:none; }\n  .mifa-c2 .c2-card{ transform-style:flat; }\n  .mifa-c2 .c2-logos{ grid-template-columns:repeat(3,minmax(0,1fr)); }\n}\n@media (max-width:700px){\n  .mifa-c2 .c2-wrap{ padding:clamp(52px,8vh,80px) 0; }\n  .mifa-c2 h2.c2-h2{ font-size:clamp(28px,8.6vw,42px); letter-spacing:-.03em; }\n  .mifa-c2 .c2-grid{ grid-template-columns:1fr; }\n  .mifa-c2 .c2-card{ transform:translateY(24px); }\n  .mifa-c2 .c2-logos{ grid-template-columns:repeat(2,minmax(0,1fr)); }\n  .mifa-c2 .c2-grain{ opacity:.08; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-c2 *,.mifa-c2 *::before,.mifa-c2 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-c2 .c2-card,.mifa-c2 .c2-tile{ opacity:1; transform:none; }\n}\n<\/style>\n\n<section class=\"c2-wrap\" id=\"client-wall\">\n  <div class=\"c2-orb\" aria-hidden=\"true\"><\/div>\n  <div class=\"c2-grain\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"c2-in\">\n\n    <div class=\"c2-eye\"><b>006<\/b> \/ How clients work with us<\/div>\n    <h2 class=\"c2-h2\">Chhe tarah ke clients, <em>chhe<\/em> tarah ka kaam.<\/h2>\n    <p class=\"c2-lead\">\n      Har client ko poori film nahi chahiye hoti. Kisi ko sirf permission chahiye,\n      kisi ko poora pipeline. <b>Scope aap decide karte ho<\/b> &mdash; hum usi ke hisaab se\n      team aur estimate banate hain.\n    <\/p>\n\n    <div class=\"c2-grid\">\n\n      <div class=\"c2-card\">\n        <div class=\"c2-num\">Type 01<\/div>\n        <h3 class=\"c2-t\">Advertising Agencies<\/h3>\n        <p>Agency ka creative, humara execution. Aap board bhejte ho, hum\n        <b>crew, location aur schedule<\/b> khade karte hain &mdash; client ke saamne agency hi rehti hai.<\/p>\n        <ul><li>Shoot execution<\/li><li>Budgeting<\/li><li>Outstation<\/li><\/ul>\n      <\/div>\n\n      <div class=\"c2-card\">\n        <div class=\"c2-num\">Type 02<\/div>\n        <h3 class=\"c2-t\">Direct Brands<\/h3>\n        <p>Bina agency ke seedha brand ke saath. Concept, script, shoot aur post &mdash;\n        <b>ek hi team, ek hi invoice<\/b>.<\/p>\n        <ul><li>Concept to delivery<\/li><li>Brand films<\/li><li>Product shoots<\/li><\/ul>\n      <\/div>\n\n      <div class=\"c2-card\">\n        <div class=\"c2-num\">Type 03<\/div>\n        <h3 class=\"c2-t\">Production Houses<\/h3>\n        <p>Doosre production house ke project par ground partner ban ke.\n        <b>Crew, gear aur permissions<\/b> hum sambhalte hain, direction aapka.<\/p>\n        <ul><li>Line production<\/li><li>Crew supply<\/li><li>Equipment<\/li><\/ul>\n      <\/div>\n\n      <div class=\"c2-card\">\n        <div class=\"c2-num\">Type 04<\/div>\n        <h3 class=\"c2-t\">Visiting &amp; Overseas Crews<\/h3>\n        <p>India me shoot karne aa rahe ho? Airport se wrap tak\n        <b>fixer, permits, transport aur local team<\/b> ready milega.<\/p>\n        <ul><li>Fixing<\/li><li>Permits<\/li><li>Local liaison<\/li><\/ul>\n      <\/div>\n\n      <div class=\"c2-card\">\n        <div class=\"c2-num\">Type 05<\/div>\n        <h3 class=\"c2-t\">Corporates &amp; PSUs<\/h3>\n        <p>Plant films, safety videos, internal comms aur event documentation &mdash;\n        <b>process aur paperwork<\/b> dono ke saath.<\/p>\n        <ul><li>Profile films<\/li><li>Plant shoots<\/li><li>Documentation<\/li><\/ul>\n      <\/div>\n\n      <div class=\"c2-card\">\n        <div class=\"c2-num\">Type 06<\/div>\n        <h3 class=\"c2-t\">Startups &amp; D2C<\/h3>\n        <p>Chhoti team, tez timeline. Lean crew ke saath\n        <b>launch films, explainers aur social content<\/b> ek hi schedule me.<\/p>\n        <ul><li>Launch films<\/li><li>Explainers<\/li><li>Reels<\/li><\/ul>\n      <\/div>\n\n    <\/div>\n\n    <!-- ===================== LOGO WALL ===================== -->\n    <div class=\"c2-wall\">\n      <div class=\"c2-eye\"><b>007<\/b> \/ On our call sheets<\/div>\n      <h2 class=\"c2-h2\">Brands jinke saath hum <em>roll<\/em> kar chuke hain.<\/h2>\n\n      <!-- EDIT: har tile me <img> daalo aur class \"is-empty\" hatao -->\n      <div class=\"c2-logos\" id=\"c2Logos\">\n        <div class=\"c2-tile is-empty\"><span>Logo<\/span><\/div>\n        <div class=\"c2-tile is-empty\"><span>Logo<\/span><\/div>\n        <div class=\"c2-tile is-empty\"><span>Logo<\/span><\/div>\n        <div class=\"c2-tile is-empty\"><span>Logo<\/span><\/div>\n        <div class=\"c2-tile is-empty\"><span>Logo<\/span><\/div>\n        <div class=\"c2-tile is-empty\"><span>Logo<\/span><\/div>\n        <div class=\"c2-tile is-empty\"><span>Logo<\/span><\/div>\n        <div class=\"c2-tile is-empty\"><span>Logo<\/span><\/div>\n        <div class=\"c2-tile is-empty\"><span>Logo<\/span><\/div>\n        <a class=\"c2-tile c2-tile--cta\"\n           href=\"https:\/\/wa.me\/918527121545?text=Hi%20Mifa%20Productions%2C%20I%27d%20like%20to%20work%20with%20you.\"\n           target=\"_blank\" rel=\"noopener\">\n          <span><b>Your brand here<\/b><i>Start a project<\/i><\/span>\n        <\/a>\n      <\/div>\n\n      <p class=\"c2-note\">\n        Client logos brand ki permission ke saath lagaye jaate hain.\n        Full client list ke liye <a href=\"mailto:mifaproductions@gmail.com\" style=\"color:var(--red-hi)\">mifaproductions@gmail.com<\/a> par likhiye.\n      <\/p>\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-c2')\n    : document.querySelector('.mifa-c2');\n  if(!root) return;\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  var items = Array.prototype.slice.call(root.querySelectorAll('.c2-card, .c2-tile'));\n\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:.16, rootMargin:'0px 0px -6% 0px'});\n    items.forEach(function(el, i){\n      el.style.transitionDelay = (i % 5) * 0.06 + 's';\n      io.observe(el);\n    });\n  }\n})();\n<\/script>\n<\/div>\n\n\n\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 CLIENTS PAGE \u00b7 PART 3\n     WHAT EVERY CLIENT GETS (3D expanding panels) + NUMBERS + CTA\n\n     WordPress \"Custom HTML\" block me poora paste karo.\n     Sab kuch .mifa-c3 me scoped hai.\n     ============================================================ -->\n\n<div class=\"mifa-c3\">\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-c3{\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-c3 *,.mifa-c3 *::before,.mifa-c3 *::after{ box-sizing:border-box; }\n.mifa-c3 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-c3 a:hover,.mifa-c3 a:focus{ text-decoration:none !important; }\n.mifa-c3 h2,.mifa-c3 h3,.mifa-c3 h4,.mifa-c3 p,.mifa-c3 ul,.mifa-c3 li{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-c3 ul{ list-style:none !important; }\n.mifa-c3 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-c3 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; text-align:left;\n}\n.mifa-c3 button:hover,.mifa-c3 button:focus{ background:none; }\n.mifa-c3 svg{ display:block; }\n.mifa-c3 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\n\/* ======================== SHELL \/ AMBIENT ======================== *\/\n.mifa-c3 .c3-wrap{ position:relative; padding:clamp(64px,10vh,132px) 0 0; isolation:isolate; }\n.mifa-c3 .c3-orb{\n  position:absolute; z-index:0; border-radius:50%; pointer-events:none;\n  width:62vmax; height:62vmax; top:-26vmax; left:-24vmax;\n  background:radial-gradient(circle, rgba(122,12,24,.34) 0%, transparent 58%);\n  animation:c3Drift 27s ease-in-out infinite alternate;\n}\n@keyframes c3Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(7%,6%,0) scale(1.18)} }\n.mifa-c3 .c3-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='nc3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nc3)'\/%3E%3C\/svg%3E\");\n  animation:c3Grain .7s steps(3) infinite;\n}\n@keyframes c3Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n\n.mifa-c3 .c3-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-c3 .c3-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-c3 .c3-eye b{ color:var(--red-hi); font-weight:400; }\n.mifa-c3 .c3-eye::after{ content:''; flex:1; max-width:130px; height:1px; background:var(--line); }\n\n.mifa-c3 h2.c3-h2{\n  max-width:20ch; font-size:clamp(30px,5.4vw,68px); font-weight:900;\n  line-height:1.02; letter-spacing:-.04em; color:var(--ink);\n}\n.mifa-c3 .c3-h2 em{ font-style:normal; color:var(--red-hi); text-shadow:0 0 40px rgba(255,59,84,.45); }\n.mifa-c3 p.c3-lead{\n  max-width:62ch; margin-top:18px !important;\n  font-size:clamp(15px,1.3vw,17.5px); line-height:1.7; color:var(--soft);\n}\n.mifa-c3 .c3-lead b{ color:var(--ink); font-weight:600; }\n\n\/* ============ SIGNATURE : 3D EXPANDING PANELS ============ *\/\n.mifa-c3 .c3-acc{\n  display:flex; gap:10px; margin-top:clamp(36px,5vh,58px);\n  height:clamp(340px,46vh,440px);\n  perspective:1500px; transform-style:preserve-3d;\n}\n.mifa-c3 .c3-pan{\n  position:relative; flex:1 1 0; min-width:0; overflow:hidden;\n  border:1px solid var(--line); border-radius:16px;\n  background:linear-gradient(158deg, rgba(196,22,43,.1), rgba(16,16,23,.95));\n  transform:rotateY(9deg) scale(.985); transform-origin:left center;\n  transition:flex-grow .75s var(--e), transform .75s var(--e),\n             border-color .5s, box-shadow .5s, background .5s;\n}\n.mifa-c3 .c3-pan.on{\n  flex-grow:3.6; transform:none;\n  border-color:rgba(255,59,84,.45);\n  background:linear-gradient(158deg, rgba(196,22,43,.26), rgba(12,12,17,.96));\n  box-shadow:0 26px 62px rgba(0,0,0,.55);\n}\n.mifa-c3 .c3-pan__btn{\n  position:absolute; inset:0; width:100%; height:100%;\n  display:flex; flex-direction:column; justify-content:space-between;\n  padding:clamp(18px,2.2vw,26px);\n}\n.mifa-c3 .c3-pan__n{\n  font-family:var(--m); font-size:10px; letter-spacing:.2em;\n  text-transform:uppercase; color:var(--red-hi);\n}\n\/* collapsed: vertical title *\/\n.mifa-c3 .c3-pan__v{\n  writing-mode:vertical-rl; transform:rotate(180deg);\n  align-self:flex-start; margin-top:auto;\n  font-size:clamp(15px,1.5vw,19px); font-weight:800; letter-spacing:-.01em;\n  color:var(--ink); white-space:nowrap;\n  transition:opacity .4s var(--e);\n}\n.mifa-c3 .c3-pan.on .c3-pan__v{ opacity:0; }\n\/* expanded content *\/\n.mifa-c3 .c3-pan__full{\n  position:absolute; left:clamp(18px,2.2vw,26px); right:clamp(18px,2.2vw,26px);\n  bottom:clamp(18px,2.2vw,26px);\n  opacity:0; transform:translateY(16px); pointer-events:none;\n  transition:opacity .55s var(--e), transform .55s var(--e); transition-delay:.15s;\n}\n.mifa-c3 .c3-pan.on .c3-pan__full{ opacity:1; transform:none; }\n.mifa-c3 h3.c3-pan__t{\n  font-size:clamp(19px,2.3vw,28px); font-weight:800; letter-spacing:-.03em;\n  color:var(--ink); margin-bottom:10px !important;\n}\n.mifa-c3 .c3-pan__full p{\n  max-width:44ch; font-size:clamp(14px,1.15vw,16px); line-height:1.68;\n  color:rgba(242,240,238,.8);\n}\n.mifa-c3 .c3-pan__full p b{ color:var(--ink); font-weight:600; }\n.mifa-c3 .c3-ic{\n  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;\n  background:rgba(196,22,43,.2); border:1px solid rgba(255,59,84,.34); flex-shrink:0;\n}\n.mifa-c3 .c3-ic svg{ width:18px; height:18px; stroke:var(--red-hi); fill:none; stroke-width:1.7; }\n.mifa-c3 .c3-pan__head{ display:flex; align-items:center; gap:12px; }\n\n\/* ========================== NUMBERS ========================== *\/\n.mifa-c3 .c3-nums{\n  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;\n  margin-top:clamp(46px,7vh,80px); background:var(--line);\n  border:1px solid var(--line); border-radius:16px; overflow:hidden;\n}\n.mifa-c3 .c3-num{\n  padding:clamp(24px,3.2vw,36px) clamp(18px,2.4vw,28px); background:var(--bg-2);\n  opacity:0; transform:translateY(22px);\n  transition:opacity .8s var(--e), transform .8s var(--e), background .4s;\n}\n.mifa-c3 .c3-num.on{ opacity:1; transform:none; }\n.mifa-c3 .c3-num b{\n  display:block; font-size:clamp(26px,4vw,50px); font-weight:900;\n  letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1;\n}\n.mifa-c3 .c3-num i{\n  display:block; margin-top:10px; font-style:normal; font-family:var(--m);\n  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft);\n}\n\n\/* ========================== CTA BAND ========================== *\/\n.mifa-c3 .c3-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-c3 .c3-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-c3 .c3-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3.4vh,36px); }\n.mifa-c3 .c3-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-c3 .c3-btn span,.mifa-c3 .c3-btn svg{ position:relative; z-index:2; }\n.mifa-c3 .c3-btn svg{ width:16px; height:16px; flex-shrink:0; transition:transform .45s var(--e); }\n.mifa-c3 .c3-btn--fill{ background:var(--red); color:#fff; box-shadow:0 10px 34px rgba(196,22,43,.42); }\n.mifa-c3 .c3-btn--fill::before{\n  content:''; position:absolute; inset:0; background:var(--ink);\n  transform:translateY(101%); transition:transform .5s var(--e);\n}\n.mifa-c3 .c3-btn--line{ border:1px solid rgba(242,240,238,.26); color:var(--ink); }\n.mifa-c3 .c3-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-c3 .c3-cards{ display:grid; gap:12px; }\n.mifa-c3 .c3-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-c3 .c3-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-c3 .c3-adr p{ font-size:15.5px; line-height:1.6; color:var(--ink); }\n.mifa-c3 .c3-adr a{ color:var(--ink); transition:color .3s; }\n.mifa-c3 .c3-adr span{ display:block; margin-top:7px; font-size:14px; color:var(--soft); }\n\n.mifa-c3 .c3-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-c3 .c3-foot ul{ display:flex; flex-wrap:wrap; gap:18px; }\n.mifa-c3 .c3-foot a{ transition:color .3s; }\n\n\/* --------------------------- HOVER --------------------------- *\/\n@media (hover:hover) and (pointer:fine){\n  .mifa-c3 .c3-num:hover{ background:rgba(196,22,43,.12); }\n  .mifa-c3 .c3-adr:hover{ border-color:rgba(255,59,84,.45); transform:translateY(-3px); }\n  .mifa-c3 .c3-adr a:hover,.mifa-c3 .c3-foot a:hover{ color:var(--red-hi); }\n  .mifa-c3 .c3-btn:hover{ transform:translateY(-4px); }\n  .mifa-c3 .c3-btn--fill:hover{ color:var(--bg); box-shadow:0 18px 46px rgba(196,22,43,.28); }\n  .mifa-c3 .c3-btn--fill:hover::before{ transform:translateY(0); }\n  .mifa-c3 .c3-btn--fill:hover svg{ transform:translateX(4px); }\n  .mifa-c3 .c3-btn--line:hover{ border-color:rgba(242,240,238,.55); }\n  .mifa-c3 .c3-btn--line:hover::before{ transform:scaleX(1); transform-origin:left; }\n}\n\n\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1040px){\n  .mifa-c3 .c3-nums{ grid-template-columns:repeat(2,minmax(0,1fr)); }\n  .mifa-c3 .c3-cta__grid{ grid-template-columns:1fr; }\n}\n@media (max-width:860px){\n  \/* accordion -> stacked list *\/\n  .mifa-c3 .c3-acc{ flex-direction:column; height:auto; perspective:none; gap:12px; }\n  .mifa-c3 .c3-pan{ flex:none; transform:none; min-height:76px; }\n  .mifa-c3 .c3-pan.on{ flex:none; min-height:230px; }\n  .mifa-c3 .c3-pan__btn{ position:relative; inset:auto; height:auto; min-height:76px; gap:14px; }\n  .mifa-c3 .c3-pan__v{\n    writing-mode:horizontal-tb; transform:none; margin-top:0; white-space:normal;\n  }\n  .mifa-c3 .c3-pan.on .c3-pan__v{ display:none; }\n  .mifa-c3 .c3-pan__full{ position:relative; left:auto; right:auto; bottom:auto; }\n  .mifa-c3 .c3-pan__head{ justify-content:space-between; }\n}\n@media (max-width:700px){\n  .mifa-c3 .c3-wrap{ padding-top:clamp(52px,8vh,80px); }\n  .mifa-c3 h2.c3-h2{ font-size:clamp(28px,8.6vw,42px); letter-spacing:-.03em; }\n  .mifa-c3 .c3-btns{ flex-direction:column; align-items:stretch; }\n  .mifa-c3 .c3-btn{ justify-content:center; }\n  .mifa-c3 .c3-foot{ flex-direction:column; align-items:flex-start; }\n  .mifa-c3 .c3-grain{ opacity:.08; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-c3 *,.mifa-c3 *::before,.mifa-c3 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-c3 .c3-num{ opacity:1; transform:none; }\n}\n<\/style>\n\n<section class=\"c3-wrap\">\n  <div class=\"c3-orb\" aria-hidden=\"true\"><\/div>\n  <div class=\"c3-grain\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"c3-in\">\n    <div class=\"c3-eye\"><b>008<\/b> \/ Our side of the deal<\/div>\n    <h2 class=\"c3-h2\">Har client ko ye <em>paanch<\/em> cheezein milti hain.<\/h2>\n    <p class=\"c3-lead\">\n      Project chhota ho ya bada, ye paanch baatein nahi badalti.\n      Panel par <b>tap ya hover<\/b> karke detail dekhiye.\n    <\/p>\n\n    <!-- ============ 3D EXPANDING PANELS ============ -->\n    <div class=\"c3-acc\" id=\"c3Acc\">\n\n      <div class=\"c3-pan on\">\n        <button class=\"c3-pan__btn\" type=\"button\">\n          <div class=\"c3-pan__head\">\n            <span class=\"c3-ic\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15.5 16.5v2.2a1.6 1.6 0 0 1-1.8 1.6 16 16 0 0 1-7-2.5 15.6 15.6 0 0 1-4.8-4.8 16 16 0 0 1-2.5-7.1A1.6 1.6 0 0 1 1 4.2h2.2a1.6 1.6 0 0 1 1.6 1.4c.1.8.3 1.6.6 2.4a1.6 1.6 0 0 1-.4 1.7l-.9.9a12.8 12.8 0 0 0 4.8 4.8l.9-.9a1.6 1.6 0 0 1 1.7-.4c.8.3 1.6.5 2.4.6a1.6 1.6 0 0 1 1.4 1.6z\" transform=\"translate(3 0)\"\/><\/svg><\/span>\n            <span class=\"c3-pan__n\">01<\/span>\n          <\/div>\n          <div class=\"c3-pan__v\">One producer, one number<\/div>\n          <div class=\"c3-pan__full\">\n            <h3 class=\"c3-pan__t\">One producer, one number<\/h3>\n            <p>Aapko har baar naya banda explain nahi karna padega. Ek producer\n            project ke start se wrap tak <b>same rehta hai<\/b> &mdash; aur floor par khud hota hai.<\/p>\n          <\/div>\n        <\/button>\n      <\/div>\n\n      <div class=\"c3-pan\">\n        <button class=\"c3-pan__btn\" type=\"button\">\n          <div class=\"c3-pan__head\">\n            <span class=\"c3-ic\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 3h9l4 4v14H6z\"\/><path d=\"M15 3v4h4\"\/><path d=\"M9 12h7M9 16h5\"\/><\/svg><\/span>\n            <span class=\"c3-pan__n\">02<\/span>\n          <\/div>\n          <div class=\"c3-pan__v\">Written estimate first<\/div>\n          <div class=\"c3-pan__full\">\n            <h3 class=\"c3-pan__t\">Written estimate first<\/h3>\n            <p>Prep shuru hone se pehle line-by-line estimate jaata hai &mdash;\n            crew, gear, travel, permits sab alag heads me. <b>Baad me surprise bill nahi<\/b>.<\/p>\n          <\/div>\n        <\/button>\n      <\/div>\n\n      <div class=\"c3-pan\">\n        <button class=\"c3-pan__btn\" type=\"button\">\n          <div class=\"c3-pan__head\">\n            <span class=\"c3-ic\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 5h18v11H3z\"\/><path d=\"M8 20h8M12 16v4\"\/><path d=\"M8 10.5l3 2.5 5-4.5\"\/><\/svg><\/span>\n            <span class=\"c3-pan__n\">03<\/span>\n          <\/div>\n          <div class=\"c3-pan__v\">Daily updates &amp; backup<\/div>\n          <div class=\"c3-pan__full\">\n            <h3 class=\"c3-pan__t\">Daily updates &amp; backup<\/h3>\n            <p>Har shoot day ka update aur footage ka <b>double backup<\/b> usi raat.\n            Aap set par ho ya doosre sheher me &mdash; status same time par milta hai.<\/p>\n          <\/div>\n        <\/button>\n      <\/div>\n\n      <div class=\"c3-pan\">\n        <button class=\"c3-pan__btn\" type=\"button\">\n          <div class=\"c3-pan__head\">\n            <span class=\"c3-ic\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16v16H4z\"\/><path d=\"M4 9h16M4 15h16M9 4v16M15 4v16\"\/><\/svg><\/span>\n            <span class=\"c3-pan__n\">04<\/span>\n          <\/div>\n          <div class=\"c3-pan__v\">Post in the same house<\/div>\n          <div class=\"c3-pan__full\">\n            <h3 class=\"c3-pan__t\">Post in the same house<\/h3>\n            <p>Edit, colour, sound aur graphics alag vendors me nahi bantte.\n            Isliye feedback loop chhota rehta hai aur <b>delivery date slip nahi hoti<\/b>.<\/p>\n          <\/div>\n        <\/button>\n      <\/div>\n\n      <div class=\"c3-pan\">\n        <button class=\"c3-pan__btn\" type=\"button\">\n          <div class=\"c3-pan__head\">\n            <span class=\"c3-ic\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><path d=\"M7 10l5 5 5-5\"\/><path d=\"M12 15V3\"\/><\/svg><\/span>\n            <span class=\"c3-pan__n\">05<\/span>\n          <\/div>\n          <div class=\"c3-pan__v\">Raw files are yours<\/div>\n          <div class=\"c3-pan__full\">\n            <h3 class=\"c3-pan__t\">Raw files are yours<\/h3>\n            <p>Final masters ke saath <b>rushes aur project files<\/b> bhi handover hote hain.\n            Aage kabhi re-edit karna ho to kisi ke paas wapas jaana nahi padega.<\/p>\n          <\/div>\n        <\/button>\n      <\/div>\n\n    <\/div>\n\n    <!-- ============ NUMBERS ============\n         EDIT: figures client se confirm karke badal lena -->\n    <div class=\"c3-nums\">\n      <div class=\"c3-num\"><b data-c=\"20\" data-suf=\"+\">0<\/b><i>Years with clients<\/i><\/div>\n      <div class=\"c3-num\"><b data-c=\"100\" data-suf=\"+\">0<\/b><i>Projects delivered<\/i><\/div>\n      <div class=\"c3-num\"><b data-c=\"25\" data-suf=\"+\">0<\/b><i>Cities covered<\/i><\/div>\n      <div class=\"c3-num\"><b data-c=\"6\">0<\/b><i>Ways to engage us<\/i><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- ============ CTA ============ -->\n  <div class=\"c3-cta\" id=\"clients-contact\">\n    <div class=\"c3-in\">\n      <div class=\"c3-cta__grid\">\n\n        <div>\n          <div class=\"c3-eye\"><b>009<\/b> \/ Work with us<\/div>\n          <h2 class=\"c3-h2\">Agli call sheet par <em>aapka<\/em> naam.<\/h2>\n          <p class=\"c3-lead\">\n            Bataiye kis tarah ka support chahiye &mdash; poori production, ya sirf\n            ground crew. Hum usi din <b>availability aur estimate<\/b> bhej denge.\n          <\/p>\n\n          <div class=\"c3-btns\">\n            <a class=\"c3-btn c3-btn--fill\" href=\"https:\/\/wa.me\/918527121545?text=Hi%20Mifa%20Productions%2C%20I%27d%20like%20to%20discuss%20working%20together.\" target=\"_blank\" rel=\"noopener\">\n              <span>Start a Conversation<\/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=\"c3-btn c3-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>See the Work<\/span>\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"c3-cards\">\n          <div class=\"c3-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=\"c3-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=\"c3-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=\"c3-foot\">\n        <span>&copy; <b id=\"c3Yr\">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-c3')\n    : document.querySelector('.mifa-c3');\n  if(!root) return;\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* ---------- year ---------- *\/\n  var yr = root.querySelector('#c3Yr');\n  if(yr) yr.textContent = new Date().getFullYear();\n\n  \/* ---------- accordion ---------- *\/\n  var pans = Array.prototype.slice.call(root.querySelectorAll('.c3-pan'));\n  var wide = window.matchMedia('(hover:hover) and (pointer:fine) and (min-width:861px)');\n\n  function activate(p){\n    pans.forEach(function(x){ x.classList.toggle('on', x === p); });\n  }\n  pans.forEach(function(p){\n    var b = p.querySelector('.c3-pan__btn');\n    if(!b) return;\n    b.addEventListener('click', function(){\n      \/* mobile par dubara tap = band *\/\n      if(!wide.matches && p.classList.contains('on')){ p.classList.remove('on'); return; }\n      activate(p);\n    });\n    b.addEventListener('focus', function(){ activate(p); });\n    p.addEventListener('mouseenter', function(){ if(wide.matches) activate(p); });\n  });\n\n  \/* ---------- numbers ---------- *\/\n  var nums = Array.prototype.slice.call(root.querySelectorAll('.c3-num'));\n  function run(box, i){\n    box.style.transitionDelay = (i * 0.08) + 's';\n    box.classList.add('on');\n    var el = box.querySelector('[data-c]');\n    if(!el) return;\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(reduce || !('IntersectionObserver' in window)){\n    nums.forEach(run);\n  } else {\n    var io = new IntersectionObserver(function(entries){\n      entries.forEach(function(en){\n        if(en.isIntersecting){ run(en.target, nums.indexOf(en.target)); io.unobserve(en.target); }\n      });\n    }, {threshold:.4});\n    nums.forEach(function(n){ io.observe(n); });\n  }\n})();\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>MIFAPRODUCTIONS Clients IG FB LN Menu 001 Home 002 Studio 003 Services 004 Work 005 Clients 006 Contact A-27K, Sector [&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-351","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\/351","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=351"}],"version-history":[{"count":2,"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/pages\/351\/revisions"}],"predecessor-version":[{"id":359,"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/pages\/351\/revisions\/359"}],"wp:attachment":[{"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/media?parent=351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}