/* ============================================================
   Mohammed Zohaib theme — main stylesheet
   Same design, fonts (Tenor Sans + Poppins) and colors as the
   approved mohammedzohaib.com design. Backgrounds/media come
   from the Customizer via inline style attributes.
   ============================================================ */
/* Neue Regrade — the custom font the live site self-hosts (bundled here) */
@font-face{font-family:'Neue Regrade';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/Neue-Regrade-Light.ttf') format('truetype')}
@font-face{font-family:'Neue Regrade';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/Neue-Regrade-Regular.ttf') format('truetype')}
@font-face{font-family:'Neue Regrade';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/Neue-Regrade-Bold.ttf') format('truetype')}
@font-face{font-family:'Neue Regrade';font-weight:900;font-style:normal;font-display:swap;src:url('../fonts/Neue-Regrade-Extrabold.ttf') format('truetype')}

:root{
  --ink:#070707; --white:#fff; --crimson:#720000; --red:#D31616;
  --dark:#0f0f0f; --light:#f3f3f3; /* live's light-section grey (measured) */
  --tenor:'Tenor Sans',serif; --pop:'Poppins',sans-serif; --neue:'Neue Regrade',sans-serif;
  --ease:cubic-bezier(.25,.6,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--pop);font-weight:400;font-size:18px;line-height:1.65;color:var(--ink);
  background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--tenor);font-weight:400}
/* section headings match the live site's weight 500 */
.who h2,.ent h2,.ach__head h2,.watch .grid h2,.eng h2,.book h2,.ach__press h2{font-weight:500}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--crimson);color:#fff}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}

/* reveal system — a 1:1 match of the live site's Elementor entrance
   animations, measured from mohammedzohaib.com:
     • duration 1.25s, timing-function ease, delay 0 (Elementor defaults)
     • NO stagger — live animates every element in a section together
     • zoomIn  = scale3d(.3,.3,.3)→1, opacity 0→1 by the halfway point (50%)
     • fadeInUp = translate3d(0,100%,0)→0 (the element's own height)
   Implemented as one-shot KEYFRAME ANIMATIONS (exactly like Elementor), NOT
   transitions: an element's own transition:transform (hover lift on cards &
   buttons) would otherwise override a reveal transition and change its timing.
   No animation-fill-mode is used — the 100% keyframe equals each element's
   natural resting state (opacity:1, transform:none), so there is no flicker
   and hover transforms are free to run afterwards. None of the .rv elements
   carry a scroll motion-fx (stats/watch/social/hero-subtitle deliberately do
   NOT use .rv), so there is no fill-state clash with the scroll engine. */
.rv{opacity:0}
.rv.in{opacity:1;animation:mzZoomIn 1.25s ease}
.rv.rv-up.in{animation-name:mzFadeInUp}
/* live uses no per-element delay — the stagger classes are intentionally inert */
.rv-2,.rv-3,.rv-4{animation-delay:0s}
@keyframes mzZoomIn{
  0%{opacity:0;transform:scale3d(.3,.3,.3)}
  50%{opacity:1}
  100%{opacity:1;transform:none}}
@keyframes mzFadeInUp{
  0%{opacity:0;transform:translate3d(0,100%,0)}
  100%{opacity:1;transform:none}}
.no-js .rv,.customize-partial-refreshing .rv{opacity:1;transform:none;animation:none}

/* will-change only while an element is waiting to animate */
.rv:not(.in){will-change:opacity,transform}

/* (page loader, scroll progress bar, hero ken-burns drift, entrepreneur
   bg-video parallax and footer reveal all removed — none exist on the live
   site; this theme is a 1:1 duplicate of mohammedzohaib.com) */

/* social cards match the live site: always visible, with a horizontal
   "converge" scroll motion applied by JS (Elementor translateX motion fx).
   No entrance fade/zoom — only the heading + paragraph zoom in. */
.soc-fx{will-change:transform}
/* Watch photo: always visible, slides horizontally on scroll (live's
   Elementor translateX motion effect), rather than a zoomIn entrance. */
.watch__photo--fx{will-change:transform}

/* ---------- header (over hero) — measured on live @1425:
   logo 53px tall, 143px in from the left; Subscribe 48px tall
   (pad 15/20, radius 5, 14px/700, bg #54595F), 142px from the right;
   bar transparent, 93px total, NOT sticky (scrolls away like live) */
/* live's header content is a CENTRED 1140px box at every width
   (logo left = subscribe right-offset = (100% − 1140)/2; 143px @1425,
   383px @1905 — measured in Chrome) */
.hd{position:absolute;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:20px max(20px,calc(50% - 570px))}
.hd__logo img,.hd__logo .custom-logo{height:53px;width:auto}
.hd__logo--text{font-family:var(--tenor);font-size:22px;color:#fff;letter-spacing:.06em;text-transform:uppercase}
.hd__yt{display:inline-flex;align-items:center;gap:9px;background:#54595F;color:#fff;
  font-size:14px;font-weight:700;line-height:1.29;font-family:var(--pop);
  padding:15px 20px;border-radius:5px;transition:background .3s} /* 48px tall like live */
.hd__yt svg{width:22px;height:18px}
/* slate-grey by default, YouTube-red on hover (client request) */
.hd__yt:hover{background:var(--red);color:#fff}

/* non-front pages get a solid header bar */
body:not(.home) .hd{position:static;background:var(--ink)}
body:not(.home) .hd__logo--text{color:#fff}

/* ---------- 1 · hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* live hero overlay: rgba(0,0,0,.56) at .68 element opacity ≈ 38% black */
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.38)}
/* keep the name/subtitle readable over bright video frames */
.hero__txt h1,.hero__txt h2{text-shadow:0 2px 16px rgba(0,0,0,.6)}
.hero__txt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 20px}
/* hero name = live "fadeIn" (pure opacity), subtitle = "fadeInDown"
   (translate the subtitle's full height down→0). Both 1.25s / ease with NO
   delay between them — on live the name and subtitle reveal together. */
.hero__txt h1{font-size:clamp(34px,4.5vw,52px);font-weight:600;text-transform:uppercase;
  letter-spacing:normal;line-height:1.05;opacity:0;
  transition:opacity 1.25s ease}
.hero__txt h2{margin-top:15px;font-size:clamp(17px,2vw,25px);font-weight:300;
  letter-spacing:.03em;opacity:0;transform:translate3d(0,-100%,0);
  transition:opacity 1.25s ease,transform 1.25s ease}
body.ready .hero__txt h1{opacity:1}
body.ready .hero__txt h2{opacity:1;transform:none}

/* ---------- 2 · who am i ---------- */
/* ups.png cover anchored top-left + live's EXACT overlay (read from the
   computed ::before on mohammedzohaib.com): a radial gradient that is
   transparent at the top-centre (skyline + Ferris wheel peek through) and
   94% white everywhere else — this is what makes the band read white. */
.who{position:relative;background-color:#fff;background-position:0 0;background-size:cover;
  background-repeat:no-repeat;padding:clamp(70px,12vh,130px) 0;
  min-height:min(92vh,693px);display:flex;align-items:center} /* live: 693px */
.who::before{content:"";position:absolute;inset:0;
  background:radial-gradient(at 50% 0%,rgba(255,255,255,0) 0%,rgba(255,255,255,.94) 37%)}
.who .wrap{width:100%}
/* live: two 510px columns, 60px gap, 1080px row centred; video 510×287.
   (.wrap and .grid are the same element here — drop the wrap padding on
   desktop so the full 1080px goes to the columns, like live) */
.who .grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:60px;max-width:1080px;margin-inline:auto;align-items:center}
@media(min-width:1140px){.who .grid{padding-inline:0}}
.who h2{font-size:35px;color:#000;letter-spacing:.04em;text-transform:uppercase}
.who p{margin-top:26px;color:var(--ink)}
/* small "3X Capital" link button under the Who am I text */
.btn-3x{display:inline-flex;align-items:center;gap:8px;margin-top:28px;
  border:1.5px solid var(--crimson);color:var(--crimson);background:transparent;
  font-family:var(--pop);font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  padding:10px 22px;border-radius:4px;
  transition:background .3s,color .3s,transform .35s var(--ease),box-shadow .35s}
.btn-3x:hover{background:var(--crimson);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(114,0,0,.28)}
.btn-3x__arrow{transition:transform .3s var(--ease)}
.btn-3x:hover .btn-3x__arrow{transform:translateX(4px)}
.who__vid{width:100%;aspect-ratio:16/9;background:#000}
.who__vid video{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){.who .grid{grid-template-columns:1fr}}

/* ---------- 3 · entrepreneur (bg video band) ---------- */
/* live layout (re-measured @1920): the section is a FIXED 850px window at
   every desktop height (never 95vh — a shorter section widens the crop and
   cuts the Burj Khalifa spire). Content positions here are the STATIC ones;
   live's Elementor scroll fx (replicated in main.js) drift the heading up
   (speed 5.4, past 51% progress) and the stats down (speed 4) so that with
   the section in view they read at 128 / 518 from the top — the familiar
   composition. Mobile keeps the static layout (live disables the stats fx
   there too). */
.ent{position:relative;overflow:hidden;color:#fff;text-align:center;
  padding:clamp(70px,9.2vw,131px) 0 0;background:var(--ink);
  min-height:min(95vh,850px);display:flex;align-items:flex-start}
.ent .wrap{width:100%}
.ent__bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* live: linear-gradient(360deg,#000 24%,rgba(0,0,0,.52)) at .85 opacity — baked in */
.ent::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.85) 24%,rgba(0,0,0,.44) 100%)}
.ent .wrap{position:relative;z-index:2}
.ent h2{font-size:35px;letter-spacing:.05em;text-transform:uppercase}
.ent .ent__head>p{max-width:1240px;margin:15px auto 0;color:rgba(255,255,255,.92)}
.ent__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:clamp(100px,20.3vw,289px)} /* mobile (no fx): visual gap baked in */
/* ≥768px: live's static geometry — the scroll fx supplies the offsets that
   produce the reading-position layout; overflow visible lets the stats spill
   past the section edge mid-scroll exactly like live */
