/* =====================================================================
   MO. AFIA — STYLES
   ===================================================================== */

:root{
  --bg:      #080808;
  --bg-2:    #0b0b0b;
  --bg-3:    #130c22;              /* violet-tinted dark for hover surfaces */
  --ink:     #f3f0e8;
  --muted:   #8d8d88;
  --line:    rgba(243,240,232,.12);

  --brand:   #5e18ea;             /* brand violet — fills, gradients, big display accents */
  --accent:  #a98bff;             /* luminous lavender — small text, labels, lines, hovers */
  --accent-dim: rgba(94,24,234,.18);

  --f-disp: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-ar:   "IBM Plex Sans Arabic", system-ui, sans-serif;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1600px;

  --ease: cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.lock{ overflow:hidden; height:100vh; }

::selection{ background:var(--brand); color:var(--ink); }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--f-disp); font-weight:600; letter-spacing:-.03em; line-height:.92; }

.eyebrow{
  font-family:var(--f-disp);
  font-size:.72rem; letter-spacing:.28em; font-weight:500;
  color:var(--accent); text-transform:uppercase;
  display:inline-block;
}

/* ---- Grain overlay ---- */
.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.04; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Scroll progress ---- */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:1000; background:transparent; }
.progress__bar{ display:block; height:100%; width:0; background:var(--brand); transform-origin:left; }

/* ---- Custom cursor ---- */
.cursor{ position:fixed; top:0; left:0; z-index:1200; pointer-events:none; mix-blend-mode:difference;
  transform:translate(-50%,-50%); display:none; }
.cursor__dot{ display:block; width:9px; height:9px; border-radius:50%; background:var(--ink);
  transition:width .35s var(--ease), height .35s var(--ease); }
.cursor__label{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.6);
  font-family:var(--f-disp); font-size:.62rem; letter-spacing:.18em; white-space:nowrap;
  color:#0a0a0a; opacity:0; transition:opacity .3s, transform .3s var(--ease); }
.cursor.is-active .cursor__dot{ width:88px; height:88px; background:var(--brand); }
.cursor.is-active .cursor__label{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (hover:hover) and (pointer:fine){ .cursor{ display:block; } body.cursor-on{ cursor:none; } }

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.35rem var(--pad);
  transition:padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s;
  mix-blend-mode:difference;
}
.nav.is-scrolled{
  padding:.85rem var(--pad);
  background:rgba(8,8,8,.55); backdrop-filter:blur(14px);
  mix-blend-mode:normal; border-bottom:1px solid var(--line);
}
.nav__brand{ font-family:var(--f-disp); font-weight:700; font-size:1.1rem; letter-spacing:-.02em; }
.nav__brand span{ color:var(--accent); }
.nav.is-scrolled .nav__brand span{ color:var(--accent); }
.nav__links{ display:flex; gap:2.2rem; align-items:center; }
.nav__link{ font-family:var(--f-disp); font-size:.78rem; letter-spacing:.14em; font-weight:500;
  position:relative; padding:.2rem 0; color:var(--ink); }
.nav__link::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--accent); transition:width .4s var(--ease); }
.nav__link:hover::after, .nav__link.is-active::after{ width:100%; }
.nav__link.is-active{ color:var(--accent); }
.nav__link--cta{ border:1px solid var(--line); border-radius:100px; padding:.5rem 1.1rem; }
.nav__link--cta::after{ display:none; }
.nav__link--cta:hover{ background:var(--brand); color:var(--ink); border-color:var(--brand); }

.nav__lang{ background:none; border:1px solid var(--line); border-radius:100px; cursor:pointer;
  color:var(--ink); font-family:var(--f-disp); font-size:.72rem; letter-spacing:.1em; font-weight:600;
  padding:.45rem .7rem; display:inline-flex; gap:.28rem; align-items:center; transition:border-color .3s, color .3s; }
.nav__lang:hover{ border-color:var(--accent); color:var(--accent); }
.nav__lang-sep{ color:var(--muted); }
.nav__lang .nav__lang-en{ color:var(--accent); }
.nav__lang.is-ar .nav__lang-en{ color:var(--muted); }
.nav__lang.is-ar .nav__lang-ar{ color:var(--accent); }
.menu__lang{ background:none; border:1px solid var(--line); border-radius:100px; cursor:pointer;
  color:var(--ink); font-family:var(--f-disp); font-size:.85rem; letter-spacing:.08em; padding:.4rem .9rem; }

