/* =========================================================
   Mohamed Sherif — Landing Page
   Tokens follow the Mohamed Sherif Style Guide (2026).
   One type scale + one spacing scale. Change them here only.
   ========================================================= */
:root{
  /* Color — 4 colors + 1 accent */
  --red:#FB2203;          /* Signal Red: logo, key word, primary CTA */
  --burgundy:#3A0C06;     /* blends + footer band only */
  --fog:#8C8B8B;          /* atmospheric background */
  --black:#000;
  --white:#fff;
  --ink:#151312; --muted:#6B6664; --body:#3A3533; --line:#E6E2DF; --soft:#F6F4F2;

  /* Fonts */
  --serif:"Sorts Mill Goudy","Goudy Old Style","Palatino Linotype",Georgia,serif;  /* free stand-in for Californian FB */
  --ar:"Markazi Text","Tajawal","Segoe UI",Tahoma,serif;
  --num:"Roboto","Helvetica Neue",Arial,sans-serif;

  /* Type scale — Apple's discrete steps (apple.com: 12·14·17·19·21·24·28·32·40·48·56·80),
     changing at Apple's two breakpoints (1068px, 734px) instead of fluid clamp() */
  --t-xs:12px;     /* caption */
  --t-sm:14px;     /* body-reduced: lists, meta */
  --t-body:17px;   /* body */
  --t-lead:21px;   /* intro / subhead */
  --t-h3:24px;     /* card, step, job titles */
  --t-big:28px;    /* statements: hero line, about, program intro */
  --t-h2:48px;     /* section titles */
  --t-stat:80px;   /* big numbers */
  --t-h1:96px;     /* BRAND-SET, Let's Work Together */
  --t-display:160px; /* hero name */
  --lh-body:1.47; --lh-lead:1.38; --lh-head:1.08;

  /* Spacing scale (8-based) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;
  --sec:clamp(80px,9vw,128px);              /* every section, top & bottom */

  /* Layout — one column width for the whole page */
  --max:1240px;
  --m:clamp(20px,6vw,96px);
  --gutter:max(var(--m), calc((100vw - var(--max)) / 2));

  --ease:cubic-bezier(.2,.7,.2,1);
  --hero-image:none;   /* optional: url(assets/images/hero.jpg) */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media (max-width:1280px){:root{--t-display:112px}}
@media (max-width:1068px){:root{--t-lead:19px;--t-h3:21px;--t-big:24px;--t-h2:40px;--t-stat:64px;--t-h1:72px;--t-display:112px}}
@media (max-width:734px){:root{--t-lead:19px;--t-h3:19px;--t-big:21px;--t-h2:32px;--t-stat:48px;--t-h1:48px;--t-display:72px}}

/* Arabic: same scale, same steps (Apple keeps one scale for both scripts and only swaps the font + sets letter-spacing to 0).
   Apple's SF Pro AR is drawn to match SF Pro; Markazi Text is not — its letter body is ~18% smaller
   than Roboto/Goudy at the same px — so every Arabic text step gets one optical correction (×1.18),
   and a taller line-height for diacritics. */
html[lang=ar]{
  --t-xs:14px; --t-sm:17px; --t-body:20px; --t-lead:25px; --t-h3:28px; --t-big:33px;
  --lh-body:1.7; --lh-lead:1.6; 
}
@media (max-width:1068px){html[lang=ar]{--t-lead:22px;--t-h3:25px;--t-big:28px}}
@media (max-width:734px){html[lang=ar]{--t-body:19px;--t-lead:22px;--t-h3:22px;--t-big:25px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--ar);font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
ul,ol{margin:0;padding:0}
h1,h2,h3,p,figure,dl,dd{margin:0}
[lang=ar],[dir=rtl]{letter-spacing:0}          /* never letter-space Arabic */
body [lang=en]{font-family:var(--serif)}
html[lang=en] body{font-family:var(--num)}
html[lang=en] .btn__en{display:none}
.caps{font-family:var(--serif);text-transform:uppercase;letter-spacing:.06em;line-height:1.2}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.ph{font-family:var(--num);font-size:12px;letter-spacing:.04em;color:var(--red);background:rgba(251,34,3,.08);padding:1px 6px;direction:ltr;unicode-bidi:isolate}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:50;background:var(--black);color:var(--white);padding:10px 14px;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Shared text styles ---------- */
.label{font-family:var(--serif);text-transform:uppercase;letter-spacing:.12em;font-size:var(--t-xs);color:var(--muted);margin-bottom:var(--s2)}
.note{margin-top:var(--s2);font-size:var(--t-xs);color:var(--muted)}

/* ---------- Atmosphere ---------- */
.atmos{position:absolute;inset:0;overflow:hidden;background:var(--fog) var(--hero-image) center/cover no-repeat}
.atmos::before{content:"";position:absolute;width:min(120vw,1300px);aspect-ratio:73/51;left:50%;top:44%;
  transform:translate(-38%,-50%);background:url(assets/images/m-glow.svg) center/contain no-repeat;
  filter:blur(clamp(40px,7vw,90px));opacity:.95}
.atmos::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 35%,rgba(58,12,6,.55) 62%,var(--black) 92%),var(--grain);background-size:auto,160px 160px}
.atmos--soft{background:var(--black)}
.atmos--soft::before{top:20%;opacity:.55;transform:translate(-60%,-50%)}
.atmos--soft::after{background:linear-gradient(to bottom,rgba(0,0,0,.2),var(--black) 70%),var(--grain);background-size:auto,160px 160px}

