{"id":349,"date":"2026-08-10T07:32:12","date_gmt":"2026-08-10T07:32:12","guid":{"rendered":"https:\/\/mifaproduction.com\/?page_id=349"},"modified":"2026-08-10T13:54:59","modified_gmt":"2026-08-10T13:54:59","slug":"work","status":"publish","type":"page","link":"https:\/\/mifaproduction.com\/index.php\/work\/","title":{"rendered":"Work"},"content":{"rendered":"\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 WORK PAGE \u00b7 PART 1  (ENGLISH)\n     NAV + MENU OVERLAY + WORK HERO (3D auto-cycling card deck)\n\n     Paste the whole thing into a WordPress \"Custom HTML\" block.\n     Everything is scoped inside .mifa-w1\n\n     ------------------------------------------------------------\n     LIVE PAGE LINKS USED IN THIS PART\n       Home      \/index.php\/home\/\n       Studio    \/index.php\/studio\/\n       Services  \/index.php\/services\/\n       Work      \/index.php\/work\/       <-- current page\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-w1\">\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-w1{\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  --card-w:clamp(210px,30vw,320px);\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-w1 *,.mifa-w1 *::before,.mifa-w1 *::after{ box-sizing:border-box; }\n.mifa-w1 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-w1 a:hover,.mifa-w1 a:focus{ text-decoration:none !important; }\n.mifa-w1 h1,.mifa-w1 h2,.mifa-w1 h3,.mifa-w1 p,.mifa-w1 ul,.mifa-w1 li{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-w1 ul{ list-style:none !important; }\n.mifa-w1 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-w1 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-w1 button:hover,.mifa-w1 button:focus{ background:none; }\n.mifa-w1 svg{ display:block; }\n.mifa-w1 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\nbody.admin-bar .mifa-w1 .w1-nav{ top:32px; }\n@media (max-width:782px){ body.admin-bar .mifa-w1 .w1-nav{ top:46px; } }\n\n\/* ============================= NAV ============================= *\/\n.mifa-w1 .w1-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-w1 .w1-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-w1 .w1-logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; min-width:0; perspective:500px; }\n.mifa-w1 .w1-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-w1 .w1-mark img{ position:absolute; max-width:none; width:237.5%; height:237.5%; left:-62.2%; top:-54.6%; }\n.mifa-w1 .w1-nav.stuck .w1-mark{ width:34px; height:34px; }\n.mifa-w1 .w1-word{ display:flex; flex-direction:column; line-height:1.08; min-width:0; }\n.mifa-w1 .w1-word b{ font-size:14px; font-weight:800; letter-spacing:.1em; }\n.mifa-w1 .w1-word i{ font-style:normal; font-size:9.5px; font-weight:400; letter-spacing:.2em; color:var(--soft); }\n\n.mifa-w1 .w1-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-w1 .w1-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:w1Blink 1.6s ease-in-out infinite;\n}\n@keyframes w1Blink{ 0%,100%{opacity:1} 50%{opacity:.12} }\n\n.mifa-w1 .w1-right{ display:flex; align-items:center; gap:22px; flex-shrink:0; }\n\n\/* --- desktop inline page links --- *\/\n.mifa-w1 .w1-links{ display:flex; align-items:center; gap:20px; }\n.mifa-w1 .w1-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-w1 .w1-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-w1 .w1-links a.here{ color:var(--ink); }\n.mifa-w1 .w1-links a.here::after{ transform:scaleX(1); transform-origin:left; }\n\n.mifa-w1 .w1-soc{ display:flex; gap:14px; }\n.mifa-w1 .w1-soc a{ font-family:var(--m); font-size:10.5px; letter-spacing:.14em; color:var(--soft); transition:color .3s; }\n\n.mifa-w1 .w1-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-w1 .w1-menu__t{ transition:color .3s; }\n.mifa-w1 .w1-burg{ display:block !important; position:relative; width:26px; height:12px; flex-shrink:0; }\n.mifa-w1 .w1-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-w1 .w1-burg i:nth-child(1){ top:0 }\n.mifa-w1 .w1-burg i:nth-child(2){ top:10px }\n.mifa-w1 .w1-menu.open .w1-burg i:nth-child(1){ transform:translateY(5px) rotate(45deg) }\n.mifa-w1 .w1-menu.open .w1-burg i:nth-child(2){ transform:translateY(-5px) rotate(-45deg) }\n\n\/* -------------------------- MENU OVERLAY -------------------------- *\/\n.mifa-w1 .w1-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-w1 .w1-ov.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }\n.mifa-w1 .w1-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-w1 .w1-ov.open .w1-ov__l{ opacity:1; transform:none; }\n.mifa-w1 .w1-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-w1 .w1-ov__l.here{ color:var(--red-hi); }\n.mifa-w1 .w1-ov.open .w1-ov__l:nth-of-type(1){ transition-delay:.18s }\n.mifa-w1 .w1-ov.open .w1-ov__l:nth-of-type(2){ transition-delay:.24s }\n.mifa-w1 .w1-ov.open .w1-ov__l:nth-of-type(3){ transition-delay:.30s }\n.mifa-w1 .w1-ov.open .w1-ov__l:nth-of-type(4){ transition-delay:.36s }\n.mifa-w1 .w1-ov.open .w1-ov__l:nth-of-type(5){ transition-delay:.42s }\n.mifa-w1 .w1-ov.open .w1-ov__l:nth-of-type(6){ transition-delay:.48s }\n.mifa-w1 .w1-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-w1 .w1-ov__f a{ color:var(--red-hi); }\n\n\/* ============================== HERO ============================== *\/\n.mifa-w1 .w1-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-w1 .w1-floor{\n  position:absolute; left:-25%; right:-25%; bottom:-4%; height:56vh; 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-w1 .w1-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:w1Run 3.4s linear infinite;\n}\n@keyframes w1Run{ from{ background-position:0 0 } to{ background-position:0 88px } }\n\n.mifa-w1 .w1-orb{ position:absolute; z-index:0; border-radius:50%; pointer-events:none; }\n.mifa-w1 .w1-orb--a{\n  width:72vmax; height:72vmax; top:-32vmax; right:-26vmax;\n  background:radial-gradient(circle, rgba(196,22,43,.28) 0%, rgba(196,22,43,.06) 34%, transparent 62%);\n  animation:w1Drift 21s ease-in-out infinite alternate;\n}\n.mifa-w1 .w1-orb--b{\n  width:58vmax; height:58vmax; bottom:-28vmax; left:-22vmax;\n  background:radial-gradient(circle, rgba(122,12,24,.34) 0%, transparent 58%);\n  animation:w1Drift 28s ease-in-out infinite alternate-reverse;\n}\n@keyframes w1Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-6%,6%,0) scale(1.16)} }\n\n.mifa-w1 .w1-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='nw1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nw1)'\/%3E%3C\/svg%3E\");\n  animation:w1Grain .7s steps(3) infinite;\n}\n@keyframes w1Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n.mifa-w1 .w1-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.mifa-w1 .w1-ghost{\n  position:absolute; z-index:1; left:50%; top:44%; translate:-50% -50%;\n  font-size:clamp(120px,25vw,400px); 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-w1.live .w1-ghost{ opacity:1; }\n\n\/* ---- hero grid ---- *\/\n.mifa-w1 .w1-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.06fr) minmax(0,.94fr);\n  width:100%; max-width:1660px; margin:0 auto;\n  padding:clamp(30px,5.5vh,64px) var(--pad);\n  perspective:1300px;\n}\n.mifa-w1 .w1-copy{ min-width:0; transform-style:preserve-3d; will-change:transform; }\n\n.mifa-w1 .w1-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-w1 .w1-crumb a{ transition:color .3s; }\n.mifa-w1 .w1-crumb b{ color:var(--red-hi); font-weight:400; }\n\n.mifa-w1 .w1-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-w1 .w1-tag b{ color:var(--red-hi); font-weight:400; }\n.mifa-w1 .w1-tag::after{ content:''; flex:1; max-width:110px; height:1px; background:var(--line); }\n\n.mifa-w1 h1.w1-h1{\n  margin:0 0 clamp(22px,3.4vh,38px) !important;\n  font-size:clamp(40px,8.6vw,140px); font-weight:900;\n  line-height:.94; letter-spacing:-.045em; color:var(--ink);\n  transform:translateZ(64px);\n}\n.mifa-w1 .w1-h1 .l{ display:block; overflow:hidden; }\n.mifa-w1 .w1-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-w1.live .w1-h1 .l > span{ transform:none; }\n.mifa-w1.live .w1-h1 .l:nth-child(1) > span{ transition-delay:.10s }\n.mifa-w1.live .w1-h1 .l:nth-child(2) > span{ transition-delay:.20s }\n.mifa-w1 .w1-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-w1 p.w1-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-w1 .w1-sub b{ color:var(--ink); font-weight:600; }\n\n.mifa-w1 .w1-meta{ display:flex; flex-wrap:wrap; gap:10px; transform:translateZ(22px); }\n.mifa-w1 .w1-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-w1 .w1-meta span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--red); flex-shrink:0; }\n\n.mifa-w1 .w1-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3.6vh,40px); transform:translateZ(46px); }\n.mifa-w1 .w1-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-w1 .w1-btn span,.mifa-w1 .w1-btn svg{ position:relative; z-index:2; }\n.mifa-w1 .w1-btn svg{ width:16px; height:16px; flex-shrink:0; transition:transform .45s var(--e); }\n.mifa-w1 .w1-btn--fill{ background:var(--red); color:#fff; box-shadow:0 10px 34px rgba(196,22,43,.42); }\n.mifa-w1 .w1-btn--fill::before{\n  content:''; position:absolute; inset:0; background:var(--ink);\n  transform:translateY(101%); transition:transform .5s var(--e);\n}\n.mifa-w1 .w1-btn--line{ border:1px solid rgba(242,240,238,.26); color:var(--ink); }\n.mifa-w1 .w1-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 AUTO-CYCLING CARD DECK ============== *\/\n.mifa-w1 .w1-stage{\n  position:relative; justify-self:center; min-width:0;\n  width:min(100%,440px);\n  display:flex; flex-direction:column; align-items:center; gap:clamp(18px,2.6vw,28px);\n}\n.mifa-w1 .w1-deck{\n  position:relative; width:var(--card-w); height:calc(var(--card-w) * 1.26);\n  perspective:1100px; transform-style:preserve-3d;\n}\n.mifa-w1 .w1-card{\n  position:absolute; inset:0; border-radius:16px; overflow:hidden;\n  border:1px solid rgba(255,59,84,.34);\n  background:linear-gradient(158deg, rgba(196,22,43,.22), rgba(12,12,17,.97));\n  box-shadow:0 30px 70px rgba(0,0,0,.66), inset 0 0 46px rgba(196,22,43,.12);\n  display:flex; flex-direction:column; justify-content:space-between;\n  padding:clamp(16px,2.4vw,22px);\n  transform-origin:50% 100%; will-change:transform,opacity;\n  transition:transform .8s var(--e), opacity .8s var(--e);\n}\n.mifa-w1 .w1-card.out{ transform:translateZ(280px) translateY(6%) rotateX(14deg) !important; opacity:0 !important; }\n.mifa-w1 .w1-card__top{\n  display:flex; align-items:center; justify-content:space-between; gap:10px;\n  font-family:var(--m); font-size:10px; letter-spacing:.16em;\n  text-transform:uppercase; color:var(--red-hi);\n}\n.mifa-w1 .w1-card__top i{ font-style:normal; color:var(--soft); }\n.mifa-w1 .w1-card__mid{\n  flex:1; display:grid; place-items:center; margin:14px 0;\n  border:1px dashed rgba(242,240,238,.16); border-radius:10px;\n  background:\n    repeating-linear-gradient(90deg, rgba(242,240,238,.05) 0 1px, transparent 1px 22px),\n    rgba(0,0,0,.35);\n}\n.mifa-w1 .w1-card__mid svg{ width:34px; height:34px; stroke:rgba(255,59,84,.8); fill:none; stroke-width:1.4; }\n.mifa-w1 .w1-card b{\n  display:block; font-size:clamp(17px,2.4vw,22px); font-weight:800;\n  letter-spacing:-.025em; line-height:1.18; color:var(--ink);\n}\n.mifa-w1 .w1-card u{\n  display:block; margin-top:6px; text-decoration:none; font-family:var(--m);\n  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft);\n}\n.mifa-w1 .w1-deck::after{\n  content:''; position:absolute; z-index:-1; left:50%; translate:-50% 0; bottom:-22px;\n  width:78%; height:26px; border-radius:50%;\n  background:radial-gradient(ellipse, rgba(196,22,43,.42), transparent 70%); filter:blur(14px);\n}\n.mifa-w1 .w1-dots{ display:flex; gap:7px; }\n.mifa-w1 .w1-dots i{\n  width:22px; height:2px; border-radius:2px; background:rgba(242,240,238,.2);\n  transition:background .4s;\n}\n.mifa-w1 .w1-dots i.on{ background:var(--red-hi); }\n\n.mifa-w1 .w1-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-w1 .w1-cap b{ color:var(--ink); font-weight:500; }\n\n\/* --------------------------- MARQUEE --------------------------- *\/\n.mifa-w1 .w1-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-w1 .w1-marq__t{ display:inline-flex; align-items:center; animation:w1Slide 32s linear infinite; }\n.mifa-w1 .w1-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-w1 .w1-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 w1Slide{ to{ transform:translateX(-50%) } }\n\n\/* -------------------------- SCROLL CUE -------------------------- *\/\n.mifa-w1 .w1-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-w1 .w1-scr i{\n  writing-mode:horizontal-tb; width:1px; height:46px;\n  background:linear-gradient(var(--red-hi),transparent); animation:w1Cue 2s ease-in-out infinite;\n}\n@keyframes w1Cue{ 0%,100%{transform:scaleY(.3); opacity:.35} 50%{transform:scaleY(1); opacity:1} }\n\n\/* reveal *\/\n.mifa-w1 .rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e), transform .9s var(--e); }\n.mifa-w1.live .rv{ opacity:1; transform:none; }\n.mifa-w1.live .a1{ transition-delay:.16s } .mifa-w1.live .a2{ transition-delay:.26s }\n.mifa-w1.live .a3{ transition-delay:.34s } .mifa-w1.live .a4{ transition-delay:.42s }\n.mifa-w1.live .a5{ transition-delay:.12s }\n\n\/* --------------------------- HOVER --------------------------- *\/\n@media (hover:hover) and (pointer:fine){\n  .mifa-w1 .w1-logo:hover .w1-mark{ transform:rotateY(28deg) rotateX(-8deg) scale(1.06); }\n  .mifa-w1 .w1-soc a:hover{ color:var(--red-hi); }\n  .mifa-w1 .w1-links a:hover{ color:var(--ink); }\n  .mifa-w1 .w1-links a:hover::after{ transform:scaleX(1); transform-origin:left; }\n  .mifa-w1 .w1-crumb a:hover{ color:var(--red-hi); }\n  .mifa-w1 .w1-menu:hover .w1-menu__t{ color:var(--red-hi); }\n  .mifa-w1 .w1-ov__l:hover{ color:var(--red-hi); }\n  .mifa-w1 .w1-meta span:hover{ border-color:rgba(255,59,84,.5); color:var(--ink); transform:translateY(-3px); }\n  .mifa-w1 .w1-btn:hover{ transform:translateY(-4px); }\n  .mifa-w1 .w1-btn--fill:hover{ color:var(--bg); box-shadow:0 18px 46px rgba(196,22,43,.28); }\n  .mifa-w1 .w1-btn--fill:hover::before{ transform:translateY(0); }\n  .mifa-w1 .w1-btn--fill:hover svg{ transform:translateX(4px); }\n  .mifa-w1 .w1-btn--line:hover{ border-color:rgba(242,240,238,.55); }\n  .mifa-w1 .w1-btn--line:hover::before{ transform:scaleX(1); transform-origin:left; }\n  .mifa-w1 .w1-marq:hover .w1-marq__t{ animation-play-state:paused; }\n}\n\n\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1240px){\n  .mifa-w1 .w1-links{ display:none; }\n}\n@media (max-width:1040px){\n  .mifa-w1 .w1-in{ grid-template-columns:1fr; perspective:none; }\n  .mifa-w1 .w1-copy{ transform-style:flat; }\n  .mifa-w1 .w1-crumb,.mifa-w1 .w1-tag,\n  .mifa-w1 h1.w1-h1,.mifa-w1 p.w1-sub,\n  .mifa-w1 .w1-meta,.mifa-w1 .w1-btns{ transform:none !important; }\n  .mifa-w1 .w1-stage{ order:-1; align-self:start; width:100%; }\n  .mifa-w1 .w1-scr{ display:none; }\n}\n@media (max-width:760px){\n  .mifa-w1{ --nav-h:64px; --card-w:clamp(190px,54vw,240px); }\n  .mifa-w1 .w1-rec,.mifa-w1 .w1-soc{ display:none; }\n  .mifa-w1 .w1-menu__t{ display:none; }\n  .mifa-w1 .w1-menu{ padding:16px 9px; margin:-16px -9px; }\n  .mifa-w1 .w1-hero{ min-height:auto; }\n  .mifa-w1 .w1-in{ padding-top:28px; padding-bottom:42px; gap:30px; }\n  .mifa-w1 h1.w1-h1{ font-size:clamp(36px,11vw,60px); letter-spacing:-.034em; }\n  .mifa-w1 .w1-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-w1 .w1-btns{ flex-direction:column; align-items:stretch; }\n  .mifa-w1 .w1-btn{ justify-content:center; }\n  .mifa-w1 .w1-marq__t span{ font-size:16px; gap:22px; padding-right:22px; }\n  .mifa-w1 .w1-word i{ display:none; }\n  .mifa-w1 .w1-grain{ opacity:.1; }\n  .mifa-w1 .w1-floor{ height:42vh; }\n  .mifa-w1 .w1-ghost{ display:none; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-w1 *,.mifa-w1 *::before,.mifa-w1 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-w1 .rv{ opacity:1; transform:none; }\n  .mifa-w1 .w1-h1 .l > span{ transform:none; }\n}\n<\/style>\n\n<!-- =============================== NAV =============================== -->\n<header class=\"w1-nav\" id=\"w1Nav\">\n  <a href=\"https:\/\/mifaproduction.com\/index.php\/home\/\" class=\"w1-logo\" aria-label=\"Mifa Productions \u2014 home\">\n    <span class=\"w1-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=\"w1-word\"><b>MIFA<\/b><i>PRODUCTIONS<\/i><\/span>\n  <\/a>\n\n  <div class=\"w1-rec\"><i><\/i> Selected Work<\/div>\n\n  <div class=\"w1-right\">\n    <!-- desktop page links -->\n    <nav class=\"w1-links\" aria-label=\"Primary\">\n      <a href=\"https:\/\/mifaproduction.com\/index.php\/home\/\">Home<\/a>\n      <a href=\"https:\/\/mifaproduction.com\/index.php\/studio\/\">Studio<\/a>\n      <a href=\"https:\/\/mifaproduction.com\/index.php\/services\/\">Services<\/a>\n      <a class=\"here\" aria-current=\"page\" 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=\"w1-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=\"w1-menu\" id=\"w1MenuBtn\" aria-expanded=\"false\" aria-controls=\"w1Ov\" aria-label=\"Open menu\">\n      <span class=\"w1-menu__t\">Menu<\/span>\n      <span class=\"w1-burg\"><i><\/i><i><\/i><\/span>\n    <\/button>\n  <\/div>\n<\/header>\n\n<!-- =========================== MENU OVERLAY =========================== -->\n<div class=\"w1-ov\" id=\"w1Ov\">\n  <a class=\"w1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/home\/\"><em>001<\/em> Home<\/a>\n  <a class=\"w1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/studio\/\"><em>002<\/em> Studio<\/a>\n  <a class=\"w1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/services\/\"><em>003<\/em> Services<\/a>\n  <a class=\"w1-ov__l here\" aria-current=\"page\" href=\"https:\/\/mifaproduction.com\/index.php\/work\/\"><em>004<\/em> Work<\/a>\n  <a class=\"w1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/client\/\"><em>005<\/em> Clients<\/a>\n  <a class=\"w1-ov__l\" href=\"https:\/\/mifaproduction.com\/index.php\/contact\/\"><em>006<\/em> Contact<\/a>\n  <div class=\"w1-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=\"w1-hero\" id=\"work\">\n  <div class=\"w1-orb w1-orb--a\" aria-hidden=\"true\"><\/div>\n  <div class=\"w1-orb w1-orb--b\" aria-hidden=\"true\"><\/div>\n  <div class=\"w1-floor\" aria-hidden=\"true\"><i><\/i><\/div>\n  <div class=\"w1-ghost\" aria-hidden=\"true\">WORK<\/div>\n  <div class=\"w1-grain\" aria-hidden=\"true\"><\/div>\n  <div class=\"w1-vig\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"w1-in\">\n\n    <div class=\"w1-copy\" id=\"w1Copy\">\n      <div class=\"w1-crumb rv a5\">\n        <a href=\"https:\/\/mifaproduction.com\/index.php\/home\/\">Home<\/a>\n        <span>\/<\/span><b>Work<\/b>\n      <\/div>\n\n      <div class=\"w1-tag rv a1\"><b>004<\/b> \/ Selected projects<\/div>\n\n      <h1 class=\"w1-h1\">\n        <span class=\"l\"><span>Frames That<\/span><\/span>\n        <span class=\"l\"><span>Actually <em>Ran<\/em>.<\/span><\/span>\n      <\/h1>\n\n      <p class=\"w1-sub rv a2\">\n        Commercials, corporate films, digital campaigns and micro drama &mdash;\n        a different brief and a different city every time, with the\n        <b>same crew discipline<\/b>. Filter by category below to see the work.\n      <\/p>\n\n      <div class=\"w1-meta rv a3\">\n        <span>TVC &amp; brand films<\/span>\n        <span>Corporate &amp; AV<\/span>\n        <span>Digital &amp; social<\/span>\n      <\/div>\n\n      <div class=\"w1-btns rv a4\">\n        <a class=\"w1-btn w1-btn--fill\" href=\"#work-grid\">\n          <span>Browse the Work<\/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=\"w1-btn w1-btn--line\" href=\"https:\/\/wa.me\/918527121545?text=Hi%20Mifa%20Productions%2C%20please%20share%20your%20showreel.\" target=\"_blank\" rel=\"noopener\">\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n          <span>Request Showreel<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- ---------- 3D CARD DECK ---------- -->\n    <div class=\"w1-stage rv a5\">\n      <div class=\"w1-deck\" id=\"w1Deck\" aria-hidden=\"true\">\n        <!-- EDIT: change the card titles here -->\n        <div class=\"w1-card\">\n          <div class=\"w1-card__top\"><span>Commercial<\/span><i>16:9<\/i><\/div>\n          <div class=\"w1-card__mid\"><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><b>Brand Films<\/b><u>Script to master<\/u><\/div>\n        <\/div>\n        <div class=\"w1-card\">\n          <div class=\"w1-card__top\"><span>Corporate<\/span><i>16:9<\/i><\/div>\n          <div class=\"w1-card__mid\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 20V8l8-4 8 4v12\"\/><path d=\"M9 20v-6h6v6\"\/><\/svg><\/div>\n          <div><b>Corporate AV<\/b><u>Plant &amp; profile films<\/u><\/div>\n        <\/div>\n        <div class=\"w1-card\">\n          <div class=\"w1-card__top\"><span>Digital<\/span><i>9:16<\/i><\/div>\n          <div class=\"w1-card__mid\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 3h10v18H7z\"\/><path d=\"M11 18h2\"\/><\/svg><\/div>\n          <div><b>Social Content<\/b><u>Vertical &amp; reels<\/u><\/div>\n        <\/div>\n        <div class=\"w1-card\">\n          <div class=\"w1-card__top\"><span>Micro Drama<\/span><i>9:16<\/i><\/div>\n          <div class=\"w1-card__mid\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 5h16v14H4z\"\/><path d=\"M4 9h16M4 15h16\"\/><\/svg><\/div>\n          <div><b>Short Series<\/b><u>Episodic formats<\/u><\/div>\n        <\/div>\n        <div class=\"w1-card\">\n          <div class=\"w1-card__top\"><span>Stills<\/span><i>4:5<\/i><\/div>\n          <div class=\"w1-card__mid\"><svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7h4l2-2h6l2 2h4v12H3z\"\/><circle cx=\"12\" cy=\"13\" r=\"3.4\"\/><\/svg><\/div>\n          <div><b>Photography<\/b><u>Campaign &amp; product<\/u><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"w1-dots\" id=\"w1Dots\" aria-hidden=\"true\">\n        <i class=\"on\"><\/i><i><\/i><i><\/i><i><\/i><i><\/i>\n      <\/div>\n\n      <div class=\"w1-cap\">\n        <b>Every format, one studio.<\/b> The grid below has project-wise filters\n        and video previews.\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"w1-scr\">Scroll<i><\/i><\/div>\n\n  <div class=\"w1-marq\">\n    <div class=\"w1-marq__t\" id=\"w1Marq\">\n      <span>TVC<\/span><span>Brand Films<\/span><span>Corporate AV<\/span>\n      <span>Explainers<\/span><span>Social Content<\/span><span>Micro Drama<\/span>\n      <span>Photography<\/span><span>Event Coverage<\/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-w1')\n    : document.querySelector('.mifa-w1');\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('#w1Nav');\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('.w1-links a, .w1-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('#w1MenuBtn'), ov = q('#w1Ov');\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 deck cycle ---------------- *\/\n  var deck = q('#w1Deck');\n  if(deck){\n    var cards = Array.prototype.slice.call(deck.querySelectorAll('.w1-card'));\n    var dots  = Array.prototype.slice.call(root.querySelectorAll('#w1Dots i'));\n    var order = cards.map(function(_, i){ return i; });\n    var busy = false, timer = null;\n\n    function place(instant){\n      order.forEach(function(ci, depth){\n        var c = cards[ci];\n        if(instant){ c.style.transition = 'none'; }\n        c.style.transform =\n          'translateZ(' + (-depth * 62) + 'px) translateY(' + (-depth * 13) + 'px) scale(' + (1 - depth * .035) + ')';\n        c.style.opacity = depth > 3 ? 0 : (1 - depth * .16);\n        c.style.zIndex  = 50 - depth;\n        if(instant){\n          \/* force a reflow, then restore the transition *\/\n          void c.offsetWidth;\n          c.style.transition = '';\n        }\n      });\n      dots.forEach(function(d, i){ d.classList.toggle('on', i === order[0]); });\n    }\n    place(true);\n\n    function next(){\n      if(busy) return; busy = true;\n      var front = cards[order[0]];\n      front.classList.add('out');\n      setTimeout(function(){\n        order.push(order.shift());\n        front.classList.remove('out');\n        front.style.transition = 'none';\n        var depth = order.length - 1;\n        front.style.transform =\n          'translateZ(' + (-depth * 62) + 'px) translateY(' + (-depth * 13) + 'px) scale(' + (1 - depth * .035) + ')';\n        front.style.opacity = 0;\n        void front.offsetWidth;\n        front.style.transition = '';\n        place(false);\n        busy = false;\n      }, 640);\n    }\n\n    if(!reduce){\n      timer = setInterval(next, 3200);\n      deck.addEventListener('mouseenter', function(){ clearInterval(timer); });\n      deck.addEventListener('mouseleave', function(){ clearInterval(timer); timer = setInterval(next, 3200); });\n      document.addEventListener('visibilitychange', function(){\n        if(document.hidden){ clearInterval(timer); }\n        else { clearInterval(timer); timer = setInterval(next, 3200); }\n      });\n    }\n  }\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('#w1Copy'), 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('#w1Copy'); if(c) c.style.transform = ''; }\n  }, {passive:true});\n\n  \/* ---------------- marquee ---------------- *\/\n  var t = q('#w1Marq');\n  if(t) t.innerHTML += t.innerHTML;\n})();\n<\/script>\n<\/div>\n\n\n\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 WORK PAGE \u00b7 PART 2\n     FILTERABLE PROJECT GRID (3D tilt cards) + VIDEO LIGHTBOX\n\n     WordPress \"Custom HTML\" block me poora paste karo.\n     Sab kuch .mifa-w2 me scoped hai.\n\n     >>> HAR PROJECT CARD ME 3 CHEEZEIN EDIT KARNI HAIN <<<\n       data-cat  = category  (tvc \/ corp \/ digital \/ drama \/ photo)\n       data-yt   = YouTube video ID  (khali chhodo to \"Reel on request\" chalega)\n       data-img  = thumbnail image URL (khali chhodo to gradient placeholder)\n     Title, client aur year seedha HTML me likhe hain.\n     ============================================================ -->\n\n<div class=\"mifa-w2\">\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-w2{\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-w2 *,.mifa-w2 *::before,.mifa-w2 *::after{ box-sizing:border-box; }\n.mifa-w2 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-w2 a:hover,.mifa-w2 a:focus{ text-decoration:none !important; }\n.mifa-w2 h2,.mifa-w2 h3,.mifa-w2 h4,.mifa-w2 p,.mifa-w2 ul,.mifa-w2 li{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-w2 ul{ list-style:none !important; }\n.mifa-w2 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-w2 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-w2 button:hover,.mifa-w2 button:focus{ background:none; }\n.mifa-w2 svg{ display:block; }\n.mifa-w2 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\n\/* ======================== SHELL \/ AMBIENT ======================== *\/\n.mifa-w2 .w2-wrap{\n  position:relative; padding:clamp(64px,10vh,132px) 0; isolation:isolate;\n  border-bottom:1px solid var(--line);\n}\n.mifa-w2 .w2-orb{\n  position:absolute; z-index:0; border-radius:50%; pointer-events:none;\n  width:60vmax; height:60vmax; top:-24vmax; left:-22vmax;\n  background:radial-gradient(circle, rgba(196,22,43,.2) 0%, transparent 60%);\n  animation:w2Drift 25s ease-in-out infinite alternate;\n}\n@keyframes w2Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(7%,6%,0) scale(1.16)} }\n.mifa-w2 .w2-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='nw2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nw2)'\/%3E%3C\/svg%3E\");\n  animation:w2Grain .7s steps(3) infinite;\n}\n@keyframes w2Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n\n.mifa-w2 .w2-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-w2 .w2-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-w2 .w2-eye b{ color:var(--red-hi); font-weight:400; }\n.mifa-w2 .w2-eye::after{ content:''; flex:1; max-width:130px; height:1px; background:var(--line); }\n\n.mifa-w2 h2.w2-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-w2 .w2-h2 em{ font-style:normal; color:var(--red-hi); text-shadow:0 0 40px rgba(255,59,84,.45); }\n.mifa-w2 p.w2-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-w2 .w2-lead b{ color:var(--ink); font-weight:600; }\n\n\/* ============================ FILTERS ============================ *\/\n.mifa-w2 .w2-filters{\n  display:flex; flex-wrap:wrap; gap:10px;\n  margin-top:clamp(30px,4.4vh,46px);\n  padding-bottom:clamp(28px,4vh,40px); border-bottom:1px solid var(--line);\n}\n.mifa-w2 .w2-fil{\n  position:relative; overflow:hidden;\n  padding:11px 20px; border-radius:999px; border:1px solid var(--line);\n  background:rgba(242,240,238,.03);\n  font-family:var(--m); font-size:11px; letter-spacing:.12em; text-transform:uppercase;\n  color:var(--soft); transition:color .35s, border-color .35s, background .35s, transform .35s var(--e);\n}\n.mifa-w2 .w2-fil span{ position:relative; z-index:2; }\n.mifa-w2 .w2-fil.on{\n  color:#fff; border-color:transparent; background:var(--red);\n  box-shadow:0 10px 28px rgba(196,22,43,.36);\n}\n.mifa-w2 .w2-fil em{\n  position:relative; z-index:2; font-style:normal; margin-left:8px;\n  font-size:9.5px; opacity:.7;\n}\n\n\/* ============================== GRID ============================== *\/\n.mifa-w2 .w2-grid{\n  display:grid; gap:clamp(14px,1.8vw,24px);\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  margin-top:clamp(30px,4.4vh,46px); perspective:1400px;\n}\n.mifa-w2 .w2-item{ min-width:0; }\n.mifa-w2 .w2-item.off{ display:none; }\n\n.mifa-w2 .w2-card{\n  position:relative; width:100%; display:block; border-radius:16px; overflow:hidden;\n  border:1px solid var(--line); background:var(--panel);\n  transform-style:preserve-3d; will-change:transform;\n  opacity:0; transform:translateY(28px) rotateX(-12deg); transform-origin:top center;\n  transition:opacity .8s var(--e), transform .55s var(--e), border-color .45s, box-shadow .5s;\n}\n.mifa-w2 .w2-card.on{ opacity:1; transform:none; }\n\n.mifa-w2 .w2-shot{\n  position:relative; aspect-ratio:16\/10; overflow:hidden;\n  background-color:#0E0E14;\n  background-image:\n    radial-gradient(circle at 30% 20%, rgba(196,22,43,.4), transparent 58%),\n    radial-gradient(circle at 78% 82%, rgba(122,12,24,.5), transparent 62%);\n  background-size:cover; background-position:center;\n}\n.mifa-w2 .w2-shot::before{\n  content:''; position:absolute; inset:0;\n  background:\n    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 1px, transparent 1px 26px),\n    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.72));\n}\n\/* sprocket holes \u2014 film strip feel *\/\n.mifa-w2 .w2-shot::after{\n  content:''; position:absolute; left:0; right:0; bottom:0; height:14px;\n  background-image:radial-gradient(circle, rgba(0,0,0,.85) 0 3px, transparent 3.5px);\n  background-size:18px 14px; opacity:.55;\n}\n.mifa-w2 .w2-play{\n  position:absolute; z-index:3; left:50%; top:50%; translate:-50% -50%;\n  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;\n  background:rgba(196,22,43,.9); box-shadow:0 12px 34px rgba(196,22,43,.5);\n  transform:scale(.82); opacity:0; transition:opacity .45s var(--e), transform .45s var(--e);\n}\n.mifa-w2 .w2-play svg{ width:20px; height:20px; fill:#fff; margin-left:3px; }\n.mifa-w2 .w2-card.on .w2-play{ opacity:.92; transform:scale(1); }\n.mifa-w2 .w2-badge{\n  position:absolute; z-index:3; top:12px; left:12px;\n  padding:6px 11px; border-radius:999px; background:rgba(7,7,10,.72);\n  border:1px solid rgba(255,59,84,.4); backdrop-filter:blur(8px);\n  font-family:var(--m); font-size:9.5px; letter-spacing:.16em;\n  text-transform:uppercase; color:var(--red-hi);\n}\n.mifa-w2 .w2-yr{\n  position:absolute; z-index:3; top:12px; right:12px;\n  font-family:var(--m); font-size:10px; letter-spacing:.14em; color:rgba(242,240,238,.8);\n}\n\n.mifa-w2 .w2-body{\n  padding:18px 20px 22px; transform:translateZ(20px);\n  display:flex; flex-direction:column; gap:6px;\n}\n.mifa-w2 h3.w2-t{\n  font-size:clamp(16px,1.6vw,20px); font-weight:800; letter-spacing:-.025em; color:var(--ink);\n}\n.mifa-w2 .w2-cl{\n  font-family:var(--m); font-size:10.5px; letter-spacing:.12em;\n  text-transform:uppercase; color:var(--soft);\n}\n\n\/* --------------------------- LIGHTBOX --------------------------- *\/\n.mifa-w2 .w2-lb{\n  position:fixed; inset:0; z-index:99990; display:flex; align-items:center; justify-content:center;\n  padding:clamp(16px,4vw,48px);\n  background:rgba(4,4,7,.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);\n  opacity:0; visibility:hidden; transition:opacity .45s var(--e), visibility .45s;\n}\n.mifa-w2 .w2-lb.open{ opacity:1; visibility:visible; }\n.mifa-w2 .w2-lb__box{\n  position:relative; width:min(1040px,100%);\n  transform:scale(.94) translateY(16px); transition:transform .55s var(--e);\n}\n.mifa-w2 .w2-lb.open .w2-lb__box{ transform:none; }\n.mifa-w2 .w2-lb__frame{\n  position:relative; aspect-ratio:16\/9; width:100%; border-radius:14px; overflow:hidden;\n  background:#000; border:1px solid rgba(255,59,84,.34);\n  box-shadow:0 40px 90px rgba(0,0,0,.7);\n}\n.mifa-w2 .w2-lb__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }\n.mifa-w2 .w2-lb__soon{\n  position:absolute; inset:0; display:flex; flex-direction:column;\n  align-items:center; justify-content:center; gap:16px; text-align:center; padding:26px;\n  background:linear-gradient(158deg, rgba(196,22,43,.28), rgba(12,12,17,.97));\n}\n.mifa-w2 .w2-lb__soon p{ max-width:38ch; font-size:15.5px; line-height:1.65; color:rgba(242,240,238,.82); }\n.mifa-w2 .w2-lb__soon b{\n  font-family:var(--m); font-size:11px; letter-spacing:.18em;\n  text-transform:uppercase; color:var(--red-hi);\n}\n.mifa-w2 .w2-lb__cta{\n  display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px;\n  background:var(--red); color:#fff; font-size:12.5px; font-weight:600;\n  letter-spacing:.09em; text-transform:uppercase;\n  box-shadow:0 12px 32px rgba(196,22,43,.42); transition:transform .4s var(--e);\n}\n.mifa-w2 .w2-lb__cta svg{ width:15px; height:15px; fill:currentColor; }\n.mifa-w2 .w2-lb__cap{\n  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px; margin-top:16px;\n}\n.mifa-w2 .w2-lb__cap b{ font-size:clamp(17px,2vw,22px); font-weight:800; letter-spacing:-.02em; color:var(--ink); }\n.mifa-w2 .w2-lb__cap i{\n  font-style:normal; font-family:var(--m); font-size:10.5px;\n  letter-spacing:.14em; text-transform:uppercase; color:var(--soft);\n}\n.mifa-w2 .w2-x{\n  position:absolute; top:-52px; right:0; width:42px; height:42px; border-radius:50%;\n  display:grid; place-items:center; border:1px solid var(--line); background:rgba(242,240,238,.06);\n  transition:background .35s, transform .35s var(--e);\n}\n.mifa-w2 .w2-x svg{ width:17px; height:17px; stroke:var(--ink); stroke-width:1.9; fill:none; }\n\n\/* --------------------------- HOVER --------------------------- *\/\n@media (hover:hover) and (pointer:fine){\n  .mifa-w2 .w2-fil:hover{ color:var(--ink); border-color:rgba(255,59,84,.5); transform:translateY(-2px); }\n  .mifa-w2 .w2-fil.on:hover{ color:#fff; }\n  .mifa-w2 .w2-card:hover{\n    border-color:rgba(255,59,84,.5); box-shadow:0 26px 56px rgba(0,0,0,.55);\n  }\n  .mifa-w2 .w2-card:hover .w2-play{ opacity:1; transform:scale(1.1); }\n  .mifa-w2 .w2-lb__cta:hover{ transform:translateY(-3px); }\n  .mifa-w2 .w2-x:hover{ background:var(--red); transform:rotate(90deg); }\n}\n\n\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1040px){\n  .mifa-w2 .w2-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); perspective:none; }\n  .mifa-w2 .w2-card{ transform-style:flat; }\n}\n@media (max-width:700px){\n  .mifa-w2 .w2-wrap{ padding:clamp(52px,8vh,80px) 0; }\n  .mifa-w2 h2.w2-h2{ font-size:clamp(28px,8.6vw,42px); letter-spacing:-.03em; }\n  .mifa-w2 .w2-grid{ grid-template-columns:1fr; }\n  .mifa-w2 .w2-card{ transform:translateY(24px); }\n  .mifa-w2 .w2-filters{ gap:8px; }\n  .mifa-w2 .w2-fil{ padding:10px 15px; font-size:10px; }\n  .mifa-w2 .w2-fil em{ display:none; }\n  .mifa-w2 .w2-x{ top:auto; bottom:-56px; right:50%; translate:50% 0; }\n  .mifa-w2 .w2-grain{ opacity:.08; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-w2 *,.mifa-w2 *::before,.mifa-w2 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-w2 .w2-card{ opacity:1; transform:none; }\n}\n<\/style>\n\n<section class=\"w2-wrap\" id=\"work-grid\">\n  <div class=\"w2-orb\" aria-hidden=\"true\"><\/div>\n  <div class=\"w2-grain\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"w2-in\">\n\n    <div class=\"w2-eye\"><b>005<\/b> \/ The reel<\/div>\n    <h2 class=\"w2-h2\">Projects, <em>format<\/em> ke hisaab se.<\/h2>\n    <p class=\"w2-lead\">\n      Category chuniye aur sirf wahi kaam dekhiye. Jis card par\n      <b>play button<\/b> hai, uska video yahin chal jaayega.\n    <\/p>\n\n    <!-- ============ FILTERS ============ -->\n    <div class=\"w2-filters\" id=\"w2Filters\" role=\"tablist\" aria-label=\"Filter projects by category\">\n      <button class=\"w2-fil on\" data-f=\"all\"     type=\"button\"><span>All Work<\/span><em>09<\/em><\/button>\n      <button class=\"w2-fil\"    data-f=\"tvc\"     type=\"button\"><span>Commercials<\/span><em>02<\/em><\/button>\n      <button class=\"w2-fil\"    data-f=\"corp\"    type=\"button\"><span>Corporate<\/span><em>02<\/em><\/button>\n      <button class=\"w2-fil\"    data-f=\"digital\" type=\"button\"><span>Digital<\/span><em>02<\/em><\/button>\n      <button class=\"w2-fil\"    data-f=\"drama\"   type=\"button\"><span>Micro Drama<\/span><em>01<\/em><\/button>\n      <button class=\"w2-fil\"    data-f=\"photo\"   type=\"button\"><span>Photography<\/span><em>02<\/em><\/button>\n    <\/div>\n\n    <!-- ============ GRID ============\n         EDIT: har card me data-cat \/ data-yt \/ data-img bharna hai.\n         data-yt me sirf video ID daalna (poora URL nahi).\n         Example: data-yt=\"dQw4w9WgXcQ\"\n    ================================== -->\n    <div class=\"w2-grid\" id=\"w2Grid\">\n\n      <div class=\"w2-item\" data-cat=\"tvc\">\n        <button class=\"w2-card\" type=\"button\" data-yt=\"\" data-img=\"\"\n                data-title=\"Brand Campaign Film\" data-client=\"Client name\" data-year=\"2025\" data-cat-label=\"Commercial\">\n          <div class=\"w2-shot\">\n            <span class=\"w2-badge\">Commercial<\/span><span class=\"w2-yr\">2025<\/span>\n            <span class=\"w2-play\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/div>\n          <div class=\"w2-body\">\n            <h3 class=\"w2-t\">Brand Campaign Film<\/h3>\n            <div class=\"w2-cl\">Client name &middot; 60 sec<\/div>\n          <\/div>\n        <\/button>\n      <\/div>\n\n      <div class=\"w2-item\" data-cat=\"corp\">\n        <button class=\"w2-card\" type=\"button\" data-yt=\"\" data-img=\"\"\n                data-title=\"Corporate Profile Film\" data-client=\"Client name\" data-year=\"2025\" data-cat-label=\"Corporate\">\n          <div class=\"w2-shot\">\n            <span class=\"w2-badge\">Corporate<\/span><span class=\"w2-yr\">2025<\/span>\n            <span class=\"w2-play\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/div>\n          <div class=\"w2-body\">\n            <h3 class=\"w2-t\">Corporate Profile Film<\/h3>\n            <div class=\"w2-cl\">Client name &middot; 3 min<\/div>\n          <\/div>\n        <\/button>\n      <\/div>\n\n      <div class=\"w2-item\" data-cat=\"digital\">\n        <button class=\"w2-card\" type=\"button\" data-yt=\"\" data-img=\"\"\n                data-title=\"Social Campaign Series\" data-client=\"Client name\" data-year=\"2025\" data-cat-label=\"Digital\">\n          <div class=\"w2-shot\">\n            <span class=\"w2-badge\">Digital<\/span><span class=\"w2-yr\">2025<\/span>\n            <span class=\"w2-play\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/div>\n          <div class=\"w2-body\">\n            <h3 class=\"w2-t\">Social Campaign Series<\/h3>\n            <div class=\"w2-cl\">Client name &middot; 6 films<\/div>\n          <\/div>\n        <\/button>\n      <\/div>\n\n      <div class=\"w2-item\" data-cat=\"drama\">\n        <button class=\"w2-card\" type=\"button\" data-yt=\"\" data-img=\"\"\n                data-title=\"Micro Drama Pilot\" data-client=\"Platform name\" data-year=\"2024\" data-cat-label=\"Micro Drama\">\n          <div class=\"w2-shot\">\n            <span class=\"w2-badge\">Micro Drama<\/span><span class=\"w2-yr\">2024<\/span>\n            <span class=\"w2-play\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/div>\n          <div class=\"w2-body\">\n            <h3 class=\"w2-t\">Micro Drama Pilot<\/h3>\n            <div class=\"w2-cl\">Platform name &middot; 8 episodes<\/div>\n          <\/div>\n        <\/button>\n      <\/div>\n\n      <div class=\"w2-item\" data-cat=\"tvc\">\n        <button class=\"w2-card\" type=\"button\" data-yt=\"\" data-img=\"\"\n                data-title=\"Product Launch TVC\" data-client=\"Client name\" data-year=\"2024\" data-cat-label=\"Commercial\">\n          <div class=\"w2-shot\">\n            <span class=\"w2-badge\">Commercial<\/span><span class=\"w2-yr\">2024<\/span>\n            <span class=\"w2-play\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/div>\n          <div class=\"w2-body\">\n            <h3 class=\"w2-t\">Product Launch TVC<\/h3>\n            <div class=\"w2-cl\">Client name &middot; 30 sec<\/div>\n          <\/div>\n        <\/button>\n      <\/div>\n\n      <div class=\"w2-item\" data-cat=\"photo\">\n        <button class=\"w2-card\" type=\"button\" data-yt=\"\" data-img=\"\"\n                data-title=\"Campaign Stills\" data-client=\"Client name\" data-year=\"2024\" data-cat-label=\"Photography\">\n          <div class=\"w2-shot\">\n            <span class=\"w2-badge\">Photography<\/span><span class=\"w2-yr\">2024<\/span>\n            <span class=\"w2-play\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/div>\n          <div class=\"w2-body\">\n            <h3 class=\"w2-t\">Campaign Stills<\/h3>\n            <div class=\"w2-cl\">Client name &middot; Studio shoot<\/div>\n          <\/div>\n        <\/button>\n      <\/div>\n\n      <div class=\"w2-item\" data-cat=\"corp\">\n        <button class=\"w2-card\" type=\"button\" data-yt=\"\" data-img=\"\"\n                data-title=\"Plant &amp; Process Film\" data-client=\"Client name\" data-year=\"2023\" data-cat-label=\"Corporate\">\n          <div class=\"w2-shot\">\n            <span class=\"w2-badge\">Corporate<\/span><span class=\"w2-yr\">2023<\/span>\n            <span class=\"w2-play\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/div>\n          <div class=\"w2-body\">\n            <h3 class=\"w2-t\">Plant &amp; Process Film<\/h3>\n            <div class=\"w2-cl\">Client name &middot; Industrial<\/div>\n          <\/div>\n        <\/button>\n      <\/div>\n\n      <div class=\"w2-item\" data-cat=\"digital\">\n        <button class=\"w2-card\" type=\"button\" data-yt=\"\" data-img=\"\"\n                data-title=\"Explainer Video\" data-client=\"Client name\" data-year=\"2023\" data-cat-label=\"Digital\">\n          <div class=\"w2-shot\">\n            <span class=\"w2-badge\">Digital<\/span><span class=\"w2-yr\">2023<\/span>\n            <span class=\"w2-play\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/div>\n          <div class=\"w2-body\">\n            <h3 class=\"w2-t\">Explainer Video<\/h3>\n            <div class=\"w2-cl\">Client name &middot; 2D animation<\/div>\n          <\/div>\n        <\/button>\n      <\/div>\n\n      <div class=\"w2-item\" data-cat=\"photo\">\n        <button class=\"w2-card\" type=\"button\" data-yt=\"\" data-img=\"\"\n                data-title=\"Event Coverage\" data-client=\"Client name\" data-year=\"2023\" data-cat-label=\"Photography\">\n          <div class=\"w2-shot\">\n            <span class=\"w2-badge\">Photography<\/span><span class=\"w2-yr\">2023<\/span>\n            <span class=\"w2-play\"><svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg><\/span>\n          <\/div>\n          <div class=\"w2-body\">\n            <h3 class=\"w2-t\">Event Coverage<\/h3>\n            <div class=\"w2-cl\">Client name &middot; Stills + video<\/div>\n          <\/div>\n        <\/button>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <!-- ============ LIGHTBOX ============ -->\n  <div class=\"w2-lb\" id=\"w2Lb\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Project preview\">\n    <div class=\"w2-lb__box\">\n      <button class=\"w2-x\" id=\"w2X\" type=\"button\" aria-label=\"Close preview\">\n        <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\"><path d=\"M6 6l12 12M18 6L6 18\"\/><\/svg>\n      <\/button>\n      <div class=\"w2-lb__frame\" id=\"w2Frame\"><\/div>\n      <div class=\"w2-lb__cap\"><b id=\"w2CapT\">Project<\/b><i id=\"w2CapC\">Client<\/i><\/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-w2')\n    : document.querySelector('.mifa-w2');\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  var cards = Array.prototype.slice.call(root.querySelectorAll('.w2-card'));\n  var items = Array.prototype.slice.call(root.querySelectorAll('.w2-item'));\n\n  \/* ---------- thumbnails: data-img ya YouTube auto-thumb ---------- *\/\n  cards.forEach(function(c){\n    var shot = c.querySelector('.w2-shot');\n    var img  = c.dataset.img;\n    var yt   = c.dataset.yt;\n    if(img){\n      shot.style.backgroundImage = 'url(\"' + img + '\")';\n    } else if(yt){\n      shot.style.backgroundImage = 'url(\"https:\/\/i.ytimg.com\/vi\/' + yt + '\/maxresdefault.jpg\")';\n    }\n  });\n\n  \/* ---------- reveal ---------- *\/\n  function show(list){\n    list.forEach(function(c, i){\n      c.style.transitionDelay = (i % 3) * 0.07 + 's';\n      c.classList.add('on');\n    });\n  }\n  if(reduce || !('IntersectionObserver' in window)){\n    show(cards);\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:.15, rootMargin:'0px 0px -6% 0px'});\n    cards.forEach(function(c, i){ c.style.transitionDelay = (i % 3) * 0.07 + 's'; io.observe(c); });\n  }\n\n  \/* ---------- filters ---------- *\/\n  var fils = Array.prototype.slice.call(root.querySelectorAll('.w2-fil'));\n  fils.forEach(function(f){\n    f.addEventListener('click', function(){\n      fils.forEach(function(x){ x.classList.remove('on'); });\n      f.classList.add('on');\n      var key = f.dataset.f;\n      var shown = [];\n      items.forEach(function(it){\n        var match = (key === 'all' || it.dataset.cat === key);\n        it.classList.toggle('off', !match);\n        if(match) shown.push(it.querySelector('.w2-card'));\n      });\n      \/* re-animate visible cards *\/\n      shown.forEach(function(c){ c.classList.remove('on'); });\n      void root.offsetWidth;\n      show(shown);\n    });\n  });\n\n  \/* ---------- 3D tilt (desktop mouse only) ---------- *\/\n  var desktop = window.matchMedia('(hover:hover) and (pointer:fine) and (min-width:1041px)').matches;\n  if(!reduce && desktop){\n    cards.forEach(function(c){\n      c.addEventListener('mousemove', function(e){\n        var b = c.getBoundingClientRect();\n        var x = ((e.clientX - b.left) \/ b.width  - .5) * 2;\n        var y = ((e.clientY - b.top)  \/ b.height - .5) * 2;\n        c.style.transform = 'translateY(-5px) rotateY(' + (x * 6) + 'deg) rotateX(' + (-y * 5) + 'deg)';\n      });\n      c.addEventListener('mouseleave', function(){ c.style.transform = ''; });\n    });\n  }\n\n  \/* ---------- lightbox ---------- *\/\n  var lb = q('#w2Lb'), frame = q('#w2Frame'), capT = q('#w2CapT'), capC = q('#w2CapC'), x = q('#w2X');\n  var lastFocus = null;\n\n  function open(c){\n    lastFocus = c;\n    var yt = c.dataset.yt;\n    capT.textContent = c.dataset.title || 'Project';\n    capC.textContent = [c.dataset.client, c.dataset.year, c.dataset.catLabel]\n                        .filter(Boolean).join(' \u00b7 ');\n\n    if(yt){\n      frame.innerHTML =\n        '<iframe src=\"https:\/\/www.youtube-nocookie.com\/embed\/' + yt +\n        '?autoplay=1&#038;rel=0&#038;modestbranding=1\" title=\"' + (c.dataset.title || 'Project') +\n        '\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>';\n    } else {\n      frame.innerHTML =\n        '<div class=\"w2-lb__soon\">' +\n          '<b>Reel on request<\/b>' +\n          '<p>Is project ka full video abhi public nahi hai. WhatsApp par bataiye kya dekhna hai, hum turant bhej denge.<\/p>' +\n          '<a class=\"w2-lb__cta\" href=\"https:\/\/wa.me\/918527121545?text=' +\n            encodeURIComponent('Hi Mifa Productions, please share the reel for: ' + (c.dataset.title || 'this project')) +\n          '\" target=\"_blank\" rel=\"noopener\">' +\n            '<svg viewBox=\"0 0 24 24\"><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            'Ask on WhatsApp' +\n          '<\/a>' +\n        '<\/div>';\n    }\n    lb.classList.add('open');\n    document.body.style.overflow = 'hidden';\n    x.focus();\n  }\n  function close(){\n    lb.classList.remove('open');\n    document.body.style.overflow = '';\n    setTimeout(function(){ frame.innerHTML = ''; }, 450);\n    if(lastFocus) lastFocus.focus();\n  }\n\n  cards.forEach(function(c){ c.addEventListener('click', function(){ open(c); }); });\n  x.addEventListener('click', close);\n  lb.addEventListener('click', function(e){ if(e.target === lb) close(); });\n  document.addEventListener('keydown', function(e){\n    if(e.key === 'Escape' && lb.classList.contains('open')) close();\n  });\n})();\n<\/script>\n<\/div>\n\n\n\n<!-- ============================================================\n     MIFA PRODUCTIONS \u2014 WORK PAGE \u00b7 PART 3\n     3D DUAL-ROW STRIP (sectors \/ client logos) + NUMBERS + CTA\n\n     WordPress \"Custom HTML\" block me poora paste karo.\n     Sab kuch .mifa-w3 me scoped hai.\n\n     >>> NOTE <<<\n     Strip me abhi SECTOR names hain (Automotive, FMCG, ...).\n     Jab client actual brand logos de de, to har <span> ke andar\n     text ki jagah <img decoding=\"async\" src=\"LOGO.png\" alt=\"Brand\"> daal dena \u2014\n     CSS pehle se logo ke liye ready hai (.w3-chip img).\n     ============================================================ -->\n\n<div class=\"mifa-w3\">\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-w3{\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-w3 *,.mifa-w3 *::before,.mifa-w3 *::after{ box-sizing:border-box; }\n.mifa-w3 a{ text-decoration:none !important; color:inherit; box-shadow:none !important; border:0; }\n.mifa-w3 a:hover,.mifa-w3 a:focus{ text-decoration:none !important; }\n.mifa-w3 h2,.mifa-w3 h3,.mifa-w3 h4,.mifa-w3 p,.mifa-w3 ul,.mifa-w3 li{\n  margin:0 !important; padding:0 !important; font-family:inherit; color:inherit;\n}\n.mifa-w3 ul{ list-style:none !important; }\n.mifa-w3 img{ display:block; max-width:100%; height:auto; border:0; box-shadow:none; }\n.mifa-w3 svg{ display:block; }\n.mifa-w3 :focus-visible{ outline:2px solid var(--red-hi); outline-offset:3px; }\n\n\/* ======================== SHELL \/ AMBIENT ======================== *\/\n.mifa-w3 .w3-wrap{ position:relative; padding:clamp(64px,10vh,132px) 0 0; isolation:isolate; }\n.mifa-w3 .w3-orb{\n  position:absolute; z-index:0; border-radius:50%; pointer-events:none;\n  width:62vmax; height:62vmax; top:-26vmax; right:-24vmax;\n  background:radial-gradient(circle, rgba(122,12,24,.34) 0%, transparent 58%);\n  animation:w3Drift 27s ease-in-out infinite alternate;\n}\n@keyframes w3Drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-7%,6%,0) scale(1.18)} }\n.mifa-w3 .w3-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='nw3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nw3)'\/%3E%3C\/svg%3E\");\n  animation:w3Grain .7s steps(3) infinite;\n}\n@keyframes w3Grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }\n\n.mifa-w3 .w3-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-w3 .w3-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-w3 .w3-eye b{ color:var(--red-hi); font-weight:400; }\n.mifa-w3 .w3-eye::after{ content:''; flex:1; max-width:130px; height:1px; background:var(--line); }\n\n.mifa-w3 h2.w3-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-w3 .w3-h2 em{ font-style:normal; color:var(--red-hi); text-shadow:0 0 40px rgba(255,59,84,.45); }\n.mifa-w3 p.w3-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-w3 .w3-lead b{ color:var(--ink); font-weight:600; }\n\n\/* ============ SIGNATURE : 3D DUAL-ROW STRIP ============ *\/\n.mifa-w3 .w3-strip{\n  position:relative; margin-top:clamp(36px,5vh,58px);\n  padding:clamp(26px,4vw,44px) 0;\n  perspective:900px;\n  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);\n          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);\n}\n.mifa-w3 .w3-strip__3d{\n  transform:rotateX(16deg); transform-style:preserve-3d;\n  display:flex; flex-direction:column; gap:14px;\n}\n.mifa-w3 .w3-row{ overflow:hidden; white-space:nowrap; }\n.mifa-w3 .w3-track{ display:inline-flex; align-items:center; gap:14px; }\n.mifa-w3 .w3-row--a .w3-track{ animation:w3Left 36s linear infinite; }\n.mifa-w3 .w3-row--b .w3-track{ animation:w3Right 44s linear infinite; }\n@keyframes w3Left{  to{ transform:translateX(-50%) } }\n@keyframes w3Right{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } }\n\n.mifa-w3 .w3-chip{\n  display:inline-flex; align-items:center; justify-content:center; gap:10px;\n  flex-shrink:0; min-width:clamp(140px,17vw,196px); height:clamp(62px,8vw,84px);\n  padding:0 22px; border-radius:12px;\n  border:1px solid var(--line); background:linear-gradient(158deg, rgba(196,22,43,.1), rgba(16,16,23,.94));\n  font-family:var(--m); font-size:clamp(10px,1.1vw,12px); letter-spacing:.16em;\n  text-transform:uppercase; color:rgba(242,240,238,.78);\n  transition:border-color .4s, color .4s, transform .4s var(--e), background .4s;\n}\n.mifa-w3 .w3-chip img{ max-height:60%; width:auto; opacity:.8; filter:grayscale(1) brightness(1.6); }\n.mifa-w3 .w3-chip::before{\n  content:''; width:5px; height:5px; border-radius:50%; background:var(--red-hi); flex-shrink:0;\n  box-shadow:0 0 8px 1px rgba(255,59,84,.6);\n}\n\n\/* ========================== NUMBERS ========================== *\/\n.mifa-w3 .w3-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-w3 .w3-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-w3 .w3-num.on{ opacity:1; transform:none; }\n.mifa-w3 .w3-num b{\n  display:block; font-size:clamp(28px,4.4vw,54px); font-weight:900;\n  letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1;\n}\n.mifa-w3 .w3-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-w3 .w3-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-w3 .w3-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-w3 .w3-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3.4vh,36px); }\n.mifa-w3 .w3-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-w3 .w3-btn span,.mifa-w3 .w3-btn svg{ position:relative; z-index:2; }\n.mifa-w3 .w3-btn svg{ width:16px; height:16px; flex-shrink:0; transition:transform .45s var(--e); }\n.mifa-w3 .w3-btn--fill{ background:var(--red); color:#fff; box-shadow:0 10px 34px rgba(196,22,43,.42); }\n.mifa-w3 .w3-btn--fill::before{\n  content:''; position:absolute; inset:0; background:var(--ink);\n  transform:translateY(101%); transition:transform .5s var(--e);\n}\n.mifa-w3 .w3-btn--line{ border:1px solid rgba(242,240,238,.26); color:var(--ink); }\n.mifa-w3 .w3-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-w3 .w3-cards{ display:grid; gap:12px; }\n.mifa-w3 .w3-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-w3 .w3-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-w3 .w3-adr p{ font-size:15.5px; line-height:1.6; color:var(--ink); }\n.mifa-w3 .w3-adr a{ color:var(--ink); transition:color .3s; }\n.mifa-w3 .w3-adr span{ display:block; margin-top:7px; font-size:14px; color:var(--soft); }\n\n.mifa-w3 .w3-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-w3 .w3-foot ul{ display:flex; flex-wrap:wrap; gap:18px; }\n.mifa-w3 .w3-foot a{ transition:color .3s; }\n\n\/* --------------------------- HOVER --------------------------- *\/\n@media (hover:hover) and (pointer:fine){\n  .mifa-w3 .w3-strip:hover .w3-track{ animation-play-state:paused; }\n  .mifa-w3 .w3-chip:hover{\n    border-color:rgba(255,59,84,.5); color:var(--ink); transform:translateY(-4px);\n    background:linear-gradient(158deg, rgba(196,22,43,.24), rgba(16,16,23,.96));\n  }\n  .mifa-w3 .w3-num:hover{ background:rgba(196,22,43,.12); }\n  .mifa-w3 .w3-adr:hover{ border-color:rgba(255,59,84,.45); transform:translateY(-3px); }\n  .mifa-w3 .w3-adr a:hover,.mifa-w3 .w3-foot a:hover{ color:var(--red-hi); }\n  .mifa-w3 .w3-btn:hover{ transform:translateY(-4px); }\n  .mifa-w3 .w3-btn--fill:hover{ color:var(--bg); box-shadow:0 18px 46px rgba(196,22,43,.28); }\n  .mifa-w3 .w3-btn--fill:hover::before{ transform:translateY(0); }\n  .mifa-w3 .w3-btn--fill:hover svg{ transform:translateX(4px); }\n  .mifa-w3 .w3-btn--line:hover{ border-color:rgba(242,240,238,.55); }\n  .mifa-w3 .w3-btn--line:hover::before{ transform:scaleX(1); transform-origin:left; }\n}\n\n\/* ========================= RESPONSIVE ========================= *\/\n@media (max-width:1040px){\n  .mifa-w3 .w3-nums{ grid-template-columns:repeat(2,minmax(0,1fr)); }\n  .mifa-w3 .w3-cta__grid{ grid-template-columns:1fr; }\n}\n@media (max-width:700px){\n  .mifa-w3 .w3-wrap{ padding-top:clamp(52px,8vh,80px); }\n  .mifa-w3 h2.w3-h2{ font-size:clamp(28px,8.6vw,42px); letter-spacing:-.03em; }\n  .mifa-w3 .w3-strip{ perspective:none; }\n  .mifa-w3 .w3-strip__3d{ transform:none; }\n  .mifa-w3 .w3-btns{ flex-direction:column; align-items:stretch; }\n  .mifa-w3 .w3-btn{ justify-content:center; }\n  .mifa-w3 .w3-foot{ flex-direction:column; align-items:flex-start; }\n  .mifa-w3 .w3-grain{ opacity:.08; }\n}\n@media (prefers-reduced-motion:reduce){\n  .mifa-w3 *,.mifa-w3 *::before,.mifa-w3 *::after{\n    animation-duration:.001ms !important; animation-iteration-count:1 !important;\n    transition-duration:.001ms !important;\n  }\n  .mifa-w3 .w3-num{ opacity:1; transform:none; }\n}\n<\/style>\n\n<section class=\"w3-wrap\">\n  <div class=\"w3-orb\" aria-hidden=\"true\"><\/div>\n  <div class=\"w3-grain\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"w3-in\">\n    <div class=\"w3-eye\"><b>006<\/b> \/ Who we shoot for<\/div>\n    <h2 class=\"w3-h2\">Har sector ka apna <em>rhythm<\/em> hota hai.<\/h2>\n    <p class=\"w3-lead\">\n      Ek factory floor aur ek fashion set &mdash; dono ka approach alag hota hai.\n      Mifa ne <b>in industries me shoots<\/b> handle kiye hain, isliye brief samajhne me\n      time waste nahi hota.\n    <\/p>\n  <\/div>\n\n  <!-- ============ 3D DUAL-ROW STRIP ============\n       EDIT: text ki jagah logo daalna ho to:\n       <span class=\"w3-chip\"><img decoding=\"async\" src=\"LOGO-URL.png\" alt=\"Brand\"><\/span>\n  ============================================== -->\n  <div class=\"w3-strip\">\n    <div class=\"w3-strip__3d\">\n      <div class=\"w3-row w3-row--a\">\n        <div class=\"w3-track\" data-dup>\n          <span class=\"w3-chip\">Automotive<\/span>\n          <span class=\"w3-chip\">FMCG<\/span>\n          <span class=\"w3-chip\">Real Estate<\/span>\n          <span class=\"w3-chip\">Healthcare<\/span>\n          <span class=\"w3-chip\">Education<\/span>\n          <span class=\"w3-chip\">Hospitality<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"w3-row w3-row--b\">\n        <div class=\"w3-track\" data-dup>\n          <span class=\"w3-chip\">Fashion<\/span>\n          <span class=\"w3-chip\">BFSI<\/span>\n          <span class=\"w3-chip\">Manufacturing<\/span>\n          <span class=\"w3-chip\">Retail<\/span>\n          <span class=\"w3-chip\">Government<\/span>\n          <span class=\"w3-chip\">NGO &amp; CSR<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"w3-in\">\n    <!-- ============ NUMBERS ============\n         EDIT: client se actual figures confirm karke badal lena -->\n    <div class=\"w3-nums\">\n      <div class=\"w3-num\"><b data-c=\"100\" data-suf=\"+\">0<\/b><i>Projects delivered<\/i><\/div>\n      <div class=\"w3-num\"><b data-c=\"25\"  data-suf=\"+\">0<\/b><i>Cities shot in<\/i><\/div>\n      <div class=\"w3-num\"><b data-c=\"7\">0<\/b><i>Formats we cover<\/i><\/div>\n      <div class=\"w3-num\"><b data-c=\"20\"  data-suf=\"+\">0<\/b><i>Years on the floor<\/i><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- ============ CTA ============ -->\n  <div class=\"w3-cta\" id=\"work-contact\">\n    <div class=\"w3-in\">\n      <div class=\"w3-cta__grid\">\n\n        <div>\n          <div class=\"w3-eye\"><b>007<\/b> \/ Next project<\/div>\n          <h2 class=\"w3-h2\">Aapka brief <em>agli<\/em> entry ban sakta hai.<\/h2>\n          <p class=\"w3-lead\">\n            Shoot date, city aur roughly kya banana hai &mdash; bas itna bata dijiye.\n            Hum usi din <b>availability aur clear estimate<\/b> bhej denge.\n          <\/p>\n\n          <div class=\"w3-btns\">\n            <a class=\"w3-btn w3-btn--fill\" href=\"https:\/\/wa.me\/918527121545?text=Hi%20Mifa%20Productions%2C%20I%20saw%20your%20work%20page%20and%20want%20to%20discuss%20a%20project.\" target=\"_blank\" rel=\"noopener\">\n              <span>Start a Project<\/span>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>\n            <\/a>\n            <a class=\"w3-btn w3-btn--line\" href=\"https:\/\/mifaproduction.com\/index.php\/studio\/\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" aria-hidden=\"true\"><path d=\"M4 20V8l8-4 8 4v12\"\/><path d=\"M9 20v-6h6v6\"\/><\/svg>\n              <span>About the Studio<\/span>\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"w3-cards\">\n          <div class=\"w3-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=\"w3-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=\"w3-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=\"w3-foot\">\n        <span>&copy; <b id=\"w3Yr\">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-w3')\n    : document.querySelector('.mifa-w3');\n  if(!root) return;\n  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* ---------- year ---------- *\/\n  var yr = root.querySelector('#w3Yr');\n  if(yr) yr.textContent = new Date().getFullYear();\n\n  \/* ---------- strip: seamless loop ke liye content duplicate ---------- *\/\n  root.querySelectorAll('[data-dup]').forEach(function(t){ t.innerHTML += t.innerHTML; });\n\n  \/* ---------- numbers reveal + count-up ---------- *\/\n  var nums = Array.prototype.slice.call(root.querySelectorAll('.w3-num'));\n\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\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 Selected Work 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-349","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\/349","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=349"}],"version-history":[{"count":2,"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/pages\/349\/revisions"}],"predecessor-version":[{"id":365,"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/pages\/349\/revisions\/365"}],"wp:attachment":[{"href":"https:\/\/mifaproduction.com\/index.php\/wp-json\/wp\/v2\/media?parent=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}