/* Oligence /corporate-training/ — standalone stylesheet. */
:root{
  --teal:#06AEA3;
  --purple:#5B49D3;
  --ink:#0A0A0F;
  --ink-2:#121219;
  --paper:#FAFAF8;
  --paper-2:#F1F0EC;
  --line-dark:rgba(250,250,248,0.18);
  --line-light:rgba(10,10,15,0.10);
  --muted-dark:rgba(250,250,248,0.78);
  --muted-light:rgba(10,10,15,0.62);
  --grad:linear-gradient(115deg, var(--teal) 0%, var(--purple) 100%);
  --maxw:1180px;
  --ease:cubic-bezier(.16,.84,.44,1);
  /* Fallback stacks are used as-is when Google Fonts is blocked or slow. */
  --f-sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --f-ar:'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, 'Geeza Pro', 'Noto Sans Arabic', Arial, sans-serif;
  --f-display-ar:'Jomhuria', var(--f-ar);
  --err:#C2410C;
}

*,*::before,*::after{box-sizing:border-box;}
/* lang-init.js: a returning Arabic visitor's page stays invisible (layout still computed) until script.js applied Arabic */
html.lang-pending body{visibility:hidden;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;animation:none!important;}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
html[lang="ar"] body{font-family:var(--f-ar);}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p,figure,dl,dd{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
section{position:relative;}
[hidden]{display:none!important;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}
#tna, #track-record{scroll-margin-top:76px;}

.skip-link{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;}
.skip-link:focus{top:12px;}

/* ---------- shared type ---------- */
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--muted-light);}
html[lang="ar"] .eyebrow{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-weight:600;font-size:13.5px;}
.eyebrow-dark{color:var(--muted-dark);}
.eyebrow .tri{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--teal);flex:none;}
.eyebrow-dark .tri{border-left-color:#fff;}
html[dir="rtl"] .eyebrow .tri{transform:scaleX(-1);}
h2{font-weight:700;letter-spacing:-0.01em;font-size:clamp(28px,4.2vw,46px);line-height:1.1;}
html[lang="ar"] h2{letter-spacing:0;line-height:1.3;}
.lead{font-weight:300;font-size:clamp(16px,1.6vw,19px);line-height:1.6;max-width:680px;color:var(--muted-light);margin-top:16px;}
html[lang="ar"] .lead{font-weight:400;}
.grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;transition:transform .25s var(--ease), background .25s, border-color .25s, color .25s;white-space:nowrap;cursor:pointer;}
.btn:hover{transform:translateY(-2px);}
.btn-grad{background:var(--grad);color:#fff;}
.btn-white{background:var(--paper);color:var(--ink);}
.btn-white:hover{background:#fff;}
.btn-ghost-dark{border-color:var(--line-dark);color:#fff;}
.btn-ghost-dark:hover,.btn-ghost-dark:focus-visible{border-color:#fff;}
.btn-ghost-light{border-color:var(--line-light);color:var(--ink);}
.btn-ghost-light:hover,.btn-ghost-light:focus-visible{border-color:var(--ink);}
.arr{display:inline-block;}
html[dir="rtl"] .back-link .arr{transform:scaleX(-1);}

/* ---------- header ---------- */
.ct-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line-light);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;max-width:var(--maxw);margin:0 auto;gap:20px;}
.logo img{height:26px;width:auto;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{color:var(--muted-light);font-size:14.5px;font-weight:500;transition:color .2s;position:relative;padding:4px 0;}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink);}
.nav-links a.active{color:var(--ink);}
.nav-links a.active::after{content:"";position:absolute;inset-inline:0;bottom:-4px;height:2px;border-radius:2px;background:var(--grad);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.burger{display:none;background:none;border:1px solid var(--line-light);border-radius:10px;color:var(--ink);padding:8px;width:38px;height:38px;align-items:center;justify-content:center;flex:none;cursor:pointer;}
.burger svg{width:18px;height:auto;}
.burger .icon-close{display:none;}
.burger.open .icon-menu{display:none;}
.burger.open .icon-close{display:block;}
.mobile-nav{display:none;max-height:0;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line-light);transition:max-height .35s var(--ease);}
.mobile-nav.open{max-height:520px;}
.mobile-nav-inner{padding:10px 32px 22px;display:flex;flex-direction:column;}
.mobile-nav a{padding:14px 0;font-size:16px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line-light);}
.mobile-nav a.active{color:var(--teal);font-weight:600;}
.mobile-nav-cta{display:none;}
.mobile-nav a.mobile-nav-cta{border-bottom:0;padding:14px 26px;color:#fff;}
.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;border:1px solid rgba(6,174,163,.5);background:rgba(6,174,163,.10);color:var(--ink);font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .2s, background .2s, color .2s;}
.lang-btn:hover,.lang-btn:focus-visible{border-color:transparent;background:var(--grad);color:#fff;}
.lang-btn .dot{width:6px;height:6px;border-radius:50%;background:var(--purple);flex:none;}
.lang-btn:hover .dot,.lang-btn:focus-visible .dot{background:#fff;}
@media (max-width:960px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .mobile-nav{display:block;}
}
@media (max-width:520px){
  .nav{padding:12px 16px;gap:10px;}
  .nav-cta{gap:8px;}
  .nav-cta .btn{padding:10px 14px;font-size:13px;}
  .lang-btn{padding:8px 11px;}
  .mobile-nav-inner{padding:8px 16px 20px;}
  .logo img{height:22px;}
}
@media (max-width:460px){
  .nav-cta > a.btn{display:none;}
  .mobile-nav-cta{display:flex;justify-content:center;margin-top:16px;}
}

/* ---------- hero ---------- */
.hero{background:var(--grad);color:#fff;padding:56px 0 88px;overflow:hidden;}
.back-link{display:flex;width:fit-content;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--muted-dark);margin-bottom:40px;border-bottom:1px solid transparent;}
.back-link:hover,.back-link:focus-visible{color:#fff;border-bottom-color:#fff;}
.hero h1{font-weight:700;letter-spacing:-0.02em;font-size:clamp(36px,6vw,72px);line-height:1.03;max-width:900px;}
/* Arabic hero: IBM Plex Sans Arabic 700 (no display-face swap, so no font-driven resize) */
html[lang="ar"] .hero h1{letter-spacing:0;font-size:clamp(32px,5.4vw,64px);line-height:1.3;}
/* rotating second line (script.js): typewriter over a flat highlighter stroke. The rotator reserves the height of the
   tallest phrase of the active language (min-height from script.js), so nothing below it moves while typing.
   Logical properties throughout: in Arabic the stroke grows from the right and the caret sits at the left end. */
/* Every phrase stays on ONE line: script.js sets --rot-fs (one size per language, never above the headline size) so the
   longest phrase fits, and reserves exactly one line of that size. */
/* Same face as the static line above it in both languages: family and letter-spacing inherited from the h1, upright 700
   (IBM Plex Sans 700 / IBM Plex Sans Arabic 700). The twin and the live text use the same face, so the measured width is exact. */
.rotator{position:relative;display:block;max-width:100%;font-size:var(--rot-fs,1em);font-style:normal;font-weight:700;}
.rotator__sizer{position:absolute;inset-inline-start:0;top:0;visibility:hidden;pointer-events:none;font-style:normal;font-weight:700;white-space:nowrap;padding-inline:.1em;}
.rotator__live{display:block;width:100%;text-align:start;white-space:nowrap;}
.rotator__text{font-style:normal;font-weight:700;--hl:#8FE9DE;background-image:linear-gradient(var(--hl),var(--hl));background-repeat:no-repeat;background-position:0 88%;background-size:100% .38em;padding-inline:.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color .3s ease;}
.rotator__text:empty{padding-inline:0;background-size:0 0;}
html[dir="rtl"] .rotator__text{background-position:100% 88%;}
/* caret: the negative block-start margin gives it a zero-height margin box, so it never makes its line taller than the
   measuring twin (Jomhuria's small ascent made the caret line 7px taller); it still paints at full height */
.rotator__caret{display:inline-block;width:3px;height:.86em;margin-block-start:-.86em;margin-inline-start:.06em;vertical-align:-.08em;background:#fff;border-radius:2px;animation:caretBlink 1.05s steps(1,end) infinite;}
.rotator:not(.is-live) .rotator__caret,.rotator.is-rest .rotator__caret{display:none;}
@keyframes caretBlink{50%{opacity:0;}}
@media (prefers-reduced-motion:reduce){.rotator__caret{display:none;}.rotator__text{transition:none;}}
.hero-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}

/* Oligence x IMFND lockup: both marks rendered at the same visual height, thin divider.
   IMFND is a dark wordmark, so on dark backgrounds it sits on a light pill (never recolored). */
.lockup{display:inline-flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap;}
/* dark backing so the white-text Oligence mark (teal/purple triangles) keeps contrast on the teal end of the gradient */
.lockup-dark{background:rgba(10,10,15,.55);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 12px 10px 20px;}
html[dir="rtl"] .lockup-dark{padding:10px 20px 10px 12px;}
.lockup .lk-oli{height:28px;width:auto;}
.lockup .lk-x{font-size:18px;font-weight:300;line-height:1;padding-inline-start:16px;border-inline-start:1px solid rgba(255,255,255,.55);height:30px;display:inline-flex;align-items:center;color:rgba(255,255,255,.85);}
.lk-pill{display:inline-flex;align-items:center;background:#fff;border-radius:999px;padding:8px 16px;}
.lk-pill .lk-imfnd{height:20px;width:auto;}

/* ---------- section shells ---------- */
.sec{padding:96px 0;}
.on-light{background:var(--paper);color:var(--ink);}
.on-light.alt{background:var(--paper-2);}
.sec-head{max-width:760px;margin-bottom:48px;}
@media (max-width:760px){.sec{padding:72px 0;}.sec-head{margin-bottom:36px;}}

.question .q-quote{font-size:clamp(28px,4.6vw,54px);max-width:960px;line-height:1.12;}
html[lang="ar"] .question .q-quote{line-height:1.35;}

/* domains */
.dom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.dom-card{background:#fff;border:1px solid var(--line-light);border-radius:16px;padding:28px 24px;transition:border-color .25s, transform .25s var(--ease);}
.dom-card:hover{border-color:var(--teal);transform:translateY(-3px);}
.dom-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--grad);color:#fff;font-family:var(--f-mono);font-weight:700;font-size:14px;margin-bottom:18px;}
.dom-card h3{font-size:18px;font-weight:700;line-height:1.3;margin-bottom:10px;}
.dom-card p{font-size:14.5px;color:var(--muted-light);line-height:1.55;}
@media (max-width:980px){.dom-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.dom-grid{grid-template-columns:1fr;}}

/* timeline */
.timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:0;counter-reset:none;position:relative;}
.timeline li{position:relative;padding:0 10px 0 0;}
.timeline li::before{content:"";position:absolute;top:21px;inset-inline-start:44px;inset-inline-end:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--purple));opacity:.35;}
html[dir="rtl"] .timeline li::before{background:linear-gradient(270deg,var(--teal),var(--purple));}
.timeline li:last-child::before{display:none;}
.tl-n{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;font-family:var(--f-mono);font-weight:700;font-size:16px;margin-bottom:16px;position:relative;}
.tl-t{display:block;font-weight:600;font-size:15px;line-height:1.35;padding-inline-end:12px;}
@media (max-width:900px){
  .timeline{grid-template-columns:1fr;gap:0;}
  .timeline li{display:flex;align-items:center;gap:16px;padding:0 0 22px;}
  .timeline li::before{top:44px;bottom:0;inset-inline-start:21px;inset-inline-end:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--teal),var(--purple));}
  html[dir="rtl"] .timeline li::before{background:linear-gradient(180deg,var(--teal),var(--purple));}
  .tl-n{margin-bottom:0;flex:none;}
}