/* ---------- Buttons (square corners) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:12px 24px;
  text-decoration:none;font-weight:700;font-size:var(--t-body);border:1.5px solid transparent;cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn__en{font-family:var(--serif);text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:500;opacity:.75}
.btn--lg{min-height:60px;padding-inline:28px}
.btn--primary{background:var(--red);color:var(--white)}
.btn--primary:hover{background:var(--white);color:var(--black)}
.btn--ghost{border-color:rgba(255,255,255,.55);color:var(--white)}
.btn--ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--dark:hover{background:var(--red);color:var(--white)}
.btn--line{border-color:var(--ink);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--white)}
.btn:active{transform:translateY(1px)}
.is-placeholder{cursor:not-allowed;opacity:.55}
.link-btn{background:none;border:0;padding:8px 0;color:inherit;font:inherit;font-size:var(--t-sm);text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.4);cursor:pointer}
.link-btn:hover{text-decoration-color:var(--red)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;color:var(--white);display:flex;flex-direction:column;justify-content:flex-end;padding-top:96px;isolation:isolate}
.hero .atmos{z-index:-1}




.hero__body{position:relative;z-index:1;padding:0 var(--gutter) var(--s6)}
.hero__name{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:var(--t-display);line-height:.86;text-align:left;direction:ltr}
.hero__name .ln{display:block;overflow:hidden;padding:.08em 0 .04em;margin-top:-.08em}
.hero__name .ln>span{display:inline-block}
.hero__role{margin-top:var(--s3);font-size:var(--t-xs);letter-spacing:.12em;color:rgba(255,255,255,.82);text-align:left}
.hero__lead{margin-top:var(--s5);max-width:26ch;font-size:var(--t-big);font-weight:500;line-height:1.55}
.hero__lead em{font-style:normal;box-shadow:inset 0 -.14em 0 var(--red)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}
.hero__photo{position:absolute;z-index:0;inset-block:0;right:0;width:min(46vw,780px);margin:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to left,#000 55%,transparent),linear-gradient(to top,transparent 2%,#000 30%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,#000 55%,transparent),linear-gradient(to top,transparent 2%,#000 30%);mask-composite:intersect}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(.9)}
@media (min-width:901px){
  /* keep name + text in one column, clear of the portrait.
     English: text left, portrait right. Arabic: mirrored — text right, portrait left. */
  .hero__name{width:max-content;margin-left:0;margin-right:auto}
  .hero__lead{max-width:min(26ch,50vw);margin-left:0;margin-right:auto}
  html[dir=rtl] .hero__name,html[dir=rtl] .hero__lead{margin-left:auto;margin-right:0}
  html[dir=rtl] .hero__photo{right:auto;left:0;
    -webkit-mask-image:linear-gradient(to right,#000 55%,transparent),linear-gradient(to top,transparent 2%,#000 30%);
    mask-image:linear-gradient(to right,#000 55%,transparent),linear-gradient(to top,transparent 2%,#000 30%)}
}
@media (max-width:900px){.hero__photo{display:none}}
@media (max-width:560px){
  .hero__name{font-size:min(15vw,var(--t-display))}
  .hero__cta .btn{width:100%}
}

/* ---------- Fixed nav: brand · socials · lang/menu/CTA ----------
   Transparent over the hero, solid after scroll. */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s3);padding:0 var(--gutter);height:72px;
  color:var(--white);background:transparent;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,height .3s,color .3s}
