/* Layout: cinematic single page over a fixed WebGL stage (gold particle signet that morphs per section).
   Case studies are full-width chapters with large device frames; websites scroll inside their frames.
   Single committed look: obsidian black, champagne gold, ivory. Logical properties keep Arabic (RTL) mirrored. */
:root {
  --bg: #08080a;
  --bg-2: #0e0e11;
  --bg-3: #15151a;
  --line: rgba(233, 211, 166, 0.11);
  --line-strong: rgba(233, 211, 166, 0.26);
  --ivory: #f4efe6;
  --sand: #b9b0a1;
  --stone: #7f786d;
  --gold: #d6b47a;
  --gold-hi: #f0d9a8;
  --gold-deep: #9c7a3f;
  --gold-soft: rgba(214, 180, 122, 0.1);
  --live: #62c99d;
  --glass: rgba(14, 14, 17, 0.72);
  --gold-grad: linear-gradient(110deg, #9c7a3f 0%, #f0d9a8 28%, #d6b47a 46%, #f8ecd0 62%, #c9a35a 80%, #9c7a3f 100%);

  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-ar-display: "Thmanyah Serif Display", Tahoma, serif;
  --font-ar: "Thmanyah Sans", Tahoma, sans-serif;

  --gutter: 24px;
  --max: 1280px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Arabic waits for its typeface (the 3D scene keeps running behind) */
.ar-wait body > :not(#scene) { opacity: 0 !important; }
html.ar-fade body > :not(#scene) { transition: opacity 0.4s ease; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--bg); color: var(--ivory);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 80; background: var(--bg); }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.04; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 1.5px solid var(--gold-hi); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--bg); }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* Arabic */
html[lang="ar"] body { font-family: var(--font-ar); line-height: 1.95; font-size: 1.03rem; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .num-display, html[lang="ar"] .kpi strong, html[lang="ar"] .stat strong, html[lang="ar"] .statement {
  font-family: var(--font-ar-display); letter-spacing: 0; line-height: 1.35;
}
html[lang="ar"] .kicker, html[lang="ar"] .eyebrow, html[lang="ar"] .chapter-meta, html[lang="ar"] .pill, html[lang="ar"] .tab,
html[lang="ar"] .site-kind, html[lang="ar"] .facts dt, html[lang="ar"] .contact-list small, html[lang="ar"] .footer-inner,
html[lang="ar"] .badge, html[lang="ar"] .btn, html[lang="ar"] .nav li > a, html[lang="ar"] .when {
  font-family: var(--font-ar); letter-spacing: 0; text-transform: none;
}
html[lang="ar"] em { font-style: normal; }
/* Thmanyah declares a 0.25em descent but the final yeh dots reach 0.52em: give tight-leading Arabic text room below
   (cancelled by an equal negative margin) so the dots are never clipped when a heading is drawn on its own layer */
html[lang="ar"] :is(h1, h2, h3, h4, .statement, .kpi strong, .stat strong, .cert-body h4) { padding-bottom: 0.2em; margin-bottom: -0.2em; }
html[lang="ar"] .gold-text { padding-bottom: 0.2em; }
html[lang="ar"] .chips li, html[lang="ar"] .device-url { font-family: var(--font-mono); }

.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--bg); padding: 10px 14px; border-radius: 6px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ---------- Stage ---------- */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; background: var(--bg); }
.vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(4, 4, 6, 0.75) 100%), linear-gradient(180deg, rgba(8, 8, 10, 0) 70%, rgba(8, 8, 10, 0.5)); }
.no-webgl #scene { background: radial-gradient(60% 50% at 75% 25%, rgba(214, 180, 122, 0.18), transparent 70%), var(--bg); }
.progress { position: fixed; inset-inline: 0; top: env(safe-area-inset-top, 0px); height: 2px; z-index: 90; pointer-events: none; background: var(--gold-grad); transform-origin: left center; transform: scaleX(var(--p, 0)); }
html[dir="rtl"] .progress { transform-origin: right center; }
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.section { padding-block: clamp(80px, 11vw, 160px); }
.kicker, .eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold-grad); }
.section-head { display: grid; gap: 22px; max-width: 900px; margin-bottom: clamp(48px, 6vw, 84px); }
.section-head h2 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.8rem); }
.section-head p:not(.eyebrow) { color: var(--sand); font-size: 1.125rem; max-width: 62ch; }
.gold-text { background: var(--gold-grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 9s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
em { font-style: italic; color: var(--gold-hi); }

/* reveal on scroll (only once JS confirms motion is welcome) */
.motion [data-reveal] { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; transition: background-color 0.4s ease, border-color 0.4s ease; border-bottom: 1px solid transparent; }
.site-header.is-scrolled, .nav-open .site-header { background: rgba(8, 8, 10, 0.94); border-bottom-color: var(--line); }
.header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; justify-self: start; }
.header-inner .header-actions { justify-self: end; }
.brand img { width: 40px; height: 40px; }
.brand-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: 0.01em; }
html[lang="ar"] .brand-name { font-family: var(--font-ar-display); font-size: 1.15rem; }
.nav ul { display: flex; align-items: center; gap: 4px; }
.nav li > a { display: block; padding: 8px 12px; text-decoration: none; color: var(--sand); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.25s ease; position: relative; }
.nav li > a::after { content: ""; position: absolute; inset-inline: 12px; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform 0.35s var(--ease); }
.nav li > a:hover, .nav li > a[aria-current="true"] { color: var(--ivory); }
.nav li > a:hover::after, .nav li > a[aria-current="true"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-foot, .dock { display: none; }
.m-stage { display: none; }
.lang-toggle { min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; font-weight: 700; font-size: 0.875rem; transition: border-color 0.25s, background-color 0.25s; }
.lang-toggle:hover { border-color: var(--gold); background: var(--gold-soft); }
.lang-toggle [lang="ar"] { font-family: var(--font-ar); }
.lang-toggle [lang="en"] { font-family: var(--font-body); }
.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; place-items: center; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 16px; height: 1.5px; background: var(--ivory); position: relative; transition: transform 0.3s ease; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu-toggle span::before { top: -5px; }
.menu-toggle span::after { top: 5px; }
.nav-open .menu-toggle span { background: transparent; }
.nav-open .menu-toggle span::before { transform: translateY(5px) rotate(45deg); }
.nav-open .menu-toggle span::after { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; transition: transform 0.3s var(--ease), background-color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.btn:hover { border-color: var(--gold); background: var(--gold-soft); transform: translateY(-2px); }
.btn-gold { background: var(--gold-grad); background-size: 200% 100%; border: 0; color: #120f08; box-shadow: 0 16px 40px -18px rgba(214, 180, 122, 0.7); }
.btn-gold:hover { background-position: 100% 0; box-shadow: 0 20px 50px -18px rgba(214, 180, 122, 0.9); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 0.75rem; }
.btn svg { width: 16px; height: 16px; flex: none; }
html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-hi); text-decoration: none; font-weight: 700; font-size: 0.875rem; border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; transition: border-color 0.3s; }
.text-link:hover { border-color: var(--gold); }
.text-link.plain { background: none; border-width: 0 0 1px; border-style: solid; padding: 0 0 3px; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.875rem; }
.text-link svg { width: 14px; height: 14px; }

/* ---------- Hero ---------- */
.hero { min-height: calc(100svh - 76px); display: grid; align-content: center; padding-block: clamp(40px, 6vw, 80px) clamp(36px, 5vw, 60px); }
.hero-copy { max-width: 760px; display: grid; gap: 26px; }
.hero-name { font-size: clamp(3.8rem, 1.6rem + 8vw, 9rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.02em; }
html[lang="ar"] .hero-name { line-height: 1.15; font-weight: 700; }
.hero-alt { font-family: var(--font-ar); color: var(--sand); font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.45rem); margin-top: -10px; justify-self: start; }
.hero-alt:lang(en) { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); }
.statement { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.1rem); line-height: 1.15; color: var(--ivory); max-width: 22ch; }
html[lang="ar"] .statement { font-weight: 500; max-width: 24ch; }
.hero-sub { color: var(--sand); font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.18rem); max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.stats { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stat { padding: 22px 20px 0 0; padding-inline: 0 20px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.stat + .stat { padding-inline-start: 22px; border-inline-start: 1px solid var(--line); }
.stat strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); line-height: 1; }
.stat span { color: var(--sand); font-size: 0.875rem; line-height: 1.45; }