/* formats */
.fmt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.fmt-card{border-radius:16px;padding:28px 24px;background:var(--ink);color:#fff;position:relative;overflow:hidden;}
.fmt-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 0% 0%, rgba(6,174,163,.35), transparent 60%);pointer-events:none;}
.fmt-card:nth-child(2n)::before{background:radial-gradient(120% 120% at 100% 0%, rgba(91,73,211,.4), transparent 60%);}
.fmt-card h3{position:relative;font-size:18px;font-weight:700;margin-bottom:8px;}
.fmt-card p{position:relative;font-size:14.5px;color:var(--muted-dark);}
@media (max-width:980px){.fmt-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.fmt-grid{grid-template-columns:1fr;}}
.fmt-clients{position:relative;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-dark);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted-dark);}
html[lang="ar"] .fmt-clients{font-family:var(--f-ar);letter-spacing:0;font-size:12.5px;}

/* ---------- hero pills + cities, question "today" line ---------- */
/* four chips, each on one line. Below 1024px they always form two rows of two: a zero-height, full-width flex item sits
   between chip 2 and chip 3 (order), so the break never depends on the text width. Row spacing comes from the chips'
   block-end margin (row-gap would also apply around the zero-height line). */
.hero-pills{display:flex;flex-wrap:wrap;gap:0 8px;margin-top:26px;margin-block-end:-8px;max-width:900px;}
.hero-pills li{white-space:nowrap;margin-block-end:8px;padding:7px 14px;border-radius:999px;border:1px solid var(--line-dark);background:rgba(255,255,255,.10);font-size:13.5px;font-weight:500;}
@media (max-width:1023px){
  .hero-pills::before{content:"";flex-basis:100%;height:0;order:2;}
  .hero-pills li:nth-child(n+3){order:3;}
}
.hero-cities{margin-top:16px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark);}
html[lang="ar"] .hero-cities{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:13.5px;}
.question .q-today{margin-top:18px;font-weight:600;font-size:clamp(16px,1.6vw,19px);color:var(--ink);}
html[lang="ar"] .question .q-today{display:none;}   /* English-only line (documented EN/AR exception) */