.nav__mark{display:flex;align-items:center;gap:12px;text-decoration:none;justify-self:start}
.nav__logo{width:34px}
.nav__logo--dark{display:none}
.nav__name{font-size:13px;letter-spacing:.16em}
.nav__social{list-style:none;display:flex;gap:clamp(16px,2.4vw,32px);font-family:var(--num);font-size:var(--t-xs)}
.nav__social a{display:inline-flex;align-items:center;gap:8px;padding:10px 0;text-decoration:none;opacity:.85;transition:opacity .2s,color .2s}
.nav__social a::before{content:"";width:7px;height:7px;background:var(--red)}
.nav__social a:hover{opacity:1}
.nav__end{display:flex;align-items:center;gap:var(--s2);justify-self:end}
.nav__menu{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 4px;border:0;background:none;color:inherit;font:inherit;font-size:var(--t-sm);cursor:pointer}
.nav__burger{position:relative;width:22px;height:9px;border-block:1.5px solid currentColor;transition:width .3s var(--ease)}
.nav__menu:hover .nav__burger{width:28px}
.nav__cta{flex:none;text-decoration:none;font-weight:700;font-size:19px;padding:10px 18px;background:var(--red);color:var(--white);transition:background .2s,color .2s}
.nav__cta:hover{background:var(--white);color:var(--black)}
.nav .lang{border-color:rgba(255,255,255,.45);color:var(--white)}
/* solid state */
.nav.is-solid{color:var(--ink);background:rgba(255,255,255,.95);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line);height:64px}
.nav.is-solid .nav__logo--light{display:none}
.nav.is-solid .nav__logo--dark{display:block}
.nav.is-solid .nav__cta{background:var(--ink);color:var(--white)}
.nav.is-solid .nav__cta:hover{background:var(--red);color:var(--white)}
.nav.is-solid .lang{border-color:var(--line);color:var(--ink)}
.lang{flex:none;min-width:44px;min-height:36px;padding:6px 12px;border:1px solid var(--line);background:transparent;color:var(--ink);
  font:500 13px/1 var(--num);letter-spacing:.06em;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.lang:hover{border-color:var(--ink)}
.lang--light{border-color:rgba(255,255,255,.45);color:var(--white)}
.lang--light:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.lang__ar{font-family:var(--ar);font-size:16px;letter-spacing:0;display:none}
html[lang=en] .lang__en{display:none}
html[lang=en] .lang__ar{display:inline}
@media (max-width:1000px){.nav{grid-template-columns:1fr auto}.nav__social{display:none}}
@media (max-width:640px){.nav,.nav.is-solid{height:60px}.nav__name,.nav__cta,.nav__menu-t{display:none}.nav__end{gap:var(--s1)}}

/* ---------- Full-screen menu ---------- */
.menu{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;padding:0 var(--gutter) var(--s5);color:var(--white);background:var(--black);overflow-y:auto;isolation:isolate}
.menu[hidden]{display:none}
.menu .atmos{position:fixed;z-index:-1}
.menu__top{display:flex;align-items:center;justify-content:space-between;height:72px;flex:none}
.menu__top img{width:34px}
.menu__x{width:48px;height:48px;border:1px solid rgba(255,255,255,.4);background:none;color:var(--white);font:300 28px/1 var(--num);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.menu__x:hover{background:var(--red);border-color:var(--red);color:var(--white)}
.menu__links{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;gap:0 var(--s6);margin:auto 0;padding:var(--s5) 0}
.menu__links a{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid rgba(255,255,255,.16);text-decoration:none;
  font-size:var(--t-h2);line-height:1.15;transition:color .2s,padding .35s var(--ease)}
.menu__links a:hover{color:var(--red);padding-inline-start:12px}
.menu__links [lang=en]{font-size:.86em;letter-spacing:.02em}
.menu__n{font-family:var(--num);font-size:var(--t-xs);color:var(--red);min-width:24px}
.menu__social{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-family:var(--num);font-size:var(--t-xs)}
.menu__social a{text-decoration:none;opacity:.7}
.menu__social a:hover{opacity:1;color:var(--red)}
@media (max-width:760px){.menu__links{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}.menu__top{height:60px}}
@media (prefers-reduced-motion:no-preference){.menu:not([hidden]) .menu__links li{animation:fadeUp .6s var(--ease) both}
  .menu__links li:nth-child(2){animation-delay:.03s}.menu__links li:nth-child(3){animation-delay:.06s}.menu__links li:nth-child(4){animation-delay:.09s}.menu__links li:nth-child(5){animation-delay:.12s}
  .menu__links li:nth-child(6){animation-delay:.15s}.menu__links li:nth-child(7){animation-delay:.18s}.menu__links li:nth-child(8){animation-delay:.21s}.menu__links li:nth-child(9){animation-delay:.24s}.menu__links li:nth-child(10){animation-delay:.27s}}

/* ---------- Sections: one rhythm ----------
   Every section: same top/bottom padding, same column, same header.
   Backgrounds alternate white / soft (class s--soft), so no divider lines. */
.s{position:relative;padding:var(--sec) var(--gutter);scroll-margin-top:64px}
.s--soft{background:var(--soft)}
.sh{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s3) var(--s6);align-items:end;margin-bottom:var(--s6)}
.sh__n{display:block;font-family:var(--num);font-size:var(--t-xs);color:var(--red);margin-bottom:var(--s2)}
.sh__t{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:var(--t-h2);line-height:var(--lh-head);text-align:left}
.sh__t--sm{font-size:var(--t-xs);letter-spacing:.14em;opacity:.8}
.sh__lead{font-size:var(--t-lead);color:var(--body);max-width:44ch;line-height:var(--lh-lead)}
@media (max-width:820px){.sh{grid-template-columns:1fr;margin-bottom:var(--s5)}}
/* content blocks open with a dark rule */
.areas,.process__steps,.steps,.fbstats,.faq__list,.platforms,.webinar__grid{border-top:1px solid var(--ink)}

/* ---------- Clients marquee ---------- */
.clients{background:var(--black);color:var(--white);padding:var(--s5) 0;overflow:hidden}
.clients__t{padding:0 var(--gutter);margin-bottom:var(--s3);color:rgba(255,255,255,.55)}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{list-style:none;display:flex;align-items:center;gap:clamp(40px,5vw,72px);padding-right:clamp(40px,5vw,72px);flex:none;min-width:100%}
.marquee__track img{height:clamp(34px,3.6vw,46px);width:auto;opacity:.72;transition:opacity .3s}
.marquee__track li:hover img{opacity:1}
@keyframes marquee{to{transform:translateX(-100%)}}

/* ---------- About ---------- */
.about__photo{display:none;margin:0 0 var(--s5)}
.about__photo img{width:100%;aspect-ratio:1;object-fit:cover}
@media (max-width:900px){.about__photo{display:block}}
/* stats: big serif numbers, three equal columns */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.stats__item{padding-top:var(--s4);padding-inline:0 var(--s4)}
.stats__item+.stats__item{border-inline-start:1px solid var(--line);padding-inline:var(--s4)}
.stat{font-family:var(--serif);font-weight:400;font-size:var(--t-stat);line-height:1;letter-spacing:-.01em;font-variant-numeric:lining-nums;color:var(--ink)}
html[dir=rtl] .stat{text-align:right}
.stats__item--lead .stat{color:var(--red)}
.stats dd{margin-top:var(--s2);font-size:var(--t-sm);color:var(--body)}
/* roles: Idntik / Branders as link rows */
.roles{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4);margin-top:var(--s5)}
.role{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"k k arrow" "name d arrow";align-items:baseline;gap:var(--s1) var(--s3);
  padding:var(--s3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none}
.role__k{grid-area:k;font-size:var(--t-xs);color:var(--muted)}
.role__name{grid-area:name;font-size:var(--t-h3);color:var(--ink);letter-spacing:.08em}
.role__d{grid-area:d;font-size:var(--t-sm);color:var(--body)}
.role__arrow{grid-area:arrow;align-self:center;font-family:var(--num);font-size:20px;color:var(--muted);transition:color .2s,transform .3s var(--ease)}
.role:hover .role__arrow{color:var(--red);transform:translate(3px,-3px)}
.role:hover .role__name{color:var(--red)}
@media (max-width:820px){
  .stats{grid-template-columns:1fr}
  .stats__item,.stats__item+.stats__item{border-inline-start:0;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
  .stats__item{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
  .stats dd{margin-top:0;text-align:end}
  .roles{grid-template-columns:1fr}
  .roles li+li .role{border-top:0}
}

/* ---------- What I do ---------- */
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.area{padding-top:var(--s4);padding-inline:0 var(--s4)}
.area+.area{border-inline-start:1px solid var(--line);padding-inline:var(--s4)}
.area__n{font-family:var(--num);font-size:var(--t-xs);color:var(--red)}
.area__t{display:flex;flex-direction:column;gap:var(--s1);margin:var(--s2) 0;font-size:var(--t-h3);font-weight:700;line-height:1.3}
.area__t .caps{font-size:var(--t-xs);font-weight:500;color:var(--muted);letter-spacing:.12em}
.area p{color:var(--body);font-size:var(--t-body);max-width:34ch}
.area ul{list-style:none;margin-top:var(--s3);display:grid;gap:var(--s1);font-size:var(--t-sm)}
.area li,.topics li{position:relative;padding-inline-start:18px}
.area li::before,.topics li::before{content:"";position:absolute;inset-inline-start:0;top:.85em;width:8px;height:1.5px;background:var(--red)}
@media (max-width:820px){
  .areas{grid-template-columns:1fr}
  .area,.area+.area{border-inline-start:0;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
}

/* ---------- Selected work ---------- */
.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
.card{display:block;text-decoration:none}
.card__img{position:relative;aspect-ratio:4/3;background:var(--line);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card__img img{transform:scale(1.035)}
.card__img figcaption{display:none}
.card__img.is-empty img{display:none}
.card__img.is-empty figcaption{display:grid;place-items:center;position:absolute;inset:0}
.card__t{margin-top:var(--s2);font-size:var(--t-h3);font-weight:400;line-height:1.2;text-align:left;font-family:var(--serif)}
.card__c{margin-top:var(--s1);font-size:12px;letter-spacing:.12em;color:var(--muted);text-align:left}
.card:hover .card__t{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:6px;text-decoration-thickness:1.5px}
#work .btn--line{margin-top:var(--s5)}
@media (max-width:620px){.work{grid-template-columns:1fr;gap:var(--s4)}#work .btn--line{width:100%}}

/* ---------- Work With Me: process ---------- */
.process__steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:var(--s5)}
.process__steps li{padding-top:var(--s4);padding-inline:0 var(--s3)}
.process__steps li+li{border-inline-start:1px solid var(--line);padding-inline:var(--s3)}
.process__n{font-family:var(--num);font-size:var(--t-xs);color:var(--red)}
.process__steps h3{margin:var(--s2) 0 var(--s1);font-size:var(--t-h3);font-weight:700;line-height:1.3}
.process__steps p{color:var(--body);font-size:var(--t-sm)}
@media (max-width:900px){
  .process__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process__steps li:nth-child(3){border-inline-start:0;padding-inline:0 var(--s3)}
  .process__steps li:nth-child(n+3){border-top:1px solid var(--line);margin-top:var(--s3)}
}
@media (max-width:560px){
  .process__steps{grid-template-columns:1fr}
  .process__steps li,.process__steps li+li{border-inline-start:0;padding:var(--s3) 0;border-top:1px solid var(--line);margin:0}
  .process__steps li:first-child{border-top:0}
  .process .btn{width:100%}
}

/* ---------- Program (dark) ---------- */
.s--dark{color:var(--white);background:var(--black);overflow:hidden;isolation:isolate}
.s--dark .atmos{z-index:-1}
.s--dark .label{color:rgba(255,255,255,.6)}
.s--dark .note{color:rgba(255,255,255,.55)}
.program .sh{grid-template-columns:1fr;align-items:start}
.program__name{font-family:var(--serif);font-weight:400;font-size:var(--t-h1);line-height:.9;letter-spacing:.01em;text-align:left;white-space:nowrap}
.program__tag{margin-top:var(--s2);font-size:var(--t-xs);letter-spacing:.12em;color:rgba(255,255,255,.75);text-align:left}
.program__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);border-top:1px solid rgba(255,255,255,.2);padding-top:var(--s4)}
.program__desc{font-size:var(--t-big);font-weight:500;line-height:1.55;max-width:26ch}
.program__meta{margin-top:var(--s4);display:grid;gap:var(--s2)}
.program__meta dt{font-size:var(--t-xs);color:rgba(255,255,255,.6)}
.program__meta dd{font-size:var(--t-sm)}
.outcomes{list-style:none;counter-reset:o;display:grid}
.outcomes li{counter-increment:o;display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s1);padding:var(--s2) 0;border-top:1px solid rgba(255,255,255,.16);font-size:var(--t-body);line-height:1.65}
.outcomes li:first-child{border-top:0;padding-top:0}
.outcomes li::before{content:counter(o,decimal-leading-zero);font-family:var(--num);font-size:var(--t-xs);color:var(--red);padding-top:5px}
.program__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-top:var(--s5)}
@media (max-width:820px){.program__grid{grid-template-columns:1fr;gap:var(--s5)}.program__cta .btn{width:100%}}

/* ---------- Mentoring steps ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.step{display:flex;flex-direction:column;align-items:flex-start;padding-top:var(--s4);padding-inline:0 var(--s6)}
.step+.step{border-inline-start:1px solid var(--line);padding-inline:var(--s6) 0}
.step__n{font-family:var(--num);font-size:var(--t-xs);color:var(--red);margin-bottom:var(--s2)}
.step .label{margin-bottom:var(--s1)}
.step__t{font-size:var(--t-h3);font-weight:700;line-height:1.3}
.step__meta{margin-top:var(--s1);font-size:var(--t-sm);color:var(--muted)}
.step__p{margin:var(--s3) 0;color:var(--body);max-width:40ch}
.topics{list-style:none;display:grid;margin:0 0 var(--s4);width:100%;max-width:440px;font-size:var(--t-sm)}
.topics li{border-bottom:1px solid var(--line);padding-block:10px}
.topics li::before{top:1.45em}
.step .btn{margin-top:auto}
.step .note{margin-top:var(--s2)}
@media (max-width:820px){
  .steps{grid-template-columns:1fr}
  .step,.step+.step{border-inline-start:0;padding:var(--s4) 0}
  .step+.step{border-top:1px solid var(--line)}
  .step .btn{width:100%}
}

/* ---------- Feedback: stats + slider ---------- */
.fbstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.fbstats>div{padding-top:var(--s3);padding-inline:0 var(--s3)}
.fbstats>div+div{border-inline-start:1px solid var(--line);padding-inline:var(--s3)}
.fbstats .stat{color:var(--red)}
.fbstats dd{margin-top:var(--s1);color:var(--body);font-size:var(--t-sm);max-width:28ch}
.fbstats__src{margin:var(--s3) 0 var(--s5)}
@media (max-width:760px){
  .fbstats{grid-template-columns:1fr}
  .fbstats>div,.fbstats>div+div{border-inline-start:0;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
}
.proof{list-style:none;display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.proof::-webkit-scrollbar{display:none}
.proof li{flex:0 0 clamp(240px,24vw,320px);scroll-snap-align:start}
.proof__item{display:block;width:100%;aspect-ratio:4/5;padding:0;border:1px solid var(--line);background:var(--line);cursor:zoom-in;position:relative;overflow:hidden}
.proof__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.proof__item:hover img{transform:scale(1.02)}
.proof__item .ph{display:none}
.proof.is-empty .proof__item{cursor:default}
.proof.is-empty .proof__item img{display:none}
.proof.is-empty .proof__item .ph{display:block;position:absolute;inset:auto 0 50% 0;margin:auto;width:max-content}
.proof__nav{display:flex;gap:var(--s1);margin-top:var(--s3)}
.proof__btn{width:48px;height:48px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:400 20px/1 var(--num);cursor:pointer;transition:background .2s,color .2s}
.proof__btn:hover{background:var(--ink);color:var(--white)}
@media (max-width:620px){.proof li{flex-basis:78%}}
.zoom{border:0;padding:0;background:transparent;max-width:min(92vw,720px);max-height:92dvh;overflow:visible}
.zoom::backdrop{background:rgba(0,0,0,.85)}
.zoom__img{max-height:88dvh;width:auto;margin:auto}
.zoom__x{position:fixed;top:12px;inset-inline-end:12px;width:48px;height:48px;border:0;background:var(--white);color:var(--ink);font-size:28px;line-height:1;cursor:pointer}

/* ---------- Webinar ---------- */
.webinar__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6);align-items:end;padding-top:var(--s4)}
.webinar__cover{margin:0 0 var(--s3);background:var(--fog);overflow:hidden}
.webinar__cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.webinar__t{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:var(--t-h3);line-height:1.2;text-align:left}
.webinar__p{margin-top:var(--s1);font-size:var(--t-body);color:var(--body);max-width:44ch}
.webinar__meta{display:grid;margin-bottom:var(--s4)}
.webinar__meta>div{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.webinar__meta>div:first-child{border-top:1px solid var(--line)}
.webinar__meta dt{color:var(--muted);font-size:var(--t-sm)}
.webinar__meta dd{font-weight:700;font-size:var(--t-sm)}
@media (max-width:820px){.webinar__grid{grid-template-columns:1fr;gap:var(--s4)}.webinar .btn{width:100%}}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) 0;font-size:var(--t-lead);font-weight:700;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--num);font-weight:400;font-size:26px;color:var(--red);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--red)}
.faq details p{padding:0 0 var(--s3);max-width:64ch;color:var(--body)}