@media(min-width:768px){
  .ent{padding-top:168px;min-height:850px;overflow:visible}
  .ent__stats{margin-top:45px}
}
.ent__num{font-family:var(--tenor);font-weight:600;font-size:clamp(34px,4vw,50px);line-height:1}
/* space between the number and its +/$ signs (client request) */
/* live renders the number and its prefix/suffix tight together: "17+",
   "6,500+", "$2B+" — no gaps around the symbols */
.ent__num .fix{margin:0}
.ent__lbl{font-family:var(--tenor);font-weight:500;font-size:clamp(21px,2.5vw,34px);margin-top:10px}
@media(max-width:700px){.ent__stats{grid-template-columns:1fr;gap:42px}}

/* ---------- 4 · achievements ---------- */
.ach{position:relative;color:#fff;background-color:#101010;background-position:center;
  background-size:cover;background-repeat:no-repeat;padding:100px 0 0} /* live: 100px to heading */
.ach::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)} /* live: 50% black */
/* white copy sits on a bright sky photo — shadow it for legibility */
.ach__head h2,.ach__head p{text-shadow:0 2px 12px rgba(0,0,0,.8)}
.ach .wrap,.ach .ach__press{position:relative;z-index:2}
.ach__head{text-align:center;max-width:820px;margin-inline:auto}
.ach__head h2{font-size:35px;letter-spacing:.05em;text-transform:uppercase}
.ach__head p{margin-top:14px;font-size:16px;color:rgba(255,255,255,.95)}
.ach__head p strong,.ach__head p b{font-weight:600;color:#fff}
/* live (measured @1425): photos 340px wide × 424px tall, 30px apart,
   content row 1080px centred */
.ach__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1080px;
  margin:60px auto 0} /* live: 60px text→cards */