.nav__burger{ display:none; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__burger span{ width:26px; height:2px; background:var(--ink); transition:transform .4s var(--ease), opacity .3s; }
.nav__burger.is-open span:first-child{ transform:translateY(4px) rotate(45deg); }
.nav__burger.is-open span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* ---- Mobile menu ---- */
.menu{
  position:fixed; inset:0; z-index:790; background:var(--bg-2);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:var(--pad); transform:translateY(-100%); transition:transform .6s var(--ease);
}
.menu.is-open{ transform:translateY(0); }
.menu__link{ font-family:var(--f-disp); font-weight:600; font-size:clamp(2.4rem,11vw,4.5rem);
  letter-spacing:-.03em; line-height:1.02; }
.menu__link:active{ color:var(--accent); }
.menu__meta{ display:flex; gap:1.5rem; margin-top:2.5rem; color:var(--muted);
  font-family:var(--f-disp); font-size:.85rem; letter-spacing:.08em; }
.menu__meta a:active{ color:var(--accent); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad); overflow:hidden;
  perspective:1200px;
}
.hero__scene{ transform-style:preserve-3d; will-change:transform; margin-top:2vh; text-align:center; }
.hero__title{ font-size:clamp(4.5rem, 23vw, 25rem); font-weight:700; letter-spacing:-.045em; }
.hero__line{ display:block; overflow:hidden; will-change:transform; }
.hero__line .word{ display:inline-block; will-change:transform; }
.hero__line--accent .word{ color:var(--brand);
  background:linear-gradient(105deg,var(--brand) 0%,#8b5cf6 55%,var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* portrait hero */
.hero__title--img{ margin:0; display:block; }
.hero__portrait{ width:min(620px, 84vw); height:auto; display:block; margin:0 auto;
  will-change:transform; transform-origin:center center;
  filter:drop-shadow(0 34px 90px rgba(94,24,234,.42)); }

.hero__sub{ margin-top:2rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.1rem .8rem;
  font-family:var(--f-disp); font-size:clamp(.9rem,1.6vw,1.25rem);
  color:var(--muted); letter-spacing:.02em; }
.hero__sub span:first-child{ color:var(--ink); }

.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.hero__labels{ position:absolute; inset:0; pointer-events:none; }
.hero__label{ position:absolute; font-family:var(--f-disp); font-size:.66rem; letter-spacing:.2em;
  color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:.35rem .7rem;
  white-space:nowrap; will-change:transform; backdrop-filter:blur(2px); }
.hero__label--hot{ color:var(--accent); border-color:var(--accent-dim); }

.hero__foot{
  position:absolute; left:var(--pad); right:var(--pad); bottom:1.6rem;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  font-family:var(--f-disp); font-size:.68rem; letter-spacing:.2em; color:var(--muted);
}
.hero__scrollcue{ display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--ink); }
.hero__cueline{ width:1px; height:38px; background:var(--muted); position:relative; overflow:hidden; }
.hero__cueline::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--accent); animation:cue 1.8s var(--ease) infinite; }
@keyframes cue{ 0%{ top:-100%; } 60%,100%{ top:100%; } }
.hero__avail{ text-align:end; }

/* =====================================================================
   INTRO / TRAVELLING WORDS
   ===================================================================== */