/* ---------- who we train ---------- */
/* the audience cards are the domain cards (.dom-grid / .dom-card / .dom-n) plus an outcome line kept at the bottom */
.aud-card{display:flex;flex-direction:column;}
.aud-card .dom-n{align-self:flex-start;}
.aud-card .aud-out{margin-top:auto;padding-top:16px;display:flex;gap:8px;align-items:baseline;color:var(--ink);font-weight:600;font-size:14px;}
.aud-card .aud-out .arr{color:var(--teal);}
html[dir="rtl"] .aud-card .aud-out .arr{transform:scaleX(-1);display:inline-block;}

/* ---------- how it works notes ---------- */
.how-notes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px;}
.how-note{border:1px solid var(--line-light);border-radius:16px;padding:22px;background:var(--paper-2);}
.how-note h3{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:8px;}
html[lang="ar"] .how-note h3{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:14px;}
.how-note p{font-size:15px;line-height:1.55;}
@media (max-width:760px){.how-notes{grid-template-columns:1fr;}}

/* ---------- engagement tracks ---------- */
.trk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.trk-card{border:1px solid var(--line-light);border-radius:16px;padding:28px 24px;background:#fff;display:flex;flex-direction:column;}
.trk-card h3{font-size:19px;font-weight:700;margin-bottom:10px;}
.trk-card p{font-size:14.5px;color:var(--muted-light);line-height:1.55;}
.trk-card .trk-tags{margin-top:auto;padding-top:16px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--teal);font-weight:600;}
html[lang="ar"] .trk-card .trk-tags{font-family:var(--f-ar);letter-spacing:0;font-size:13px;}
@media (max-width:900px){.trk-grid{grid-template-columns:1fr;}}

/* ---------- final CTA ---------- */
.cta-final{background:var(--grad);color:#fff;}
.cta-final h2{font-size:clamp(30px,4.6vw,52px);}
.cta-final .cta-sub{margin-top:12px;font-size:clamp(16px,1.7vw,19px);color:var(--muted-dark);}
.cta-steps{margin-top:24px;display:grid;gap:10px;max-width:640px;}
.cta-steps li{position:relative;padding-inline-start:26px;font-size:15.5px;line-height:1.5;}
.cta-steps li::before{content:"";position:absolute;inset-inline-start:0;top:.45em;width:12px;height:12px;border-radius:3px;background:#fff;opacity:.9;}

/* track record */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);border-radius:16px;overflow:hidden;margin-bottom:56px;}
.nums li{background:#fff;padding:28px 24px;}
.nums .num{display:block;font-family:var(--f-mono);font-weight:600;font-size:clamp(30px,3.4vw,42px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1;margin-bottom:10px;}
.nums .lbl{font-size:14px;color:var(--muted-light);line-height:1.5;}
@media (max-width:860px){.nums{grid-template-columns:repeat(2,1fr);}}
@media (max-width:440px){.nums{grid-template-columns:1fr;}}

.cases{display:grid;gap:22px;}
.case{border:1px solid var(--line-light);border-radius:18px;background:#fff;padding:24px;}
.case-head{display:flex;gap:20px;align-items:center;margin-bottom:20px;}
.case-logo{flex:none;width:132px;height:84px;border:1px solid var(--line-light);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px;}
.case-logo img{max-height:62px;width:auto;max-width:100%;object-fit:contain;}
.case-head h3{font-size:19px;font-weight:700;margin-bottom:6px;}
.case-head p{font-size:14.5px;color:var(--muted-light);line-height:1.55;max-width:760px;}
.case-photos{display:grid;gap:10px;}
.case-photos.c1{grid-template-columns:minmax(0,760px);}
.case-photos.c2{grid-template-columns:repeat(2,minmax(0,1fr));}
.case-photos.c3{grid-template-columns:repeat(3,minmax(0,1fr));}
.case-photos.c4{grid-template-columns:repeat(4,minmax(0,1fr));}
.case-photos picture,.case-photos figure{display:block;position:relative;border-radius:12px;overflow:hidden;background:var(--paper-2);}
.case-photos img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;}
.case-photos.tall img{aspect-ratio:3/4;}
.case-photos.c1 img{aspect-ratio:auto;}
.case-photos figcaption{position:absolute;inset-inline-start:10px;bottom:10px;background:rgba(10,10,15,.72);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;}
@media (max-width:760px){
  .case{padding:18px;}
  .case-head{flex-direction:column;align-items:flex-start;gap:14px;}
  .case-photos.c3,.case-photos.c2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .case-photos.c3 > :last-child:nth-child(odd){grid-column:1 / -1;}
  .case-photos.c3 > :last-child:nth-child(odd) img{aspect-ratio:16/9;}
}

/* ---------- client logos: compact strip under the hero + three moving rows in #trusted (script.js) ----------
   Cards: white, thin light border, logo contained and centred. Moving (.lg-on): each track holds two identical sets and
   the CSS animation shifts it by exactly one set (-50%; +50% in RTL), transform only. Static (no JS / reduced motion):
   the strip is a swipeable row, the #trusted rows wrap into a centred grid. */
.lg-strip,.on-light.lg-sec{background-image:linear-gradient(rgba(10,10,15,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,15,.035) 1px,transparent 1px);background-size:32px 32px;background-position:center top;}
.lg-strip{background-color:var(--paper-2);padding:20px 0;}
/* the strip's own pause button: at the inline end, over the faded edge, centred on the row */
.lg-strip{position:relative;}
.lg-pause-strip{position:absolute;top:50%;inset-inline-end:12px;transform:translateY(-50%);z-index:2;box-shadow:0 2px 10px rgba(10,10,15,.12);}
.lg-area{--lg-gap:14px;--lg-w:140px;--lg-h:78px;}
.lg-rows{display:grid;gap:var(--lg-gap);}
.lg-row{overflow:hidden;}
.lg-track{display:flex;}
.lg-set{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--lg-gap);padding:2px 16px;}
.lg-card{flex:none;width:var(--lg-w);height:var(--lg-h);display:flex;align-items:center;justify-content:center;padding:12px 14px;background:#fff;border:1px solid #E5E8EE;border-radius:15px;}
.lg-card img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;-webkit-user-drag:none;}
.lg-solo:not(.lg-on) .lg-row{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;}
.lg-solo:not(.lg-on) .lg-row::-webkit-scrollbar{display:none;}
.lg-solo:not(.lg-on) .lg-set{flex-wrap:nowrap;justify-content:flex-start;}
.lg-on .lg-row{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);}
.lg-on .lg-track{width:max-content;animation:lgMove var(--lg-dur,40s) linear infinite;will-change:transform;}
.lg-on .lg-set{flex-wrap:nowrap;justify-content:flex-start;padding-block:2px;padding-inline:0 var(--lg-gap);}
.lg-on .lg-rev .lg-track{animation-direction:reverse;}
html[dir="rtl"] .lg-on .lg-track{animation-name:lgMoveRtl;}
@keyframes lgMove{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@keyframes lgMoveRtl{from{transform:translate3d(0,0,0);}to{transform:translate3d(50%,0,0);}}
@media (hover:hover){.lg-on:hover .lg-track{animation-play-state:paused;}}
.lg-on.lg-paused .lg-track,.lg-on.lg-hold .lg-track,.lg-on.lg-off .lg-track{animation-play-state:paused;}
.lg-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;}
.lg-foot .also{font-size:14px;color:var(--muted-light);}
.lg-pause{flex:none;}
@media (prefers-reduced-motion:reduce){.lg-pause{display:none!important;}}
@media (max-width:767px){
  .lg-area{--lg-gap:12px;--lg-w:112px;--lg-h:64px;}
  .lg-card{padding:9px 11px;border-radius:14px;}
  .lg-strip{padding:14px 0;}
  /* phones: same heading size as the other compact sections (it now shares the first screen with the hero h1) */
  #trustedTitle{font-size:clamp(19px,5.6vw,28px);line-height:1.2;text-wrap:balance;}
  html[lang="ar"] #trustedTitle{line-height:1.35;}
  .lg-foot{margin-top:16px;}
  .lg-foot .also{font-size:13px;}
}