/* ---------- Connect ---------- */
.platforms{list-style:none}
.platforms a{display:grid;grid-template-columns:minmax(0,1fr) auto 40px;align-items:baseline;gap:var(--s2);padding:var(--s3) 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .35s var(--ease)}
.platforms .caps{font-size:var(--t-h2);letter-spacing:.02em;line-height:1}
.platforms__h{font-family:var(--num);font-size:var(--t-xs);color:var(--muted)}
.platforms .arrow{font-family:var(--num);font-size:22px;text-align:right;color:var(--muted);transition:color .2s,transform .35s var(--ease)}
.platforms a:hover{padding-left:12px}
.platforms a:hover .arrow{color:var(--red);transform:translate(4px,-4px)}
@media (max-width:560px){.platforms a{grid-template-columns:minmax(0,1fr) 32px}.platforms__h{display:none}}

/* ---------- Footer ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s5);padding:var(--s4) var(--gutter);color:var(--white);
  background:var(--grain),linear-gradient(90deg,var(--burgundy),#1a0503 70%,var(--black));background-size:160px 160px,auto}
.foot__id{display:flex;align-items:center;gap:var(--s2)}
.foot__id img{width:40px}
.foot__name{font-size:var(--t-sm)}
.foot__role{font-family:var(--num);font-size:12px;opacity:.7}
.foot__links{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-family:var(--num);font-size:var(--t-xs)}
.foot__links a{text-decoration:none;opacity:.8;padding:6px 0;display:inline-block}
.foot__links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.foot__copy{font-size:12px;opacity:.7}


/* ---------- Text link with arrow (secondary CTA) ---------- */
.txtlink{display:inline-flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1.5px solid currentColor;text-decoration:none;font-weight:700;font-size:var(--t-sm);transition:color .2s,gap .3s var(--ease)}
.txtlink:hover{color:var(--red);gap:16px}
.txtlink__ic{color:var(--red);font-weight:400}
.arrow{font-family:var(--num);font-weight:400;display:inline-block}
html[dir=ltr] .arrow:not(.arrow--out){transform:scaleX(-1)}
.sh__side{display:grid;gap:var(--s3);justify-items:start}
.sh__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)}
@media (max-width:560px){.sh__cta .btn{width:100%}}