/* ---------- Ticker ---------- */
/* Always runs right to left in both languages; the track holds two identical halves, so moving it by -50% loops with no seam */
.ticker { --lh: clamp(26px, 1.2rem + 1vw, 40px); direction: ltr; border-block: 1px solid var(--line); background: rgba(8, 8, 10, 0.82); overflow: hidden; padding-block: 24px; }
.ticker-track { display: flex; width: max-content; animation: tick var(--dur, 60s) linear infinite; }
.ticker-set { display: flex; align-items: center; flex: none; }
.client { display: inline-flex; align-items: center; gap: 14px; height: calc(var(--lh) * 1.3); white-space: nowrap; flex: none; }
.client::after { content: ""; flex: none; width: 6px; height: 6px; margin-inline: clamp(34px, 4vw, 62px); background: var(--gold); transform: rotate(45deg); opacity: 0.55; }
.client-logo { display: block; flex: none; height: calc(var(--lh) * var(--s, 1)); width: calc(var(--lh) * var(--w, 3)); background: center / contain no-repeat; }
.client-name { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); color: var(--sand); }
html[lang="ar"] .client { direction: rtl; } /* logo on the right, name to its left */
html[lang="ar"] .client-name { font-family: var(--font-ar-display); font-style: normal; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.portrait { margin: 0; position: relative; max-width: 520px; }
.portrait::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--line-strong); border-radius: 4px; }
html[dir="rtl"] .portrait::before { inset: 18px 18px -18px -18px; }
.portrait-photo { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; border-radius: 4px; filter: saturate(0.92) contrast(1.04); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9); }
.about-copy { display: grid; gap: 24px; min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: rgba(12, 12, 15, 0.9); padding: clamp(22px, 3vw, 40px); }
.about-copy h2 { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); }
.about-copy p { color: var(--sand); max-width: 62ch; }
.about-copy p strong { color: var(--ivory); font-weight: 600; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 0; border-top: 1px solid var(--line); }
.facts div { padding: 18px 0; padding-inline-end: 18px; border-bottom: 1px solid var(--line); min-width: 0; }
.facts div:nth-child(even) { padding-inline-start: 18px; border-inline-start: 1px solid var(--line); }
.facts dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.facts dd { margin: 0; color: var(--ivory); font-size: 0.95rem; }

/* ---------- Work intro ---------- */
.work-intro { padding-bottom: clamp(24px, 4vw, 40px); }
.work-intro h2 { font-size: clamp(3rem, 1.6rem + 5vw, 6.4rem); max-width: 14ch; }
.work-intro .big-num { display: block; font-size: 1.6em; line-height: 0.9; }
.note { display: flex; gap: 12px; align-items: flex-start; color: var(--sand); max-width: 70ch; }
.note svg { width: 18px; height: 18px; flex: none; margin-top: 5px; color: var(--gold); }