/* mentors */
.mentors h2{max-width:900px;margin-bottom:28px;}
.mentor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-bottom:32px;}
.mentor{background:#fff;border:1px solid var(--line-light);border-radius:16px;padding:12px 12px 18px;min-width:0;}
.mentor picture{display:block;border-radius:12px;overflow:hidden;background:var(--paper-2);}
.mentor img{width:100%;height:100%;object-fit:cover;}
.mentor-lead{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;}
.m-name{font-weight:600;font-size:16px;line-height:1.3;margin-top:14px;padding:0 4px;}
.m-role{font-size:13.5px;color:var(--muted-light);line-height:1.5;margin-top:4px;padding:0 4px;}
@media (max-width:860px){.mentor-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}.m-name{font-size:15px;}.m-role{font-size:12.5px;}}

/* ---------- TNA form ---------- */
.tna-shell{max-width:900px;margin:0 auto;}
.tna-banner{background:var(--grad);color:#fff;border-radius:20px 20px 0 0;padding:36px 36px 30px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.tna-banner h2{font-size:clamp(28px,4vw,40px);}
.tna-banner .tna-sub{margin-top:12px;max-width:520px;color:var(--muted-dark);font-size:15px;line-height:1.6;}
.tna-banner .lockup{margin-top:0;}
.tna-card{background:#fff;border:1px solid var(--line-light);border-top:0;border-radius:0 0 20px 20px;padding:32px 36px 36px;}
@media (max-width:600px){.tna-banner{padding:28px 20px 24px;}.tna-card{padding:24px 18px 28px;}}

.tna-progress{margin-bottom:28px;}
.tna-progress-top{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-light);margin-bottom:10px;flex-wrap:wrap;}
html[lang="ar"] .tna-progress-top{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:13px;}
.tna-track{height:6px;border-radius:999px;background:var(--paper-2);overflow:hidden;}
.tna-fill{height:100%;width:33.34%;background:var(--grad);border-radius:999px;transition:width .4s var(--ease);}
.tna-noscript{font-size:14px;color:var(--err);}

.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

.t-step h3{font-size:22px;font-weight:700;margin-bottom:6px;}
.t-step .t-step-sub{font-size:14.5px;color:var(--muted-light);margin-bottom:24px;}
.t-field{margin-bottom:22px;border:0;padding:0;min-width:0;}
.t-field > label,.t-field > legend{display:block;font-weight:600;font-size:14.5px;margin-bottom:9px;padding:0;}
.t-req{color:var(--teal);margin-inline-start:3px;}
.t-hint{display:block;font-size:12.5px;color:var(--muted-light);font-weight:400;margin-top:3px;}
.t-field input[type="text"],.t-field input[type="email"],.t-field input[type="tel"],.t-field input[type="number"],.t-field select,.t-field textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid rgba(10,10,15,.16);border-radius:12px;padding:12px 14px;transition:border-color .2s, box-shadow .2s;}
.t-field textarea{min-height:110px;resize:vertical;line-height:1.55;}
.t-field input:focus,.t-field select:focus,.t-field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(6,174,163,.18);}
.t-field input[type="tel"],.t-field input[type="email"]{direction:ltr;}
html[dir="rtl"] .t-field input[type="tel"],html[dir="rtl"] .t-field input[type="email"]{text-align:right;}
.t-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
@media (max-width:600px){.t-grid2{grid-template-columns:1fr;}}
.t-count{display:block;text-align:end;font-size:12px;color:var(--muted-light);margin-top:4px;}