.intro{ position:relative; min-height:100vh; min-height:100svh; background:var(--bg); overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:10vh var(--pad); }
.intro__pin{ position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1vh; }
.intro__num{ font-family:var(--f-disp); font-weight:700; font-size:clamp(6rem,26vw,20rem);
  color:var(--brand); line-height:.85; letter-spacing:-.04em; will-change:transform;
  background:linear-gradient(180deg,var(--accent),var(--brand)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.intro__words{ display:flex; flex-wrap:wrap; justify-content:center; gap:.1em .4em; margin-top:2vh;
  font-family:var(--f-disp); font-weight:600; font-size:clamp(1.8rem,8vw,6rem); letter-spacing:-.03em; }
.intro__word{ display:inline-block; will-change:transform, opacity; }

/* =====================================================================
   POSITIONING
   ===================================================================== */
.pos{ padding:12vh var(--pad); max-width:var(--maxw); margin:0 auto; }
.pos__lead,.pos__body{ font-family:var(--f-disp); font-weight:600; letter-spacing:-.03em; line-height:1; }
.pos__lead{ font-size:clamp(2.6rem,9vw,8rem); }
.pos__body{ font-size:clamp(2.6rem,9vw,8rem); color:var(--muted); }
.pos__body span:last-child{ color:var(--ink); }
.reveal-lines span{ display:block; overflow:hidden; }
.reveal-lines span > span, .reveal-lines .rl-inner{ display:block; }
.pos__stack{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin-top:3.5rem; }
.pos__stack li{ font-family:var(--f-disp); font-size:.8rem; letter-spacing:.14em; color:var(--muted);
  border:1px solid var(--line); border-radius:100px; padding:.5rem 1rem; }
.pos__stack li:nth-child(odd){ color:var(--ink); }

/* =====================================================================
   PROOF / NUMBERS
   ===================================================================== */
.proof{ padding:14vh var(--pad); max-width:var(--maxw); margin:0 auto; }
.proof__head{ display:flex; flex-direction:column; gap:1.2rem; margin-bottom:9vh; }
.proof__title{ font-size:clamp(2.4rem,7vw,6rem); }
.proof__title span:last-child{ color:var(--muted); }
.proof__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6vh 4vw; }
.stat{ position:relative; will-change:transform, opacity; }
.stat__num{ font-family:var(--f-disp); font-weight:700; font-size:clamp(3.5rem,10vw,8.5rem);
  line-height:.85; letter-spacing:-.04em; display:flex; align-items:baseline; }
.stat__num .pre,.stat__num .suf{ color:var(--brand); }
.stat__label{ margin-top:1rem; font-family:var(--f-disp); font-size:.82rem; letter-spacing:.16em; }
.stat__note{ margin-top:.4rem; font-size:.8rem; color:var(--muted); max-width:22ch; }
.stat__note .tag{ color:var(--accent); font-family:var(--f-disp); font-size:.62rem;
  letter-spacing:.14em; border:1px solid var(--accent-dim); border-radius:4px; padding:.05rem .35rem; margin-inline-start:.4rem; }
.stat__note .tag--todo{ color:var(--muted); border-color:var(--line); }
.proof__disc{ margin-top:8vh; color:var(--muted); font-size:.82rem; max-width:60ch; }

/* =====================================================================
   RECEIPTS MARQUEE
   ===================================================================== */
.rcpt{ padding:10vh 0 12vh; overflow:hidden; }
.rcpt__head{ padding:0 var(--pad); max-width:var(--maxw); margin:0 auto 4vh; display:flex; flex-direction:column; gap:.7rem; }
.rcpt__note{ color:var(--muted); font-size:.85rem; }
.rcpt__marquee{ position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.rcpt__track{ display:flex; gap:1.4rem; width:max-content; direction:ltr;
  animation:marquee 55s linear infinite; will-change:transform; }
.rcpt__marquee:hover .rcpt__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.rcard{ flex:0 0 auto; width:min(72vw,380px); }
.rcard__bar{ display:flex; align-items:center; gap:6px; padding:.55rem .8rem; background:#1a1a1f;
  border:1px solid var(--line); border-bottom:0; border-radius:10px 10px 0 0; }
.rcard__bar span{ width:8px; height:8px; border-radius:50%; background:#3a3a40; }
.rcard__bar span:first-child{ background:#ff5f57; } .rcard__bar span:nth-child(2){ background:#febc2e; } .rcard__bar span:nth-child(3){ background:#28c840; }
.rcard__bar em{ margin-inline-start:.6rem; font-style:normal; font-family:var(--f-disp); font-size:.6rem; letter-spacing:.14em; color:var(--muted); }
.rcard__img{ border:1px solid var(--line); overflow:hidden; background:#fff; height:210px; }
.rcard__img img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.rcard figcaption{ border:1px solid var(--line); border-top:0; border-radius:0 0 10px 10px;
  padding:.9rem 1rem; background:var(--bg-3); }
.rcard__tag{ font-family:var(--f-disp); font-weight:600; font-size:1rem; letter-spacing:-.01em; color:var(--accent); }

/* =====================================================================
   WORK
   ===================================================================== */
.work{ padding:14vh 0; }
.work__head{ padding:0 var(--pad); max-width:var(--maxw); margin:0 auto 6vh;
  display:flex; flex-direction:column; gap:1.2rem; }
.work__title{ font-size:clamp(3rem,12vw,11rem); }
.work__title span:last-child{ color:var(--brand);
  background:linear-gradient(105deg,var(--brand),#8b5cf6 60%,var(--accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.work__list{ border-top:1px solid var(--line); }
.wk{
  position:relative; display:block; border-bottom:1px solid var(--line);
  padding:clamp(1.6rem,4vw,3rem) var(--pad); overflow:hidden;
  transition:background .5s var(--ease);
}
.wk__row{ max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(1rem,3vw,3rem); position:relative; z-index:2; }
.wk__index{ font-family:var(--f-disp); font-size:.85rem; letter-spacing:.1em; color:var(--muted); }
.wk__cat{ font-family:var(--f-disp); font-weight:600; font-size:clamp(1.9rem,6vw,5rem);
  letter-spacing:-.03em; line-height:1; transition:transform .5s var(--ease), color .4s; }
.wk__meta{ text-align:end; display:flex; flex-direction:column; gap:.3rem; }
.wk__client{ font-size:.85rem; color:var(--ink); }
.wk__summary{ font-size:.78rem; color:var(--muted); max-width:34ch; margin-inline-start:auto; }
.wk__kpis{ display:flex; gap:1.4rem; justify-content:flex-end; margin-top:.5rem; }
.wk__kpi{ font-family:var(--f-disp); font-size:.72rem; letter-spacing:.06em; color:var(--muted); }
.wk__kpi b{ color:var(--accent); font-weight:600; }
.wk__view{ position:absolute; inset-inline-end:var(--pad); bottom:1rem; font-family:var(--f-disp);
  font-size:.7rem; letter-spacing:.2em; color:var(--accent); opacity:0; transform:translateY(8px);
  transition:.4s var(--ease); z-index:2; }
.wk:hover{ background:var(--bg-3); }
.wk:hover .wk__cat{ color:var(--accent); transform:translateX(1.2rem); }
.wk:hover .wk__view{ opacity:1; transform:translateY(0); }
.wk__bg{ position:absolute; inset:0; z-index:1; opacity:0; transition:opacity .5s;
  background:radial-gradient(120% 140% at 100% 0%, var(--accent-dim), transparent 55%); }
.wk:hover .wk__bg{ opacity:1; }

/* =====================================================================
   EXPERTISE
   ===================================================================== */
.exp{ position:relative; padding:14vh var(--pad); max-width:var(--maxw); margin:0 auto; }
.exp__head{ display:flex; flex-direction:column; gap:1.2rem; margin-bottom:6vh; }
.exp__title{ font-size:clamp(2.4rem,7vw,6rem); }
.exp__title span:last-child{ color:var(--muted); }
.exp__list{ list-style:none; }
.exp__item{ border-top:1px solid var(--line); padding:clamp(1rem,2.6vw,2rem) 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem; cursor:pointer;
  position:relative; }
.exp__item:last-child{ border-bottom:1px solid var(--line); }
.exp__name{ font-family:var(--f-disp); font-weight:600; font-size:clamp(1.8rem,6vw,4.5rem);
  letter-spacing:-.03em; line-height:1; color:var(--muted); transition:color .4s var(--ease), transform .5s var(--ease); }
.exp__blurb{ font-size:.85rem; color:var(--muted); max-width:32ch; text-align:end; opacity:.55;
  transition:opacity .4s, color .4s; }
.exp__item:hover .exp__name{ color:var(--ink); transform:translateX(1rem); }
.exp__item:hover .exp__blurb{ opacity:1; color:var(--ink); }
.exp__preview{ position:fixed; top:0; left:0; z-index:60; pointer-events:none;
  width:230px; height:150px; border-radius:8px; overflow:hidden; opacity:0;
  transform:translate(-50%,-50%) scale(.9); transition:opacity .3s, transform .4s var(--ease);
  border:1px solid var(--line); }
.exp__preview span{ display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  background:linear-gradient(135deg,var(--bg-3),#181a12); color:var(--accent);
  font-family:var(--f-disp); font-size:.8rem; letter-spacing:.2em; text-align:center; padding:1rem; }
.exp__preview.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* =====================================================================
   TIMELINE
   ===================================================================== */
.tl{ padding:14vh 0; overflow:hidden; }
.tl__head{ padding:0 var(--pad); max-width:var(--maxw); margin:0 auto 7vh;
  display:flex; flex-direction:column; gap:1.2rem; }
.tl__title{ font-size:clamp(2.4rem,7vw,6rem); }
.tl__title span:last-child{ color:var(--accent); }
.tl__viewport{ width:100%; }
.tl__track{ display:flex; gap:clamp(1.5rem,4vw,4rem); padding:0 var(--pad); will-change:transform; }
.tl__item{ flex:0 0 auto; width:min(78vw,420px); border-top:1px solid var(--line); padding-top:1.4rem; }
.tl__year{ font-family:var(--f-disp); font-weight:700; font-size:clamp(2.5rem,7vw,5rem);
  letter-spacing:-.03em; color:var(--brand); line-height:1; }
.tl__label{ font-family:var(--f-disp); font-size:.9rem; letter-spacing:.16em; margin-top:.8rem; }
.tl__text{ color:var(--muted); font-size:.9rem; margin-top:.8rem; max-width:34ch; }
.tl__note{ padding:6vh var(--pad) 0; max-width:var(--maxw); margin:0 auto; color:var(--muted); font-size:.9rem; }

/* =====================================================================
   YOUTUBE / CONTENT
   ===================================================================== */
.yt{ padding:12vh 0 14vh; overflow:hidden; }
.yt__head{ max-width:var(--maxw); margin:0 auto 6vh; padding:0 var(--pad);
  display:flex; justify-content:space-between; align-items:flex-end; gap:3vh 3rem; flex-wrap:wrap; }
.yt__intro{ max-width:640px; }
.yt__title{ font-size:clamp(2.4rem,7vw,6rem); margin-top:1rem; }
.yt__title span:last-child{ color:var(--brand);
  background:linear-gradient(105deg,var(--brand),#8b5cf6 60%,var(--accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.yt__note{ margin-top:1.4rem; color:var(--muted); font-size:1rem; line-height:1.5; max-width:52ch; }
.yt__meta{ display:flex; flex-direction:column; gap:1.8rem; align-items:flex-start; }
.yt__stats{ display:flex; gap:2.5rem; flex-wrap:wrap; }
.yt__stat b{ display:block; font-family:var(--f-disp); font-weight:700; font-size:clamp(1.5rem,3vw,2.3rem);
  letter-spacing:-.02em; color:var(--ink); }
.yt__stat span{ font-family:var(--f-disp); font-size:.64rem; letter-spacing:.16em; color:var(--muted); }
.yt__btn{ display:inline-flex; align-items:center; gap:.7rem; border:1px solid var(--line); border-radius:100px;
  padding:.9rem 1.6rem; font-family:var(--f-disp); font-weight:600; letter-spacing:.06em; font-size:.9rem;
  transition:background .3s var(--ease), color .3s, border-color .3s; will-change:transform; }
.yt__btn svg{ color:#ff0033; transition:color .3s; }
.yt__btn:hover{ background:#ff0033; color:#fff; border-color:#ff0033; }
.yt__btn:hover svg{ color:#fff; }

.yt__marquee{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.yt__track{ display:flex; gap:1.4rem; width:max-content; direction:ltr;
  animation:marquee 70s linear infinite; will-change:transform; }
.yt__marquee:hover .yt__track{ animation-play-state:paused; }
.ytcard{ flex:0 0 auto; width:min(80vw,360px); position:relative; display:block; border-radius:10px;
  overflow:hidden; border:1px solid var(--line); background:#0d0d0d; transition:transform .4s var(--ease); }
.ytcard img{ width:100%; height:auto; display:block; }
.ytcard__play{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .3s; }
.ytcard__play::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.4); }
.ytcard__play svg{ position:relative; box-sizing:content-box; width:22px; height:22px; color:#fff;
  background:#ff0033; border-radius:50%; padding:15px 13px 15px 17px; }
.ytcard:hover{ transform:translateY(-6px); }
.ytcard:hover .ytcard__play{ opacity:1; }

/* =====================================================================
   CTA / CONTACT
   ===================================================================== */
.cta{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding:14vh var(--pad); max-width:var(--maxw); margin:0 auto;
  position:relative; }
.cta__line{ font-size:clamp(3rem,13vw,13rem); font-weight:700; letter-spacing:-.045em; }
.cta__line span{ display:block; overflow:hidden; }
.cta__line span > span{ display:block; }
.cta__line span:nth-child(2) > span{ color:var(--muted); }
.cta__line span:last-child > span{ color:var(--brand);
  background:linear-gradient(105deg,var(--brand),#8b5cf6 60%,var(--accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cta__sub{ margin-top:2rem; color:var(--muted); font-family:var(--f-disp);
  font-size:clamp(1rem,2.4vw,1.6rem); letter-spacing:.02em; }
.cta__btn{ margin-top:3rem; display:inline-flex; align-items:center; gap:1rem; align-self:flex-start;
  border:1px solid var(--ink); border-radius:100px; padding:1.1rem 2rem;
  font-family:var(--f-disp); font-weight:600; letter-spacing:.06em; font-size:1rem;
  transition:background .4s var(--ease), color .4s, border-color .4s; will-change:transform; }
.cta__btn:hover{ background:var(--brand); color:var(--ink); border-color:var(--brand); }
.cta__btn svg{ transition:transform .4s var(--ease); }
.cta__btn:hover svg{ transform:translateX(6px); }
.cta__links{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-top:5rem; }
.cta__links a{ font-family:var(--f-disp); font-size:.9rem; letter-spacing:.06em; color:var(--muted);
  position:relative; padding-bottom:.2rem; }
.cta__links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--accent); transition:width .4s var(--ease); }
.cta__links a:hover{ color:var(--ink); }
.cta__links a:hover::after{ width:100%; }
.cta__foot{ display:flex; justify-content:space-between; gap:1rem; margin-top:auto; padding-top:6vh;
  color:var(--muted); font-family:var(--f-disp); font-size:.72rem; letter-spacing:.1em; flex-wrap:wrap; }

/* =====================================================================
   CASE STUDY DETAIL OVERLAY
   ===================================================================== */
.detail{ position:fixed; inset:0; z-index:1100; background:var(--bg);
  transform:translateY(100%); transition:transform .7s var(--ease); visibility:hidden; }
.detail.is-open{ transform:translateY(0); visibility:visible; }
.detail__scroll{ height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.detail__close{ position:fixed; top:1.4rem; inset-inline-end:var(--pad); z-index:1120; width:52px; height:52px;
  border-radius:50%; border:1px solid var(--line); background:rgba(8,8,8,.6); backdrop-filter:blur(10px);
  color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:background .3s, transform .3s; }
.detail__close:hover{ background:var(--brand); color:var(--ink); transform:rotate(90deg); }

.dt__hero{ display:flex; flex-direction:column; justify-content:flex-end;
  padding:16vh var(--pad) 5vh; }
.dt__eyebrow{ font-family:var(--f-disp); font-size:.75rem; letter-spacing:.2em; color:var(--accent); }
.dt__cat{ font-family:var(--f-disp); font-weight:700; font-size:clamp(2.6rem,10vw,8rem);
  letter-spacing:-.04em; line-height:.9; margin:1.2rem 0 1.2rem; }
.dt__lead{ font-size:clamp(1.15rem,2.4vw,1.9rem); line-height:1.35; color:var(--ink);
  max-width:34ch; letter-spacing:-.01em; margin-bottom:2.5rem; }
.dt__facts{ display:flex; flex-wrap:wrap; gap:2.5rem; }

/* featured screenshot right under the hero */
.dt__featured{ max-width:1200px; margin:0 auto; padding:0 var(--pad) 4vh; }
.dt__featured .shot__bar{ display:flex; align-items:center; gap:6px; padding:.7rem 1rem; background:#1a1a1f;
  border:1px solid var(--line); border-bottom:0; border-radius:12px 12px 0 0; }
.dt__featured .shot__bar span{ width:10px; height:10px; border-radius:50%; background:#3a3a40; }
.dt__featured .shot__bar span:first-child{ background:#ff5f57; }
.dt__featured .shot__bar span:nth-child(2){ background:#febc2e; }
.dt__featured .shot__bar span:nth-child(3){ background:#28c840; }
.dt__featured .shot__bar em{ margin-inline-start:.7rem; font-style:normal; font-family:var(--f-disp);
  font-size:.66rem; letter-spacing:.14em; color:var(--muted); }
.dt__featured .shot__img{ border:1px solid var(--line); border-radius:0 0 12px 12px; overflow:hidden; background:#fff; }
.dt__featured .shot__img img{ width:100%; height:auto; display:block; }
.dt__featured figcaption{ margin-top:1.1rem; color:var(--muted); font-size:.9rem; }

/* screenshots woven between narrative sections */
.dt__shot{ margin:1vh 0 6vh; opacity:1; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
.dt__shot.in{ transform:none; }
.dt__shot figcaption{ margin-top:1rem; color:var(--muted); font-size:.85rem; line-height:1.5; }
.dt__fact span{ display:block; }
.dt__fact .k{ font-family:var(--f-disp); font-size:.68rem; letter-spacing:.18em; color:var(--muted); }
.dt__fact .v{ font-size:1rem; margin-top:.3rem; }

.dt__body{ max-width:1100px; margin:0 auto; padding:12vh var(--pad); }
.dt__block{ display:grid; grid-template-columns:280px 1fr; gap:clamp(1.5rem,5vw,5rem);
  padding:6vh 0; border-top:1px solid var(--line); }
.dt__block h3{ font-family:var(--f-disp); font-size:.8rem; letter-spacing:.2em; color:var(--accent); font-weight:500; }
.dt__block p{ font-size:clamp(1.15rem,2.2vw,1.7rem); line-height:1.4; color:var(--ink); font-weight:400; letter-spacing:-.01em; }

.dt__results{ padding:12vh var(--pad); border-top:1px solid var(--line); background:var(--bg-2); }
.dt__results-grid{ max-width:1100px; margin:3vh auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:4vh 3vw; }
.dt__res .m{ font-family:var(--f-disp); font-size:.75rem; letter-spacing:.16em; color:var(--muted); }
.dt__res .n{ font-family:var(--f-disp); font-weight:700; font-size:clamp(2.5rem,8vw,6rem);
  letter-spacing:-.04em; line-height:.9; margin-top:.6rem; color:var(--brand);
  background:linear-gradient(180deg,var(--accent),var(--brand)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dt__funnel{ max-width:700px; margin:4vh auto 0; }
.dt__stage{ display:flex; align-items:center; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line);
  font-family:var(--f-disp); font-size:clamp(1.2rem,4vw,2.2rem); font-weight:600; letter-spacing:-.02em; }
.dt__stage .i{ font-size:.8rem; color:var(--accent); letter-spacing:.1em; }
/* metrics strip */
.dt__stripe{ padding:8vh 0 2vh; border-top:1px solid var(--line); background:var(--bg-2); }
.dt__stripe-grid{ max-width:1100px; margin:3vh auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:5vh 3vw; }
.dt__metric{ opacity:1; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.dt__metric.in{ transform:none; }
.dt__metric .v{ display:block; font-family:var(--f-disp); font-weight:700; font-size:clamp(2.2rem,6vw,4.2rem);
  letter-spacing:-.04em; line-height:.9; color:var(--brand);
  background:linear-gradient(180deg,var(--accent),var(--brand)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dt__metric .k{ display:block; margin-top:.7rem; font-family:var(--f-disp); font-size:.72rem; letter-spacing:.16em; color:var(--muted); }

/* dashboard gallery */
.dt__gallery{ padding:12vh var(--pad); border-top:1px solid var(--line); }
.dt__gallery-head{ max-width:1200px; margin:0 auto 5vh; display:flex; flex-direction:column; gap:.9rem; }
.dt__gallery-note{ color:var(--muted); font-size:.85rem; max-width:52ch; }
.dt__gallery-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,3vw,3rem); }
.shot{ opacity:1; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.shot.in{ transform:none; }
.shot__bar{ display:flex; align-items:center; gap:6px; padding:.6rem .8rem; background:#1a1a1f;
  border:1px solid var(--line); border-bottom:0; border-radius:10px 10px 0 0; }
.shot__bar span{ width:9px; height:9px; border-radius:50%; background:#3a3a40; }
.shot__bar span:first-child{ background:#ff5f57; } .shot__bar span:nth-child(2){ background:#febc2e; } .shot__bar span:nth-child(3){ background:#28c840; }
.shot__bar em{ margin-inline-start:.6rem; font-style:normal; font-family:var(--f-disp); font-size:.62rem;
  letter-spacing:.14em; color:var(--muted); }
.shot__img{ border:1px solid var(--line); border-radius:0 0 10px 10px; overflow:hidden; background:#fff; }
.shot__img img{ width:100%; height:auto; display:block; }
.shot figcaption{ margin-top:1rem; color:var(--muted); font-size:.82rem; line-height:1.5; }

/* strategic planning — grouped slide decks */
.dt__plans{ padding:10vh 0 4vh; border-top:1px solid var(--line); }
.dt__plans > .eyebrow{ display:block; margin-bottom:1vh; }
.plan{ max-width:1200px; margin:0 auto; padding:6vh var(--pad); border-top:1px solid var(--line); }
.dt__plans > .eyebrow + .plan{ border-top:0; }
.plan__head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem 1.5rem; flex-wrap:wrap; margin-bottom:3vh; }
.plan__title{ font-family:var(--f-disp); font-weight:600; font-size:clamp(1.3rem,3.2vw,2.2rem); letter-spacing:-.02em; line-height:1.1; }
.plan__tag{ font-family:var(--f-disp); font-size:.7rem; letter-spacing:.14em; color:var(--accent);
  border:1px solid var(--accent-dim); border-radius:100px; padding:.4rem .9rem; white-space:nowrap; }
.plan__slides{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; align-items:start; }
.deck{ opacity:1; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.deck.in{ transform:none; }
.deck__img{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.deck__img img{ width:100%; height:auto; display:block; }
.deck figcaption{ margin-top:.7rem; color:var(--muted); font-size:.78rem; letter-spacing:.02em; }

/* digital builds — websites in browser / phone frames */
.dt__builds{ padding:10vh 0 4vh; border-top:1px solid var(--line); }
.dt__builds > .eyebrow{ display:block; margin-bottom:1vh; }
.site{ max-width:1200px; margin:0 auto; padding:7vh var(--pad); border-top:1px solid var(--line); }
.dt__builds > .eyebrow + .site{ border-top:0; }
.site__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem 1.5rem; flex-wrap:wrap; }
.site__title{ font-family:var(--f-disp); font-weight:600; font-size:clamp(1.5rem,3.6vw,2.6rem); letter-spacing:-.02em; line-height:1.05; }
.site__tag{ display:inline-block; margin-top:.7rem; font-family:var(--f-disp); font-size:.72rem; letter-spacing:.14em; color:var(--accent); }
.site__visit{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-disp); font-weight:600;
  font-size:.78rem; letter-spacing:.1em; color:var(--ink); border:1px solid var(--line); border-radius:100px;
  padding:.55rem 1.05rem; transition:background .3s var(--ease), color .3s, border-color .3s; white-space:nowrap; }
.site__visit:hover{ background:var(--brand); color:var(--ink); border-color:var(--brand); }
.site__desc{ margin-top:2rem; font-size:clamp(1.05rem,2vw,1.4rem); line-height:1.4; color:var(--ink); max-width:60ch; }
.site__highlights{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem; }
.site__highlights li{ font-family:var(--f-disp); font-size:.72rem; letter-spacing:.06em; color:var(--ink);
  border:1px solid var(--line); border-radius:100px; padding:.45rem .95rem; }
.site__highlights li:nth-child(odd){ border-color:var(--accent-dim); color:var(--accent); }
.site__role{ margin-top:1.6rem; font-family:var(--f-disp); font-size:.75rem; letter-spacing:.14em; color:var(--muted); }
.site__shots{ margin-top:3.5vh; display:grid; grid-template-columns:1fr; gap:clamp(1.5rem,3vw,2.5rem); }
.site__shots:has(.phone){ grid-template-columns:1fr; }
.site__placeholder{ margin-top:3.5vh; border:1px dashed var(--line); border-radius:12px; min-height:200px;
  display:grid; place-items:center; color:var(--muted); font-family:var(--f-disp); font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; }

/* screenshot slider */
.slider{ position:relative; margin-top:3.5vh; }
.slider__viewport{ overflow:hidden; transition:height .45s var(--ease); }
.slider__track{ display:flex; transition:transform .5s var(--ease); will-change:transform; }
.slider__slide{ flex:0 0 100%; min-width:100%; padding-inline:2px; }
.slider__arrow{ position:absolute; top:38%; transform:translateY(-50%); z-index:3; width:46px; height:46px;
  border-radius:50%; border:1px solid var(--line); background:rgba(8,8,8,.6); backdrop-filter:blur(10px);
  color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:background .3s, color .3s, border-color .3s; }
.slider__arrow:hover{ background:var(--brand); color:var(--ink); border-color:var(--brand); }
.slider__arrow--prev{ inset-inline-start:-8px; }
.slider__arrow--next{ inset-inline-end:-8px; }
.slider__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.4rem; flex-wrap:wrap; }
.slider__count{ font-family:var(--f-disp); font-size:.8rem; letter-spacing:.1em; color:var(--muted); }
.slider__count b{ color:var(--accent); font-weight:600; }
.slider__dots{ display:flex; gap:.5rem; flex-wrap:wrap; }
.slider__dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--line); transition:background .3s, transform .3s; }
.slider__dot.is-on{ background:var(--accent); transform:scale(1.35); }
@media (max-width:560px){ .slider__arrow{ width:40px; height:40px; } }

/* browser frame (desktop shots) */
.browser{ margin:0; }
.browser__bar{ display:flex; align-items:center; gap:6px; padding:.7rem 1rem; background:#1a1a1f;
  border:1px solid var(--line); border-bottom:0; border-radius:12px 12px 0 0; }
.browser__bar span{ width:10px; height:10px; border-radius:50%; background:#3a3a40; }
.browser__bar span:first-child{ background:#ff5f57; }
.browser__bar span:nth-child(2){ background:#febc2e; }
.browser__bar span:nth-child(3){ background:#28c840; }
.browser__bar em{ margin-inline-start:.9rem; font-style:normal; font-family:var(--f-disp); font-size:.68rem;
  letter-spacing:.06em; color:var(--muted); background:#0f0f13; border:1px solid var(--line);
  border-radius:100px; padding:.2rem .8rem; }
.browser__img{ border:1px solid var(--line); border-radius:0 0 12px 12px; overflow:hidden; background:#fff; }
.browser__img img{ width:100%; height:auto; display:block; }
.browser figcaption{ margin-top:1rem; color:var(--muted); font-size:.85rem; }

/* phone frame (mobile shots) */
.phone{ margin:0 auto; max-width:300px; }
.phone__img{ border:8px solid #1a1a1f; border-radius:34px; overflow:hidden; background:#fff;
  box-shadow:0 30px 70px rgba(0,0,0,.5); }
.phone__img img{ width:100%; height:auto; display:block; }
.phone figcaption{ margin-top:1rem; color:var(--muted); font-size:.82rem; text-align:center; }

.dt__lessons{ max-width:1100px; margin:0 auto; padding:12vh var(--pad); }
.dt__lessons p{ font-family:var(--f-disp); font-size:clamp(1.6rem,5vw,3.5rem); font-weight:500;
  letter-spacing:-.03em; line-height:1.15; }

/* =====================================================================
   REVEAL HELPERS
   ===================================================================== */
/* rl-inner is visible by default; JS (immediateRender:false) plays the mask reveal
   only when its ScrollTrigger fires, so text is never left hidden. */
.rl-inner{ transform:translateY(0); }
[data-fade]{ opacity:0; transform:translateY(30px); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav{ mix-blend-mode:normal; }
  .proof__grid{ grid-template-columns:repeat(2,1fr); gap:5vh 3vw; }
  .wk__row{ grid-template-columns:auto 1fr; }
  .wk__meta{ display:none; }
  .wk:hover .wk__cat{ transform:none; }
  .exp__blurb{ display:none; }
  .dt__block{ grid-template-columns:1fr; gap:1.5rem; }
  .dt__results-grid{ grid-template-columns:repeat(2,1fr); }
  .dt__stripe-grid{ grid-template-columns:repeat(2,1fr); }
  .dt__gallery-grid{ grid-template-columns:1fr; }
  .plan__slides{ grid-template-columns:1fr; gap:2rem; }
  .exp__preview{ display:none; }
}
@media (max-width:560px){
  .proof__grid{ grid-template-columns:1fr; }
  .dt__results-grid{ grid-template-columns:1fr; }
  .hero__foot{ font-size:.6rem; }
  .hero__avail{ display:none; }
  .hero__label{ font-size:.56rem; padding:.28rem .55rem; max-width:44vw; overflow:hidden; text-overflow:ellipsis; }
  .cta__foot{ flex-direction:column; gap:.4rem; }
}

/* =====================================================================
   ARABIC / RTL
   ===================================================================== */
/* Redefine the type vars so every element using them switches to Arabic. */
html.ar{ --f-disp:"IBM Plex Sans Arabic", system-ui, sans-serif;
         --f-body:"IBM Plex Sans Arabic", system-ui, sans-serif; }
html.ar body{ font-family:var(--f-body); }

/* Brand marks stay Latin, keep their tight tracking. */
html.ar .hero__title,
html.ar .nav__brand,
html.ar .nav__lang{ font-family:"Space Grotesk", sans-serif; }

/* Arabic script must not have Latin letter-spacing or uppercase. */
html.ar h1, html.ar h2, html.ar h3,
html.ar .eyebrow, html.ar .nav__link, html.ar .menu__link,
html.ar .hero__sub, html.ar .hero__foot, html.ar .hero__label,
html.ar .intro__word, html.ar .pos__lead, html.ar .pos__body, html.ar .pos__stack li,
html.ar .stat__num, html.ar .stat__label, html.ar .stat__note,
html.ar .wk__index, html.ar .wk__cat, html.ar .wk__client, html.ar .wk__summary, html.ar .wk__kpi, html.ar .wk__view,
html.ar .exp__name, html.ar .exp__blurb,
html.ar .tl__year, html.ar .tl__label, html.ar .tl__text, html.ar .tl__note,
html.ar .cta__line, html.ar .cta__sub, html.ar .cta__btn, html.ar .cta__links a, html.ar .cta__foot,
html.ar .dt__eyebrow, html.ar .dt__cat, html.ar .dt__fact .k, html.ar .dt__fact .v,
html.ar .dt__block h3, html.ar .dt__block p, html.ar .dt__res .m, html.ar .dt__stage, html.ar .dt__lessons p,
html.ar .cursor__label, html.ar .proof__disc{
  letter-spacing:normal; text-transform:none;
}
/* A touch more line height for Arabic display type. */
html.ar .pos__lead, html.ar .pos__body, html.ar .cta__line,
html.ar .dt__cat, html.ar .dt__lessons p{ line-height:1.15; }
html.ar .hero__sub{ line-height:1.6; }
/* Keep the brand mark's tight tracking even under the reset above. */
html.ar .hero__title{ letter-spacing:-.045em; }
/* Keep Latin brand glyphs in LTR order (so "MO." doesn't become ".MO"). */
html.ar .hero__title .word, html.ar .nav__brand{ direction:ltr; unicode-bidi:isolate; }
/* Numeric/KPI values stay LTR so "<12 MO", "4.8×", "+400%" read correctly. */
html.ar .wk__kpi b, html.ar .dt__res .n,
html.ar .dt__stage .i, html.ar .intro__num{ direction:ltr; unicode-bidi:isolate; display:inline-flex; }
html.ar .stat__num{ direction:ltr; }  /* keep flex layout, fix +/% order */

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001s !important; }
  .rl-inner{ transform:none; }
  [data-fade]{ opacity:1; transform:none; }
  .hero__cueline::after{ display:none; }
  .rcpt__marquee, .yt__marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .rcpt__track, .yt__track{ animation:none; }
}