/* ---------- Case study chapters ---------- */
.chapter { display: grid; gap: clamp(32px, 4.5vw, 60px); padding-block: clamp(72px, 9vw, 140px); border-top: 1px solid var(--line); }
.chapter-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; }
.chapter-titles { display: grid; gap: 16px; min-width: 0; }
.chapter-details { display: grid; gap: 22px; align-content: start; min-width: 0; }
/* Case study in five steps: challenge, what I built, stack, my role, result */
.case { display: grid; border: 1px solid var(--line); border-radius: 16px; padding: 2px 22px; background: rgba(12, 12, 15, 0.9); }
.case-step:last-child { border-bottom: 0; }
.case-step { display: grid; gap: 12px; align-content: start; padding-block: 22px; border-bottom: 1px solid var(--line); min-width: 0; }
.case-k { display: flex; align-items: center; gap: 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.case-k b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-hi); display: inline-flex; align-items: center; gap: 12px; }
.case-k b::after { content: ""; width: 22px; height: 1px; background: var(--line-strong); }
html[lang="ar"] .case-k { font-family: var(--font-ar); font-size: 0.86rem; letter-spacing: 0; text-transform: none; }
.case-step > p { color: var(--sand); }
.case-step > .case-lead { color: var(--ivory); font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem); }
.case .kpis { grid-template-columns: minmax(0, 1fr); border: 0; margin-top: 2px; }
.case .kpi { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.case .kpi + .kpi { padding-inline-start: 0; border-inline-start: 0; }
@media (min-width: 720px) and (max-width: 1099px) {
  .case { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .case-step:last-child { grid-column: 1 / -1; }
}
/* Short version for website cards and side projects */
.mini-case { display: grid; gap: 0; margin: 2px 0; }
.mini-case div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding-block: 10px; border-top: 1px solid var(--line); }
.mini-case dt { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); padding-top: 5px; }
.mini-case dd { margin: 0; color: var(--sand); font-size: 0.95rem; line-height: 1.6; }
html[lang="ar"] .mini-case dt { font-family: var(--font-ar); font-size: 0.8rem; letter-spacing: 0; text-transform: none; padding-top: 3px; }
html[lang="ar"] .mini-case dd { line-height: 1.85; }
/* "Read the details" toggle: native <details>, so it works with the keyboard and without JS */
.more { border-top: 1px solid var(--line); }
.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 14px 0 2px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hi); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s var(--ease); }
.more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.more > summary:hover { color: var(--ivory); }
.more .more-close, .more[open] .more-open { display: none; }
.more[open] .more-close { display: inline; }
html[lang="ar"] .more > summary { font-family: var(--font-ar); font-size: 0.9rem; letter-spacing: 0; text-transform: none; }
.more-body { display: grid; gap: 18px; padding-top: 14px; }
.more-item { display: grid; gap: 8px; }
.more-item > p:not(.case-k) { color: var(--sand); }
.chapter-details > .chips { margin-top: -2px; }
/* On wide screens the case study sits beside its screenshots, which stay in view while you read */
@media (min-width: 1100px) {
  .chapter { grid-template-columns: minmax(0, 4.7fr) minmax(0, 7.3fr); grid-template-areas: "head stage" "details stage"; gap: 26px clamp(44px, 5vw, 84px); align-items: start; }
  .chapter.flip { grid-template-columns: minmax(0, 7.3fr) minmax(0, 4.7fr); grid-template-areas: "stage head" "stage details"; }
  .chapter-head { grid-area: head; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .chapter-details { grid-area: details; grid-template-columns: minmax(0, 1fr); }
  .chapter .stage { grid-area: stage; position: sticky; top: 112px; align-self: start; }
  .chapter h3 { font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); }
}
.chapter-num { display: flex; align-items: center; gap: 14px; color: var(--gold); flex-wrap: wrap; }
.chapter-num b { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.08em; }
.chapter-num .rule { height: 1px; width: 70px; background: var(--line-strong); }
.chapter h3 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem); }
.chapter-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.kpi { padding: 18px 0; padding-inline-end: 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.kpi + .kpi { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
.kpi strong { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.15rem); line-height: 1.05; }
.kpi span { font-size: 0.8125rem; color: var(--sand); line-height: 1.45; }
.highlights { display: grid; gap: 12px; color: var(--sand); }
.highlights li { position: relative; padding-inline-start: 22px; }
.highlights li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(214, 180, 122, 0.7); }
html[lang="ar"] .highlights li::before { top: 0.92em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-family: var(--font-mono); font-size: 0.72rem; color: var(--sand); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); white-space: nowrap; direction: ltr; }
.chapter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-internal { color: var(--gold-hi); background: var(--gold-soft); }
.pill-live { color: var(--live); background: rgba(98, 201, 157, 0.08); }
.pill-oss { color: var(--sand); }

.stage { position: relative; min-width: 0; width: 100%; max-width: 1240px; margin-inline: auto; }
.stage-media { position: relative; perspective: 2200px; padding-bottom: 6%; padding-inline-end: 7%; }
.stage::before { content: ""; position: absolute; inset: 10% 8% 0; background: radial-gradient(closest-side, rgba(214, 180, 122, 0.22), transparent 70%); filter: blur(30px); z-index: -1; }
.device { --rx: 0deg; --ry: 0deg; --s: 1; position: relative; border-radius: 14px; background: #121216; border: 1px solid var(--line-strong); overflow: hidden;
  box-shadow: 0 70px 120px -50px rgba(0, 0, 0, 0.95), 0 30px 60px -40px rgba(214, 180, 122, 0.25);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s)); transform-origin: 50% 60%; will-change: transform; }