.ach__card{position:relative;background:#000;overflow:hidden}
.ach__card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
@media(min-width:821px){.ach__card img{aspect-ratio:auto;height:424px}}
/* live hover: a black overlay fades in to 35% — no lift, no image zoom */
.ach__card::after{content:"";position:absolute;inset:0;background:#000;opacity:0;
  transition:opacity .3s ease;pointer-events:none;z-index:1}
.ach__card:hover::after{opacity:.35}
.ach__meta{z-index:2}
.ach__meta{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}
.ach__meta::before{content:"";display:block;width:52px;height:2px;background:var(--red);margin-bottom:10px}
.ach__meta h3{font-size:23px;letter-spacing:.03em;color:#fff}
.ach__meta p{font-size:14px;font-family:var(--pop);color:rgba(255,255,255,.85)}
/* live press strip: "Featured on" Tenor 32px weight 300, logo image 56px
   tall, sitting 10px apart on one centred row */
.ach__press{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1vw,14px);
  flex-wrap:wrap;padding:60px 20px 108px} /* live: 60 above, 108 below */
.ach__press h2{font-size:clamp(24px,2.25vw,32px);font-weight:300;letter-spacing:normal}
.ach__press img{height:clamp(34px,3.93vw,56px);width:auto}
@media(max-width:820px){.ach__cards{grid-template-columns:1fr;max-width:400px}}

/* ---------- 5 · watch zohaib — measured on live @1425:
   photo column 425px at left 75 (near full-bleed), right column 810px,
   20px column gap; right column starts 20px below the photo top;
   subtitle +15, SUBSCRIBE +40, videos +40; video grid 20px columns /
   40px rows; small videos 257×144, large 395×222 (16:9); photo 425×646;
   NO hovers anywhere in this section on live. ---------- */
.watch{background:var(--dark);color:#fff;padding:75px 0} /* live: 75/75, bg #0F0F0F */
.watch .grid{display:grid;grid-template-columns:minmax(0,425fr) minmax(0,810fr);
  gap:20px;align-items:start}
.watch__photo{overflow:hidden}
.watch__photo img{width:100%;object-fit:cover;aspect-ratio:425/646;display:block}
.watch .grid h2{font-size:35px;letter-spacing:.06em;text-transform:uppercase}
.watch .grid>div:last-child{padding-top:20px} /* live: text col sits 20px lower */
.watch__sub{margin:14px 0 0;font-size:17px;color:rgba(255,255,255,.88)}
.btn-subscribe{display:inline-block;margin:40px 0 0;background:var(--red);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:.04em;padding:15px 25px;border-radius:5px;
  transition:background .4s,color .4s} /* live: #D31616, pad 15/25, r5; hover = same red */
/* live layout: 3 smaller videos on top, 2 larger below */
.watch__vids{display:grid;grid-template-columns:repeat(6,1fr);gap:40px 20px;margin-top:40px}
.watch__vids .yt{grid-column:span 2}
.watch__vids .yt:nth-child(4),.watch__vids .yt:nth-child(5){grid-column:span 3}
/* plain iframes exactly like live — no hover, no filter */
.yt{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border:0;padding:0}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:900px){.watch .grid{grid-template-columns:1fr}.watch__photo{max-width:420px}
  .watch .grid>div:last-child{padding-top:0}}
@media(max-width:600px){.watch__vids{grid-template-columns:1fr}
  .watch__vids .yt,.watch__vids .yt:nth-child(4),.watch__vids .yt:nth-child(5){grid-column:auto}}

/* ---------- 6 · developer logos marquee (white band) ----------
   measured on live in Chrome @1905: every logo is a FIXED 150px wide
   (height follows its natural aspect — Sobha/Nakheel render tall, Damac
   short), gaps ~298px so exactly FOUR logos are visible per viewport;
   the band is tall with generous white space (~58px above/below). */
.devs{background:#fff;padding:58px 0;overflow:hidden}
/* will-change + translateZ keep the marquee animating on iOS Safari, where an
   un-hinted transform animation inside an overflow:hidden band can stall. */
.devs__track{display:flex;align-items:center;width:max-content;
  gap:max(48px,calc(23.5vw - 150px)); /* → 4 visible at any width (298px @1905) */
  will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  /* ~80px/s continuous leftward scroll to match the live site's logo speed */
  animation:mz-mq 20s linear infinite}
.devs img{width:150px;height:auto;max-width:none;object-fit:contain;flex:0 0 auto}
@keyframes mz-mq{to{transform:translateX(-50%)}}

/* ---------- 7 · engage with me ---------- */
.eng{position:relative;color:#fff;text-align:center;background-color:#050505;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  /* live: 134px above the heading, 50px below the tallest card (915px total) */
  padding:134px 0 50px}
/* lighter scrim so the crowd/stage photo reads clearly (client request);
   the heading + paragraph get their own shadows for contrast instead */
.eng::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32)}
.eng .wrap{position:relative;z-index:2;max-width:1330px} /* live: intro wraps in 2 lines */
.eng h2{font-size:35px;letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.85)}
.eng>.wrap>p{max-width:none;margin:16px auto 0;color:#fff; /* live wraps this in 2 lines */
  text-shadow:0 1px 10px rgba(0,0,0,.85)}