/* ---------- About: centered statement ---------- */
.about__head{max-width:880px;margin:0 auto var(--s6);text-align:center}
html[lang=en] .about__head{max-width:860px}
.about__label{font-size:var(--t-xs);letter-spacing:.16em;color:var(--muted);font-weight:400;margin-bottom:var(--s4)}
.about__big{font-size:var(--t-big);font-weight:600;line-height:1.55;color:var(--ink)}
html[lang=en] .about__big{font-weight:500;line-height:1.4}
.about__big--2{margin-top:var(--s3);color:var(--body)}

/* ---------- Services: 4 columns ---------- */
.areas--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.areas--4 .area{display:flex;flex-direction:column;padding-bottom:var(--s2)}
.areas--4 .area p{font-size:var(--t-sm)}
.area__cta{margin-top:auto;padding-top:var(--s4)}
@media (max-width:1100px){
  .areas--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .areas--4 .area:nth-child(3){border-inline-start:0;padding-inline:0 var(--s4)}
  .areas--4 .area:nth-child(n+3){border-top:1px solid var(--line);margin-top:var(--s4)}
}
@media (max-width:820px){.areas--4{grid-template-columns:1fr}.areas--4 .area,.areas--4 .area:nth-child(n){border-top:0;margin-top:0;padding:var(--s4) 0}}