.device-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: linear-gradient(#1a1a20, #141418); border-bottom: 1px solid var(--line); direction: ltr; }
.device-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a42; }
.device-bar i:nth-child(1) { background: #e0705f; } .device-bar i:nth-child(2) { background: #e3b558; } .device-bar i:nth-child(3) { background: #6cc57b; }
.device-url { margin: 0 auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--stone); padding: 4px 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-hi); border: 1px solid var(--line-strong); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.device-screen { position: relative; aspect-ratio: 16 / 10; background: #050506; overflow: hidden; cursor: zoom-in; display: block; width: 100%; border: 0; padding: 0; }
.device-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.02); transition: opacity 0.7s ease, transform 1.2s var(--ease); }
.device-screen img.on { opacity: 1; transform: none; }
.phone { position: absolute; inset-inline-end: 0; bottom: 0; width: 19%; min-width: 92px; aspect-ratio: 9 / 19.5; border-radius: 26px; border: 6px solid #1b1b21; background: #050506; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--line-strong); transform: translateZ(60px); cursor: zoom-in; padding: 0; }
.phone::before { content: ""; position: absolute; top: 6px; left: 50%; width: 34%; height: 12px; transform: translateX(-50%); background: #1b1b21; border-radius: 999px; z-index: 1; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tab { position: relative; overflow: hidden; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); color: var(--sand); border-radius: 999px; padding: 8px 15px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; transition: color 0.25s, border-color 0.25s, background-color 0.25s; }
.tab:hover { color: var(--ivory); border-color: var(--line-strong); }
.tab[aria-selected="true"] { color: #120f08; background: var(--gold-hi); border-color: var(--gold-hi); }
.tab .bar { position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 0; background: rgba(18, 15, 8, 0.5); }
.tab[aria-selected="true"].timing .bar { width: 100%; transition: width var(--t, 5s) linear; }

/* ---------- Websites ---------- */
.sub-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 38px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sub-head h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.sub-head p { color: var(--stone); font-size: 0.875rem; }
.site-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 44px); }
.site { display: grid; gap: 18px; min-width: 0; }
.site-frame { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); background: #121216; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.95); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.site:hover .site-frame { transform: translateY(-6px); box-shadow: 0 60px 110px -50px rgba(0, 0, 0, 0.95), 0 30px 70px -45px rgba(214, 180, 122, 0.35); }
.site-view { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10.5; min-height: 0; contain: size layout paint; overflow: hidden; border: 0; padding: 0; background: #050506; cursor: zoom-in; }
/* the long screenshot is taken out of the flow: Safari sizes a <button> by its content first and would stretch the frame to the
   full page height; this way the frame's size comes only from its width and aspect-ratio */
.site-view img { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; transform: translateY(0); }
/* down the page, a pause at the footer, back up, a pause at the top: on repeat while the card is in view */
.site.auto .site-view img { animation: site-scroll 18s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
/* the phone beside each site: same loop, slightly offset so the two never move in lockstep */
.site-stage { position: relative; padding-inline-end: 8%; padding-bottom: 8%; }
.site-phone { position: absolute; z-index: 2; inset-inline-end: 0; bottom: 0; width: 22%; min-width: 86px; aspect-ratio: 9 / 19.5; min-height: 0; contain: size layout paint; padding: 0; overflow: hidden; cursor: zoom-in;
  border-radius: 24px; border: 5px solid #1b1b21; background: #050506; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--line-strong); transition: transform 0.6s var(--ease); }
.site-phone::before { content: ""; position: absolute; z-index: 1; top: 5px; left: 50%; width: 34%; height: 10px; transform: translateX(-50%); background: #1b1b21; border-radius: 999px; }
.site-phone img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; max-width: none; }
.site.auto .site-phone img { animation: site-scroll 22s cubic-bezier(0.45, 0, 0.25, 1) -6s infinite; }
.site:hover .site-phone { transform: translateY(-10px); }
@keyframes site-scroll {
  0%, 8% { transform: translateY(0); }
  46%, 56% { transform: translateY(calc(-100% + var(--vh, 300px))); }
  94%, 100% { transform: translateY(0); }
}
.site-view::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(8, 8, 10, 0.55)); pointer-events: none; }
.site-body { display: grid; gap: 10px; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(12, 12, 15, 0.9); }
.site-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site h4 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); }
.site-kind { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.site-links { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-top: 4px; }

/* ---------- Also built ---------- */
.also-head { margin-top: clamp(72px, 9vw, 120px); }
.also { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; padding: clamp(20px, 3vw, 40px); border: 1px solid var(--line-strong); border-radius: 16px; background: rgba(12, 12, 15, 0.9); }
.feature-media { min-width: 0; }
.feature-body { display: grid; gap: 14px; align-content: start; min-width: 0; }
.feature-body h4 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.8rem); }
.feature-lead { color: var(--ivory); }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); background: #000; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.95), 0 30px 70px -50px rgba(214, 180, 122, 0.35); }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; border: 0; padding: 0; cursor: pointer; color: #fff; background: radial-gradient(circle at 50% 46%, rgba(8, 8, 10, 0) 0, rgba(8, 8, 10, 0.18) 40%, rgba(8, 8, 10, 0.62) 100%); }
.video-play span { width: clamp(64px, 6.4vw, 82px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform 0.4s var(--ease), background-color 0.4s var(--ease); }
.video-play svg { width: 32%; height: 32%; margin-left: 7%; }
.video-play b { color: rgba(255, 255, 255, 0.92); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
html[lang="ar"] .video-play b { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.video-play:hover span { transform: scale(1.06); background: rgba(255, 255, 255, 0.24); }
.video-frame.playing .video-play { display: none; }
.video-credit { margin-top: 12px; font-size: 0.78rem; color: var(--stone); }
.panel { border: 1px solid var(--line); border-radius: 12px; background: rgba(12, 12, 15, 0.9); padding: clamp(24px, 3vw, 36px); display: grid; gap: 14px; align-content: start; min-width: 0; transition: border-color 0.4s; }
.panel:hover { border-color: var(--line-strong); }
.panel h4 { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); }
.panel p { color: var(--sand); }

/* ---------- Experience ---------- */
/* Newest first, by start date: dates on one side of a gold rail, the role on the other; the ongoing role's node glows */
.timeline { --tl-col: 210px; --tl-gap: 84px; position: relative; display: grid; }
.timeline::before { content: ""; position: absolute; inset-block: 44px 44px; inset-inline-start: calc(var(--tl-col) + var(--tl-gap) / 2); width: 1px; background: linear-gradient(var(--gold), var(--line-strong) 14%, var(--line-strong) 86%, transparent); }
.role { position: relative; display: grid; grid-template-columns: var(--tl-col) minmax(0, 1fr); gap: 0 var(--tl-gap); padding-block: 36px; }
.role::before { content: ""; position: absolute; top: 50px; inset-inline-start: calc(var(--tl-col) + var(--tl-gap) / 2 - 6px); width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--gold); box-shadow: 0 0 0 5px rgba(214, 180, 122, 0.07); }
.role.is-current::before { background: var(--gold-grad); box-shadow: 0 0 0 5px rgba(214, 180, 122, 0.14), 0 0 20px rgba(214, 180, 122, 0.65); }
.when { display: grid; gap: 6px; align-content: start; justify-items: end; text-align: end; padding-top: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.when-meta { color: var(--stone); font-weight: 600; }
.role-body { display: grid; gap: 14px; min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: rgba(12, 12, 15, 0.9); padding: clamp(20px, 2.4vw, 30px); }
.role-body h3 { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem); }
.org { color: var(--ivory); font-weight: 600; }
.org span { color: var(--stone); font-weight: 500; }
.role-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.role-video { max-width: 620px; margin-top: 8px; }

/* ---------- Leadership photos ---------- */
/* two compact framed photos with the caption laid over a soft gradient */
.lead-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 16px; margin-top: 20px; }
.lead-photos .photo { position: relative; gap: 0; }
.lead-photos .photo button { border-radius: 14px; border: 1px solid var(--line-strong); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9); }
.lead-photos .photo img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
.lead-photos .photo:last-child img { object-position: 72% 52%; }
.lead-photos figcaption { position: absolute; inset: auto 1px 1px; padding: 30px 14px 10px; border-radius: 0 0 13px 13px; background: linear-gradient(transparent, rgba(8, 8, 10, 0.88)); color: var(--ivory); font-size: 0.74rem; line-height: 1.45; pointer-events: none; }