.t-field > .t-label{display:block;font-weight:600;font-size:14.5px;margin-bottom:9px;}
.t-field input[type="url"]{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid rgba(10,10,15,.16);border-radius:12px;padding:12px 14px;transition:border-color .2s, box-shadow .2s;direction:ltr;}
html[dir="rtl"] .t-field input[type="url"]{text-align:right;}
.t-other{margin-top:10px;}
.t-other label{display:block;font-size:13px;font-weight:500;color:var(--muted-light);margin-bottom:6px;}

/* compact multi-select: a button that opens a checkbox list (keyboard: arrows, Space, Enter/Escape) */
.ms{position:relative;}
.ms-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid rgba(10,10,15,.16);border-radius:12px;padding:12px 14px;text-align:start;cursor:pointer;transition:border-color .2s, box-shadow .2s;}
.ms-btn:focus-visible,.ms.open .ms-btn{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(6,174,163,.18);}
.ms-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ms-val.ms-empty{color:var(--muted-light);}
.ms-caret{flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .2s;}
.ms.open .ms-caret{transform:rotate(225deg) translateY(-2px);}
.ms-panel{position:absolute;z-index:20;inset-inline:0;top:calc(100% + 6px);max-height:300px;overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid var(--line-light);border-radius:12px;box-shadow:0 14px 40px rgba(10,10,15,.14);padding:6px;}
.ms-panel[hidden]{display:none;}
.ms-opt{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:8px;font-size:14.5px;line-height:1.4;cursor:pointer;}
.ms-opt:hover{background:var(--paper);}
.ms-opt input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--teal);cursor:pointer;}
.ms-opt input:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.ms-opt:has(input:disabled){opacity:.45;cursor:not-allowed;}
.t-field.invalid .ms-btn{border-color:var(--err);}
.tna-saved{color:var(--teal);font-weight:600;}