/* ---------- Resume: sticky head + expandable rows ---------- */
.resume__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:start}
.resume__head{position:sticky;top:96px;display:grid;gap:var(--s3);justify-items:start}
.resume__head .sh__n{margin-bottom:0}
.resume__list{border-top:1px solid var(--ink)}
.job{border-bottom:1px solid var(--line)}
.job summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;grid-template-areas:"t plus" "co plus";align-items:center;gap:4px var(--s3);padding:var(--s3) 0}
.job summary::-webkit-details-marker{display:none}
.job summary::after{content:"+";grid-area:plus;justify-self:end;font-family:var(--num);font-size:26px;line-height:1;color:var(--red);transition:transform .3s var(--ease)}
.job[open] summary::after{transform:rotate(45deg)}
.job__t{grid-area:t;font-family:var(--serif);font-size:var(--t-h3);line-height:1.2;text-align:left;transition:color .2s}
html[dir=rtl] .job__t,html[dir=rtl] .job__co{text-align:right}
.job__co{grid-area:co;font-size:12px;letter-spacing:.12em;color:var(--muted);text-align:left}
.job__date{grid-area:date;font-size:var(--t-xs);color:var(--muted);white-space:nowrap}
.job summary:hover .job__t{color:var(--red)}
.job p{padding:0 0 var(--s3);max-width:56ch;color:var(--body);font-size:var(--t-sm)}
@media (max-width:900px){.resume__grid{grid-template-columns:1fr;gap:var(--s5)}.resume__head{position:static}}