/* ---------- Certificates ---------- */
/* Credential cards: the certificate sits like paper on a dark stage (it straightens on hover), then issuer, type, figures,
   skills and the view / verify actions. Phones get a swipeable row per group. */
.certs { margin-top: clamp(72px, 9vw, 120px); }
.certs-group { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 40px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.certs-count { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--stone); }
.cert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cert-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 19, 23, 0.92), rgba(11, 11, 13, 0.94));
  transition: border-color 0.4s, transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.cert-card:hover { border-color: var(--line-strong); transform: translateY(-6px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 24px 60px -44px rgba(214, 180, 122, 0.4); }
.cert-visual { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; padding: 30px 28px; border: 0; border-bottom: 1px solid var(--line); cursor: zoom-in; overflow: hidden; perspective: 1000px;
  background: radial-gradient(80% 70% at 50% 42%, rgba(214, 180, 122, 0.17), transparent 70%), linear-gradient(160deg, #18171c, #0b0b0d); }
.cert-paper { display: block; width: 80%; border-radius: 4px; overflow: hidden; background: #fff; transform: rotateX(7deg) rotateY(-10deg) rotateZ(-1.2deg); transform-origin: 50% 60%;
  box-shadow: 0 30px 50px -18px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06); transition: transform 0.8s var(--ease); }
html[dir="rtl"] .cert-paper { transform: rotateX(7deg) rotateY(10deg) rotateZ(1.2deg); }
.cert-paper img { display: block; width: 100%; height: auto; }
.cert-card:hover .cert-paper, .cert-visual:focus-visible .cert-paper { transform: none; }
.cert-kind { position: absolute; z-index: 1; top: 14px; inset-inline-start: 14px; padding: 5px 11px; border-radius: 999px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-hi); background: rgba(8, 8, 10, 0.86); border: 1px solid var(--line-strong); }
.cert-zoom { position: absolute; z-index: 1; bottom: 12px; inset-inline-end: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ivory);
  background: rgba(8, 8, 10, 0.72); border: 1px solid var(--line-strong); opacity: 0; transform: scale(0.9); transition: opacity 0.3s, transform 0.3s; }
.cert-zoom svg { width: 15px; height: 15px; }
.cert-card:hover .cert-zoom { opacity: 1; transform: none; }
.cert-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; }
.cert-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; }
.cert-issuer { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: var(--sand); }
.cert-logo { width: 18px; height: 18px; flex: none; background: center / contain no-repeat; }
.cert-logo + .cert-logo { margin-inline-start: -3px; }
.cert-logo.wide { width: 46px; height: 22px; }
.cert-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; }
.cert-badge.ok { color: var(--live); background: rgba(98, 201, 157, 0.09); border: 1px solid rgba(98, 201, 157, 0.3); }
.cert-badge svg { width: 12px; height: 12px; }
.cert-body h4 { font-size: clamp(1.2rem, 1rem + 0.55vw, 1.45rem); line-height: 1.22; }
.cert-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.cert-chip { padding: 4px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 700; color: var(--sand); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.cert-chip.gold { color: #120f08; background: var(--gold-grad); border-color: transparent; }
.cert-desc { color: var(--sand); font-size: 0.93rem; }
.cert-skills { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cert-skills li { position: relative; padding-inline-start: 12px; font-size: 0.74rem; color: var(--stone); }
.cert-skills li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0.7; }
.cert-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.cert-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ivory);
  font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: border-color 0.25s, background-color 0.25s; }