/* minmax(0,1fr) (not 1fr) so tracks can shrink below the cards' content
   width — otherwise long handles force the grid wider than the phone and the
   whole page scrolls sideways on iOS Safari / Android. */
.eng__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:clamp(56px,9vh,90px)}
@media(min-width:640px){.eng__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* desktop: live's exact geometry — 6 UNIFORM columns, 20px gaps, full bleed
   (measured on mohammedzohaib.com @1425px: cards 218px, gap 20, edges ~10px) */
@media(min-width:1020px){.eng__grid{
  grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}}
/* card chrome measured on live: bg rgba(15,15,15,.88), 30px padding,
   3px crimson border on the OUTER side of each half (left half → left edge,
   right half → right edge) */
/* live has NO hover on these cards — they are static links.
   Client request: let the background photo show THROUGH the cards — a
   translucent dark glass with backdrop blur keeps the text readable while
   revealing the crowd/stage behind. Browsers without backdrop-filter keep a
   more solid fill so contrast never suffers. */
.soc{display:block;position:relative;min-width:0;background:rgba(15,15,15,.82);padding:30px 20px}
@supports ((backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px))){
  .soc{background:rgba(10,10,10,.45);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
}
.eng__grid .soc:nth-child(-n+3){border-left:3px solid var(--crimson)}
.eng__grid .soc:nth-child(n+4){border-right:3px solid var(--crimson)}
/* stacking for the converge motion: the static centre pair sits on top,
   inner movers under them, outer movers lowest — so a sliding card passes
   BEHIND its neighbour instead of covering it (e.g. TikTok under YouTube) */
.eng__grid .soc:nth-child(3),.eng__grid .soc:nth-child(4){z-index:3}
.eng__grid .soc:nth-child(2),.eng__grid .soc:nth-child(5){z-index:2}
.eng__grid .soc:nth-child(1),.eng__grid .soc:nth-child(6){z-index:1}
/* let long handles wrap inside the card instead of forcing the grid wider */
.soc__h,.soc__c{min-width:0;overflow-wrap:anywhere;
  text-shadow:0 1px 8px rgba(0,0,0,.75)}
/* staircase exactly like live: the tiers differ by HEIGHT and are vertically
   CENTRED (grid align-items:center), so tops and bottoms step symmetrically —
   measured on live: outer 300px, middle 350px, centre (IG/YT) 400px tall.
   On desktop the row breaks out of the boxed container to span the full
   viewport width with ~10px edges, same as live. */
@media(min-width:1020px){
  /* live: 225px between the intro text and the card row — the big open area
     where the crowd/stage photo (and Mohammed) shows through.
     Row width: full-bleed minus 10px edges UP TO a 1525px cap, then centred
     (measured: 10px margins @1425, ~190px margins @1905). */
  .eng__grid{align-items:center;width:100vw;margin-left:calc(50% - 50vw);
    padding-inline:max(10px,calc(50vw - 762px));margin-top:225px}
  /* live watch padding narrows as the screen widens (photo goes full-bleed
     left on wide monitors): measured 75px left @1425 → 0 @1905, and
     95px right @1425 → 110px @1905 — linear through both points */
  .watch .wrap{max-width:none;
    padding-left:max(0px,calc(297.7px - 15.63vw));
    padding-right:calc(50.5px + 3.13vw)}
  .eng__grid .soc{display:flex;flex-direction:column;align-items:center;justify-content:center}
  .eng__grid .soc:nth-child(1),.eng__grid .soc:nth-child(6){min-height:300px}
  .eng__grid .soc:nth-child(2),.eng__grid .soc:nth-child(5){min-height:350px}
  .eng__grid .soc:nth-child(3),.eng__grid .soc:nth-child(4){min-height:400px}
}
/* live renders the icon at the card's full content width (~158px) */
.soc__icon{display:block;width:min(158px,100%);aspect-ratio:1/1;margin-inline:auto;background-position:center;
  background-repeat:no-repeat;background-size:contain}
.soc__h{font-size:14px;margin-top:16px;font-family:var(--pop)}
.soc__c{font-size:clamp(26px,2.6vw,34px);font-weight:500;font-family:var(--pop);margin-top:2px}

/* brand icons — inline SVG data URIs (no external requests) */
.soc__icon--x{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='5' fill='%23000'/%3E%3Cpath d='M16.6 4.6h2.5l-5.5 6.2 6.4 8.6h-5l-4-5.2-4.5 5.2H4l5.8-6.7L3.7 4.6h5.2l3.6 4.8 4.1-4.8zm-.9 13h1.4L8.1 6h-1.5l9.1 11.6z' fill='%23fff'/%3E%3C/svg%3E")}
.soc__icon--li{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='5' fill='%230A66C2'/%3E%3Cpath d='M17.4 17.4h-2.5v-3.9c0-.9 0-2.1-1.3-2.1s-1.5 1-1.5 2v4H9.6v-8h2.4v1.1c.3-.6 1.1-1.3 2.4-1.3 2.5 0 3 1.7 3 3.8v4.4zM6.9 8.3a1.4 1.4 0 1 1 0-2.9 1.4 1.4 0 0 1 0 2.9zM8.2 17.4H5.7v-8h2.5v8z' fill='%23fff'/%3E%3C/svg%3E")}
.soc__icon--ig{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23FFDC80'/%3E%3Cstop offset='.25' stop-color='%23F77737'/%3E%3Cstop offset='.5' stop-color='%23E1306C'/%3E%3Cstop offset='.75' stop-color='%23C13584'/%3E%3Cstop offset='1' stop-color='%23833AB4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='24' height='24' rx='6' fill='url(%23g)'/%3E%3Crect x='5.5' y='5.5' width='13' height='13' rx='4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Ccircle cx='16.2' cy='7.8' r='1' fill='%23fff'/%3E%3C/svg%3E")}
.soc__icon--yt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='4.5' width='22' height='15' rx='4' fill='%23F00'/%3E%3Cpath d='M10 15.5 15.8 12 10 8.5z' fill='%23fff'/%3E%3C/svg%3E")}
.soc__icon--tt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='5' fill='%23000'/%3E%3Cpath d='M17.3 8.2a3.9 3.9 0 0 1-3-3.4V4.4h-2.7v10.9a2.3 2.3 0 1 1-2.3-2.3c.2 0 .5 0 .7.1V10.4a5 5 0 1 0 4.3 5V10c.9.7 2 1.1 3.2 1.2V8.4l-.2-.2z' fill='%2325F4EE'/%3E%3Cpath d='M17.7 8.6a3.9 3.9 0 0 1-3-3.4V4.8H12v10.9a2.3 2.3 0 1 1-2.3-2.3c.2 0 .5 0 .7.1V10.8a5 5 0 1 0 4.3 5v-5.4c.9.7 2 1.1 3.2 1.2V8.8l-.2-.2z' fill='%23FE2C55'/%3E%3Cpath d='M17.5 8.4a3.9 3.9 0 0 1-3-3.4V4.6h-2.7v10.9a2.3 2.3 0 1 1-2.3-2.3c.2 0 .5 0 .7.1V10.6a5 5 0 1 0 4.3 5v-5.4c.9.7 2 1.1 3.2 1.2V8.6l-.2-.2z' fill='%23fff'/%3E%3C/svg%3E")}
.soc__icon--fb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='5' fill='%231877F2'/%3E%3Cpath d='M15.6 12.9l.4-2.6h-2.5V8.6c0-.7.4-1.4 1.5-1.4h1.2V5s-1-.2-2-.2c-2.1 0-3.4 1.2-3.4 3.5v2H8.5v2.6h2.3V19h2.7v-6.1h2.1z' fill='%23fff'/%3E%3C/svg%3E")}

/* ---------- 8 · book a meeting ---------- */
.book{background:var(--light);text-align:center;padding:124px 0 61px} /* live: 124/61, bg #F3F3F3 */
.book h2{font-size:35px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.book p{max-width:640px;margin:16px auto 0}
/* live: black bg, white text, 1px white border, radius 30, pad 20/30;
   hover INVERTS to white bg + black text (.4s) — no lift, no shadow */
.btn-agenda{display:inline-block;position:relative;margin-top:34px;background:#000;
  border:1px solid #fff;color:#fff;font-size:13px;font-weight:600;letter-spacing:.06em;
  padding:20px 30px;border-radius:30px;
  transition:background .4s,color .4s,border-color .4s}
.btn-agenda:hover{background:#fff;color:#000}
.book__reach{margin-top:26px;font-size:15px;letter-spacing:.03em;color:rgba(7,7,7,.75)}
.book__reach a{color:var(--crimson);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.book__reach a:hover{color:var(--red)}

/* ---------- 9 · footer ---------- */
/* footer — measured on live @1425: bg #181818, 223px total (80px top +
   80px bottom around a 63px content row), logo 191×63 left, copyright
   centred, six 32px CIRCLE icons on the right (#f3f3f3 bg, 16px black
   glyph) with 25px gaps, hover = pulse-grow scale */
.ft{background:#181818;color:#fff;padding:80px 0}
.ft .row{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.ft__logo img,.ft__logo .custom-logo{height:63px;width:auto}
.ft__logo--text{font-family:var(--tenor);font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.ft__copy{font-size:16px;color:rgba(255,255,255,.85)}
.ft__soc{display:flex;gap:25px}
.ft__soc a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;background:#f3f3f3}
.ft__soc a:hover{animation:mz-pulse-grow .3s linear infinite alternate}
@keyframes mz-pulse-grow{to{transform:scale(1.1)}}
.ft__soc svg{width:16px;height:16px;fill:#000}
@media(max-width:640px){.ft .row{justify-content:center;text-align:center}}

/* ---------- popup (book a call) ---------- */
.pop{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);padding:20px}
.pop.on{display:flex}
.pop__box{display:grid;grid-template-columns:45% 1fr;width:min(680px,94vw);min-height:260px;
  background:#fff;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:mz-popin .5s var(--ease)}
@keyframes mz-popin{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.pop__l{position:relative;background:#111;min-height:200px;overflow:hidden}
.pop__l video{position:absolute;top:0;left:0;inset:0;width:100%;height:100%;object-fit:cover}
.pop__logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62%;height:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
.pop__name{font-family:var(--tenor);color:#fff;font-size:18px;text-transform:uppercase;letter-spacing:.06em;text-align:center}
.pop__r{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:34px 28px}
/* live shows "BOOK A MEETING" on ONE line */
.pop__title{font-size:clamp(17px,1.7vw,23px);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);text-align:center;white-space:nowrap}
.pop__r p{font-size:15px;text-align:center;color:#222}
.pop__r a{background:#000;color:#fff;font-size:14px;font-weight:600;padding:12px 24px;
  transition:background .3s,transform .3s var(--ease)}
.pop__r a:hover{background:var(--crimson);transform:translateY(-2px)}
.pop__x{position:absolute;top:8px;right:12px;background:none;border:0;font-size:22px;cursor:pointer;color:#333;line-height:1;z-index:2}
/* mobile: video banner stacked on top, like the live site */
@media(max-width:560px){
  .pop__box{grid-template-columns:1fr;grid-template-rows:150px auto}
  .pop__l{min-height:150px}
  .pop__logo{width:52%}
}

/* ---------- inner pages (blog / page / 404) ---------- */
.inner{background:#fff;min-height:60vh;padding:clamp(50px,8vh,90px) 0}
.inner .entry{max-width:820px;margin-inline:auto}
.entry__title{font-size:clamp(28px,3.4vw,42px);margin-bottom:22px}
.entry__title a{color:var(--ink)}
.entry__title a:hover{color:var(--crimson)}
.entry__content p{margin-bottom:1.2em}
.entry__content a{color:var(--crimson);text-decoration:underline}
.entry__thumb{margin-bottom:26px}
.entry + .entry{margin-top:48px;padding-top:48px;border-top:1px solid #eee}
.inner--404{text-align:center}
.inner--404 h1{font-size:clamp(30px,4vw,46px)}
.inner--404 p{margin:14px 0 6px}

/* ---------- accessibility ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--crimson);color:#fff;padding:10px 16px;z-index:9999}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.screen-reader-text{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  overflow:hidden;position:absolute!important;word-wrap:normal!important}

/* phone tier: live runs the SAME zoomIn entrance on mobile, so we keep the
   base zoomIn (scale3d) here too — only drop GPU-expensive blur and the hero
   video ken-burns. scale3d never causes horizontal overflow, unlike the old
   translateX slides that used to live here. */
@media(max-width:700px){
  .rv{filter:none}
  .rv:not(.in){will-change:opacity,transform}
  .hero video{animation:none}
  .hero__txt h1{letter-spacing:.02em;filter:none}
  .hero__txt h2{filter:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1!important;transform:none!important;filter:none!important}
  .hero__txt h1,.hero__txt h2{opacity:1!important;transform:none!important;filter:none!important;letter-spacing:normal!important}
  .devs__track,.hero video{animation:none!important}
  #mz-loader{display:none!important}
}

/* ============================================================
   LIVE TYPE PARITY — every value below was measured as a computed
   style on mohammedzohaib.com at a 1425px viewport (2026-07-13):
   line-heights, letter-spacing, sizes, weights and heading→text gaps
   matched 1:1. Placed BEFORE the responsive blocks so the phone/tablet
   media queries further down still override where they need to.
   ============================================================ */
@media(min-width:701px){.hero__txt h1{line-height:35px}}   /* live: 35px on 52px */
.hero__txt h2{line-height:30px;letter-spacing:normal}       /* live: 30px, no tracking */
/* section headings: live lh 1.2 (42px @35px), no letter-spacing */
.who h2,.ent h2,.ach__head h2,.watch .grid h2,.eng h2,.book h2,.ach__press h2{
  line-height:1.2;letter-spacing:normal}
/* paragraphs: live is a fixed 24px line box; heading→text gaps 30/15/10px */
.who p,.ent .ent__head>p,.ach__head p,.watch__sub,.eng>.wrap>p,.book .wrap>p{line-height:24px}
.who p{margin-top:30px}
.ent .ent__head>p{margin-top:15px}
.ach__head p{margin-top:15px}
.watch__sub{font-size:18px;margin-top:15px}
.eng>.wrap>p{margin-top:15px}
.book .wrap>p{margin-top:10px}
/* award cards: live h3 = 500 / UPPERCASE / lh 1.2; meta 15px / 24px */
.ach__card h3{font-weight:500;text-transform:uppercase;line-height:1.2;letter-spacing:normal}
.ach__meta p{font-size:15px;line-height:24px}
/* entrepreneur stats: live number 69px/600 lh 1; label 34px/500 lh 85px (2.5) */
.ent__num{font-size:clamp(38px,4.85vw,69px)}
.ent__lbl{margin-top:0;line-height:2.5}
/* engage cards: live handle Tenor 16px/500 lh 1; count Tenor 49px/900 lh 1 */
/* live handle is 16px on ~300px-wide cards; our 6-card row is narrower, so
   scale down just enough that long handles stay on ONE line like live */
.soc__h{font-family:var(--tenor);font-size:clamp(12px,.93vw,16px);font-weight:500;line-height:1;margin-top:18px}
.soc__c{font-family:var(--tenor);font-weight:900;font-size:clamp(28px,3.45vw,49px);line-height:1;margin-top:14px}
/* CTAs: live 15px/700 (agenda) and 700 (subscribe) */
.btn-agenda{font-size:15px;font-weight:700}
.btn-subscribe{font-weight:700}

/* ============================================================
   Cross-browser fallbacks
   ============================================================ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* hard stop against any sideways scroll on phones/tablets (belt-and-suspenders
   on top of the per-section fixes). clip doesn't break fixed/absolute headers. */
html,body{overflow-x:clip}
@supports not (overflow:clip){body{overflow-x:hidden}}

/* `inset` fallback for older browsers (explicit sides, same values) */
.hd{top:0;left:0;right:0}
.hero video,.hero::after,.ent__bgv,.ent::after,.ach::before,.eng::before,
.hero__txt,.yt img,.yt i,.yt iframe,.pop{top:0;left:0;right:0;bottom:0}

/* 100svh fallback: plain vh first for browsers without svh */
.hero{height:100vh}
@supports (height:100svh){.hero{height:100svh}}

/* aspect-ratio fallback (Safari < 15, older Chrome) */
@supports not (aspect-ratio:16/9){
  .soc__icon{height:140px}
  .who__vid{position:relative;height:0;padding-top:56.25%}
  .who__vid video{position:absolute;top:0;left:0;width:100%;height:100%}
  .yt{height:0;padding-top:56.25%}
  .ach__card{position:relative}
  .ach__card img{height:420px}
  .watch__photo img{height:520px}
}

/* older flexbox-gap gaps: marquee spacing via margin fallback */
@supports not (gap:1rem){
  .devs__track>img{margin-right:clamp(60px,9vw,140px)}
  .ft__soc a{margin-left:25px}
}

/* ============================================================
   Extra responsive polish (small phones & tablets)
   ============================================================ */
@media(max-width:600px){
  .hd{padding:16px 16px}
  .hd__logo img,.hd__logo .custom-logo{height:34px}
  .hd__yt{font-size:12px;padding:7px 12px;gap:7px}
  .hd__yt svg{width:18px;height:13px}
  .hero{min-height:480px}
  .hero__txt h2{font-size:15px;padding-inline:14px}
  .who h2,.ent h2,.ach__head h2,.watch .grid h2,.eng h2,.book h2{font-size:27px}
  .ach__press{gap:14px;padding-inline:14px}
  .ach__press h2{width:100%;text-align:center;font-size:22px}
  .devs{padding:30px 0}
  .devs img{width:96px}
  .soc__icon{width:min(96px,100%)}
  .soc{padding:22px 14px}
  .soc__c{font-size:24px}
  .btn-agenda{padding:15px 26px;font-size:12px}
  .book__reach{font-size:13px;padding-inline:16px}
  .ft{padding:40px 0}
  .ft__logo img,.ft__logo .custom-logo{height:32px}
  .pop__box{grid-template-columns:1fr}
}
@media(max-width:380px){
  .hero__txt h1{font-size:30px}
  .ent__num{font-size:36px}
  .eng__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
/* short landscape phones: keep hero content visible */
@media(max-height:480px) and (orientation:landscape){
  .hero{min-height:100vh}
  .hero__txt h1{font-size:30px}
  .hero__txt h2{margin-top:8px;font-size:14px}
}

/* ============================================================
   Safari / iOS / macOS specific support
   ============================================================ */

/* iOS Safari address-bar viewport bug on iOS < 15.4 (no svh):
   -webkit-fill-available sizes the hero to the real visible area */
@supports (-webkit-touch-callout:none) and (not (height:100svh)){
  .hero{height:-webkit-fill-available;min-height:480px}
}

/* iPhone notch / Dynamic Island safe areas (landscape + PWA) */
@supports (padding:max(0px)){
  .hd{padding-left:max(20px,calc(50% - 570px),env(safe-area-inset-left));
      padding-right:max(20px,calc(50% - 570px),env(safe-area-inset-right))}
  .ft{padding-bottom:max(80px,env(safe-area-inset-bottom))}
  .pop{padding-left:max(20px,env(safe-area-inset-left));
       padding-right:max(20px,env(safe-area-inset-right))}
}

/* remove the grey tap flash on iOS; keep keyboard focus rings */
a,button{-webkit-tap-highlight-color:transparent}

/* momentum scrolling + no double-tap zoom on interactive elements */
.yt,.btn-subscribe,.btn-agenda,.hd__yt,.pop__r a{touch-action:manipulation}

/* clamp() fallback (Safari < 13.1 / very old browsers): fixed sizes */
@supports not (font-size:clamp(1px,1vw,2px)){
  .hero__txt h1{font-size:44px}
  .hero__txt h2{font-size:20px}
  .ent__num{font-size:48px}
  .ent__lbl{font-size:22px}
  .ach__press h2{font-size:28px}
  .ach__press img{height:38px}
  .soc__c{font-size:28px}
  .wrap{padding-inline:24px}
  .hd{padding:20px 40px}
  .entry__title{font-size:34px}
}

/* macOS Safari: prevent fauxbold over-thickening of the hero title */
.hero__txt h1{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Windows Firefox: consistent thin scrollbar on marquee overflow */
.devs{scrollbar-width:none}