/* ---------- Contact: let's work together ---------- */
.contact__grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s6)}
.contact__t{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:var(--t-h1);line-height:.92;text-align:left;margin-bottom:var(--s4)}
.contact__main .sh__lead{margin-bottom:var(--s5)}
.contact__steps{border-top:1px solid var(--ink)}
.contact__side{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5);padding-inline-start:var(--s5);border-inline-start:1px solid var(--line)}
.contact__nav{list-style:none;border-top:1px solid var(--ink)}
.contact__nav a{display:block;padding:var(--s2) 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:var(--t-h3);font-weight:600;transition:color .2s,padding .35s var(--ease)}
.contact__nav a:hover{color:var(--red);padding-inline-start:10px}
.contact__nav [lang=en]{font-weight:400;font-size:.92em}
.contact__social{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-family:var(--num);font-size:var(--t-xs)}
.contact__social a{text-decoration:none;color:var(--body)}
.contact__social a:hover{color:var(--red)}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr;gap:var(--s5)}.contact__side{padding-inline-start:0;border-inline-start:0}}

/* ---------- Drawer (interest form) ---------- */
.drawer{position:fixed;inset:0 auto 0 0;margin:0;height:100dvh;max-height:none;width:min(520px,100vw);max-width:100vw;border:0;padding:0;
  background:var(--white);color:var(--ink);transform:translateX(-100%);transition:transform .4s var(--ease),display .4s allow-discrete,overlay .4s allow-discrete}