.cert-btn:hover { border-color: var(--gold); background: var(--gold-soft); }
.cert-more { color: var(--gold); }
.cert-code { font-family: var(--font-mono); font-size: 0.72rem; color: var(--stone); }
html[lang="ar"] .cert-kind { font-family: var(--font-ar); font-size: 0.74rem; letter-spacing: 0; text-transform: none; }
html[lang="ar"] .cert-chip, html[lang="ar"] .cert-badge, html[lang="ar"] .cert-btn, html[lang="ar"] .cert-issuer { font-family: var(--font-ar); }
html[lang="ar"] .cert-skills li { font-size: 0.82rem; }
html[lang="ar"] .cert-skills li::before { top: 0.9em; }

/* ---------- Research ---------- */
.paper { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.paper-main { display: grid; gap: 22px; min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: rgba(12, 12, 15, 0.9); padding: clamp(22px, 3vw, 40px); }
.paper-title { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.12; direction: ltr; text-align: left; font-family: var(--font-display) !important; font-style: italic; font-weight: 500; }
.authors { direction: ltr; text-align: left; color: var(--sand); }
.authors strong { color: var(--gold-hi); font-weight: 700; }
.venue { color: var(--stone); font-size: 0.95rem; }
.venue b { color: var(--ivory); font-weight: 600; }
.paper-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.paper-facts li { padding: 16px 0; padding-inline-end: 14px; display: grid; gap: 4px; min-width: 0; }
.paper-facts li + li { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
.paper-facts strong { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; }
html[lang="ar"] .paper-facts strong { font-family: var(--font-ar-display); }
.paper-facts span { font-size: 0.8125rem; color: var(--sand); }
.paper-media { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 16px; }
.photo { margin: 0; display: grid; gap: 10px; min-width: 0; }
.photo button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; overflow: hidden; display: block; width: 100%; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.photo img { width: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.photo button:hover img { transform: scale(1.04); }
.photo-wide { grid-column: 1 / -1; }
.photo-wide img { aspect-ratio: 16 / 9; }
.photo-tall img { aspect-ratio: 4 / 5; object-position: 62% 40%; }
.photo figcaption { font-size: 0.75rem; color: var(--stone); }
.honors { margin-top: clamp(64px, 8vw, 110px); }
.honor-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.honor { padding: 26px 0; padding-inline-end: 22px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; align-content: start; min-width: 0; }
.honor:not(:nth-child(3n + 1)) { padding-inline-start: 22px; border-inline-start: 1px solid var(--line); }
.honor b { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.2; color: var(--ivory); }
html[lang="ar"] .honor b { font-family: var(--font-ar-display); font-size: 1.15rem; }
.honor span { color: var(--sand); font-size: 0.9rem; }
.honor .text-link { justify-self: start; margin-top: 6px; }

/* ---------- Leadership ---------- */
.lead-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; }
.lead-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.lead-nums li { padding: 18px 0; padding-inline-end: 14px; display: grid; gap: 4px; }
.lead-nums li + li { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
.lead-nums strong { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; }
html[lang="ar"] .lead-nums strong { font-family: var(--font-ar-display); }
.lead-nums span { font-size: 0.8125rem; color: var(--sand); }

/* ---------- Skills ---------- */
.marquee { direction: ltr; overflow: hidden; border-block: 1px solid var(--line); padding-block: 18px; margin-bottom: 56px; display: grid; gap: 10px; }
.marquee-row { display: flex; width: max-content; animation: tick 60s linear infinite; }
.marquee-row.rev { animation-direction: reverse; }
.tech { display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; margin-inline-end: 42px; flex: none; }
.tech .logo { width: clamp(30px, 2.6vw, 44px); height: clamp(30px, 2.6vw, 44px); flex: none; background: var(--c, var(--gold)); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.tech b { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); font-weight: 500; color: var(--ivory); }
.tech:nth-child(even) b { color: transparent; -webkit-text-stroke: 1px rgba(244, 239, 230, 0.6); font-style: italic; }
.chips li { display: inline-flex; align-items: center; gap: 6px; }
.chips .ci { width: 12px; height: 12px; flex: none; background: var(--c, var(--gold)); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.skill-group { padding: 28px 0; padding-inline-end: 24px; border-bottom: 1px solid var(--line); display: grid; gap: 14px; align-content: start; min-width: 0; }
.skill-group:not(:nth-child(3n + 1)) { padding-inline-start: 24px; border-inline-start: 1px solid var(--line); }
.skill-group h3 { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
html[lang="ar"] .skill-group h3 { font-family: var(--font-ar); letter-spacing: 0; font-size: 0.9rem; }

/* ---------- Education ---------- */
.edu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.degree { display: grid; gap: 12px; align-content: start; border: 1px solid var(--line); border-radius: 18px; background: rgba(12, 12, 15, 0.9); padding: clamp(22px, 3vw, 40px); }
.degree h3 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); }
.degree p { color: var(--sand); }
.gpa { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.gpa strong { font-family: var(--font-display); font-size: clamp(4rem, 3rem + 4vw, 6.5rem); line-height: 0.9; font-weight: 600; }
.gpa span { color: var(--sand); }
.cert-list { display: grid; border-top: 1px solid var(--line); }
.cert-list li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cert-list b { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.cert-list span { color: var(--ivory); }

/* ---------- Contact ---------- */
.contact { text-align: center; }
.contact .eyebrow { justify-content: center; }
.contact h2 { font-size: clamp(3rem, 1.6rem + 6vw, 7.2rem); max-width: 15ch; margin: 22px auto 0; }
.contact-lead { color: var(--sand); max-width: 54ch; margin: 26px auto 0; font-size: 1.125rem; }
.contact-mail { display: inline-block; margin-top: 42px; font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 1rem + 2.6vw, 3.2rem); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; transition: border-color 0.3s, color 0.3s; direction: ltr; }
.contact-mail:hover { color: var(--gold-hi); border-color: var(--gold); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }
.contact-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; border-top: 1px solid var(--line); text-align: center; }
.contact-list li { padding: 24px 14px; display: grid; gap: 6px; justify-items: center; align-content: start; min-width: 0; }
.contact-list li + li { border-inline-start: 1px solid var(--line); }
.contact-list a.value { border-bottom: 1px solid transparent; transition: border-color 0.3s, color 0.3s; }
.contact-list a.value:hover { border-bottom-color: var(--gold); }
.sub-link { font-size: 0.78rem; font-weight: 700; color: var(--stone); text-decoration: underline; text-underline-offset: 3px; }
.sub-link:hover { color: var(--gold-hi); }
.contact-list small { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.contact-list .value { color: var(--ivory); text-decoration: none; word-break: break-word; }
.contact-list a.value:hover { color: var(--gold-hi); }
.copy-btn { justify-self: start; border: 0; background: none; padding: 0; color: var(--stone); font-size: 0.78rem; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.copy-btn:hover { color: var(--gold-hi); }
.copy-btn.is-done { color: var(--live); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 30px calc(30px + env(safe-area-inset-bottom, 0px)); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; color: var(--stone); font-size: 0.8rem; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-brand img { width: 26px; height: 26px; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); }
.lb-backdrop { position: absolute; inset: 0; background: rgba(3, 3, 4, 0.96); }
.lb-panel { position: relative; width: min(1440px, 100%); max-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid var(--line-strong); border-radius: 14px; background: #060607; color: var(--ivory); overflow: hidden; box-shadow: 0 60px 140px -40px rgba(0, 0, 0, 0.95); animation: lb-in 0.45s var(--ease); }
@keyframes lb-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.lb-top { display: flex; align-items: center; gap: 12px; padding: 12px; padding-inline-start: 20px; border-bottom: 1px solid var(--line); }
.lb-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-inline-end: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[lang="ar"] .lb-title { font-family: var(--font-ar-display); font-size: 1.05rem; }
.lb-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--stone); white-space: nowrap; }
.lb-close, .lb-nav { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(8, 8, 10, 0.7); cursor: pointer; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; }
.lb-close:hover, .lb-nav:hover { border-color: var(--gold); background: var(--gold-soft); }
.lb-stage { position: relative; display: grid; place-items: center; width: 100%; background: #030304; min-width: 0; min-height: 0; overflow: hidden; }
/* sized by max-width/max-height only (no 100% height): Safari would otherwise size the grid item from the image and overflow the screen */
.lb-stage img { display: block; width: auto; height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: calc(100dvh - 180px); object-fit: contain; } /* title bar + caption + frame padding */
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-nav.prev { inset-inline-start: 14px; }
.lb-nav.next { inset-inline-end: 14px; }
.lb-nav svg { width: 18px; height: 18px; }
html[dir="rtl"] .lb-nav svg { transform: scaleX(-1); } /* drawn chevrons flip once for Arabic (text arrows were mirrored twice) */
.lb-cap { padding: 12px 20px 14px; font-size: 0.9rem; color: var(--sand); border-top: 1px solid var(--line); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav li > a { padding: 8px 8px; letter-spacing: 0.08em; }
  .header-cv { display: none; }
}
@media (max-width: 1020px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-inner { display: flex; }
  .brand { margin-inline-end: auto; }
  .menu-toggle { display: grid; }
  /* Full-screen menu: opaque, large numbered links that rise in one after another, contact details at the foot */
  .nav { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(104px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    background: radial-gradient(120% 55% at 50% 0%, rgba(214, 180, 122, 0.11), transparent 62%), #08080a;
    opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s; }
  .nav-open .nav { opacity: 1; visibility: visible; }
  .nav-open .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; counter-reset: navi; }
  .nav li { counter-increment: navi; opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
  .nav-open .nav li { opacity: 1; transform: none; }
  .nav li:nth-child(2) { transition-delay: 0.04s; } .nav li:nth-child(3) { transition-delay: 0.08s; } .nav li:nth-child(4) { transition-delay: 0.12s; }
  .nav li:nth-child(5) { transition-delay: 0.16s; } .nav li:nth-child(6) { transition-delay: 0.2s; }
  .nav li > a, html[lang="ar"] .nav li > a { display: flex; align-items: baseline; gap: 18px; padding: 15px 2px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 3vw, 2.6rem); font-weight: 500; line-height: 1.1; letter-spacing: 0; text-transform: none; color: var(--ivory); }
  html[lang="ar"] .nav li > a { font-family: var(--font-ar-display); font-size: clamp(1.7rem, 1.25rem + 2.6vw, 2.2rem); }
  .nav li > a::before { content: counter(navi, decimal-leading-zero); flex: none; min-width: 2.2ch; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--gold); }
  .nav li > a[aria-current="true"] { color: var(--gold-hi); }
  .nav li > a::after { display: none; }
  .nav-foot { display: grid; gap: 14px; margin-top: auto; padding-top: 32px; opacity: 0; transform: translateY(18px); transition: opacity 0.5s var(--ease) 0.24s, transform 0.6s var(--ease) 0.24s; }
  .nav-open .nav-foot { opacity: 1; transform: none; }
  .nav-foot .btn { justify-content: center; min-height: 52px; }
  .nav-contact { color: var(--sand); text-decoration: none; font-size: 0.95rem; text-align: center; }
  .chapter-head, .chapter-details { grid-template-columns: minmax(0, 1fr); }
  .stage-media { padding-inline-end: 9%; padding-bottom: 10%; }
  .about-grid, .paper, .edu-grid, .lead-grid { grid-template-columns: minmax(0, 1fr); }
  .portrait { max-width: 440px; }
}
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .stat:nth-child(n + 3) { margin-top: 22px; }
  .timeline { --tl-col: 0px; --tl-gap: 0px; padding-inline-start: 30px; }
  .timeline::before { inset-inline-start: 6px; inset-block: 36px 36px; }
  .role { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 28px; }
  .role::before { inset-inline-start: -30px; top: 32px; }
  .role + .role { border-top: 1px solid var(--line); }
  .when { justify-items: start; text-align: start; padding-top: 0; gap: 2px; }
  .site-grid, .also { grid-template-columns: minmax(0, 1fr); }
  .honor-list, .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .honor:not(:nth-child(3n + 1)), .skill-group:not(:nth-child(3n + 1)) { padding-inline-start: 0; border-inline-start: 0; }
  .honor:nth-child(even), .skill-group:nth-child(even) { padding-inline-start: 22px; border-inline-start: 1px solid var(--line); }
  .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-list li:nth-child(3) { border-inline-start: 0; }
  .contact-list li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  :root { --gutter: 18px; }
  .brand-name { display: none; }
  .hero { min-height: 0; position: relative; padding-top: 8px; }
  /* dims only behind the paragraph and buttons, so the monogram above the name stays bright */
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 0, transparent 26%, rgba(8, 8, 10, 0.7) 40%, rgba(8, 8, 10, 0.7) 80%, rgba(8, 8, 10, 0.15)); }
  .hero-copy p, .stat span { text-shadow: 0 2px 14px rgba(8, 8, 10, 0.95), 0 0 2px rgba(8, 8, 10, 0.8); }
  /* text-shadow paints over background-clip text, so the gold name gets a filter instead */
  .hero-name .gold-text { filter: drop-shadow(0 2px 10px rgba(8, 8, 10, 0.9)); }
  .hero-sub { color: #d3cbbd; font-size: 0.98rem; }
  html[lang="ar"] .hero-sub { line-height: 1.85; }
  .portrait-photo { aspect-ratio: 1 / 1.05; object-position: 50% 24%; }
  .hero-actions .btn { flex: 1 1 auto; }
  .kpis, .paper-facts, .lead-nums { grid-template-columns: minmax(0, 1fr); }
  .kpi + .kpi, .paper-facts li + li, .lead-nums li + li { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--line); }
  .facts, .honor-list, .skill-grid, .contact-list { grid-template-columns: minmax(0, 1fr); }
  .facts div:nth-child(even), .honor:nth-child(even), .skill-group:nth-child(even) { padding-inline-start: 0; border-inline-start: 0; }
  .contact-list li + li { border-inline-start: 0; border-top: 1px solid var(--line); }
  .also { grid-template-columns: minmax(0, 1fr); }
  .mini-case div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lead-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lead-photos figcaption { font-size: 0.66rem; padding: 22px 10px 8px; }
  .phone { width: 27%; border-width: 4px; border-radius: 18px; }
  .site-phone { width: 26%; border-width: 4px; border-radius: 18px; }
  .site-stage { padding-inline-end: 10%; padding-bottom: 12%; }
  .paper-media { grid-template-columns: minmax(0, 1fr); }
  .cert-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  /* phones: the arrows sit in their own strip under the image instead of on top of it */
  .lb-stage { padding-bottom: 60px; }
  .lb-stage img { max-height: calc(100dvh - 250px); }
  .lb-nav { top: auto; bottom: 9px; transform: none; }
  .portrait::before { inset: 12px -12px -12px 12px; }
  html[dir="rtl"] .portrait::before { inset: 12px 12px -12px -12px; }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  /* screenshot tabs and tech tags become one swipeable row that bleeds to the screen edge */
  .tabs, .chapter-details > .chips, .site-body > .chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); }
  .tabs::-webkit-scrollbar, .chapter-details > .chips::-webkit-scrollbar, .site-body > .chips::-webkit-scrollbar { display: none; }
  .tab, .chapter-details > .chips li, .site-body > .chips li { flex: none; scroll-snap-align: start; }
  .tabs { margin-top: 16px; }
  /* the three-point summary reads as one glass card */
  .case { padding: 2px 18px; }
  .case-step { padding-block: 18px; }
  .case-step:last-child { border-bottom: 0; }
  .chapter { padding-block: 64px; gap: 26px; }
  .chapter-details { gap: 18px; }
  /* certificates: one swipeable row per group */
  .cert-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter); }
  .cert-grid::-webkit-scrollbar { display: none; }
  .cert-card { scroll-snap-align: start; }
  .cert-card:hover { transform: none; }
  .cert-visual { padding: 24px 22px; }
  .cert-paper { width: 84%; }
  /* each 3D section opens with its shape, centered, above the heading (the shape scrolls with this space) */
  .m-stage { display: block; height: 190px; margin: -36px 0 14px; pointer-events: none; }
  .hero .m-stage { height: 210px; margin: 0 0 6px; }
  /* floating quick-contact bar */
  .dock { display: flex; position: fixed; z-index: 55; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 160%); gap: 6px; padding: 6px; border-radius: 999px;
    background: rgba(14, 14, 17, 0.96); border: 1px solid var(--line-strong);
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.9); transition: transform 0.55s var(--ease); }
  .dock.show { transform: translate(-50%, 0); }
  .nav-open .dock { transform: translate(-50%, 160%); }
  .dock-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; color: var(--ivory); font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
  .dock-btn svg, .dock-ic { width: 17px; height: 17px; flex: none; }
  .dock-ic { background: var(--c); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
  .dock-btn:active { background: rgba(255, 255, 255, 0.06); }
  .dock-cv { background: var(--gold-grad); color: #120f08; }
  html[lang="ar"] .dock-btn { font-family: var(--font-ar); font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* Calm mode (often just Windows' animation effects switched off): no slide-ins or device tilt, but the ambient
     loops keep running slowly, as requested, so the page never looks frozen */
  .motion [data-reveal] { transform: none; transition-duration: 0.4s; }
  .device { transform: none !important; }
  .ticker-track { animation-duration: calc(var(--dur, 60s) * 1.5) !important; }
  .marquee-row { animation-duration: 90s !important; }
  .site.auto .site-view img, .site.auto .site-phone img { animation-duration: 28s !important; }
}