.t-error{display:none;color:var(--err);font-size:13px;margin-top:7px;font-weight:500;}
.t-field.invalid .t-error{display:block;}
.t-field.invalid input,.t-field.invalid select,.t-field.invalid textarea{border-color:var(--err);}
.t-warn{color:#8a5a00;background:#FFF6E0;border-radius:8px;padding:7px 10px;font-size:13px;margin-top:8px;}

.tna-status{margin-top:8px;font-size:14px;color:var(--err);font-weight:500;}
.tna-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:30px;border-top:1px solid var(--line-light);padding-top:22px;}
.tna-privacy{flex:1 1 280px;max-width:560px;font-size:12.5px;line-height:1.55;color:var(--muted-light);}
.t-btn{font:inherit;font-weight:600;font-size:15px;border-radius:999px;padding:13px 26px;cursor:pointer;border:1px solid transparent;transition:transform .2s var(--ease), opacity .2s, border-color .2s;}
.t-btn:hover{transform:translateY(-1px);}
.t-btn[disabled]{opacity:.6;cursor:wait;transform:none;}
.t-btn-primary{background:var(--ink);color:#fff;margin-inline-start:auto;}
.t-btn-back{background:none;border-color:var(--line-light);color:var(--ink);}
.t-btn-back:hover{border-color:var(--ink);}

/* thank-you panel */
.tna-done{outline:none;}
.tna-done h3{font-size:24px;font-weight:700;margin-bottom:10px;}
.snap-contact{font-weight:600;margin-bottom:6px;}

.wa-btn{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px;padding:14px 20px;border-radius:14px;background:#128C4B;color:#fff;font-weight:600;font-size:15px;transition:background .2s, transform .2s var(--ease);}
.wa-btn:hover,.wa-btn:focus-visible{background:#0e7a40;transform:translateY(-1px);}
.wa-btn svg{width:20px;height:20px;flex:none;}
.wa-num{font-family:var(--f-mono);font-size:13px;opacity:.9;}

/* ---------- footer ---------- */
.ct-footer{background:var(--ink);color:#fff;padding:56px 0 28px;}
.foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid var(--line-dark);}
.foot-brand img{height:28px;width:auto;}
.foot-imfnd{margin-top:14px;color:var(--muted-dark);font-size:14px;}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;align-items:center;}
.foot-links a{color:var(--muted-dark);font-size:14px;}
.foot-links a:hover,.foot-links a:focus-visible{color:#fff;}
.foot-bottom{padding-top:20px;font-size:12.5px;color:var(--muted-dark);}

@media (max-width:520px){.wrap{padding:0 16px;}}

/* =====================================================================================================
   Mobile-first layer: overrides the rules above where needed. Form styles are untouched.
   "Phone" layouts: max-width 767px.
   ===================================================================================================== */

/* ---------- page: sticky header + anchors ---------- */
/* overflow-x: clip (unlike hidden) never turns body into a scroll container, so the sticky header always works */
@supports (overflow:clip){body{overflow-x:clip;}}
html{scroll-padding-top:90px;}
#tna,#track-record{scroll-margin-top:0;}
@media (max-width:460px){
  html{scroll-padding-top:66px;}
  .nav{padding:8px 10px;gap:6px;min-height:56px;}
  .logo img{height:16px;}
  .nav-cta{gap:6px;}
  .nav-cta > a.btn{display:inline-flex;padding:9px 11px;font-size:13px;}
  .lang-btn{padding:7px 9px;font-size:10px;gap:5px;}
  .burger{width:36px;height:36px;}
  .mobile-nav a.mobile-nav-cta{display:none;}
}

/* ---------- hero ---------- */
.lockup-pills{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:10px;margin-top:30px;}
.lockup-pills .lk-pill{height:42px;padding:0 18px;}
.lockup-pills .lk-oli{height:22px;width:auto;}
.lockup-pills .lk-imfnd{height:20px;width:auto;}
.lockup-pills .lk-x{border:0;padding:0;height:auto;font-size:18px;color:#fff;}
.tna-banner .lockup-pills{margin-top:0;}
@media (max-width:767px){
  .hero{padding:26px 0 40px;}
  .hero .wrap{padding:0 16px;}
  .back-link{margin-bottom:18px;}
  .hero .eyebrow{margin-bottom:12px;}
  /* English hero eyebrow on one line from 360px (tighter tracking, size scales down to 10px); two balanced lines at 320.
     Arabic keeps its own size and spacing (html[lang="ar"] .eyebrow is more specific) and fits one line at 320. */
  .hero .eyebrow{font-size:clamp(10px,2.95vw,12px);letter-spacing:.06em;}
  .hero .eyebrow > span:not(.tri){text-wrap:balance;}
  .hero h1{font-size:clamp(22px,5.9vw,28px);line-height:1.1;letter-spacing:-0.015em;text-wrap:balance;}
  html[lang="ar"] .hero h1{letter-spacing:0;text-wrap:balance;font-size:clamp(24px,6.6vw,30px);line-height:1.3;}
  /* phones: two chips per row from 360px (10.5px at 374px, scaling with the width) */
  .hero-pills{gap:0 5px;margin-top:16px;margin-block-end:-6px;}
  .hero-pills li{margin-block-end:6px;padding:6px 8px;font-size:clamp(9.5px,2.81vw,12.5px);line-height:1.3;}
  /* the Arabic chips run ~8% wider than the English ones: a little less padding and size keeps two per row from 360px */
  html[lang="ar"] .hero-pills li{padding-inline:6px;font-size:clamp(9.5px,2.72vw,12.5px);}
  .hero-cities{margin-top:12px;font-size:11.5px;letter-spacing:.06em;text-wrap:balance;}
  html[lang="ar"] .hero-cities{font-size:13px;letter-spacing:0;}
  .lockup-pills{margin-top:16px;gap:8px;}
  .lockup-pills .lk-pill{height:34px;padding:0 13px;}
  .lockup-pills .lk-oli{height:18px;}
  .lockup-pills .lk-imfnd{height:16px;}
  .lockup-pills .lk-x{font-size:15px;}
  /* the two hero buttons side by side, equal height */
  .hero .hero-ctas{margin-top:20px;gap:8px;flex-wrap:nowrap;}
  .hero .hero-ctas .btn{flex:0 1 auto;min-width:0;justify-content:center;padding:12px;font-size:13.5px;}
}

/* ---------- "the question every board asks" ---------- */
@media (max-width:767px){
  .sec.question{padding:34px 0 30px;}
  .question .eyebrow{margin-bottom:10px;}
  .question .q-quote{font-size:clamp(20px,5.3vw,22px);line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;}
  .question .lead{margin-top:10px;font-size:clamp(13.5px,3.6vw,16px);line-height:1.5;letter-spacing:-0.01em;text-wrap:balance;max-width:none;}
  .question .q-today{margin-top:8px;font-size:clamp(13px,3.45vw,15px);letter-spacing:-0.01em;}
  html[lang="ar"] .question .q-quote,html[lang="ar"] .question .lead,html[lang="ar"] .question .q-today{letter-spacing:0;}
}

/* ---------- slider component (one block for every slider on the page) ---------- */
.slider{position:relative;}
.slider:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:14px;}
.sl-track{display:flex;gap:var(--sl-gap,16px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;margin:0;padding:2px 0 4px;}
.sl-track::-webkit-scrollbar{display:none;}
.sl-track > *{flex:0 0 calc((100% - (var(--per,1) - 1) * var(--sl-gap,16px)) / var(--per,1));min-width:0;scroll-snap-align:start;}
.sl-track.is-drag,.sl-track.is-anim{scroll-snap-type:none;scroll-behavior:auto;}
.sl-track.is-drag{user-select:none;}
.sl-track img{-webkit-user-drag:none;}
@media (prefers-reduced-motion:reduce){.sl-track{scroll-behavior:auto;}}
.sl-ctl{display:flex;align-items:center;gap:8px;margin-top:12px;}
.slider:not(.sl-on) .sl-ctl{display:none;}
.sl-dots{flex:1;display:flex;justify-content:center;flex-wrap:wrap;gap:0;min-width:0;}
.sl-dot{width:20px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;}
.sl-dot::before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(10,10,15,.22);transition:width .25s var(--ease), background .25s;}
.sl-dot[aria-current="true"]::before{width:20px;background:var(--teal);}
.sl-btn{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-light);background:#fff;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:border-color .2s;}
.sl-btn:hover{border-color:var(--ink);}
.sl-btn:focus-visible,.sl-dot:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.sl-prev .sl-ico,.sl-next .sl-ico{width:9px;height:9px;border-top:2px solid currentColor;border-left:2px solid currentColor;}
.sl-prev .sl-ico{transform:translateX(2px) rotate(-45deg);}
.sl-next .sl-ico{transform:translateX(-2px) rotate(135deg);}
html[dir="rtl"] .sl-prev .sl-ico{transform:translateX(-2px) rotate(135deg);}
html[dir="rtl"] .sl-next .sl-ico{transform:translateX(2px) rotate(-45deg);}
.sl-play{width:34px;height:34px;}
.sl-play .sl-ico{width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor;}
.sl-play.is-paused .sl-ico{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;margin-left:3px;}

/* ---------- "Four domains", "Who we train" and "Engagement tracks": plain lists of rectangles (no slider). Phones: one
   compact card per row, the number on the title line and the text across the full card width. ---------- */
@media (max-width:767px){
  #domains.sec,#audiences.sec,#tracks.sec{padding:30px 0 24px;}
  #domains .sec-head,#audiences .sec-head,#tracks .sec-head{margin-bottom:14px;}
  #domains .eyebrow,#audiences .eyebrow,#tracks .eyebrow{margin-bottom:10px;}
  #domTitle,#trkTitle{font-size:clamp(19px,5.6vw,28px);line-height:1.2;text-wrap:balance;}
  #audTitle{font-size:clamp(19px,7.4vw,28px);line-height:1.2;text-wrap:balance;}
  .aud-card .aud-out{padding-top:4px;font-size:13.5px;}
  #domains .lead{margin-top:8px;font-size:clamp(13px,3.33vw,16px);line-height:1.5;letter-spacing:-0.01em;text-wrap:balance;max-width:none;}
  html[lang="ar"] #domains .lead{letter-spacing:0;}
  #tracks .lead{margin-top:8px;font-size:14px;line-height:1.45;}
  .dom-grid,.trk-grid{gap:6px;}
  .dom-card{display:flow-root;padding:10px 12px;}
  .dom-n{float:left;width:20px;height:20px;margin:0 8px 0 0;font-size:10.5px;border-radius:6px;}
  html[dir="rtl"] .dom-n{float:right;margin:0 0 0 8px;}
  .dom-card h3,.trk-card h3{font-size:16px;line-height:1.25;margin-bottom:1px;}
  .dom-card p,.trk-card p{font-size:13.5px;line-height:1.4;}
  .trk-card{padding:10px 12px;}
  .trk-card .trk-tags{padding-top:4px;}
}

/* ---------- process: ascending staircase in three phases ---------- */
.stairs{--p1:#06AEA3;--p1d:#057A72;--p1t:rgba(6,174,163,.16);
        --p2:#2F7DD6;--p2d:#1F5FAE;--p2t:rgba(47,125,214,.15);
        --p3:#5B49D3;--p3d:#4B3BC0;--p3t:rgba(91,73,211,.16);
        --top:#4B3BC0;list-style:none;margin:0;padding:0;}
.st-p1{--pc:var(--p1);--pd:var(--p1d);--pt:var(--p1t);}
.st-p2{--pc:var(--p2);--pd:var(--p2d);--pt:var(--p2t);}
.st-p3{--pc:var(--p3);--pd:var(--p3d);--pt:var(--p3t);}
.st-n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--pd);color:#fff;font-family:var(--f-mono);font-weight:700;font-size:13px;position:relative;z-index:1;}
.st-label{font-weight:600;font-size:14px;line-height:1.3;color:var(--ink);position:relative;z-index:1;}
.st-phase{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pd);}
html[lang="ar"] .st-phase{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:12.5px;}
.st-bar{display:block;background:var(--pt);}
.st-top .st-bar{background:var(--top);}
.st-top .st-n{background:#fff;color:var(--top);box-shadow:0 0 0 2px var(--top),0 0 0 5px rgba(91,73,211,.28);}
.st-glyph{width:16px;height:16px;color:#fff;}
/* desktop / tablet: six rising columns, coloured baseline + phase name under each pair */
@media (min-width:768px){
  .stairs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px;align-items:end;padding-bottom:46px;}
  .st{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;}
  .st-label{order:1;font-size:14.5px;}
  .st-n{order:2;}
  .st-bar{order:3;width:100%;height:var(--hd);border-radius:10px 10px 0 0;transform-origin:bottom;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;}
  .st::after{content:"";position:absolute;bottom:-8px;inset-inline-start:0;inset-inline-end:0;height:4px;border-radius:2px;background:var(--pc);}
  .st:nth-child(odd)::after{inset-inline-end:-12px;}
  .st-phase{position:absolute;top:calc(100% + 16px);inset-inline-start:0;width:calc(200% + 12px);text-align:center;}
  .st:nth-child(1){--hd:40px;} .st:nth-child(2){--hd:64px;} .st:nth-child(3){--hd:88px;}
  .st:nth-child(4){--hd:112px;} .st:nth-child(5){--hd:136px;} .st:nth-child(6){--hd:164px;}
  .st-top .st-label{color:var(--top);}
}
/* phones: six rows, bar length grows from ~40% (step 1) to full width (step 6); side band + tag = phase */
@media (max-width:767px){
  .stairs{display:flex;flex-direction:column;gap:4px;}
  .st{position:relative;isolation:isolate;display:flex;align-items:center;gap:10px;min-height:42px;padding:5px 10px 5px 10px;border-inline-start:4px solid var(--pc);}
  .st:nth-child(3),.st:nth-child(5){margin-top:6px;}
  .st-bar{position:absolute;z-index:-1;inset-block:0;inset-inline-start:0;width:var(--w);border-start-end-radius:10px;border-end-end-radius:10px;transform-origin:left center;}
  html[dir="rtl"] .st-bar{transform-origin:right center;}
  .st-n{width:26px;height:26px;font-size:12px;}
  .st-label{font-size:13.5px;flex:1 1 auto;min-width:0;}
  .st-phase{order:3;flex:none;margin-inline-start:auto;font-size:10px;padding:3px 7px;border-radius:999px;background:#fff;border:1px solid var(--pc);}
  html[lang="ar"] .st-phase{font-size:11.5px;}
  .st:nth-child(1){--w:40%;} .st:nth-child(2){--w:52%;} .st:nth-child(3){--w:64%;}
  .st:nth-child(4){--w:76%;} .st:nth-child(5){--w:88%;} .st:nth-child(6){--w:100%;}
  .st-top .st-label{color:#fff;}
  .st-top .st-bar{display:flex;align-items:center;justify-content:flex-end;padding-inline-end:12px;}
  #how.sec{padding:28px 0 22px;}
  #how .sec-head{margin-bottom:14px;}
  #how .eyebrow{margin-bottom:8px;}
  #howTitle{font-size:22px;line-height:1.2;text-wrap:balance;}
  #how .lead{margin-top:6px;font-size:14px;line-height:1.45;text-wrap:balance;}
  .how-notes{margin-top:12px;gap:8px;}
  .how-note{padding:12px 14px;}
  .how-note h3{margin-bottom:4px;}
  .how-note p{font-size:14px;line-height:1.5;}
}
/* motion: bars grow once when the section comes into view (script.js adds .st-anim / .st-in; none with reduced motion) */
.stairs.st-anim .st-bar{transform:scaleX(0);}
@media (min-width:768px){.stairs.st-anim .st-bar{transform:scaleY(0);}}
.stairs.st-anim.st-in .st-bar{transform:none;transition:transform .7s var(--ease);}
.stairs.st-anim.st-in .st:nth-child(2) .st-bar{transition-delay:.06s;} .stairs.st-anim.st-in .st:nth-child(3) .st-bar{transition-delay:.12s;}
.stairs.st-anim.st-in .st:nth-child(4) .st-bar{transition-delay:.18s;} .stairs.st-anim.st-in .st:nth-child(5) .st-bar{transition-delay:.24s;}
.stairs.st-anim.st-in .st:nth-child(6) .st-bar{transition-delay:.30s;}

/* ---------- track record: clients slider, client logos, then the numbers (2x2 on phones, one row of four on desktop) ---------- */
#track-record .nums{margin:40px 0 0;}
/* Section backgrounds alternate paper / grey down the page: hero, logo strip (grey), question, domains (grey), audiences,
   how (grey), tracks, formats (grey), track record, #trusted (grey), mentors, so no divider lines are needed. */
#how .how-note{background:#fff;}
@media (max-width:440px){.nums{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:760px){
  #track-record .nums{margin-top:24px;border-radius:14px;}
  .nums li{padding:16px 14px;}
  .nums .num{font-size:28px;margin-bottom:6px;}
  .nums .lbl{font-size:12.5px;line-height:1.45;display:block;}
}
/* counting copy of each number (script.js): same gradient text, width of the final value reserved */
.num-anim{display:inline-block;font-variant-numeric:tabular-nums;background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.sl-cases{--per:1;--sl-gap:16px;}
.sl-cases .case{display:flex;flex-direction:column;}
.sl-cases .case-photos{margin-top:auto;}
.sl-cases .case-photos.c2{grid-template-columns:repeat(2,minmax(0,1fr));}
.sl-cases .case-photos img,.sl-cases .case-photos.tall img{aspect-ratio:4 / 3;object-fit:cover;object-position:center;}
.sl-cases .case-photos.c1{grid-template-columns:minmax(0,1fr);}
.sl-cases .case-photos.c1 img{aspect-ratio:2 / 1;}
@media (min-width:900px){
  .sl-cases .case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:28px;align-items:center;padding:28px;}
  .sl-cases .case-head{flex-direction:column;align-items:flex-start;margin:0;}
  .sl-cases .case-photos{margin:0;}
}
@media (max-width:760px){
  .sl-cases .case{padding:14px;}
  .sl-cases .case-head{flex-direction:row;align-items:flex-start;gap:12px;margin-bottom:12px;}
  .sl-cases .case-logo{width:76px;height:52px;padding:6px;border-radius:10px;}
  .sl-cases .case-logo img{max-height:40px;}
  .sl-cases .case-head h3{font-size:16px;margin-bottom:4px;}
  .sl-cases .case-head p{font-size:13.5px;line-height:1.5;}
  .sl-cases .case-photos{gap:8px;}
  .sl-cases .case-photos figcaption{font-size:11px;padding:3px 8px;inset-inline-start:6px;bottom:6px;}
}
/* ---------- photo boxes: the picture element owns the shape, the image only fills it ----------
   The img used to get its box from height:100% + aspect-ratio inside a stretched grid item, so the row height came
   back from the image's own size (circular). An engine that sizes that image differently made the row, and both photos,
   tall. Each picture is now a fixed-ratio box (classic padding ratio: height 0 + padding-bottom as a % of the width, so
   it does not rely on aspect-ratio support) and the image covers it out of flow, so the box never depends on the image.
   top/left rather than inset: WebKit misplaces an over-constrained absolute box by a sub-pixel in RTL.
   The width/height attributes stay on the img (CLS). */
.case-photos picture{position:relative;height:0;padding-bottom:75%;min-width:0;overflow:hidden;}
.case-photos picture img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;}
.case-photos.tall picture{padding-bottom:133.33%;}
.case-photos.c1 picture{height:auto;padding-bottom:0;}
.case-photos.c1 picture img{position:static;height:auto;}
@media (max-width:760px){.case-photos.c3 > picture:last-child:nth-child(odd),.case-photos.c3 > :last-child:nth-child(odd) picture{padding-bottom:56.25%;}}
.sl-cases .case-photos.tall picture{padding-bottom:75%;}
.sl-cases .case-photos.c1 picture{height:0;padding-bottom:50%;}
.sl-cases .case-photos.c1 picture img{position:absolute;height:100%;}
.mentor picture{position:relative;height:0;padding-bottom:100%;min-width:0;}
.mentor picture img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;}

/* ---------- mentors: continuously moving row (script.js); 3 compact cards in view on phones, 4 on desktop ---------- */
.ticker{position:relative;}
.tk-view{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;}
.tk-view::-webkit-scrollbar{display:none;}
.tk-track{display:flex;gap:var(--sl-gap,10px);margin:0;padding:2px 0 4px;}
.tk-track > *{flex:0 0 calc((100% - (var(--per,3) - 1) * var(--sl-gap,10px)) / var(--per,3));min-width:0;scroll-snap-align:start;}
.tk-track img{-webkit-user-drag:none;}
.tk-on .tk-view{overflow:hidden;scroll-snap-type:none;touch-action:pan-y;cursor:grab;}
.tk-on.tk-drag .tk-view{cursor:grabbing;user-select:none;}
.tk-on .tk-track{will-change:transform;}
.tk-ctl{justify-content:flex-end;}
.sl-mentors{--per:3;--sl-gap:10px;}
.sl-mentors .mentor-grid{margin-bottom:0;}
.sl-mentors .mentor{padding:8px 8px 12px;border-radius:14px;}
.sl-mentors .mentor picture{border-radius:10px;background:#fff;}
.sl-mentors .m-name{font-size:13.5px;margin-top:8px;padding:0 2px;}
.sl-mentors .m-role{font-size:11.5px;line-height:1.45;margin-top:3px;padding:0 2px;}
/* affiliations: one line with ellipsis (full text in title), after the existing description */
.m-aff{margin-top:3px;padding:0 2px;font-size:11px;line-height:1.45;color:#057A72;}
/* role and affiliation wrap to as many lines as they need (never cut); the cards stay equal height (flex stretch) */
.sl-mentors .m-role,.m-aff{overflow-wrap:break-word;}
/* very narrow phones: 2.5 cards in view so the longest names fit without breaking inside a word */
@media (max-width:359px){.sl-mentors{--per:2.5;}}
@media (min-width:600px){
  .sl-mentors{--sl-gap:14px;}
  .sl-mentors .mentor{padding:10px 10px 14px;}
  .sl-mentors .m-name{font-size:15px;}
  .sl-mentors .m-role{font-size:12.5px;}
  .m-aff{font-size:12px;}
}
@media (min-width:900px){
  .sl-mentors{--per:4;--sl-gap:18px;}
  .sl-mentors .m-name{font-size:16px;}
  .sl-mentors .m-role{font-size:13.5px;}
  .m-aff{font-size:12.5px;}
}
/* LinkedIn: photo + name are one link when a valid URL is set (script.js); otherwise no pointer */
.m-link{display:block;color:inherit;border-radius:10px;cursor:pointer;}
.m-link:hover .m-name{color:var(--teal);}
.m-link:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

/* ---------- phones: less vertical scrolling elsewhere (spacing only; no content removed) ---------- */
@media (max-width:760px){
  .sec{padding:52px 0;}
  .sec-head{margin-bottom:24px;}
  .eyebrow{margin-bottom:14px;}
  .lead{margin-top:12px;}
  .mentors h2{margin-bottom:20px;}
  .cta-steps{margin-top:18px;}
}
@media (max-width:520px){.sec{padding:44px 0;}}
/* formats: two columns on phones */
@media (max-width:560px){
  .fmt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .fmt-card{padding:16px 14px;border-radius:14px;}
  .fmt-card h3{font-size:15px;margin-bottom:6px;}
  .fmt-card p{font-size:13px;line-height:1.5;}
  .fmt-clients{font-size:10.5px;margin-top:10px;padding-top:8px;}
}