.drawer[open]{transform:none}
@starting-style{.drawer[open]{transform:translateX(-100%)}}
html[dir=ltr] .drawer{inset:0 0 0 auto;transform:translateX(100%)}
html[dir=ltr] .drawer[open]{transform:none}
@starting-style{html[dir=ltr] .drawer[open]{transform:translateX(100%)}}
.drawer::backdrop{background:rgba(0,0,0,.55)}
.drawer__in{position:relative;padding:var(--s6) clamp(20px,6vw,44px) var(--s5);min-height:100%;display:flex;flex-direction:column}
.drawer__x{position:absolute;top:14px;inset-inline-start:14px;width:44px;height:44px;border:0;background:none;font-size:30px;line-height:1;cursor:pointer;color:var(--ink)}
.drawer__t{font-size:var(--t-h3);font-weight:700;line-height:1.2}
.drawer__p{margin-top:var(--s1);color:var(--body)}
.drawer__form{margin-top:var(--s4);flex:1;display:flex;flex-direction:column}
.drawer__form iframe{width:100%;flex:1;min-height:560px;border:0}
.form-ph{border:1px dashed var(--fog);padding:var(--s3);font-size:var(--t-sm);color:var(--body);display:grid;gap:12px}
.form-ph ul{list-style:none;display:grid;gap:6px}
.form-ph li::before{content:"— ";color:var(--red)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:60;
  background:var(--ink);color:var(--white);padding:12px 18px;font-size:14px;transition:opacity .3s,transform .3s var(--ease);max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Mobile ---------- */
@media (max-width:560px){
  .btn__en{display:none}
  .btn{justify-content:center}
}

/* ---------- Motion (off for reduced-motion users) ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .hero__name .ln>span{animation:rise 1.1s var(--ease) both}
  .hero__name .ln:nth-child(2)>span{animation-delay:.12s}
  .hero__role{animation:fadeUp .9s var(--ease) .45s both}
  .hero__lead{animation:fadeUp .9s var(--ease) .6s both}
  .hero__cta{animation:fadeUp .9s var(--ease) .75s both}
  .hero__photo{animation:fade 1.6s ease .3s both}
  .hero .atmos::before{animation:drift 18s ease-in-out infinite alternate}
  .program .atmos::before{animation:drift2 22s ease-in-out infinite alternate}
  .marquee__track{animation:marquee 60s linear infinite}
  .marquee:hover .marquee__track{animation-play-state:paused}
}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes drift{0%{transform:translate(-38%,-50%) scale(1)}50%{transform:translate(-30%,-46%) scale(1.06)}100%{transform:translate(-44%,-53%) scale(.97)}}
@keyframes drift2{0%{transform:translate(-60%,-50%) scale(1)}100%{transform:translate(-52%,-44%) scale(1.08)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .marquee{overflow-x:auto}
  .marquee__track[aria-hidden]{display:none}
}
@media print{.nav,.drawer,.toast{display:none}}
.resume__head .sh__t{justify-self:stretch}
/* White on Signal Red = 3.9:1 → AA only for large/bold text (≥19px bold), so red buttons keep ≥19px bold labels */
.btn--primary,.btn--dark{font-size:max(var(--t-body),19px)}
.btn--primary .btn__en{opacity:1;font-weight:600}

/* =========================================================
   AUDIT FIXES — alignment, responsive, touch targets
   ========================================================= */
/* 1. Arabic pages: Latin display titles align to the start (right), like the Arabic text and numbers around them */
html[dir=rtl] :is(.hero__name,.hero__role,.sh__t,.card__t,.card__c,.program__name,.program__tag,.webinar__t,.job__t,.job__co,.contact__t){text-align:right}

/* 2. Long Latin titles never force their column wider than the screen */
.contact__grid>*,.program__grid>*,.resume__grid>*{min-width:0}
@media (max-width:900px){.contact__grid,.resume__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){
  .contact__t{font-size:min(var(--t-h1),13.5vw)}
  .program__name{font-size:min(var(--t-h1),15vw);white-space:normal}
  .sh__t{font-size:min(var(--t-h2),10vw)}
}

/* 3. Contact steps: 2×2 whenever four columns would get too narrow */
@media (max-width:1280px){
  .contact__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact__steps li:nth-child(3){border-inline-start:0;padding-inline:0 var(--s3)}
  .contact__steps li:nth-child(n+3){border-top:1px solid var(--line);margin-top:var(--s3)}
}

/* 4. Tablet: keep multi-column layouts longer (single column only on phones) */
@media (min-width:601px) and (max-width:820px){
  .areas--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .areas--4 .area:nth-child(even){border-inline-start:1px solid var(--line);padding-inline:var(--s4)}
  .areas--4 .area:nth-child(odd){padding-inline:0 var(--s4)}
  .areas--4 .area:nth-child(n+3){border-top:1px solid var(--line)}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats__item,.stats__item+.stats__item{display:block;border-bottom:0;padding:var(--s3) 0 0}
  .stats__item+.stats__item{border-inline-start:1px solid var(--line);padding-inline:var(--s3)}
  .stats dd{margin-top:var(--s2);text-align:start}
}

/* 5. Touch targets ≥ 44px */
.nav__mark,.nav__menu,.lang{min-height:44px}
.nav__menu{min-width:44px;justify-content:center}
.contact__social a,.menu__social a,.foot__links a{display:inline-flex;align-items:center;min-height:44px}
.txtlink,.link-btn{min-height:44px}

/* 6. Arabic: Latin link rows start on the right, like the rest of the column */
html[dir=rtl] :is(.contact__social,.menu__social){justify-content:flex-end}

/* 7. Small phones: role rows stack name over description */
@media (max-width:480px){
  .role{grid-template-columns:1fr auto;grid-template-areas:"k arrow" "name arrow" "d arrow"}
}
@media (max-width:560px){
  .contact__steps{grid-template-columns:minmax(0,1fr)}
  .contact__steps li,.contact__steps li+li,.contact__steps li:nth-child(n){border-inline-start:0;padding:var(--s3) 0;border-top:1px solid var(--line);margin:0}
  .contact__steps li:first-child{border-top:0}
}

/* Bilingual buttons: Arabic label centered, English label centered underneath */
.btn{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:4px;padding-block:10px;line-height:1.25}
.btn>span{white-space:nowrap}
.btn__en{display:block;line-height:1}
@media (max-width:560px){.btn__en{display:block}}
html[lang=en] .btn__en{display:none}
.btn>span>[lang=en],.btn [data-i18n] [lang=en]{font-size:.85em}


/* Mentoring steps: both buttons share one baseline, same width */
.steps .step .btn{margin-top:auto;min-width:300px}
.steps .step .note{min-height:2.6em}
@media (max-width:820px){.steps .step .btn{min-width:0}}